diff --git a/sandbox/Buttons.qml b/sandbox/Buttons.qml index ece96f6f..a9518c7d 100644 --- a/sandbox/Buttons.qml +++ b/sandbox/Buttons.qml @@ -240,6 +240,63 @@ Column { loading: true size: StatusBaseButton.Size.Small } + + // Tertiary + StatusFlatRoundButton { + type: StatusFlatRoundButton.Type.Tertiary + icon.name: "gif" + } + + StatusFlatRoundButton { + type: StatusFlatRoundButton.Type.Tertiary + icon.name: "gif" + enabled: false + } + + StatusFlatRoundButton { + type: StatusFlatRoundButton.Type.Tertiary + icon.name: "gif" + loading: true + } + + // No background Tertiary + StatusFlatRoundButton { + type: StatusFlatRoundButton.Type.Tertiary + color: "transparent" + icon.name: "gif" + } + + StatusFlatRoundButton { + type: StatusFlatRoundButton.Type.Tertiary + icon.name: "gif" + color: "transparent" + enabled: false + } + + StatusFlatRoundButton { + type: StatusFlatRoundButton.Type.Tertiary + icon.name: "gif" + color: "transparent" + loading: true + } + + // Quartenery + StatusFlatRoundButton { + type: StatusFlatRoundButton.Type.Quaternary + icon.name: "gif" + } + + StatusFlatRoundButton { + type: StatusFlatRoundButton.Type.Quaternary + icon.name: "gif" + enabled: false + } + + StatusFlatRoundButton { + type: StatusFlatRoundButton.Type.Quaternary + icon.name: "gif" + loading: true + } } StatusPickerButton { diff --git a/src/StatusQ/Controls/StatusFlatRoundButton.qml b/src/StatusQ/Controls/StatusFlatRoundButton.qml index b9e75eac..739545d0 100644 --- a/src/StatusQ/Controls/StatusFlatRoundButton.qml +++ b/src/StatusQ/Controls/StatusFlatRoundButton.qml @@ -18,14 +18,19 @@ Rectangle { return Theme.palette.directColor1; case StatusFlatRoundButton.Type.Primary: return Theme.palette.primaryColor1; + case StatusFlatRoundButton.Type.Tertiary: + return hovered ? Theme.palette.primaryColor1: Theme.palette.baseColor1; + case StatusFlatRoundButton.Type.Quaternary: + return hovered ? Theme.palette.primaryColor1: Theme.palette.directColor1; } } - property color disabledColor: { + disabledColor: { switch(statusFlatRoundButton.type) { case StatusFlatRoundButton.Type.Secondary: - return Theme.palette.baseColor1; case StatusFlatRoundButton.Type.Primary: + case StatusFlatRoundButton.Type.Tertiary: + case StatusFlatRoundButton.Type.Quaternary: return Theme.palette.baseColor1; } } @@ -35,6 +40,7 @@ Rectangle { property alias hovered: sensor.containsMouse property alias tooltip: statusToolTip + property alias backgroundHoverColor: backgroundSettings.hoverColor property bool highlighted: false @@ -47,7 +53,9 @@ Rectangle { enum Type { Primary, - Secondary + Secondary, + Tertiary, + Quaternary } /// Implementation @@ -59,6 +67,8 @@ Rectangle { switch(statusFlatRoundButton.type) { case StatusFlatRoundButton.Type.Primary: case StatusFlatRoundButton.Type.Secondary: + case StatusFlatRoundButton.Type.Tertiary: + case StatusFlatRoundButton.Type.Quaternary: return "transparent"; } } @@ -68,6 +78,8 @@ Rectangle { case StatusFlatRoundButton.Type.Primary: return Theme.palette.primaryColor3; case StatusFlatRoundButton.Type.Secondary: + case StatusFlatRoundButton.Type.Tertiary: + case StatusFlatRoundButton.Type.Quaternary: return Theme.palette.baseColor2; } } @@ -76,6 +88,8 @@ Rectangle { switch(statusFlatRoundButton.type) { case StatusFlatRoundButton.Type.Primary: case StatusFlatRoundButton.Type.Secondary: + case StatusFlatRoundButton.Type.Tertiary: + case StatusFlatRoundButton.Type.Quaternary: return "transparent"; } } @@ -85,6 +99,8 @@ Rectangle { case StatusFlatRoundButton.Type.Primary: return Theme.palette.primaryColor3; case StatusFlatRoundButton.Type.Secondary: + case StatusFlatRoundButton.Type.Tertiary: + case StatusFlatRoundButton.Type.Quaternary: return Theme.palette.baseColor4; } } @@ -120,6 +136,7 @@ Rectangle { visible: !loading icon: statusFlatRoundButton.icon.name + source: statusFlatRoundButton.icon.source rotation: statusFlatRoundButton.icon.rotation width: statusFlatRoundButton.icon.width diff --git a/src/StatusQ/Controls/StatusRoundButton.qml b/src/StatusQ/Controls/StatusRoundButton.qml index 7f2583fd..fe23effa 100644 --- a/src/StatusQ/Controls/StatusRoundButton.qml +++ b/src/StatusQ/Controls/StatusRoundButton.qml @@ -21,7 +21,7 @@ Rectangle { } } - property color disabledColor: { + disabledColor: { switch(statusRoundButton.type) { case StatusRoundButton.Type.Primary: return Theme.palette.baseColor1; diff --git a/src/StatusQ/Core/StatusIconSettings.qml b/src/StatusQ/Core/StatusIconSettings.qml index d292a05f..7e97ca43 100644 --- a/src/StatusQ/Core/StatusIconSettings.qml +++ b/src/StatusQ/Core/StatusIconSettings.qml @@ -8,6 +8,7 @@ QtObject { property real width property real height property color color + property color disabledColor property url source property int rotation property bool isLetterIdenticon diff --git a/src/assets/img/icons/gif.svg b/src/assets/img/icons/gif.svg new file mode 100644 index 00000000..442c721d --- /dev/null +++ b/src/assets/img/icons/gif.svg @@ -0,0 +1,6 @@ + + + + + +