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>
This commit is contained in:
Alexandra Betouni
Michał Cieślak
parent
f795ced1bd
commit
59510b8a0a
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
}
|
||||
]
|
||||
|
||||
|
|
|
|||
|
|
@ -25,6 +25,8 @@ Rectangle {
|
|||
property list<Item> 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)
|
||||
|
|
@ -248,6 +251,18 @@ Rectangle {
|
|||
implicitHeight: visible ? 22 : 0
|
||||
}
|
||||
|
||||
Row {
|
||||
id: statusListItemTagsSlotInline
|
||||
anchors.top: statusListItemTertiaryTitle.bottom
|
||||
width: parent.width
|
||||
spacing: 10
|
||||
clip: true
|
||||
|
||||
Repeater {
|
||||
model: tagsModel
|
||||
delegate: tagsDelegate
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue