From b064f9ebd8cff834e7a7fd18e3e3b9ddfe4e3a14 Mon Sep 17 00:00:00 2001
From: Noelia <noelia@status.im>
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.
---
 sandbox/controls/Buttons.qml               | 19 ++++++++++++++
 src/StatusQ/Controls/StatusRoundButton.qml | 30 +++++++++++++++++++---
 2 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/sandbox/controls/Buttons.qml b/sandbox/controls/Buttons.qml
index 35a93a57..34e040ff 100644
--- a/sandbox/controls/Buttons.qml
+++ b/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/src/StatusQ/Controls/StatusRoundButton.qml b/src/StatusQ/Controls/StatusRoundButton.qml
index 7c3cb120..51dca636 100644
--- a/src/StatusQ/Controls/StatusRoundButton.qml
+++ b/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