Merge pull request #1226 from fieldOfView/theme_fixes

Tweak 2.4 sidebar changes

resources/qml/Sidebar.qml

@@ -8,6 +8,7 @@ import QtQuick.Layouts 1.1
 
 import UM 1.2 as UM
 import Cura 1.0 as Cura
+import "Menus"
 
 Rectangle
 {
@@ -30,9 +31,21 @@ Rectangle
     property bool printerConnected: Cura.MachineManager.printerOutputDevices.length != 0
     property bool printerAcceptsCommands: printerConnected && Cura.MachineManager.printerOutputDevices[0].acceptsCommands
 
-    color: UM.Theme.getColor("sidebar");
+    color: UM.Theme.getColor("sidebar")
     UM.I18nCatalog { id: catalog; name:"cura"}
 
+    Timer {
+        id: tooltipDelayTimer
+        interval: 500
+        repeat: false
+        property var item
+        property string text
+
+        onTriggered:
+        {
+            base.showTooltip(base, {x:1, y:item.y}, text);
+        }
+    }
 
     function showTooltip(item, position, text)
     {
@@ -73,7 +86,7 @@ Rectangle
         }
     }
 
-    // Mode selection buttons for changing between Setting & Monitor print mode
+    // Printer selection and mode selection buttons for changing between Setting & Monitor print mode
     Rectangle
     {
         id: sidebarHeaderBar
@@ -85,25 +98,89 @@ Rectangle
         Row
         {
             anchors.left: parent.left
-            anchors.leftMargin: UM.Theme.getSize("default_margin").width;
+            anchors.leftMargin: UM.Theme.getSize("default_margin").width
             anchors.right: parent.right
+            anchors.rightMargin: UM.Theme.getSize("default_margin").width
+            spacing: UM.Theme.getSize("default_margin").width
+
+            ToolButton
+            {
+                id: machineSelection
+                text: Cura.MachineManager.activeMachineName
+
+                height: UM.Theme.getSize("setting_control").height
+                tooltip: Cura.MachineManager.activeMachineName
+                anchors.verticalCenter: parent.verticalCenter
+                style: ButtonStyle {
+                    background: Rectangle {
+                        color: UM.Theme.getColor("sidebar_header_bar")
+
+                        UM.RecolorImage {
+                            id: downArrow
+                            anchors.verticalCenter: parent.verticalCenter
+                            anchors.right: parent.right
+                            anchors.rightMargin: UM.Theme.getSize("default_margin").width
+                            width: UM.Theme.getSize("standard_arrow").width
+                            height: UM.Theme.getSize("standard_arrow").height
+                            sourceSize.width: width
+                            sourceSize.height: width
+                            color: UM.Theme.getColor("text_reversed")
+                            source: UM.Theme.getIcon("arrow_bottom")
+                        }
+                        Label {
+                            id: sidebarComboBoxLabel
+                            color: UM.Theme.getColor("text_reversed")
+                            text: control.text;
+                            elide: Text.ElideRight;
+                            anchors.left: parent.left;
+                            anchors.leftMargin: UM.Theme.getSize("setting_unit_margin").width
+                            anchors.right: downArrow.left;
+                            anchors.rightMargin: control.rightMargin;
+                            anchors.verticalCenter: parent.verticalCenter;
+                            font: UM.Theme.getFont("large")
+                        }
+                    }
+                    label: Label{}
+                }
+
+                width: parent.width - (showSettings.width + showMonitor.width + 2 * UM.Theme.getSize("default_margin").width)
+
+                menu: PrinterMenu { }
+            }
+
             Button
             {
                 id: showSettings
-                width: (parent.width - UM.Theme.getSize("default_margin").width) / 2
+                width: height
                 height: UM.Theme.getSize("sidebar_header").height
                 onClicked: monitoringPrint = false
                 iconSource: UM.Theme.getIcon("tab_settings");
                 checkable: true
                 checked: !monitoringPrint
                 exclusiveGroup: sidebarHeaderBarGroup
+                property string tooltipText: catalog.i18nc("@tooltip", "<b>Print Setup</b><br/><br/>Edit or review the settings for the active print job.")
+
+                onHoveredChanged: {
+                    if (hovered)
+                    {
+                        tooltipDelayTimer.item = showSettings
+                        tooltipDelayTimer.text = tooltipText
+                        tooltipDelayTimer.start();
+                    }
+                    else
+                    {
+                        tooltipDelayTimer.stop();
+                        base.hideTooltip();
+                    }
+                }
 
                 style:  UM.Theme.styles.sidebar_header_tab
             }
+
             Button
             {
                 id: showMonitor
-                width: (parent.width - UM.Theme.getSize("default_margin").width) / 2
+                width: height
                 height: UM.Theme.getSize("sidebar_header").height
                 onClicked: monitoringPrint = true
                 iconSource: {
@@ -139,6 +216,21 @@ Rectangle
                 checkable: true
                 checked: monitoringPrint
                 exclusiveGroup: sidebarHeaderBarGroup
+                property string tooltipText: catalog.i18nc("@tooltip", "<b>Print Monitor</b><br/><br/>Monitor the state of the connected printer and the print job in progress.")
+
+                onHoveredChanged: {
+                    if (hovered)
+                    {
+                        tooltipDelayTimer.item = showMonitor
+                        tooltipDelayTimer.text = tooltipText
+                        tooltipDelayTimer.start();
+                    }
+                    else
+                    {
+                        tooltipDelayTimer.stop();
+                        base.hideTooltip();
+                    }
+                }
 
                 style:  UM.Theme.styles.sidebar_header_tab
             }
@@ -151,7 +243,6 @@ Rectangle
         width: parent.width
 
         anchors.top: sidebarHeaderBar.bottom
-        anchors.topMargin: UM.Theme.getSize("default_margin").height
 
         onShowTooltip: base.showTooltip(item, location, text)
         onHideTooltip: base.hideTooltip()
@@ -160,10 +251,11 @@ Rectangle
     Rectangle {
         id: headerSeparator
         width: parent.width
-        height: UM.Theme.getSize("sidebar_lining").height
+        visible: !monitoringPrint
+        height: visible ? UM.Theme.getSize("sidebar_lining").height : 0
         color: UM.Theme.getColor("sidebar_lining")
         anchors.top: header.bottom
-        anchors.topMargin: UM.Theme.getSize("default_margin").height
+        anchors.topMargin: visible ? UM.Theme.getSize("default_margin").height : 0
     }
 
     onCurrentModeIndexChanged:
@@ -212,6 +304,20 @@ Rectangle
                 checked: base.currentModeIndex == index
                 onClicked: base.currentModeIndex = index
 
+                onHoveredChanged: {
+                    if (hovered)
+                    {
+                        tooltipDelayTimer.item = settingsModeSelection
+                        tooltipDelayTimer.text = model.tooltipText
+                        tooltipDelayTimer.start();
+                    }
+                    else
+                    {
+                        tooltipDelayTimer.stop();
+                        base.hideTooltip();
+                    }
+                }
+
                 style: ButtonStyle {
                     background: Rectangle {
                         border.width: UM.Theme.getSize("default_lining").width
@@ -408,8 +514,18 @@ Rectangle
 
     Component.onCompleted:
     {
-        modesListModel.append({ text: catalog.i18nc("@title:tab", "Recommended"), item: sidebarSimple, showFilterButton: false })
+        modesListModel.append({
-        modesListModel.append({ text: catalog.i18nc("@title:tab", "Custom"), item: sidebarAdvanced, showFilterButton: true })
+            text: catalog.i18nc("@title:tab", "Recommended"),
+            tooltipText: catalog.i18nc("@tooltip", "<b>Recommended Print Setup</b><br/><br/>Print with the recommended settings for the selected printer, material and quality."),
+            item: sidebarSimple,
+            showFilterButton: false
+        })
+        modesListModel.append({
+            text: catalog.i18nc("@title:tab", "Custom"),
+            tooltipText: catalog.i18nc("@tooltip", "<b>Custom Print Setup</b><br/><br/>Print with finegrained control over every last bit of the slicing process."),
+            item: sidebarAdvanced,
+            showFilterButton: true
+        })
         sidebarContents.push({ "item": modesListModel.get(base.currentModeIndex).item, "immediate": true });
 
         var index = parseInt(UM.Preferences.getValue("cura/active_mode"))

resources/qml/SidebarHeader.qml

@@ -21,47 +21,7 @@ Column
     signal showTooltip(Item item, point location, string text)
     signal hideTooltip()
 
-    Row
+    Item
-    {
-        id: machineSelectionRow
-        height: UM.Theme.getSize("sidebar_setup").height
-
-        anchors
-        {
-            left: parent.left
-            leftMargin: UM.Theme.getSize("default_margin").width
-            right: parent.right
-            rightMargin: UM.Theme.getSize("default_margin").width
-        }
-
-        Label
-        {
-            id: machineSelectionLabel
-            text: catalog.i18nc("@label:listbox", "Printer:");
-            anchors.verticalCenter: parent.verticalCenter
-            font: UM.Theme.getFont("default");
-            color: UM.Theme.getColor("text");
-
-            width: parent.width * 0.45 - UM.Theme.getSize("default_margin").width
-        }
-
-        ToolButton
-        {
-            id: machineSelection
-            text: Cura.MachineManager.activeMachineName;
-
-            height: UM.Theme.getSize("setting_control").height
-            tooltip: Cura.MachineManager.activeMachineName
-            anchors.verticalCenter: parent.verticalCenter
-            style: UM.Theme.styles.sidebar_header_button
-
-            width: parent.width * 0.55 + UM.Theme.getSize("default_margin").width
-
-            menu: PrinterMenu { }
-        }
-    }
-
-    Row
     {
         id: extruderSelectionRow
         width: parent.width
@@ -86,6 +46,7 @@ Column
             property var index: 0
 
             height: UM.Theme.getSize("sidebar_header_mode_tabs").height
+            width: parent.width
             boundsBehavior: Flickable.StopAtBounds
 
             anchors
@@ -141,6 +102,17 @@ Column
                                     control.hovered ? UM.Theme.getColor("tab_hovered") : UM.Theme.getColor("tab_unchecked")
                         Behavior on color { ColorAnimation { duration: 50; } }
 
+                        Rectangle
+                        {
+                            id: highlight
+                            visible: control.checked
+                            anchors.left: parent.left
+                            anchors.right: parent.right
+                            anchors.top: parent.top
+                            height: UM.Theme.getSize("sidebar_header_highlight").height
+                            color: UM.Theme.getColor("sidebar_header_bar")
+                        }
+
                         Rectangle
                         {
                             id: swatch
@@ -179,6 +151,14 @@ Column
         }
     }
 
+    Item
+    {
+        id: variantRowSpacer
+        height: UM.Theme.getSize("default_margin").height / 4
+        width: height
+        visible: !extruderSelectionRow.visible
+    }
+
     Row
     {
         id: variantRow

resources/qml/SidebarSimple.qml

@@ -30,7 +30,7 @@ Item
         id: infillCellLeft
         anchors.top: parent.top
         anchors.left: parent.left
-        width: base.width / 100 * 35 - UM.Theme.getSize("default_margin").width
+        width: base.width * .45 - UM.Theme.getSize("default_margin").width
         height: childrenRect.height
 
         Label
@@ -52,7 +52,7 @@ Item
         id: infillCellRight
 
         height: childrenRect.height;
-        width: base.width / 100 * 65
+        width: base.width * .55
         spacing: UM.Theme.getSize("default_margin").width
 
         anchors.left: infillCellLeft.right
@@ -231,7 +231,7 @@ Item
             anchors.left: parent.left
             anchors.leftMargin: UM.Theme.getSize("default_margin").width
             anchors.verticalCenter: enableSupportCheckBox.verticalCenter
-            width: parent.width / 100 * 45 - 3 * UM.Theme.getSize("default_margin").width
+            width: parent.width * .45 - 3 * UM.Theme.getSize("default_margin").width
             text: catalog.i18nc("@label", "Enable Support");
             font: UM.Theme.getFont("default");
             color: UM.Theme.getColor("text");
@@ -279,7 +279,7 @@ Item
             anchors.left: parent.left
             anchors.leftMargin: UM.Theme.getSize("default_margin").width
             anchors.verticalCenter: supportExtruderCombobox.verticalCenter
-            width: parent.width / 100 * 45 - 3 * UM.Theme.getSize("default_margin").width
+            width: parent.width * .45 - 3 * UM.Theme.getSize("default_margin").width
             text: catalog.i18nc("@label", "Support Extruder");
             font: UM.Theme.getFont("default");
             color: UM.Theme.getColor("text");
@@ -319,7 +319,7 @@ Item
             }
             anchors.left: supportExtruderLabel.right
             anchors.leftMargin: UM.Theme.getSize("default_margin").width
-            width: parent.width / 100 * 55
+            width: parent.width * .55
             height:
             {
                 if ((supportEnabled.properties.value == "True") && (machineExtruderCount.properties.value > 1))
@@ -332,6 +332,7 @@ Item
                     return 0;
                 }
             }
+            Behavior on height { NumberAnimation { duration: 100 } }
 
             style: UM.Theme.styles.combobox_color
             enabled: base.settingsEnabled
@@ -377,7 +378,7 @@ Item
             anchors.left: parent.left
             anchors.leftMargin: UM.Theme.getSize("default_margin").width
             anchors.verticalCenter: adhesionCheckBox.verticalCenter
-            width: parent.width / 100 * 45 - 3 * UM.Theme.getSize("default_margin").width
+            width: parent.width * .45 - 3 * UM.Theme.getSize("default_margin").width
             text: catalog.i18nc("@label", "Build Plate Adhesion");
             font: UM.Theme.getFont("default");
             color: UM.Theme.getColor("text");

resources/qml/SidebarTooltip.qml

@@ -29,6 +29,11 @@ UM.PointingRectangle {
         } else {
             x = position.x - base.width;
             y = position.y - UM.Theme.getSize("tooltip_arrow_margins").height;
+            if(y < 0)
+            {
+                position.y += -y;
+                y = 0;
+            }
         }
         base.opacity = 1;
         target = Qt.point(40 , position.y + UM.Theme.getSize("tooltip_arrow_margins").height / 2)

resources/themes/cura/theme.json

@@ -98,7 +98,7 @@
         "tab_checked_text": [24, 41, 77, 255],
         "tab_unchecked": [245, 245, 245, 255],
         "tab_unchecked_border": [245, 245, 245, 255],
-        "tab_unchecked_text": [152, 152, 152, 255],
+        "tab_unchecked_text": [127, 127, 127, 255],
         "tab_hovered": [245, 245, 245, 255],
         "tab_hovered_border": [245, 245, 245, 255],
         "tab_hovered_text": [32, 166, 219, 255],
@@ -205,7 +205,7 @@
 
         "sidebar": [35.0, 10.0],
         "sidebar_header": [0.0, 4.0],
-        "sidebar_header_highlight": [0.5, 0.5],
+        "sidebar_header_highlight": [0.25, 0.25],
         "sidebar_header_mode_toggle": [0.0, 2.0],
         "sidebar_header_mode_tabs": [0.0, 3.0],
         "sidebar_lining": [0.5, 0.5],