Merge remote-tracking branch 'origin/4.0'

resources/qml/Account/AccountDetails.qml

@@ -1,8 +1,8 @@
 // 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
@@ -16,38 +16,6 @@ Column
     padding: UM.Theme.getSize("wide_margin").height
     spacing: UM.Theme.getSize("wide_margin").height
 
-    AvatarImage
-    {
-        id: avatar
-        width: UM.Theme.getSize("avatar_image").width
-        height: UM.Theme.getSize("avatar_image").height
-        anchors.horizontalCenter: parent.horizontalCenter
-        source:
-        {
-            if(loggedIn)
-            {
-                if(profileImage)
-                {
-                    return profileImage
-                }
-                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")
-    }
-
-    Label
-    {
-        id: information
-        anchors.horizontalCenter: parent.horizontalCenter
-        horizontalAlignment: Text.AlignHCenter
-        renderType: Text.NativeRendering
-        text: loggedIn ? profile["username"] : catalog.i18nc("@label", "Please log in or create an account to\nenjoy all features of Ultimaker Cura.")
-        font: loggedIn ? UM.Theme.getFont("large_bold") : UM.Theme.getFont("default")
-        color: UM.Theme.getColor("text")
-    }
-
     Loader
     {
         id: accountOperations

resources/qml/Account/AccountWidget.qml

@@ -1,46 +1,115 @@
 // 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)
-            {
-                if(profile["profile_image_url"])
-                {
-                    return profile["profile_image_url"]
-                }
-                return UM.Theme.getImage("avatar_no_user")
-            }
-            return UM.Theme.getImage("avatar_no_user")
+            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
         }
-        outlineColor: loggedIn ? UM.Theme.getColor("account_widget_outline_active") : UM.Theme.getColor("lining")
     }
 
-    onClicked: popup.opened ? popup.close() : popup.open()
+    Button
+    {
+        id: accountWidget
+
+        anchors.verticalCenter: parent.verticalCenter
+
+        implicitHeight: UM.Theme.getSize("main_window_header").height
+        implicitWidth: UM.Theme.getSize("main_window_header").height
+
+        hoverEnabled: true
+
+        visible: loggedIn
+
+        text: (loggedIn && profile["profile_image_url"] == "") ? profile["username"].charAt(0).toUpperCase() : ""
+
+        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: (loggedIn && profile["profile_image_url"]) ? profile["profile_image_url"] : ""
+            outlineColor: loggedIn ? UM.Theme.getColor("account_widget_outline_active") : UM.Theme.getColor("lining")
+        }
+
+        contentItem: Item
+        {
+            anchors.verticalCenter: accountWidget.verticalCenter
+            anchors.horizontalCenter: accountWidget.horizontalCenter
+            visible: avatar.source == ""
+            Rectangle
+            {
+                id: initialCircle
+                anchors.centerIn: parent
+                width: Math.min(parent.width, parent.height)
+                height: width
+                radius: width
+                color: accountWidget.hovered ? UM.Theme.getColor("primary_text") : "transparent"
+                border.width: 1
+                border.color: UM.Theme.getColor("primary_text")
+            }
+
+            Label
+            {
+                id: initialLabel
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.horizontalCenter: parent.horizontalCenter
+                text: accountWidget.text
+                font: UM.Theme.getFont("large_bold")
+                color: accountWidget.hovered ? UM.Theme.getColor("main_window_header_background") : UM.Theme.getColor("primary_text")
+                verticalAlignment: Text.AlignVCenter
+                horizontalAlignment: Text.AlignHCenter
+                renderType: Text.NativeRendering
+            }
+        }
+
+        onClicked: popup.opened ? popup.close() : popup.open()
+    }
 
     Popup
     {

resources/qml/Account/AvatarImage.qml

@@ -1,8 +1,8 @@
 // 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 QtGraphicalEffects 1.0
 
 import UM 1.4 as UM
@@ -16,6 +16,7 @@ Item
 
     property alias source: profileImage.source
     property alias outlineColor: profileImageOutline.color
+    property bool hasAvatar: source != ""
 
     Image
     {
@@ -32,6 +33,7 @@ Item
         id: profileImageMask
         anchors.fill: parent
         radius: width
+        color: hasAvatar ? "white" : "transparent"
     }
 
     OpacityMask
@@ -39,6 +41,7 @@ Item
         anchors.fill: parent
         source: profileImage
         maskSource: profileImageMask
+        visible: hasAvatar
         cached: true
     }
 
