From 517dcf646e88cf8de8957032d799417c9b003d66 Mon Sep 17 00:00:00 2001 From: Khushboo-dev-cpp <60327365+Khushboo-dev-cpp@users.noreply.github.com> Date: Tue, 14 Jun 2022 11:07:08 +0530 Subject: [PATCH] feat(StatusFloatingButtonsSelector): Implements the floating buttons selector widget (#681) To be used in with StatusModal or independently --- ui/StatusQ/sandbox/controls/Buttons.qml | 5 + ui/StatusQ/sandbox/controls/Popups.qml | 58 +++++++- .../src/StatusQ/Controls/StatusBaseButton.qml | 8 ++ .../StatusFloatingButtonsSelector.qml | 133 ++++++++++++++++++ ui/StatusQ/src/StatusQ/Controls/qmldir | 1 + ui/StatusQ/src/StatusQ/Popups/StatusModal.qml | 7 + 6 files changed, 211 insertions(+), 1 deletion(-) create mode 100644 ui/StatusQ/src/StatusQ/Controls/StatusFloatingButtonsSelector.qml diff --git a/ui/StatusQ/sandbox/controls/Buttons.qml b/ui/StatusQ/sandbox/controls/Buttons.qml index 021994102d..35a93a57b2 100644 --- a/ui/StatusQ/sandbox/controls/Buttons.qml +++ b/ui/StatusQ/sandbox/controls/Buttons.qml @@ -319,4 +319,9 @@ Column { } } + // Button with emoji + StatusButton { + text: "Button with Emoji" + icon.emoji: "🖼️️" + } } diff --git a/ui/StatusQ/sandbox/controls/Popups.qml b/ui/StatusQ/sandbox/controls/Popups.qml index fce9a92599..1903e47973 100644 --- a/ui/StatusQ/sandbox/controls/Popups.qml +++ b/ui/StatusQ/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 { diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusBaseButton.qml b/ui/StatusQ/src/StatusQ/Controls/StatusBaseButton.qml index 79a6bb2a64..c297b01ccb 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusBaseButton.qml +++ b/ui/StatusQ/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 diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusFloatingButtonsSelector.qml b/ui/StatusQ/src/StatusQ/Controls/StatusFloatingButtonsSelector.qml new file mode 100644 index 0000000000..b4a62f2af6 --- /dev/null +++ b/ui/StatusQ/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 + } + } + } +} diff --git a/ui/StatusQ/src/StatusQ/Controls/qmldir b/ui/StatusQ/src/StatusQ/Controls/qmldir index f103fd1cc7..7473560857 100644 --- a/ui/StatusQ/src/StatusQ/Controls/qmldir +++ b/ui/StatusQ/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 diff --git a/ui/StatusQ/src/StatusQ/Popups/StatusModal.qml b/ui/StatusQ/src/StatusQ/Popups/StatusModal.qml index ee89a45867..66065d3cda 100644 --- a/ui/StatusQ/src/StatusQ/Popups/StatusModal.qml +++ b/ui/StatusQ/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 }