Merge pull request #10491 from Ultimaker/CURA-8421_Introduce_app_switcher

CURA-8421: Introduce app switcher

resources/bundled_packages/cura.json

@@ -124,7 +124,7 @@
             "package_type": "plugin",
             "display_name": "Ultimaker Digital Library",
             "description": "Connects to the Digital Library, allowing Cura to open files from and save files to the Digital Library.",
-            "package_version": "1.0.0",
+            "package_version": "1.1.0",
             "sdk_version": "7.8.0",
             "website": "https://ultimaker.com",
             "author": {

resources/qml/Account/AccountWidget.qml

@@ -12,8 +12,8 @@ Item
     property var profile: Cura.API.account.userProfile
     property var loggedIn: Cura.API.account.isLoggedIn
 
-    height: signInButton.height > accountWidget.height ? signInButton.height : accountWidget.height
-    width: signInButton.width > accountWidget.width ? signInButton.width : accountWidget.width
+    height: signInButton.visible ? signInButton.height : accountWidget.height
+    width: signInButton.visible ? signInButton.width : accountWidget.width
 
     Button
     {
@@ -32,9 +32,18 @@ Item
         background: Rectangle
         {
             radius: UM.Theme.getSize("action_button_radius").width
-            color: signInButton.hovered ? UM.Theme.getColor("primary_text") : UM.Theme.getColor("main_window_header_background")
+            color: UM.Theme.getColor("main_window_header_background")
             border.width: UM.Theme.getSize("default_lining").width
             border.color: UM.Theme.getColor("primary_text")
+
+            Rectangle
+            {
+                anchors.fill: parent
+                radius: parent.radius
+                color: UM.Theme.getColor("primary_text")
+                opacity: signInButton.hovered ? 0.2 : 0
+                Behavior on opacity { NumberAnimation { duration: 100 } }
+            }
         }
 
         contentItem: Label
@@ -42,7 +51,7 @@ Item
             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")
+            color: UM.Theme.getColor("primary_text")
             width: contentWidth
             verticalAlignment: Text.AlignVCenter
             renderType: Text.NativeRendering
@@ -54,7 +63,6 @@ Item
         id: accountWidget
 
         anchors.verticalCenter: parent.verticalCenter
-        anchors.horizontalCenter: signInButton.horizontalCenter
 
         implicitHeight: Math.round(0.5 * UM.Theme.getSize("main_window_header").height)
         implicitWidth: Math.round(0.5 * UM.Theme.getSize("main_window_header").height)
@@ -90,9 +98,19 @@ Item
                 width: Math.min(accountWidget.width, accountWidget.height)
                 height: width
                 radius: width
-                color: accountWidget.hovered ? UM.Theme.getColor("primary_text") : "transparent"
-                border.width: 1
+                color: UM.Theme.getColor("main_window_header_background")
+                border.width: UM.Theme.getSize("default_lining").width
                 border.color: UM.Theme.getColor("primary_text")
+
+                Rectangle
+                {
+                    id: initialCircleFill
+                    anchors.fill: parent
+                    radius: parent.radius
+                    color: UM.Theme.getColor("primary_text")
+                    opacity: accountWidget.hovered ? 0.2 : 0
+                    Behavior on opacity { NumberAnimation { duration: 100 } }
+                }
             }
 
             Label
@@ -102,7 +120,7 @@ Item
                 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")
+                color: UM.Theme.getColor("primary_text")
                 verticalAlignment: Text.AlignVCenter
                 horizontalAlignment: Text.AlignHCenter
                 renderType: Text.NativeRendering
@@ -142,7 +160,7 @@ Item
             borderColor: UM.Theme.getColor("lining")
             borderWidth: UM.Theme.getSize("default_lining").width
 
-            target: Qt.point(width - (signInButton.width / 2), -10)
+            target: Qt.point(width - ((signInButton.visible ? signInButton.width : accountWidget.width) / 2), -10)
 
             arrowSize: UM.Theme.getSize("default_arrow").width
         }

resources/qml/ApplicationSwitcher/ApplicationButton.qml

