Merge branch 'CURA-8011_Replace_extruder_icons' into CURA-8247_badge_background_colour

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

@@ -52,9 +52,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 +60,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 +91,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

@@ -35,43 +35,27 @@ Item
         anchors.horizontalCenter: parent.horizontalCenter
         width: parent.width - 2 * UM.Theme.getSize("wide_margin").width
         height: parent.height
+        // 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 != "" ? (previewMenu.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/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
+    // The extruder position
-    property alias position: extruderIcon.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")
+        materialColor: UM.Theme.getColor("monitor_skeleton_loading")
-        position: 0
+        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
+        implicitHeight: Math.round(0.5 * UM.Theme.getSize("main_window_header").height)
-        implicitWidth: 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)
+            width: accountWidget.width
-            height: Math.round(0.8 * accountWidget.height)
+            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 int popupOffset: 2
-
-    property alias enableHeaderShadow: shadow.visible
-
-    property int shadowOffset: 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));

resources/qml/ExpandablePopup.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.
@@ -52,6 +50,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
 
@@ -74,11 +75,7 @@ Item
     // Change the contentItem close behaviour
     property alias contentClosePolicy : content.closePolicy
 
-    property alias headerShadowColor: shadow.color
+    property int popupOffset: 2
-
-    property alias enableHeaderShadow: shadow.visible
-
-    property int shadowOffset: 2
 
     onEnabledChanged:
     {
@@ -116,6 +113,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 ? headerBackgroundColor : UM.Theme.getColor("disabled")
         anchors.fill: parent
 
@@ -190,26 +190,12 @@ 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
-    }
-
     Popup
     {
         id: content
 
         // Ensure that the content is located directly below the headerItem
-        y: background.height + base.shadowOffset
+        y: background.height + base.popupOffset
 
         // 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.

resources/qml/ExtruderButton.qml

@@ -22,6 +22,7 @@ Cura.ToolbarButton
     {
         materialColor: extruder.color
         extruderEnabled: extruder.stack.isEnabled
+        iconVariant: "default"
         property int index: extruder.index
     }
 

resources/qml/ExtruderIcon.qml

@@ -1,7 +1,7 @@
-// Copyright (c) 2018 Ultimaker B.V.
+// Copyright (c) 2021 Ultimaker B.V.
 // Cura is released under the terms of the LGPLv3 or higher.
 
-import QtQuick 2.7
+import QtQuick 2.11
 import QtQuick.Controls 1.1
 import UM 1.2 as UM
 
@@ -16,30 +16,30 @@ Item
     property color materialColor
     property alias textColor: extruderNumberText.color
     property bool extruderEnabled: true
+    property alias iconSize: mainIcon.sourceSize
+    property string iconVariant: "medium"
 
+    Item
+    {
+        opacity: extruderEnabled ? 1 : UM.Theme.getColor("extruder_disabled").a
+        anchors.fill: parent
+
+        UM.RecolorImage
+        {
+            anchors.fill: parent
+            sourceSize: mainIcon.sourceSize
+
+            source: UM.Theme.getIcon("ExtruderColor", iconVariant)
+            color: materialColor
+        }
         UM.RecolorImage
         {
             id: mainIcon
             anchors.fill: parent
+            sourceSize: UM.Theme.getSize("extruder_icon")
 
-        source: UM.Theme.getIcon("Extruder", "medium")
+            source: UM.Theme.getIcon("Extruder", iconVariant)
-        color: extruderEnabled ? materialColor: UM.Theme.getColor("disabled")
+            color: extruderNumberText.color
-    }
-
-    Rectangle
-    {
-        id: extruderNumberCircle
-
-        width: height
-        height: Math.round(parent.height / 2)
-        radius: Math.round(width)
-        color: UM.Theme.getColor("toolbar_background")
-
-        anchors
-        {
-            horizontalCenter: parent.horizontalCenter
-            top: parent.top
-            topMargin: (parent.height - height) / 2
         }
 
         Label
@@ -47,25 +47,13 @@ Item
             id: extruderNumberText
             anchors.centerIn: parent
             text: index + 1
-            font: UM.Theme.getFont("small")
+            font: UM.Theme.getFont("small_black")
             color: UM.Theme.getColor("text")
             width: contentWidth
             height: contentHeight
-            visible: extruderEnabled
             renderType: Text.NativeRendering
             horizontalAlignment: Text.AlignHCenter
             verticalAlignment: Text.AlignVCenter
         }
-
-        UM.RecolorImage
-        {
-            id: disabledIcon
-            anchors.fill: parent
-            anchors.margins: UM.Theme.getSize("thick_lining").width
-            sourceSize.height: width
-            source: UM.Theme.getIcon("Cancel")
-            visible: !extruderEnabled
-            color: UM.Theme.getColor("text")
-        }
     }
 }

