Merge pull request #10044 from Ultimaker/CURA-8013_Adjust_sizes_of_header_and_toolbar

CURA-8013: Adjust sizes of header and toolbar

cura/Machines/Models/ExtrudersModel.py

@@ -53,6 +53,9 @@ class ExtrudersModel(ListModel):
     EnabledRole = Qt.UserRole + 11
     """Is the extruder enabled?"""
 
+    MaterialTypeRole = Qt.UserRole + 12
+    """The type of the material (e.g. PLA, ABS, PETG, etc.)."""
+
     defaultColors = ["#ffc924", "#86ec21", "#22eeee", "#245bff", "#9124ff", "#ff24c8"]
     """List of colours to display if there is no material or the material has no known colour. """
 
@@ -75,6 +78,7 @@ class ExtrudersModel(ListModel):
         self.addRoleName(self.StackRole, "stack")
         self.addRoleName(self.MaterialBrandRole, "material_brand")
         self.addRoleName(self.ColorNameRole, "color_name")
+        self.addRoleName(self.MaterialTypeRole, "material_type")
         self._update_extruder_timer = QTimer()
         self._update_extruder_timer.setInterval(100)
         self._update_extruder_timer.setSingleShot(True)
@@ -193,7 +197,8 @@ class ExtrudersModel(ListModel):
                     "variant": extruder.variant.getName() if extruder.variant else "",  # e.g. print core
                     "stack": extruder,
                     "material_brand": material_brand,
-                    "color_name": color_name
+                    "color_name": color_name,
+                    "material_type": extruder.material.getMetaDataEntry("material") if extruder.material else "",
                 }
 
                 items.append(item)
@@ -218,6 +223,7 @@ class ExtrudersModel(ListModel):
                     "stack": None,
                     "material_brand": "",
                     "color_name": "",
+                    "material_type": "",
                 }
                 items.append(item)
             if self._items != items:

plugins/PrepareStage/PrepareMenu.qml

@@ -8,7 +8,6 @@ import QtQuick.Controls 2.3
 import UM 1.3 as UM
 import Cura 1.1 as Cura
 
-import QtGraphicalEffects 1.0 // For the dropshadow
 
 Item
 {
@@ -42,42 +41,34 @@ Item
             anchors.left: openFileButton.right
             anchors.right: parent.right
             anchors.leftMargin: UM.Theme.getSize("default_margin").width
+            property int machineSelectorWidth: Math.round((width - printSetupSelectorItem.width) / 3)
 
             height: parent.height
-            spacing: 0
+            // 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.MachineSelector
             {
                 id: machineSelection
                 headerCornerSide: Cura.RoundedRectangle.Direction.Left
-                Layout.minimumWidth: UM.Theme.getSize("machine_selector_widget").width
-                Layout.maximumWidth: UM.Theme.getSize("machine_selector_widget").width
+                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
             }
 
-            // Separator line
-            Rectangle
-            {
-                height: parent.height
-                width: UM.Theme.getSize("default_lining").width
-                color: UM.Theme.getColor("lining")
-            }
-
             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: itemRow.width - machineSelection.width - printSetupSelectorItem.width - 2 * UM.Theme.getSize("default_lining").width
-            }
-
-            // Separator line
-            Rectangle
-            {
-                height: parent.height
-                width: UM.Theme.getSize("default_lining").width
-                color: UM.Theme.getColor("lining")
+                Layout.preferredWidth: parent.machineSelectorWidth * 2
             }
 
             Item
@@ -120,24 +111,12 @@ Item
                 id: background
                 height: UM.Theme.getSize("stage_menu").height
                 width: UM.Theme.getSize("stage_menu").height
+                border.color: UM.Theme.getColor("lining")
+                border.width: UM.Theme.getSize("default_lining").width
 
                 radius: UM.Theme.getSize("default_radius").width
                 color: openFileButton.hovered ? UM.Theme.getColor("action_button_hovered") : UM.Theme.getColor("action_button")
             }
