Merge pull request #51 from eekkelund/master

[Scaling] Recalculate scaling ratio based on reference device, N9.

Merge pull request #51 from eekkelund/master
[Scaling] Recalculate scaling ratio based on reference device, N9.
7d581654 · Aleksi Suomalainen · GitHub · bad236c9 · 64263400 · 7d581654
Commit 7d581654 authored Sep 20, 2017 by Aleksi Suomalainen Committed by GitHub Sep 20, 2017
23 changed files
--- a/examples/touch/content/ListViewPage.qml
+++ b/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"
    }

--- a/examples/touch/content/QueryDialogPage.qml
+++ b/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"
        }

--- a/examples/touch/content/SelectRollerPage.qml
+++ b/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)
                }
            }

--- a/examples/touch/content/TabBarPage.qml
+++ b/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"
-                    }
-                }
-            }
-        }
-    }
 }
--- a/examples/touch/content/TextInputPage.qml
+++ b/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

--- a/src/controls/ButtonRow.qml
+++ b/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
+
                }
            }
        }

--- a/src/controls/GlacierRoller.qml
+++ b/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
        }

--- a/src/controls/GlacierRollerItem.qml
+++ b/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)
            {

--- a/src/controls/Header.qml
+++ b/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
            }
        }

--- a/src/controls/HeaderToolsLayout.qml
+++ b/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

--- a/src/controls/Label.qml
+++ b/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)
 }
--- a/src/controls/ListView.qml
+++ b/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
        }
    }
 }

--- a/src/controls/ListViewItemWithActions.qml
+++ b/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{

--- a/src/controls/QueryDialog.qml
+++ b/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

--- a/src/controls/sizing.cpp
+++ b/src/controls/sizing.cpp
@@ -3,6 +3,7 @@
 #include <QScreen>
 #include <QDebug>
 #include <QGuiApplication>
+#include <math.h>

 Sizing::Sizing(QObject *parent) : QObject(parent)
 {
@@ -11,40 +12,39 @@ Sizing::Sizing(QObject *parent) : QObject(parent)
    m_dp_factor = 1;

    m_densitie = mdpi;
+    qreal refHeight =  854.; //N9
+    qreal refWidth = 480.; //N9
+    qreal refDpi = 251; //N9

    m_p_height = qgetenv("QT_QPA_EGLFS_PHYSICAL_HEIGHT").toInt();
    m_p_width = qgetenv("QT_QPA_EGLFS_PHYSICAL_WIDTH").toInt();

    QScreen *screen = QGuiApplication::primaryScreen();

-    m_height = screen->size().height();
-    m_width = screen->size().width();
+
+    m_height = qMax(screen->size().width(), screen->size().height());
+    m_width = qMin(screen->size().width(), screen->size().height());

    m_dpi = screen->physicalDotsPerInch();

-    int largerSide;
-
-     qDebug() << "Height: " << m_height << "Width: " << m_width;
-
-     if(m_height > m_width) {
-         largerSide = m_width;
-     } else {
-         largerSide = m_height;
-     }
-      
-     if(largerSide > 2160){
-         //>2160
-         m_launcher_icon_size = 256;
-     }else if (largerSide > 1080){
-         //1081-2160
-         m_launcher_icon_size = 128;
-     }else if(largerSide > 720){
-         //721-1080
-         m_launcher_icon_size = 108;
-     }else {
-         //>720
+    m_scaleRatio = qMin(m_height/refHeight, m_width/refWidth);
+    m_fontRatio = floor(m_scaleRatio*10) /10; //qMin(m_height*refDpi/(m_dpi*refHeight), m_width*refDpi/(m_dpi*refWidth))*10)/10;
+    qDebug() << "Height: " << m_height << "Width: " << m_width;
+    qDebug() << "Scale ratio: " << m_scaleRatio << " Font: " << m_fontRatio;
+
+    if(m_width >= 2160){
+        //>2160
+        m_launcher_icon_size = 256;
+    }else if (m_width >= 1080){
+        //1080-2159
+        m_launcher_icon_size = 128;
+    }else if(m_width >= 720){
+        //720-1079
+        m_launcher_icon_size = 108;
+    }else {
+        //>720
        m_launcher_icon_size = 86;
-     }
+    }

    qDebug() << "DPI is " << m_dpi;

@@ -130,6 +130,11 @@ float Sizing::dp(float value)
    return value*m_dp_factor;
 }

+float Sizing::ratio(float value)
+{
+    return floor(value*m_scaleRatio);
+}
+

 void Sizing::setMmScaleFactor(float value)
 {
@@ -152,3 +157,15 @@ void Sizing::setDpScaleFactor(float value)
        m_dp_factor = value;
    }
 }
