15.10 Restyling toolbar, viewmode button

Contributes to: issue CURA-60

resources/qml/Toolbar.qml

@@ -19,7 +19,7 @@ Item {
 
         anchors.bottom: parent.bottom;
         anchors.left: parent.left;
-        spacing: 1
+        spacing: UM.Theme.sizes.default_lining.width
 
         Repeater {
             id: repeat
@@ -67,6 +67,8 @@ Item {
         Behavior on opacity { NumberAnimation { duration: 100 } }
 
         color: UM.Theme.colors.tool_panel_background;
+        border.width: UM.Theme.sizes.default_lining.width
+        border.color: UM.Theme.colors.button_lining
 
         Loader {
             id: panel

resources/themes/cura/styles.qml

@@ -45,9 +45,9 @@ QtObject {
                     height: parent.height
                     color: {
                         if(control.hovered) {
-                            return UM.Theme.colors.open_file_button_hover
+                            return UM.Theme.colors.load_save_button_hover
                         } else {
-                            return UM.Theme.colors.open_file_button
+                            return UM.Theme.colors.load_save_button
                         }
                     }
                     Behavior on color { ColorAnimation { duration: 50; } }
@@ -55,7 +55,7 @@ QtObject {
                 Label {
                     anchors.centerIn: parent
                     text: control.text
-                    color: UM.Theme.colors.open_file_button_text
+                    color: UM.Theme.colors.load_save_button_text
                     font: UM.Theme.fonts.default
                 }
             }
@@ -68,7 +68,6 @@ QtObject {
     property Component tool_button: Component {
         ButtonStyle {
             background: Item {
-                ///////////TODO CHANGE SIZES!!
                 implicitWidth: UM.Theme.sizes.button.width;
                 implicitHeight: UM.Theme.sizes.button.height;
 
@@ -77,7 +76,6 @@ QtObject {
                     anchors.top: parent.verticalCenter;
 
                     width: parent.width;
-                    ///////////TODO CHANGE LABELHEIGHT!!
                     height: control.hovered ? parent.height / 2 + label.height : 0;
                     Behavior on height { NumberAnimation { duration: 100; } }
 
@@ -87,7 +85,7 @@ QtObject {
                     Label {
                         id: label
                         anchors.bottom: parent.bottom
-                        text: control.text.replace("&", "");
+                        text: control.text
                         font: UM.Theme.fonts.button_tooltip;
                         color: UM.Theme.colors.button_tooltip_text;
                     }
@@ -116,13 +114,90 @@ QtObject {
                     Behavior on color { ColorAnimation { duration: 50; } }
 
                     Label {
+                        id: tool_button_arrow
                         anchors.right: parent.right;
-                        anchors.rightMargin: UM.Theme.sizes.default_margin.width / 2;
+                        anchors.rightMargin: (UM.Theme.sizes.button.width - UM.Theme.sizes.button_icon.width - tool_button_arrow.width) / 2
                         anchors.verticalCenter: parent.verticalCenter;
                         text: "▼";
                         font: UM.Theme.fonts.small;
                         visible: control.menu != null;
-                        color: "white";
+                        color: UM.Theme.colors.button_text
+                    }
+                }
+            }
+
+            label: Item {
+                Image {
+                    anchors.centerIn: parent;
+
+                    source: control.iconSource;
+                    width: UM.Theme.sizes.button_icon.width;
+                    height: UM.Theme.sizes.button_icon.height;
+
+                    sourceSize: UM.Theme.sizes.button_icon;
+                }
+            }
+        }
+    }
+    property Component tool_button_panel: Component {
+        ButtonStyle {
+            background: Item {
+                implicitWidth: UM.Theme.sizes.button.width;
+                implicitHeight: UM.Theme.sizes.button.height;
+
+                Rectangle {
+                    id: tool_button_background
+                    anchors.top: parent.verticalCenter;
+
+                    width: parent.width;
+                    height: control.hovered ? parent.height / 2 + label.height : 0;
+                    Behavior on height { NumberAnimation { duration: 100; } }
+
+                    opacity: control.hovered ? 1.0 : 0.0;
+                    Behavior on opacity { NumberAnimation { duration: 100; } }
+
+                    Label {
+                        id: label
+                        anchors.bottom: parent.bottom
+                        text: control.text
+                        width: UM.Theme.sizes.button.width;
+                        wrapMode: Text.WordWrap
+                        font: UM.Theme.fonts.button_tooltip;
+                        color: UM.Theme.colors.button_tooltip_text;
+                    }
+                }
+
+                Rectangle {
+                    id: buttonFace;
+
+                    anchors.fill: parent;
+
+                    property bool down: control.pressed || (control.checkable && control.checked);
+
+                    color: {
+                        if(!control.enabled) {
+                            return UM.Theme.colors.button_disabled;
+                        } else if(control.checkable && control.checked && control.hovered) {
+                            return UM.Theme.colors.button_active_hover;
+                        } else if(control.pressed || (control.checkable && control.checked)) {
+                            return UM.Theme.colors.button_active;
+                        } else if(control.hovered) {
+                            return UM.Theme.colors.button_hover;
+                        } else {
+                            return UM.Theme.colors.button;
+                        }
+                    }
+                    Behavior on color { ColorAnimation { duration: 50; } }
+
+                    Label {
+                        id: tool_button_arrow
+                        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;
+                        text: "▼";
+                        font: UM.Theme.fonts.small;
+                        visible: control.menu != null;
+                        color: UM.Theme.colors.button_text
                     }
                 }
             }

resources/themes/cura/theme.json

@@ -66,18 +66,19 @@
         "text_hover": [35, 35, 35, 255],
         "text_pressed": [12, 169, 227, 255],
 
-        "button": [160, 163, 171, 255],
+        "button": [139, 143, 153, 255],
-        "button_hover": [140, 144, 154, 255],
+        "button_hover": [116, 120, 127, 255],
         "button_active": [12, 169, 227, 255],
-        "button_active_hover": [34, 150, 199, 255],
+        "button_active_hover": [77, 184, 226, 255],
-        "button_lining": [140, 144, 154, 255],
+        "button_lining": [208, 210, 211, 255],
         "button_text": [255, 255, 255, 255],
         "button_disabled": [245, 245, 245, 255],
         "button_tooltip_text": [35, 35, 35, 255],
 
-        "open_file_button": [0, 0, 0, 255],
+        "load_save_button": [0, 0, 0, 255],
-        "open_file_button_text": [255, 255, 255, 255],
+        "load_save_button_text": [255, 255, 255, 255],
-        "open_file_button_hover": [43, 45, 46, 255],
+        "load_save_button_hover": [43, 45, 46, 255],
+        "load_save_button_active": [43, 45, 46, 255],
 
         "scrollbar_background": [245, 245, 245, 255],
         "scrollbar_handle": [205, 202, 201, 255],
@@ -139,6 +140,7 @@
     "sizes": {
         "window_margin": [2.0, 2.0],
         "default_margin": [1.0, 1.0],
+        "default_lining": [0.1, 0.1],
         "panel": [22.0, 10.0],
         "logo": [9.5, 2.0],
         "toolbar_button": [2.0, 2.0],
@@ -160,8 +162,8 @@
         "standard_list_lineheight": [1.5, 1.5],
         "standard_list_input": [20.0, 25.0],
 
-        "button": [4.25, 4.25],
+        "button": [3.2, 3.2],
-        "button_icon": [2.9, 2.9],
+        "button_icon": [2.5, 2.5],
 
         "progressbar": [26.0, 0.5],
         "progressbar_control": [8.0, 0.5],