From 6207e1f34fd19ed2321348d7520a4f38b9b87d9a Mon Sep 17 00:00:00 2001 From: Noelia Date: Thu, 23 Jun 2022 09:42:23 +0200 Subject: [PATCH] feat(StatusRoundButton): Added `Tertiary` type - Transparent background but when hovered, like Primary type in idle state. - Updated sandbox with the new type. --- ui/StatusQ/sandbox/controls/Buttons.qml | 19 ++++++++++++ .../StatusQ/Controls/StatusRoundButton.qml | 30 +++++++++++++++++-- 2 files changed, 46 insertions(+), 3 deletions(-) diff --git a/ui/StatusQ/sandbox/controls/Buttons.qml b/ui/StatusQ/sandbox/controls/Buttons.qml index 35a93a57b2..34e040ff19 100644 --- a/ui/StatusQ/sandbox/controls/Buttons.qml +++ b/ui/StatusQ/sandbox/controls/Buttons.qml @@ -174,6 +174,25 @@ Column { loading: true } + // transparent + + StatusRoundButton { + type: StatusRoundButton.Type.Tertiary + icon.name: "info" + } + + StatusRoundButton { + type: StatusRoundButton.Type.Tertiary + icon.name: "info" + enabled: false + } + + StatusRoundButton { + type: StatusRoundButton.Type.Tertiary + icon.name: "info" + loading: true + } + // Rounded blue StatusFlatRoundButton { diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusRoundButton.qml b/ui/StatusQ/src/StatusQ/Controls/StatusRoundButton.qml index 7c3cb120d9..51dca63663 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusRoundButton.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusRoundButton.qml @@ -12,14 +12,27 @@ Rectangle { height: 23 rotation: 0 + property color hoverColor: { + switch(statusRoundButton.type) { + case StatusRoundButton.Type.Primary: + return Theme.palette.primaryColor1; + case StatusRoundButton.Type.Secondary: + return Theme.palette.indirectColor1; + case StatusRoundButton.Type.Tertiary: + return Theme.palette.primaryColor1; + } + } + color: { switch(statusRoundButton.type) { case StatusRoundButton.Type.Primary: return Theme.palette.primaryColor1; case StatusRoundButton.Type.Secondary: return Theme.palette.indirectColor1; + case StatusRoundButton.Type.Tertiary: + return Theme.palette.baseColor1; } - } + } disabledColor: { switch(statusRoundButton.type) { @@ -27,6 +40,8 @@ Rectangle { return Theme.palette.baseColor1; case StatusRoundButton.Type.Secondary: return Theme.palette.indirectColor1; + case StatusRoundButton.Type.Tertiary: + return Theme.palette.baseColor1; } } } @@ -46,7 +61,8 @@ Rectangle { enum Type { Primary, - Secondary + Secondary, + Tertiary } /// Implementation @@ -59,6 +75,8 @@ Rectangle { return Theme.palette.primaryColor3; case StatusRoundButton.Type.Secondary: return Theme.palette.primaryColor1; + case StatusRoundButton.Type.Tertiary: + return "transparent"; } } @@ -68,6 +86,8 @@ Rectangle { return Theme.palette.primaryColor2; case StatusRoundButton.Type.Secondary: return Theme.palette.miscColor1; + case StatusRoundButton.Type.Tertiary: + return Theme.palette.primaryColor3; } } @@ -77,13 +97,17 @@ Rectangle { return Theme.palette.baseColor2; case StatusRoundButton.Type.Secondary: return Theme.palette.baseColor1; + case StatusRoundButton.Type.Tertiary: + return "transparent"; } } } QtObject { id: d - readonly property color iconColor: statusRoundButton.enabled ? statusRoundButton.icon.color : statusRoundButton.icon.disabledColor + readonly property color iconColor: !statusRoundButton.enabled ? statusRoundButton.icon.disabledColor : + (statusRoundButton.enabled && statusRoundButton.hovered) ? statusRoundButton.icon.hoverColor : + statusRoundButton.icon.color } implicitWidth: 44