@@ -0,0 +1,91 @@
+// Copyright (c) 2021 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.10
+import QtQuick.Controls 2.3
+
+import UM 1.4 as UM
+import Cura 1.1 as Cura
+
+Button
+{
+    id: base
+
+    property alias iconSource: applicationIcon.source
+    property alias displayName: applicationDisplayName.text
+    property alias tooltipText: tooltip.text
+    property bool isExternalLink: false
+    property color borderColor: hovered ? UM.Theme.getColor("primary") : "transparent"
+    property color backgroundColor: hovered ? UM.Theme.getColor("action_button_hovered") : UM.Theme.getColor("action_button")
+    Behavior on backgroundColor { ColorAnimation { duration: 200; } }
+    Behavior on borderColor { ColorAnimation { duration: 200; } }
+
+    hoverEnabled: true
+    width: UM.Theme.getSize("application_switcher_item").width
+    height: UM.Theme.getSize("application_switcher_item").height
+
+    background: Rectangle
+    {
+        color:backgroundColor
+        border.color: borderColor
+        border.width: UM.Theme.getSize("default_lining").width
+    }
+
+    Cura.ToolTip
+    {
+        id: tooltip
+        tooltipText: base.text
+        visible: base.hovered
+    }
+
+    Column
+    {
+        id: applicationButtonContent
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+
+        UM.RecolorImage
+        {
+            id: applicationIcon
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            color: UM.Theme.getColor("icon")
+            width: UM.Theme.getSize("application_switcher_icon").width
+            height: width
+
+            UM.RecolorImage
+            {
+                id: externalLinkIndicatorIcon
+                visible: base.isExternalLink
+
+                anchors
+                {
+                    bottom: parent.bottom
+                    bottomMargin: - Math.round(height * 1 / 6)
+                    right: parent.right
+                    rightMargin: - Math.round(width * 5 / 6)
+                }
+                width: UM.Theme.getSize("icon_indicator").width
+                height: width
+                color: UM.Theme.getColor("icon")
+                source: UM.Theme.getIcon("LinkExternal")
+            }
+        }
+
+        Label
+        {
+            id: applicationDisplayName
+
+            anchors.left: parent.left
+            anchors.right: parent.right
+
+            height: base.height - applicationIcon.height - 2 * UM.Theme.getSize("default_margin").width  // Account for the top and bottom margins
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            wrapMode: Text.Wrap
+            elide: Text.ElideRight
+            color: UM.Theme.getColor("text")
+        }
+    }
+}

resources/qml/ApplicationSwitcher/ApplicationSwitcher.qml

@@ -0,0 +1,61 @@
+// Copyright (c) 2021 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.10
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.15
+
+import UM 1.4 as UM
+import Cura 1.1 as Cura
+
+Item
+{
+    id: applicationSwitcherWidget
+    width: Math.round(0.5 * UM.Theme.getSize("main_window_header").height)
+    height: width
+
+    Button
+    {
+        id: applicationSwitcherButton
+
+        anchors.fill: parent
+
+        background: Item
+        {
+            Rectangle
+            {
+                anchors.fill: parent
+                radius: UM.Theme.getSize("action_button_radius").width
+                color: UM.Theme.getColor("primary_text")
+                opacity: applicationSwitcherButton.hovered ? 0.2 : 0
+                Behavior on opacity { NumberAnimation { duration: 100; } }
+            }
+
+            UM.RecolorImage
+            {
+                anchors.fill: parent
+                color: UM.Theme.getColor("primary_text")
+
+                source: UM.Theme.getIcon("BlockGrid")
+            }
+        }
+
+        onClicked:
+        {
+            if (applicationSwitcherPopup.opened)
+            {
+                applicationSwitcherPopup.close()
+            } else {
+                applicationSwitcherPopup.open()
+            }
+        }
+    }
+    ApplicationSwitcherPopup
+    {
+        id: applicationSwitcherPopup
+        y: parent.height + UM.Theme.getSize("default_arrow").height
+
+        // Move the x position by the default margin so that the arrow isn't drawn exactly on the corner
+        x: parent.width - width + UM.Theme.getSize("default_margin").width
+    }
+}

resources/qml/ApplicationSwitcher/ApplicationSwitcherPopup.qml