-
-            DropShadow
-            {
-                id: shadow
-                // Don't blur the shadow
-                radius: 0
-                anchors.fill: background
-                source: background
-                verticalOffset: 2
-                visible: true
-                color: UM.Theme.getColor("action_button_shadow")
-                // Should always be drawn behind the background.
-                z: background.z - 1
-            }
         }
     }
 }

resources/qml/ExpandableComponent.qml

@@ -56,6 +56,8 @@ Item
     // How much padding is needed around the header & button
     property alias headerPadding: background.padding
 
+    property alias headerBackgroundBorder: background.border
+
     // What icon should be displayed on the right.
     property alias iconSource: collapseButton.source
 

resources/qml/ExpandablePopup.qml

@@ -50,6 +50,8 @@ Item
     // How much padding is needed around the header & button
     property alias headerPadding: background.padding
 
+    property alias headerBackgroundBorder: background.border
+
     // What icon should be displayed on the right.
     property alias iconSource: collapseButton.source
 

resources/qml/Menus/ConfigurationMenu/ConfigurationMenu.qml

@@ -56,50 +56,98 @@ Cura.ExpandablePopup
                         id: extruderIcon
                         materialColor: model.color
                         extruderEnabled: model.enabled
-                        height: parent.height
-                        width: height
+                        width: UM.Theme.getSize("button_icon").width
+                        anchors.verticalCenter: parent.verticalCenter
                     }
 
-                    // Label for the brand of the material
-                    Label
+                    Item
                     {
-                        id: typeAndBrandNameLabel
-
-                        text: model.material_brand + " " + model.material
-                        elide: Text.ElideRight
-                        font: UM.Theme.getFont("default")
-                        color: UM.Theme.getColor("text")
-                        renderType: Text.NativeRendering
-
+                        height: childrenRect.height
                         anchors
                         {
-                            top: extruderIcon.top
                             left: extruderIcon.right
                             leftMargin: UM.Theme.getSize("default_margin").width
+                            verticalCenter: parent.verticalCenter
                             right: parent.right
-                            rightMargin: UM.Theme.getSize("default_margin").width
+                            rightMargin:  UM.Theme.getSize("default_margin").width
+                        }
+                        // Label for the brand of the material
+                        Label
+                        {
+                            id: materialBrandColorTypeLabel
+
+                            text: model.material_brand == model.color_name ? model.color_name + " " + model.material_type : model.material_brand + " " + model.color_name + " " + model.material_type
+                            elide: Text.ElideRight
+                            font: UM.Theme.getFont("default")
+                            color: UM.Theme.getColor("text")
+                            renderType: Text.NativeRendering
+
+                            anchors
+                            {
+                                top: parent.top
+                                left: parent.left
+                                right: parent.right
+                            }
+                            visible: !truncated
                         }
-                    }
-                    // Label that shows the name of the variant
-                    Label
-                    {
-                        id: variantLabel
-
-                        visible: Cura.MachineManager.activeMachine ? Cura.MachineManager.activeMachine.hasVariants : false
 
-                        text: model.variant
-                        elide: Text.ElideRight
-                        font: UM.Theme.getFont("default_bold")
-                        color: UM.Theme.getColor("text")
-                        renderType: Text.NativeRendering
+                        Label
+                        {
+                            id: materialColorTypeLabel
+
+                            text: model.color_name + " " + model.material_type
+                            elide: Text.ElideRight
+                            font: UM.Theme.getFont("default")
+                            color: UM.Theme.getColor("text")
+                            renderType: Text.NativeRendering
+
+                            anchors
+                            {
+                                top: parent.top
+                                left: parent.left
+                                right: parent.right
+                            }
+
+                            visible: !materialBrandColorTypeLabel.visible && !truncated
+                        }
 
-                        anchors
+                        Label
                         {
-                            left: extruderIcon.right
-                            leftMargin: UM.Theme.getSize("default_margin").width
-                            top: typeAndBrandNameLabel.bottom
-                            right: parent.right
-                            rightMargin:  UM.Theme.getSize("default_margin").width
+                            id: materialTypeLabel
+
+                            text: model.material_type
+                            elide: Text.ElideRight
+                            font: UM.Theme.getFont("default")
+                            color: UM.Theme.getColor("text")
+                            renderType: Text.NativeRendering
+
+                            anchors
+                            {
+                                top: parent.top
+                                left: parent.left
+                                right: parent.right
+                            }
+                            visible: !materialBrandColorTypeLabel.visible && !materialColorTypeLabel.visible
+                        }
+                        // Label that shows the name of the variant
+                        Label
+                        {
+                            id: variantLabel
+
+                            visible: Cura.MachineManager.activeMachine ? Cura.MachineManager.activeMachine.hasVariants : false
+
+                            text: model.variant
+                            elide: Text.ElideRight
+                            font: UM.Theme.getFont("default_bold")
+                            color: UM.Theme.getColor("text")
+                            renderType: Text.NativeRendering
+
+                            anchors
+                            {
+                                left: parent.left
+                                top: materialBrandColorTypeLabel.bottom
+                                right: parent.right
+                            }
                         }
                     }
                 }

