status-im/status-desktop
2
0
Fork 0
mirror of https://github.com/status-im/status-desktop.git synced 2025-02-02 09:46:38 +00:00
Code Issues Projects Releases Wiki Activity

feat(StatusButton): introduce flat mode

Browse Source
This commit is contained in:
Pascal Precht 2020-12-04 11:31:08 +01:00 committed by Iuri Matias
parent c7b6c5dbac
commit 1971fe7ea1
1 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
ui/shared/status/StatusButton.qml
View File

@ -17,13 +17,15 @@ Button {
id: control id: control
font.pixelSize: size === "small" ? 13 : 15 font.pixelSize: size === "small" ? 13 : 15
font.weight: Font.Medium font.weight: Font.Medium
implicitHeight: size === "small" ? 38 : 44 implicitHeight: flat ? 32 : (size === "small" ? 38 : 44)
implicitWidth: buttonLabel.implicitWidth + 2 * Style.current.padding + implicitWidth: buttonLabel.implicitWidth + (flat ? 3* Style.current.halfPadding : 2 * Style.current.padding) +
(iconLoader.active ? iconLoader.width : 0) (iconLoader.active ? iconLoader.width : 0)
enabled: state === "default" enabled: state === "default"
contentItem: Item { contentItem: Item {
id: content
anchors.fill: parent anchors.fill: parent
anchors.horizontalCenter: parent.horizontalCenter
Loader { Loader {
id: iconLoader id: iconLoader
@ -43,7 +45,7 @@ Button {
ColorOverlay { ColorOverlay {
anchors.fill: iconImg anchors.fill: iconImg
source: iconImg source: iconImg
color: control.icon.color color: buttonLabel.color
antialiasing: true antialiasing: true
smooth: true smooth: true
rotation: control.iconRotation rotation: control.iconRotation
@ -62,7 +64,8 @@ Button {
anchors.right: iconLoader.active ? undefined : parent.right anchors.right: iconLoader.active ? undefined : parent.right
anchors.left: iconLoader.active ? iconLoader.right : parent.left anchors.left: iconLoader.active ? iconLoader.right : parent.left
anchors.leftMargin: iconLoader.active ? Style.current.smallPadding : 0 anchors.leftMargin: iconLoader.active ? Style.current.smallPadding : 0
color: !enabled ? Style.current.buttonDisabledForegroundColor : control.color color: !enabled ? Style.current.buttonDisabledForegroundColor :
(hovered || highlighted) ? Style.current.blue : control.color
visible: !loadingIndicator.active visible: !loadingIndicator.active
} }
@ -89,7 +92,12 @@ Button {
background: Rectangle { background: Rectangle {
radius: Style.current.radius radius: Style.current.radius
anchors.fill: parent anchors.fill: parent
border.width: flat ? 1 : 0
border.color: hovered ? buttonLabel.color : Style.current.transparent
color: { color: {
if (flat) {
return "transparent"
}
if (type === "secondary") { if (type === "secondary") {
return hovered ? control.bgColor : "transparent" return hovered ? control.bgColor : "transparent"
} }