+
+void Sizing::setScaleRatio(qreal scaleRatio)
+{
+    if(scaleRatio != 0)
+        m_scaleRatio = scaleRatio;
+}
+
+void Sizing::setFontRatio(qreal fontRatio)
+{
+    if(fontRatio !=0 )
+        m_fontRatio = fontRatio;
+}
--- a/src/controls/sizing.h
+++ b/src/controls/sizing.h
@@ -31,6 +31,9 @@ public:

    float getMmScaleFactor(){return m_mm_factor;}
    float getDpScaleFactor(){return m_dp_factor;}
+    qreal getScaleRatio(){return m_scaleRatio;}
+    qreal getFontRatio(){return m_fontRatio;}
+

    int getLauncherIconSize(){return m_launcher_icon_size;}

@@ -38,10 +41,15 @@ public:

    Q_INVOKABLE float mm(float value);
    Q_INVOKABLE float dp(float value);
+    Q_INVOKABLE float ratio(float value);

    Q_INVOKABLE void setMmScaleFactor(float value);
    Q_INVOKABLE void setDpScaleFactor(float value);

+    Q_INVOKABLE void setScaleRatio(qreal scaleRatio);
+
+    void setFontRatio(qreal fontRatio);
+
 private:
    bool m_valid;

@@ -50,6 +58,8 @@ private:

    int m_width;
    int m_height;
+    qreal m_scaleRatio;
+    qreal m_fontRatio;

    int m_launcher_icon_size;


--- a/src/controls/theme.cpp
+++ b/src/controls/theme.cpp
 #include "theme.h"
 #include "sizing.h"
-
+#include <math.h>
 #include <QFile>
 #include <QDebug>
 #include <QJsonDocument>
@@ -11,30 +11,33 @@ Theme::Theme(QObject *parent) : QObject(parent)
    Sizing *size = new Sizing;
    m_dp = size->getDpScaleFactor();
    m_iconSizeLauncher = size->getLauncherIconSize();
+    m_scaleRatio = size->getScaleRatio();
+    m_fontRatio = size->getFontRatio();
    //Load defaults
-    m_itemWidthLarge = 320*m_dp;
-    m_itemWidthMedium = 240*m_dp;
-    m_itemWidthSmall = 120*m_dp;
-    m_itemWidthExtraSmall = 72*m_dp;
+    m_itemWidthLarge = floor(320*m_scaleRatio);
+    m_itemWidthMedium = floor(240*m_scaleRatio);
+    m_itemWidthSmall = floor(120*m_scaleRatio);
+    m_itemWidthExtraSmall = floor(72*m_scaleRatio);
+
+    m_itemHeightHuge = floor(80*m_scaleRatio);
+    m_itemHeightExtraLarge = floor(75*m_scaleRatio);
+    m_itemHeightLarge = floor(63*m_scaleRatio);
+    m_itemHeightMedium = floor(50*m_scaleRatio);
+    m_itemHeightSmall = floor(40*m_scaleRatio);
+    m_itemHeightExtraSmall = floor(32*m_scaleRatio);

