Merge pull request #4780 from Ultimaker/toolbar_4_0

Toolbar 4.0

resources/qml/ActionPanel/ActionPanelWidget.qml

@@ -23,7 +23,6 @@ Rectangle
     border.width: UM.Theme.getSize("default_lining").width
     border.color: UM.Theme.getColor("lining")
     radius: UM.Theme.getSize("default_radius").width
-    visible: CuraApplication.platformActivity
 
     property bool outputAvailable: UM.Backend.state == UM.Backend.Done || UM.Backend.state == UM.Backend.Disabled
 

resources/qml/Cura.qml

@@ -186,6 +186,7 @@ UM.MainWindow
                     verticalCenter: parent.verticalCenter
                     left: parent.left
                 }
+                visible: CuraApplication.platformActivity
             }
 
             ObjectsList
@@ -235,6 +236,7 @@ UM.MainWindow
                 anchors.bottom: parent.bottom
                 anchors.rightMargin: UM.Theme.getSize("thick_margin").width
                 anchors.bottomMargin: UM.Theme.getSize("thick_margin").height
+                visible: CuraApplication.platformActivity
             }
 
             Loader

resources/qml/ExtruderButton.qml

@@ -15,37 +15,36 @@ Button
 
     text: catalog.i18ncp("@label %1 is filled in with the name of an extruder", "Print Selected Model with %1", "Print Selected Models with %1", UM.Selection.selectionCount).arg(extruder.name)
 
-    style: UM.Theme.styles.tool_button;
+    style: UM.Theme.styles.toolbar_button
     iconSource: UM.Theme.getIcon("extruder_button")
 
     checked: Cura.ExtruderManager.selectedObjectExtruders.indexOf(extruder.id) != -1
     enabled: UM.Selection.hasSelection && extruder.stack.isEnabled
 
-    property color customColor: base.hovered ? UM.Theme.getColor("button_hover") : UM.Theme.getColor("button");
-
-    Rectangle
-    {
-        anchors.fill: parent
-        anchors.margins: UM.Theme.getSize("default_lining").width;
-
-        color: "transparent"
-
-        border.width: base.checked ? UM.Theme.getSize("default_lining").width : 0;
-        border.color: UM.Theme.getColor("button_text")
-    }
-
     Item
     {
         anchors.centerIn: parent
         width: UM.Theme.getSize("default_margin").width
         height: UM.Theme.getSize("default_margin").height
+        opacity: !base.enabled ? 0.2 : 1.0
 
         Label
         {
-            anchors.centerIn: parent;
+            anchors.centerIn: parent
-            text: index + 1;
+            text: index + 1
-            color: parent.enabled ? UM.Theme.getColor("button_text") : UM.Theme.getColor("button_disabled_text")
+            color:
-            font: UM.Theme.getFont("default_bold");
+            {
+                if (base.checked)
+                {
+                    return UM.Theme.getColor("toolbar_button_text_active")
+                }
+                else if(base.hovered)
+                {
+                    return UM.Theme.getColor("toolbar_button_text_hover")
+                }
+                return UM.Theme.getColor("toolbar_button_text")
+            }
+            font: UM.Theme.getFont("default_bold")
         }
     }
 

resources/qml/Toolbar.qml

@@ -11,18 +11,37 @@ import Cura 1.0 as Cura
 
 Item
 {
-    id: base;
+    id: base
 
-    width: buttons.width;
+    width: buttons.width
     height: buttons.height
     property int activeY
 
+    Item
+    {
+        id: buttons
+        width: parent.visible ? toolButtons.width : 0
+        height: childrenRect.height
+
+        Behavior on width { NumberAnimation { duration: 100 } }
+
+        // Used to create a rounded rectangle behind the toolButtons
+        Rectangle
+        {
+            anchors.fill: toolButtons
+            anchors.leftMargin: -radius
+            radius: UM.Theme.getSize("default_radius").width
+            border.width: UM.Theme.getSize("default_lining").width
+            border.color: UM.Theme.getColor("lining")
+            color: UM.Theme.getColor("toolbar_background")
+        }
+
         Column
         {
-        id: buttons;
+            id: toolButtons
 
-        anchors.bottom: parent.bottom
+            anchors.top: parent.top
-        anchors.left: parent.left
+            anchors.right: parent.right
             spacing: UM.Theme.getSize("button_lining").width
 
             Repeater
@@ -39,7 +58,7 @@ Item
                     checkable: true
                     checked: model.active
                     enabled: model.enabled && UM.Selection.hasSelection && UM.Controller.toolsEnabled
-                style: UM.Theme.styles.tool_button
+                    style: UM.Theme.styles.toolbar_button
 
                     onCheckedChanged:
                     {
@@ -69,8 +88,26 @@ Item
                     }
                 }
             }
+        }
 
