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.Controls 2.12
import QtQuick.Layouts 1.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
Button {
id: root
implicitWidth: 446
implicitHeight: 44
property color bgColor: Theme.palette.baseColor2
property color contentColor: Theme.palette.baseColor1
property var type: StatusPickerButton.Type.Next
property int lateralMargins: 16
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 {
Next,
Down
}
implicitWidth: 446
implicitHeight: 44
background: Item {
anchors.fill: parent
Rectangle {
@ -34,18 +45,32 @@ Button {
anchors.fill: parent
state: root.type === StatusPickerButton.Type.Next ? "NEXT" : "DOWN"
StatusBaseText {
id: textLabel
RowLayout {
id: rowLabel
width: parent.width - icon.width - icon.anchors.rightMargin - icon.anchors.leftMargin
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
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 {
id: icon
anchors.verticalCenter: parent.verticalCenter
@ -60,10 +85,10 @@ Button {
PropertyChanges {target: icon; anchors.right: parent.right }
PropertyChanges {target: icon; anchors.rightMargin: root.lateralMargins / 2 }
PropertyChanges {target: icon; anchors.leftMargin: root.lateralMargins / 2 }
PropertyChanges {target: textLabel; anchors.left: parent.left }
PropertyChanges {target: textLabel; anchors.right: undefined }
PropertyChanges {target: textLabel; anchors.rightMargin: undefined }
PropertyChanges {target: textLabel; anchors.leftMargin: root.lateralMargins }
PropertyChanges {target: rowLabel; anchors.left: parent.left }
PropertyChanges {target: rowLabel; anchors.right: undefined }
PropertyChanges {target: rowLabel; anchors.rightMargin: undefined }
PropertyChanges {target: rowLabel; anchors.leftMargin: root.lateralMargins }
},
State {
name: "DOWN"
@ -72,10 +97,10 @@ Button {
PropertyChanges {target: icon; anchors.right: undefined }
PropertyChanges {target: icon; anchors.rightMargin: root.lateralMargins / 2 }
PropertyChanges {target: icon; anchors.leftMargin: root.lateralMargins }
PropertyChanges {target: textLabel; anchors.left: icon.right }
PropertyChanges {target: textLabel; anchors.right: undefined }
PropertyChanges {target: textLabel; anchors.rightMargin: root.lateralMargins / 2 }
PropertyChanges {target: textLabel; anchors.leftMargin: undefined }
PropertyChanges {target: rowLabel; anchors.left: icon.right }
PropertyChanges {target: rowLabel; anchors.right: undefined }
PropertyChanges {target: rowLabel; anchors.rightMargin: root.lateralMargins / 2 }
PropertyChanges {target: rowLabel; anchors.leftMargin: undefined }
}
]
}