From e773d8d3584cf5ce943948b1584bdb7f5c445411 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Tinkl?= Date: Mon, 19 Feb 2024 14:32:58 +0100 Subject: [PATCH] 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 --- storybook/pages/StatusButtonPage.qml | 4 +- .../src/StatusQ/Controls/StatusBaseButton.qml | 3 +- .../src/StatusQ/Controls/StatusButton.qml | 59 ++++++++++++++----- .../src/StatusQ/Controls/StatusFlatButton.qml | 38 ++++++++++-- .../Communities/panels/MembersTabPanel.qml | 4 +- 5 files changed, 83 insertions(+), 25 deletions(-) diff --git a/storybook/pages/StatusButtonPage.qml b/storybook/pages/StatusButtonPage.qml index 434f730134..eca71dc9af 100644 --- a/storybook/pages/StatusButtonPage.qml +++ b/storybook/pages/StatusButtonPage.qml @@ -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 { diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusBaseButton.qml b/ui/StatusQ/src/StatusQ/Controls/StatusBaseButton.qml index 166c615833..e914c152e0 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusBaseButton.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusBaseButton.qml @@ -20,7 +20,8 @@ Button { Normal, Danger, Primary, - Warning + Warning, + Success } enum TextPosition { diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusButton.qml b/ui/StatusQ/src/StatusQ/Controls/StatusButton.qml index 2c49442c29..05989455b3 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusButton.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusButton.qml @@ -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 } diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusFlatButton.qml b/ui/StatusQ/src/StatusQ/Controls/StatusFlatButton.qml index a8d9e44638..9655a941ce 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusFlatButton.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusFlatButton.qml @@ -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" diff --git a/ui/app/AppLayouts/Communities/panels/MembersTabPanel.qml b/ui/app/AppLayouts/Communities/panels/MembersTabPanel.qml index d26adb1aae..13849a8643 100644 --- a/ui/app/AppLayouts/Communities/panels/MembersTabPanel.qml +++ b/ui/app/AppLayouts/Communities/panels/MembersTabPanel.qml @@ -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)