-        Item { height: UM.Theme.getSize("default_margin").height; width: UM.Theme.getSize("default_lining").width; visible: extruders.count > 0 }
+        // Used to create a rounded rectangle behind the extruderButtons
+        Rectangle
+        {
+            anchors.fill: extruderButtons
+            anchors.leftMargin: -radius
+            radius: UM.Theme.getSize("default_radius").width
+            border.width: UM.Theme.getSize("default_lining").width
+            border.color: UM.Theme.getColor("lining")
+            color: UM.Theme.getColor("toolbar_background")
+        }
+
+        Column
+        {
+            id: extruderButtons
+
+            anchors.topMargin: UM.Theme.getSize("default_margin").height
+            anchors.top: toolButtons.bottom
+            anchors.right: parent.right
 
             Repeater
             {
@@ -82,6 +119,7 @@ Item
                 ExtruderButton { extruder: model }
             }
         }
+    }
 
     UM.PointingRectangle
     {

resources/themes/cura-light/styles.qml

@@ -171,6 +171,81 @@ QtObject
         }
     }
 
+    property Component toolbar_button: Component
+    {
+        ButtonStyle
+        {
+            background: Item
+            {
+                implicitWidth: Theme.getSize("button").width;
+                implicitHeight: Theme.getSize("button").height;
+
+                UM.PointingRectangle
+                {
+                    id: button_tooltip
+
+                    anchors.left: parent.right
+                    anchors.leftMargin: Theme.getSize("button_tooltip_arrow").width * 2
+                    anchors.verticalCenter: parent.verticalCenter
+
+                    target: Qt.point(parent.x, y + Math.round(height/2))
+                    arrowSize: Theme.getSize("button_tooltip_arrow").width
+                    color: Theme.getColor("button_tooltip")
+                    opacity: control.hovered ? 1.0 : 0.0;
+                    visible: control.text != ""
+
+                    width: control.hovered ? button_tip.width + Theme.getSize("button_tooltip").width : 0
+                    height: Theme.getSize("button_tooltip").height
+
+                    Behavior on width { NumberAnimation { duration: 100; } }
+                    Behavior on opacity { NumberAnimation { duration: 100; } }
+
+                    Label
+                    {
+                        id: button_tip
+
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        anchors.verticalCenter: parent.verticalCenter;
+
+                        text: control.text;
+                        font: Theme.getFont("button_tooltip");
+                        color: Theme.getColor("tooltip_text");
+                    }
+                }
+            }
+
+            label: Item
+            {
+                UM.RecolorImage
+                {
+                    anchors.centerIn: parent;
+                    opacity: !control.enabled ? 0.2 : 1.0
+                    source: control.iconSource;
+                    width: Theme.getSize("button_icon").width;
+                    height: Theme.getSize("button_icon").height;
+                    color:
+                    {
+                        if (control.checked && control.hovered)
+                        {
+                            return Theme.getColor("toolbar_button_text_active_hover");
+                        }
+                        else if (control.checked)
+                        {
+                            return Theme.getColor("toolbar_button_text_active");
+                        }
+                        else if(control.hovered)
+                        {
+                            return Theme.getColor("toolbar_button_text_hover");
+                        }
+                        return Theme.getColor("toolbar_button_text");
+                    }
+
+                    sourceSize: Theme.getSize("button_icon")
+                }
+            }
+        }
+    }
+
     property Component tool_button: Component
     {
         ButtonStyle

resources/themes/cura-light/theme.json

@@ -105,6 +105,8 @@
 
         "action_panel_secondary": [27, 95, 202, 255],
 
+        "toolbar_background": [255, 255, 255, 255],
+
         "text": [0, 0, 0, 255],
         "text_detail": [174, 174, 174, 128],
         "text_link": [50, 130, 255, 255],
@@ -120,6 +122,11 @@
         "error": [255, 140, 0, 255],
         "warning": [255, 190, 35, 255],
 
+        "toolbar_button_text": [10, 8, 80, 255],
+        "toolbar_button_text_hover": [50, 130, 255, 255],
+        "toolbar_button_text_active": [50, 130, 255, 255],
+        "toolbar_button_text_active_hover": [50, 130, 255, 255],
+
         "button": [31, 36, 39, 255],
         "button_hover": [68, 72, 75, 255],
         "button_active": [68, 72, 75, 255],
@@ -128,8 +135,6 @@
         "button_text_hover": [255, 255, 255, 255],
         "button_text_active": [255, 255, 255, 255],
         "button_text_active_hover": [255, 255, 255, 255],
-        "button_disabled": [31, 36, 39, 255],
-        "button_disabled_text": [255, 255, 255, 101],
 
         "small_button": [0, 0, 0, 0],
         "small_button_hover": [10, 8, 80, 255],