Browse Source

Introduce the ApplicationSwitcher widget

It includes only the hardcoded model with the Ultimaker links for now.

CURA-8421
Konstantinos Karmas 3 years ago
parent
commit
570fb3cf93

+ 94 - 0
resources/qml/ApplicationSwitcher/ApplicationButton.qml

@@ -0,0 +1,94 @@
+// 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
+
+    width: UM.Theme.getSize("application_switcher_item").width
+    height: UM.Theme.getSize("application_switcher_item").height
+
+    background: Rectangle
+    {
+        color: parent.hovered ? UM.Theme.getColor("action_button_hovered") : UM.Theme.getColor("action_button")
+        border.color: parent.hovered ? UM.Theme.getColor("primary") : "transparent"
+        border.width: UM.Theme.getSize("default_lining").width
+    }
+
+    UM.TooltipArea
+    {
+        id: tooltip
+        anchors.fill: parent
+    }
+
+    Column
+    {
+        id: applicationButtonContent
+        anchors.centerIn: parent
+        spacing: UM.Theme.getSize("default_margin").width
+
+        UM.RecolorImage
+        {
+            id: applicationIcon
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            color: UM.Theme.getColor("monitor_icon_primary")
+            width: UM.Theme.getSize("application_switcher_icon").width
+            height: width
+
+            Item
+            {
+                id: externalLinkIndicator
+
+                visible: base.isExternalLink
+
+                anchors
+                {
+                    bottom: parent.bottom
+                    bottomMargin: - Math.round(height * 1 / 6)
+                    right: parent.right
+                    rightMargin: - Math.round(width * 5 / 6)
+                }
+                Rectangle
+                {
+                    anchors.centerIn: parent
+                    width: UM.Theme.getSize("small_button_icon").width
+                    height: width
+                    color: base.hovered ? UM.Theme.getColor("action_button_hovered") : UM.Theme.getColor("action_button")
+                    radius: 0.5 * width
+                }
+
+                UM.RecolorImage
+                {
+                    id: externalLinkIcon
+                    anchors.centerIn: parent
+
+                    width: UM.Theme.getSize("printer_status_icon").width
+                    height: width
+
+                    color: UM.Theme.getColor("monitor_icon_primary")
+
+                    source: UM.Theme.getIcon("LinkExternal")
+                }
+            }
+        }
+
+        Label
+        {
+            id: applicationDisplayName
+            anchors.horizontalCenter: parent.horizontalCenter
+
+        }
+    }
+}

+ 122 - 0
resources/qml/ApplicationSwitcher/ApplicationSwitcher.qml

