Create an AvatarImage component that will show the profile image of the

user. Still WIP.
Create an AccountWidget (WIP) that shows the avatar image and the
dropdown menu to manage accounts.

Contributes to CURA-5784.

resources/qml/Skeleton/ApplicationViews.qml

@@ -9,6 +9,8 @@ import QtQuick.Layouts 1.1
 import UM 1.4 as UM
 import Cura 1.0 as Cura
 
+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
 // scene. Aside the selector, there is a row of buttons that change the orientation of the view.

resources/qml/Skeleton/TopHeader.qml

@@ -4,11 +4,12 @@
 import QtQuick 2.2
 import QtQuick.Controls 1.1
 import QtQuick.Controls.Styles 1.1
-import QtQuick.Layouts 1.1
 
 import UM 1.4 as UM
 import Cura 1.0 as Cura
 
+import "components"
+
 Rectangle
 {
     id: base
@@ -75,10 +76,20 @@ Rectangle
         text: catalog.i18nc("@action:button", "Toolbox")
         anchors
         {
-            right: parent.right
-            leftMargin: UM.Theme.getSize("default_margin").width
+            right: accountWidget.left
+            rightMargin: UM.Theme.getSize("default_margin").width
         }
         style: UM.Theme.styles.topheader_tab
         action: Cura.Actions.browsePackages
     }
+
+    AccountWidget
+    {
+        id: accountWidget
+        anchors
+        {
+            right: parent.right
+            rightMargin: UM.Theme.getSize("default_margin").width
+        }
+    }
 }

resources/qml/Skeleton/components/AccountWidget.qml

@@ -0,0 +1,71 @@
+// 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
+
+Item
+{
+    id: base
+    height: UM.Theme.getSize("topheader").height
+    width: UM.Theme.getSize("topheader").height
+
+    AvatarImage
+    {
+        id: avatar
+        width: Math.round(0.8 * parent.width)
+        height: Math.round(0.8 * parent.height)
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.horizontalCenter: parent.horizontalCenter
+    }
+
+    MouseArea
+    {
+        anchors.fill: avatar
+        onClicked:
+        {
+            // Collapse/Expand the dropdown panel
+            accountManagementPanel.visible = !accountManagementPanel.visible
+        }
+    }
+
+    UM.PointingRectangle
+    {
+        id: accountManagementPanel
+
+        width: 250
+        height: 250
+
+        anchors
+        {
+            top: parent.bottom
+            topMargin: UM.Theme.getSize("default_margin").height
+            right: parent.right
+        }
+
+        target: Qt.point(parent.width / 2, parent.bottom)
+        arrowSize: UM.Theme.getSize("default_arrow").width
+
+        visible: false
+        opacity: visible ? 1 : 0
+        Behavior on opacity { NumberAnimation { duration: 100 } }
+
+        color: UM.Theme.getColor("tool_panel_background")
+        borderColor: UM.Theme.getColor("lining")
+        borderWidth: UM.Theme.getSize("default_lining").width
+
+        Loader
+        {
+            id: panel
+            sourceComponent: login
+        }
+    }
+
+    Component
+    {
+        id: login
+        Label {text: "HOLA"}
+    }
+}

resources/qml/Skeleton/components/AvatarImage.qml

@@ -0,0 +1,42 @@
+// Copyright (c) 2018 Ultimaker B.V.
+import QtQuick 2.7
+import QtQuick.Controls 2.1
+import QtGraphicalEffects 1.0
+
+import UM 1.4 as UM
+
+Item
+{
+    id: avatar
+
+    Image
+    {
+        id: profileImage
+        source: UM.Theme.getImage("avatar_default")
+        sourceSize: Qt.size(parent.width, parent.height)
+        width: parent.width
+        height: parent.height
+        fillMode: Image.PreserveAspectCrop
+        visible: false
+    }
+
+    UM.RecolorImage
+    {
+        id: profileImageMask
+        source: UM.Theme.getIcon("circle_mask")
+        sourceSize: Qt.size(parent.width, parent.height)
+        width: parent.width
+        height: parent.height
+        color: UM.Theme.getColor("topheader_background")
+        visible: false
+    }
+
+    OpacityMask
+    {
+        anchors.fill: profileImage
+        source: profileImage
+        maskSource: profileImageMask
+        cached: true
+        invert: false
+    }
+}

resources/themes/cura-light/icons/circle_mask.svg

@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="500mm"
+   height="500mm"
+   viewBox="0 0 500 500"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
+   sodipodi:docname="circle_mask.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.35"
+     inkscape:cx="-385.71429"
+     inkscape:cy="560"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:pagecheckerboard="true"
+     inkscape:window-width="2880"
+     inkscape:window-height="1675"
+     inkscape:window-x="3827"
+     inkscape:window-y="-13"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,203)">
+    <circle
+       style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.1875;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.98271604"
+       id="path815"
+       cy="46.999985"
+       cx="250"
+       r="250" />
+  </g>
+</svg>