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 }