-    m_itemHeightHuge = 80*m_dp;
-    m_itemHeightExtraLarge = 75*m_dp;
-    m_itemHeightLarge = 63*m_dp;
-    m_itemHeightMedium = 50*m_dp;
-    m_itemHeightSmall = 40*m_dp;
-    m_itemHeightExtraSmall = 32*m_dp;
+    m_itemSpacingHuge = floor(40*m_scaleRatio);
+    m_itemSpacingLarge = floor(20*m_scaleRatio);
+    m_itemSpacingMedium = floor(15*m_scaleRatio);
+    m_itemSpacingSmall = floor(10*m_scaleRatio);
+    m_itemSpacingExtraSmall = floor(8*m_scaleRatio);

-    m_itemSpacingHuge = 40*m_dp;
-    m_itemSpacingLarge = 20*m_dp;
-    m_itemSpacingMedium = 15*m_dp;
-    m_itemSpacingSmall = 10*m_dp;
-    m_itemSpacingExtraSmall = 8*m_dp;

-    m_fontSizeExtraLarge = 50*m_dp;
-    m_fontSizeLarge = 40*m_dp;
-    m_fontSizeMedium = 32*m_dp;
-    m_fontSizeSmall = 26*m_dp;
-    m_fontSizeTiny = 18*m_dp;
+    m_fontSizeExtraLarge = floor(44*m_fontRatio);
+    m_fontSizeLarge = floor(35*m_fontRatio);
+    m_fontSizeMedium = floor(28*m_fontRatio);
+    m_fontSizeSmall = floor(24*m_fontRatio);
+    m_fontSizeTiny = floor(16*m_fontRatio);
    m_fontWeightLarge = 63*m_dp;
    m_fontWeightMedium = 25*m_dp;
    m_fontFamily = "/usr/share/fonts/google-opensans/OpenSans-Regular.ttf";
