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 {}
-    contentItem: Item
+    toolItem: ExtruderIcon
     {
-        // For some reason if the extruder icon is not enclosed to the item, the size changes to fill the size of the button
-        ExtruderIcon
-        {
-            anchors.centerIn: parent
-            materialColor: model.color
-            extruderEnabled: extruder.stack.isEnabled
-            property int index: extruder.index
-        }
+        materialColor: extruder.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.Styles 1.1
-import QtQuick.Layouts 1.1
+import QtQuick.Controls 2.3
 
 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
-                    property bool isLastElement: toolsModel.getItem(toolsModel.rowCount() - 1).id == model.id
+                    isTopElement: toolsModel.getItem(0).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
-                    width: UM.Theme.getSize("button").width
+                    isTopElement: extrudersModel.getItem(0).id == model.id
+                    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