Merge branch 'ui_rework_4_0' into CURA-5941_restyle_setting_dropdown

plugins/SimulationView/SimulationViewMainComponent.qml

@@ -61,10 +61,9 @@ Item
         iconSource: !is_simulation_playing ? "./resources/simulation_resume.svg": "./resources/simulation_pause.svg"
         width: UM.Theme.getSize("small_button").width
         height: UM.Theme.getSize("small_button").height
-        hoverBackgroundColor: UM.Theme.getColor("small_button_hover")
-        hoverColor: UM.Theme.getColor("small_button_text_hover")
-        color: UM.Theme.getColor("small_button_text")
-        iconMargin: 0.5 * UM.Theme.getSize("wide_lining").width
+        hoverColor: UM.Theme.getColor("slider_handle_active")
+        color: UM.Theme.getColor("slider_handle")
+        iconMargin: UM.Theme.getSize("thick_lining").width
         visible: !UM.SimulationView.compatibilityMode
 
         Connections

plugins/UM3NetworkPrinting/resources/qml/DiscoverUM3Action.qml

@@ -64,6 +64,7 @@ Cura.MachineAction
             width: parent.width
             text: catalog.i18nc("@title:window", "Connect to Networked Printer")
             wrapMode: Text.WordWrap
+            renderType: Text.NativeRendering
             font.pointSize: 18
         }
 
@@ -72,6 +73,7 @@ Cura.MachineAction
             id: pageDescription
             width: parent.width
             wrapMode: Text.WordWrap
+            renderType: Text.NativeRendering
             text: catalog.i18nc("@label", "To print directly to your printer over the network, please make sure your printer is connected to the network using a network cable or by connecting your printer to your WIFI network. If you don't connect Cura with your printer, you can still use a USB drive to transfer g-code files to your printer.\n\nSelect your printer from the list below:")
         }
 
@@ -182,6 +184,7 @@ Cura.MachineAction
                                 text: listview.model[index].name
                                 color: parent.ListView.isCurrentItem ? palette.highlightedText : palette.text
                                 elide: Text.ElideRight
+                                renderType: Text.NativeRendering
                             }
 
                             MouseArea
@@ -204,6 +207,7 @@ Cura.MachineAction
                     anchors.left: parent.left
                     anchors.right: parent.right
                     wrapMode: Text.WordWrap
+                    renderType: Text.NativeRendering
                     text: catalog.i18nc("@label", "If your printer is not listed, read the <a href='%1'>network printing troubleshooting guide</a>").arg("https://ultimaker.com/en/troubleshooting");
                     onLinkActivated: Qt.openUrlExternally(link)
                 }
@@ -221,6 +225,7 @@ Cura.MachineAction
                     text: base.selectedDevice ? base.selectedDevice.name : ""
                     font: UM.Theme.getFont("large")
                     elide: Text.ElideRight