resources/qml/PrintSetupSelector/PrintSetupSelector.qml

@@ -17,6 +17,9 @@ 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/Toolbar.qml

@@ -44,7 +44,6 @@ Item
 
             anchors.top: parent.top
             anchors.right: parent.right
-            spacing: UM.Theme.getSize("default_lining").height
 
             Repeater
             {
@@ -69,7 +68,7 @@ Item
                         source: UM.Theme.getIcon(model.icon) != "" ? UM.Theme.getIcon(model.icon) : "file:///" + model.location + "/" + model.icon
                         color: UM.Theme.getColor("icon")
 
-                        sourceSize: UM.Theme.getSize("button_icon")
+                        sourceSize: Math.round(UM.Theme.getSize("button") / 2)
                     }
 
                     onCheckedChanged:
@@ -131,7 +130,6 @@ Item
             anchors.topMargin: UM.Theme.getSize("default_margin").height
             anchors.top: toolButtons.bottom
             anchors.right: parent.right
-            spacing: UM.Theme.getSize("default_lining").height
 
             Repeater
             {

resources/qml/ToolbarButton.qml

@@ -25,22 +25,7 @@ Button
     {
         implicitWidth: UM.Theme.getSize("button").width
         implicitHeight: UM.Theme.getSize("button").height
-        color:
-        {
-            if (base.checked && base.hovered)
-            {
-                return UM.Theme.getColor("toolbar_button_active_hover")
-            }
-            else if (base.checked)
-            {
-                return UM.Theme.getColor("toolbar_button_active")
-            }
-            else if(base.hovered)
-            {
-                return UM.Theme.getColor("toolbar_button_hover")
-            }
-            return UM.Theme.getColor("toolbar_background")
-        }
+        color: UM.Theme.getColor("toolbar_background")
         radius: UM.Theme.getSize("default_radius").width
 
         Rectangle
@@ -84,16 +69,35 @@ Button
             color: parent.color
         }
     }
-
-    contentItem: Item
+    contentItem: Rectangle
     {
         opacity: parent.enabled ? 1.0 : 0.2
+        implicitWidth: Math.round(UM.Theme.getSize("button").width * 0.75)
+        implicitHeight: Math.round(UM.Theme.getSize("button").height * 0.75)
+        radius: Math.round(width * 0.5)
+
+        color:
+        {
+            if (base.checked && base.hovered)
+            {
+                return UM.Theme.getColor("toolbar_button_active_hover")
+            }
+            else if (base.checked)
+            {
+                return UM.Theme.getColor("toolbar_button_active")
+            }
+            else if(base.hovered)
+            {
+                return UM.Theme.getColor("toolbar_button_hover")
+            }
+            return UM.Theme.getColor("toolbar_background")
+        }
         Loader
         {
             id: contentItemLoader
             anchors.centerIn: parent
-            width: UM.Theme.getSize("button_icon").width
-            height: UM.Theme.getSize("button_icon").height
+            width: Math.round(UM.Theme.getSize("button").width / 2)
+            height: Math.round(UM.Theme.getSize("button").height / 2)
         }
     }