resources/qml/MainWindow/MainWindowHeader.qml

@@ -62,7 +62,7 @@ Item
                 anchors.verticalCenter: parent.verticalCenter
                 exclusiveGroup: mainWindowHeaderMenuGroup
                 style: UM.Theme.styles.main_window_header_tab
-                height: UM.Theme.getSize("main_window_header_button").height
+                height: Math.round(0.5 * UM.Theme.getSize("main_window_header").height)
                 iconSource: model.stage.iconSource
 
                 property color overlayColor: "transparent"

resources/qml/Menus/ConfigurationMenu/ConfigurationMenu.qml

@@ -56,13 +56,13 @@ Cura.ExpandablePopup
                         id: extruderIcon
                         materialColor: model.color
                         extruderEnabled: model.enabled
-                        width: UM.Theme.getSize("button_icon").width
                         anchors.verticalCenter: parent.verticalCenter
                     }
 
                     Item
                     {
                         height: childrenRect.height
+                        opacity: model.enabled ? 1 : UM.Theme.getColor("extruder_disabled").a
                         anchors
                         {
                             left: extruderIcon.right

resources/qml/ObjectItemButton.qml

@@ -13,8 +13,6 @@ Button
 
     width: parent.width
     height: UM.Theme.getSize("action_button").height
-    leftPadding: UM.Theme.getSize("thin_margin").width
-    rightPadding: perObjectSettingsInfo.visible ? UM.Theme.getSize("default_lining").width : UM.Theme.getSize("thin_margin").width
     checkable: true
     hoverEnabled: true
 
@@ -46,14 +44,14 @@ Button
         width: objectItemButton.width - objectItemButton.leftPadding
         height: UM.Theme.getSize("action_button").height
 
-        UM.RecolorImage
+        Rectangle
         {
             id: swatch
             anchors.verticalCenter: parent.verticalCenter
             anchors.left: parent.left
-            width: height
+            width: UM.Theme.getSize("standard_arrow").height
-            height: parent.height - UM.Theme.getSize("narrow_margin").height
+            height: UM.Theme.getSize("standard_arrow").height
-            source: UM.Theme.getIcon("Extruder", "medium")
+            radius: Math.round(width / 2)
             color: extruderColor
             visible: showExtruderSwatches && extruderColor != ""
         }

resources/qml/PrintSetupSelector/Custom/CustomPrintSetup.qml

@@ -229,6 +229,9 @@ Item
                         anchors.horizontalCenter: parent.horizontalCenter
                         materialColor: model.color
                         extruderEnabled: model.enabled
+                        iconVariant: "default"
+                        width: UM.Theme.getSize("medium_button_icon").width
+                        height: UM.Theme.getSize("medium_button_icon").height
                     }
                 }
                 onClicked:

resources/qml/PrintSetupSelector/PrintSetupSelector.qml

@@ -17,9 +17,6 @@ Cura.ExpandableComponent
 
     contentPadding: UM.Theme.getSize("default_lining").width
     contentHeaderTitle: catalog.i18nc("@label", "Print settings")
-    enableHeaderShadow: false
-    headerBackgroundBorder.width: UM.Theme.getSize("default_lining").width
-    headerBackgroundBorder.color: UM.Theme.getColor("lining")
     enabled: !preSlicedData
     disabledText: catalog.i18nc("@label shown when we load a Gcode file", "Print setup disabled. G-code file can not be modified.")
 

resources/qml/PrintSetupSelector/PrintSetupSelectorHeader.qml

