feat(StatusFloatingButtonsSelector): Implements the floating buttons selector widget (#681)

To be used in with StatusModal or independently
2022-06-14 11:07:08 +05:30 · 2022-06-14 11:07:08 +05:30 · d5df8b42a7
parent c0639d8b8e
commit d5df8b42a7
6 changed files with 211 additions and 1 deletions
--- a/sandbox/controls/Buttons.qml
+++ b/sandbox/controls/Buttons.qml
@ -319,4 +319,9 @@ Column {
        }
    }

+    // Button with emoji
+    StatusButton {
+        text: "Button with Emoji"
+        icon.emoji: "🖼️️"
+    }
 }
--- a/sandbox/controls/Popups.qml
+++ b/sandbox/controls/Popups.qml
@ -4,6 +4,9 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1
+import StatusQ.Components 0.1
+import StatusQ.Popups 0.1
+import StatusQ.Core.Utils 0.1

 Column {
    spacing: 20
@ -83,6 +86,12 @@ Column {
        onClicked: advancedHeaderFooterModal.open()
    }

+
+    StatusButton {
+        text: "Modal with Floating header Buttons"
+        onClicked: floatingHeaderModal.open()
+    }
+
    StatusModal {
        id: simpleModal
        anchors.centerIn: parent
@ -394,10 +403,57 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
        }
    }

