Move mode-toggle out of header

Tweak tool-buttons and fonts

resources/qml/Sidebar.qml

@@ -15,6 +15,7 @@ Rectangle
     property Action addMachineAction;
     property Action configureMachinesAction;
     property Action manageProfilesAction;
+    property int currentModeIndex;
 
     color: UM.Theme.colors.sidebar;
     UM.I18nCatalog { id: catalog; name:"cura"}
@@ -49,18 +50,6 @@ Rectangle
 
         addMachineAction: base.addMachineAction;
         configureMachinesAction: base.configureMachinesAction;
-        modesModel: modesListModel;
-
-        currentModeIndex:
-        {
-            var index = parseInt(UM.Preferences.getValue("cura/active_mode"))
-            if(index)
-            {
-                return index;
-            }
-            return 0;
-        }
-        onCurrentModeIndexChanged: UM.Preferences.setValue("cura/active_mode", currentModeIndex);
     }
 
     ProfileSetup {
@@ -71,16 +60,97 @@ Rectangle
         height: totalHeightProfileSetup
     }
 
+    currentModeIndex:
+    {
+        var index = parseInt(UM.Preferences.getValue("cura/active_mode"))
+        if(index)
+        {
+            return index;
+        }
+        return 0;
+    }
+    onCurrentModeIndexChanged:
+    {
+        UM.Preferences.setValue("cura/active_mode", currentModeIndex);
+    }
+
+    Label {
+        id: settingsModeLabel
+        text: catalog.i18nc("@label:listbox","Print Setup:");
+        anchors.left: parent.left
+        anchors.leftMargin: UM.Theme.sizes.default_margin.width;
+        anchors.top: profileItem.bottom
+        anchors.topMargin: UM.Theme.sizes.default_margin.height
+        width: parent.width/100*45
+        font: UM.Theme.fonts.default;
+        color: UM.Theme.colors.text
+    }
+
+    Rectangle {
+        id: settingsModeSelection
+        width: parent.width/100*55
+        height: UM.Theme.sizes.sidebar_header_mode_toggle.height
+        anchors.right: parent.right
+        anchors.rightMargin: UM.Theme.sizes.default_margin.width
+        anchors.top: profileItem.bottom
+        anchors.topMargin: UM.Theme.sizes.default_margin.height
+        Component{
+            id: wizardDelegate
+            Button {
+                height: settingsModeSelection.height
+                anchors.left: parent.left
+                anchors.leftMargin: model.index * (settingsModeSelection.width / 2)
+                anchors.verticalCenter: parent.verticalCenter
+                width: parent.width / 2
+                text: model.text
+                exclusiveGroup: modeMenuGroup;
+                checkable: true;
+                checked: base.currentModeIndex == index
+                onClicked: base.currentModeIndex = index
+                style: ButtonStyle {
+                    background: Rectangle {
+                        border.color: control.checked ? UM.Theme.colors.toggle_checked_border : 
+                                          control.pressed ? UM.Theme.colors.toggle_active_border :
+                                          control.hovered ? UM.Theme.colors.toggle_hovered_border : UM.Theme.colors.toggle_unchecked_border
+                        color: control.checked ? UM.Theme.colors.toggle_checked : 
+                                   control.pressed ? UM.Theme.colors.toggle_active :
+                                   control.hovered ? UM.Theme.colors.toggle_hovered : UM.Theme.colors.toggle_unchecked
+                        Behavior on color { ColorAnimation { duration: 50; } }
+                        Label {
+                            anchors.centerIn: parent
+                            color: control.checked ? UM.Theme.colors.toggle_checked_text : 
+                                       control.pressed ? UM.Theme.colors.toggle_active_text :
+                                       control.hovered ? UM.Theme.colors.toggle_hovered_text : UM.Theme.colors.toggle_unchecked_text
+                            font: UM.Theme.fonts.default
+                            text: control.text;
+                        }
+                    }
+                    label: Item { }
+                }
+            }
+        }
+        ExclusiveGroup { id: modeMenuGroup; }
+        ListView{
+            id: modesList
+            property var index: 0
+            model: modesListModel
+            delegate: wizardDelegate
+            anchors.top: parent.top
+            anchors.left: parent.left
+            width: parent.width
+        }
+    }
+
     Loader
     {
         id: sidebarContents;
         anchors.bottom: saveButton.top
-        anchors.top: profileItem.bottom
+        anchors.top: settingsModeSelection.bottom
         anchors.topMargin: UM.Theme.sizes.default_margin.height
         anchors.left: base.left
         anchors.right: base.right
 
-        source: modesListModel.count > header.currentModeIndex ? modesListModel.get(header.currentModeIndex).file : "";
+        source: modesListModel.count > base.currentModeIndex ? modesListModel.get(base.currentModeIndex).file : "";
 
         property Item sidebar: base;
 
@@ -123,6 +193,6 @@ Rectangle
     {
         modesListModel.append({ text: catalog.i18nc("@title:tab", "Simple"), file: "SidebarSimple.qml" })
         modesListModel.append({ text: catalog.i18nc("@title:tab", "Advanced"), file: "SidebarAdvanced.qml" })
-        sidebarContents.setSource(modesListModel.get(header.currentModeIndex).file)
+        sidebarContents.setSource(modesListModel.get(base.currentModeIndex).file)
     }
 }

