From 71fbdef1640b139f72cb0e828697e9d07bf373c8 Mon Sep 17 00:00:00 2001
From: Khushboo Mehta <mehtakhushboo@hotmail.com>
Date: Fri, 15 Oct 2021 12:12:00 +0200
Subject: [PATCH] feat(StatusFlatRoundButton): Update the StatusFlatRoundButton
 to take over button behaviour from StatusIconButton under ui/shared/status

1. Added icon disabledColor property under StatusIconSettings
2. Added Tertiary and Quaternary type to accomodate hovered behavior needed in many buttons
3. Added a missing gif icon.
---
 sandbox/Buttons.qml                           | 57 +++++++++++++++++++
 .../Controls/StatusFlatRoundButton.qml        | 23 +++++++-
 src/StatusQ/Controls/StatusRoundButton.qml    |  2 +-
 src/StatusQ/Core/StatusIconSettings.qml       |  1 +
 src/assets/img/icons/gif.svg                  |  6 ++
 5 files changed, 85 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/img/icons/gif.svg

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 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 1.5H4C2.61929 1.5 1.5 2.61929 1.5 4V16C1.5 17.3807 2.61929 18.5 4 18.5H16C17.3807 18.5 18.5 17.3807 18.5 16V4C18.5 2.61929 17.3807 1.5 16 1.5ZM4 0C1.79086 0 0 1.79086 0 4V16C0 18.2091 1.79086 20 4 20H16C18.2091 20 20 18.2091 20 16V4C20 1.79086 18.2091 0 16 0H4Z" fill="#939BA1"/>
+<path d="M8.72261 11.4868V10.4133C8.72261 9.99528 8.38061 9.65328 7.96261 9.65328H6.22411C5.90111 9.65328 5.64461 9.90978 5.64461 10.2328C5.64461 10.5748 5.90111 10.8313 6.22411 10.8313H7.37361V11.5913C7.11711 11.8288 6.58511 12.0758 6.02461 12.0758C4.87511 12.0758 4.03911 11.1923 4.03911 9.99528C4.03911 8.79828 4.87511 7.91478 6.02461 7.91478C6.50911 7.91478 6.98411 8.12378 7.34511 8.47528C7.46861 8.59878 7.63961 8.66528 7.80111 8.66528C8.13361 8.66528 8.43761 8.38978 8.43761 8.05728C8.43761 7.91478 8.38061 7.76278 8.27611 7.64878C7.78211 7.11678 7.05061 6.71778 6.02461 6.71778C4.17211 6.71778 2.65211 7.99078 2.65211 9.99528C2.65211 11.9903 4.17211 13.2823 6.02461 13.2823C7.30711 13.2823 8.72261 12.6363 8.72261 11.4868Z" fill="#939BA1"/>
+<path d="M11.4392 12.5603V7.43978C11.4392 7.07878 11.1352 6.77478 10.7742 6.77478C10.3942 6.77478 10.0902 7.07878 10.0902 7.43978V12.5603C10.0902 12.9213 10.3942 13.2253 10.7552 13.2253C11.1352 13.2253 11.4392 12.9213 11.4392 12.5603Z" fill="#939BA1"/>
+<path d="M17.3479 7.43029C17.3479 7.09778 17.0819 6.83179 16.7684 6.83179H13.5669C13.1489 6.83179 12.8069 7.17379 12.8069 7.59179V12.5603C12.8069 12.9213 13.1109 13.2253 13.4719 13.2253C13.8519 13.2253 14.1559 12.9213 14.1559 12.5603V11.0463C14.1559 10.7701 14.3797 10.5463 14.6559 10.5463H16.2425C16.556 10.5463 16.822 10.2803 16.822 9.95728C16.822 9.62478 16.556 9.35879 16.2425 9.35879H14.6559C14.3797 9.35879 14.1559 9.13493 14.1559 8.85879V8.51929C14.1559 8.24314 14.3797 8.01929 14.6559 8.01929H16.7684C17.0819 8.01929 17.3479 7.75329 17.3479 7.43029Z" fill="#939BA1"/>
+</svg>