Warning, /maui/mauikit-filebrowsing/src/controls.6/TagsBar.qml is written in an unsupported language. File is not indexed.
0001 /* 0002 * Copyright 2018 Camilo Higuita <milo.h@aol.com> 0003 * 0004 * This program is free software; you can redistribute it and/or modify 0005 * it under the terms of the GNU Library General Public License as 0006 * published by the Free Software Foundation; either version 2, or 0007 * (at your option) any later version. 0008 * 0009 * This program is distributed in the hope that it will be useful, 0010 * but WITHOUT ANY WARRANTY; without even the implied warranty of 0011 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 0012 * GNU General Public License for more details 0013 * 0014 * You should have received a copy of the GNU Library General Public 0015 * License along with this program; if not, write to the 0016 * Free Software Foundation, Inc., 0017 * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. 0018 */ 0019 0020 import QtQuick 0021 import QtQuick.Controls 0022 0023 import org.mauikit.controls 1.3 as Maui 0024 0025 import "private" as Private 0026 0027 /** 0028 * @inherit QtQuick.Item 0029 * @brief A bar to list, add or remove tags for a given set of files. 0030 * @see TagsList::urls 0031 * @see list 0032 * 0033 * The retrieved file tags can be restricted to only tags created/associated by the app itself or by any app, this can be tweaked via the `list.strict` property. 0034 * @see list 0035 * 0036 * @image html tagsbar.png "Example using TagsBar and FileBrowser controls" 0037 * 0038 * @code 0039 * Maui.Page 0040 * { 0041 * id: _tagPreviewPage 0042 * Maui.Controls.showCSD: true 0043 * anchors.fill: parent 0044 * 0045 * property var fileItem //A map object representing some properties from a file, such as its name, icon, url, etc. 0046 * 0047 * Maui.Holder 0048 * { 0049 * anchors.fill: parent 0050 * emojiSize: 100 0051 * imageSource: _tagPreviewPage.fileItem.thumbnail 0052 * title: _tagPreviewPage.fileItem.name 0053 * } 0054 * 0055 * footer: FB.TagsBar 0056 * { 0057 * list.strict: false 0058 * list.urls: [_tagPreviewPage.fileItem.url] 0059 * width: parent.width 0060 * 0061 * onTagsEdited: (tags) => list.updateToUrls(tags) 0062 * } 0063 * } 0064 * } 0065 * @endcode 0066 * 0067 * <a href="https://invent.kde.org/maui/mauikit-filebrowser/examples/TagsBar.qml">You can find a more complete example at this link.</a> 0068 */ 0069 Item 0070 { 0071 id: control 0072 0073 focus: true 0074 implicitHeight: Maui.Style.toolBarHeight + Maui.Style.space.tiny 0075 0076 /** 0077 * @brief An alias to the flickable element listing the tag buttons. 0078 * It is exposed to fine tune more of this control properties. 0079 * @property Taglist TagsBar::listView 0080 */ 0081 readonly property alias listView : tagsList 0082 0083 /** 0084 * @brief The total amount of tag elements 0085 * @property int TagsBar::count 0086 */ 0087 readonly property alias count : tagsList.count 0088 0089 /** 0090 * @brief Whether the bar should be in edit mode or not. This can be also triggered by the user using the attached action buttons in the right side of the bar. 0091 * In edit mode the bar exposes a text field, where all the tag elements are plain text divided by comma. The text can be edited to remove tags or add more. 0092 * @see allowEditMode 0093 * By default this is set to `false`. 0094 */ 0095 property bool editMode : false 0096 0097 /** 0098 * @brief Whether the bar exposes to the user the action buttons that allow to go into edit mode, or to remove the tag elements manually. 0099 * By default this is set to `false` 0100 */ 0101 property bool allowEditMode : false 0102 0103 /** 0104 * @see TagList::list 0105 * @brief To associate a one or a group of file URLs, use `list.urls`, or to disable the strict mode use `list.strict: false`, etc. Read more about the available properties in the TagsListModel documentation page. 0106 * @property TagsListModel TagsBar::list 0107 */ 0108 readonly property alias list : tagsList.list 0109 0110 /** 0111 * Emitted when the close/dismiss button of a tag element has been clicked. 0112 * @param index the index position of the tag element 0113 * 0114 * @note To retrieve information of the tag given the index position, use the alias property function`list.get(index)` 0115 */ 0116 signal tagRemovedClicked(int index) 0117 0118 /** 0119 * Emitted when a tag element has been clicked. 0120 * @param tag the name of the tag element 0121 */ 0122 signal tagClicked(string tag) 0123 0124 /** 0125 * @brief Emitted when the tags have been manually edited by the user via the text field input. 0126 * @param tags the list of tags entered in the text field. 0127 */ 0128 signal tagsEdited(var tags) 0129 0130 Loader 0131 { 0132 anchors.fill: parent 0133 active: control.editMode 0134 visible: active 0135 asynchronous: true 0136 0137 sourceComponent: TextField 0138 { 0139 id: editTagsEntry 0140 0141 focus: true 0142 0143 activeFocusOnPress : true 0144 0145 text: list.tags.join(",") 0146 0147 Component.onCompleted: 0148 { 0149 editTagsEntry.forceActiveFocus() 0150 } 0151 0152 onAccepted: 0153 { 0154 control.tagsEdited(getTags()) 0155 control.closeEditMode() 0156 } 0157 0158 actions: Action 0159 { 0160 icon.name: "checkbox" 0161 onTriggered: editTagsEntry.accepted() 0162 } 0163 0164 background: Rectangle 0165 { 0166 color: "transparent" 0167 } 0168 0169 function getTags() 0170 { 0171 if(!editTagsEntry.text.length > 0) 0172 { 0173 return 0174 } 0175 0176 var tags = [] 0177 if(editTagsEntry.text.trim().length > 0) 0178 { 0179 var list = editTagsEntry.text.split(",") 0180 0181 if(list.length > 0) 0182 { 0183 for(var i in list) 0184 { 0185 tags.push(list[i].trim()) 0186 0187 } 0188 } 0189 } 0190 0191 return tags 0192 } 0193 } 0194 } 0195 0196 Private.TagList 0197 { 0198 id: tagsList 0199 anchors.fill: parent 0200 0201 visible: !control.editMode 0202 0203 showPlaceHolder: allowEditMode 0204 showDeleteIcon: allowEditMode 0205 0206 onTagRemoved: (index) => tagRemovedClicked(index) 0207 0208 onTagClicked: (index) => control.tagClicked(tagsList.list.get(index).tag) 0209 0210 onAreaClicked: 0211 { 0212 if(allowEditMode) 0213 { 0214 goEditMode() 0215 } 0216 } 0217 } 0218 0219 /** 0220 * @brief Force the bar to go into editing mode. 0221 */ 0222 function goEditMode() 0223 { 0224 control.forceActiveFocus() 0225 control.editMode = true 0226 } 0227 0228 /** 0229 * @brief Force to exit the editing mode. 0230 */ 0231 function closeEditMode() 0232 { 0233 control.editMode = false 0234 } 0235 }