resources/qml/SidebarHeader.qml

@@ -11,8 +11,6 @@ Item
 {
     id: base;
     // Machine Setup
-    property variant modesModel;
-    property int currentModeIndex: 0;
     property Action addMachineAction;
     property Action configureMachinesAction;
     UM.I18nCatalog { id: catalog; name:"cura"}
@@ -24,71 +22,25 @@ Item
         height: UM.Theme.sizes.sidebar_header.height
         anchors.top: parent.top
         color: UM.Theme.colors.sidebar_header_bar
+    }
 
-        Label{
+    Label{
-            id: settingsModeLabel
+        id: printjobTabLabel
-            text: catalog.i18nc("@label:listbox","Print Setup");
+        text: catalog.i18nc("@label:listbox","Print Job");
-            anchors.left: parent.left
+        anchors.left: parent.left
-            anchors.leftMargin: UM.Theme.sizes.default_margin.width;
+        anchors.leftMargin: UM.Theme.sizes.default_margin.width;
-            anchors.verticalCenter: parent.verticalCenter
+        anchors.top: settingsModeRow.bottom
-            width: parent.width/100*45
+        anchors.topMargin: UM.Theme.sizes.default_margin.height
-            font: UM.Theme.fonts.default;
+        width: parent.width/100*45
-            color: UM.Theme.colors.text_white
+        font: UM.Theme.fonts.large;
-        }
+        color: UM.Theme.colors.text
-
-        Rectangle{
-            id: settingsModeSelection
-            width: parent.width/100*55
-            height: UM.Theme.sizes.sidebar_header_mode_toggle.height
-            anchors.right: parent.right
-            anchors.rightMargin: UM.Theme.sizes.default_margin.width;
-            anchors.verticalCenter: parent.verticalCenter
-            Component{
-                id: wizardDelegate
-                Button {
-                    height: settingsModeSelection.height
-                    anchors.left: parent.left
-                    anchors.leftMargin: model.index * (settingsModeSelection.width / 2)
-                    anchors.verticalCenter: parent.verticalCenter
-                    width: parent.width / 2
-                    text: model.text
-                    exclusiveGroup: modeMenuGroup;
-                    checkable: true;
-                    checked: base.currentModeIndex == index
-                    onClicked: base.currentModeIndex = index
-                    style: ButtonStyle {
-                        background: Rectangle {
-                            color: control.checked ? UM.Theme.colors.toggle_active : UM.Theme.colors.toggle_disabled
-                            Behavior on color { ColorAnimation { duration: 50; } }
-                            Label {
-                                anchors.centerIn: parent
-                                color: control.checked ? UM.Theme.colors.toggle_active_text : UM.Theme.colors.toggle_disabled_text
-                                font: UM.Theme.fonts.default
-                                text: control.text;
-                            }
-                        }
-                        label: Item { }
-                    }
-                }
-            }
-            ExclusiveGroup { id: modeMenuGroup; }
-            ListView{
-                id: modesList
-                property var index: 0
-                model: base.modesModel
-                delegate: wizardDelegate
-                anchors.top: parent.top
-                anchors.left: parent.left
-                width: parent.width
-            }
-        }
     }
 
     Rectangle {
         id: machineSelectionRow
         width: base.width
         height: UM.Theme.sizes.sidebar_setup.height
-        anchors.top: settingsModeRow.bottom
+        anchors.top: printjobTabLabel.bottom
         anchors.topMargin: UM.Theme.sizes.default_margin.height
         anchors.horizontalCenter: parent.horizontalCenter
 

resources/themes/cura/styles.qml

@@ -77,7 +77,8 @@ QtObject {
                 }
                 Rectangle {
                     anchors.fill: parent;
-                    color: control.hovered ? UM.Theme.colors.button_hover : UM.Theme.colors.button
+                    color: control.pressed ? UM.Theme.colors.button_active :
+                               control.hovered ? UM.Theme.colors.button_hover : UM.Theme.colors.button
                     Behavior on color { ColorAnimation { duration: 50; } }
                 }
             }