@@ -15,7 +15,8 @@ RowLayout
 
     Cura.IconWithText
     {
-        source: UM.Theme.getIcon("PrintQuality")
+        source: UM.Theme.getIcon("Sliders", "medium")
+        iconSize: UM.Theme.getSize("button_icon").width
         text:
         {
             if (Cura.MachineManager.activeStack)
@@ -53,6 +54,7 @@ RowLayout
         source: UM.Theme.getIcon("Infill1")
         text: Cura.MachineManager.activeStack ? parseInt(infillDensity.properties.value) + "%" : "0%"
         font: UM.Theme.getFont("medium")
+        iconSize: UM.Theme.getSize("medium_button_icon").width
 
         UM.SettingPropertyProvider
         {
@@ -68,6 +70,7 @@ RowLayout
         source: UM.Theme.getIcon("Support")
         text: supportEnabled.properties.value == "True" ? enabledText : disabledText
         font: UM.Theme.getFont("medium")
+        iconSize: UM.Theme.getSize("medium_button_icon").width
 
         UM.SettingPropertyProvider
         {
@@ -83,6 +86,7 @@ RowLayout
         source: UM.Theme.getIcon("Adhesion")
         text: platformAdhesionType.properties.value != "skirt" && platformAdhesionType.properties.value != "none" ? enabledText : disabledText
         font: UM.Theme.getFont("medium")
+        iconSize: UM.Theme.getSize("medium_button_icon").width
 
         UM.SettingPropertyProvider
         {

resources/qml/PrintSetupSelector/Recommended/RecommendedAdhesionSelector.qml

@@ -29,6 +29,7 @@ Item
         text: catalog.i18nc("@label", "Adhesion")
         font: UM.Theme.getFont("medium")
         width: labelColumnWidth
+        iconSize: UM.Theme.getSize("medium_button_icon").width
     }
 
     Item

resources/qml/PrintSetupSelector/Recommended/RecommendedInfillDensitySelector.qml

@@ -65,6 +65,7 @@ Item
         text: catalog.i18nc("@label", "Infill") + " (%)"
         font: UM.Theme.getFont("medium")
         width: labelColumnWidth
+        iconSize: UM.Theme.getSize("medium_button_icon").width
     }
 
     Item
@@ -119,6 +120,8 @@ Item
                     implicitWidth: UM.Theme.getSize("print_setup_slider_handle").width
                     implicitHeight: implicitWidth
                     radius: Math.round(implicitWidth / 2)
+                    border.color: UM.Theme.getColor("slider_groove_fill")
+                    border.width: UM.Theme.getSize("default_lining").height
                 }
 
                 tickmarks: Repeater

resources/qml/PrintSetupSelector/Recommended/RecommendedQualityProfileSelector.qml

@@ -52,6 +52,7 @@ Item
                 text: catalog.i18nc("@label", "Profiles")
                 font: UM.Theme.getFont("medium")
                 width: labelColumnWidth
+                iconSize: UM.Theme.getSize("medium_button_icon").width
             }
             UM.SimpleButton
             {
@@ -91,6 +92,7 @@ Item
                 {
                     left: profileLabel.right
                     right: parent.right
+                    verticalCenter: profileLabel.verticalCenter
                 }
 
                 model: Cura.QualityProfilesDropDownMenuModel

resources/qml/PrintSetupSelector/Recommended/RecommendedSupportSelector.qml

@@ -30,6 +30,7 @@ Item
         text: catalog.i18nc("@label", "Support")
         font: UM.Theme.getFont("medium")
         width: labelColumnWidth
+        iconSize: UM.Theme.getSize("medium_button_icon").width
     }
 
     Item
@@ -218,18 +219,16 @@ Item
                 elide: Text.ElideLeft
                 verticalAlignment: Text.AlignVCenter
 
-                background: UM.RecolorImage
+                background: Rectangle
                 {
                     id: swatch
                     height: Math.round(parent.height / 2)
                     width: height
+                    radius: Math.round(width / 2)
                     anchors.right: parent.right
                     anchors.verticalCenter: parent.verticalCenter
                     anchors.rightMargin: UM.Theme.getSize("thin_margin").width
 
-                    sourceSize.width: width
-                    sourceSize.height: height
-                    source: UM.Theme.getIcon("Extruder", "medium")
                     color: supportExtruderCombobox.color
                 }
             }
@@ -288,18 +287,16 @@ Item
                     verticalAlignment: Text.AlignVCenter
                     rightPadding: swatch.width + UM.Theme.getSize("setting_unit_margin").width
 
-                    background: UM.RecolorImage
+                    background: Rectangle
                     {
                         id: swatch
                         height: Math.round(parent.height / 2)
                         width: height
+                        radius: Math.round(width / 2)
                         anchors.right: parent.right
                         anchors.verticalCenter: parent.verticalCenter
                         anchors.rightMargin: UM.Theme.getSize("thin_margin").width
 
-                        sourceSize.width: width
-                        sourceSize.height: height
-                        source: UM.Theme.getIcon("Extruder", "medium")
                         color: supportExtruderCombobox.model.getItem(index).color
                     }
                 }

