[Styles] Add scale to styles

src/controls/ButtonRow.qml

@@ -36,7 +36,7 @@ Rectangle {
     id: main
     width: childrenRect.width
     color: "#313131"
-    height: 40
+    height: 4*mm
     property ListModel model: ListModel {}
     property bool enabled: true
     property int currentIndex: -1
@@ -51,10 +51,10 @@ Rectangle {
     Rectangle{
         id: selecter
         x: rowElement.children[main.currentIndex].x || 0
-        y: -5
+        y: -0.5*mm
 
         width: rowElement.children[main.currentIndex].width || 0
-        height: 50
+        height: 5*mm
         color: "#0091e5"
 
         visible: main.currentIndex > -1
@@ -74,10 +74,10 @@ Rectangle {
             model: main.model
             delegate: Rectangle {
                 id: rowItem
-                height: 50
+                height: 5*mm
                 width: text.width+(text.width/name.length*2)
 
-                y: -5
+                y: -0.5*mm
 
                 color: "transparent"
                 MouseArea {

src/styles/ButtonStyle.qml

@@ -30,8 +30,8 @@ ButtonStyle {
 
     // The background of the button.
     background: Rectangle {
-        implicitWidth: 240
-        implicitHeight: 50
+        implicitWidth: 24*mm
+        implicitHeight: 5*mm
         clip: true
         color: control.primary ? Theme.primaryButton.background
                                : Theme.button.background

src/styles/CheckBoxStyle.qml

@@ -39,21 +39,21 @@ CheckBoxStyle {
     indicator: Rectangle {
             id: background
             color: "transparent"
-            implicitWidth: 72
-            implicitHeight: 32
+            implicitWidth: 7.2*mm
+            implicitHeight: 3.2*mm
 
             Rectangle {
                 id: back1
-                implicitWidth: 72
-                implicitHeight: 28
+                implicitWidth: 7.2*mm
+                implicitHeight: 2.8*mm
                 color: Theme.checkbox.back1
                 anchors.centerIn: parent
             }
 
             Rectangle {
                 id: back2
-                implicitWidth: 72
-                implicitHeight: 28
+                implicitWidth: 7.2*mm
+                implicitHeight: 2.8*mm
                 color: Theme.checkbox.back2
                 anchors.centerIn: parent
             }
@@ -80,7 +80,7 @@ CheckBoxStyle {
             Component.onCompleted: {
                 back1.opacity = control.checked ? 1 : 0
                 back2.opacity = control.checked ? 0 : 1
-                ball.x = control.checked ? 32 : 0
+                ball.x = control.checked ? 3.2*mm : 0
             }
 
             SequentialAnimation {
@@ -89,7 +89,7 @@ CheckBoxStyle {
                 NumberAnimation {
                     target: ball
                     property: "x"
-                    to: 32
+                    to: 3.2*mm
                     duration: 120
                 }
                 NumberAnimation {

src/styles/GrooveStyle.qml

@@ -22,8 +22,8 @@ import QtQuick.Controls.Styles.Nemo 1.0
 
 Component {
     Rectangle {
-        implicitHeight: 16
-        implicitWidth: 440
+        implicitHeight: 1.6*mm
+        implicitWidth: 44*mm
         color: Theme.groove.background
         Rectangle {
             antialiasing: true

src/styles/MenuBarStyle.qml

@@ -59,8 +59,8 @@ Style {
     }
 
     property Component menuItem: Rectangle {
-        width: text.width + 12
-        height: text.height + 4
+        width: text.width + 1.2*mm
+        height: text.height + 0.4*mm
         color: sunken ? "#49d" :__backgroundColor
 
         SystemPalette { id: syspal }

src/styles/SliderStyle.qml

@@ -29,9 +29,9 @@ SliderStyle{
         color: "black"
         border.color: "#0091e5"
         border.width: 2
-        implicitWidth: 34
-        implicitHeight: 34
-        radius: 16
+        implicitWidth: 3.4*mm
+        implicitHeight: 3.4*mm
+        radius: 1.6*mm
         visible: control.enabled
 
         Text{
@@ -46,8 +46,8 @@ SliderStyle{
     groove: Rectangle{
         id: grove
 
-        implicitHeight: 16
-        implicitWidth: 440
+        implicitHeight: 1.6*mm
+        implicitWidth: 44*mm
         color: "#313131"
         z: 1
         Rectangle{
@@ -72,9 +72,9 @@ SliderStyle{
                 verticalCenter: dataLine.verticalCenter
             }
             source: "images/slider-handle-left.svg"
-            height: 34
+            height: 3.4*mm
             visible: control.enabled
-            width: (styleData.handlePosition > 80) ? 80 : styleData.handlePosition
+            width: (styleData.handlePosition > 8*mm) ? 8*mm : styleData.handlePosition
             sourceSize.width: width
             sourceSize.height: height
         }

src/styles/TextFieldStyle.qml

@@ -25,11 +25,11 @@ TextFieldStyle {
     selectedTextColor: Theme.textField.selectedTextColor
     selectionColor: Theme.textField.selectionColor
     textColor: Theme.textField.selectedTextColor
-    font.pointSize: 14 
+    font.pointSize: 1.4*mm
     font.family: Theme.textField.font
     background: Item {
-        anchors.leftMargin: 16
-        anchors.rightMargin: 16
+        anchors.leftMargin: 1.6*mm
+        anchors.rightMargin: 1.6*mm
         opacity: control.enabled ? 1 : 0.6
         Image {
             anchors.fill: parent

src/styles/ToolBarStyle.qml

@@ -28,8 +28,8 @@ Style {
     padding.bottom: 3
 
     property Component panel: Item {
-        implicitHeight: 75
-        implicitWidth: 400
+        implicitHeight: 7.5*mm
+        implicitWidth: 40*mm
         Rectangle {
             anchors.fill: parent
             color: Theme.toolBar.background

src/styles/ToolButtonStyle.qml

@@ -31,8 +31,8 @@ Style {
         id: styleitem
 
         //TODO: Maybe we want to add a descriptive text at the bottom of the icon?
-        implicitWidth: 50
-        implicitHeight: 50
+        implicitWidth: 5*mm
+        implicitHeight: 5*mm
 
         opacity: control.pressed ? 0.5 : 1
 
@@ -47,7 +47,7 @@ Style {
             id: icon
             anchors.fill: parent
             fillMode: Image.PreserveAspectFit
-            anchors.margins: 8
+            anchors.margins: 0.8*mm
             source: control.iconSource
         }
     }