Merge pull request #5172 from Ultimaker/resize_bar_ui_changes

Change the style of the resize bar

resources/qml/PrintSetupSelector/PrintSetupSelectorContents.qml

@@ -109,7 +109,7 @@ Item
     {
         id: buttonRow
         property real padding: UM.Theme.getSize("default_margin").width
-        height: childrenRect.height + 2 * padding
+        height: recommendedButton.height + 2 * padding + (draggableArea.visible ? draggableArea.height : 0)
 
         anchors
         {
@@ -149,14 +149,14 @@ Item
         //Invisible area at the bottom with which you can resize the panel.
         MouseArea
         {
+            id: draggableArea
             anchors
             {
                 left: parent.left
                 right: parent.right
                 bottom: parent.bottom
-                top: recommendedButton.bottom
-                topMargin: UM.Theme.getSize("default_lining").height
             }
+            height: childrenRect.height
             cursorShape: Qt.SplitVCursor
             visible: currentModeIndex == PrintSetupSelectorContents.Mode.Custom
             drag
@@ -187,15 +187,29 @@ Item
                 }
             }
 
-            UM.RecolorImage
+            Rectangle
             {
-                width: parent.width * 0.05
+                width: parent.width
-                height: parent.height * 0.3
+                height: UM.Theme.getSize("narrow_margin").height
+                color: UM.Theme.getColor("secondary")
 
-                anchors.centerIn: parent
+                Rectangle
+                {
+                    anchors.bottom: parent.top
+                    width: parent.width
+                    height: UM.Theme.getSize("default_lining").height
+                    color: UM.Theme.getColor("lining")
+                }
 
-                source: UM.Theme.getIcon("grip_lines")
+                UM.RecolorImage
-                color: UM.Theme.getColor("lining")
+                {
+                    width: UM.Theme.getSize("drag_icon").width
+                    height: UM.Theme.getSize("drag_icon").height
+                    anchors.centerIn: parent
+
+                    source: UM.Theme.getIcon("resize")
+                    color: UM.Theme.getColor("small_button_text")
+                }
             }
         }
     }

resources/themes/cura-light/icons/grip_lines.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 6">
-    <rect width="30" height="2" rx="1" ry="1" />
-    <rect width="30" height="2" rx="1" ry="1" y="4" />
-</svg>

resources/themes/cura-light/icons/resize.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="17px" height="3px" viewBox="0 0 17 3" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
+    <title>Group</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Print-settings" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="1024_custom--1-ex-copy" transform="translate(-773.000000, -643.000000)" fill="#999999">
+            <g id="Group" transform="translate(773.000000, 643.000000)">
+                <circle id="Oval" cx="1.5" cy="1.5" r="1.5"></circle>
+                <circle id="Oval-Copy" cx="8.5" cy="1.5" r="1.5"></circle>
+                <circle id="Oval-Copy-2" cx="15.5" cy="1.5" r="1.5"></circle>
+            </g>
+        </g>
+    </g>
+</svg>

resources/themes/cura-light/theme.json

@@ -442,6 +442,7 @@
         "print_setup_slider_tickmarks": [0.32, 0.32],
         "print_setup_big_item": [28, 2.5],
         "print_setup_icon": [1.2, 1.2],
+        "drag_icon": [1.416, 0.25],
 
         "expandable_component_content_header": [0.0, 3.0],