Merge pull request #4893 from Ultimaker/fix_toolbar_style

Fix toolbar style

resources/qml/ExtruderButton.qml

@@ -7,7 +7,7 @@ import QtQuick.Controls 2.0
 import UM 1.2 as UM
 import Cura 1.0 as Cura
 
-Button
+Cura.ToolbarButton
 {
     id: base
 
@@ -18,22 +18,16 @@ Button
     checked: Cura.ExtruderManager.selectedObjectExtruders.indexOf(extruder.id) != -1
     enabled: UM.Selection.hasSelection && extruder.stack.isEnabled
 
-    background: Item {}
+    toolItem: ExtruderIcon
-    contentItem: Item
     {
-        // For some reason if the extruder icon is not enclosed to the item, the size changes to fill the size of the button
+        materialColor: extruder.color
-        ExtruderIcon
+        extruderEnabled: extruder.stack.isEnabled
-        {
+        property int index: extruder.index
-            anchors.centerIn: parent
-            materialColor: model.color
-            extruderEnabled: extruder.stack.isEnabled
-            property int index: extruder.index
-        }
     }
 
     onClicked:
     {
         forceActiveFocus() //First grab focus, so all the text fields are updated
-        CuraActions.setExtruderForSelection(extruder.id);
+        CuraActions.setExtruderForSelection(extruder.id)
     }
 }

resources/qml/Toolbar.qml

@@ -2,9 +2,7 @@
 // Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.2
-import QtQuick.Controls 1.1
+import QtQuick.Controls 2.3
-import QtQuick.Controls.Styles 1.1
-import QtQuick.Layouts 1.1
 
 import UM 1.2 as UM
 import Cura 1.0 as Cura
@@ -55,17 +53,24 @@ Item
                 model: UM.ToolModel { id: toolsModel }
                 width: childrenRect.width
                 height: childrenRect.height
-                Button
+
+                delegate: ToolbarButton
                 {
                     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
 
-                    property bool isFirstElement: toolsModel.getItem(0).id == model.id
+                    isTopElement: toolsModel.getItem(0).id == model.id
-                    property bool isLastElement: toolsModel.getItem(toolsModel.rowCount() - 1).id == model.id
+                    isBottomElement: toolsModel.getItem(toolsModel.rowCount() - 1).id == model.id
+
+                    toolItem: UM.RecolorImage
+                    {
+                        source: UM.Theme.getIcon(model.icon) != "" ? UM.Theme.getIcon(model.icon) : "file:///" + model.location + "/" + model.icon
+                        color: UM.Theme.getColor("toolbar_button_text")
+
+                        sourceSize: UM.Theme.getSize("button_icon")
+                    }
 
                     onCheckedChanged:
                     {
@@ -128,11 +133,12 @@ Item
                 height: childrenRect.height
                 property var _model: Cura.ExtrudersModel { id: extrudersModel }
                 model: _model.items.length > 1 ? _model : 0
-                ExtruderButton
+
+                delegate: ExtruderButton
                 {
                     extruder: model
-                    height: UM.Theme.getSize("button").width
+                    isTopElement: extrudersModel.getItem(0).id == model.id
-                    width: UM.Theme.getSize("button").width
+                    isBottomElement: extrudersModel.getItem(extrudersModel.rowCount() - 1).id == model.id
                 }
             }
         }

resources/qml/ToolbarButton.qml

