Merge pull request #39 from neochapay/5.2

Add scaling

examples/touch/content/TabBarPage.qml

@@ -74,23 +74,23 @@ Page {
             frame: Item { }
             tab: Item {
                 implicitWidth: control.width/control.count
-                implicitHeight: 50
+                implicitHeight: size.dp(50)
                 BorderImage {
                     anchors.fill: parent
-                    border.bottom: 8
-                    border.top: 8
+                    border.bottom: size.dp(8)
+                    border.top: size.dp(8)
                     source: styleData.selected ? "../images/tab_selected.png":"../images/tabs_standard.png"
                     Text {
                         anchors.centerIn: parent
                         color: "white"
                         text: styleData.title.toUpperCase()
-                        font.pixelSize: 16
+                        font.pixelSize: size.dp(16)
                     }
                     Rectangle {
                         visible: index > 0
                         anchors.top: parent.top
                         anchors.bottom: parent.bottom
-                        anchors.margins: 10
+                        anchors.margins: size.dp(10)
                         width:1
                         color: "#3a3a3a"
                     }

examples/touch/content/TextInputPage.qml

@@ -65,36 +65,36 @@ Page {
     headerTools: HeaderToolsLayout { showBackButton: true; title: "Text input" }
 
     Column {
-        spacing: 40
+        spacing: size.dp(40)
         anchors.centerIn: parent
 
         TextField {
-            anchors.margins: 20
+            anchors.margins: size.dp(20)
             text: "Text input"
             //style: touchStyle
         }
 
         TextField {
-            anchors.margins: 20
+            anchors.margins: size.dp(20)
             text: "Readonly Text input"
             //style: touchStyle
             readOnly: true
         }
 
         TextField {
-            anchors.margins: 20
+            anchors.margins: size.dp(20)
             text: "Disabled textfield"
             enabled: false
         }
 
         TextField {
-            anchors.margins: 20
+            anchors.margins: size.dp(20)
             text: "Text input"
             style: touchStyle
         }
 
         TextField {
-            anchors.margins: 20
+            anchors.margins: size.dp(20)
             text: "Readonly Text input"
             style: touchStyle
             readOnly: true
@@ -107,14 +107,14 @@ Page {
 
         TextFieldStyle {
             textColor: "white"
-            font.pixelSize: 28
+            font.pixelSize: size.dp(28)
             background: Item {
-                implicitHeight: 50
-                implicitWidth: 320
+                implicitHeight: size.dp(50)
+                implicitWidth: size.dp(320)
                 BorderImage {
                     source: "../images/textinput.png"
-                    border.left: 8
-                    border.right: 8
+                    border.left: size.dp(8)
+                    border.right: size.dp(8)
                     anchors.bottom: parent.bottom
                     anchors.left: parent.left
                     anchors.right: parent.right

rpm/qtquickcontrols-nemo.spec

 Name:       qt5-qtquickcontrols-nemo
 Summary:    Nemomobile Qt Quick Controls 
-Version:    5.1.3
+Version:    5.2.0
 Release:    nemo1
 Group:      Qt/Qt
 License:    LGPLv2.1 with exception or GPLv3

src/controls/ButtonRow.qml

@@ -36,7 +36,7 @@ Rectangle {
     id: main
     width: childrenRect.width
     color: "#313131"
-    height: 40
+    height: size.dp(40)
     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: size.dp(-5)
 
         width: rowElement.children[main.currentIndex].width || 0
-        height: 50
+        height: size.dp(50)
         color: "#0091e5"
 
         visible: main.currentIndex > -1
@@ -74,11 +74,9 @@ Rectangle {
             model: main.model
             delegate: Rectangle {
                 id: rowItem
-                height: 50
+                height: size.dp(40)
                 width: text.width+(text.width/name.length*2)
 
-                y: -5
-
                 color: "transparent"
                 MouseArea {
                     width: parent.width
@@ -93,6 +91,7 @@ Rectangle {
                 Label {
                     id: text
                     text: name
+                    height: parent.heigh
 
                     anchors.horizontalCenter: parent.horizontalCenter
 

src/controls/GlacierRoller.qml

@@ -21,7 +21,7 @@ Item {
         id: label
         visible: label.text != ""
         font.capitalization: Font.AllUppercase
-        font.pixelSize: 14
+        font.pixelSize: size.dp(14)
         color: "white"
 
         anchors{
@@ -51,19 +51,19 @@ Item {
 
     PathView{
         id: view
-        property int itemHeight: 40
+        property int itemHeight: size.dp(40)
         property bool showRow: false
 
         interactive: activated
-        width: parent.width-60
-        height: 40
+        width: parent.width-size.dp(60)
+        height: size.dp(40)
         clip: true
 
         anchors{
             top: label.top
-            topMargin: 20
+            topMargin: size.dp(20)
             left: label.left
-            leftMargin: 30
+            leftMargin: size.dp(30)
         }
 
         pathItemCount: height/itemHeight

src/controls/Header.qml

@@ -62,7 +62,7 @@ Item {
             PropertyChanges {
                 target: toolBarRect
                 width: parent.width
-                height: 75
+                height: size.dp(75)
             }
         },
         State {
@@ -91,7 +91,7 @@ Item {
             }
             PropertyChanges {
                 target: toolBarRect
-                width: 75
+                width: size.dp(75)
                 height: parent.height
             }
         }

src/controls/HeaderToolsLayout.qml

@@ -25,13 +25,13 @@ Item {
 
     Rectangle {
         id: backButton
-        width: opacity ? 60 : 0
-        anchors.leftMargin: 20
+        width: opacity ? size.dp(60) : 0
+        anchors.leftMargin: size.dp(20)
         //check if Stack.view has already been initialized as well
         anchors.verticalCenter: parent.verticalCenter
         antialiasing: true
         height: width
-        radius: 4
+        radius: size.dp(4)
         color: backmouse.pressed ? "#222" : "transparent"
 
         rotation: isUiPortrait ? 0 : 90
@@ -46,7 +46,7 @@ Item {
         MouseArea {
             id: backmouse
             anchors.fill: parent
-            anchors.margins: -10
+            anchors.margins: size.dp(-10)
             onClicked: header && header.stackView && header.stackView.pop()
         }
     }
@@ -56,16 +56,16 @@ Item {
         anchors.right: toolButtonsContainer.left
         anchors.left: backButton.visible ? backButton.right : parent.left
         anchors.verticalCenter: parent.verticalCenter
-        anchors.leftMargin: 20
-        anchors.rightMargin: 20
+        anchors.leftMargin: size.dp(20)
+        anchors.rightMargin: size.dp(20)
         clip: true
         font.family: Theme.fontFamily
         color: Theme.label.color
-        font.pointSize: 24
+        font.pointSize: size.dp(24)
         font.weight: Font.Bold
         LinearGradient {
             anchors.right: parent.right
-            width: 50
+            width: size.dp(50)
             height: parent.paintedHeight
             visible: titleTxt.paintedWidth >  titleTxt.width
             start: Qt.point(0,0)
@@ -79,9 +79,9 @@ Item {
     Item {
         id: toolButtonsContainer
         anchors.right: dots.visible ? dots.left : parent.right
-        anchors.rightMargin: 20
+        anchors.rightMargin: size.dp(20)
         anchors.verticalCenter: parent.verticalCenter
-        width: tools ? (50 * Math.min(maxNumberOfToolButtons, tools.length)) : 0
+        width: tools ? (size.dp(50) * Math.min(maxNumberOfToolButtons, tools.length)) : 0
 
         property int maxNumberOfToolButtons: 3
 
@@ -107,7 +107,7 @@ Item {
     Image {
         id: dots
         anchors.right: parent.right
-        anchors.rightMargin: 20
+        anchors.rightMargin: size.dp(20)
         anchors.verticalCenter: parent.verticalCenter
         visible: drawerLevels && drawerLevels.length > 1
         source: "../Styles/Nemo/images/dots-vertical.png"

src/controls/Label.qml

@@ -35,5 +35,5 @@ Text {
     renderType: Text.NativeRendering
     font.family: Theme.fontFamily
     color: Theme.label.color
-    font.pointSize: Theme.label.pointSize
+    font.pointSize: size.dp(Theme.label.pointSize)
 }

src/controls/ListView.qml

@@ -15,18 +15,18 @@ ListView {
         id: sectionHeading
         Rectangle {
             width: listView.width
-            height: 44
+            height: size.dp(44)
             color: "black"
 
             Text {
                 id: sectionText
                 text: section
                 font.capitalization: Font.AllUppercase
-                font.pixelSize: 20
+                font.pixelSize: size.dp(20)
                 color: "white"
                 anchors{
                     left: parent.left
-                    leftMargin: 10
+                    leftMargin: size.dp(10)
                     verticalCenter: parent.verticalCenter
                 }
             }
@@ -35,10 +35,10 @@ ListView {
                 id: line
                 height: 1
                 color: "white"
-                width: listView.width-sectionText.width-30
+                width: listView.width-sectionText.width-size.dp(30)
                 anchors{
                     left: sectionText.right
-                    leftMargin: 10
+                    leftMargin: size.dp(10)
                     verticalCenter: sectionText.verticalCenter
                 }
             }
@@ -48,7 +48,7 @@ ListView {
     Item{
         id: bottom
         width: parent.width
-        height: 30
+        height: size.dp(30)
         anchors.bottom: parent.bottom
 
         visible: listView.contentHeight > listView.height
@@ -56,7 +56,7 @@ ListView {
         LinearGradient{
             anchors.fill: parent
             start: Qt.point(0, 0)
-            end: Qt.point(0, 30)
+            end: Qt.point(0, size.dp(30))
             gradient: Gradient {
                 GradientStop { position: 0.0; color: "transparent" }
                 GradientStop { position: 1.0; color: "black" }
@@ -70,13 +70,13 @@ ListView {
         visible: (listView.showDecorator && listView.contentHeight > listView.height)
         color: "#0091e5"
 
-        width: 5
+        width: size.dp(5)
         height: listView.height*listView.height/listView.contentHeight
         y: (listView.height)/listView.contentHeight*listView.contentY
 
         anchors{
             right: listView.right
-            rightMargin: 4
+            rightMargin: size.dp(4)
         }
     }
 }

src/controls/ListViewItemWithActions.qml

@@ -66,13 +66,13 @@ Item {
 
         Image{
             id: itemIcon
-            height: parent.height-10
+            height: parent.height-size.dp(10)
             width: height
             anchors{
                 left: parent.left
-                leftMargin: 20
+                leftMargin: size.dp(20)
                 top: parent.top
-                topMargin: 5
+                topMargin: size.dp(5)
             }
 
             sourceSize.width: width
@@ -84,13 +84,13 @@ Item {
 
         Rectangle{
             id: dataArea
-            width: parent.width-itemIcon.width-arrowItem.width-60
+            width: parent.width-itemIcon.width-arrowItem.width-size.dp(60)
             height: labelItem.height+(description != "" ? descriptionItem.height : 0)+(subdescription != "" ? subDescriptionItem.height : 0)
             clip: true
 
             anchors{
                 left:itemIcon.right
-                leftMargin: 20
+                leftMargin: size.dp(20)
                 verticalCenter: itemIcon.verticalCenter
             }
             color: "transparent"
@@ -103,7 +103,7 @@ Item {
                     left: parent.left
                     right: parent.right
                 }
-                font.pixelSize: 30
+                font.pixelSize: size.dp(30)
                 clip: true
             }
 
@@ -116,7 +116,7 @@ Item {
                     right: parent.right
                     top: labelItem.bottom
                 }
-                font.pixelSize: 18
+                font.pixelSize: size.dp(18)
                 clip: true
                 visible: description != ""
             }
@@ -130,13 +130,13 @@ Item {
                     right: parent.right
                     top: descriptionItem.bottom
                 }
-                font.pixelSize: 18
+                font.pixelSize: size.dp(18)
                 clip: true
                 visible: subdescription != ""
             }
 
             Item{
-                width: 15
+                width: size.dp(15)
                 height: parent.height
                 anchors{
                     top: parent.top
@@ -146,7 +146,7 @@ Item {
                 LinearGradient{
                     anchors.fill: parent
                     start: Qt.point(0, 0)
-                    end: Qt.point(15, 0)
+                    end: Qt.point(size.dp(15), 0)
                     gradient: Gradient {
                         GradientStop { position: 0.0; color: "transparent" }
                         GradientStop { position: 1.0; color: "black" }
@@ -157,12 +157,12 @@ Item {
 
         Image {
             id: arrowItem
-            height: parent.height-10
+            height: parent.height-size.dp(10)
             width: height
 
             anchors{
                 right: parent.right
-                rightMargin: 20
+                rightMargin: size.dp(20)
                 verticalCenter: parent.verticalCenter
             }
 

src/controls/controls.pro

@@ -34,7 +34,8 @@ HEADERS += \
     qquickfilteringmousearea.h \
     nemoimageprovider.h \
     themedaemon/mlocalthemedaemonclient.h \
-    themedaemon/mabstractthemedaemonclient.h
+    themedaemon/mabstractthemedaemonclient.h \
+    sizing.h
 
 SOURCES += \
     qquicknemocontrolsextensionplugin.cpp \
@@ -44,7 +45,8 @@ SOURCES += \
     qquickfilteringmousearea.cpp \
     nemoimageprovider.cpp \
     themedaemon/mlocalthemedaemonclient.cpp \
-    themedaemon/mabstractthemedaemonclient.cpp
+    themedaemon/mabstractthemedaemonclient.cpp \
+    sizing.cpp
 
 target.path = $$[QT_INSTALL_QML]/$$PLUGIN_IMPORT_PATH
 

src/controls/qquicknemocontrolsextensionplugin.cpp

@@ -25,6 +25,7 @@
 #include "nemopage.h"
 #include "qquickfilteringmousearea.h"
 #include "nemoimageprovider.h"
+#include "sizing.h"
 
 QQuickNemoControlsExtensionPlugin::QQuickNemoControlsExtensionPlugin(QObject *parent) :
     QQmlExtensionPlugin(parent)
@@ -48,7 +49,12 @@ void QQuickNemoControlsExtensionPlugin::registerTypes(const char *uri)
 
 void QQuickNemoControlsExtensionPlugin::initializeEngine(QQmlEngine *engine, const char *uri)
 {
+    Sizing *sizing = new Sizing();
+
     QQmlExtensionPlugin::initializeEngine(engine,uri);
+    QQmlContext* context = engine->rootContext();
+    context->setContextProperty("size",sizing);
+
     engine->addImageProvider(QLatin1String("theme"), new NemoImageProvider);
 }
 

src/controls/sizing.cpp

+#include "sizing.h"
+
+#include <QScreen>
+#include <QDebug>
+#include <QGuiApplication>
+
+Sizing::Sizing(QObject *parent) : QObject(parent)
+{
+    m_valid = false;
+    m_mm_factor = 10;
+    m_dp_factor = 1;
+
+    m_densitie = mdpi;
+
+    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_dpi = screen->physicalDotsPerInch();
+
+    qDebug() << "DPI is " << m_dpi;
+
+    if(m_dpi < 140){
+        m_densitie = ldpi;
+    }else if(m_dpi >= 140 && m_dpi < 200){
+        //~160dpi
+        m_densitie = mdpi;
+    }else if(m_dpi >= 200 && m_dpi < 280){
+        //~240dpi
+        m_densitie = hdpi;
+    }else if(m_dpi >= 280 && m_dpi < 400){
+        //~320dpi
+        m_densitie = xhdpi;
+    }else if(m_dpi >= 400 && m_dpi < 560){
+        //~480dpi
+        m_densitie = xxhdpi;
+    }else{
+        m_densitie = xxxhdpi;
+    }
+
+    if(m_p_height > 0 && m_p_width >0){
+        m_valid = true;
+        setMmScaleFactor();
+        setDpScaleFactor();
+    }else{
+        if(m_p_height == 0){
+            qWarning("QT_QPA_EGLFS_PHYSICAL_HEIGHT is not set!");
+        }
+
+        if(m_p_width == 0){
+            qWarning("QT_QPA_EGLFS_PHYSICAL_WIDTH is not set!");
+        }
+        qWarning("Device mm sizing don`t work");
+    }
+}
+
+void Sizing::setMmScaleFactor()
+{
+    if(m_p_width != 0){
+        m_mm_factor = m_width/m_p_width;
+    }
+
+    qDebug() << "MM scale factor is " << m_mm_factor;
+}
+
+void Sizing::setDpScaleFactor()
+{
+    switch (m_densitie) {
+    case ldpi:
+        m_dp_factor = 0.5;
+        break;
+    case mdpi:
+        m_dp_factor = 0.6;
+        break;
+    case hdpi:
+        m_dp_factor = 1;
+        break;
+    case xhdpi:
+        m_dp_factor = 1.3;
+        break;
+    case xxhdpi:
+        m_dp_factor = 2;
+        break;
+    case xxxhdpi:
+        m_dp_factor = 2.5;
+        break;
+    default:
+        m_dp_factor = 1.3;
+        break;
+    }
+
+    qDebug() << "DP scale factor is " << m_dp_factor;
+}
+
+float Sizing::mm(float value)
+{
+    return value*m_mm_factor;
+}
+
+float Sizing::dp(float value)
+{
+    return value*m_dp_factor;
+}

src/controls/sizing.h

+#ifndef SIZING_H
+#define SIZING_H
+
+#include <QObject>
+
+#if QT_VERSION < QT_VERSION_CHECK(5,6,0)
+#ifndef Q_ENUM
+#define Q_ENUM(x) Q_ENUMS(x)
+#endif
+#endif
+class Sizing : public QObject
+{
+    Q_OBJECT
+public:
+    explicit Sizing(QObject *parent = 0);
+
+    enum Densitie{
+        ldpi,
+        mdpi,
+        hdpi,
+        xhdpi,
+        xxhdpi,
+        xxxhdpi
+    };
+#if QT_VERSION < QT_VERSION_CHECK(5,6,0)
+    Q_ENUM(Densities)
+#else
+    Q_ENUMS(Densities)
+#endif
+    bool isValid(){return m_valid;}
+
+    float getMmScaleFactor(){return m_mm_factor;}
+    float getDpScaleFactor(){return m_dp_factor;}
+
+    Densitie getDensitie();
+
+    Q_INVOKABLE float mm(float value);
+    Q_INVOKABLE float dp(float value);
+
+private:
+    bool m_valid;
+
+    int m_p_width;
+    int m_p_height;
+
+    int m_width;
+    int m_height;
+
+    float m_mm_factor;
+    float m_dp_factor;
+
+    qreal m_dpi;
+
+    Densitie m_densitie;
+
+    void setMmScaleFactor();
+    void setDpScaleFactor();
+
+};
+
+#endif // SIZING_H

src/styles/ButtonStyle.qml

@@ -30,8 +30,8 @@ ButtonStyle {
 
     // The background of the button.
     background: Rectangle {
-        implicitWidth: 240
-        implicitHeight: 50
+        implicitWidth: size.dp(240)
+        implicitHeight: size.dp(50)
         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: size.dp(72)
+            implicitHeight: size.dp(32)
 
             Rectangle {
                 id: back1
-                implicitWidth: 72
-                implicitHeight: 28
+                implicitWidth: size.dp(72)
+                implicitHeight: size.dp(28)
                 color: Theme.checkbox.back1
                 anchors.centerIn: parent
             }
 
             Rectangle {
                 id: back2
-                implicitWidth: 72
-                implicitHeight: 28
+                implicitWidth: size.dp(72)
+                implicitHeight: size.dp(28)
                 color: Theme.checkbox.back2
                 anchors.centerIn: parent
             }
@@ -61,6 +61,8 @@ CheckBoxStyle {
 
             Image {
                 id: ball
+                width: size.dp(40)
+                height: size.dp(32)
                 source: "images/switch-ball.png"
                 anchors.verticalCenter: parent.verticalCenter
             }
@@ -73,14 +75,13 @@ CheckBoxStyle {
                     } else {
                         anim2.restart()
                     }
-
                 }
             }
 
             Component.onCompleted: {
                 back1.opacity = control.checked ? 1 : 0
                 back2.opacity = control.checked ? 0 : 1
-                ball.x = control.checked ? 32 : 0
+                ball.x = control.checked ? size.dp(32) : 0
             }
 
             SequentialAnimation {
@@ -89,7 +90,7 @@ CheckBoxStyle {
                 NumberAnimation {
                     target: ball
                     property: "x"
-                    to: 32
+                    to: size.dp(32)
                     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: size.dp(16)
+        implicitWidth: size.dp(440)
         color: Theme.groove.background
         Rectangle {
             antialiasing: true

src/styles/SliderStyle.qml

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

src/styles/TextFieldStyle.qml

@@ -25,11 +25,14 @@ TextFieldStyle {
     selectedTextColor: Theme.textField.selectedTextColor
     selectionColor: Theme.textField.selectionColor
     textColor: Theme.textField.selectedTextColor
-    font.pointSize: 14 
+    font.pointSize: size.dp(14)
     font.family: Theme.textField.font
+
     background: Item {
-        anchors.leftMargin: 16
-        anchors.rightMargin: 16
+        anchors.leftMargin: size.dp(16)
+        anchors.rightMargin: size.dp(16)
+        implicitHeight: size.dp(50)
+        implicitWidth: size.dp(320)
         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: size.dp(75)
+        implicitWidth: size.dp(40)
         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: size.dp(50)
+        implicitHeight: size.dp(50)
 
         opacity: control.pressed ? 0.5 : 1
 
@@ -47,7 +47,7 @@ Style {
             id: icon
             anchors.fill: parent
             fillMode: Image.PreserveAspectFit
-            anchors.margins: 8
+            anchors.margins: size.dp(8)
             source: control.iconSource
         }
     }