[Controls] Use Theme.sizes in controls for correct scaling. Fixes to make...

[Controls] Use Theme.sizes in controls for correct scaling. Fixes to make controls according to spec

examples/touch/content/ListViewPage.qml

@@ -6,7 +6,7 @@ import QtQuick.Controls.Styles.Nemo 1.0
 Page {
     id: listViewPage
 
-    headerTools: HeaderToolsLayout { showBackButton: false; title: "MediumListView" }
+    headerTools: HeaderToolsLayout { showBackButton: true; title: "MediumListView" }
 
 
     ListModel {
@@ -36,6 +36,7 @@ Page {
         delegate: ListViewItemWithActions {
             label: name
             description: desc
+            showNext: false
         }
         section.property: "size"
     }

examples/touch/content/QueryDialogPage.qml

@@ -43,6 +43,7 @@ Page {
         cancelText: "Cancel"
         acceptText: "Delete"
         headingText: "Are you sure you want to delete this?"
+        subLabelText: "Continue?"
         onAccepted: {
             result.text = "User accepted"
         }

examples/touch/content/SelectRollerPage.qml

@@ -10,11 +10,11 @@ Page {
     allowedOrientations: Qt.PortraitOrientation | Qt.LandscapeOrientation | Qt.InvertedLandscapeOrientation | Qt.InvertedPortraitOrientation
 
     Column {
-        spacing: 40
+        spacing: Theme.itemSpacingHuge
         width: parent.width
         anchors{
             top: parent.top
-            topMargin: 40
+            topMargin: Theme.itemSpacingHuge
         }
 
         ListModel {
@@ -46,9 +46,10 @@ Page {
             delegate: GlacierRollerItem{
                 Text{
                     height: simpleRoller.itemHeight
+                    verticalAlignment: Text.AlignVCenter
                     text: name
-                    color: "white"
-                    font.pixelSize: 32
+                    color: Theme.textColor
+                    font.pixelSize: Theme.fontSizeMedium
                     font.bold: (simpleRoller.activated && simpleRoller.currentIndex === index)
                 }
             }
@@ -65,9 +66,10 @@ Page {
             delegate: GlacierRollerItem{
                 Text{
                     height: simpleRoller2.itemHeight
+                    verticalAlignment: Text.AlignVCenter
                     text: name
-                    color: "white"
-                    font.pixelSize: 32
+                    color: Theme.textColor
+                    font.pixelSize: Theme.fontSizeMedium
                     font.bold: (simpleRoller2.activated && simpleRoller2.currentIndex === index)
                 }
             }

examples/touch/content/TabBarPage.qml

@@ -51,7 +51,7 @@ Page {
     TabView {
         anchors.fill: parent
 
-        style: touchStyle
+        style: TabViewStyle { }
         Tab {
             title: "Buttons"
             ButtonPage{ visible: true }
@@ -65,37 +65,4 @@ Page {
             ProgressBarPage{ visible: true }
         }
     }
-
-    Component {
-        id: touchStyle
-        TabViewStyle {
-            tabsAlignment: Qt.AlignVCenter
-            tabOverlap: 0
-            frame: Item { }
-            tab: Item {
-                implicitWidth: control.width/control.count
-                implicitHeight: size.dp(50)
-                BorderImage {
-                    anchors.fill: parent
-                    border.bottom: size.dp(8)
-                    border.top: size.dp(8)
-                    source: styleData.selected ? "/usr/share/glacier-components/images/tab_selected.png":"/usr/share/glacier-components/images/tabs_standard.png"
-                    Text {
-                        anchors.centerIn: parent
-                        color: "white"
-                        text: styleData.title.toUpperCase()
-                        font.pixelSize: size.dp(16)
-                    }
-                    Rectangle {
-                        visible: index > 0
-                        anchors.top: parent.top
-                        anchors.bottom: parent.bottom
-                        anchors.margins: size.dp(10)
-                        width:1
-                        color: "#3a3a3a"
-                    }
-                }
-            }
-        }
-    }
 }

examples/touch/content/TextInputPage.qml

@@ -65,34 +65,34 @@ Page {
     headerTools: HeaderToolsLayout { showBackButton: true; title: "Text input" }
 
     Column {
-        spacing: size.dp(40)
+        spacing:Theme.itemSpacingHuge
         anchors.centerIn: parent
 
         TextField {
-            anchors.margins: size.dp(20)
+            anchors.margins: Theme.itemSpacingLarge
             text: "Text input"
         }
 
         TextField {
-            anchors.margins: size.dp(20)
+            anchors.margins: Theme.itemSpacingLarge
             text: "Readonly Text input"
             readOnly: true
         }
 
         TextField {
-            anchors.margins: size.dp(20)
+            anchors.margins: Theme.itemSpacingLarge
             text: "Disabled textfield"
             enabled: false
         }
 
         TextField {
-            anchors.margins: size.dp(20)
+            anchors.margins: Theme.itemSpacingLarge
             text: "Text input"
             style: touchStyle
         }
 
         TextField {
-            anchors.margins: size.dp(20)
+            anchors.margins: Theme.itemSpacingLarge
             text: "Readonly Text input"
             style: touchStyle
             readOnly: true
@@ -104,15 +104,15 @@ Page {
         id: touchStyle
 
         TextFieldStyle {
-            textColor: "white"
-            font.pixelSize: size.dp(28)
+            textColor: Theme.textColor
+            font.pixelSize: Theme.fontSizeMedium
             background: Item {
-                implicitHeight: size.dp(50)
-                implicitWidth: size.dp(320)
+                implicitHeight: Theme.itemHeightMedium
+                implicitWidth: Theme.itemWidthLarge
                 BorderImage {
                     source: "/usr/share/glacier-components/images/textinput.png"
-                    border.left: size.dp(8)
-                    border.right: size.dp(8)
+                    border.left: Theme.itemSpacingExtraSmall
+                    border.right: Theme.itemSpacingExtraSmall
                     anchors.bottom: parent.bottom
                     anchors.left: parent.left
                     anchors.right: parent.right

src/controls/ButtonRow.qml

@@ -52,10 +52,10 @@ Rectangle {
     Rectangle{
         id: selecter
         x: rowElement.children[main.currentIndex].x || 0
-        y: size.dp(-5)
+        anchors.verticalCenter: rowElement.verticalCenter
 
         width: rowElement.children[main.currentIndex].width || 0
-        height: Theme.itemHeightSmall
+        height: Theme.itemHeightMedium
         color: Theme.accentColor
 
         visible: main.currentIndex > -1
@@ -75,7 +75,7 @@ Rectangle {
             model: main.model
             delegate: Rectangle {
                 id: rowItem
-                height: size.dp(40)
+                height: Theme.itemHeightSmall
                 width: text.width+(text.width/name.length*2)
 
                 color: "transparent"
@@ -93,13 +93,14 @@ Rectangle {
                     id: text
                     text: name
                     height: parent.heigh
-
-                    anchors.horizontalCenter: parent.horizontalCenter
+                    elide:Text.ElideNone
+                    anchors.centerIn: parent
 
                     Component.onCompleted: {
                         width = paintedWidth
                     }
-                    font.bold: main.currentIndex == index
+                    font.weight: main.currentIndex == index ? Theme.fontWeightLarge : Theme.fontWeightMedium
+
                 }
             }
         }

src/controls/GlacierRoller.qml

@@ -17,13 +17,12 @@ Item {
     width: parent.width
     height: childrenRect.height
 
-    Text{
+    Label{
         id: label
         visible: label.text != ""
-        font.capitalization: Font.AllUppercase
-        font.pixelSize: size.dp(14)
-        color: "white"
-
+        font.pixelSize: Theme.fontSizeSmall
+        color: Theme.textColor
+        width: parent.width - anchors.leftMargin
         anchors{
             top: parent.top
             left: parent.left
@@ -33,37 +32,37 @@ Item {
 
     Rectangle{
         id: topLine
-        width: view.width
-        height: 1
-        color: "white"
+        width: parent.width
+        height: size.ratio(1)
+        color: Theme.backgroundAccentColor
         anchors.top: view.top
         z: 2
     }
 
     Rectangle{
         id: bottomLine
-        width: view.width
-        height: 3
-        color: "white"
+        width: parent.width
+        height: size.ratio(3)
+        color: Theme.backgroundAccentColor
         anchors.bottom: view.bottom
         z: 2
     }
 
     PathView{
         id: view
-        property int itemHeight: size.dp(40)
+        property int itemHeight: Theme.itemHeightLarge
         property bool showRow: false
 
         interactive: activated
-        width: parent.width-size.dp(60)
-        height: size.dp(40)
+        width: parent.width-Theme.itemWidthSmall
+        height: Theme.itemHeightMedium
         clip: true
 
         anchors{
-            top: label.top
-            topMargin: size.dp(20)
+            top: label.bottom
+            topMargin:Theme.itemSpacingLarge
             left: label.left
-            leftMargin: size.dp(30)
+            leftMargin:Theme.itemSpacingLarge + Theme.itemSpacingSmall
         }
 
         pathItemCount: height/itemHeight
@@ -116,16 +115,16 @@ Item {
 
     ParallelAnimation {
         id: activateAnimations
-        NumberAnimation{target: bottomLine; property: "opacity"; to: 1; duration: 250}
-        NumberAnimation{target: topLine; property: "opacity"; to: 1; duration: 250}
-        NumberAnimation{target: view; property: "height"; to: itemHeight*activateSize; duration: 250}
+        NumberAnimation{target: bottomLine; property: "opacity"; to: 1; duration: 150}
+        NumberAnimation{target: topLine; property: "opacity"; to: 1; duration: 150}
+        NumberAnimation{target: view; property: "height"; to: itemHeight*activateSize; duration: 150}
     }
 
     ParallelAnimation {
         id: deActivateAnimations
-        NumberAnimation{target: bottomLine; property: "opacity"; to: 0; duration: 250}
-        NumberAnimation{target: topLine; property: "opacity"; to: 0; duration: 250}
-        NumberAnimation{target: view; property: "height"; to: itemHeight; duration: 250}
+        NumberAnimation{target: bottomLine; property: "opacity"; to: 0; duration: 150}
+        NumberAnimation{target: topLine; property: "opacity"; to: 0; duration: 150}
+        NumberAnimation{target: view; property: "height"; to: itemHeight; duration: 150}
         onStopped: {
             view.showRow = true
         }

src/controls/GlacierRollerItem.qml

@@ -14,21 +14,20 @@ Rectangle{
         width: childrenRect.width
         height: parent.height
         color: "transparent"
+        anchors.verticalCenter: glacierRollerItem.verticalCenter
     }
 
     Image{
         id: arrowDown
         source: "images/glacierroller-icon-arrow-down.svg"
-        width: glacierRollerItem.height/4
-        height: width
-
+        height: parent.height / 3
         sourceSize.width: width
         sourceSize.height: height
 
         visible: glacierRollerItem.parent.showRow
-
+        fillMode: Image.PreserveAspectFit
         anchors{
-            verticalCenter: dataLine.verticalCenter
+            verticalCenter: glacierRollerItem.verticalCenter
             left: dataLine.right
             leftMargin: width
         }
@@ -42,7 +41,7 @@ Rectangle{
     }
 
     MouseArea{
-        anchors.fill: dataLine
+        anchors.fill: parent
         onClicked: {
             if(!glacierRollerItem.parent.parent.activated)
             {

src/controls/Header.qml

@@ -62,7 +62,7 @@ Item {
             PropertyChanges {
                 target: toolBarRect
                 width: parent.width
-                height: Theme.itemHeightExtraLarge
+                height: Theme.itemHeightLarge
             }
         },
         State {
@@ -91,7 +91,7 @@ Item {
             }
             PropertyChanges {
                 target: toolBarRect
-                width: Theme.itemHeightExtraLarge
+                width: Theme.itemHeightLarge
                 height: parent.height
             }
         }

src/controls/HeaderToolsLayout.qml

@@ -22,17 +22,17 @@ Item {
     property bool isUiPortrait: header && header.appWindow.isUiPortrait
 
     property bool showBackButton: false
-    property int toolMeasure: parent.width/10
+    property int toolMeasure: Theme.itemHeightSmall
     height: toolMeasure
     Rectangle {
         id: backButton
-        width: opacity ? size.dp(60) : 0
+        width: opacity ? Theme.itemHeightHuge : 0
         anchors.leftMargin: Theme.itemSpacingLarge
         //check if Stack.view has already been initialized as well
         anchors.verticalCenter: parent.verticalCenter
         antialiasing: true
         height: width
-        radius: size.dp(4)
+        radius: Theme.itemSpacingExtraSmall / 2
         color: backmouse.pressed ? "#222" : "transparent"
 
         rotation: isUiPortrait ? 0 : 90
@@ -41,6 +41,11 @@ Item {
 
         Image {
             anchors.centerIn: parent
+            height: toolMeasure
+            width: height
+            fillMode: Image.PreserveAspectFit
+            sourceSize.width: width
+            sourceSize.height: height
             source: "/usr/lib/qt5/qml/QtQuick/Controls/Styles/Nemo/images/icon-triangle-left.png"
         }
 
@@ -68,7 +73,7 @@ Item {
         font.weight: Font.Bold
         LinearGradient {
             anchors.right: parent.right
-            width: size.dp(50)
+            width: Theme.itemHeightMedium
             height: parent.paintedHeight
             visible: titleTxt.paintedWidth >  titleTxt.width
             start: Qt.point(0,0)
@@ -82,9 +87,9 @@ Item {
     Item {
         id: toolButtonsContainer
         anchors.right: dots.visible ? dots.left : parent.right
-        anchors.rightMargin: size.dp(20)
+        anchors.rightMargin: Theme.itemSpacingLarge
         anchors.verticalCenter: parent.verticalCenter
-        width: tools ? (size.dp(50) * Math.min(maxNumberOfToolButtons, tools.length)) : 0
+        width: tools ? (Theme.itemHeightMedium * Math.min(maxNumberOfToolButtons, tools.length)) : 0
         property int maxNumberOfToolButtons: 3
 
         RowLayout {
@@ -113,6 +118,9 @@ Item {
             rightMargin: Theme.itemSpacingLarge
             verticalCenter: parent.verticalCenter
         }
+        fillMode: Image.PreserveAspectFit
+        height: toolMeasure
+        sourceSize.height: height
         visible: drawerLevels && drawerLevels.length > 1
         source: "/usr/lib/qt5/qml/QtQuick/Controls/Styles/Nemo/images/dots-vertical.png"
         rotation: isUiPortrait ? 0 : 90

src/controls/Label.qml

@@ -36,4 +36,5 @@ Text {
     font.family: Theme.fontFamily
     color: Theme.textColor
     font.pixelSize: Theme.fontSizeMedium
+    elide: horizontalAlignment == Text.AlignLeft ? Text.ElideRight : (horizontalAlignment == Text.AlignRight ? Text.ElideLeft : Text.ElideMiddle)
 }

src/controls/ListView.qml

@@ -18,7 +18,7 @@ ListView {
         id: sectionHeading
         Rectangle {
             width: listView.width
-            height: size.dp(44)
+            height: Theme.itemHeightMedium
             color: delegateColor
 
             Text {
@@ -36,9 +36,9 @@ ListView {
 
             Rectangle{
                 id: line
-                height: 1
+                height: size.ratio(1)
                 color: Theme.textColor
-                width: listView.width-sectionText.width-size.dp(30)
+                width: listView.width-sectionText.width-Theme.itemHeightExtraSmall
                 anchors{
                     left: sectionText.right
                     leftMargin: Theme.itemSpacingSmall
@@ -51,7 +51,7 @@ ListView {
     Item{
         id: bottom
         width: parent.width
-        height: size.dp(30)
+        height: Theme.itemHeightExtraSmall
         anchors.bottom: parent.bottom
 
         visible: listView.contentHeight > listView.height
@@ -59,7 +59,7 @@ ListView {
         LinearGradient{
             anchors.fill: parent
             start: Qt.point(0, 0)
-            end: Qt.point(0, size.dp(30))
+            end: Qt.point(0, Theme.itemHeightExtraSmall)
             gradient: Gradient {
                 GradientStop { position: 0.0; color: "transparent" }
                 GradientStop { position: 1.0; color: bottomGradientColor }
@@ -73,13 +73,13 @@ ListView {
         visible: (listView.showDecorator && listView.contentHeight > listView.height)
         color: scrollerDecoratorColor
 
-        width: size.dp(5)
+        width: Theme.itemSpacingExtraSmall
         height: listView.height*listView.height/listView.contentHeight
         y: (listView.height)/listView.contentHeight*listView.contentY
 
         anchors{
             right: listView.right
-            rightMargin: size.dp(4)
+            rightMargin: Theme.itemSpacingExtraSmall / 2
         }
     }
 }

src/controls/ListViewItemWithActions.qml

@@ -6,7 +6,7 @@ import QtGraphicalEffects 1.0
 Item {
     id: root
     width: parent.width
-    height: size.dp(60)
+    height: Theme.itemHeightLarge
 
     property string label: ""
 
@@ -15,6 +15,7 @@ Item {
     property string icon: ""
 
     property bool showNext: true
+    property bool iconVisible: true
 
     property alias actions: actionsLoader.sourceComponent
 
@@ -65,36 +66,35 @@ Item {
 
         Image{
             id: itemIcon
-            height: parent.height-size.dp(10)
+            height: iconVisible ? parent.height-Theme.itemSpacingSmall : 0
             width: height
             anchors{
                 left: parent.left
                 leftMargin: Theme.itemSpacingLarge
-                top: parent.top
-                topMargin: size.dp(5)
+                verticalCenter:parent.verticalCenter
             }
 
             sourceSize.width: width
             sourceSize.height: height
-
-            source: (icon != "") ? icon : "images/listview-icon-template-s.svg"
+            visible: iconVisible
+            source: (icon != "") ? icon : iconVisible ? "images/listview-icon-template-s.svg" : ""
             fillMode: Image.PreserveAspectFit
         }
 
         Rectangle{
             id: dataArea
-            width: parent.width-itemIcon.width-arrowItem.width-size.dp(60)
+            width: parent.width-itemIcon.width-Theme.itemHeightLarge - (showNext ? arrowItem.width : 0)
             height: labelItem.height+(description != "" ? descriptionItem.height : 0)+(subdescription != "" ? subDescriptionItem.height : 0)
             clip: true
 
             anchors{
-                left:itemIcon.right
+                left: iconVisible ? itemIcon.right : parent.left
                 leftMargin: Theme.itemSpacingLarge
-                verticalCenter: itemIcon.verticalCenter
+                verticalCenter: iconVisible ? itemIcon.verticalCenter : parent.verticalCenter
             }
             color: "transparent"
 
-            Text {
+            Label {
                 id: labelItem
                 color: Theme.textColor
                 text: label
@@ -102,11 +102,11 @@ Item {
                     left: parent.left
                     right: parent.right
                 }
-                font.pixelSize: size.dp(30)
+                font.pixelSize: Theme.fontSizeMedium
                 clip: true
             }
 
-            Text{
+            Label {
                 id: descriptionItem
                 color: Theme.textColor
                 text: description
@@ -115,12 +115,12 @@ Item {
                     right: parent.right
                     top: labelItem.bottom
                 }
-                font.pixelSize: Theme.fontSizeSmall
+                font.pixelSize: Theme.fontSizeTiny
                 clip: true
                 visible: description != ""
             }
 
-            Text{
+            Label {
                 id: subDescriptionItem
                 color: Theme.textColor
                 text: subdescription
@@ -129,23 +129,23 @@ Item {
                     right: parent.right
                     top: descriptionItem.bottom
                 }
-                font.pixelSize: Theme.fontSizeSmall
+                font.pixelSize: Theme.fontSizeTiny
                 clip: true
                 visible: subdescription != ""
             }
 
             Item{
-                width: size.dp(15)
+                width: Theme.itemHeightExtraSmall / 2
                 height: parent.height
                 anchors{
                     top: parent.top
                     right: parent.right
                 }
-                visible: !mouse.pressed
+                visible: showNext ? !mouse.pressed : false
                 LinearGradient{
                     anchors.fill: parent
                     start: Qt.point(0, 0)
-                    end: Qt.point(size.dp(15), 0)
+                    end: Qt.point( Theme.itemHeightExtraSmall / 2, 0)
                     gradient: Gradient {
                         GradientStop { position: 0.0; color: "transparent" }
                         GradientStop { position: 1.0; color: "black" }
@@ -156,7 +156,7 @@ Item {
 
         Image {
             id: arrowItem
-            height: parent.height-size.dp(10)
+            height: parent.height- Theme.itemSpacingSmall
             width: height
 
             anchors{

src/controls/QueryDialog.qml

 import QtQuick 2.6
 
-Rectangle {
+Item {
     id: shell
     anchors.fill: parent
-    opacity: 0.7
-    color: Theme.backgroundColor
     signal accepted()
     signal canceled()
     property alias cancelText: cancel.text
     property alias acceptText: accept.text
     property alias headingText: heading.text
+    property alias subLabelText: subLabel.text
 
+
+    Rectangle {
+        anchors.fill: parent
+        opacity: 0.65
+        color: Theme.backgroundColor
+
+    }
     Label {
         width: parent.width*0.8
         id: heading
         anchors.centerIn: parent
+        horizontalAlignment: Text.AlignHCenter
+        font.weight: Theme.fontWeightLarge
         wrapMode: Text.Wrap
     }
+    Label {
+         id:subLabel
+         width: parent.width*0.8
+         wrapMode: Text.Wrap
+         font.weight: Theme.fontWeightMedium
+         horizontalAlignment: Text.AlignHCenter
+         anchors {
+             top:heading.bottom
+             topMargin: Theme.itemSpacingLarge
+             horizontalCenter: shell.horizontalCenter
+         }
+    }
 
     Button {
         id: cancel
         width: parent.width / 2
+        height: Theme.itemHeightLarge
         anchors {
             left: parent.left
             bottom: parent.bottom
@@ -33,6 +54,8 @@ Rectangle {
     Button {
         id: accept
         width: parent.width / 2
+        height: Theme.itemHeightLarge
+        primary: true
         anchors {
             left: cancel.right
             bottom: parent.bottom

src/controls/sizing.cpp

@@ -3,6 +3,7 @@
 #include <QScreen>
 #include <QDebug>
 #include <QGuiApplication>
+#include <math.h>
 
 Sizing::Sizing(QObject *parent) : QObject(parent)
 {

src/controls/theme.cpp

 #include "theme.h"
 #include "sizing.h"
-
+#include <math.h>
 #include <QFile>
 #include <QDebug>
 #include <QJsonDocument>

src/styles/CheckBoxStyle.qml

@@ -40,27 +40,30 @@ CheckBoxStyle {
             implicitWidth: Theme.itemWidthExtraSmall
             implicitHeight: Theme.itemHeightExtraSmall
 
-            Rectangle {
-                id: back1
-                implicitWidth: Theme.itemWidthExtraSmall
-                implicitHeight: size.dp(28)
-                color: Theme.accentColor
-                anchors.centerIn: parent
-            }
-
             Rectangle {
                 id: back2
                 implicitWidth: Theme.itemWidthExtraSmall
-                implicitHeight: size.dp(28)
+                implicitHeight: Theme.itemHeightExtraSmall - Theme.itemSpacingExtraSmall
                 color: Theme.fillDarkColor
                 anchors.centerIn: parent
+
+                Rectangle {
+                    id: back1
+                    implicitWidth: Theme.itemWidthExtraSmall
+                    implicitHeight: Theme.itemHeightExtraSmall - Theme.itemSpacingExtraSmall
+                    color: Theme.accentColor
+                    anchors.centerIn: parent
+                }
             }
 
 
             Image {
                 id: ball
-                width: size.dp(40)
+                width: Theme.itemHeightSmall
                 height: Theme.itemHeightExtraSmall
+                fillMode: Image.PreserveAspectFit
+                sourceSize.width: width
+                sourceSize.height: height
                 source: "images/switch-ball.png"
                 anchors.verticalCenter: parent.verticalCenter
             }
@@ -78,8 +81,7 @@ CheckBoxStyle {
 
             Component.onCompleted: {
                 back1.opacity = control.checked ? 1 : 0
-                back2.opacity = control.checked ? 0 : 1
-                ball.x = control.checked ? Theme.itemHeightExtraSmall : 0
+                ball.x = control.checked ? background.width - ball.width : 0
             }
 
             SequentialAnimation {
@@ -88,20 +90,14 @@ CheckBoxStyle {
                 NumberAnimation {
                     target: ball
                     property: "x"
-                    to: Theme.itemHeightExtraSmall
+                    to: background.width - ball.width
                     duration: 120
                 }
                 NumberAnimation {
                     target: back1
                     property: "opacity"
                     to: 1
-                    duration: 60
-                }
-                NumberAnimation {
-                    target: back2
-                    property: "opacity"
-                    to: 0
-                    duration: 60
+                    duration: 120
                 }
             }
 
@@ -114,17 +110,11 @@ CheckBoxStyle {
                     to: 0
                     duration: 120
                 }
-                NumberAnimation {
-                    target: back2
-                    property: "opacity"
-                    to: 1
-                    duration: 60
-                }
                 NumberAnimation {
                     target: back1
                     property: "opacity"
                     to: 0
-                    duration: 60
+                    duration: 120
                 }
             }
     }
@@ -132,5 +122,5 @@ CheckBoxStyle {
         text: control.text
         font.pixelSize:control.fontSize
     }
-    spacing: 10
+    spacing: Theme.itemSpacingSmall
 }

src/styles/GrooveStyle.qml

@@ -22,9 +22,9 @@ import QtQuick.Controls.Nemo 1.0
 
 Component {
     Rectangle {
-        implicitHeight: size.dp(16)
-        implicitWidth: size.dp(440)
-        color: Theme.fillColorDark
+        implicitHeight: Theme.itemHeightSmall/2
+        implicitWidth: Theme.itemWidthLarge + Theme.itemWidthSmall
+        color: Theme.fillDarkColor
         Rectangle {
             antialiasing: true
             radius: 1

src/styles/SliderStyle.qml

@@ -29,9 +29,9 @@ SliderStyle{
         color: Theme.backgroundColor
         border.color: Theme.accentColor
         border.width: 2
-        implicitWidth: size.dp(34)
-        implicitHeight: size.dp(34)
-        radius: size.dp(16)
+        implicitWidth: Theme.itemHeightExtraSmall
+        implicitHeight: Theme.itemHeightExtraSmall
+        radius: implicitHeight / 2
         visible: control.enabled
 
         Text{
@@ -47,8 +47,8 @@ SliderStyle{
     groove: Rectangle{
         id: grove
 
-        implicitHeight: size.dp(16)
-        implicitWidth: size.dp(440)
+        implicitHeight: Theme.itemHeightExtraSmall / 2
+        implicitWidth: Theme.itemWidthLarge + Theme.itemWidthSmall
         color: Theme.fillDarkColor
         z: 1
         Rectangle{
@@ -73,9 +73,9 @@ SliderStyle{
                 verticalCenter: dataLine.verticalCenter
             }
             source: "images/slider-handle-left.svg"
-            height: size.dp(34)
+            height:Theme.itemHeightExtraSmall
             visible: control.enabled
-            width: (styleData.handlePosition > size.dp(80)) ? size.dp(80) : styleData.handlePosition
+            width: (styleData.handlePosition >  Theme.itemHeightHuge) ?  Theme.itemHeightHuge : styleData.handlePosition
             sourceSize.width: width
             sourceSize.height: height
         }

src/styles/TabViewStyle.qml

@@ -20,6 +20,32 @@
 import QtQuick 2.6
 import QtQuick.Controls.Styles 1.0
 
-TabViewStyle { 
-
+TabViewStyle {
+    tabsAlignment: Qt.AlignVCenter
+    tabOverlap: 0
+    frame: Item { }
+    tab: Item {
+        implicitWidth: control.width/control.count
+        implicitHeight: Theme.itemHeightMedium
+        BorderImage {
+            anchors.fill: parent
+            border.bottom:Theme.itemSpacingExtraSmall
+            border.top: Theme.itemSpacingExtraSmall
+            source: styleData.selected ? "/usr/share/glacier-components/images/tab_selected.png":"/usr/share/glacier-components/images/tabs_standard.png"
+            Text {
+                anchors.centerIn: parent
+                color: Theme.textColor
+                text: styleData.title.toUpperCase()
+                font.pixelSize: Theme.fontSizeTiny
+            }
+            Rectangle {
+                visible: index > 0
+                anchors.top: parent.top
+                anchors.bottom: parent.bottom
+                anchors.margins: Theme.itemSpacingExtraSmall
+                width:1
+                color: Theme.fillDarkColor
+            }
+        }
+    }
 }

src/styles/TextFieldStyle.qml

@@ -35,7 +35,7 @@ TextFieldStyle {
             rightMargin: Theme.itemSpacingMedium
         }
 
-        implicitHeight: Theme.itemHeightMedium
+        implicitHeight: Theme.itemHeightSmall
         implicitWidth: Theme.itemWidthLarge
         opacity: control.enabled ? 1 : 0.6
         Image {
@@ -48,7 +48,7 @@ TextFieldStyle {
             anchors.bottom: parent.bottom
             anchors.left: parent.left
             anchors.right: parent.right
-            height: 2
+            height: size.ratio(2)
             width: parent.width
             color: control.readOnly ? Theme.fillDarkColor : Theme.accentColor
         }