Merge branch 'cura4.0_header' of github.com:Ultimaker/Cura into cura4.0_header

resources/qml/Account/AccountDetails.qml

@@ -0,0 +1,77 @@
+// 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 UM 1.4 as UM
+import Cura 1.1 as Cura
+
+import "../components"
+
+Column
+{
+    property var profile: null
+    property var loggedIn: false
+
+    padding: 2 * UM.Theme.getSize("default_margin").height
+    spacing: 2 * UM.Theme.getSize("default_margin").height
+
+    AvatarImage
+    {
+        id: avatar
+        width: 75 * screenScaleFactor
+        height: 75 * screenScaleFactor
+        anchors.horizontalCenter: parent.horizontalCenter
+        source: loggedIn ? profile["profile_image_url"] : UM.Theme.getImage("avatar_default")
+        outlineColor: loggedIn ? UM.Theme.getColor("account_widget_ouline_active") : UM.Theme.getColor("account_widget_ouline_inactive")
+    }
+
+    Label
+    {
+        id: message
+        anchors.horizontalCenter: parent.horizontalCenter
+        visible: !loggedIn
+        text: catalog.i18nc("@label", "Please login or create an account to 
enjoy all features of Ultimaker Cura")
+    }
+
+    Column
+    {
+        id: userInformation
+        anchors.horizontalCenter: parent.horizontalCenter
+        visible: loggedIn
+
+        Label
+        {
+            anchors.horizontalCenter: parent.horizontalCenter
+            text: loggedIn ? profile["username"] : ""
+            font: UM.Theme.getFont("large")
+        }
+
+        Label
+        {
+            anchors.horizontalCenter: parent.horizontalCenter
+            text: "email.address@hardcoded.is"
+            font: UM.Theme.getFont("default")
+        }
+    }
+
+    Loader
+    {
+        id: accountEntryPoints
+        anchors.horizontalCenter: parent.horizontalCenter
+        sourceComponent: loggedIn ? userOperations : generalOperations
+    }
+
+    Component
+    {
+        id: userOperations
+        UserOperations { }
+    }
+
+    Component
+    {
+        id: generalOperations
+        GeneralOperations { }
+    }
+}

resources/qml/Account/AccountWidget.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.2
+import QtQuick 2.7
-import QtQuick.Controls 1.1
+import QtQuick.Controls 2.1
 
 import UM 1.4 as UM
 import Cura 1.1 as Cura
@@ -12,7 +12,6 @@ Item
     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
 
@@ -24,6 +23,7 @@ Item
         anchors.verticalCenter: parent.verticalCenter
         anchors.horizontalCenter: parent.horizontalCenter
         source: loggedIn ? profile["profile_image_url"] : UM.Theme.getImage("avatar_default")
+        outlineColor: loggedIn ? UM.Theme.getColor("account_widget_ouline_active") : UM.Theme.getColor("account_widget_ouline_inactive")
     }
 
     MouseArea
@@ -58,22 +58,11 @@ Item
         borderWidth: UM.Theme.getSize("default_lining").width
 
         // Shows the user management options or general options to create account
-        Loader
+        AccountDetails
         {
             id: panel
-            sourceComponent: loggedIn ? userManagementWidget : generalManagementWidget
+            profile: Cura.API.account.userProfile
+            loggedIn: Cura.API.account.isLoggedIn
         }
     }
-
-    Component
-    {
-        id: userManagementWidget
-        UserManagementWidget { }
-    }
-
-    Component
-    {
-        id: generalManagementWidget
-        GeneralManagementWidget { }
-    }
 }

resources/qml/Account/AvatarImage.qml

@@ -10,6 +10,8 @@ Item
     id: avatar
 
     property var source
+    property var fallbackSource: UM.Theme.getImage("avatar_default")
+    property var outlineColor: UM.Theme.getColor("account_widget_ouline_active")
 
     Image
     {
@@ -41,4 +43,14 @@ Item
         cached: true
         invert: false
     }
+
+    UM.RecolorImage
+    {
+        id: profileImageOutline
+        source: UM.Theme.getIcon("circle_outline")
+        sourceSize: Qt.size(parent.width, parent.height)
+        width: parent.width
+        height: parent.height
+        color: avatar.outlineColor
+    }
 }

resources/qml/Account/GeneralManagementWidget.qml

@@ -1,23 +0,0 @@
-// 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/Account/GeneralOperations.qml

@@ -0,0 +1,35 @@
+// 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"
+
+Row
+{
+    spacing: UM.Theme.getSize("default_margin").width
+
+    ActionButton
+    {
+        width: UM.Theme.getSize("account_button").width
+        height: UM.Theme.getSize("account_button").height
+        text: catalog.i18nc("@button", "Create account")
+        color: UM.Theme.getColor("secondary")
+        hoverColor: UM.Theme.getColor("secondary")
+        textColor: UM.Theme.getColor("text_link")
+        textHoverColor: UM.Theme.getColor("text")
+        onClicked: Qt.openUrlExternally("https://account.ultimaker.com")
+    }
+
+    ActionButton
+    {
+        width: UM.Theme.getSize("account_button").width
+        height: UM.Theme.getSize("account_button").height
+        text: catalog.i18nc("@button", "Login")
+        onClicked: Cura.API.account.login()
+    }
+}

