Merge branch 'CURA-8011_Replace_extruder_icons' of github.com:Ultimaker/Cura

cura/Machines/Models/ExtrudersModel.py

@@ -215,7 +215,7 @@ class ExtrudersModel(ListModel):
                     "id": "",
                     "name": catalog.i18nc("@menuitem", "Not overridden"),
                     "enabled": True,
-                    "color": "#ffffff",
+                    "color": "transparent",
                     "index": -1,
                     "definition": "",
                     "material": "",

plugins/PrepareStage/PrepareMenu.qml

@@ -23,16 +23,14 @@ Item
     {
         left: parent.left
         right: parent.right
-        leftMargin: UM.Theme.getSize("wide_margin").width
-        rightMargin: UM.Theme.getSize("wide_margin").width
+        leftMargin: UM.Theme.getSize("wide_margin").width * 2
+        rightMargin: UM.Theme.getSize("wide_margin").width * 2
     }
 
     // Item to ensure that all of the buttons are nicely centered.
     Item
     {
-        anchors.horizontalCenter: parent.horizontalCenter
-        width: parent.width - 2 * UM.Theme.getSize("wide_margin").width
-        height: parent.height
+        anchors.fill: parent
 
         RowLayout
         {
@@ -52,9 +50,6 @@ Item
             {
                 id: machineSelection
                 headerCornerSide: Cura.RoundedRectangle.Direction.Left
-                headerBackgroundBorder.width: UM.Theme.getSize("default_lining").width
-                headerBackgroundBorder.color: UM.Theme.getColor("lining")
-                enableHeaderShadow: false
                 Layout.preferredWidth: parent.machineSelectorWidth
                 Layout.fillWidth: true
                 Layout.fillHeight: true
@@ -63,9 +58,6 @@ Item
             Cura.ConfigurationMenu
             {
                 id: printerSetup
-                enableHeaderShadow: false
-                headerBackgroundBorder.width: UM.Theme.getSize("default_lining").width
-                headerBackgroundBorder.color: UM.Theme.getColor("lining")
                 Layout.fillHeight: true
                 Layout.fillWidth: true
                 Layout.preferredWidth: parent.machineSelectorWidth * 2
@@ -97,7 +89,7 @@ Item
                 {
                     id: buttonIcon
                     anchors.centerIn: parent
-                    source: UM.Theme.getIcon("Folder")
+                    source: UM.Theme.getIcon("Folder", "medium")
                     width: UM.Theme.getSize("button_icon").width
                     height: UM.Theme.getSize("button_icon").height
                     color: UM.Theme.getColor("icon")

plugins/PreviewStage/PreviewMenu.qml

@@ -24,54 +24,36 @@ Item
     {
         left: parent.left
         right: parent.right
-        leftMargin: UM.Theme.getSize("wide_margin").width
-        rightMargin: UM.Theme.getSize("wide_margin").width
+        leftMargin: UM.Theme.getSize("wide_margin").width * 2
+        rightMargin: UM.Theme.getSize("wide_margin").width * 2
     }
 
     Row
     {
         id: stageMenuRow
 
-        anchors.horizontalCenter: parent.horizontalCenter
-        width: parent.width - 2 * UM.Theme.getSize("wide_margin").width
-        height: parent.height
+        anchors.fill: parent
+        // This is a trick to make sure that the borders of the two adjacent buttons' borders overlap. Otherwise
+        // there will be double border (one from each button)
+        spacing: -UM.Theme.getSize("default_lining").width
 
         Cura.ViewsSelector
         {
             id: viewsSelector
             height: parent.height
-            width: UM.Theme.getSize("views_selector").width
+            width: Math.max(Math.round((parent.width - printSetupSelectorItem.width) / 3), UM.Theme.getSize("views_selector").width)
             headerCornerSide: Cura.RoundedRectangle.Direction.Left
         }
 
-        // Separator line
-        Rectangle
-        {
-            height: parent.height
-            // If there is no viewPanel, we only need a single spacer, so hide this one.
-            visible: viewPanel.source != ""
-            width: visible ? UM.Theme.getSize("default_lining").width : 0
-
-            color: UM.Theme.getColor("lining")
-        }
-
         // This component will grow freely up to complete the width of the row.
         Loader
         {
             id: viewPanel
             height: parent.height
-            width: source != "" ? (previewMenu.width - viewsSelector.width - printSetupSelectorItem.width - 2 * (UM.Theme.getSize("wide_margin").width + UM.Theme.getSize("default_lining").width)) : 0
+            width: source != "" ? (parent.width - viewsSelector.width - printSetupSelectorItem.width) : 0
             source: UM.Controller.activeView != null && UM.Controller.activeView.stageMenuComponent != null ? UM.Controller.activeView.stageMenuComponent : ""
         }
 
-        // Separator line
-        Rectangle
-        {
-            height: parent.height
-            width: UM.Theme.getSize("default_lining").width
-            color: UM.Theme.getColor("lining")
-        }
-
         Item
         {
             id: printSetupSelectorItem

plugins/UM3NetworkPrinting/resources/qml/CameraButton.qml

@@ -1,23 +1,26 @@
-// Copyright (c) 2019 Ultimaker B.V.
+// Copyright (c) 2021 Ultimaker B.V.
 // Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.3
-import QtQuick.Controls 1.4
+import QtQuick.Controls 2.4
 import QtQuick.Controls.Styles 1.3
 import UM 1.3 as UM
 import Cura 1.0 as Cura
 
-Rectangle
+Button
 {
-    id: base
+    property var iconSource: null
+    width: UM.Theme.getSize("button").width * 0.75 //Matching the size of the content of tool buttons.
+    height: UM.Theme.getSize("button").height * 0.75
 
-    property var enabled: true
+    hoverEnabled: true
 
-    property var iconSource: null
-    color: enabled ? UM.Theme.getColor("monitor_icon_primary") : UM.Theme.getColor("monitor_icon_disabled")
-    height: width
-    radius: Math.round(0.5 * width)
-    width: 24 * screenScaleFactor
+    background: Rectangle
+    {
+        anchors.fill: parent
+        radius: 0.5 * width
+        color: parent.enabled ? (parent.hovered ? UM.Theme.getColor("monitor_secondary_button_hover") : "transparent") : UM.Theme.getColor("monitor_icon_disabled")
+    }
 
     UM.RecolorImage
     {
@@ -27,30 +30,21 @@ Rectangle
             horizontalCenter: parent.horizontalCenter
             verticalCenter: parent.verticalCenter
         }
-        color: UM.Theme.getColor("monitor_icon_accent")
+        color: UM.Theme.getColor("primary")
         height: width
         source: iconSource
         width: Math.round(parent.width / 2)
     }
 
-    MouseArea
+    onClicked:
     {
-        id: clickArea
-        anchors.fill: parent
-        hoverEnabled: base.enabled
-        onClicked:
+        if (OutputDevice.activeCameraUrl != "")
+        {
+            OutputDevice.setActiveCameraUrl("")
+        }
+        else
         {
-            if (base.enabled)
-            {
-                if (OutputDevice.activeCameraUrl != "")
-                {
-                    OutputDevice.setActiveCameraUrl("")
-                }
-                else
-                {
-                    OutputDevice.setActiveCameraUrl(modelData.cameraUrl)
-                }
-            }
+            OutputDevice.setActiveCameraUrl(modelData.cameraUrl)
         }
     }
 }

plugins/UM3NetworkPrinting/resources/qml/MonitorBuildplateConfiguration.qml

@@ -50,7 +50,7 @@ Item
                 id: buildplateIcon
                 anchors.centerIn: parent
                 color: UM.Theme.getColor("monitor_icon_primary")
-                height: parent.height
+                height: UM.Theme.getSize("medium_button_icon").width
                 source: "../svg/icons/Buildplate.svg"
                 width: height
                 visible: buildplate

plugins/UM3NetworkPrinting/resources/qml/MonitorExtruderConfiguration.qml

@@ -5,6 +5,8 @@ import QtQuick 2.2
 import QtQuick.Controls 2.0
 import UM 1.3 as UM
 
+import Cura 1.6 as Cura
+
 /**
  * This component comprises a colored extruder icon, the material name, and the
  * print core name. It is used by the MonitorPrinterConfiguration component with
@@ -18,10 +20,10 @@ import UM 1.3 as UM
 Item
 {
     // The material color
-    property alias color: extruderIcon.color
+    property alias color: extruderIcon.materialColor
 
-    // The extruder position; NOTE: Decent human beings count from 0
-    property alias position: extruderIcon.position
+    // The extruder position
+    property int position
 
     // The material name
     property alias material: materialLabel.text
@@ -32,12 +34,13 @@ Item
     // Height is 2 x 18px labels, plus 4px spacing between them
     height: 40 * screenScaleFactor // TODO: Theme!
     width: childrenRect.width
+    opacity: material != "" && material != "Empty" && position >= 0 ? 1 : 0.4
 
-    MonitorIconExtruder
+    Cura.ExtruderIcon
     {
         id: extruderIcon
-        color: UM.Theme.getColor("monitor_skeleton_loading")
-        position: 0
+        materialColor: UM.Theme.getColor("monitor_skeleton_loading")
+        anchors.verticalCenter: parent.verticalCenter
     }
 
     Rectangle
@@ -46,16 +49,18 @@ Item
         anchors
         {
             left: extruderIcon.right
-            leftMargin: 12 * screenScaleFactor // TODO: Theme!
+            leftMargin: UM.Theme.getSize("default_margin").width
+            verticalCenter: extruderIcon.verticalCenter
         }
         color: materialLabel.visible > 0 ? "transparent" : UM.Theme.getColor("monitor_skeleton_loading")
-        height: 18 * screenScaleFactor // TODO: Theme!
+        height: childrenRect.height
         width: Math.max(materialLabel.contentWidth, 60 * screenScaleFactor) // TODO: Theme!
         radius: 2 * screenScaleFactor // TODO: Theme!
 
         Label
         {
             id: materialLabel
+            anchors.top: parent.top
 
             color: UM.Theme.getColor("text")
             elide: Text.ElideRight
@@ -63,29 +68,13 @@ Item
             text: ""
             visible: text !== ""
 
-            // FIXED-LINE-HEIGHT:
-            height: parent.height
-            verticalAlignment: Text.AlignVCenter
             renderType: Text.NativeRendering
         }
-    }
-
-    Rectangle
-    {
-        id: printCoreLabelWrapper
-        anchors
-        {
-            left: materialLabelWrapper.left
-            bottom: parent.bottom
-        }
-        color: printCoreLabel.visible > 0 ? "transparent" : UM.Theme.getColor("monitor_skeleton_loading")
-        height: 18 * screenScaleFactor // TODO: Theme!
-        width: Math.max(printCoreLabel.contentWidth, 36 * screenScaleFactor) // TODO: Theme!
-        radius: 2 * screenScaleFactor // TODO: Theme!
 
         Label
         {
             id: printCoreLabel
+            anchors.top: materialLabel.bottom
 
             color: UM.Theme.getColor("text")
             elide: Text.ElideRight
@@ -93,9 +82,6 @@ Item
             text: ""
             visible: text !== ""
 
-            // FIXED-LINE-HEIGHT:
-            height: parent.height
-            verticalAlignment: Text.AlignVCenter
             renderType: Text.NativeRendering
         }
     }

plugins/UM3NetworkPrinting/resources/qml/MonitorIconExtruder.qml

@@ -38,6 +38,7 @@ Item
     Label
     {
         id: positionLabel
+        anchors.centerIn: icon
         font: UM.Theme.getFont("small")
         color: UM.Theme.getColor("text")
         height: Math.round(size / 2)
@@ -45,8 +46,6 @@ Item
         text: position + 1
         verticalAlignment: Text.AlignVCenter
         width: Math.round(size / 2)
-        x: Math.round(size * 0.25)
-        y: Math.round(size * 0.15625)
         visible: position >= 0
         renderType: Text.NativeRendering
     }

resources/qml/Account/AccountWidget.qml

@@ -54,9 +54,10 @@ Item
         id: accountWidget
 
         anchors.verticalCenter: parent.verticalCenter
+        anchors.horizontalCenter: signInButton.horizontalCenter
 
-        implicitHeight: UM.Theme.getSize("main_window_header").height
-        implicitWidth: UM.Theme.getSize("main_window_header").height
+        implicitHeight: Math.round(0.5 * UM.Theme.getSize("main_window_header").height)
+        implicitWidth: Math.round(0.5 * UM.Theme.getSize("main_window_header").height)
 
         hoverEnabled: true
 
@@ -68,8 +69,8 @@ Item
         {
             id: avatar
 
-            width: Math.round(0.8 * accountWidget.width)
-            height: Math.round(0.8 * accountWidget.height)
+            width: accountWidget.width
+            height: accountWidget.height
             anchors.verticalCenter: accountWidget.verticalCenter
             anchors.horizontalCenter: accountWidget.horizontalCenter
 
@@ -86,7 +87,7 @@ Item
             {
                 id: initialCircle
                 anchors.centerIn: parent
-                width: Math.min(parent.width, parent.height)
+                width: Math.min(accountWidget.width, accountWidget.height)
                 height: width
                 radius: width
                 color: accountWidget.hovered ? UM.Theme.getColor("primary_text") : "transparent"
@@ -141,7 +142,7 @@ Item
             borderColor: UM.Theme.getColor("lining")
             borderWidth: UM.Theme.getSize("default_lining").width
 
-            target: Qt.point(width - (accountWidget.width / 2), -10)
+            target: Qt.point(width - (signInButton.width / 2), -10)
 
             arrowSize: UM.Theme.getSize("default_arrow").width
         }

resources/qml/Account/UserOperations.qml

@@ -9,7 +9,7 @@ import Cura 1.1 as Cura
 
 Column
 {
-    spacing: UM.Theme.getSize("narrow_margin").height
+    spacing: UM.Theme.getSize("default_margin").height
     topPadding: UM.Theme.getSize("default_margin").height
     bottomPadding: UM.Theme.getSize("default_margin").height
     width: childrenRect.width
@@ -18,7 +18,7 @@ Column
     {
         id: accountInfo
         width: childrenRect.width
-        height: childrenRect.height
+        height: accountSyncDetailsColumn.height
         anchors.left: parent.left
         anchors.leftMargin: UM.Theme.getSize("default_margin").width
         AvatarImage
@@ -56,6 +56,7 @@ Column
 
         Column
         {
+            id: accountSyncDetailsColumn
             anchors.left: avatar.right
             anchors.leftMargin: UM.Theme.getSize("default_margin").width
             spacing: UM.Theme.getSize("narrow_margin").height

resources/qml/ExpandableComponent.qml

@@ -7,8 +7,6 @@ import QtQuick.Controls 2.3
 import UM 1.2 as UM
 import Cura 1.0 as Cura
 
-import QtGraphicalEffects 1.0 // For the dropshadow
-
 // The expandable component has 2 major sub components:
 //      * The headerItem; Always visible and should hold some info about what happens if the component is expanded
 //      * The contentItem; The content that needs to be shown if the component is expanded.
@@ -58,6 +56,9 @@ Item
 
     property alias headerBackgroundBorder: background.border
 
+    // Whether or not to show the background border
+    property bool enableHeaderBackgroundBorder: true
+
     // What icon should be displayed on the right.
     property alias iconSource: collapseButton.source
 
@@ -75,11 +76,7 @@ Item
     // On what side should the header corners be shown? 1 is down, 2 is left, 3 is up and 4 is right.
     property alias headerCornerSide: background.cornerSide
 
-    property alias headerShadowColor: shadow.color
-
-    property alias enableHeaderShadow: shadow.visible
-
-    property int shadowOffset: 2
+    property int popupOffset: 2
 
     // Prefix used for the dragged position preferences. Preferences not used if empty. Don't translate!
     property string dragPreferencesNamePrefix: ""
@@ -122,6 +119,9 @@ Item
         id: background
         property real padding: UM.Theme.getSize("default_margin").width
 
+        border.width: base.enableHeaderBackgroundBorder ? UM.Theme.getSize("default_lining").width : 0
+        border.color: UM.Theme.getColor("lining")
+
         color: base.enabled ? (base.expanded ? headerActiveColor : headerBackgroundColor) : UM.Theme.getColor("disabled")
         anchors.fill: parent
 
@@ -167,7 +167,7 @@ Item
                     verticalCenter: parent.verticalCenter
                     margins: background.padding
                 }
-                source: UM.Theme.getIcon("Pen")
+                source: expanded ? UM.Theme.getIcon("ChevronSingleDown") : UM.Theme.getIcon("ChevronSingleLeft")
                 visible: source != ""
                 width: UM.Theme.getSize("standard_arrow").width
                 height: UM.Theme.getSize("standard_arrow").height
@@ -186,20 +186,6 @@ Item
         }
     }
 
-    DropShadow
-    {
-        id: shadow
-        // Don't blur the shadow
-        radius: 0
-        anchors.fill: background
-        source: background
-        verticalOffset: base.shadowOffset
-        visible: true
-        color: UM.Theme.getColor("action_button_shadow")
-        // Should always be drawn behind the background.
-        z: background.z - 1
-    }
-
     Cura.RoundedRectangle
     {
         id: contentContainer
@@ -211,7 +197,7 @@ Item
         height: childrenRect.height
 
         // Ensure that the content is located directly below the headerItem
-        y: dragPreferencesNamePrefix === "" ? (background.height + base.shadowOffset + base.contentSpacingY) : UM.Preferences.getValue(dragPreferencesNamePrefix + dragPreferencesNameY)
+        y: dragPreferencesNamePrefix === "" ? (background.height + base.popupOffset + base.contentSpacingY) : UM.Preferences.getValue(dragPreferencesNamePrefix + dragPreferencesNameY)
 
         // Make the content aligned with the rest, using the property contentAlignment to decide whether is right or left.
         // In case of right alignment, the 3x padding is due to left, right and padding between the button & text.
@@ -230,7 +216,7 @@ Item
             var maxPt = base.mapFromItem(null,
                 CuraApplication.appWidth() - (contentContainer.width + margin.width),
                 CuraApplication.appHeight() - (contentContainer.height + margin.height));
-            var initialY = background.height + base.shadowOffset + margin.height;
+            var initialY = background.height + base.popupOffset + margin.height;
 
             contentContainer.x = Math.max(minPt.x, Math.min(maxPt.x, posNewX));
             contentContainer.y = Math.max(initialY, Math.min(maxPt.y, posNewY));