[Theming] update some components size and color values

src/controls/ButtonRow.qml

@@ -36,8 +36,8 @@ import QtQuick.Controls.Styles.Nemo 1.0
 Rectangle {
     id: main
     width: childrenRect.width
-    color: "#313131"
-    height: size.dp(40)
+    color: Theme.fillDarkColor
+    height: Theme.itemHeightSmall
     property ListModel model: ListModel {}
     property bool enabled: true
     property int currentIndex: -1
@@ -55,8 +55,8 @@ Rectangle {
         y: size.dp(-5)
 
         width: rowElement.children[main.currentIndex].width || 0
-        height: size.dp(50)
-        color: "#0091e5"
+        height: Theme.itemHeightSmall
+        color: Theme.accentColor
 
         visible: main.currentIndex > -1
 

src/controls/Header.qml

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

src/controls/HeaderToolsLayout.qml

@@ -26,7 +26,7 @@ Item {
     Rectangle {
         id: backButton
         width: opacity ? size.dp(60) : 0
-        anchors.leftMargin: size.dp(20)
+        anchors.leftMargin: Theme.itemSpacingLarge
         //check if Stack.view has already been initialized as well
         anchors.verticalCenter: parent.verticalCenter
         antialiasing: true
@@ -46,22 +46,24 @@ Item {
         MouseArea {
             id: backmouse
             anchors.fill: parent
-            anchors.margins: size.dp(-10)
+            anchors.margins: -Theme.itemSpacingSmall
             onClicked: header && header.stackView && header.stackView.pop()
         }
     }
 
     Label {
         id: titleTxt
-        anchors.right: toolButtonsContainer.left
-        anchors.left: backButton.visible ? backButton.right : parent.left
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.leftMargin: size.dp(20)
-        anchors.rightMargin: size.dp(20)
+        anchors{
+            right: toolButtonsContainer.left
+            left: backButton.visible ? backButton.right : parent.left
+            verticalCenter: parent.verticalCenter
+            leftMargin: Theme.itemSpacingLarge
+            rightMargin: Theme.itemSpacingLarge
+        }
         clip: true
         font.family: Theme.fontFamily
         color: Theme.textColor
-        font.pointSize: size.dp(24)
+        font.pointSize: Theme.fontSizeLarge
         font.weight: Font.Bold
         LinearGradient {
             anchors.right: parent.right
@@ -106,9 +108,11 @@ Item {
 
     Image {
         id: dots
-        anchors.right: parent.right
-        anchors.rightMargin: size.dp(20)
-        anchors.verticalCenter: parent.verticalCenter
+        anchors{
+            right: parent.right
+            rightMargin: Theme.itemSpacingLarge
+            verticalCenter: parent.verticalCenter
+        }
         visible: drawerLevels && drawerLevels.length > 1
         source: "../Styles/Nemo/images/dots-vertical.png"
         rotation: isUiPortrait ? 0 : 90

src/controls/Label.qml

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

src/controls/ListView.qml

@@ -16,17 +16,17 @@ ListView {
         Rectangle {
             width: listView.width
             height: size.dp(44)
-            color: "black"
+            color: Theme.backgroundColor
 
             Text {
                 id: sectionText
                 text: section
                 font.capitalization: Font.AllUppercase
-                font.pixelSize: size.dp(20)
-                color: "white"
+                font.pixelSize: Theme.fontSizeMedium
+                color: Theme.textColor
                 anchors{
                     left: parent.left
-                    leftMargin: size.dp(10)
+                    leftMargin: Theme.itemSpacingSmall
                     verticalCenter: parent.verticalCenter
                 }
             }
@@ -34,11 +34,11 @@ ListView {
             Rectangle{
                 id: line
                 height: 1
-                color: "white"
+                color: Theme.textColor
                 width: listView.width-sectionText.width-size.dp(30)
                 anchors{
                     left: sectionText.right
-                    leftMargin: size.dp(10)
+                    leftMargin: Theme.itemSpacingSmall
                     verticalCenter: sectionText.verticalCenter
                 }
             }
@@ -59,7 +59,7 @@ ListView {
             end: Qt.point(0, size.dp(30))
             gradient: Gradient {
                 GradientStop { position: 0.0; color: "transparent" }
-                GradientStop { position: 1.0; color: "black" }
+                GradientStop { position: 1.0; color: Theme.backgroundColor }
             }
 
         }
@@ -68,7 +68,7 @@ ListView {
     Rectangle{
         id: scrollerDecorator
         visible: (listView.showDecorator && listView.contentHeight > listView.height)
-        color: "#0091e5"
+        color: Theme.accentColor
 
         width: size.dp(5)
         height: listView.height*listView.height/listView.contentHeight

src/controls/ListViewItemWithActions.qml

@@ -6,7 +6,7 @@ import QtGraphicalEffects 1.0
 Item {
     id: root
     width: parent.width
-    height: 60
+    height: size.dp(60)
 
     property string label: ""
 
@@ -36,7 +36,7 @@ Item {
 
     Rectangle{
         id: actionsArea
-        color: "#474747"
+        color: Theme.fillColor
 
         anchors.right: listArea.left
 
@@ -70,7 +70,7 @@ Item {
             width: height
             anchors{
                 left: parent.left
-                leftMargin: size.dp(20)
+                leftMargin: Theme.itemSpacingLarge
                 top: parent.top
                 topMargin: size.dp(5)
             }
@@ -90,14 +90,14 @@ Item {
 
             anchors{
                 left:itemIcon.right
-                leftMargin: size.dp(20)
+                leftMargin: Theme.itemSpacingLarge
                 verticalCenter: itemIcon.verticalCenter
             }
             color: "transparent"
 
             Text {
                 id: labelItem
-                color: "#ffffff"
+                color: Theme.textColor
                 text: label
                 anchors{
                     left: parent.left
@@ -109,28 +109,28 @@ Item {
 
             Text{
                 id: descriptionItem
-                color: "#ffffff"
+                color: Theme.textColor
                 text: description
                 anchors{
                     left: parent.left
                     right: parent.right
                     top: labelItem.bottom
                 }
-                font.pixelSize: size.dp(18)
+                font.pixelSize: Theme.fontSizeSmall
                 clip: true
                 visible: description != ""
             }
 
             Text{
                 id: subDescriptionItem
-                color: "#ffffff"
+                color: Theme.textColor
                 text: subdescription
                 anchors{
                     left: parent.left
                     right: parent.right
                     top: descriptionItem.bottom
                 }
-                font.pixelSize: size.dp(18)
+                font.pixelSize: Theme.fontSizeSmall
                 clip: true
                 visible: subdescription != ""
             }
@@ -162,7 +162,7 @@ Item {
 
             anchors{
                 right: parent.right
-                rightMargin: size.dp(20)
+                rightMargin: Theme.itemSpacingLarge
                 verticalCenter: parent.verticalCenter
             }
 

src/controls/QueryDialog.qml

@@ -4,7 +4,7 @@ Rectangle {
     id: shell
     anchors.fill: parent
     opacity: 0.7
-    color: "black"
+    color: Theme.backgroundColor
     signal accepted()
     signal canceled()
     property alias cancelText: cancel.text

src/controls/theme.cpp

@@ -9,6 +9,7 @@ Theme::Theme(QObject *parent) : QObject(parent)
     m_itemWidthLarge = 320*m_dp;
     m_itemWidthMedium = 240*m_dp;
     m_itemWidthSmall = 120*m_dp;
+    m_itemWidthExtraSmall = 72*m_dp;
 
     m_itemHeightHuge = 80*m_dp;
     m_itemHeightExtraLarge = 75*m_dp;
@@ -21,7 +22,7 @@ Theme::Theme(QObject *parent) : QObject(parent)
     m_itemSpacingLarge = 20*m_dp;
     m_itemSpacingMedium = 15*m_dp;
     m_itemSpacingSmall = 10*m_dp;
-    m_itemExtraSmall = 8*m_dp;
+    m_itemSpacingExtraSmall = 8*m_dp;
 
     m_fontSizeExtraLarge = 30*m_dp;
     m_fontSizeLarge = 24*m_dp;

src/controls/theme.h

@@ -10,6 +10,7 @@ class Theme : public QObject
     Q_PROPERTY(qreal itemWidthLarge READ itemWidthLarge NOTIFY itemWidthLargeChanged)
     Q_PROPERTY(qreal itemWidthMedium READ itemWidthMedium NOTIFY itemWidthMediumChanged)
     Q_PROPERTY(qreal itemWidthSmall READ itemWidthSmall NOTIFY itemWidthSmallChanged)
+    Q_PROPERTY(qreal itemWidthExtraSmall READ itemWidthExtraSmall NOTIFY itemWidthExtraSmallChanged)
 
     Q_PROPERTY(qreal itemHeightHuge READ itemHeightHuge NOTIFY itemHeightHugeChanged)
     Q_PROPERTY(qreal itemHeightExtraLarge READ itemHeightExtraLarge NOTIFY itemHeightExtraLargeChanged)
@@ -22,7 +23,7 @@ class Theme : public QObject
     Q_PROPERTY(qreal itemSpacingLarge READ itemSpacingLarge NOTIFY itemSpacingLargeChanged)
     Q_PROPERTY(qreal itemSpacingMedium READ itemSpacingMedium NOTIFY itemSpacingMediumChanged)
     Q_PROPERTY(qreal itemSpacingSmall READ itemSpacingSmall NOTIFY itemSpacingSmallChanged)
-    Q_PROPERTY(qreal itemExtraSmall READ itemExtraSmall NOTIFY itemExtraSmallChanged)
+    Q_PROPERTY(qreal itemSpacingExtraSmall READ itemSpacingExtraSmall NOTIFY itemSpacingExtraSmallChanged)
 
     Q_PROPERTY(int fontSizeExtraLarge READ fontSizeExtraLarge NOTIFY fontSizeExtraLargeChanged)
     Q_PROPERTY(int fontSizeLarge READ fontSizeLarge NOTIFY fontSizeLargeChanged)
@@ -48,6 +49,7 @@ public:
     qreal itemWidthLarge(){return m_itemWidthLarge;}
     qreal itemWidthMedium(){return m_itemWidthMedium;}
     qreal itemWidthSmall(){return m_itemWidthSmall;}
+    qreal itemWidthExtraSmall(){return m_itemWidthExtraSmall;}
 
     qreal itemHeightHuge(){return m_itemHeightHuge;}
     qreal itemHeightExtraLarge(){return m_itemHeightExtraLarge;}
@@ -60,7 +62,7 @@ public:
     qreal itemSpacingLarge(){return m_itemSpacingLarge;}
     qreal itemSpacingMedium(){return m_itemSpacingMedium;}
     qreal itemSpacingSmall(){return m_itemSpacingSmall;}
-    qreal itemExtraSmall(){return m_itemExtraSmall;}
+    qreal itemSpacingExtraSmall(){return m_itemExtraSmall;}
 
     int fontSizeExtraLarge(){return m_fontSizeExtraLarge;}
     int fontSizeLarge(){return m_fontSizeLarge;}
@@ -85,6 +87,7 @@ signals:
     void itemWidthLargeChanged();
     void itemWidthMediumChanged();
     void itemWidthSmallChanged();
+    void itemWidthExtraSmallChanged();
 
     void itemHeightHugeChanged();
     void itemHeightExtraLargeChanged();
@@ -97,7 +100,7 @@ signals:
     void itemSpacingLargeChanged();
     void itemSpacingMediumChanged();
     void itemSpacingSmallChanged();
-    void itemExtraSmallChanged();
+    void itemSpacingExtraSmallChanged();
 
     void fontSizeExtraLargeChanged();
     void fontSizeLargeChanged();
@@ -121,6 +124,7 @@ private:
     qreal m_itemWidthLarge;        //320
     qreal m_itemWidthMedium;       //240
     qreal m_itemWidthSmall;        //120
+    qreal m_itemWidthExtraSmall;   //72
 
     qreal m_itemHeightHuge;        //80
     qreal m_itemHeightExtraLarge;  //75
@@ -133,7 +137,7 @@ private:
     qreal m_itemSpacingLarge;       //20
     qreal m_itemSpacingMedium;      //15
     qreal m_itemSpacingSmall;       //10
-    qreal m_itemExtraSmall;         //8
+    qreal m_itemSpacingExtraSmall;         //8
 
     int m_fontSizeExtraLarge;     //30
     int m_fontSizeLarge;          //24

src/styles/CheckBoxStyle.qml

@@ -37,12 +37,12 @@ CheckBoxStyle {
     indicator: Rectangle {
             id: background
             color: "transparent"
-            implicitWidth: size.dp(72)
-            implicitHeight: size.dp(32)
+            implicitWidth: Theme.itemWidthExtraSmall
+            implicitHeight: Theme.itemHeightExtraSmall
 
             Rectangle {
                 id: back1
-                implicitWidth: size.dp(72)
+                implicitWidth: Theme.itemWidthExtraSmall
                 implicitHeight: size.dp(28)
                 color: Theme.accentColor
                 anchors.centerIn: parent
@@ -50,7 +50,7 @@ CheckBoxStyle {
 
             Rectangle {
                 id: back2
-                implicitWidth: size.dp(72)
+                implicitWidth: Theme.itemWidthExtraSmall
                 implicitHeight: size.dp(28)
                 color: Theme.fillDarkColor
                 anchors.centerIn: parent
@@ -60,7 +60,7 @@ CheckBoxStyle {
             Image {
                 id: ball
                 width: size.dp(40)
-                height: size.dp(32)
+                height: Theme.itemHeightExtraSmall
                 source: "images/switch-ball.png"
                 anchors.verticalCenter: parent.verticalCenter
             }
@@ -79,7 +79,7 @@ CheckBoxStyle {
             Component.onCompleted: {
                 back1.opacity = control.checked ? 1 : 0
                 back2.opacity = control.checked ? 0 : 1
-                ball.x = control.checked ? size.dp(32) : 0
+                ball.x = control.checked ? Theme.itemHeightExtraSmall : 0
             }
 
             SequentialAnimation {
@@ -88,7 +88,7 @@ CheckBoxStyle {
                 NumberAnimation {
                     target: ball
                     property: "x"
-                    to: size.dp(32)
+                    to: Theme.itemHeightExtraSmall
                     duration: 120
                 }
                 NumberAnimation {

src/styles/SliderStyle.qml

@@ -26,8 +26,8 @@ SliderStyle{
     handle: Rectangle {
         id: handle
         anchors.centerIn: parent
-        color: "black"
-        border.color: "#0091e5"
+        color: Theme.backgroundColor
+        border.color: Theme.accentColor
         border.width: 2
         implicitWidth: size.dp(34)
         implicitHeight: size.dp(34)
@@ -39,7 +39,7 @@ SliderStyle{
             anchors.centerIn: parent
             text: parseInt(control.value*100)
             visible: control.showValue
-            color: "white"
+            color: Theme.textColor
         }
     }
 
@@ -48,13 +48,13 @@ SliderStyle{
 
         implicitHeight: size.dp(16)
         implicitWidth: size.dp(440)
-        color: "#313131"
+        color: Theme.fillDarkColor
         z: 1
         Rectangle{
             id: dataLine
             height: parent.height
             width: styleData.handlePosition
-            color: "#0091e5"
+            color: Theme.accentColor
         }
 
         Image {

src/styles/TextFieldStyle.qml

@@ -25,14 +25,17 @@ TextFieldStyle {
     selectedTextColor: Theme.textColor
     selectionColor: Theme.accentColor
     textColor: Theme.textColor
-    font.pointSize: size.dp(14)
+    font.pointSize: Theme.fontSizeTiny
     font.family: Theme.fontFamily
 
     background: Item {
-        anchors.leftMargin: size.dp(16)
-        anchors.rightMargin: size.dp(16)
-        implicitHeight: size.dp(50)
-        implicitWidth: size.dp(320)
+        anchors{
+            leftMargin: Theme.itemSpacingMedium
+            rightMargin: Theme.itemSpacingMedium
+        }
+
+        implicitHeight: Theme.itemHeightMedium
+        implicitWidth: Theme.itemWidthLarge
         opacity: control.enabled ? 1 : 0.6
         Image {
             anchors.fill: parent

src/styles/ToolBarStyle.qml

@@ -28,7 +28,7 @@ Style {
     padding.bottom: 3
 
     property Component panel: Item {
-        implicitHeight: size.dp(75)
+        implicitHeight:Theme.itemHeightExtraLarge
         implicitWidth: size.dp(40)
         Rectangle {
             anchors.fill: parent

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: size.dp(50)
-        implicitHeight: size.dp(50)
+        implicitWidth: Theme.itemHeightMedium
+        implicitHeight: implicitWidth
 
         opacity: control.pressed ? 0.5 : 1
 
@@ -47,7 +47,7 @@ Style {
             id: icon
             anchors.fill: parent
             fillMode: Image.PreserveAspectFit
-            anchors.margins: size.dp(8)
+            anchors.margins: Theme.itemSpacingExtraSmall
             source: control.iconSource
         }
     }