@@ -77,146 +80,146 @@ bool Theme::loadTheme(QString fileName)
    }

    if(theme.value("itemWidthLarge").toString().toFloat() != 0 &&
-            theme.value("itemWidthLarge").toString().toFloat() != m_itemWidthLarge)
+           floor(theme.value("itemWidthLarge").toString().toFloat()) != m_itemWidthLarge)
    {
-        m_itemWidthLarge = theme.value("itemWidthLarge").toString().toFloat()*m_dp;
+        m_itemWidthLarge = floor(theme.value("itemWidthLarge").toString().toFloat()*m_scaleRatio);
        emit itemWidthLargeChanged();
        updated = true;
    }
    if(theme.value("itemWidthMedium").toString().toFloat() != 0 &&
-            theme.value("itemWidthMedium").toString().toFloat() != m_itemWidthMedium)
+           floor(theme.value("itemWidthMedium").toString().toFloat()) != m_itemWidthMedium)
    {
-        m_itemWidthMedium = theme.value("itemWidthMedium").toString().toFloat()*m_dp;
+        m_itemWidthMedium = floor(theme.value("itemWidthMedium").toString().toFloat()*m_scaleRatio);
        emit itemWidthMediumChanged();
        updated = true;
    }
    if(theme.value("itemWidthSmall").toString().toFloat() != 0 &&
-            theme.value("itemWidthSmall").toString().toFloat() != m_itemWidthSmall)
+           floor(theme.value("itemWidthSmall").toString().toFloat()) != m_itemWidthSmall)
    {
-        m_itemWidthSmall = theme.value("itemWidthSmall").toString().toFloat()*m_dp;
+        m_itemWidthSmall = floor(theme.value("itemWidthSmall").toString().toFloat()*m_scaleRatio);
        emit itemWidthSmallChanged();
        updated = true;
    }
    if(theme.value("itemWidthExtraSmall").toString().toFloat() != 0 &&
-            theme.value("itemWidthExtraSmall").toString().toFloat() != m_itemWidthExtraSmall)
+           floor(theme.value("itemWidthExtraSmall").toString().toFloat()) != m_itemWidthExtraSmall)
    {
-        m_itemWidthExtraSmall = theme.value("itemWidthExtraSmall").toString().toFloat()*m_dp;
+        m_itemWidthExtraSmall = floor(theme.value("itemWidthExtraSmall").toString().toFloat()*m_scaleRatio);
        emit itemWidthExtraSmallChanged();
        updated = true;
    }

    if(theme.value("itemHeightHuge").toString().toFloat() != 0 &&
-            theme.value("itemHeightHuge").toString().toFloat() != m_itemHeightHuge)
+           floor(theme.value("itemHeightHuge").toString().toFloat()) != m_itemHeightHuge)
    {
-        m_itemHeightHuge = theme.value("itemHeightHuge").toString().toFloat()*m_dp;
+        m_itemHeightHuge = floor(theme.value("itemHeightHuge").toString().toFloat()*m_scaleRatio);
        emit itemHeightHugeChanged();
        updated = true;
    }
    if(theme.value("itemHeightExtraLarge").toString().toFloat() != 0 &&
-            theme.value("itemHeightExtraLarge").toString().toFloat() != m_itemHeightExtraLarge)
+           floor(theme.value("itemHeightExtraLarge").toString().toFloat()) != m_itemHeightExtraLarge)
    {
-        m_itemHeightExtraLarge = theme.value("itemHeightExtraLarge").toString().toFloat()*m_dp;
+        m_itemHeightExtraLarge = floor(theme.value("itemHeightExtraLarge").toString().toFloat()*m_scaleRatio);
        emit itemHeightExtraLargeChanged();
        updated = true;
    }
    if(theme.value("itemHeightLarge").toString().toFloat() != 0 &&
-            theme.value("itemHeightLarge").toString().toFloat() != m_itemHeightLarge)
+           floor(theme.value("itemHeightLarge").toString().toFloat()) != m_itemHeightLarge)
    {
-        m_itemHeightLarge = theme.value("itemHeightLarge").toString().toFloat()*m_dp;
+        m_itemHeightLarge = floor(theme.value("itemHeightLarge").toString().toFloat()*m_scaleRatio);
        emit itemHeightLargeChanged();
        updated = true;
    }
    if(theme.value("itemHeightMedium").toString().toFloat() != 0 &&
-            theme.value("itemHeightMedium").toString().toFloat() != m_itemHeightMedium)
+           floor(theme.value("itemHeightMedium").toString().toFloat()) != m_itemHeightMedium)
    {
-        m_itemHeightMedium = theme.value("itemHeightMedium").toString().toFloat()*m_dp;
+        m_itemHeightMedium = floor(theme.value("itemHeightMedium").toString().toFloat()*m_scaleRatio);
        emit itemHeightMediumChanged();
        updated = true;
    }
    if(theme.value("itemHeightSmall").toString().toFloat() != 0 &&
-            theme.value("itemHeightSmall").toString().toFloat() != m_itemHeightSmall)
+           floor(theme.value("itemHeightSmall").toString().toFloat()) != m_itemHeightSmall)
    {
-        m_itemHeightSmall = theme.value("itemHeightSmall").toString().toFloat()*m_dp;
+        m_itemHeightSmall = floor(theme.value("itemHeightSmall").toString().toFloat()*m_scaleRatio);
        emit itemHeightSmallChanged();
        updated = true;
    }
    if(theme.value("itemHeightExtraSmall").toString().toFloat() != 0 &&
-            theme.value("itemHeightExtraSmall").toString().toFloat() != m_itemHeightExtraSmall)
+           floor(theme.value("itemHeightExtraSmall").toString().toFloat()) != m_itemHeightExtraSmall)
    {
-        m_itemHeightExtraSmall = theme.value("itemHeightExtraSmall").toString().toFloat()*m_dp;
+        m_itemHeightExtraSmall = floor(theme.value("itemHeightExtraSmall").toString().toFloat()*m_scaleRatio);
        emit itemHeightExtraSmallChanged();
        updated = true;
    }


    if(theme.value("itemSpacingHuge").toString().toFloat() != 0 &&
-            theme.value("itemSpacingHuge").toString().toFloat() != m_itemSpacingHuge)
+           floor(theme.value("itemSpacingHuge").toString().toFloat()) != m_itemSpacingHuge)
    {
-        m_itemSpacingHuge = theme.value("itemSpacingHuge").toString().toFloat()*m_dp;
+        m_itemSpacingHuge = floor(theme.value("itemSpacingHuge").toString().toFloat()*m_scaleRatio);
        emit itemSpacingHugeChanged();
        updated = true;
    }
    if(theme.value("itemSpacingLarge").toString().toFloat() != 0 &&
-            theme.value("itemSpacingLarge").toString().toFloat() != m_itemSpacingLarge)
+           floor(theme.value("itemSpacingLarge").toString().toFloat()) != m_itemSpacingLarge)
    {
-        m_itemSpacingLarge = theme.value("itemSpacingLarge").toString().toFloat()*m_dp;
+        m_itemSpacingLarge = floor(theme.value("itemSpacingLarge").toString().toFloat()*m_scaleRatio);
        emit itemSpacingLargeChanged();
        updated = true;
    }
    if(theme.value("itemSpacingMedium").toString().toFloat() != 0 &&
-            theme.value("itemSpacingMedium").toString().toFloat() != m_itemSpacingMedium)
+           floor(theme.value("itemSpacingMedium").toString().toFloat()) != m_itemSpacingMedium)
    {
-        m_itemSpacingMedium = theme.value("itemSpacingMedium").toString().toFloat()*m_dp;
+        m_itemSpacingMedium = floor(theme.value("itemSpacingMedium").toString().toFloat()*m_scaleRatio);
        emit itemSpacingMediumChanged();
        updated = true;
    }
    if(theme.value("itemSpacingSmall").toString().toFloat() != 0 &&
-            theme.value("itemSpacingSmall").toString().toFloat() != m_itemSpacingSmall)
+           floor(theme.value("itemSpacingSmall").toString().toFloat()) != m_itemSpacingSmall)
    {
-        m_itemSpacingSmall = theme.value("itemSpacingSmall").toString().toFloat()*m_dp;
+        m_itemSpacingSmall = floor(theme.value("itemSpacingSmall").toString().toFloat()*m_scaleRatio);
        emit itemSpacingSmallChanged();
        updated = true;
    }
    if(theme.value("itemSpacingExtraSmall").toString().toFloat() != 0 &&
-            theme.value("itemSpacingExtraSmall").toString().toFloat() != m_itemSpacingExtraSmall)
+           floor(theme.value("itemSpacingExtraSmall").toString().toFloat()) != m_itemSpacingExtraSmall)
    {
-        m_itemSpacingExtraSmall = theme.value("itemSpacingExtraSmall").toString().toFloat()*m_dp;
+        m_itemSpacingExtraSmall = floor(theme.value("itemSpacingExtraSmall").toString().toFloat()*m_scaleRatio);
        emit itemSpacingExtraSmallChanged();
        updated = true;
    }

    if(theme.value("fontSizeExtraLarge").toInt() != 0 &&
-            theme.value("fontSizeExtraLarge").toInt() != m_fontSizeExtraLarge)
+           floor(theme.value("fontSizeExtraLarge").toInt()) != m_fontSizeExtraLarge)
    {
-        m_fontSizeExtraLarge = theme.value("itemSpacingExtraSmall").toInt()*m_dp;
+        m_fontSizeExtraLarge = floor(theme.value("fontSizeExtraLarge").toInt()*m_fontRatio);
        emit fontSizeExtraLargeChanged();
        updated = true;
    }
    if(theme.value("fontSizeLarge").toInt() != 0 &&
-            theme.value("fontSizeLarge").toInt() != m_fontSizeLarge)
+            floor(theme.value("fontSizeLarge").toInt()) != m_fontSizeLarge)
    {
-        m_fontSizeLarge = theme.value("fontSizeLarge").toInt()*m_dp;
+        m_fontSizeLarge = floor(theme.value("fontSizeLarge").toInt()*m_fontRatio);
        emit fontSizeLargeChanged();
        updated = true;
    }
    if(theme.value("fontSizeMedium").toInt() != 0 &&
-            theme.value("fontSizeMedium").toInt() != m_fontSizeMedium)
+            floor(theme.value("fontSizeMedium").toInt()) != m_fontSizeMedium)
    {
-        m_fontSizeMedium = theme.value("fontSizeMedium").toInt()*m_dp;
+        m_fontSizeMedium = floor(theme.value("fontSizeMedium").toInt()*m_fontRatio);
        emit fontSizeMediumChanged();
        updated = true;
    }
    if(theme.value("fontSizeSmall").toInt() != 0 &&
-            theme.value("fontSizeSmall").toInt() != m_fontSizeSmall)
+            floor(theme.value("fontSizeSmall").toInt()) != m_fontSizeSmall)
    {
-        m_fontSizeSmall = theme.value("fontSizeSmall").toInt()*m_dp;
+        m_fontSizeSmall = floor(theme.value("fontSizeSmall").toInt()*m_fontRatio);
        emit fontSizeSmallChanged();
        updated = true;
    }
    if(theme.value("fontSizeTiny").toInt() != 0 &&
-            theme.value("fontSizeTiny").toInt() != m_fontSizeTiny)
+            floor(theme.value("fontSizeTiny").toInt()) != m_fontSizeTiny)
    {
-        m_fontSizeTiny = theme.value("fontSizeTiny").toInt()*m_dp;
+        m_fontSizeTiny = floor(theme.value("fontSizeTiny").toInt()*m_fontRatio);
        emit fontSizeTinyChanged();
        updated = true;
    }