resources/qml/PrinterSelector/MachineSelector.qml

@@ -93,11 +93,11 @@ Cura.ExpandablePopup
         {
             if (isGroup)
             {
-                return UM.Theme.getIcon("PrinterTriple")
+                return UM.Theme.getIcon("PrinterTriple", "medium")
             }
             else if (isNetworkPrinter || isCloudRegistered)
             {
-                return UM.Theme.getIcon("Printer")
+                return UM.Theme.getIcon("Printer", "medium")
             }
             else
             {
@@ -114,8 +114,9 @@ Cura.ExpandablePopup
             anchors
             {
                 bottom: parent.bottom
+                bottomMargin: - height * 1 / 6
                 left: parent.left
-                leftMargin: UM.Theme.getSize("thick_margin").width
+                leftMargin: iconSize - width * 5 / 6
             }
 
             source:

resources/qml/RadioCheckbar.qml

@@ -146,6 +146,7 @@ Item
                     }
                     radius: Math.round(width / 2)
                     color: activeColor
+                    border.color: defaultItemColor
                     visible: checkbox.checked
                 }
             }

resources/qml/Settings/SettingCategory.qml

@@ -16,10 +16,13 @@ Button
     anchors.rightMargin: 2 * UM.Theme.getSize("thin_margin").width
     hoverEnabled: true
 
+    height: UM.Theme.getSize("section_icon_column").height
+
     background: Rectangle
     {
         id: backgroundRectangle
         height: UM.Theme.getSize("section").height
+        anchors.verticalCenter: parent.verticalCenter
         color:
         {
             if (!base.enabled)
@@ -107,8 +110,8 @@ Button
         source: UM.Theme.getIcon(definition.icon)
         width: UM.Theme.getSize("section_icon").width
         height: UM.Theme.getSize("section_icon").height
-        sourceSize.width: width + 15 * screenScaleFactor
+        sourceSize.width: width
-        sourceSize.height: width + 15 * screenScaleFactor
+        sourceSize.height: width
     }
 
     onClicked:
@@ -141,8 +144,8 @@ Button
         id: settingsButton
 
         visible: base.hovered || settingsButton.hovered
-        height: Math.round(base.height * 0.6)
+        height: UM.Theme.getSize("small_button_icon").height
-        width: Math.round(base.height * 0.6)
+        width: height
 
         anchors
         {
@@ -184,7 +187,7 @@ Button
             return false
         }
 
-        height: Math.round(parent.height / 2)
+        height: UM.Theme.getSize("small_button_icon").height
         width: height
 
         onClicked:

resources/qml/Settings/SettingExtruder.qml

@@ -77,7 +77,7 @@ SettingItem
 
         currentIndex: propertyProvider.properties.value !== undefined ? propertyProvider.properties.value : 0
 
-        property string color: "#fff"
+        property string color: "transparent"
 
         Binding
         {
@@ -85,7 +85,7 @@ SettingItem
             // explicit binding here otherwise we do not handle value changes after the model changes.
             target: control
             property: "color"
-            value: control.currentText != "" ? control.model.getItem(control.currentIndex).color : ""
+            value: control.currentText != "" ? control.model.getItem(control.currentIndex).color : "transparent"
         }
 
         Binding
@@ -160,18 +160,16 @@ SettingItem
             elide: Text.ElideLeft
             verticalAlignment: Text.AlignVCenter
 
-            background: UM.RecolorImage
+            background: Rectangle
             {
                 id: swatch
                 height: Math.round(parent.height / 2)
                 width: height
+                radius: Math.round(width / 2)
                 anchors.right: parent.right
                 anchors.verticalCenter: parent.verticalCenter
                 anchors.rightMargin: UM.Theme.getSize("thin_margin").width
 
-                sourceSize.width: width
-                sourceSize.height: height
-                source: UM.Theme.getIcon("Extruder", "medium")
                 color: control.color
             }
         }
@@ -229,18 +227,16 @@ SettingItem
                 verticalAlignment: Text.AlignVCenter
                 rightPadding: swatch.width + UM.Theme.getSize("setting_unit_margin").width
 