@@ -49,8 +52,9 @@ Item
         // Make it a bit bigger than it has to, otherwise it sometimes shows a white border.
         width: parent.width + 2
         height: parent.height + 2
+        visible: hasAvatar
         source: UM.Theme.getIcon("circle_outline")
         sourceSize: Qt.size(parent.width, parent.height)
         color: UM.Theme.getColor("account_widget_ouline_active")
     }
-}
+}

resources/qml/Account/GeneralOperations.qml

@@ -1,31 +1,87 @@
 // Copyright (c) 2018 Ultimaker B.V.
 // Cura is released under the terms of the LGPLv3 or higher.
 
-import QtQuick 2.2
-import QtQuick.Controls 1.1
+import QtQuick 2.10
+import QtQuick.Controls 2.3
 
 import UM 1.4 as UM
 import Cura 1.1 as Cura
 
-Row
+Column
 {
     spacing: UM.Theme.getSize("default_margin").width
 
+    Image
+    {
+        id: machinesImage
+        anchors.horizontalCenter: parent.horizontalCenter
+        source: UM.Theme.getIcon("sign_in_to_cloud")
+        horizontalAlignment: Image.AlignHCenter
+        verticalAlignment: Image.AlignVCenter
+    }
+
+    Label
+    {
+        id: title
+        anchors.horizontalCenter: parent.horizontalCenter
+        horizontalAlignment: Text.AlignHCenter
+        renderType: Text.NativeRendering
+        text: catalog.i18nc("@label", "Ultimaker Cloud")
+        font: UM.Theme.getFont("large_bold")
+        color: UM.Theme.getColor("text")
+    }
+
+    Label
+    {
+        id: generalInformation
+        anchors.horizontalCenter: parent.horizontalCenter
+        horizontalAlignment: Text.AlignHCenter
+        renderType: Text.NativeRendering
+        text: catalog.i18nc("@label", "Enjoy a more powerful 3D printing experience.")
+        font: UM.Theme.getFont("default")
+        color: UM.Theme.getColor("text")
+    }
+
+    Label
+    {
+        id: generalInformationPoints
+        anchors.horizontalCenter: parent.horizontalCenter
+        horizontalAlignment: Text.AlignLeft
+        renderType: Text.NativeRendering
+        text: {
+            var t = " - Send prints to your Ultimaker printer from anywhere\n"
+                  + " - Access your Ultimaker Cura Settings worldwide\n"
+                  + " - Enhance your workflow with advanced material profiles"
+            return catalog.i18nc("@label", t)
+        }
+        lineHeight: 1.4
+        font: UM.Theme.getFont("default")
+        color: UM.Theme.getColor("text")
+    }
+
+    // placeholder
+    Label
+    {
+        text: " "
+    }
+
+    Cura.PrimaryButton
+    {
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: UM.Theme.getSize("account_button").width
+        height: UM.Theme.getSize("account_button").height
+        text: catalog.i18nc("@button", "Sign in")
+        onClicked: Cura.API.account.login()
+        fixedWidthMode: true
+    }
+
     Cura.SecondaryButton
     {
+        anchors.horizontalCenter: parent.horizontalCenter
         width: UM.Theme.getSize("account_button").width
         height: UM.Theme.getSize("account_button").height
         text: catalog.i18nc("@button", "Create account")
         onClicked: Qt.openUrlExternally(CuraApplication.ultimakerCloudAccountRootUrl + "/app/create")
         fixedWidthMode: true
     }
-
-    Cura.PrimaryButton
-    {
-        width: UM.Theme.getSize("account_button").width
-        height: UM.Theme.getSize("account_button").height
-        text: catalog.i18nc("@button", "Login")
-        onClicked: Cura.API.account.login()
-        fixedWidthMode: true
-    }
 }

resources/qml/Account/UserOperations.qml

@@ -1,31 +1,63 @@
 // Copyright (c) 2018 Ultimaker B.V.
 // Cura is released under the terms of the LGPLv3 or higher.
 
-import QtQuick 2.2
-import QtQuick.Controls 1.1
+import QtQuick 2.10
+import QtQuick.Controls 2.3
 
 import UM 1.4 as UM
 import Cura 1.1 as Cura
 