@@ -0,0 +1,110 @@
+// Copyright (c) 2021 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.10
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.15
+
+import UM 1.4 as UM
+import Cura 1.1 as Cura
+
+Popup
+{
+    id: applicationSwitcherPopup
+
+    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
+
+    opacity: opened ? 1 : 0
+    Behavior on opacity { NumberAnimation { duration: 100 } }
+    padding: UM.Theme.getSize("wide_margin").width
+
+    contentItem: Grid
+    {
+        id: ultimakerPlatformLinksGrid
+        columns: 3
+        spacing: UM.Theme.getSize("default_margin").width
+
+        Repeater
+        {
+            model:
+            [
+                {
+                    displayName: catalog.i18nc("@label:button", "My printers"),
+                    thumbnail: UM.Theme.getIcon("PrinterTriple", "high"),
+                    description: catalog.i18nc("@tooltip:button", "Monitor printers in Ultimaker Digital Factory."),
+                    link: "https://digitalfactory.ultimaker.com/app/printers?utm_source=cura&utm_medium=software&utm_campaign=switcher-digital-factory-printers"
+                },
+                {
+                    displayName: "Digital Library", //Not translated, since it's a brand name.
+                    thumbnail: UM.Theme.getIcon("Library", "high"),
+                    description: catalog.i18nc("@tooltip:button", "Create print projects in Digital Library."),
+                    link: "https://digitalfactory.ultimaker.com/app/library?utm_source=cura&utm_medium=software&utm_campaign=switcher-library"
+                },
+                {
+                    displayName: catalog.i18nc("@label:button", "Print jobs"),
+                    thumbnail: UM.Theme.getIcon("FoodBeverages"),
+                    description: catalog.i18nc("@tooltip:button", "Monitor print jobs and reprint from your print history."),
+                    link: "https://digitalfactory.ultimaker.com/app/print-jobs?utm_source=cura&utm_medium=software&utm_campaign=switcher-digital-factory- printjobs"
+                },
+                {
+                    displayName: "Ultimaker Marketplace", //Not translated, since it's a brand name.
+                    thumbnail: UM.Theme.getIcon("Shop", "high"),
+                    description: catalog.i18nc("@tooltip:button", "Extend Ultimaker Cura with plugins and material profiles."),
+                    link: "https://marketplace.ultimaker.com/?utm_source=cura&utm_medium=software&utm_campaign=switcher-marketplace-materials"
+                },
+                {
+                    displayName: "Ultimaker Academy", //Not translated, since it's a brand name.
+                    thumbnail: UM.Theme.getIcon("Knowledge"),
+                    description: catalog.i18nc("@tooltip:button", "Become a 3D printing expert with Ultimaker e-learning."),
+                    link: "https://academy.ultimaker.com/?utm_source=cura&utm_medium=software&utm_campaign=switcher-academy"
+                },
+                {
+                    displayName: catalog.i18nc("@label:button", "Ultimaker support"),
+                    thumbnail: UM.Theme.getIcon("Help", "high"),
+                    description: catalog.i18nc("@tooltip:button", "Learn how to get started with Ultimaker Cura."),
+                    link: "https://support.ultimaker.com/?utm_source=cura&utm_medium=software&utm_campaign=switcher-support"
+                },
+                {
+                    displayName: catalog.i18nc("@label:button", "Ask a question"),
+                    thumbnail: UM.Theme.getIcon("Speak", "high"),
+                    description: catalog.i18nc("@tooltip:button", "Consult the Ultimaker Community."),
+                    link: "https://community.ultimaker.com/?utm_source=cura&utm_medium=software&utm_campaign=switcher-community"
+                },
+                {
+                    displayName: catalog.i18nc("@label:button", "Report a bug"),
+                    thumbnail: UM.Theme.getIcon("Bug", "high"),
+                    description: catalog.i18nc("@tooltip:button", "Let developers know that something is going wrong."),
+                    link: "https://github.com/Ultimaker/Cura/issues/new/choose"
+                },
+                {
+                    displayName: "Ultimaker.com", //Not translated, since it's a URL.
+                    thumbnail: UM.Theme.getIcon("Browser"),
+                    description: catalog.i18nc("@tooltip:button", "Visit the Ultimaker website."),
+                    link: "https://ultimaker.com/?utm_source=cura&utm_medium=software&utm_campaign=switcher-umwebsite"
+                }
+            ]
+
+            delegate: ApplicationButton
+            {
+                displayName: modelData.displayName
+                iconSource: modelData.thumbnail
+                tooltipText: modelData.description
+                isExternalLink: true
+
+                onClicked: Qt.openUrlExternally(modelData.link)
+            }
+        }
+    }
+
+    background: UM.PointingRectangle
+    {
+        color: UM.Theme.getColor("tool_panel_background")
+        borderColor: UM.Theme.getColor("lining")
+        borderWidth: UM.Theme.getSize("default_lining").width
+
+        // Move the target by the default margin so that the arrow isn't drawn exactly on the corner
+        target: Qt.point(width - UM.Theme.getSize("default_margin").width - (applicationSwitcherButton.width / 2), -10)
+
+        arrowSize: UM.Theme.getSize("default_arrow").width
+    }
+}

