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;
-            text: index + 1;
-            color: parent.enabled ? UM.Theme.getColor("button_text") : UM.Theme.getColor("button_disabled_text")
-            font: UM.Theme.getFont("default_bold");
+            anchors.centerIn: parent
+            text: index + 1
+            color:
+            {
+                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,75 +11,113 @@ import Cura 1.0 as Cura
 
 Item
 {
-    id: base;
+    id: base
 
-    width: buttons.width;
+    width: buttons.width
     height: buttons.height
     property int activeY
 
-    Column
+    Item
     {
-        id: buttons;
+        id: buttons
+        width: parent.visible ? toolButtons.width : 0
+        height: childrenRect.height
 
-        anchors.bottom: parent.bottom
-        anchors.left: parent.left
-        spacing: UM.Theme.getSize("button_lining").width
+        Behavior on width { NumberAnimation { duration: 100 } }
 
-        Repeater
+        // Used to create a rounded rectangle behind the toolButtons
+        Rectangle
         {
-            id: repeat
+            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: toolButtons
 
-            model: UM.ToolModel { }
-            width: childrenRect.width
-            height: childrenRect.height
-            Button
+            anchors.top: parent.top
+            anchors.right: parent.right
+            spacing: UM.Theme.getSize("button_lining").width
+
+            Repeater
             {
-                text: model.name + (model.shortcut ? (" (" + model.shortcut + ")") : "")
-                iconSource: (UM.Theme.getIcon(model.icon) != "") ? UM.Theme.getIcon(model.icon) : "file:///" + model.location + "/" + model.icon
-                checkable: true
-                checked: model.active
-                enabled: model.enabled && UM.Selection.hasSelection && UM.Controller.toolsEnabled
-                style: UM.Theme.styles.tool_button
-
-                onCheckedChanged:
-                {
-                    if (checked)
-                    {
-                        base.activeY = y;
-                    }
-                }
+                id: repeat
 
-                //Workaround since using ToolButton's onClicked would break the binding of the checked property, instead
-                //just catch the click so we do not trigger that behaviour.
-                MouseArea
+                model: UM.ToolModel { }
+                width: childrenRect.width
+                height: childrenRect.height
+                Button
                 {
-                    anchors.fill: parent;
-                    onClicked:
+                    text: model.name + (model.shortcut ? (" (" + model.shortcut + ")") : "")
+                    iconSource: (UM.Theme.getIcon(model.icon) != "") ? UM.Theme.getIcon(model.icon) : "file:///" + model.location + "/" + model.icon
+                    checkable: true
+                    checked: model.active
+                    enabled: model.enabled && UM.Selection.hasSelection && UM.Controller.toolsEnabled
+                    style: UM.Theme.styles.toolbar_button
+
+                    onCheckedChanged:
                     {
-                        forceActiveFocus() //First grab focus, so all the text fields are updated
-                        if(parent.checked)
+                        if (checked)
                         {
-                            UM.Controller.setActiveTool(null);
+                            base.activeY = y;
                         }
-                        else
+                    }
+
+                    //Workaround since using ToolButton's onClicked would break the binding of the checked property, instead
+                    //just catch the click so we do not trigger that behaviour.
+                    MouseArea
+                    {
+                        anchors.fill: parent;
+                        onClicked:
                         {
-                            UM.Controller.setActiveTool(model.id);
+                            forceActiveFocus() //First grab focus, so all the text fields are updated
+                            if(parent.checked)
+                            {
+                                UM.Controller.setActiveTool(null);
+                            }
+                            else
+                            {
+                                UM.Controller.setActiveTool(model.id);
+                            }
                         }
                     }
                 }
             }
         }
 
-        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")
+        }
 
-        Repeater
+        Column
         {
-            id: extruders
-            width: childrenRect.width
-            height: childrenRect.height
-            property var _model: Cura.ExtrudersModel { id: extrudersModel }
-            model: _model.items.length > 1 ? _model : 0
-            ExtruderButton { extruder: model }
+            id: extruderButtons
+
+            anchors.topMargin: UM.Theme.getSize("default_margin").height
+            anchors.top: toolButtons.bottom
+            anchors.right: parent.right
+
+            Repeater
+            {
+                id: extruders
+                width: childrenRect.width
+                height: childrenRect.height
+                property var _model: Cura.ExtrudersModel { id: extrudersModel }
+                model: _model.items.length > 1 ? _model : 0
+                ExtruderButton { extruder: model }
+            }
         }
     }
 
@@ -91,7 +129,7 @@ Item
         anchors.leftMargin: UM.Theme.getSize("default_margin").width;
         anchors.top: base.top;
         anchors.topMargin: base.activeY
-        z: buttons.z -1
+        z: buttons.z - 1
 
         target: Qt.point(parent.right, base.activeY +  Math.round(UM.Theme.getSize("button").height/2))
         arrowSize: UM.Theme.getSize("default_arrow").width

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],