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

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

@ -20,7 +20,8 @@ Button {
Normal, Normal,
Danger, Danger,
Primary, Primary,
Warning Warning,
Success
} }
enum TextPosition { 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 0.1
import StatusQ.Core.Theme 0.1 import StatusQ.Core.Theme 0.1
StatusBaseButton { 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 : hoverColor: {
type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor3 : switch(type) {
type === StatusBaseButton.Type.Warning ? Theme.palette.warningColor3 case StatusBaseButton.Type.Primary:
: Theme.palette.dangerColor3 return Theme.palette.hoverColor(normalColor)
hoverColor: type === StatusBaseButton.Type.Primary ? Theme.palette.hoverColor(normalColor) : case StatusBaseButton.Type.Warning:
type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor2 : return Theme.palette.warningColor2
type === StatusBaseButton.Type.Warning ? Theme.palette.warningColor2 case StatusBaseButton.Type.Danger:
: Theme.palette.dangerColor2 return Theme.palette.dangerColor2
case StatusBaseButton.Type.Success:
return Theme.palette.successColor3
default:
return Theme.palette.primaryColor2
}
}
disabledColor: Theme.palette.baseColor2 disabledColor: Theme.palette.baseColor2
textColor: type === StatusBaseButton.Type.Primary ? Theme.palette.indirectColor4 : textColor: {
type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor1 : switch(type) {
type === StatusBaseButton.Type.Warning ? Theme.palette.warningColor1 case StatusBaseButton.Type.Primary:
: Theme.palette.dangerColor1 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 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 0.1
import StatusQ.Core.Theme 0.1 import StatusQ.Core.Theme 0.1
StatusBaseButton { StatusBaseButton {
normalColor: "transparent" 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" disabledColor: "transparent"
textColor: type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor1 textColor: {
: Theme.palette.dangerColor1 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 disabledTextColor: Theme.palette.baseColor1
borderColor: (type === StatusBaseButton.Type.Normal || hovered) && !loading ? "transparent" 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 anchors.verticalCenter: parent.verticalCenter
opacity: acceptButtonVisible opacity: acceptButtonVisible
text: qsTr("Accept") text: qsTr("Accept")
type: StatusBaseButton.Type.Success
icon.name: "checkmark-circle" icon.name: "checkmark-circle"
icon.color: enabled ? Theme.palette.successColor1 : disabledTextColor icon.color: enabled ? Theme.palette.successColor1 : disabledTextColor
normalColor: Theme.palette.successColor2
hoverColor: Theme.palette.successColor3
textColor: Theme.palette.successColor1
loading: model.requestToJoinLoading loading: model.requestToJoinLoading
enabled: !acceptPendingButtonVisible enabled: !acceptPendingButtonVisible
onClicked: root.acceptRequestToJoin(model.requestToJoinId) onClicked: root.acceptRequestToJoin(model.requestToJoinId)