resources/qml/MainWindow/MainWindowHeader.qml

@@ -10,6 +10,7 @@ import UM 1.4 as UM
 import Cura 1.0 as Cura
 
 import "../Account"
+import "../ApplicationSwitcher"
 
 Item
 {
@@ -94,10 +95,21 @@ Item
 
         background: Rectangle
         {
+            id: marketplaceButtonBorder
             radius: UM.Theme.getSize("action_button_radius").width
-            color: marketplaceButton.hovered ? UM.Theme.getColor("primary_text") : UM.Theme.getColor("main_window_header_background")
+            color: UM.Theme.getColor("main_window_header_background")
             border.width: UM.Theme.getSize("default_lining").width
             border.color: UM.Theme.getColor("primary_text")
+
+            Rectangle
+            {
+                id: marketplaceButtonFill
+                anchors.fill: parent
+                radius: parent.radius
+                color: UM.Theme.getColor("primary_text")
+                opacity: marketplaceButton.hovered ? 0.2 : 0
+                Behavior on opacity { NumberAnimation { duration: 100 } }
+            }
         }
 
         contentItem: Label
@@ -105,7 +117,7 @@ Item
             id: label
             text: marketplaceButton.text
             font: UM.Theme.getFont("default")
-            color: marketplaceButton.hovered ? UM.Theme.getColor("main_window_header_background") : UM.Theme.getColor("primary_text")
+            color: UM.Theme.getColor("primary_text")
             width: contentWidth
             verticalAlignment: Text.AlignVCenter
             renderType: Text.NativeRendering
@@ -113,7 +125,7 @@ Item
 
         anchors
         {
-            right: accountWidget.left
+            right: applicationSwitcher.left
             rightMargin: UM.Theme.getSize("default_margin").width
             verticalCenter: parent.verticalCenter
         }
@@ -138,6 +150,17 @@ Item
         }
     }
 
