From 27a140e844a377cafdf685ed994271b7a0f296a3 Mon Sep 17 00:00:00 2001
From: Pascal Precht <pascal.precht@gmail.com>
Date: Fri, 28 Aug 2020 13:39:23 +0200
Subject: [PATCH] fix(StatusRoundButton): fixes binding loop and removes type
 property

As per discussion, there's no "primary" and "secondary" type in round buttons.
They just appear in different sizes (44x44, 40x40, 32x32). The size determines
their look & feel
---
 .../AppLayouts/UIComponents/UIComponents.qml  | 24 ++++++--
 ui/shared/status/StatusRoundButton.qml        | 58 +++++++++++++++----
 2 files changed, 66 insertions(+), 16 deletions(-)

diff --git a/ui/app/AppLayouts/UIComponents/UIComponents.qml b/ui/app/AppLayouts/UIComponents/UIComponents.qml
index 21e10ec067..ad8826d93a 100644
--- a/ui/app/AppLayouts/UIComponents/UIComponents.qml
+++ b/ui/app/AppLayouts/UIComponents/UIComponents.qml
@@ -39,7 +39,6 @@ Item {
 
             StatusButton {
                 text: "Secondary Small Button"
-                type: "secondary"
                 size: "small"
             }
 
@@ -50,12 +49,18 @@ Item {
             }
 
             StatusRoundButton {
-                type: "secondary"
                 size: "medium"
                 icon.name: "arrow-right"
                 icon.height: 15
                 icon.width: 20
             }
+
+            StatusRoundButton {
+                size: "small"
+                icon.name: "arrow-right"
+                icon.height: 12
+                icon.width: 18
+            }
         }
 
         RowLayout {
@@ -91,13 +96,20 @@ Item {
             }
 
             StatusRoundButton {
-                type: "secondary"
                 size: "medium"
                 icon.name: "arrow-right"
                 icon.height: 15
                 icon.width: 20
                 enabled: false
             }
+
+            StatusRoundButton {
+                size: "small"
+                icon.name: "arrow-right"
+                icon.height: 12
+                icon.width: 18
+                enabled: false
+            }
         }
 
         RowLayout {
@@ -130,10 +142,14 @@ Item {
             }
 
             StatusRoundButton {
-                type: "secondary"
                 size: "medium"
                 state: "pending"
             }
+
+            StatusRoundButton {
+                size: "small"
+                state: "pending"
+            }
         }
 
         RowLayout {
diff --git a/ui/shared/status/StatusRoundButton.qml b/ui/shared/status/StatusRoundButton.qml
index c539df0a8c..54cd12c76d 100644
--- a/ui/shared/status/StatusRoundButton.qml
+++ b/ui/shared/status/StatusRoundButton.qml
@@ -6,24 +6,54 @@ 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
+    implicitWidth: {
+        switch(size) {
+            case "large":
+                return 44
+            case "medium":
+                return 40
+            case "small":
+                return 32
+            default:
+                return 44
+        }
+    }
+    implicitHeight: implicitWidth
 
     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" ? 
+    icon.height: {
+        switch(size) {
+            case "large":
+                return 20
+            case "medium":
+                return 14
+            case "small":
+                return 12
+            default:
+                return 20
+        }
+    }
+    icon.width: {
+        switch(size) {
+            case "large":
+                return 20
+            case "medium":
+                return 14
+            case "small":
+                return 12
+            default:
+                return 20
+        }
+    }
+    icon.color: size === "medium" || size === "small" ? 
         !enabled ? 
           Style.current.roundedButtonSecondaryDisabledForegroundColor :
           Style.current.roundedButtonSecondaryForegroundColor
@@ -32,10 +62,14 @@ RoundButton {
           Style.current.roundedButtonDisabledForegroundColor : 
           Style.current.roundedButtonForegroundColor
 
+    onIconChanged: {
+      icon.source = icon.name ? "../../app/img/" + icon.name + ".svg" : ""
+    }
+
     background: Rectangle {
         anchors.fill: parent
         color: {
-            if (type === "secondary") {
+            if (size === "medium" || size == "small") {
                 return !enabled ? Style.current.roundedButtonSecondaryDisabledBackgroundColor :
                   hovered ? Style.current.roundedButtonSecondaryHoveredBackgroundColor : 
                   Style.current.roundedButtonSecondaryBackgroundColor
@@ -64,7 +98,7 @@ RoundButton {
         LoadingImage {
             id: loadingIndicator
             visible: false
-            height: 18
+            height: size === "small" ? 14 : 18
             width: loadingIndicator.height
             anchors.horizontalCenter: parent.horizontalCenter
             anchors.verticalCenter: parent.verticalCenter
@@ -74,7 +108,7 @@ RoundButton {
             anchors.fill: iconImg
             visible: control.state === "default"
             source: iconImg
-            color: control.type === "secondary" ?
+            color: control.size === "medium" || control.size === "small" ?
               Style.current.roundedButtonSecondaryDisabledForegroundColor :
               Style.current.roundedButtonDisabledForegroundColor
             antialiasing: true
@@ -85,7 +119,7 @@ RoundButton {
             visible: control.state === "pending"
             anchors.fill: loadingIndicator
             source: loadingIndicator
-            color: control.type === "secondary" ?
+            color: control.size === "medium" || control.size === "small" ?
               Style.current.roundedButtonSecondaryDisabledForegroundColor :
               Style.current.roundedButtonDisabledForegroundColor
             antialiasing: true