Add the callout panel to the account panel, with the two components that

will show up when the user is logged in or when not.

Contributes to CURA-5784.

resources/qml/Accounts/AccountWidget.qml

@@ -5,10 +5,14 @@ import QtQuick 2.2
 import QtQuick.Controls 1.1
 
 import UM 1.4 as UM
+import Cura 1.1 as Cura
 
 Item
 {
-    id: base
+    id: accountWidget
+    property var profile: Cura.API.account.userProfile
+    property var loggedIn: Cura.API.account.isLoggedIn
+    property var logoutCallback: Cura.API.account.logout
     height: UM.Theme.getSize("topheader").height
     width: UM.Theme.getSize("topheader").height
 
@@ -19,24 +23,21 @@ Item
         height: Math.round(0.8 * parent.height)
         anchors.verticalCenter: parent.verticalCenter
         anchors.horizontalCenter: parent.horizontalCenter
+        source: loggedIn ? profile["profile_image_url"] : UM.Theme.getImage("avatar_default")
     }
 
     MouseArea
     {
-        anchors.fill: avatar
-        onClicked:
-        {
-            // Collapse/Expand the dropdown panel
-            accountManagementPanel.visible = !accountManagementPanel.visible
-        }
+        anchors.fill: parent
+        onClicked: accountManagementPanel.visible = !accountManagementPanel.visible // Collapse/Expand the dropdown panel
     }
 
     UM.PointingRectangle
     {
         id: accountManagementPanel
 
-        width: 250
-        height: 250
+        width: panel.width
+        height: panel.height
 
         anchors
         {
@@ -56,16 +57,23 @@ Item
         borderColor: UM.Theme.getColor("lining")
         borderWidth: UM.Theme.getSize("default_lining").width
 
+        // Shows the user management options or general options to create account
         Loader
         {
             id: panel
-            sourceComponent: login
+            sourceComponent: loggedIn ? userManagementWidget : generalManagementWidget
         }
     }
 
     Component
     {
-        id: login
-        Label {text: "HOLA"}
+        id: userManagementWidget
+        UserManagementWidget { }
+    }
+
+    Component
+    {
+        id: generalManagementWidget
+        GeneralManagementWidget { }
     }
 }

resources/qml/Accounts/AvatarImage.qml

@@ -9,10 +9,12 @@ Item
 {
     id: avatar
 
+    property var source
+
     Image
     {
         id: profileImage
-        source: UM.Theme.getImage("avatar_default")
+        source: avatar.source ? avatar.source : UM.Theme.getImage("avatar_default")
         sourceSize: Qt.size(parent.width, parent.height)
         width: parent.width
         height: parent.height

resources/qml/Accounts/GeneralManagementWidget.qml

@@ -0,0 +1,23 @@
+// 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 UM 1.4 as UM
+import Cura 1.1 as Cura
+
+import "../components"
+
+Column
+{
+    ActionButton
+    {
+        text: catalog.i18nc("@button", "Sign In")
+        color: "transparent"
+        hoverColor: "transparent"
+        textColor: UM.Theme.getColor("text")
+        textHoverColor: UM.Theme.getColor("text_link")
+        onClicked: Cura.API.account.login()
+    }
+}

resources/qml/Accounts/UserManagementWidget.qml

@@ -0,0 +1,33 @@
+// 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 UM 1.4 as UM
+import Cura 1.1 as Cura
+
+import "../components"
+
+Column
+{
+    ActionButton
+    {
+        text: catalog.i18nc("@button", "Manage Profile")
+        color: "transparent"
+        hoverColor: "transparent"
+        textColor: UM.Theme.getColor("text")
+        textHoverColor: UM.Theme.getColor("text_link")
+        onClicked: Qt.openUrlExternally("https://account.ultimaker.com")
+    }
+
+    ActionButton
+    {
+        text: catalog.i18nc("@button", "Sign Out")
+        color: "transparent"
+        hoverColor: "transparent"
+        textColor: UM.Theme.getColor("text")
+        textHoverColor: UM.Theme.getColor("text_link")
+        onClicked: Cura.API.account.logout()
+    }
+}

resources/qml/Cura.qml

@@ -105,6 +105,7 @@ UM.MainWindow
 
             width: parent.width
             height: parent.height - menu.height - topHeader.height
+            z: topHeader.z - 1
 
             Keys.forwardTo: menu
 

resources/qml/Skeleton/ApplicationViews.qml

@@ -9,7 +9,7 @@ import QtQuick.Layouts 1.1
 import UM 1.4 as UM
 import Cura 1.0 as Cura
 
-import "components"
+import "../components"
 
 // This item contains the views selector, a combobox that is dinamically created from
 // the list of available Views (packages that create different visualizactions of the

resources/qml/Skeleton/TopHeader.qml

@@ -8,7 +8,7 @@ import QtQuick.Controls.Styles 1.1
 import UM 1.4 as UM
 import Cura 1.0 as Cura
 
-import "components"
+import "../Accounts"
 
 Rectangle
 {

resources/qml/components/ActionButton.qml

@@ -0,0 +1,61 @@
+// 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.Layouts 1.3
+
+import UM 1.1 as UM
+
+Button
+{
+    id: button
+    property alias cursorShape: mouseArea.cursorShape
+    property var iconSource: ""
+    property var color: UM.Theme.getColor("primary")
+    property var hoverColor: UM.Theme.getColor("primary_hover")
+    property var disabledColor: color
+    property var textColor: UM.Theme.getColor("button_text")
+    property var textHoverColor: UM.Theme.getColor("button_text_hover")
+    property var textDisabledColor: textColor
+    property var textFont: UM.Theme.getFont("action_button")
+
+    contentItem: Row
+    {
+        UM.RecolorImage
+        {
+            id: buttonIcon
+            source: button.iconSource
+            width: 16 * screenScaleFactor
+            height: 16 * screenScaleFactor
+            sourceSize.width: width
+            sourceSize.height: height
+            color: button.hovered ? button.textHoverColor : button.textColor
+            visible: button.iconSource != ""
+        }
+
+        Label
+        {
+            id: buttonText
+            text: button.text
+            color: button.enabled ? (button.hovered ? button.textHoverColor : button.textColor): button.textDisabledColor
+            font: button.textFont
+            visible: button.text != ""
+            renderType: Text.NativeRendering
+        }
+    }
+
+    background: Rectangle
+    {
+        color: button.enabled ? (button.hovered ? button.hoverColor : button.color) : button.disabledColor
+    }
+
+    MouseArea
+    {
+        id: mouseArea
+        anchors.fill: parent
+        onPressed: mouse.accepted = false
+        hoverEnabled: true
+        cursorShape: button.enabled ? (hovered ? Qt.PointingHandCursor : Qt.ArrowCursor) : Qt.ForbiddenCursor
+    }
+}