Make some tweaks in the UI for the preview stage.

Clean up the default theme a bit by removing unused entries.

Contributes to CURA-5829.

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/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

@@ -915,47 +915,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

@@ -131,11 +131,11 @@
         "button_disabled": [31, 36, 39, 255],
         "button_disabled_text": [255, 255, 255, 101],
 
-        "small_button": [31, 36, 39, 0],
-        "small_button_hover": [68, 72, 75, 255],
-        "small_button_active": [68, 72, 75, 255],
-        "small_button_active_hover": [68, 72, 75, 255],
-        "small_button_text": [31, 36, 39, 197],
+        "small_button": [0, 0, 0, 0],
+        "small_button_hover": [10, 8, 80, 255],
+        "small_button_active": [10, 8, 80, 255],
+        "small_button_active_hover": [10, 8, 80, 255],
+        "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 +215,11 @@
         "progressbar_background": [245, 245, 245, 255],
         "progressbar_control": [50, 130, 255, 255],
 
-        "slider_groove": [245, 245, 245, 255],
-        "slider_groove_border": [127, 127, 127, 255],
-        "slider_groove_fill": [127, 127, 127, 255],
-        "slider_handle": [0, 0, 0, 255],
+        "slider_groove": [223, 223, 223, 255],
+        "slider_groove_fill": [10, 8, 80, 255],
+        "slider_handle": [10, 8, 80, 255],
         "slider_handle_hover": [77, 182, 226, 255],
-        "slider_handle_active": [68, 192, 255, 255],
-        "slider_handle_border": [39, 44, 48, 255],
+        "slider_handle_active": [50, 130, 255, 255],
         "slider_text_background": [255, 255, 255, 255],
 
         "quality_slider_unavailable": [179, 179, 179, 255],
@@ -449,17 +447,12 @@
 
         "scrollbar": [0.75, 0.5],
 
-        "quality_slider_bar": [1, 0.2],
-
-        "slider_groove": [0.3, 0.3],
-        "slider_handle": [1.0, 1.0],
-        "slider_layerview_size": [1.0, 22.0],
-        "slider_layerview_background": [4.0, 0.0],
-        "slider_layerview_margin": [1.0, 1.5],
+        "slider_groove": [0.5, 0.5],
+        "slider_groove_radius": [0.15, 0.15],
+        "slider_handle": [1.5, 1.5],
+        "slider_layerview_size": [1.0, 26.0],
 
         "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],