-Row
+Column
 {
+    width: Math.max(title.width,
+                    accountButton.width) * 1.5
+
     spacing: UM.Theme.getSize("default_margin").width
 
+    Label
+    {
+        id: title
+        anchors.horizontalCenter: parent.horizontalCenter
+        horizontalAlignment: Text.AlignHCenter
+        renderType: Text.NativeRendering
+        text: catalog.i18nc("@label", "Hi " + profile.username)
+        font: UM.Theme.getFont("large_bold")
+        color: UM.Theme.getColor("text")
+    }
+
+    // placeholder
+    Label
+    {
+        text: " "
+    }
+
     Cura.SecondaryButton
     {
+        id: accountButton
+        anchors.horizontalCenter: parent.horizontalCenter
         width: UM.Theme.getSize("account_button").width
         height: UM.Theme.getSize("account_button").height
-        text: catalog.i18nc("@button", "Manage account")
+        text: catalog.i18nc("@button", "Ultimaker account")
         onClicked: Qt.openUrlExternally(CuraApplication.ultimakerCloudAccountRootUrl)
         fixedWidthMode: true
     }
 
-    Cura.PrimaryButton
+    Label
     {
-        width: UM.Theme.getSize("account_button").width
-        height: UM.Theme.getSize("account_button").height
-        text: catalog.i18nc("@button", "Logout")
-        onClicked: Cura.API.account.logout()
-        fixedWidthMode: true
+        id: signOutButton
+        anchors.horizontalCenter: parent.horizontalCenter
+        text: catalog.i18nc("@button", "Sign out")
+        color: UM.Theme.getColor("secondary_button_text")
+        font: UM.Theme.getFont("medium")
+        renderType: Text.NativeRendering
+
+        MouseArea
+        {
+            anchors.fill: parent
+            onClicked: Cura.API.account.logout()
+            hoverEnabled: true
+            onEntered: signOutButton.font.underline = true
+            onExited: signOutButton.font.underline = false
+        }
     }
-}
+}

resources/qml/ActionButton.qml

@@ -48,12 +48,13 @@ Button
     contentItem: Row
     {
         spacing: UM.Theme.getSize("narrow_margin").width
+        height: button.height
         //Left side icon. Only displayed if !isIconOnRightSide.
         UM.RecolorImage
         {
             id: buttonIconLeft
             source: ""
-            height: UM.Theme.getSize("action_button_icon").height
+            height: visible ? UM.Theme.getSize("action_button_icon").height : 0
             width: visible ? height : 0
             sourceSize.width: width
             sourceSize.height: height
@@ -70,9 +71,11 @@ Button
             font: UM.Theme.getFont("medium")
             visible: text != ""
             renderType: Text.NativeRendering
+            height: parent.height
             anchors.verticalCenter: parent.verticalCenter
             width: fixedWidthMode ? button.width - button.leftPadding - button.rightPadding : undefined
             horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
             elide: Text.ElideRight
         }
 
@@ -81,7 +84,7 @@ Button
         {
             id: buttonIconRight
             source: buttonIconLeft.source
-            height: UM.Theme.getSize("action_button_icon").height
+            height: visible ? UM.Theme.getSize("action_button_icon").height : 0
             width: visible ? height : 0
             sourceSize.width: width
             sourceSize.height: height

resources/qml/Cura.qml

@@ -373,6 +373,24 @@ UM.MainWindow
                     bottom: parent.bottom
                     bottomMargin:  UM.Theme.getSize("default_margin").height
                 }
+
+                primaryButton: Component
+                {
+                    Cura.PrimaryButton
+                    {
+                        text: model.name
+                        height: UM.Theme.getSize("message_action_button").height
+                    }
+                }
+
+                secondaryButton: Component
+                {
+                    Cura.SecondaryButton
+                    {
+                        text: model.name
+                        height: UM.Theme.getSize("message_action_button").height
+                    }
+                }
             }
         }
 

resources/qml/MainWindow/MainWindowHeader.qml

@@ -29,7 +29,7 @@ Item
         source: UM.Theme.getImage("logo")
         width: UM.Theme.getSize("logo").width
         height: UM.Theme.getSize("logo").height
-
+        fillMode: Image.PreserveAspectFit
         sourceSize.width: width
         sourceSize.height: height
     }
@@ -122,6 +122,7 @@ Item
         id: accountWidget
         anchors
         {
+            verticalCenter: parent.verticalCenter
             right: parent.right
             rightMargin: UM.Theme.getSize("default_margin").width
         }