-                background: UM.RecolorImage
+                background: Rectangle
                 {
                     id: swatch
                     height: Math.round(parent.height / 2)
                     width: height
+                    radius: Math.round(width / 2)
                     anchors.right: parent.right
                     anchors.verticalCenter: parent.verticalCenter
                     anchors.rightMargin: UM.Theme.getSize("thin_margin").width
 
-                    sourceSize.width: width
-                    sourceSize.height: height
-                    source: UM.Theme.getIcon("Extruder", "medium")
                     color: control.model.getItem(index).color
                 }
             }

resources/qml/Settings/SettingItem.qml

@@ -156,7 +156,7 @@ Item
         {
             id: settingControls
 
-            height: UM.Theme.getSize("section_control").height
+            height: UM.Theme.getSize("small_button_icon").height
             spacing: Math.round(UM.Theme.getSize("thick_margin").height / 2)
 
             anchors
@@ -174,6 +174,7 @@ Item
 
                 anchors.top: parent.top
                 anchors.bottom: parent.bottom
+                height: UM.Theme.getSize("small_button_icon").height
                 width: height
 
                 color: UM.Theme.getColor("setting_control_button")
@@ -203,6 +204,7 @@ Item
 
                 anchors.top: parent.top
                 anchors.bottom: parent.bottom
+                height: UM.Theme.getSize("small_button_icon").height
                 width: height
 
                 color: UM.Theme.getColor("setting_control_button")
@@ -286,6 +288,7 @@ Item
 
                 anchors.top: parent.top
                 anchors.bottom: parent.bottom
+                height: UM.Theme.getSize("small_button_icon").height
                 width: height
 
                 onClicked:

resources/qml/Settings/SettingOptionalExtruder.qml

@@ -88,7 +88,7 @@ SettingItem
             when: control.model.items.length > 0
         }
 
-        property string color: "#fff"
+        property string color: "transparent"
 
         Binding
         {
@@ -96,7 +96,7 @@ SettingItem
             // explicit binding here otherwise we do not handle value changes after the model changes.
             target: control
             property: "color"
-            value: control.currentText != "" ? control.model.getItem(control.currentIndex).color : ""
+            value: control.currentText != "" ? control.model.getItem(control.currentIndex).color : "transparent"
         }
 
         indicator: UM.RecolorImage
@@ -161,18 +161,16 @@ SettingItem
             elide: Text.ElideRight
             verticalAlignment: Text.AlignVCenter
 
-            background: UM.RecolorImage
+            background: Rectangle
             {
                 id: swatch
                 height: Math.round(parent.height / 2)
                 width: height
+                radius: Math.round(width / 2)
                 anchors.right: parent.right
                 anchors.verticalCenter: parent.verticalCenter
                 anchors.rightMargin: UM.Theme.getSize("thin_margin").width
 
-                sourceSize.width: width
-                sourceSize.height: height
-                source: UM.Theme.getIcon("Extruder", "medium")
                 color: control.color
             }
         }
@@ -226,18 +224,16 @@ SettingItem
                 verticalAlignment: Text.AlignVCenter
                 rightPadding: swatch.width + UM.Theme.getSize("setting_unit_margin").width
 
-                background: UM.RecolorImage
+                background: Rectangle
                 {
                     id: swatch
                     height: Math.round(parent.height / 2)
                     width: height
+                    radius: Math.round(width / 2)
                     anchors.right: parent.right
                     anchors.verticalCenter: parent.verticalCenter
                     anchors.rightMargin: UM.Theme.getSize("thin_margin").width
 
-                    sourceSize.width: width
-                    sourceSize.height: height
-                    source: UM.Theme.getIcon("Extruder", "medium")
                     color: control.model.getItem(index).color
                 }
             }

resources/qml/Settings/SettingView.qml

@@ -65,7 +65,13 @@ Item
             anchors.right: clearFilterButton.left
             anchors.rightMargin: Math.round(UM.Theme.getSize("thick_margin").width)
 
