From 0d54855937e6e1e272d7acfd686ff796fc8c2a57 Mon Sep 17 00:00:00 2001
From: Arjen Hiemstra <ahiemstra@heimr.nl>
Date: Thu, 2 Apr 2015 11:16:54 +0200
Subject: [PATCH] Update simple mode UI to new styling

---
 qml/SidebarSimple.qml | 108 +++++++++++++++++++++++++++++++++++++-----
 1 file changed, 96 insertions(+), 12 deletions(-)

diff --git a/qml/SidebarSimple.qml b/qml/SidebarSimple.qml
index 53864c8a88..4a07903b5a 100644
--- a/qml/SidebarSimple.qml
+++ b/qml/SidebarSimple.qml
@@ -13,30 +13,114 @@ Item {
     ColumnLayout {
         anchors.fill: parent;
 
-        RowLayout {
+        Item {
             Layout.fillWidth: true;
+            Layout.preferredHeight: UM.Theme.sizes.section.height;
 
-            Label { text: "00:00"; }
-            Item { Layout.fillWidth: true; }
-            Label { text: "Estimated Print Time"; }
-            Item { Layout.fillWidth: true; }
-            Label { text: "21:00"; }
+            Label {
+                anchors.left: parent.left;
+                anchors.verticalCenter: parent.verticalCenter;
+                text: "00:00";
+                font: UM.Theme.fonts.timeslider_time;
+                color: UM.Theme.colors.primary;
+            }
+            Label { anchors.centerIn: parent; text: "Estimated Print Time"; color: UM.Theme.colors.text; }
+            Label {
+                anchors.right: parent.right;
+                anchors.verticalCenter: parent.verticalCenter;
+                text: "21:00";
+                font: UM.Theme.fonts.timeslider_time;
+                color: UM.Theme.colors.primary;
+            }
         }
 
         Slider {
             Layout.fillWidth: true;
+            Layout.preferredHeight: UM.Theme.sizes.section.height;
 
-            style: SliderStyle { }
+            minimumValue: 0;
+            maximumValue: 100;
+
+            style: SliderStyle {
+                groove: Rectangle {
+                    implicitWidth: control.width;
+                    implicitHeight: UM.Theme.sizes.slider_groove.height;
+
+                    color: UM.Theme.colors.slider_groove;
+                    border.width: 1;
+                    border.color: UM.Theme.colors.slider_groove_border;
+
+                    Rectangle {
+                        anchors {
+                            left: parent.left;
+                            top: parent.top;
+                            bottom: parent.bottom;
+                        }
+                        color: UM.Theme.colors.slider_groove_fill;
+                        width: (control.value / (control.maximumValue - control.minimumValue)) * parent.width;
+                    }
+                }
+                handle: Rectangle {
+                    width: UM.Theme.sizes.slider_handle.width;
+                    height: UM.Theme.sizes.slider_handle.height;
+                    color: UM.Theme.colors.slider_handle;
+                }
+            }
         }
 
-        RowLayout {
+        Item {
             Layout.fillWidth: true;
-            Label { text: "Minimum"; }
-            Item { Layout.fillWidth: true; }
-            Label { text: "Maximum"; }
+            Layout.preferredHeight: UM.Theme.sizes.section.height;
+
+            Label {
+                anchors.left: parent.left;
+                anchors.verticalCenter: parent.verticalCenter;
+                text: "Minimum\nDraft";
+                color: UM.Theme.colors.text;
+            }
+
+            Label {
+                anchors.right: parent.right;
+                anchors.verticalCenter: parent.verticalCenter;
+                text: "Maximum\nQuality";
+                horizontalAlignment: Text.AlignRight;
+                color: UM.Theme.colors.text;
+            }
         }
 
-        CheckBox { text: "Auto Support"; style: CheckBoxStyle { } }
+        CheckBox {
+            Layout.fillWidth: true;
+            Layout.preferredHeight: UM.Theme.sizes.section.height;
+
+            text: "Enable Support";
+
+            style: CheckBoxStyle {
+                background: Item { }
+                indicator: Rectangle {
+                    implicitWidth:  UM.Theme.sizes.checkbox.width;
+                    implicitHeight: UM.Theme.sizes.checkbox.height;
+
+                    color: control.hovered ? UM.Theme.colors.checkbox_hover : UM.Theme.colors.checkbox;
+                    border.width: 1
+                    border.color: UM.Theme.colors.checkbox_border;
+
+                    Label {
+                        anchors.centerIn: parent;
+                        color: UM.Theme.colors.checkbox_mark;
+//                         font: itemStyle.controlFont;
+
+                        text: "✓";
+
+                        opacity: control.checked ? 1 : 0;
+                        Behavior on opacity { NumberAnimation { duration: 100; } }
+                    }
+                }
+                label: Label {
+                    text: control.text;
+                    color: UM.Theme.colors.checkbox_text;
+                }
+            }
+        }
 
         Item { Layout.fillWidth: true; Layout.fillHeight: true; }
     }