From 2ffcf03f43e7c68a57471123a2a221be13d964d1 Mon Sep 17 00:00:00 2001
From: Diego Prado Gesto <d.pradogesto@ultimaker.com>
Date: Mon, 8 Oct 2018 17:35:24 +0200
Subject: [PATCH] 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   |   2 +
 resources/qml/Skeleton/TopHeader.qml          |  17 ++++-
 .../qml/Skeleton/components/AccountWidget.qml |  71 ++++++++++++++++++
 .../qml/Skeleton/components/AvatarImage.qml   |  42 +++++++++++
 .../{ => components}/OrientationViews.qml     |   0
 .../themes/cura-light/icons/circle_mask.svg   |  64 ++++++++++++++++
 .../cura-light/images/avatar_default.png      | Bin 0 -> 3115 bytes
 7 files changed, 193 insertions(+), 3 deletions(-)
 create mode 100644 resources/qml/Skeleton/components/AccountWidget.qml
 create mode 100644 resources/qml/Skeleton/components/AvatarImage.qml
 rename resources/qml/Skeleton/{ => components}/OrientationViews.qml (100%)
 create mode 100644 resources/themes/cura-light/icons/circle_mask.svg
 create mode 100644 resources/themes/cura-light/images/avatar_default.png

diff --git a/resources/qml/Skeleton/ApplicationViews.qml b/resources/qml/Skeleton/ApplicationViews.qml
index 8e0b6efc0b..25c2ff9983 100644
--- a/resources/qml/Skeleton/ApplicationViews.qml
+++ b/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.
diff --git a/resources/qml/Skeleton/TopHeader.qml b/resources/qml/Skeleton/TopHeader.qml
index bf92fbb41d..c2e03aa04b 100644
--- a/resources/qml/Skeleton/TopHeader.qml
+++ b/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
+        }
+    }
 }
diff --git a/resources/qml/Skeleton/components/AccountWidget.qml b/resources/qml/Skeleton/components/AccountWidget.qml
new file mode 100644
index 0000000000..3d33aeaf27
--- /dev/null
+++ b/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"}
+    }
+}
\ No newline at end of file
diff --git a/resources/qml/Skeleton/components/AvatarImage.qml b/resources/qml/Skeleton/components/AvatarImage.qml
new file mode 100644
index 0000000000..52e2757cbf
--- /dev/null
+++ b/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
+    }
+}
\ No newline at end of file
diff --git a/resources/qml/Skeleton/OrientationViews.qml b/resources/qml/Skeleton/components/OrientationViews.qml
similarity index 100%
rename from resources/qml/Skeleton/OrientationViews.qml
rename to resources/qml/Skeleton/components/OrientationViews.qml
diff --git a/resources/themes/cura-light/icons/circle_mask.svg b/resources/themes/cura-light/icons/circle_mask.svg
new file mode 100644
index 0000000000..d5bfe53a97
--- /dev/null
+++ b/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>
diff --git a/resources/themes/cura-light/images/avatar_default.png b/resources/themes/cura-light/images/avatar_default.png
new file mode 100644
index 0000000000000000000000000000000000000000..0c306680f721dba0de73fb7be90fe5c548608692
GIT binary patch
literal 3115
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
Jx?0;V?B6dG_<;Zb

literal 0
HcmV?d00001