resources/qml/Account/UserManagementWidget.qml

@@ -1,33 +0,0 @@
-// 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/Account/UserOperations.qml

@@ -0,0 +1,35 @@
+// 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"
+
+Row
+{
+    spacing: UM.Theme.getSize("default_margin").width
+
+    ActionButton
+    {
+        width: UM.Theme.getSize("account_button").width
+        height: UM.Theme.getSize("account_button").height
+        text: catalog.i18nc("@button", "Manage account")
+        color: UM.Theme.getColor("secondary")
+        hoverColor: UM.Theme.getColor("secondary")
+        textColor: UM.Theme.getColor("text_link")
+        textHoverColor: UM.Theme.getColor("text")
+        onClicked: Qt.openUrlExternally("https://account.ultimaker.com")
+    }
+
+    ActionButton
+    {
+        width: UM.Theme.getSize("account_button").width
+        height: UM.Theme.getSize("account_button").height
+        text: catalog.i18nc("@button", "Logout")
+        onClicked: Cura.API.account.logout()
+    }
+}

resources/qml/Skeleton/TopHeader.qml

@@ -1,13 +1,14 @@
 // Copyright (c) 2018 Ultimaker B.V.
 // Cura is released under the terms of the LGPLv3 or higher.
 
-import QtQuick 2.2
+import QtQuick 2.7
 import QtQuick.Controls 1.1
 import QtQuick.Controls.Styles 1.1
 
 import UM 1.4 as UM
 import Cura 1.0 as Cura
 
+import "../components"
 import "../Account"
 
 Rectangle
@@ -72,13 +73,30 @@ Rectangle
     Button
     {
         id: toolboxShortcutButton
-        text: catalog.i18nc("@action:button", "Toolbox")
         anchors
         {
             right: accountWidget.left
             rightMargin: UM.Theme.getSize("default_margin").width
+            verticalCenter: parent.verticalCenter
+        }
+        style: ButtonStyle
+        {
+            background: Rectangle
+            {
+                color: control.hovered ? UM.Theme.getColor("secondary") : UM.Theme.getColor("topheader_button_background_active")
+                radius: 2 * screenScaleFactor
+            }
+
+            label: Label
+            {
+                text: catalog.i18nc("@action:button", "Toolbox")
+                color: UM.Theme.getColor("topheader_button_text_active")
+                font: UM.Theme.getFont("action_button")
+                renderType: Text.NativeRendering
+                anchors.verticalCenter: control.verticalCenter
+            }
+
         }
-        style: UM.Theme.styles.topheader_tab
         action: Cura.Actions.browsePackages
     }
 

resources/qml/components/ActionButton.qml

@@ -19,6 +19,7 @@ Button
     property var textHoverColor: UM.Theme.getColor("button_text_hover")
     property var textDisabledColor: textColor
     property var textFont: UM.Theme.getFont("action_button")
+    property var cornerRadius: 2 * screenScaleFactor
 
     contentItem: Row
     {
@@ -32,6 +33,7 @@ Button
             sourceSize.height: height
             color: button.hovered ? button.textHoverColor : button.textColor
             visible: button.iconSource != ""
+            anchors.verticalCenter: parent.verticalCenter
         }
 
         Label
@@ -42,12 +44,14 @@ Button
             font: button.textFont
             visible: button.text != ""
             renderType: Text.NativeRendering
+            anchors.verticalCenter: parent.verticalCenter
         }
     }
 
     background: Rectangle
     {
         color: button.enabled ? (button.hovered ? button.hoverColor : button.color) : button.disabledColor
+        radius: cornerRadius
     }
 
     MouseArea

resources/themes/cura-light/icons/circle_outline.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="50mm"
+   height="50mm"
+   viewBox="0 0 50 50"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
+   sodipodi:docname="circle_outline.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="2.8"
+     inkscape:cx="106.84982"
+     inkscape:cy="60.88791"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:pagecheckerboard="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1137"
+     inkscape:window-x="2872"
+     inkscape:window-y="-8"
+     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,-247)">
+    <circle
+       style="opacity:1;fill:none;fill-opacity:1;stroke:#000000;stroke-width:2.52776861;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="path817"
+       cx="25"
+       cy="272"
+       r="23.736116" />
+  </g>
+</svg>

resources/themes/cura-light/styles.qml

@@ -90,6 +90,14 @@ QtObject {
         }
     }
 
+    property Component action_button: Component
+    {
+        ButtonStyle
+        {
+
+        }
+    }
+
     property Component topheader_tab: Component
     {
         ButtonStyle

resources/themes/cura-light/theme.json

@@ -87,6 +87,9 @@
         "topheader_button_background_active": [255, 255, 255, 255],
         "topheader_button_background_inactive": [255, 255, 255, 0],
 
+        "account_widget_ouline_active": [9, 140, 188, 255],
+        "account_widget_ouline_inactive": [175, 175, 175, 255],
+
         "text": [0, 0, 0, 255],
         "text_detail": [174, 174, 174, 128],
         "text_link": [12, 169, 227, 255],
@@ -341,6 +344,8 @@
         "topheader_button": [8, 4],
         "topheader_button_icon": [1.2, 1.2],
 
+        "account_button": [12, 3],
+
         "views_selector": [0.0, 4.0],
 
         "default_lining": [0.08, 0.08],