diff --git a/ui/app/AppLayouts/UIComponents/UIComponents.qml b/ui/app/AppLayouts/UIComponents/UIComponents.qml index 77a5c9cf90..66d6eaeff9 100644 --- a/ui/app/AppLayouts/UIComponents/UIComponents.qml +++ b/ui/app/AppLayouts/UIComponents/UIComponents.qml @@ -22,88 +22,116 @@ Item { } RowLayout { - StButton { + StatusButton { text: "Primary Large Button" } - StButton { + StatusButton { text: "Secondary Large Button" type: "secondary" } - StButton { + StatusButton { text: "Primary Small Button" size: "small" } - StButton { + StatusButton { text: "Secondary Small Button" type: "secondary" size: "small" } - StRoundButton { - text: "\u2713" + StatusRoundButton { + icon.name: "arrow-right" + icon.height: 15 + icon.width: 20 + } + + StatusRoundButton { + type: "secondary" + size: "medium" + icon.name: "arrow-right" + icon.height: 15 + icon.width: 20 } } RowLayout { - StButton { + StatusButton { text: "Primary Large Button" enabled: false } - StButton { + StatusButton { text: "Secondary Large Button" type: "secondary" enabled: false } - StButton { + StatusButton { text: "Primary Small Button" enabled: false size: "small" } - StButton { + StatusButton { text: "Secondary Small Button" type: "secondary" enabled: false size: "small" } - StRoundButton { - + StatusRoundButton { + icon.name: "arrow-right" + icon.height: 15 + icon.width: 20 + enabled: false + } + + StatusRoundButton { + type: "secondary" + size: "medium" + icon.name: "arrow-right" + icon.height: 15 + icon.width: 20 + enabled: false } } RowLayout { - StButton { + StatusButton { text: "Primary Large Button" state: "pending" } - StButton { + StatusButton { text: "Secondary Large Button" type: "secondary" state: "pending" } - StButton { + StatusButton { text: "Primary Large Button" state: "pending" size: "small" } - StButton { + StatusButton { text: "Secondary Large Button" type: "secondary" state: "pending" size: "small" } - StRoundButton { - + StatusRoundButton { + state: "pending" + } + + StatusRoundButton { + type: "secondary" + size: "medium" + state: "pending" } } } diff --git a/ui/app/img/arrow-right.svg b/ui/app/img/arrow-right.svg new file mode 100644 index 0000000000..7e17e70f63 --- /dev/null +++ b/ui/app/img/arrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/imports/Themes/DarkTheme.qml b/ui/imports/Themes/DarkTheme.qml index ee7153f24b..20e1983425 100644 --- a/ui/imports/Themes/DarkTheme.qml +++ b/ui/imports/Themes/DarkTheme.qml @@ -10,6 +10,7 @@ Theme { property color lightBlue: "#ECEFFC" property color cyan: "#00FFFF" property color blue: "#758EF0" + property color darkAccentBlue: "#2946C4" property color transparent: "#00000000" property color darkGrey: "#838C91" property color lightBlueText: "#8f9fec" @@ -43,6 +44,16 @@ Theme { property color buttonForegroundColor: blue property color buttonBackgroundColor: secondaryBackground + property color buttonDisabledForegroundColor: darkGrey + property color buttonDisabledBackgroundColor: grey + property color roundedButtonForegroundColor: white property color roundedButtonBackgroundColor: secondaryBackground + property color roundedButtonSecondaryForegroundColor: white + property color roundedButtonSecondaryBackgroundColor: buttonForegroundColor + property color roundedButtonSecondaryHoveredBackgroundColor: darkAccentBlue + property color roundedButtonDisabledForegroundColor: buttonDisabledForegroundColor + property color roundedButtonDisabledBackgroundColor: buttonDisabledBackgroundColor + property color roundedButtonSecondaryDisabledForegroundColor: roundedButtonForegroundColor + property color roundedButtonSecondaryDisabledBackgroundColor: buttonDisabledForegroundColor } diff --git a/ui/imports/Themes/LightTheme.qml b/ui/imports/Themes/LightTheme.qml index 3186b8593c..99f3d8ca39 100644 --- a/ui/imports/Themes/LightTheme.qml +++ b/ui/imports/Themes/LightTheme.qml @@ -9,6 +9,7 @@ Theme { property color lightBlue: "#ECEFFC" property color cyan: "#00FFFF" property color blue: "#4360DF" + property color darkAccentBlue: "#2946C4" property color transparent: "#00000000" property color darkGrey: "#939BA1" property color lightBlueText: "#8f9fec" @@ -44,6 +45,14 @@ Theme { property color buttonBackgroundColor: secondaryBackground property color buttonDisabledForegroundColor: darkGrey property color buttonDisabledBackgroundColor: grey - property color roundedButtonForegroundColor: white + + property color roundedButtonForegroundColor: buttonForegroundColor property color roundedButtonBackgroundColor: secondaryBackground + property color roundedButtonSecondaryForegroundColor: white + property color roundedButtonSecondaryBackgroundColor: buttonForegroundColor + property color roundedButtonSecondaryHoveredBackgroundColor: darkAccentBlue + property color roundedButtonDisabledForegroundColor: buttonDisabledForegroundColor + property color roundedButtonDisabledBackgroundColor: buttonDisabledBackgroundColor + property color roundedButtonSecondaryDisabledForegroundColor: white + property color roundedButtonSecondaryDisabledBackgroundColor: buttonDisabledForegroundColor } diff --git a/ui/imports/Themes/Theme.qml b/ui/imports/Themes/Theme.qml index 58e7ea502f..ca9d229ff3 100644 --- a/ui/imports/Themes/Theme.qml +++ b/ui/imports/Themes/Theme.qml @@ -39,6 +39,7 @@ QtObject { property color buttonDisabledBackgroundColor property color roundedButtonForegroundColor property color roundedButtonBackgroundColor + property color roundedButtonSecondaryBackgroundColor property int xlPadding: 32 property int bigPadding: 24 diff --git a/ui/shared/status/StRoundButton.qml b/ui/shared/status/StRoundButton.qml deleted file mode 100644 index 5b16f0342f..0000000000 --- a/ui/shared/status/StRoundButton.qml +++ /dev/null @@ -1,35 +0,0 @@ -import QtQuick 2.13 -import QtQuick.Controls 2.13 -import QtQml 2.14 -import "../../imports" -import "../../shared" - -RoundButton { - property string type: "primary" - property string state: "default" - font.pixelSize: 15 - font.weight: Font.Medium - - enabled: state === "default" - - id: control - height: 44 - width: 44 - - /* background: Rectangle { */ - /* color: Style.current.roundedButtonBackgroundColor */ - /* radius: parent.width / 2 */ - /* } */ - - /* contentItem: Item { */ - /* anchors.fill: parent */ - /* LoadingImage { */ - /* id: loadingIndicator */ - /* visible: control.state === "pending" */ - /* height: loadingIndicator.visible ? 23 : 0 */ - /* width: loadingIndicator.height */ - /* anchors.horizontalCenter: parent.horizontalCenter */ - /* anchors.verticalCenter: parent.verticalCenter */ - /* } */ - /* } */ -} diff --git a/ui/shared/status/StButton.qml b/ui/shared/status/StatusButton.qml similarity index 100% rename from ui/shared/status/StButton.qml rename to ui/shared/status/StatusButton.qml diff --git a/ui/shared/status/StatusRoundButton.qml b/ui/shared/status/StatusRoundButton.qml new file mode 100644 index 0000000000..d380c89995 --- /dev/null +++ b/ui/shared/status/StatusRoundButton.qml @@ -0,0 +1,83 @@ +import QtQuick 2.13 +import QtQuick.Controls 2.13 +import QtGraphicalEffects 1.13 +import QtQml 2.14 +import "../../imports" +import "../../shared" + +RoundButton { + property string type: "primary" + property string state: "default" + property string size: "large" + + id: control + + font.pixelSize: 15 + font.weight: Font.Medium + + implicitWidth: size === "medium" ? 40 : 44 + implicitHeight: size === "medium" ? 40 : 44 + + enabled: state === "default" + + icon.source: "../../app/img/" + icon.name + ".svg" + icon.height: size === "medium" ? 14 : 20 + icon.width: size === "medium" ? 14 : 20 + icon.color: type === "secondary" ? + !enabled ? + Style.current.roundedButtonSecondaryDisabledForegroundColor : + Style.current.roundedButtonSecondaryForegroundColor + : + !enabled ? + Style.current.roundedButtonDisabledForegroundColor : + Style.current.roundedButtonForegroundColor + + background: Rectangle { + anchors.fill: parent + color: { + if (type === "secondary") { + return !enabled ? Style.current.roundedButtonSecondaryDisabledBackgroundColor : + hovered ? Style.current.roundedButtonSecondaryHoveredBackgroundColor : + Style.current.roundedButtonSecondaryBackgroundColor + } + return !enabled ? + Style.current.roundedButtonDisabledBackgroundColor : + Style.current.roundedButtonBackgroundColor + } + radius: parent.width / 2 + } + + LoadingImage { + id: loadingIndicator + visible: false + height: 18 + width: loadingIndicator.height + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + } + + ColorOverlay { + id: colorOverlay + anchors.fill: loadingIndicator + visible: control.state === "pending" + source: loadingIndicator + color: control.type === "secondary" ? + Style.current.roundedButtonSecondaryDisabledForegroundColor : + Style.current.roundedButtonDisabledForegroundColor + antialiasing: true + RotationAnimator { + target: colorOverlay + from: 0 + to: 360 + duration: 1200 + running: true + loops: Animation.Infinite + } + } + + MouseArea { + cursorShape: Qt.PointingHandCursor + anchors.fill: parent + onPressed: mouse.accepted = false + } +} diff --git a/ui/shared/status/qmldir b/ui/shared/status/qmldir index a4d186ea48..f966c0b4ca 100644 --- a/ui/shared/status/qmldir +++ b/ui/shared/status/qmldir @@ -1,2 +1,2 @@ -StButton 1.0 StButton.qml -StRoundButton 1.0 StRoundButton.qml +StatusButton 1.0 StatusButton.qml +StatusRoundButton 1.0 StatusRoundButton.qml