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[StatusButton] missing green/success state 

- implemented the missing `StatusBaseButton.Type.Success` state and
colors for both `StatusButton` and `StatusFlatButton`
- use a `switch` instead of a waterfall of ternaries
- adjust storybook for the new case

Fixed #13622
This commit is contained in:
Lukáš Tinkl 2024-02-19 14:32:58 +01:00 committed by Lukáš Tinkl
parent eaef030bc8
commit e773d8d358
5 changed files with 83 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
storybook/pages/StatusButtonPage.qml
View File

@ -112,7 +112,7 @@ SplitView {
}
Label {
text: "StatusFlatButton (no Primary variant)"
text: "StatusFlatButton"
Layout.columnSpan: 4
font.bold: true
}
@ -238,7 +238,7 @@ SplitView {
Label { text: "Type:" }
ComboBox {
id: ctrlType
model: ["Normal", "Danger", "Primary", "Warning"] // enum StatusBaseButton.Type.xxx
model: ["Normal", "Danger", "Primary", "Warning", "Success"] // enum StatusBaseButton.Type.xxx
}
}
RowLayout {

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

@ -20,7 +20,8 @@ Button {
Normal,
Danger,
Primary,
Warning
Warning,
Success
}
enum TextPosition {

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

@ -1,24 +1,55 @@
import QtQuick 2.14
import QtQuick 2.15
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
StatusBaseButton {
id: statusButton
normalColor: {
switch(type) {
case StatusBaseButton.Type.Primary:
return Theme.palette.primaryColor1
case StatusBaseButton.Type.Warning:
return Theme.palette.warningColor3
case StatusBaseButton.Type.Danger:
return Theme.palette.dangerColor3
case StatusBaseButton.Type.Success:
return Theme.palette.successColor2
default:
return Theme.palette.primaryColor3
}
}
normalColor: type === StatusBaseButton.Type.Primary ? Theme.palette.primaryColor1 :
type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor3 :
type === StatusBaseButton.Type.Warning ? Theme.palette.warningColor3
: Theme.palette.dangerColor3
hoverColor: type === StatusBaseButton.Type.Primary ? Theme.palette.hoverColor(normalColor) :
type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor2 :
type === StatusBaseButton.Type.Warning ? Theme.palette.warningColor2
: Theme.palette.dangerColor2
hoverColor: {
switch(type) {
case StatusBaseButton.Type.Primary:
return Theme.palette.hoverColor(normalColor)
case StatusBaseButton.Type.Warning:
return Theme.palette.warningColor2
case StatusBaseButton.Type.Danger:
return Theme.palette.dangerColor2
case StatusBaseButton.Type.Success:
return Theme.palette.successColor3
default:
return Theme.palette.primaryColor2
}
}
disabledColor: Theme.palette.baseColor2
textColor: type === StatusBaseButton.Type.Primary ? Theme.palette.indirectColor4 :
type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor1 :
type === StatusBaseButton.Type.Warning ? Theme.palette.warningColor1
: Theme.palette.dangerColor1
textColor: {
switch(type) {
case StatusBaseButton.Type.Primary:
return Theme.palette.indirectColor4
case StatusBaseButton.Type.Warning:
return Theme.palette.warningColor1
case StatusBaseButton.Type.Danger:
return Theme.palette.dangerColor1
case StatusBaseButton.Type.Success:
return Theme.palette.successColor1
default:
return Theme.palette.primaryColor1
}
}
disabledTextColor: Theme.palette.baseColor1
}

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

@ -1,15 +1,43 @@
import QtQuick 2.14
import QtQuick 2.15
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
StatusBaseButton {
normalColor: "transparent"
hoverColor: type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor3
: Theme.palette.dangerColor3
hoverColor: {
switch(type) {
case StatusBaseButton.Type.Primary:
return Theme.palette.primaryColor2
case StatusBaseButton.Type.Warning:
return Theme.palette.warningColor3
case StatusBaseButton.Type.Danger:
return Theme.palette.dangerColor3
case StatusBaseButton.Type.Success:
return Theme.palette.successColor2
default:
return Theme.palette.primaryColor3
}
}
disabledColor: "transparent"
textColor: type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor1
: Theme.palette.dangerColor1
textColor: {
switch(type) {
case StatusBaseButton.Type.Primary:
return Theme.palette.primaryColor1
case StatusBaseButton.Type.Warning:
return Theme.palette.warningColor1
case StatusBaseButton.Type.Danger:
return Theme.palette.dangerColor1
case StatusBaseButton.Type.Success:
return Theme.palette.successColor1
default:
return Theme.palette.primaryColor1
}
}
disabledTextColor: Theme.palette.baseColor1
borderColor: (type === StatusBaseButton.Type.Normal || hovered) && !loading ? "transparent"

4
ui/app/AppLayouts/Communities/panels/MembersTabPanel.qml
View File

@ -211,11 +211,9 @@ Item {
anchors.verticalCenter: parent.verticalCenter
opacity: acceptButtonVisible
text: qsTr("Accept")
type: StatusBaseButton.Type.Success
icon.name: "checkmark-circle"
icon.color: enabled ? Theme.palette.successColor1 : disabledTextColor
normalColor: Theme.palette.successColor2
hoverColor: Theme.palette.successColor3
textColor: Theme.palette.successColor1
loading: model.requestToJoinLoading
enabled: !acceptPendingButtonVisible
onClicked: root.acceptRequestToJoin(model.requestToJoinId)