Merge pull request #4882 from Ultimaker/CURA-5959-action-panel-ui-fixes

Cura-5959 action panel ui fixes

plugins/Toolbox/resources/qml/ToolboxDetailPage.qml

@@ -37,7 +37,7 @@ Item
                 leftMargin: UM.Theme.getSize("wide_margin").width
                 topMargin: UM.Theme.getSize("wide_margin").height
             }
-            color: white //Always a white background for image (regardless of theme).
+            color: "white" //Always a white background for image (regardless of theme).
             Image
             {
                 anchors.fill: parent

resources/qml/Account/GeneralOperations.qml

@@ -11,20 +11,16 @@ Row
 {
     spacing: UM.Theme.getSize("default_margin").width
 
-    Cura.ActionButton
+    Cura.SecondaryButton
     {
         width: UM.Theme.getSize("account_button").width
         height: UM.Theme.getSize("account_button").height
         text: catalog.i18nc("@button", "Create account")
-        color: UM.Theme.getColor("secondary")
-        hoverColor: UM.Theme.getColor("secondary")
-        textColor: UM.Theme.getColor("main_window_header_button_text_active")
-        textHoverColor: UM.Theme.getColor("main_window_header_button_text_active")
         onClicked: Qt.openUrlExternally("https://account.ultimaker.com/app/create")
         fixedWidthMode: true
     }
 
-    Cura.ActionButton
+    Cura.PrimaryButton
     {
         width: UM.Theme.getSize("account_button").width
         height: UM.Theme.getSize("account_button").height

resources/qml/Account/UserOperations.qml

@@ -11,20 +11,16 @@ Row
 {
     spacing: UM.Theme.getSize("default_margin").width
 
-    Cura.ActionButton
+    Cura.SecondaryButton
     {
         width: UM.Theme.getSize("account_button").width
         height: UM.Theme.getSize("account_button").height
         text: catalog.i18nc("@button", "Manage account")
-        color: UM.Theme.getColor("secondary")
-        hoverColor: UM.Theme.getColor("secondary")
-        textColor: UM.Theme.getColor("main_window_header_button_text_active")
-        textHoverColor: UM.Theme.getColor("main_window_header_button_text_active")
         onClicked: Qt.openUrlExternally("https://account.ultimaker.com")
         fixedWidthMode: true
     }
 
-    Cura.ActionButton
+    Cura.PrimaryButton
     {
         width: UM.Theme.getSize("account_button").width
         height: UM.Theme.getSize("account_button").height

resources/qml/ActionButton.qml

@@ -3,27 +3,34 @@
 
 import QtQuick 2.7
 import QtQuick.Controls 2.1
-import QtQuick.Layouts 1.3
+
+import QtGraphicalEffects 1.0 // For the dropshadow
 
 import UM 1.1 as UM
 
 Button
 {
     id: button
-    property alias cursorShape: mouseArea.cursorShape
     property alias iconSource: buttonIcon.source
     property alias textFont: buttonText.font
     property alias cornerRadius: backgroundRect.radius
     property alias tooltip: tooltip.text
-    property var color: UM.Theme.getColor("primary")
+
-    property var hoverColor: UM.Theme.getColor("primary_hover")
+    property color color: UM.Theme.getColor("primary")
-    property var disabledColor: color
+    property color hoverColor: UM.Theme.getColor("primary_hover")
-    property var textColor: UM.Theme.getColor("button_text")
+    property color disabledColor: color
-    property var textHoverColor: UM.Theme.getColor("button_text_hover")
+    property color textColor: UM.Theme.getColor("button_text")
-    property var textDisabledColor: textColor
+    property color textHoverColor: textColor
-    property var outlineColor: color
+    property color textDisabledColor: textColor
-    property var outlineHoverColor: hoverColor
+    property color outlineColor: color
-    property var outlineDisabledColor: outlineColor
+    property color outlineHoverColor: hoverColor
+    property color outlineDisabledColor: outlineColor
+
+    hoverEnabled: true
+
+    property alias shadowColor: shadow.color
+    property alias shadowEnabled: shadow.visible
+
     // This property is used to indicate whether the button has a fixed width or the width would depend on the contents
     // Be careful when using fixedWidthMode, the translated texts can be too long that they won't fit. In any case,
     // we elide the text to the right so the text will be cut off with the three dots at the end.
@@ -68,6 +75,19 @@ Button
         border.color: button.enabled ? (button.hovered ? button.outlineHoverColor : button.outlineColor) : button.outlineDisabledColor
     }
 
+    DropShadow
+    {
+        id: shadow
+        // Don't blur the shadow
+        radius: 0
+        anchors.fill: backgroundRect
+        source: backgroundRect
+        verticalOffset: 2
+        visible: false
+        // Should always be drawn behind the background.
+        z: backgroundRect.z - 1
+    }
+
     ToolTip
     {
         id: tooltip
@@ -75,12 +95,4 @@ Button
         delay: 500
         visible: text != "" && button.hovered
     }
-
-    MouseArea
-    {
-        id: mouseArea
-        anchors.fill: parent
-        onPressed: mouse.accepted = false
-        hoverEnabled: true
-    }
 }

resources/qml/ActionPanel/OutputDevicesActionButton.qml

@@ -12,7 +12,7 @@ Item
 {
     id: widget
 
-    Cura.ActionButton
+    Cura.PrimaryButton
     {
         id: saveToButton
         height: parent.height
@@ -42,6 +42,9 @@ Item
         id: deviceSelectionMenu
         height: parent.height
 
+        shadowEnabled: true
+        shadowColor: UM.Theme.getColor("primary_shadow")
+
         anchors
         {
             top: parent.top
@@ -65,7 +68,7 @@ Item
 
             closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
 
-            contentItem: Column
+            contentItem: ColumnLayout
             {
                 Repeater
                 {
@@ -77,7 +80,7 @@ Item
                         color: "transparent"
                         cornerRadius: 0
                         hoverColor: UM.Theme.getColor("primary")
-
+                        Layout.fillWidth: true
                         onClicked:
                         {
                             UM.OutputDeviceManager.setActiveDevice(model.id)
@@ -91,10 +94,7 @@ Item
             {
                 opacity: visible ? 1 : 0
                 Behavior on opacity { NumberAnimation { duration: 100 } }
-                radius: UM.Theme.getSize("default_radius").width
                 color: UM.Theme.getColor("action_panel_secondary")
-                border.color: UM.Theme.getColor("lining")
-                border.width: UM.Theme.getSize("default_lining").width
             }
         }
     }

resources/qml/ActionPanel/OutputProcessWidget.qml

@@ -101,20 +101,18 @@ Column
         spacing: UM.Theme.getSize("default_margin").width
         width: parent.width
 
-        Cura.ActionButton
+        Cura.SecondaryButton
         {
             id: previewStageShortcut
 
-            leftPadding: UM.Theme.getSize("default_margin").width
-            rightPadding: UM.Theme.getSize("default_margin").width
             height: UM.Theme.getSize("action_panel_button").height
             text: catalog.i18nc("@button", "Preview")
-            color: UM.Theme.getColor("secondary")
+
-            hoverColor: UM.Theme.getColor("secondary")
-            textColor: UM.Theme.getColor("primary")
-            textHoverColor: UM.Theme.getColor("text")
             onClicked: UM.Controller.setActiveStage("PreviewStage")
             visible: UM.Controller.activeStage != null && UM.Controller.activeStage.stageId != "PreviewStage"
+
+            shadowEnabled: true
+            shadowColor: UM.Theme.getColor("action_button_disabled_shadow")
         }
 
         Cura.OutputDevicesActionButton

resources/qml/ActionPanel/SliceProcessWidget.qml

@@ -40,9 +40,21 @@ Column
         }
     }
 
+    Label
+    {
+        id: autoSlicingLabel
+        width: parent.width
+        visible: prepareButtons.autoSlice && widget.backendState == UM.Backend.Processing
+
+        text: catalog.i18nc("@label:PrintjobStatus", "Auto slicing...")
+        color: UM.Theme.getColor("text")
+        font: UM.Theme.getFont("very_small")
+        renderType: Text.NativeRendering
+    }
+
     Cura.IconLabel
     {
-        id: message
+        id: unableToSliceMessage
         width: parent.width
         visible: widget.backendState == UM.Backend.Error
 
@@ -81,38 +93,41 @@ Column
         }
     }
 
-    Cura.ActionButton
-    {
-        id: prepareButton
-        width: parent.width
-        height: UM.Theme.getSize("action_panel_button").height
-        fixedWidthMode: true
-        text:
-        {
-            if ([UM.Backend.NotStarted, UM.Backend.Error].indexOf(widget.backendState) != -1)
-            {
-                return catalog.i18nc("@button", "Slice")
-            }
-            if (autoSlice)
-            {
-                return catalog.i18nc("@button", "Auto slicing...")
-            }
-            return catalog.i18nc("@button", "Cancel")
-        }
-        enabled: !autoSlice && !disabledSlice
 
+    Item
+    {
+        id: prepareButtons
         // Get the current value from the preferences
         property bool autoSlice: UM.Preferences.getValue("general/auto_slice")
         // Disable the slice process when
-        property bool disabledSlice: [UM.Backend.Done, UM.Backend.Error].indexOf(widget.backendState) != -1
 
-        disabledColor: disabledSlice ? UM.Theme.getColor("action_button_disabled") : "transparent"
+        width: parent.width
-        textDisabledColor: disabledSlice ?  UM.Theme.getColor("action_button_disabled_text") : UM.Theme.getColor("primary")
+        height: UM.Theme.getSize("action_panel_button").height
-        outlineDisabledColor: disabledSlice ? UM.Theme.getColor("action_button_disabled_border") : "transparent"
+        visible: !autoSlice
+        Cura.PrimaryButton
+        {
+            id: sliceButton
+            fixedWidthMode: true
+            anchors.fill: parent
+            text: catalog.i18nc("@button", "Slice")
+            enabled: widget.backendState != UM.Backend.Error
+            visible: widget.backendState == UM.Backend.NotStarted || widget.backendState == UM.Backend.Error
+            onClicked: sliceOrStopSlicing()
+        }
 
-        onClicked: sliceOrStopSlicing()
+        Cura.SecondaryButton
+        {
+            id: cancelButton
+            fixedWidthMode: true
+            anchors.fill: parent
+            text: catalog.i18nc("@button", "Cancel")
+            enabled: sliceButton.enabled
+            visible: !sliceButton.visible
+            onClicked: sliceOrStopSlicing()
+        }
     }
 
+
     // React when the user changes the preference of having the auto slice enabled
     Connections
     {
@@ -120,7 +135,7 @@ Column
         onPreferenceChanged:
         {
             var autoSlice = UM.Preferences.getValue("general/auto_slice")
-            prepareButton.autoSlice = autoSlice
+            prepareButtons.autoSlice = autoSlice
         }
     }
 

resources/qml/MainWindow/MainWindowHeader.qml

@@ -2,6 +2,7 @@
 // Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.7
+import QtQuick.Controls 2.0 as Controls2
 import QtQuick.Controls 1.4
 import QtQuick.Controls.Styles 1.1
 
@@ -73,25 +74,37 @@ Rectangle
     }
 
     // Shortcut button to quick access the Toolbox
-    Cura.ActionButton
+    Controls2.Button
     {
+        id: marketplaceButton
+        text: catalog.i18nc("@action:button", "Marketplace")
+        height: Math.round(0.5 * UM.Theme.getSize("main_window_header").height)
+        onClicked: Cura.Actions.browsePackages.trigger()
+
+        hoverEnabled: true
+
+        background: Rectangle
+        {
+            radius: UM.Theme.getSize("action_button_radius").width
+            color: marketplaceButton.hovered ? UM.Theme.getColor("primary_text") : UM.Theme.getColor("main_window_header_background")
+            border.width: UM.Theme.getSize("default_lining").width
+            border.color: UM.Theme.getColor("primary_text")
+        }
+
+        contentItem: Label
+        {
+            id: label
+            text: marketplaceButton.text
+            color: marketplaceButton.hovered ? UM.Theme.getColor("main_window_header_background") : UM.Theme.getColor("primary_text")
+            width: contentWidth
+        }
+
         anchors
         {
             right: accountWidget.left
             rightMargin: UM.Theme.getSize("default_margin").width
             verticalCenter: parent.verticalCenter
         }
-        leftPadding: UM.Theme.getSize("default_margin").width
-        rightPadding: UM.Theme.getSize("default_margin").width
-        text: catalog.i18nc("@action:button", "Marketplace")
-        height: Math.round(0.5 * UM.Theme.getSize("main_window_header").height)
-        color: UM.Theme.getColor("main_window_header_secondary_button_background_active")
-        hoverColor: UM.Theme.getColor("main_window_header_secondary_button_background_hovered")
-        outlineColor: UM.Theme.getColor("main_window_header_secondary_button_outline_active")
-        outlineHoverColor: UM.Theme.getColor("main_window_header_secondary_button_outline_hovered")
-        textColor: UM.Theme.getColor("main_window_header_secondary_button_text_active")
-        textHoverColor: UM.Theme.getColor("main_window_header_secondary_button_text_hovered")
-        onClicked: Cura.Actions.browsePackages.trigger()
     }
 
     AccountWidget

resources/qml/PrimaryButton.qml

@@ -0,0 +1,20 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.2
+
+import UM 1.4 as UM
+import Cura 1.1 as Cura
+
+
+Cura.ActionButton
+{
+    shadowEnabled: true
+    shadowColor: enabled ? UM.Theme.getColor("primary_button_shadow"): UM.Theme.getColor("action_button_disabled_shadow")
+    color: UM.Theme.getColor("primary_button")
+    textColor: UM.Theme.getColor("primary_button_text")
+    outlineColor: "transparent"
+    disabledColor: UM.Theme.getColor("action_button_disabled")
+    textDisabledColor: UM.Theme.getColor("action_button_disabled_text")
+    hoverColor: UM.Theme.getColor("primary_button_hover")
+}

resources/qml/SaveButton.qml

@@ -1,478 +0,0 @@
-// Copyright (c) 2018 Ultimaker B.V.
-// Cura is released under the terms of the LGPLv3 or higher.
-
-import QtQuick 2.7
-import QtQuick.Controls 1.1
-import QtQuick.Controls.Styles 1.1
-import QtQuick.Layouts 1.1
-
-import UM 1.1 as UM
-import Cura 1.0 as Cura
-
-// This widget does so much more than "just" being a save button, so it should be refactored at some point in time.
-Item
-{
-    id: base;
-    UM.I18nCatalog { id: catalog; name: "cura"}
-
-    property real progress: UM.Backend.progress
-    property int backendState: UM.Backend.state
-    property bool activity: CuraApplication.platformActivity
-
-    property alias buttonRowWidth: saveRow.width
-
-    property string fileBaseName
-    property string statusText:
-    {
-        if(!activity)
-        {
-            return catalog.i18nc("@label:PrintjobStatus", "Please load a 3D model");
-        }
-
-        switch(base.backendState)
-        {
-            case 1:
-                return catalog.i18nc("@label:PrintjobStatus", "Ready to slice");
-            case 2:
-                return catalog.i18nc("@label:PrintjobStatus", "Slicing...");
-            case 3:
-                return catalog.i18nc("@label:PrintjobStatus %1 is target operation", "Ready to %1").arg(UM.OutputDeviceManager.activeDeviceShortDescription);
-            case 4:
-                return catalog.i18nc("@label:PrintjobStatus", "Unable to Slice");
-            case 5:
-                return catalog.i18nc("@label:PrintjobStatus", "Slicing unavailable");
-            default:
-                return "";
-        }
-    }
-
-    function sliceOrStopSlicing()
-    {
-        try
-        {
-            if ([1, 5].indexOf(base.backendState) != -1)
-            {
-                CuraApplication.backend.forceSlice();
-            }
-            else
-            {
-                CuraApplication.backend.stopSlicing();
-            }
-        }
-        catch (e)
-        {
-            console.log("Could not start or stop slicing.", e)
-        }
-    }
-
-    Label
-    {
-        id: statusLabel
-        width: parent.width - 2 * UM.Theme.getSize("thick_margin").width
-        anchors.top: parent.top
-        anchors.left: parent.left
-        anchors.leftMargin: UM.Theme.getSize("thick_margin").width
-
-        color: UM.Theme.getColor("text")
-        font: UM.Theme.getFont("default_bold")
-        text: statusText;
-    }
-
-    Rectangle
-    {
-        id: progressBar
-        width: parent.width - 2 * UM.Theme.getSize("thick_margin").width
-        height: UM.Theme.getSize("progressbar").height
-        anchors.top: statusLabel.bottom
-        anchors.topMargin: Math.round(UM.Theme.getSize("thick_margin").height / 4)
-        anchors.left: parent.left
-        anchors.leftMargin: UM.Theme.getSize("thick_margin").width
-        radius: UM.Theme.getSize("progressbar_radius").width
-        color: UM.Theme.getColor("progressbar_background")
-
-        Rectangle
-        {
-            width: Math.max(parent.width * base.progress)
-            height: parent.height
-            color: UM.Theme.getColor("progressbar_control")
-            radius: UM.Theme.getSize("progressbar_radius").width
-            visible: base.backendState == 2
-        }
-    }
-
-    // Shortcut for "save as/print/..."
-    Action
-    {
-        shortcut: "Ctrl+P"
-        onTriggered:
-        {
-            // only work when the button is enabled
-            if (saveToButton.enabled)
-            {
-                saveToButton.clicked();
-            }
-            // prepare button
-            if (prepareButton.enabled)
-            {
-                sliceOrStopSlicing();
-            }
-        }
-    }
-
-    Item
-    {
-        id: saveRow
-        width: {
-            // using childrenRect.width directly causes a binding loop, because setting the width affects the childrenRect
-            var children_width = UM.Theme.getSize("default_margin").width;
-            for (var index in children)
-            {
-                var child = children[index];
-                if(child.visible)
-                {
-                    children_width += child.width + child.anchors.rightMargin;
-                }
-            }
-            return Math.min(children_width, base.width - UM.Theme.getSize("thick_margin").width);
-        }
-        height: saveToButton.height
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: UM.Theme.getSize("thick_margin").height
-        anchors.right: parent.right
-        clip: true
-
-        Row
-        {
-            id: additionalComponentsRow
-            anchors.top: parent.top
-            anchors.right: saveToButton.visible ? saveToButton.left : (prepareButton.visible ? prepareButton.left : parent.right)
-            anchors.rightMargin: UM.Theme.getSize("default_margin").width
-
-            spacing: UM.Theme.getSize("default_margin").width
-        }
-
-        Component.onCompleted:
-        {
-            saveRow.addAdditionalComponents("saveButton")
-        }
-
-        Connections
-        {
-            target: CuraApplication
-            onAdditionalComponentsChanged: saveRow.addAdditionalComponents("saveButton")
-        }
-
-        function addAdditionalComponents (areaId)
-        {
-            if(areaId == "saveButton")
-            {
-                for (var component in CuraApplication.additionalComponents["saveButton"])
-                {
-                    CuraApplication.additionalComponents["saveButton"][component].parent = additionalComponentsRow
-                }
-            }
-        }
-
-        Connections
-        {
-            target: UM.Preferences
-            onPreferenceChanged:
-            {
-                var autoSlice = UM.Preferences.getValue("general/auto_slice");
-                prepareButton.autoSlice = autoSlice;
-                saveToButton.autoSlice = autoSlice;
-            }
-        }
-
-        // Prepare button, only shows if auto_slice is off
-        Button
-        {
-            id: prepareButton
-
-            tooltip: [1, 5].indexOf(base.backendState) != -1 ? catalog.i18nc("@info:tooltip","Slice current printjob") : catalog.i18nc("@info:tooltip","Cancel slicing process")
-            // 1 = not started, 2 = Processing
-            enabled: ([1, 2].indexOf(base.backendState) != -1) && base.activity
-            visible: !autoSlice && ([1, 2, 4].indexOf(base.backendState) != -1) && base.activity
-            property bool autoSlice
-            height: UM.Theme.getSize("save_button_save_to_button").height
-
-            anchors.top: parent.top
-            anchors.right: parent.right
-            anchors.rightMargin: UM.Theme.getSize("thick_margin").width
-
-            // 1 = not started, 4 = error, 5 = disabled
-            text: [1, 4, 5].indexOf(base.backendState) != -1 ? catalog.i18nc("@label:Printjob", "Prepare") : catalog.i18nc("@label:Printjob", "Cancel")
-            onClicked:
-            {
-                sliceOrStopSlicing();
-            }
-
-            style: ButtonStyle
-            {
-                background: Rectangle
-                {
-                    border.width: UM.Theme.getSize("default_lining").width
-                    border.color:
-                    {
-                        if(!control.enabled)
-                        {
-                            return UM.Theme.getColor("action_button_disabled_border");
-                        }
-                        else if(control.pressed)
-                        {
-                            return UM.Theme.getColor("action_button_active_border");
-                        }
-                        else if(control.hovered)
-                        {
-                            return UM.Theme.getColor("action_button_hovered_border");
-                        }
-                        else
-                        {
-                            return UM.Theme.getColor("action_button_border");
-                        }
-                    }
-                    color:
-                    {
-                        if(!control.enabled)
-                        {
-                            return UM.Theme.getColor("action_button_disabled");
-                        }
-                        else if(control.pressed)
-                        {
-                            return UM.Theme.getColor("action_button_active");
-                        }
-                        else if(control.hovered)
-                        {
-                            return UM.Theme.getColor("action_button_hovered");
-                        }
-                        else
-                        {
-                            return UM.Theme.getColor("action_button");
-                        }
-                    }
-
-                    Behavior on color { ColorAnimation { duration: 50; } }
-
-                    implicitWidth: actualLabel.contentWidth + (UM.Theme.getSize("thick_margin").width * 2)
-
-                    Label
-                    {
-                        id: actualLabel
-                        anchors.centerIn: parent
-                        color:
-                        {
-                            if(!control.enabled)
-                            {
-                                return UM.Theme.getColor("action_button_disabled_text");
-                            }
-                            else if(control.pressed)
-                            {
-                                return UM.Theme.getColor("action_button_active_text");
-                            }
-                            else if(control.hovered)
-                            {
-                                return UM.Theme.getColor("action_button_hovered_text");
-                            }
-                            else
-                            {
-                                return UM.Theme.getColor("action_button_text");
-                            }
-                        }
-                        font: UM.Theme.getFont("action_button")
-                        text: control.text;
-                    }
-                }
-                label: Item {}
-            }
-        }
-
-        Button
-        {
-            id: saveToButton
-
-            tooltip: UM.OutputDeviceManager.activeDeviceDescription;
-            // 3 = done, 5 = disabled
-            enabled: base.backendState != "undefined" && (base.backendState == 3 || base.backendState == 5) && base.activity == true
-            visible: base.backendState != "undefined" && autoSlice || ((base.backendState == 3 || base.backendState == 5) && base.activity == true)
-            property bool autoSlice
-            height: UM.Theme.getSize("save_button_save_to_button").height
-
-            anchors.top: parent.top
-            anchors.right: deviceSelectionMenu.visible ? deviceSelectionMenu.left : parent.right
-            anchors.rightMargin: deviceSelectionMenu.visible ? -3 * UM.Theme.getSize("default_lining").width : UM.Theme.getSize("thick_margin").width
-
-            text: UM.OutputDeviceManager.activeDeviceShortDescription
-            onClicked:
-            {
-                forceActiveFocus();
-                UM.OutputDeviceManager.requestWriteToDevice(UM.OutputDeviceManager.activeDevice, PrintInformation.jobName,
-                    { "filter_by_machine": true, "preferred_mimetypes": Cura.MachineManager.activeMachine.preferred_output_file_formats });
-            }
-
-            style: ButtonStyle
-            {
-                background: Rectangle
-                {
-                    border.width: UM.Theme.getSize("default_lining").width
-                    border.color:
-                    {
-                        if(!control.enabled)
-                        {
-                            return UM.Theme.getColor("action_button_disabled_border");
-                        }
-                        else if(control.pressed)
-                        {
-                            return UM.Theme.getColor("print_button_ready_pressed_border");
-                        }
-                        else if(control.hovered)
-                        {
-                            return UM.Theme.getColor("print_button_ready_hovered_border");
-                        }
-                        else
-                        {
-                            return UM.Theme.getColor("print_button_ready_border");
-                        }
-                    }
-                    color:
-                    {
-                        if(!control.enabled)
-                        {
-                            return UM.Theme.getColor("action_button_disabled");
-                        }
-                        else if(control.pressed)
-                        {
-                            return UM.Theme.getColor("print_button_ready_pressed");
-                        }
-                        else if(control.hovered)
-                        {
-                            return UM.Theme.getColor("print_button_ready_hovered");
-                        }
-                        else
-                        {
-                            return UM.Theme.getColor("print_button_ready");
-                        }
-                    }
-
-                    Behavior on color { ColorAnimation { duration: 50; } }
-
-                    implicitWidth: actualLabel.contentWidth + (UM.Theme.getSize("thick_margin").width * 2)
-
-                    Label
-                    {
-                        id: actualLabel
-                        anchors.centerIn: parent
-                        color: control.enabled ? UM.Theme.getColor("print_button_ready_text") : UM.Theme.getColor("action_button_disabled_text")
-                        font: UM.Theme.getFont("action_button")
-                        text: control.text
-                    }
-                }
-                label: Item { }
-            }
-        }
-
-        Button
-        {
-            id: deviceSelectionMenu
-            tooltip: catalog.i18nc("@info:tooltip","Select the active output device");
-            anchors.top: parent.top
-            anchors.right: parent.right
-
-            anchors.rightMargin: UM.Theme.getSize("thick_margin").width
-            width: UM.Theme.getSize("save_button_save_to_button").height
-            height: UM.Theme.getSize("save_button_save_to_button").height
-
-            // 3 = Done, 5 = Disabled
-            enabled: (base.backendState == 3 || base.backendState == 5) && base.activity == true
-            visible: (devicesModel.deviceCount > 1) && (base.backendState == 3 || base.backendState == 5) && base.activity == true
-
-
-            style: ButtonStyle
-            {
-                background: Rectangle
-                {
-                    id: deviceSelectionIcon
-                    border.width: UM.Theme.getSize("default_lining").width
-                    border.color:
-                    {
-                        if(!control.enabled)
-                        {
-                            return UM.Theme.getColor("action_button_disabled_border")
-                        }
-                        else if(control.pressed)
-                        {
-                            return UM.Theme.getColor("print_button_ready_pressed_border")
-                        }
-                        else if(control.hovered)
-                        {
-                            return UM.Theme.getColor("print_button_ready_hovered_border")
-                        }
-                        else
-                        {
-                            return UM.Theme.getColor("print_button_ready_border")
-                        }
-                    }
-                    color:
-                    {
-                        if(!control.enabled)
-                        {
-                            return UM.Theme.getColor("action_button_disabled")
-                        }
-                        else if(control.pressed)
-                        {
-                            return UM.Theme.getColor("print_button_ready_pressed")
-                        }
-                        else if(control.hovered)
-                        {
-                            return UM.Theme.getColor("print_button_ready_hovered")
-                        }
-                        else
-                        {
-                            return UM.Theme.getColor("print_button_ready")
-                        }
-                    }
-                    Behavior on color { ColorAnimation { duration: 50; } }
-                    anchors.left: parent.left
-                    anchors.leftMargin: Math.round(UM.Theme.getSize("save_button_text_margin").width / 2);
-                    width: parent.height
-                    height: parent.height
-
-                    UM.RecolorImage
-                    {
-                        anchors.verticalCenter: parent.verticalCenter
-                        anchors.horizontalCenter: parent.horizontalCenter
-                        width: UM.Theme.getSize("standard_arrow").width
-                        height: UM.Theme.getSize("standard_arrow").height
-                        sourceSize.width: width
-                        sourceSize.height: height
-                        color: control.enabled ? UM.Theme.getColor("print_button_ready_text") : UM.Theme.getColor("action_button_disabled_text")
-                        source: UM.Theme.getIcon("arrow_bottom")
-                    }
-                }
-            }
-
-            menu: Menu
-            {
-                id: devicesMenu;
-                Instantiator
-                {
-                    model: devicesModel;
-                    MenuItem
-                    {
-                        text: model.description
-                        checkable: true;
-                        checked: model.id == UM.OutputDeviceManager.activeDevice
-                        exclusiveGroup: devicesMenuGroup
-                        onTriggered:
-                        {
-                            UM.OutputDeviceManager.setActiveDevice(model.id);
-                        }
-                    }
-                    onObjectAdded: devicesMenu.insertItem(index, object)
-                    onObjectRemoved: devicesMenu.removeItem(object)
-                }
-                ExclusiveGroup { id: devicesMenuGroup }
-            }
-        }
-        UM.OutputDevicesModel { id: devicesModel }
-    }
-}

resources/qml/SecondaryButton.qml

@@ -0,0 +1,20 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.2
+
+import UM 1.4 as UM
+import Cura 1.1 as Cura
+
+
+Cura.ActionButton
+{
+    shadowEnabled: true
+    shadowColor: enabled ? UM.Theme.getColor("secondary_button_shadow"): UM.Theme.getColor("action_button_disabled_shadow")
+    color: UM.Theme.getColor("secondary_button")
+    textColor: UM.Theme.getColor("secondary_button_text")
+    outlineColor: "transparent"
+    disabledColor: UM.Theme.getColor("action_button_disabled")
+    textDisabledColor: UM.Theme.getColor("action_button_disabled_text")
+    hoverColor: UM.Theme.getColor("secondary_button_hover")
+}

resources/themes/cura-light/theme.json

@@ -81,12 +81,23 @@
         "lining": [192, 193, 194, 255],
         "viewport_overlay": [0, 0, 0, 192],
 
-
         "primary": [50, 130, 255, 255],
+        "primary_shadow": [64, 47, 205, 255],
         "primary_hover": [48, 182, 231, 255],
         "primary_text": [255, 255, 255, 255],
         "border": [127, 127, 127, 255],
         "secondary": [245, 245, 245, 255],
+        "secondary_shadow": [228, 228, 228, 255],
+
+        "primary_button": [38, 113, 231, 255],
+        "primary_button_shadow": [27, 95, 202, 255],
+        "primary_button_hover": [81, 145, 247, 255],
+        "primary_button_text": [255, 255, 255, 255],
+
+        "secondary_button": [240, 240, 240, 255],
+        "secondary_button_shadow": [228, 228, 228, 255],
+        "secondary_button_hover": [228, 228, 228, 255],
+        "secondary_button_text": [30, 102, 215, 255],
 
         "main_window_header_background": [10, 8, 80, 255],
         "main_window_header_button_text_active": [10, 8, 80, 255],
@@ -96,13 +107,6 @@
         "main_window_header_button_background_inactive": [255, 255, 255, 0],
         "main_window_header_button_background_hovered": [255, 255, 255, 102],
 
-        "main_window_header_secondary_button_text_active": [255, 255, 255, 255],
-        "main_window_header_secondary_button_text_hovered": [10, 8, 80, 255],
-        "main_window_header_secondary_button_background_active": [255, 255, 255, 0],
-        "main_window_header_secondary_button_background_hovered": [255, 255, 255, 255],
-        "main_window_header_secondary_button_outline_active": [255, 255, 255, 255],
-        "main_window_header_secondary_button_outline_hovered": [255, 255, 255, 255],
-
         "account_widget_outline_active": [70, 66, 126, 255],
 
         "machine_selector_bar": [31, 36, 39, 255],
@@ -173,14 +177,8 @@
         "action_button_disabled": [245, 245, 245, 255],
         "action_button_disabled_text": [127, 127, 127, 255],
         "action_button_disabled_border": [245, 245, 245, 255],
-
+        "action_button_shadow": [64, 47, 205, 255],
-        "print_button_ready": [50, 130, 255, 255],
+        "action_button_disabled_shadow": [228, 228, 228, 255],
-        "print_button_ready_border": [50, 130, 255, 255],
-        "print_button_ready_text": [255, 255, 255, 255],
-        "print_button_ready_hovered": [30, 186, 245, 243],
-        "print_button_ready_hovered_border": [30, 186, 245, 243],
-        "print_button_ready_pressed": [30, 186, 245, 243],
-        "print_button_ready_pressed_border": [30, 186, 245, 243],
 
         "scrollbar_background": [255, 255, 255, 255],
         "scrollbar_handle": [31, 36, 39, 255],