From 6aebdade73c1526874848e45bce35527be8e177f Mon Sep 17 00:00:00 2001
From: Lipu Fei <lipu.fei815@gmail.com>
Date: Wed, 30 Jan 2019 09:45:54 +0100
Subject: [PATCH] Remake: Change to "sign in" button

CURA-6132
---
 resources/qml/Account/AccountWidget.qml       | 85 ++++++++++++++-----
 resources/qml/MainWindow/MainWindowHeader.qml |  1 +
 2 files changed, 66 insertions(+), 20 deletions(-)

diff --git a/resources/qml/Account/AccountWidget.qml b/resources/qml/Account/AccountWidget.qml
index d3bd6fd130..23704432af 100644
--- a/resources/qml/Account/AccountWidget.qml
+++ b/resources/qml/Account/AccountWidget.qml
@@ -1,46 +1,91 @@
 // Copyright (c) 2018 Ultimaker B.V.
 // Cura is released under the terms of the LGPLv3 or higher.
 
-import QtQuick 2.7
-import QtQuick.Controls 2.1
+import QtQuick 2.10
+import QtQuick.Controls 2.3
 
 import UM 1.4 as UM
 import Cura 1.1 as Cura
 
-Button
+Item
 {
-    id: accountWidget
     property var profile: Cura.API.account.userProfile
     property var loggedIn: Cura.API.account.isLoggedIn
 
-    implicitHeight: UM.Theme.getSize("main_window_header").height
-    implicitWidth: UM.Theme.getSize("main_window_header").height
+    height: signInButton.height > accountWidget.height ? signInButton.height : accountWidget.height
+    width: signInButton.width > accountWidget.width ? signInButton.width : accountWidget.width
 
-    background: AvatarImage
+    Button
     {
-        id: avatar
+        id: signInButton
 
-        width: Math.round(0.8 * accountWidget.width)
-        height: Math.round(0.8 * accountWidget.height)
-        anchors.verticalCenter: accountWidget.verticalCenter
-        anchors.horizontalCenter: accountWidget.horizontalCenter
+        anchors.verticalCenter: parent.verticalCenter
 
-        source:
+        text: catalog.i18nc("@action:button", "Sign in")
+
+        height: Math.round(0.5 * UM.Theme.getSize("main_window_header").height)
+        onClicked: popup.opened ? popup.close() : popup.open()
+        visible: !loggedIn
+
+        hoverEnabled: true
+
+        background: Rectangle
         {
-            if(loggedIn)
+            radius: UM.Theme.getSize("action_button_radius").width
+            color: signInButton.hovered ? UM.Theme.getColor("primary_text") : UM.Theme.getColor("main_window_header_background")
+            border.width: UM.Theme.getSize("default_lining").width
+            border.color: UM.Theme.getColor("primary_text")
+        }
+
+        contentItem: Label
+        {
+            id: label
+            text: signInButton.text
+            font: UM.Theme.getFont("default")
+            color: signInButton.hovered ? UM.Theme.getColor("main_window_header_background") : UM.Theme.getColor("primary_text")
+            width: contentWidth
+            verticalAlignment: Text.AlignVCenter
+            renderType: Text.NativeRendering
+        }
+    }
+
+    Button
+    {
+        id: accountWidget
+
+        anchors.verticalCenter: parent.verticalCenter
+
+        implicitHeight: UM.Theme.getSize("main_window_header").height
+        implicitWidth: UM.Theme.getSize("main_window_header").height
+
+        visible: loggedIn
+
+        background: AvatarImage
+        {
+            id: avatar
+
+            width: Math.round(0.8 * accountWidget.width)
+            height: Math.round(0.8 * accountWidget.height)
+            anchors.verticalCenter: accountWidget.verticalCenter
+            anchors.horizontalCenter: accountWidget.horizontalCenter
+
+            source:
             {
-                if(profile["profile_image_url"])
+                if(loggedIn)
                 {
-                    return profile["profile_image_url"]
+                    if(profile["profile_image_url"])
+                    {
+                        return profile["profile_image_url"]
+                    }
+                    return UM.Theme.getImage("avatar_no_user")
                 }
                 return UM.Theme.getImage("avatar_no_user")
             }
-            return UM.Theme.getImage("avatar_no_user")
+            outlineColor: loggedIn ? UM.Theme.getColor("account_widget_outline_active") : UM.Theme.getColor("lining")
         }
-        outlineColor: loggedIn ? UM.Theme.getColor("account_widget_outline_active") : UM.Theme.getColor("lining")
-    }
 
-    onClicked: popup.opened ? popup.close() : popup.open()
+        onClicked: popup.opened ? popup.close() : popup.open()
+    }
 
     Popup
     {
diff --git a/resources/qml/MainWindow/MainWindowHeader.qml b/resources/qml/MainWindow/MainWindowHeader.qml
index d75ccd0f04..ffcad4c75b 100644
--- a/resources/qml/MainWindow/MainWindowHeader.qml
+++ b/resources/qml/MainWindow/MainWindowHeader.qml
@@ -122,6 +122,7 @@ Item
         id: accountWidget
         anchors
         {
+            verticalCenter: parent.verticalCenter
             right: parent.right
             rightMargin: UM.Theme.getSize("default_margin").width
         }