Merge branch 'ui_rework_4_0' of github.com:Ultimaker/Cura into CURA-5785-Restyle_stage_menu

plugins/SimulationView/LayerSlider.qml

@@ -21,15 +21,12 @@ Item
     property color lowerHandleColor: UM.Theme.getColor("slider_handle")
     property color rangeHandleColor: UM.Theme.getColor("slider_groove_fill")
     property color handleActiveColor: UM.Theme.getColor("slider_handle_active")
-    property real handleLabelWidth: UM.Theme.getSize("slider_layerview_background").width
     property var activeHandle: upperHandle
 
     // Track properties
     property real trackThickness: UM.Theme.getSize("slider_groove").width // width of the slider track
-    property real trackRadius: trackThickness / 2
+    property real trackRadius: UM.Theme.getSize("slider_groove_radius").width
     property color trackColor: UM.Theme.getColor("slider_groove")
-    property real trackBorderWidth: 1
-    property color trackBorderColor: UM.Theme.getColor("slider_groove_border")
 
     // value properties
     property real maximumValue: 100
@@ -90,8 +87,6 @@ Item
         radius: sliderRoot.trackRadius
         anchors.centerIn: sliderRoot
         color: sliderRoot.trackColor
-        border.width: sliderRoot.trackBorderWidth
-        border.color: sliderRoot.trackBorderColor
         visible: sliderRoot.layersVisible
     }
 
@@ -140,9 +135,10 @@ Item
 
         Rectangle
         {
-            width: sliderRoot.trackThickness - 2 * sliderRoot.trackBorderWidth
+            width: sliderRoot.trackThickness
             height: parent.height + sliderRoot.handleSize
             anchors.centerIn: parent
+            radius: sliderRoot.trackRadius
             color: sliderRoot.rangeHandleColor
         }
 

plugins/SimulationView/PathSlider.qml

@@ -23,10 +23,8 @@ Item
 
     // track properties
     property real trackThickness: UM.Theme.getSize("slider_groove").width
-    property real trackRadius: trackThickness / 2
+    property real trackRadius: UM.Theme.getSize("slider_groove_radius").width
     property color trackColor: UM.Theme.getColor("slider_groove")
-    property real trackBorderWidth: 1 // width of the slider track border
-    property color trackBorderColor: UM.Theme.getColor("slider_groove_border")
 
     // value properties
     property real maximumValue: 100
@@ -68,8 +66,6 @@ Item
         radius: sliderRoot.trackRadius
         anchors.centerIn: sliderRoot
         color: sliderRoot.trackColor
-        border.width: sliderRoot.trackBorderWidth
-        border.color: sliderRoot.trackBorderColor
         visible: sliderRoot.pathsVisible
     }
 
@@ -86,9 +82,10 @@ Item
 
         Rectangle
         {
-            height: sliderRoot.trackThickness - 2 * sliderRoot.trackBorderWidth
+            height: sliderRoot.trackThickness
             width: parent.width + sliderRoot.handleSize
             anchors.centerIn: parent
+            radius: sliderRoot.trackRadius
             color: sliderRoot.rangeColor
         }
     }

plugins/SimulationView/SimulationViewMainComponent.qml

