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 }