@@ -156,7 +157,7 @@ QtObject {
 
                     Label {
                         id: tool_button_arrow
-                        opacity: !control.enabled ? 0.4 : 1.0
+                        opacity: !control.enabled ? 0.2 : 1.0
                         anchors.right: parent.right;
                         anchors.rightMargin: (UM.Theme.sizes.button.width - UM.Theme.sizes.button_icon.width - tool_button_arrow.width) / 2
                         anchors.verticalCenter: parent.verticalCenter;
@@ -171,7 +172,7 @@ QtObject {
             label: Item {
                 Image {
                     anchors.centerIn: parent;
-                    opacity: !control.enabled ? 0.4 : 1.0
+                    opacity: !control.enabled ? 0.2 : 1.0
                     source: control.iconSource;
                     width: UM.Theme.sizes.button_icon.width;
                     height: UM.Theme.sizes.button_icon.height;

resources/themes/cura/theme.json

@@ -1,12 +1,12 @@
 {
     "fonts": {
         "large": {
-            "size": 1.5,
+            "size": 1.25,
             "bold": true,
             "family": "Proxima Nova Rg"
         },
         "default": {
-            "size": 1,
+            "size": 1.15,
             "family": "Proxima Nova Rg"
         },
         "default_allcaps": {
@@ -60,14 +60,14 @@
         "border": [205, 202, 201, 255],
         "secondary": [205, 202, 201, 255],
 
-        "text": [140, 144, 154, 255],
+        "text": [24, 41, 77, 255],
         "text_inactive": [174, 174, 174, 255],
         "text_white": [255, 255, 255, 255],
         "text_hover": [35, 35, 35, 255],
         "text_pressed": [12, 169, 227, 255],
 
         "error": [255, 140, 0, 255],
-        "sidebar_header_bar": [12, 169, 227, 255],
+        "sidebar_header_bar": [24, 41, 77, 255],
 
         "button": [24, 41, 77, 255],
         "button_hover": [70, 84, 113, 255],
@@ -78,10 +78,18 @@
         "button_disabled_text": [70, 84, 113, 255],
         "button_tooltip_text": [35, 35, 35, 255],
 
-        "toggle_active": [255, 255, 255, 255],
+        "toggle_checked": [24, 41, 77, 255],
-        "toggle_active_text": [77, 184, 226, 255],
+        "toggle_checked_border": [24, 41, 77, 255],
-        "toggle_disabled": [77, 184, 226, 255],
+        "toggle_checked_text": [255, 255, 255, 255],
-        "toggle_disabled_text": [255, 255, 255, 255],
+        "toggle_unchecked": [255, 255, 255, 255],
+        "toggle_unchecked_border": [127, 127, 127, 255],
+        "toggle_unchecked_text": [24, 41, 77, 255],
+        "toggle_hovered": [255, 255, 255, 255],
+        "toggle_hovered_border": [32, 166, 219, 255],
+        "toggle_hovered_text": [24, 41, 77, 255],
+        "toggle_active": [32, 166, 219, 255],
+        "toggle_active_border": [32, 166, 219, 255],
+        "toggle_active_text": [255, 255, 255, 255],
 
         "load_save_button": [0, 0, 0, 255],
         "load_save_button_text": [255, 255, 255, 255],