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(StatusBaseButton)!: Converting to QQC2 Button 

Closes #782
This commit is contained in:
Alexandra Betouni 2022-07-18 16:13:32 +03:00 committed by Michał Cieślak
parent 2c0f8c8e94
commit 4fcbce3949
7 changed files with 152 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
ui/StatusQ/sandbox/controls/Buttons.qml
View File

@ -21,18 +21,31 @@ Column {
StatusButton {
text: "Button"
type: StatusBaseButton.Type.Primary
StatusToolTip {
visible: parent.hovered
text: "Look I'm a tooltip on a button!"
}
onClicked: console.warn("Primary button clicked")
}
StatusButton {
text: "Button"
enabled: false
type: StatusBaseButton.Type.Primary
onClicked: console.warn("Primary disabled button clicked, this should not happen !!!")
}
StatusButton {
text: "Button"
loading: true
type: StatusBaseButton.Type.Primary
StatusToolTip {
visible: parent.hovered
text: "Look I'm a tooltip on a loading button!"
}
onClicked: console.warn("Primary loading button clicked, this should not happen !!!")
}
// Large
@ -50,6 +63,25 @@ Column {
loading: true
}
// Large + Icon
StatusButton {
text: "Button"
icon.name: "info"
}
StatusButton {
text: "Button"
enabled: false
icon.name: "info"
}
StatusButton {
text: "Button"
loading: true
icon.name: "info"
}
// Danger
StatusButton {
text: "Button"
type: StatusBaseButton.Type.Danger
@ -67,6 +99,7 @@ Column {
type: StatusBaseButton.Type.Danger
}
// Flat
StatusFlatButton {
text: "Button"
}
@ -74,7 +107,6 @@ Column {
StatusFlatButton {
text: "Button"
enabled: false
}
StatusFlatButton {
@ -82,6 +114,7 @@ Column {
loading: true
}
// Flat + Danger
StatusFlatButton {
text: "Button"
type: StatusBaseButton.Type.Danger
@ -117,6 +150,7 @@ Column {
loading: true
}
// Small + danger
StatusButton {
text: "Button"
type: StatusBaseButton.Type.Danger
@ -137,6 +171,7 @@ Column {
loading: true
}
// Flat + small
StatusFlatButton {
text: "Button"
size: StatusBaseButton.Size.Small
@ -359,7 +394,7 @@ Column {
// Button with emoji
StatusButton {
text: "Button with Emoji"
icon.emoji: "🖼️️"
asset.emoji: "🖼️️"
}
RowLayout {

8
ui/StatusQ/sandbox/controls/Popups.qml
View File

@ -419,11 +419,11 @@ Column {
topPadding: 8
bottomPadding: 0
implicitHeight: 32
defaultLeftPadding: 4
leftPadding: 4
text: name
icon.emoji: !!emoji ? emoji: ""
icon.emojiSize: Emoji.size.middle
icon.name: !emoji ? "filled-account": ""
asset.emoji: !!emoji ? emoji: ""
asset.emojiSize: Emoji.size.middle
asset.name: !emoji ? "filled-account": ""
normalColor: "transparent"
highlighted: index === floatingHeader.currentIndex
onClicked: {

4
ui/StatusQ/sandbox/demoapp/data/Models.qml
View File

@ -1103,6 +1103,7 @@ QtObject {
isVerified: true
isUntrustworthy: false
isContact: true
isImage: true
onlineStatus: 1
icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
@ -1115,6 +1116,7 @@ QtObject {
isVerified: false
isUntrustworthy: true
isContact: false
isImage: false
onlineStatus: 0
icon: ""
isAdmin: false
@ -1126,6 +1128,7 @@ QtObject {
isVerified: false
isUntrustworthy: false
isContact: false
isImage: true
onlineStatus: 1
isAdmin: false
icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAiElEQVR4nOzXUQpAQBRGYWQvLNAyLJDV8C5qpiGnv/M9al5Ot27X0IUwhMYQGkNoDKGJCRlLH67bftx9X+ap/+P9VcxEDK
@ -1138,6 +1141,7 @@ QtObject {
isVerified: false
isUntrustworthy: true
isContact: true
isImage: false
onlineStatus: 0
icon: ""
isAdmin: false

242
ui/StatusQ/src/StatusQ/Controls/StatusBaseButton.qml
View File

@ -1,11 +1,14 @@
import QtQuick 2.14
import QtQuick.Layouts 1.14
import QtQuick.Controls 2.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
import StatusQ.Core.Utils 0.1
Rectangle {
id: statusBaseButton
Button {
id: root
enum Size {
Tiny,
@ -19,158 +22,109 @@ Rectangle {
Primary
}
property StatusAssetSettings icon: StatusAssetSettings {
width: 24
height: 24
}
property StatusAssetSettings asset: StatusAssetSettings { }
property bool loading: false
property bool loading
property alias hovered: sensor.containsMouse
property color normalColor
property color hoverColor
property color disabledColor
property color textColor
property color disabledTextColor
property color borderColor: "transparent"
property int size: StatusBaseButton.Size.Large
property int type: StatusBaseButton.Type.Normal
property alias text: label.text
property alias font: label.font
property real defaultLeftPadding: size === StatusBaseButton.Size.Large ? 24 : 12
property real defaultRightPadding: size === StatusBaseButton.Size.Large ? 24 : 12
property real defaultTopPadding: {
switch (size) {
case StatusBaseButton.Size.Tiny:
return 5
case StatusBaseButton.Size.Small:
return 10
case StatusBaseButton.Size.Large:
default:
return 11
}
}
property real defaultBottomPadding: {
switch (size) {
case StatusBaseButton.Size.Tiny:
return 5
case StatusBaseButton.Size.Small:
return 10
case StatusBaseButton.Size.Large:
default:
return 11
}
}
property real leftPadding: defaultLeftPadding
property real rightPadding: defaultRightPadding
property real topPadding: defaultTopPadding
property real bottomPadding: defaultBottomPadding
property color normalColor
property color hoverColor
property color disaledColor
property color textColor
property color disabledTextColor
signal pressed(var mouse)
signal released(var mouse)
signal clicked(var mouse)
signal pressAndHold(var mouse)
property bool highlighted: false
/// Implementation
implicitWidth: layout.width + statusBaseButton.leftPadding + statusBaseButton.rightPadding
implicitHeight: layout.height + statusBaseButton.topPadding + statusBaseButton.bottomPadding
radius: size !== StatusBaseButton.Size.Tiny ? 8 : 6
color: {
if (statusBaseButton.enabled)
return !statusBaseButton.loading && (sensor.containsMouse || highlighted) ? hoverColor
: normalColor;
return disaledColor
}
QtObject {
id: d
readonly property color textColor: statusBaseButton.enabled ? statusBaseButton.textColor : statusBaseButton.disabledTextColor
readonly property color textColor: root.enabled || root.loading ? root.textColor : root.disabledTextColor
}
font.weight: Font.Medium
font.pixelSize: size === StatusBaseButton.Size.Large ? 15 : 13
horizontalPadding: {
if (root.icon.name) {
return size === StatusBaseButton.Size.Large ? 18 : 16
}
return size === StatusBaseButton.Size.Large ? 24 : 12
}
verticalPadding: {
switch (size) {
case StatusBaseButton.Size.Tiny:
return 5
case StatusBaseButton.Size.Small:
return 10
case StatusBaseButton.Size.Large:
default:
return 11
}
}
icon.height: 24
icon.width: 24
background: Rectangle {
radius: root.size === StatusBaseButton.Size.Tiny ? 6 : 8
border.color: root.borderColor
color: {
if (root.enabled)
return !root.loading && (root.hovered || root.highlighted) ? hoverColor : normalColor;
return disabledColor;
}
MouseArea {
anchors.fill: parent
enabled: root.enabled
acceptedButtons: Qt.NoButton
cursorShape: root.loading ? Qt.ArrowCursor : Qt.PointingHandCursor
}
}
contentItem: RowLayout {
spacing: root.size === StatusBaseButton.Size.Large ? 6 : 4
StatusIcon {
Layout.preferredWidth: visible ? root.icon.width : 0
Layout.preferredHeight: visible ? root.icon.height : 0
icon: root.icon.name
rotation: root.asset.rotation
opacity: !loading && root.icon.name !== ""
visible: root.icon.name !== ""
color: d.textColor
}
StatusEmoji {
Layout.preferredWidth: visible ? root.icon.width : 0
Layout.preferredHeight: visible ? root.icon.height : 0
visible: root.asset.emoji
emojiId: Emoji.iconId(root.asset.emoji, root.asset.emojiSize) || ""
}
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
opacity: !loading
font: root.font
text: root.text
color: d.textColor
verticalAlignment: Text.AlignVCenter
}
}
Loader {
anchors.centerIn: parent
active: root.loading
sourceComponent: StatusLoadingIndicator {
color: d.textColor
}
}
// stop the mouse clicks in the "loading" state w/o disabling the whole button
// as this would make it impossible to have hover events or a tooltip
MouseArea {
id: sensor
anchors.fill: parent
cursorShape: loading ? Qt.ArrowCursor
: Qt.PointingHandCursor
hoverEnabled: true
enabled: statusBaseButton.enabled
Loader {
anchors.centerIn: parent
active: loading
sourceComponent: StatusLoadingIndicator {
color: d.textColor
} // Indicator
} // Loader
Row {
id: layout
anchors.centerIn: parent
spacing: 4
StatusIcon {
id: statusIcon
width: statusBaseButton.icon.width
height: statusBaseButton.icon.height
icon: statusBaseButton.icon.name
rotation: statusBaseButton.icon.rotation
anchors.verticalCenter: parent.verticalCenter
opacity: !loading && statusBaseButton.icon.name !== ""
visible: statusBaseButton.icon.name !== ""
color: d.textColor
} // Icon
StatusEmoji {
width: statusBaseButton.icon.width
height: statusBaseButton.icon.height
anchors.verticalCenter: parent.verticalCenter
visible: statusBaseButton.icon.emoji
emojiId: Emoji.iconId(statusBaseButton.icon.emoji, statusBaseButton.icon.emojiSize) || ""
} // Emoji
StatusBaseText {
id: label
opacity: !loading
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: size === StatusBaseButton.Size.Large ? 15 : 13 // by design
color: d.textColor
} // Text
} // Row
onPressed: {
if (!loading) {
statusBaseButton.pressed(mouse)
}
}
onReleased: {
if (!loading) {
statusBaseButton.released(mouse)
}
}
onClicked: {
if (!loading) {
statusBaseButton.clicked(mouse)
}
}
onPressAndHold: {
if (!loading) {
statusBaseButton.pressAndHold(mouse)
}
}
} // Sensor
acceptedButtons: Qt.AllButtons
enabled: root.loading
hoverEnabled: enabled
onPressed: mouse.accepted = true
onWheel: wheel.accepted = true
}
}

4
ui/StatusQ/src/StatusQ/Controls/StatusButton.qml
View File

@ -11,12 +11,10 @@ StatusBaseButton {
hoverColor: type === StatusBaseButton.Type.Primary ? Theme.palette.hoverColor(normalColor) :
type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor2
: Theme.palette.dangerColor2
disaledColor: Theme.palette.baseColor2
disabledColor: Theme.palette.baseColor2
textColor: type === StatusBaseButton.Type.Primary ? Theme.palette.white :
type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor1
: Theme.palette.dangerColor1
disabledTextColor: Theme.palette.baseColor1
font.weight: type === StatusBaseButton.Type.Primary ? Font.Medium : Font.Normal
}

14
ui/StatusQ/src/StatusQ/Controls/StatusFlatButton.qml
View File

@ -3,19 +3,15 @@ import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
StatusBaseButton {
id: statusFlatButton
normalColor: "transparent"
hoverColor: type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor3
: Theme.palette.dangerColor3
disaledColor: "transparent"
hoverColor: type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor3
: Theme.palette.dangerColor3
disabledColor: "transparent"
textColor: type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor1
: Theme.palette.dangerColor1
disabledTextColor: Theme.palette.baseColor1
border.color: type === StatusBaseButton.Type.Normal || hovered ? "transparent"
: Theme.palette.baseColor2
rightPadding: icon.name !== "" ? 18 : defaultRightPadding
leftPadding: icon.name !== "" ? 14 : defaultLeftPadding
borderColor: (type === StatusBaseButton.Type.Normal || hovered) && !loading ? "transparent"
: Theme.palette.baseColor2
}

7
ui/StatusQ/src/StatusQ/Controls/StatusFloatingButtonsSelector.qml
View File

@ -113,12 +113,11 @@ Row {
implicitHeight: 32
topPadding: 8
bottomPadding: 0
defaultLeftPadding: 4
defaultRightPadding: 4
horizontalPadding: 4
hoverColor: Theme.palette.statusFloatingButtonHighlight
normalColor: Theme.palette.baseColor3
icon.name: "more"
icon.bgColor: "transparent"
asset.name: "more"
asset.bgColor: "transparent"
onClicked: popupMenu.popup(parent.x, y + height + 8)
}
}