From 59510b8a0a3488086fd6d6144ef0d7d11290af67 Mon Sep 17 00:00:00 2001 From: Alexandra Betouni <31625338+alexandraB99@users.noreply.github.com> Date: Wed, 30 Mar 2022 01:23:54 +0300 Subject: [PATCH] feat(StatusSeedPhraseInput): exposed keys on pressed signal (#599) * feat(StatusSeedPhraseInput): exposed touch/keys pressed events Exposed keys.onPressed signal, mouse on clicked signal as well as tabNavItem to be set in KeyNavigation.tab when needed Needed for task https://github.com/status-im/status-desktop/issues/4955 * feat(StatusListItem): Added new tags inline in the StatusListItem (#607) Co-authored-by: Khushboo-dev-cpp <60327365+Khushboo-dev-cpp@users.noreply.github.com> --- ui/StatusQ/sandbox/controls/ListItems.qml | 19 ++++++++ .../Components/StatusExpandableItem.qml | 7 +-- .../src/StatusQ/Components/StatusListItem.qml | 17 ++++++- .../src/StatusQ/Controls/StatusBaseInput.qml | 12 ++++- .../src/StatusQ/Controls/StatusInput.qml | 8 ++++ .../Controls/StatusSeedPhraseInput.qml | 48 +++++++++++++++++++ 6 files changed, 105 insertions(+), 6 deletions(-) diff --git a/ui/StatusQ/sandbox/controls/ListItems.qml b/ui/StatusQ/sandbox/controls/ListItems.qml index 0a0516ba9a..a68cec88fd 100644 --- a/ui/StatusQ/sandbox/controls/ListItems.qml +++ b/ui/StatusQ/sandbox/controls/ListItems.qml @@ -4,6 +4,7 @@ import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 import StatusQ.Controls 0.1 import StatusQ.Components 0.1 +import StatusQ.Core.Utils 0.1 GridLayout { columns: 1 @@ -338,6 +339,24 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I } } + StatusListItem { + title: "List Item with Inline Tags" + icon.isLetterIdenticon: true + tagsModel : 2 + tagsDelegate: StatusListItemTag { + color: "blue" + height: 24 + radius: 6 + closeButtonVisible: false + icon.emoji: "😁" + icon.emojiSize: Emoji.size.verySmall + icon.isLetterIdenticon: true + title: "helloworld.eth" + titleText.font.pixelSize: 12 + titleText.color: Theme.palette.indirectColor1 + } + } + StatusListItem { title: "List Item with Emoji" subTitle: "Emoji" diff --git a/ui/StatusQ/src/StatusQ/Components/StatusExpandableItem.qml b/ui/StatusQ/src/StatusQ/Components/StatusExpandableItem.qml index 68ec93955e..5384776065 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusExpandableItem.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusExpandableItem.qml @@ -12,6 +12,7 @@ Rectangle { property alias additionalText: additionalText.text property alias button: button property alias expandableComponent: expandableRegion.sourceComponent + property alias expandableItem: expandableRegion.item property int type: StatusExpandableItem.Type.Primary property bool expandable: true @@ -185,7 +186,7 @@ Rectangle { anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 48 : 0 anchors.right: parent.right anchors.rightMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 16 : 0 - active: false + visible: false } onExpandedChanged: { @@ -202,13 +203,13 @@ Rectangle { name: "EXPANDED" PropertyChanges {target: expandImage; icon: "chevron-up"} PropertyChanges {target: statusExpandableItem; height: 82 + expandableRegion.height + 22} - PropertyChanges {target: expandableRegion; active: true} + PropertyChanges {target: expandableRegion; visible: true} }, State { name: "COLLAPSED" PropertyChanges {target: expandImage; icon: "chevron-down"} PropertyChanges {target: statusExpandableItem; height: 82} - PropertyChanges {target: expandableRegion; active: false} + PropertyChanges {target: expandableRegion; visible: false} } ] diff --git a/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml b/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml index 877ccde483..1cd76b9b0b 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml @@ -25,6 +25,8 @@ Rectangle { property list components property var bottomModel: [] property Component bottomDelegate + property var tagsModel: [] + property Component tagsDelegate property StatusIconSettings icon: StatusIconSettings { height: isLetterIdenticon ? 40 : 20 @@ -71,6 +73,7 @@ Rectangle { property alias statusListItemTertiaryTitle: statusListItemTertiaryTitle property alias statusListItemComponentsSlot: statusListItemComponentsSlot property alias statusListItemTagsSlot: statusListItemTagsSlot + property alias statusListItemInlineTagsSlot: statusListItemTagsSlotInline signal clicked(string itemId) signal titleClicked(string titleId) @@ -247,7 +250,19 @@ Rectangle { width: contentItem.width implicitHeight: visible ? 22 : 0 } - + + Row { + id: statusListItemTagsSlotInline + anchors.top: statusListItemTertiaryTitle.bottom + width: parent.width + spacing: 10 + clip: true + + Repeater { + model: tagsModel + delegate: tagsDelegate + } + } } Row { diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusBaseInput.qml b/ui/StatusQ/src/StatusQ/Controls/StatusBaseInput.qml index 1dced1c6bb..1deec17947 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusBaseInput.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusBaseInput.qml @@ -41,6 +41,7 @@ Item { property real rightPadding: 16 property real topPadding: 12 property real bottomPadding: 12 + property var tabNavItem: null property real minimumHeight: 0 property real maximumHeight: 0 @@ -72,6 +73,8 @@ Item { property Component rightComponent signal iconClicked + signal keyPressed(var event) + signal editClicked() implicitWidth: 448 implicitHeight: multiline ? Math.min(Math.max( @@ -115,8 +118,8 @@ Item { cursorShape: Qt.IBeamCursor onClicked: { edit.forceActiveFocus() + root.editClicked() } - RowLayout { anchors { fill: parent @@ -186,7 +189,12 @@ Item { Keys.onReturnPressed: event.accepted = !multiline Keys.onEnterPressed: event.accepted = !multiline Keys.forwardTo: [root] - Keys.onPressed: edit.keyEvent = event.key + KeyNavigation.priority: !!root.tabNavItem ? KeyNavigation.BeforeItem : KeyNavigation.AfterItem + KeyNavigation.tab: root.tabNavItem + Keys.onPressed: { + edit.keyEvent = event.key + root.keyPressed(event); + } onCursorRectangleChanged: flick.ensureVisible(cursorRectangle) onActiveFocusChanged: if (root.pristine) root.pristine = false diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusInput.qml b/ui/StatusQ/src/StatusQ/Controls/StatusInput.qml index c5d2a913f4..7b2cdfff21 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusInput.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusInput.qml @@ -107,6 +107,8 @@ Item { property var pendingValidators: [] signal iconClicked() + signal keyPressed(var event) + signal editClicked() /*! \qmltype ValidationMode @@ -290,6 +292,12 @@ Item { Keys.forwardTo: [root] onIconClicked: root.iconClicked() + onKeyPressed: { + root.keyPressed(event); + } + onEditChanged: { + root.editClicked(); + } } StatusBaseText { diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusSeedPhraseInput.qml b/ui/StatusQ/src/StatusQ/Controls/StatusSeedPhraseInput.qml index 7d59a79862..900599629f 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusSeedPhraseInput.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusSeedPhraseInput.qml @@ -7,6 +7,42 @@ import StatusQ.Popups 0.1 import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 +/*! + \qmltype StatusSeedPhraseInput + \inherits Item + \inqmlmodule StatusQ.Controls + \since StatusQ.Controls 0.1 + \brief Displays a text input with suggestions. Inherits \l{https://doc.qt.io/qt-5/qml-qtquick-item.html}{Item}. + + The \c StatusSeedPhraseInput item displays a text input with suggestions filtered based on the typed text. + For example: + + \qml + StatusSeedPhraseInput { + id: statusSeedInput + anchors.left: parent.left + anchors.right: parent.right + textEdit.input.anchors.leftMargin: 16 + textEdit.input.anchors.rightMargin: 16 + textEdit.input.anchors.topMargin: 11 + leftComponentText: "1" + inputList: ListModel { + ListElement { + seedWord: "panda" + } + ListElement { + seedWord: "posible" + } + ListElement { + seedWord: "wing" + } + } + } + \endqml + + For a list of components available see StatusQ. +*/ + Item { id: root width: 162 @@ -17,6 +53,12 @@ Item { property ListModel inputList: ListModel { } property ListModel filteredList: ListModel { } signal doneInsertingWord(string word) + /* + This signal is emitted when the user pressed a keyboard key and passes as a + parameter the event. The corresponding handler is \c onKeyPressed. + */ + signal keyPressed(var event) + signal editClicked() onActiveFocusChanged: { if (root.activeFocus) { @@ -57,6 +99,12 @@ Item { seedSuggestionsList.model = 0; } } + onKeyPressed: { + root.keyPressed(event); + } + onEditClicked: { + root.editClicked(); + } } Item {