@@ -0,0 +1,99 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.7
+import QtQuick.Controls 2.3
+
+import UM 1.2 as UM
+import Cura 1.0 as Cura
+
+Button
+{
+    id: base
+
+    property alias toolItem: contentItemLoader.sourceComponent
+
+    // These two properties indicate whether the toolbar button is at the top of the toolbar column or at the bottom.
+    // If it is somewhere in the middle, then both has to be false. If there is only one element in the column, then
+    // both properties have to be set to true. This is used to create a rounded corner.
+    property bool isTopElement: false
+    property bool isBottomElement: false
+
+    hoverEnabled: true
+
+    background: Rectangle
+    {
+        implicitWidth: UM.Theme.getSize("button").width
+        implicitHeight: UM.Theme.getSize("button").height
+        color:
+        {
+            if (base.checked && base.hovered)
+            {
+                return UM.Theme.getColor("toolbar_button_active_hover")
+            }
+            else if (base.checked)
+            {
+                return UM.Theme.getColor("toolbar_button_active")
+            }
+            else if(base.hovered)
+            {
+                return UM.Theme.getColor("toolbar_button_hover")
+            }
+            return UM.Theme.getColor("toolbar_background")
+        }
+        radius: UM.Theme.getSize("default_radius").width
+
+        Rectangle
+        {
+            id: topSquare
+            anchors
+            {
+                left: parent.left
+                right: parent.right
+                top: parent.top
+            }
+            height: parent.radius
+            color: parent.color
+            visible: !base.isTopElement
+        }
+
+        Rectangle
+        {
+            id: bottomSquare
+            anchors
+            {
+                left: parent.left
+                right: parent.right
+                bottom: parent.bottom
+            }
+            height: parent.radius
+            color: parent.color
+            visible: !base.isBottomElement
+        }
+
+        Rectangle
+        {
+            id: leftSquare
+            anchors
+            {
+                left: parent.left
+                top: parent.top
+                bottom: parent.bottom
+            }
+            width: parent.radius
+            color: parent.color
+        }
+    }
+
+    contentItem: Item
+    {
+        opacity: parent.enabled ? 1.0 : 0.2
+        Loader
+        {
+            id: contentItemLoader
+            anchors.centerIn: parent
+            width: UM.Theme.getSize("button_icon").width
+            height: UM.Theme.getSize("button_icon").height
+        }
+    }
+}

resources/qml/qmldir

@@ -12,4 +12,5 @@ IconLabel 1.0 IconLabel.qml
 OutputDevicesActionButton 1.0 OutputDevicesActionButton.qml
 ExpandableComponent 1.0 ExpandableComponent.qml
 PrinterTypeLabel 1.0 PrinterTypeLabel.qml
-ViewsSelector 1.0 ViewsSelector.qml
+ViewsSelector 1.0 ViewsSelector.qml
+ToolbarButton 1.0 ToolbarButton.qml

resources/themes/cura-light/styles.qml

@@ -171,123 +171,6 @@ QtObject
         }
     }
 
-    property Component toolbar_button: Component
-    {
-        ButtonStyle
-        {
-            background: Rectangle
-            {
-                implicitWidth: Theme.getSize("button").width
-                implicitHeight: Theme.getSize("button").height
-                color:
-                {
-                    if (control.checked && control.hovered)
-                    {
-                        return Theme.getColor("toolbar_button_active_hover")
-                    }
-                    else if (control.checked)
-                    {
-                        return Theme.getColor("toolbar_button_active")
-                    }
-                    else if(control.hovered)
-                    {
-                        return Theme.getColor("toolbar_button_hover")
-                    }
-                    return Theme.getColor("toolbar_background")
-                }
-                radius: UM.Theme.getSize("default_radius").width
-
-                Rectangle
-                {
-                    id: topSquare
-                    anchors
-                    {
-                        left: parent.left
-                        right: parent.right
-                        top: parent.top
-                    }
-                    height: parent.radius
-                    color: control.isFirstElement ? "transparent" : parent.color
-                }
-
-                Rectangle
-                {
-                    id: bottomSquare
-                    anchors
-                    {
-                        left: parent.left
-                        right: parent.right
-                        bottom: parent.bottom
-                    }
-                    height: parent.radius
-                    color: control.isLastElement ? "transparent" : parent.color
-                }
-
-                Rectangle
-                {
-                    id: leftSquare
-                    anchors
-                    {
-                        left: parent.left
-                        top: parent.top
-                        bottom: parent.bottom
-                    }
-                    width: parent.radius
-                    color: parent.color
-                }
-
-                // This is the tooltip
-                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: Theme.getColor("toolbar_button_text");
-
-                    sourceSize: Theme.getSize("button_icon")
-                }
-            }
-        }
-    }
-
     property Component tool_button: Component
     {
         ButtonStyle