@@ -0,0 +1,122 @@
+// 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: appSwitcherButton.width
+    height: width
+
+
+    Button
+    {
+        id: appSwitcherButton
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        width: Math.round(0.5 * UM.Theme.getSize("main_window_header").height)
+        height: width
+
+        background: UM.RecolorImage
+        {
+            width: UM.Theme.getSize("small_button_icon").width
+            height: width
+            anchors.verticalCenter: appSwitcherButton.verticalCenter
+            anchors.horizontalCenter: appSwitcherButton.horizontalCenter
+            color: UM.Theme.getColor("main_background")
+
+            source: UM.Theme.getIcon("ApplicationSwitcher")
+        }
+
+        onClicked:
+        {
+            if (popup.opened)
+            {
+                popup.close()
+            } else {
+                popup.open()
+            }
+        }
+    }
+
+    Popup
+    {
+        id: popup
+
+        y: parent.height + UM.Theme.getSize("default_arrow").height
+        x: parent.width - width
+
+        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
+
+        opacity: opened ? 1 : 0
+        Behavior on opacity { NumberAnimation { duration: 100 } }
+        padding: 0
+        width: contentWidth + 2 * UM.Theme.getSize("wide_margin").width
+        height: contentHeight + 2 * UM.Theme.getSize("wide_margin").width
+
+        contentItem: Item
+        {
+            id: projectListContainer
+            anchors.fill: parent
+            anchors.margins: UM.Theme.getSize("wide_margin").width
+
+            Column
+            {
+                id: contentsColumn
+                anchors.top: parent.top
+                anchors.left: parent.left
+
+                width: gridLayout.width
+
+                Grid
+                {
+                    id: gridLayout
+                    columns: 3
+                    spacing: UM.Theme.getSize("default_margin").width
+                    Repeater
+                    {
+                        id:gridgenerate
+
+                        model:
+                        [
+                            { displayName: "Report issue1", thumbnail: UM.Theme.getIcon("Bug"), description: "This is the description1", link: "https://github.com/Ultimaker/Cura/issues/1" },
+                            { displayName: "My printers", thumbnail: UM.Theme.getIcon("Bug"), description: "This is the description2", link: "https://github.com/Ultimaker/Cura/issues/2" },
+                            { displayName: "Ultimaker.com", thumbnail: UM.Theme.getIcon("Bug"), description: "This is the description3", link: "https://ultimaker.com" },
+                            { displayName: "Report issue4", thumbnail: UM.Theme.getIcon("Bug"), description: "This is the description4", link: "https://github.com/Ultimaker/Cura/issues/4" },
+                            { displayName: "Report issue5", thumbnail: UM.Theme.getIcon("Bug"), description: "This is the description5", link: "https://github.com/Ultimaker/Cura/issues/5" }
+                        ]
+
+                        delegate: ApplicationButton
+                        {
+                            displayName: modelData.displayName
+                            iconSource: modelData.thumbnail
+                            tooltipText: modelData.description
+                            isExternalLink: (index % 2 == 0)
+
+                            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
+
+            target: Qt.point(width - (appSwitcherButton.width / 2), -10)
+
+            arrowSize: UM.Theme.getSize("default_arrow").width
+        }
+    }
+}

+ 13 - 1
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
 {
@@ -113,7 +114,7 @@ Item
 
         anchors
         {
-            right: accountWidget.left
+            right: applicationSwitcher.left
             rightMargin: UM.Theme.getSize("default_margin").width
             verticalCenter: parent.verticalCenter
         }
@@ -138,6 +139,17 @@ Item
         }
     }
 
+    ApplicationSwitcher
+    {
+        id: applicationSwitcher
+        anchors
+        {
+            verticalCenter: parent.verticalCenter
+            right: accountWidget.left
+//            rightMargin: UM.Theme.getSize("default_margin").width
+        }
+    }
+
     AccountWidget
     {
         id: accountWidget

+ 3 - 0
resources/themes/cura-light/icons/default/ApplicationSwitcher.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 4H0V3C0 2.20435 0.316071 1.44129 0.87868 0.87868C1.44129 0.316071 2.20435 0 3 0H4V4ZM11 0H7V4H11V0ZM18 3C18 2.20435 17.6839 1.44129 17.1213 0.87868C16.5587 0.316071 15.7956 0 15 0H14V4H18V3ZM4 7H0V11H4V7ZM11 7H7V11H11V7ZM18 7H14V11H18V7ZM4 14H0V15C0 15.7956 0.316071 16.5587 0.87868 17.1213C1.44129 17.6839 2.20435 18 3 18H4V14ZM11 14H7V18H11V14ZM18 15V14H14V18H15C15.7956 18 16.5587 17.6839 17.1213 17.1213C17.6839 16.5587 18 15.7956 18 15Z" fill="#000E1A"/>
+</svg>

+ 3 - 0
resources/themes/cura-light/icons/default/Bug.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M42 12C42 15.5 39.4 18.4 36 18.9V24H42V26H36V31V31.1C39.4 31.6 42 34.5 42 38H40C40 35.5 38.2 33.5 35.8 33.1C34.8 38.7 29.9 43 24 43C18.1 43 13.2 38.7 12.2 33.1C9.8 33.5 8 35.5 8 38H6C6 34.5 8.6 31.6 12 31.1V31V26H6V24H12V18.9C8.6 18.4 6 15.5 6 12H8C8 14.4 9.7 16.4 12 16.9C12.1 10.3 17.4 5 24 5C30.6 5 35.9 10.3 36 16.9C38.3 16.4 40 14.4 40 12H42ZM34 17C34 11.5 29.5 7 24 7C18.5 7 14 11.5 14 17H34ZM14 19V31C14 36.2 18 40.4 23 40.9V19H14ZM25 19V40.9C30 40.4 34 36.2 34 31V19H25ZM24 11.9L27.6 10.1L28.4 11.9L26.2 13L28.4 14.1L27.6 15.9L24 14.1L20.4 15.9L19.6 14.1L21.8 13L19.6 11.9L20.4 10.1L24 11.9Z" fill="black"/>
+</svg>

+ 3 - 0
resources/themes/cura-light/theme.json

@@ -499,6 +499,9 @@
         "print_setup_icon": [1.2, 1.2],
         "drag_icon": [1.416, 0.25],
 
+        "application_switcher_item": [8, 9],
+        "application_switcher_icon": [3.75, 3.75],
+
         "expandable_component_content_header": [0.0, 3.0],
 
         "configuration_selector": [35.0, 4.0],