status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(StatusPickerButton): Added configurable image in front of text

This commit is contained in:
Noelia 2022-06-28 18:56:51 +02:00 committed by Michał Cieślak
parent 6b7a59bae5
commit 0c26e7e35b
1 changed files with 44 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
ui/StatusQ/src/StatusQ/Controls/StatusPickerButton.qml
View File

@ -1,25 +1,36 @@
import QtQuick 2.14 import QtQuick 2.14
import QtQuick.Controls 2.12 import QtQuick.Controls 2.12
import QtQuick.Layouts 1.14
import StatusQ.Core 0.1 import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1 import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
Button { Button {
id: root id: root
implicitWidth: 446
implicitHeight: 44
property color bgColor: Theme.palette.baseColor2 property color bgColor: Theme.palette.baseColor2
property color contentColor: Theme.palette.baseColor1 property color contentColor: Theme.palette.baseColor1
property var type: StatusPickerButton.Type.Next property var type: StatusPickerButton.Type.Next
property int lateralMargins: 16 property int lateralMargins: 16
property int textPixelSize: 15 property int textPixelSize: 15
/*!
\qmlproperty StatusImageSettings StatusPickerButton::image
This property holds the image settings information.
*/
property StatusImageSettings image: StatusImageSettings {
width: 20
height: 20
isIdenticon: false
}
enum Type { enum Type {
Next, Next,
Down Down
} }
implicitWidth: 446
implicitHeight: 44
background: Item { background: Item {
anchors.fill: parent anchors.fill: parent
Rectangle { Rectangle {
@ -34,18 +45,32 @@ Button {
anchors.fill: parent anchors.fill: parent
state: root.type === StatusPickerButton.Type.Next ? "NEXT" : "DOWN" state: root.type === StatusPickerButton.Type.Next ? "NEXT" : "DOWN"
StatusBaseText { RowLayout {
id: textLabel id: rowLabel
width: parent.width - icon.width - icon.anchors.rightMargin - icon.anchors.leftMargin
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
width: parent.width - icon.width - anchors.rightMargin - anchors.leftMargin - icon.anchors.rightMargin - icon.anchors.leftMargin
verticalAlignment: Text.AlignVCenter
font.pixelSize: root.textPixelSize
color: root.contentColor
text: root.text
clip: true clip: true
elide: Text.ElideRight spacing: 4
StatusRoundedImage {
id: rowImage
Layout.alignment: Qt.AlignVCenter
visible: root.image.source.toString() !== ""
Layout.preferredWidth: root.image.width
Layout.preferredHeight: root.image.height
image.source: root.image.source
}
StatusBaseText {
id: textLabel
Layout.alignment: Qt.AlignVCenter
Layout.fillWidth: true
verticalAlignment: Text.AlignVCenter
font.pixelSize: root.textPixelSize
color: root.contentColor
text: root.text
clip: true
elide: Text.ElideRight
}
} }
StatusIcon { StatusIcon {
id: icon id: icon
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@ -60,10 +85,10 @@ Button {
PropertyChanges {target: icon; anchors.right: parent.right } PropertyChanges {target: icon; anchors.right: parent.right }
PropertyChanges {target: icon; anchors.rightMargin: root.lateralMargins / 2 } PropertyChanges {target: icon; anchors.rightMargin: root.lateralMargins / 2 }
PropertyChanges {target: icon; anchors.leftMargin: root.lateralMargins / 2 } PropertyChanges {target: icon; anchors.leftMargin: root.lateralMargins / 2 }
PropertyChanges {target: textLabel; anchors.left: parent.left } PropertyChanges {target: rowLabel; anchors.left: parent.left }
PropertyChanges {target: textLabel; anchors.right: undefined } PropertyChanges {target: rowLabel; anchors.right: undefined }
PropertyChanges {target: textLabel; anchors.rightMargin: undefined } PropertyChanges {target: rowLabel; anchors.rightMargin: undefined }
PropertyChanges {target: textLabel; anchors.leftMargin: root.lateralMargins } PropertyChanges {target: rowLabel; anchors.leftMargin: root.lateralMargins }
}, },
State { State {
name: "DOWN" name: "DOWN"
@ -72,10 +97,10 @@ Button {
PropertyChanges {target: icon; anchors.right: undefined } PropertyChanges {target: icon; anchors.right: undefined }
PropertyChanges {target: icon; anchors.rightMargin: root.lateralMargins / 2 } PropertyChanges {target: icon; anchors.rightMargin: root.lateralMargins / 2 }
PropertyChanges {target: icon; anchors.leftMargin: root.lateralMargins } PropertyChanges {target: icon; anchors.leftMargin: root.lateralMargins }
PropertyChanges {target: textLabel; anchors.left: icon.right } PropertyChanges {target: rowLabel; anchors.left: icon.right }
PropertyChanges {target: textLabel; anchors.right: undefined } PropertyChanges {target: rowLabel; anchors.right: undefined }
PropertyChanges {target: textLabel; anchors.rightMargin: root.lateralMargins / 2 } PropertyChanges {target: rowLabel; anchors.rightMargin: root.lateralMargins / 2 }
PropertyChanges {target: textLabel; anchors.leftMargin: undefined } PropertyChanges {target: rowLabel; anchors.leftMargin: undefined }
} }
] ]
} }