@@ -18,7 +18,7 @@ Item
     {
         id: pathSlider
         height: UM.Theme.getSize("slider_handle").width
-        width: UM.Theme.getSize("layerview_menu_size").width
+        width: UM.Theme.getSize("slider_layerview_size").height
 
         anchors.bottom: parent.bottom
         anchors.bottomMargin: UM.Theme.getSize("default_margin").height
@@ -166,7 +166,7 @@ Item
         id: layerSlider
 
         width: UM.Theme.getSize("slider_handle").width
-        height: UM.Theme.getSize("layerview_menu_size").height
+        height: UM.Theme.getSize("slider_layerview_size").height
 
         anchors
         {

resources/qml/Account/AccountWidget.qml

@@ -51,6 +51,9 @@ Button
 
         closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
 
+        opacity: opened ? 1 : 0
+        Behavior on opacity { NumberAnimation { duration: 100 } }
+
         contentItem: AccountDetails
         {
             id: panel
@@ -61,8 +64,6 @@ Button
 
         background: UM.PointingRectangle
         {
-            opacity: visible ? 1 : 0
-            Behavior on opacity { NumberAnimation { duration: 100 } }
             color: UM.Theme.getColor("tool_panel_background")
             borderColor: UM.Theme.getColor("lining")
             borderWidth: UM.Theme.getSize("default_lining").width

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/ActionPanel/OutputProcessWidget.qml

@@ -102,6 +102,8 @@ Column
 
         Cura.ActionButton
         {
+            id: previewStageShortcut
+
             leftPadding: UM.Theme.getSize("default_margin").width
             rightPadding: UM.Theme.getSize("default_margin").width
             height: UM.Theme.getSize("action_panel_button").height
@@ -111,11 +113,12 @@ Column
             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"
         }
 
         Cura.OutputDevicesActionButton
         {
-            width: UM.Theme.getSize("action_panel_button").width
+            width: previewStageShortcut.visible ? UM.Theme.getSize("action_panel_button").width : parent.width
             height: UM.Theme.getSize("action_panel_button").height
         }
     }

resources/qml/ActionPanel/PrintInformationWidget.qml

@@ -7,29 +7,30 @@ import QtQuick.Controls 2.1
 import UM 1.1 as UM
 import Cura 1.0 as Cura
 
-Button
+UM.RecolorImage
 {
     id: widget
 
-    implicitHeight: UM.Theme.getSize("section_icon").height
+    //implicitHeight: UM.Theme.getSize("section_icon").height
-    implicitWidth: UM.Theme.getSize("section_icon").width
+    //implicitWidth: UM.Theme.getSize("section_icon").width
 
-    background: UM.RecolorImage
+    source: UM.Theme.getIcon("info")
+    width: UM.Theme.getSize("section_icon").width
+    height: UM.Theme.getSize("section_icon").height
+
+    sourceSize.width: width
+    sourceSize.height: height
+
+    color: popup.opened ? UM.Theme.getColor("primary") : UM.Theme.getColor("text_medium")
+
+    MouseArea
     {
-        id: moreInformationIcon
+        anchors.fill: parent
-
+        hoverEnabled: true
-        source: UM.Theme.getIcon("info")
+        onEntered: popup.open()
-        width: UM.Theme.getSize("section_icon").width
+        onExited: popup.close()
-        height: UM.Theme.getSize("section_icon").height
-
-        sourceSize.width: width
-        sourceSize.height: height
-
-        color: widget.hovered ? UM.Theme.getColor("primary") : UM.Theme.getColor("text_medium")
     }
 
-    onClicked: popup.opened ? popup.close() : popup.open()
-
     Popup
     {
         id: popup
@@ -39,6 +40,9 @@ Button
 
         closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
 
+        opacity: opened ? 1 : 0
+        Behavior on opacity { NumberAnimation { duration: 100 } }
+
         contentItem: PrintJobInformation
         {
             id: printJobInformation
@@ -47,8 +51,6 @@ Button
 
         background: UM.PointingRectangle
         {
-            opacity: visible ? 1 : 0
-            Behavior on opacity { NumberAnimation { duration: 100 } }
             color: UM.Theme.getColor("tool_panel_background")
             borderColor: UM.Theme.getColor("lining")
             borderWidth: UM.Theme.getSize("default_lining").width

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/MainWindow/ApplicationMenu.qml

@@ -86,7 +86,7 @@ Item
         Menu
         {
             id: plugin_menu
-            title: catalog.i18nc("@title:menu menubar:toplevel", "&Toolbox")
+            title: catalog.i18nc("@title:menu menubar:toplevel", "&Marketplace")
 
             MenuItem { action: Cura.Actions.browsePackages }
         }

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
+        Behavior on width { NumberAnimation { duration: 100 } }
-        anchors.left: parent.left
-        spacing: UM.Theme.getSize("button_lining").width
 
-        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")
+        }
 
-            model: UM.ToolModel { }
+        Column
-            width: childrenRect.width
+        {
-            height: childrenRect.height
+            id: toolButtons
-            Button
+
+            anchors.top: parent.top
+            anchors.right: parent.right
+            spacing: UM.Theme.getSize("button_lining").width
+
+            Repeater
             {
-                text: model.name + (model.shortcut ? (" (" + model.shortcut + ")") : "")
+                id: repeat
-                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:
+                model: UM.ToolModel { }
+                width: childrenRect.width
+                height: childrenRect.height
+                Button
                 {
-                    if (checked)
+                    text: model.name + (model.shortcut ? (" (" + model.shortcut + ")") : "")
-                    {
+                    iconSource: (UM.Theme.getIcon(model.icon) != "") ? UM.Theme.getIcon(model.icon) : "file:///" + model.location + "/" + model.icon
-                        base.activeY = y;
+                    checkable: true
-                    }
+                    checked: model.active
-                }
+                    enabled: model.enabled && UM.Selection.hasSelection && UM.Controller.toolsEnabled
+                    style: UM.Theme.styles.toolbar_button
 
-                //Workaround since using ToolButton's onClicked would break the binding of the checked property, instead
+                    onCheckedChanged:
-                //just catch the click so we do not trigger that behaviour.
-                MouseArea
-                {
-                    anchors.fill: parent;
-                    onClicked:
                     {
-                        forceActiveFocus() //First grab focus, so all the text fields are updated
+                        if (checked)
-                        if(parent.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
-        Repeater
         {
-            id: extruders
+            anchors.fill: extruderButtons
-            width: childrenRect.width
+            anchors.leftMargin: -radius
-            height: childrenRect.height
+            radius: UM.Theme.getSize("default_radius").width
-            property var _model: Cura.ExtrudersModel { id: extrudersModel }
+            border.width: UM.Theme.getSize("default_lining").width
-            model: _model.items.length > 1 ? _model : 0
+            border.color: UM.Theme.getColor("lining")
-            ExtruderButton { extruder: model }
+            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
+            {
+                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-dark/theme.json

@@ -135,7 +135,6 @@
         "slider_handle": [255, 255, 255, 255],
         "slider_handle_hover": [77, 182, 226, 255],
         "slider_handle_active": [68, 192, 255, 255],
-        "slider_handle_border": [39, 44, 48, 255],
         "slider_text_background": [255, 255, 255, 255],
 
         "checkbox": [43, 48, 52, 255],

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
@@ -915,47 +990,6 @@ QtObject
         }
     }
 
-    property Component slider: Component
-    {
-        SliderStyle
-        {
-            groove: Rectangle
-            {
-                implicitWidth: control.width
-                implicitHeight: Theme.getSize("slider_groove").height
-
-                color: Theme.getColor("slider_groove")
-                border.width: Theme.getSize("default_lining").width
-                border.color: Theme.getColor("slider_groove_border")
-
-                radius: Math.round(width / 2)
-
-                Rectangle
-                {
-                    anchors
-                    {
-                        left: parent.left
-                        top: parent.top
-                        bottom: parent.bottom
-                    }
-                    color: Theme.getColor("slider_groove_fill");
-                    width: Math.round((control.value / (control.maximumValue - control.minimumValue)) * parent.width);
-                    radius: Math.round(width / 2);
-                }
-            }
-            handle: Rectangle
-            {
-                width: Theme.getSize("slider_handle").width;
-                height: Theme.getSize("slider_handle").height;
-                color: control.hovered ? Theme.getColor("slider_handle_hover") : Theme.getColor("slider_handle");
-                border.width: Theme.getSize("default_lining").width
-                border.color: control.hovered ? Theme.getColor("slider_handle_hover_border") : Theme.getColor("slider_handle_border")
-                radius: Math.round(Theme.getSize("slider_handle").width / 2); //Round.
-                Behavior on color { ColorAnimation { duration: 50; } }
-            }
-        }
-    }
-
     property Component text_field: Component
     {
         TextFieldStyle

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,14 +135,12 @@
         "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": [31, 36, 39, 0],
+        "small_button": [0, 0, 0, 0],
-        "small_button_hover": [68, 72, 75, 255],
+        "small_button_hover": [10, 8, 80, 255],
-        "small_button_active": [68, 72, 75, 255],
+        "small_button_active": [10, 8, 80, 255],
-        "small_button_active_hover": [68, 72, 75, 255],
+        "small_button_active_hover": [10, 8, 80, 255],
-        "small_button_text": [31, 36, 39, 197],
+        "small_button_text": [171, 171, 191, 255],
         "small_button_text_hover": [255, 255, 255, 255],
         "small_button_text_active": [255, 255, 255, 255],
         "small_button_text_active_hover": [255, 255, 255, 255],
@@ -215,13 +220,11 @@
         "progressbar_background": [245, 245, 245, 255],
         "progressbar_control": [50, 130, 255, 255],
 
-        "slider_groove": [245, 245, 245, 255],
+        "slider_groove": [223, 223, 223, 255],
-        "slider_groove_border": [127, 127, 127, 255],
+        "slider_groove_fill": [10, 8, 80, 255],
-        "slider_groove_fill": [127, 127, 127, 255],
+        "slider_handle": [10, 8, 80, 255],
-        "slider_handle": [0, 0, 0, 255],
         "slider_handle_hover": [77, 182, 226, 255],
-        "slider_handle_active": [68, 192, 255, 255],
+        "slider_handle_active": [50, 130, 255, 255],
-        "slider_handle_border": [39, 44, 48, 255],
         "slider_text_background": [255, 255, 255, 255],
 
         "quality_slider_unavailable": [179, 179, 179, 255],
@@ -449,17 +452,12 @@
 
         "scrollbar": [0.75, 0.5],
 
-        "quality_slider_bar": [1, 0.2],
+        "slider_groove": [0.5, 0.5],
-
+        "slider_groove_radius": [0.15, 0.15],
-        "slider_groove": [0.3, 0.3],
+        "slider_handle": [1.5, 1.5],
-        "slider_handle": [1.0, 1.0],
+        "slider_layerview_size": [1.0, 26.0],
-        "slider_layerview_size": [1.0, 22.0],
-        "slider_layerview_background": [4.0, 0.0],
-        "slider_layerview_margin": [1.0, 1.5],
 
         "layerview_menu_size": [15, 20],
-        "layerview_menu_size_material_color_mode": [15, 16],
-        "layerview_menu_size_collapsed": [15, 6],
         "layerview_legend_size": [1.0, 1.0],
         "layerview_row": [11.0, 1.5],
         "layerview_row_spacing": [0.0, 0.5],