+    ApplicationSwitcher
+    {
+        id: applicationSwitcher
+        anchors
+        {
+            verticalCenter: parent.verticalCenter
+            right: accountWidget.left
+            rightMargin: UM.Theme.getSize("default_margin").width
+        }
+    }
+
     AccountWidget
     {
         id: accountWidget

resources/texts/change_log.txt

@@ -98,7 +98,7 @@ When double clicking on a file in the open project dialog in Digital Factory it
 - Fixed a bug when the seam was not placed in sharpest corner.
 - Fixed the gantry height for S-line printers. 
 - Fixed a bug where a model is partially below build plate if center selected model is used.
-- Fixed a bug where a tootip arrow appeared when the "Manage printers" button is hovered.
+- Fixed a bug where a tooltip arrow appeared when the "Manage printers" button is hovered.
 - Fixed a bug where assemblies were not arranged in the center of the build plate. 
 
 * Printer definitions, profiles and materials.

resources/themes/cura-light/icons/default/BlockGrid.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 7H3V6C3 5.20435 3.31607 4.44129 3.87868 3.87868C4.44129 3.31607 5.20435 3 6 3H7V7ZM14 3H10V7H14V3ZM21 6C21 5.20435 20.6839 4.44129 20.1213 3.87868C19.5587 3.31607 18.7956 3 18 3H17V7H21V6ZM7 10H3V14H7V10ZM14 10H10V14H14V10ZM21 10H17V14H21V10ZM7 17H3V18C3 18.7956 3.31607 19.5587 3.87868 20.1213C4.44129 20.6839 5.20435 21 6 21H7V17ZM14 17H10V21H14V17ZM21 18V17H17V21H18C18.7956 21 19.5587 20.6839 20.1213 20.1213C20.6839 19.5587 21 18.7956 21 18Z" fill="#000E1A"/>
+</svg>

resources/themes/cura-light/icons/default/Bug.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 9.9C18.2 9.9 18.4 9.8 18.5 9.7C19 9.5 19.4 9.2 19.8 8.8C20.2 8.4 20.5 8 20.7 7.5C20.9 7 21 6.5 21 6H19C19 6.3 18.9 6.5 18.8 6.8C18.7 7 18.6 7.3 18.4 7.4C18.2 7.6 18.1 7.7 17.9 7.8C17.8 7.4 17.7 7.1 17.6 6.7C17.3 6 16.9 5.3 16.3 4.8C15.7 4.2 15.1 3.8 14.4 3.5C12.9 2.9 11.3 2.9 9.8 3.5C9 3.8 8.3 4.2 7.8 4.8C7.2 5.3 6.8 6 6.5 6.7C6.3 7.1 6.2 7.4 6.1 7.8C5.9 7.7 5.7 7.6 5.6 7.4C5.4 7.2 5.3 7 5.2 6.8C5.1 6.5 5 6.3 5 6H3C3 6.5 3.1 7 3.3 7.5C3.5 8 3.8 8.5 4.2 8.8C4.5 9.2 5 9.5 5.5 9.7C5.6 9.8 5.8 9.8 6 9.9V11H3V13H6V15V15.1C5.8 15.1 5.6 15.2 5.5 15.3C5 15.5 4.6 15.8 4.2 16.2C3.8 16.6 3.5 17 3.3 17.5C3.1 18 3 18.5 3 19H5C5 18.7 5.1 18.5 5.2 18.2C5.3 18 5.4 17.7 5.6 17.6C5.8 17.4 6 17.3 6.2 17.2C6.3 17.2 6.3 17.2 6.4 17.2C6.4 17.3 6.4 17.3 6.5 17.4C6.8 18.1 7.2 18.8 7.8 19.3C8.4 19.9 9 20.3 9.7 20.6C10.4 20.9 11.2 21 12 21C12.8 21 13.6 20.8 14.3 20.5C15 20.2 15.7 19.8 16.2 19.2C16.8 18.6 17.2 18 17.5 17.3C17.5 17.2 17.5 17.2 17.6 17.1C17.7 17.1 17.7 17.1 17.8 17.1C18 17.2 18.3 17.3 18.4 17.5C18.6 17.7 18.7 17.9 18.8 18.2C18.9 18.4 19 18.7 19 19H21C21 18.5 20.9 18 20.7 17.5C20.5 17 20.2 16.6 19.8 16.2C19.4 15.8 19 15.5 18.5 15.3C18.3 15.2 18.1 15.2 18 15.1V15V13H21V11H18V9.9ZM9.2 6.2C9.5 5.8 10 5.5 10.5 5.3C11.5 4.9 12.6 4.9 13.6 5.3C14.1 5.5 14.5 5.8 14.9 6.2C15.3 6.6 15.6 7 15.8 7.5C15.9 7.7 15.9 7.9 16 8H8.1C8.1 7.8 8.2 7.6 8.3 7.5C8.5 7 8.8 6.5 9.2 6.2ZM9.2 17.8C8.8 17.4 8.5 17 8.3 16.5C8.1 16 8 15.5 8 15V10H11V18.9C10.8 18.9 10.6 18.8 10.5 18.7C10 18.5 9.5 18.2 9.2 17.8ZM15.7 16.5C15.5 17 15.2 17.4 14.8 17.8C14.4 18.2 14 18.5 13.5 18.7C13.3 18.8 13.1 18.8 13 18.9V10H16V15C16 15.5 15.9 16 15.7 16.5Z" />
+</svg>