--- a/src/controls/theme.h
+++ b/src/controls/theme.h
@@ -147,11 +147,11 @@ private:
    qreal m_itemSpacingSmall;       //10
    qreal m_itemSpacingExtraSmall;         //8

-    int m_fontSizeExtraLarge;     //50
-    int m_fontSizeLarge;           //40
-    int m_fontSizeMedium;      //32
-    int m_fontSizeSmall;          //26
-    int m_fontSizeTiny;           //18
+    int m_fontSizeExtraLarge;     //44
+    int m_fontSizeLarge;          //35
+    int m_fontSizeMedium;         //28
+    int m_fontSizeSmall;          //24
+    int m_fontSizeTiny;           //16
    int m_fontWeightLarge;        //63
    int m_fontWeightMedium;       //25
    QString m_fontFamily;         //???
@@ -164,6 +164,8 @@ private:
    QString m_backgroundAccentColor;  //#ffffff

    qreal m_dp;
+    qreal m_scaleRatio;
+    qreal m_fontRatio;
 };

 #endif // THEME_H
--- a/src/styles/CheckBoxStyle.qml
+++ b/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
 }
--- a/src/styles/GrooveStyle.qml
+++ b/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

--- a/src/styles/SliderStyle.qml
+++ b/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
        }

--- a/src/styles/TabViewStyle.qml
+++ b/src/styles/TabViewStyle.qml
@@ -32,27 +32,26 @@ TabViewStyle {
        implicitHeight: Theme.itemHeightMedium
        BorderImage {
            anchors.fill: parent
-            border.bottom: size.dp(8)
-            border.top: size.dp(8)
-
+            border.bottom:Theme.itemSpacingExtraSmall
+            border.top: Theme.itemSpacingExtraSmall
            Text {
                anchors.centerIn: parent
                color: (styleData.selected) ? Theme.accentColor : Theme.textColor
                text: styleData.title.toUpperCase()
-                font.pixelSize: Theme.fontSizeSmall
+                font.pixelSize: Theme.fontSizeTiny
            }
            Rectangle {
                visible: index > 0
                anchors.top: parent.top
                anchors.bottom: parent.bottom
-                anchors.margins: size.dp(10)
-                width:1
-                color: "#3a3a3a"
+                anchors.margins: Theme.itemSpacingExtraSmall
+                width: size.ratio(1)
+                color: Theme.fillDarkColor
            }
            Rectangle{
                visible: styleData.selected
                width: parent.width
-                height: 1
+                height: size.ratio(1)
                color: Theme.accentColor
                anchors{
                    bottom: parent.bottom

--- a/src/styles/TextFieldStyle.qml
+++ b/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
        }