-            placeholderText: "<img align='middle'  src='"+ UM.Theme.getIcon("Magnifier") +"'>" +  "<div vertical-align=bottom>" + catalog.i18nc("@label:textbox", "Search settings")
+            placeholderText:
+            {
+                var imageSize = "width='" + UM.Theme.getSize("small_button_icon").width + "' height='" + UM.Theme.getSize("small_button_icon").height
+                var imageSource = "' src='"+ UM.Theme.getIcon("Magnifier")
+                var searchPlaceholder = catalog.i18nc("@label:textbox", "Search settings")
+                return "<img align='middle' " + imageSize + imageSource +"'>" +  "<div vertical-align=bottom>" + searchPlaceholder
+            }
 
             style: TextFieldStyle
             {
@@ -188,8 +194,8 @@ Item
                 {
                     anchors.verticalCenter: parent.verticalCenter
                     anchors.horizontalCenter: parent.horizontalCenter
-                    width: UM.Theme.getSize("standard_arrow").width
+                    width: UM.Theme.getSize("medium_button_icon").width
-                    height: UM.Theme.getSize("standard_arrow").height
+                    height: UM.Theme.getSize("medium_button_icon").height
                     sourceSize.width: width
                     sourceSize.height: height
                     color: control.hovered ? UM.Theme.getColor("small_button_text_hover") : UM.Theme.getColor("small_button_text")

resources/qml/Toolbar.qml

@@ -68,7 +68,8 @@ Item
                         source: UM.Theme.getIcon(model.icon) != "" ? UM.Theme.getIcon(model.icon) : "file:///" + model.location + "/" + model.icon
                         color: UM.Theme.getColor("icon")
 
-                        sourceSize: Math.round(UM.Theme.getSize("button") / 2)
+                        sourceSize.height: Math.round(UM.Theme.getSize("button").height / 2)
+                        sourceSize.width: Math.round(UM.Theme.getSize("button").width / 2)
                     }
 
                     onCheckedChanged:

resources/qml/ViewOrientationButton.qml

@@ -11,5 +11,4 @@ UM.SimpleButton
     height: UM.Theme.getSize("small_button").height
     hoverColor: UM.Theme.getColor("small_button_text_hover")
     color: UM.Theme.getColor("small_button_text")
-    iconMargin: UM.Theme.getSize("thick_lining").width
 }

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

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<g id="Layer_1_1_">
+	<g>
+		<path d="M12,2C6.5,2,2,6.5,2,12v9h2v-3c1.8,2.4,4.7,4,8,4c5.5,0,10-4.5,10-10S17.5,2,12,2z M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8
+			s8,3.6,8,8S16.4,20,12,20z"/>
+	</g>
+</g>
+<g id="Comments">
+</g>
+</svg>

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

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#231F20;}
+</style>
+<g id="Layer_1_1_">
+	<path class="st0" d="M12,21c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S17,21,12,21z M12,6c-3.3,0-6,2.7-6,6s2.7,6,6,6s6-2.7,6-6S15.3,6,12,6z"
+		/>
+</g>
+<g id="Comments">
+</g>
+</svg>

resources/themes/cura-light/icons/medium/ExtruderColor.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#231F20;}
+</style>
+<g id="Layer_1_1_">
+	<path class="st0" d="M15,26C8.9,26,4,21.1,4,15S8.9,4,15,4s11,4.9,11,11S21.1,26,15,26z M15,7c-4.4,0-8,3.6-8,8s3.6,8,8,8
+		s8-3.6,8-8S19.4,7,15,7z"/>
+</g>
+<g id="Comments">
+</g>
+</svg>

resources/themes/cura-light/icons/medium/Folder.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+<g id="Layer_1">
+	<path d="M24,9c0-1.65-1.35-3-3-3h-9l-1-1H6C4.34,5,3,6.34,3,8v14c0,1.66,1.34,3,3,3h18c1.66,0,3-1.34,3-3V12C27,10.34,25.66,9,24,9
+		z M25,23H5V7h5.17l4,4H25V23z"/>
+</g>
+<g id="Comments">
+</g>
+</svg>

resources/themes/cura-light/icons/medium/Printer.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+<g id="Layer_1">
+	<g>
+		<path d="M24,6v18h-2l-2-2H10l-2,2H6V6H24 M26,4H4v22h4.828l2-2h8.343l2,2H26V4L26,4z"/>
+		<rect x="10" y="18" width="10" height="2"/>
+	</g>
+</g>
+<g id="Comments">
+</g>
+</svg>