+    StatusModal {
+        id: floatingHeaderModal
+        anchors.centerIn: parent
+        height: 200
+        showHeader: false
+        showFooter: false
+        showAdvancedHeader: true
+        hasFloatingButtons: true
+        advancedHeaderComponent: StatusFloatingButtonsSelector {
+            id: floatingHeader
+            model: dummyAccountsModel
+            delegate: Rectangle {
+                width: button.width
+                height: button.height
+                radius: 8
+                visible: visibleIndices.includes(index)
+                StatusButton {
+                    id: button
+                    topPadding: 8
+                    bottomPadding: 0
+                    implicitHeight: 32
+                    defaultLeftPadding: 4
+                    text: name
+                    icon.emoji: !!emoji ? emoji: ""
+                    icon.emojiSize: Emoji.size.middle
+                    icon.name: !emoji ? "filled-account": ""
+                    normalColor: "transparent"
+                    highlighted: index === floatingHeader.currentIndex
+                    onClicked: {
+                        floatingHeader.currentIndex = index
+                    }
+                }
+            }
+            popupMenuDelegate: StatusListItem {
+                implicitWidth: 272
+                title: name
+                onClicked: floatingHeader.itemSelected(index)
+                visible: !visibleIndices.includes(index)
+            }
+        }
+    }
+
    ListModel {
        id: dummyAccountsModel
-        ListElement{name: "Account 1"; iconName: "filled-account"}
+        ListElement{name: "Account 1"; iconName: "filled-account"; emoji:  "🥑"}
        ListElement{name: "Account 2"; iconName: "filled-account"}
+        ListElement{name: "Account 3"; iconName: "filled-account"}
+        ListElement{name: "Account 4"; iconName: "filled-account"}
+        ListElement{name: "Account 5"; iconName: "filled-account"}
+        ListElement{name: "Account 6"; iconName: "filled-account"}
+        ListElement{name: "Account 7"; iconName: "filled-account"}
    }

    StatusSpellcheckingMenuItems {
--- a/src/StatusQ/Controls/StatusBaseButton.qml
+++ b/src/StatusQ/Controls/StatusBaseButton.qml
@ -2,6 +2,7 @@ import QtQuick 2.14
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
+import StatusQ.Core.Utils 0.1

 Rectangle {
    id: statusBaseButton
@ -133,6 +134,13 @@ Rectangle {
                visible: statusBaseButton.icon.name !== ""
                color: d.textColor
            } // Icon
+            StatusEmoji {
+                width: statusBaseButton.icon.width
+                height: statusBaseButton.icon.height
+                anchors.verticalCenter: parent.verticalCenter
+                visible: statusBaseButton.icon.emoji
+                emojiId: Emoji.iconId(statusBaseButton.icon.emoji, statusBaseButton.icon.emojiSize) || ""
+            } // Emoji
            StatusBaseText {
                id: label
                opacity: !loading
--- a/src/StatusQ/Controls/StatusFloatingButtonsSelector.qml
+++ b/src/StatusQ/Controls/StatusFloatingButtonsSelector.qml
@ -0,0 +1,133 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+
+/*!
+   \qmltype StatusModalFloatingButtonsSelector
+   \inherits Row
+   \inqmlmodule StatusQ.Controls
+   \since StatusQ.Controls 0.1
+   \brief The StatusModalFloatingButtonsSelector provides a template for creating a selectable buttons list
+   this list can be parially hidden and the rest of the items are shown under the more button in a popup
+
+   Example of how to use it:
+
+   \qml
+        StatusModalFloatingButtonsSelector {
+            id: floatingHeader
+            model: dummyAccountsModel
+            delegate: StatusAccountSelectorTag {
+                title: "name"
+                icon.name: "iconName"
+                isSelected: floatingHeader.currentIndex === index
+                visible: visibleIndices.includes(index)
+                onClicked: floatingHeader.currentIndex = index
+            }
+            popupMenuDelegate: StatusListItem {
+                implicitWidth: 272
+                title: "name"
+                onClicked: floatingHeader.itemSelected(index)
+                visible: !visibleIndices.includes(index)
+            }
+        }
+   \endqml
+
+   For a list of components available see StatusQ.
+*/
+Row {
+    id: floatingButtons
+
+    /*!
+       \qmlproperty delegate
+        This property represents the delegate of selectable items shown to the user.
+        Can be used to assign delegate to the buttons selector
+        \endqml
+    */
+    property alias delegate: itemSelectionRepeater.delegate
+    /*!
+       \qmlproperty popupMenuDelegate
+        This property represents the delegate of popupmenu fropm which items can be selected by the user.
+        Can be used to assign delegate to the popupmenu
+        \endqml
+    */
+    property alias popupMenuDelegate: popupMenuSelectionRepeater.delegate
+
+    /*!
+       \qmlproperty model
+        This property represents the model of selectable items shown to the user.
+        Can be used to assign selectable items in the buttons selector
+        \endqml
+    */
+    property var model
+    /*!
+       \qmlproperty visibleIndices
+        This property represents the indices from the selectable items that will visible to the user
+        Can be used to set visible items in the buttons selector
+        \endqml
+    */
+    property var visibleIndices: [0,1,2]
+    /*!
+       \qmlproperty currentIndex
+        This property represents the index of the currently selected item
+        Can be used to set the currnetly selected item in the buttons selector
+        \endqml
+    */
+    property int currentIndex: 0
+
+    function itemSelected(index) {
+        visibleIndices = [0,1,index]
+        floatingButtons.currentIndex = index
+        popupMenu.close()
+    }
+
+    height: 32
+    spacing: 12
+    clip: true
+
+    Repeater {
+        id: itemSelectionRepeater
+        model: floatingButtons.model
+    }
+
+    Rectangle {
+        width: button.width
+        height: button.height
+        radius: 8
+        visible: floatingButtons.model.count > 3
+        StatusButton {
+            id: button
+            implicitHeight: 32
+            topPadding: 8
+            bottomPadding: 0
+            defaultLeftPadding: 4
+            defaultRightPadding: 4
+            normalColor: "transparent"
+            icon.name: "more"
+            icon.background.color: "transparent"
+            onClicked: popupMenu.popup(parent.x, y + height + 8)
+        }
+    }
+
+    // Empty item to fill up empty space
+    Item {
+        Layout.preferredHeight: parent.height
+        Layout.fillWidth: true
+    }
+
+    StatusPopupMenu {
+        id: popupMenu
+        width: layout.width
+        ColumnLayout {
+            id: layout
+            Repeater {
+                id: popupMenuSelectionRepeater
+                model: floatingButtons.model
+            }
+        }
+    }
+}
--- a/src/StatusQ/Controls/qmldir
+++ b/src/StatusQ/Controls/qmldir
@ -42,3 +42,4 @@ StatusWalletColorSelect 0.1 StatusWalletColorSelect.qml
 StatusColorSelectorGrid 0.1 StatusColorSelectorGrid.qml
 StatusSeedPhraseInput 0.1 StatusSeedPhraseInput.qml
 StatusImageCrop 0.1 StatusImageCrop.qml
+StatusFloatingButtonsSelector 0.1 StatusFloatingButtonsSelector.qml
--- a/src/StatusQ/Popups/StatusModal.qml
+++ b/src/StatusQ/Popups/StatusModal.qml
@ -186,6 +186,12 @@ QC.Popup {
        \endqml
    */
    property alias hasCloseButton: headerImpl.hasCloseButton
+    /*!
+       \qmlproperty hasFloatingButtons
+        This property decides whether the advanced header has floating buttons on top of the Modal
+        \endqml
+    */
+    property bool hasFloatingButtons: false

    signal editButtonClicked()
    signal headerImageClicked()
@ -237,6 +243,7 @@ QC.Popup {
        Loader {
            id: advancedHeader
            anchors.top: parent.top
+            anchors.topMargin: hasFloatingButtons ? -18 - height : 0
            width: visible ? parent.width : 0
            active: showAdvancedHeader
        }