+                    renderType: Text.NativeRendering
                 }
                 Grid
                 {
@@ -231,12 +236,14 @@ Cura.MachineAction
                     {
                         width: Math.round(parent.width * 0.5)
                         wrapMode: Text.WordWrap
+                        renderType: Text.NativeRendering
                         text: catalog.i18nc("@label", "Type")
                     }
                     Label
                     {
                         width: Math.round(parent.width * 0.5)
                         wrapMode: Text.WordWrap
+                        renderType: Text.NativeRendering
                         text:
                         {
                             if(base.selectedDevice)
@@ -268,24 +275,28 @@ Cura.MachineAction
                     {
                         width: Math.round(parent.width * 0.5)
                         wrapMode: Text.WordWrap
+                        renderType: Text.NativeRendering
                         text: catalog.i18nc("@label", "Firmware version")
                     }
                     Label
                     {
                         width: Math.round(parent.width * 0.5)
                         wrapMode: Text.WordWrap
+                        renderType: Text.NativeRendering
                         text: base.selectedDevice ? base.selectedDevice.firmwareVersion : ""
                     }
                     Label
                     {
                         width: Math.round(parent.width * 0.5)
                         wrapMode: Text.WordWrap
+                        renderType: Text.NativeRendering
                         text: catalog.i18nc("@label", "Address")
                     }
                     Label
                     {
                         width: Math.round(parent.width * 0.5)
                         wrapMode: Text.WordWrap
+                        renderType: Text.NativeRendering
                         text: base.selectedDevice ? base.selectedDevice.ipAddress : ""
                     }
                 }
@@ -294,6 +305,7 @@ Cura.MachineAction
                 {
                     width: parent.width
                     wrapMode: Text.WordWrap
+                    renderType: Text.NativeRendering
                     text:{
                         // The property cluster size does not exist for older UM3 devices.
                         if(!base.selectedDevice || base.selectedDevice.clusterSize == null || base.selectedDevice.clusterSize == 1)
@@ -315,6 +327,7 @@ Cura.MachineAction
                 {
                     width: parent.width
                     wrapMode: Text.WordWrap
+                    renderType: Text.NativeRendering
                     visible: base.selectedDevice != null && !base.completeProperties
                     text: catalog.i18nc("@label", "The printer at this address has not yet responded." )
                 }
@@ -358,9 +371,10 @@ Cura.MachineAction
 
             Label
             {
-                text: catalog.i18nc("@alabel","Enter the IP address or hostname of your printer on the network.")
+                text: catalog.i18nc("@alabel", "Enter the IP address or hostname of your printer on the network.")
                 width: parent.width
                 wrapMode: Text.WordWrap
+                renderType: Text.NativeRendering
             }
 
             TextField

resources/qml/ActionButton.qml

@@ -5,16 +5,20 @@ import QtQuick 2.7
 import QtQuick.Controls 2.1
 import QtGraphicalEffects 1.0 // For the dropshadow
 import UM 1.1 as UM
+import Cura 1.0 as Cura
 
 
 Button
 {
     id: button
-    property alias iconSource: buttonIconLeft.source
     property bool isIconOnRightSide: false
+
+    property alias iconSource: buttonIconLeft.source
     property alias textFont: buttonText.font
     property alias cornerRadius: backgroundRect.radius
     property alias tooltip: tooltip.text
+    property alias cornerSide: backgroundRect.cornerSide
+
     property color color: UM.Theme.getColor("primary")
     property color hoverColor: UM.Theme.getColor("primary_hover")
     property color disabledColor: color
@@ -24,9 +28,9 @@ Button
     property color outlineColor: color
     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.
@@ -35,6 +39,7 @@ Button
     leftPadding: UM.Theme.getSize("default_margin").width
     rightPadding: UM.Theme.getSize("default_margin").width
     height: UM.Theme.getSize("action_button").height
+    hoverEnabled: true
 
     contentItem: Row
     {
@@ -81,9 +86,10 @@ Button
         }
     }
 
-    background: Rectangle
+    background: Cura.RoundedRectangle
     {
         id: backgroundRect
+        cornerSide: Cura.RoundedRectangle.Direction.All
         color: button.enabled ? (button.hovered ? button.hoverColor : button.color) : button.disabledColor
         radius: UM.Theme.getSize("action_button_radius").width
         border.width: UM.Theme.getSize("default_lining").width

resources/qml/ActionPanel/OutputDevicesActionButton.qml

@@ -17,6 +17,7 @@ Item
         id: saveToButton
         height: parent.height
         fixedWidthMode: true
+        cornerSide: deviceSelectionMenu.visible ? Cura.RoundedRectangle.Direction.Left : Cura.RoundedRectangle.Direction.All
 
         anchors
         {
@@ -44,6 +45,7 @@ Item
 
         shadowEnabled: true
         shadowColor: UM.Theme.getColor("primary_shadow")
+        cornerSide: Cura.RoundedRectangle.Direction.Right
 
         anchors
         {

resources/qml/ActionPanel/OutputProcessWidget.qml

@@ -101,16 +101,24 @@ Column
         }
     }
 
-    Row
+    Item
     {
         id: buttonRow
-        spacing: UM.Theme.getSize("default_margin").width
-        width: parent.width
+        anchors.right: parent.right
+        anchors.left: parent.left
+        height: UM.Theme.getSize("action_button").height
 
         Cura.SecondaryButton
         {
             id: previewStageShortcut
 
+            anchors
+            {
+                left: parent.left
+                right: outputDevicesButton.left
+                rightMargin: UM.Theme.getSize("default_margin").width
+            }
+
             height: UM.Theme.getSize("action_button").height
             leftPadding: UM.Theme.getSize("default_margin").width
             rightPadding: UM.Theme.getSize("default_margin").width
@@ -125,6 +133,9 @@ Column
 
         Cura.OutputDevicesActionButton
         {
+            id: outputDevicesButton
+
+            anchors.right: parent.right
             width: previewStageShortcut.visible ? UM.Theme.getSize("action_button").width : parent.width
             height: UM.Theme.getSize("action_button").height
         }

resources/qml/Cura.qml

@@ -88,6 +88,54 @@ UM.MainWindow
             window: base
         }
 
+        Item
+        {
+            id: headerBackground
+            anchors
+            {
+                top: applicationMenu.bottom
+                left: parent.left
+                right: parent.right
+            }
+            height: stageMenu.source != "" ? Math.round(mainWindowHeader.height + stageMenu.height / 2) : mainWindowHeader.height
+
+            LinearGradient
+            {
+                anchors.fill: parent
+                start: Qt.point(0, 0)
+                end: Qt.point(parent.width, 0)
+                gradient: Gradient
+                {
+                    GradientStop
+                    {
+                        position: 0.0
+                        color: UM.Theme.getColor("main_window_header_background")
+                    }
+                    GradientStop
+                    {
+                        position: 0.5
+                        color: UM.Theme.getColor("main_window_header_background_gradient")
+                    }
+                    GradientStop
+                    {
+                        position: 1.0
+                        color: UM.Theme.getColor("main_window_header_background")
+                    }
+                }
+            }
+
+            // This is the new fancy pattern
+            Image
+            {
+                id: backgroundPattern
+                anchors.fill: parent
+                fillMode: Image.Tile
+                source: UM.Theme.getImage("header_pattern")
+                horizontalAlignment: Image.AlignLeft
+                verticalAlignment: Image.AlignTop
+            }
+        }
+
         MainWindowHeader
         {
             id: mainWindowHeader
@@ -144,44 +192,6 @@ UM.MainWindow
                 }
             }
 
-            Rectangle
-            {
-                id: stageMenuBackground
-                anchors
-                {
-                    left: parent.left
-                    right: parent.right
-                    top: parent.top
-                }
-                visible: stageMenu.source != ""
-                height: visible ? Math.round(UM.Theme.getSize("stage_menu").height / 2) : 0
-
-                LinearGradient
-                {
-                    anchors.fill: parent
-                    start: Qt.point(0, 0)
-                    end: Qt.point(parent.width, 0)
-                    gradient: Gradient
-                    {
-                        GradientStop
-                        {
-                            position: 0.0
-                            color: UM.Theme.getColor("main_window_header_background")
-                        }
-                        GradientStop
-                        {
-                            position: 0.5
-                            color: UM.Theme.getColor("main_window_header_background_gradient")
-                        }
-                        GradientStop
-                        {
-                            position: 1.0
-                            color: UM.Theme.getColor("main_window_header_background")
-                        }
-                    }
-                }
-            }
-
             JobSpecs
             {
                 id: jobSpecs
@@ -250,7 +260,8 @@ UM.MainWindow
 
                 anchors
                 {
-                    top: stageMenuBackground.bottom
+                    // Align to the top of the stageMenu since the stageMenu may not exist
+                    top: parent.top
                     left: parent.left
                     right: parent.right
                     bottom: parent.bottom

resources/qml/Dialogs/AboutDialog.qml

@@ -35,9 +35,9 @@ UM.Dialog
     {
         id: logo
         width: (base.minimumWidth * 0.85) | 0
-        height: (width * (1/4.25)) | 0
+        height: (width * (UM.Theme.getSize("logo").height / UM.Theme.getSize("logo").width)) | 0
 
-        source: UM.Theme.getImage("logo")
+        source: UM.Theme.getImage("logo_about")
 
         anchors.top: parent.top
         anchors.topMargin: ((base.minimumWidth - width) / 2) | 0

resources/qml/ExpandableComponent.qml

@@ -32,6 +32,8 @@ Item
     property color headerActiveColor: UM.Theme.getColor("secondary")
     property color headerHoverColor: UM.Theme.getColor("action_button_hovered")
 
+    property alias enabled: mouseArea.enabled
+
     // Defines the alignment of the content with respect of the headerItem, by default to the right
     property int contentAlignment: ExpandableComponent.ContentAlignment.AlignRight
 
@@ -105,10 +107,8 @@ Item
                 verticalCenter: parent.verticalCenter
                 margins: background.padding
             }
-            sourceSize.width: width
-            sourceSize.height: height
             source: UM.Theme.getIcon("pencil")
-            visible: source != ""
+            visible: source != "" && base.enabled
             width: UM.Theme.getSize("standard_arrow").width
             height: UM.Theme.getSize("standard_arrow").height
             color: UM.Theme.getColor("text")

resources/qml/ExpandablePopup.qml

@@ -32,6 +32,8 @@ Item
     property color headerActiveColor: UM.Theme.getColor("secondary")
     property color headerHoverColor: UM.Theme.getColor("action_button_hovered")
 
+    property alias enabled: mouseArea.enabled
+
     // Defines the alignment of the content with respect of the headerItem, by default to the right
     property int contentAlignment: ExpandablePopup.ContentAlignment.AlignRight
 
@@ -125,10 +127,8 @@ Item
                 verticalCenter: parent.verticalCenter
                 margins: background.padding
             }
-            sourceSize.width: width
-            sourceSize.height: height
             source: expanded ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left")
-            visible: source != ""
+            visible: source != "" && base.enabled
             width: UM.Theme.getSize("standard_arrow").width
             height: UM.Theme.getSize("standard_arrow").height
             color: UM.Theme.getColor("text")

resources/qml/MainWindow/MainWindowHeader.qml

@@ -12,38 +12,13 @@ import QtGraphicalEffects 1.0
 
 import "../Account"
 
-Rectangle
+Item
 {
     id: base
 
     implicitHeight: UM.Theme.getSize("main_window_header").height
     implicitWidth: UM.Theme.getSize("main_window_header").width
 
-    LinearGradient
-    {
-        anchors.fill: parent
-        start: Qt.point(0, 0)
-        end: Qt.point(parent.width, 0)
-        gradient: Gradient
-        {
-            GradientStop
-            {
-                position: 0.0
-                color: UM.Theme.getColor("main_window_header_background")
-            }
-            GradientStop
-            {
-                position: 0.5
-                color: UM.Theme.getColor("main_window_header_background_gradient")
-            }
-            GradientStop
-            {
-                position: 1.0
-                color: UM.Theme.getColor("main_window_header_background")
-            }
-        }
-    }
-
     Image
     {
         id: logo