resources/themes/cura-light/icons/medium/Sliders.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+<g id="Layer_1">
+	<g>
+		<path d="M18,5h-2c-1.1,0-2,0.9-2,2H3v2h11c0,1.1,0.9,2,2,2h2c1.1,0,2-0.9,2-2V7C20,5.9,19.1,5,18,5z M18,9h-2V7h2V9z"/>
+		<rect x="21" y="7" width="6" height="2"/>
+		<rect x="25" y="14" width="2" height="2"/>
+		<path d="M22,12h-2c-1.1,0-2,0.9-2,2H3v2h15c0,1.1,0.9,2,2,2h2c1.1,0,2-0.9,2-2v-2C24,12.9,23.1,12,22,12z M22,16h-2v-2h2V16z"/>
+		<path d="M12,19h-2c-1.1,0-2,0.9-2,2H3v2h5c0,1.1,0.9,2,2,2h2c1.1,0,2-0.9,2-2v-2C14,19.9,13.1,19,12,19z M12,23h-2v-2h2V23z"/>
+		<rect x="15" y="21" width="12" height="2"/>
+	</g>
+</g>
+<g id="Comments">
+</g>
+</svg>

resources/themes/cura-light/styles.qml

@@ -252,11 +252,11 @@ QtObject
                     anchors.centerIn: parent
                     opacity: control.enabled ? 1.0 : 0.2
                     source: control.iconSource
-                    width: UM.Theme.getSize("button_icon").width
+                    width: UM.Theme.getSize("medium_button_icon").width
-                    height: UM.Theme.getSize("button_icon").height
+                    height: UM.Theme.getSize("medium_button_icon").height
                     color: UM.Theme.getColor("icon")
 
-                    sourceSize: UM.Theme.getSize("button_icon")
+                    sourceSize: UM.Theme.getSize("medium_button_icon")
                 }
             }
         }

resources/themes/cura-light/theme.json

@@ -129,24 +129,44 @@
             "family": "Noto Sans"
         },
         "small": {
-            "size": 0.7,
+            "size": 0.9,
             "weight": 40,
             "family": "Noto Sans"
         },
         "small_ja_JP": {
-            "size": 0.7,
+            "size": 0.9,
             "weight": 50,
             "family": "Noto Sans"
         },
         "small_zh_CN": {
-            "size": 0.7,
+            "size": 0.9,
             "weight": 50,
             "family": "Noto Sans"
         },
         "small_zh_TW": {
-            "size": 0.7,
+            "size": 0.9,
             "weight": 50,
             "family": "Noto Sans"
+        },
+        "small_black": {
+            "size": 0.9,
+            "weight": 100,
+            "family": "Noto Sans"
+        },
+        "small_black_ja_JP": {
+            "size": 0.9,
+            "weight": 100,
+            "family": "Noto Sans"
+        },
+        "small_black_zh_CN": {
+            "size": 0.9,
+            "weight": 100,
+            "family": "Noto Sans"
+        },
+        "small_black_zh_TW": {
+            "size": 0.9,
+            "weight": 100,
+            "family": "Noto Sans"
         }
     },
 
@@ -250,6 +270,7 @@
         "button_tooltip_text": [192, 193, 194, 255],
 
         "extruder_button_material_border": [255, 255, 255, 255],
+        "extruder_disabled": [255, 255, 255, 102],
 
         "rating_star": [90, 90, 90, 255],
 
@@ -483,9 +504,9 @@
 
         "machine_selector_widget": [20.0, 4.0],
         "machine_selector_widget_content": [25.0, 32.0],
-        "machine_selector_icon": [2.66, 2.66],
+        "machine_selector_icon": [2.5, 2.5],
 
-        "views_selector": [23.0, 4.0],
+        "views_selector": [16.0, 4.0],
 
         "printer_type_label": [3.5, 1.5],
 
@@ -504,12 +525,12 @@
         "thin_margin": [0.71, 0.71],
         "narrow_margin": [0.5, 0.5],
 
-        "extruder_icon": [2.33, 2.33],
+        "extruder_icon": [2.5, 2.5],
 
         "section": [0.0, 2],
         "section_control": [0, 1],
-        "section_icon": [1.6, 1.6],
+        "section_icon": [2, 2],
-        "section_icon_column": [2.8, 0.0],
+        "section_icon_column": [2.5, 2.5],
         "rating_star": [1.0, 1.0],
 
         "setting": [25.0, 1.8],
@@ -538,6 +559,9 @@
         "small_button": [2, 2],
         "small_button_icon": [1.5, 1.5],
 
+        "medium_button": [2.5, 2.5],
+        "medium_button_icon": [2, 2],
+
         "favorites_row": [2, 2],
         "favorites_button": [2, 2],
         "favorites_button_icon": [1.2, 1.2],