Settings-plugin update

Task-number: QTBUG-63091
Change-Id: I116e768704f61c54d393ff00416ef03cc1885c0b
Reviewed-by: Kari Oikarinen <kari.oikarinen@qt.io>
Reviewed-by: Teemu Holappa <teemu.holappa@qt.io>

14 files changed, 608 insertions, 554 deletions

diff --git a/src/settingsui/bluetooth/Bluetooth.qml b/src/settingsui/bluetooth/Bluetooth.qml
index dba1a5c..f55d90c 100644
--- a/src/settingsui/bluetooth/Bluetooth.qml
+++ b/src/settingsui/bluetooth/Bluetooth.qml
@@ -33,32 +33,10 @@ import QtDeviceUtilities.BluetoothSettings 1.0
 
 Item {
     id: root
-    property string title: qsTr("Bluetooth Settings")
 
-    Text {
-        id: bluetoothText
-        anchors.top: parent.top
-        anchors.left: parent.left
-        fontSizeMode: Text.Fit
-        minimumPixelSize: 1
-        font.pixelSize: parent.height * 0.05
-        color: "white"
-        text: qsTr("Bluetooth")
-        font.family: appFont
-        font.styleName: "Bold"
-    }
-
-    Rectangle {
-        id: btmLine
-        anchors.top: bluetoothText.bottom
-        anchors.topMargin: parent.height * 0.025
-        anchors.left: bluetoothText.left
-        width: parent.width * 0.275
-        height: parent.height * 0.005
-    }
     Row {
         id: bluetoothRow
-        anchors.top: btmLine.bottom
+        anchors.top: parent.top
         anchors.topMargin: parent.height * 0.05
         anchors.left: parent.left
         anchors.right: parent.right
diff --git a/src/settingsui/display/Display.qml b/src/settingsui/display/Display.qml
index 908bd95..4bdf9a2 100644
--- a/src/settingsui/display/Display.qml
+++ b/src/settingsui/display/Display.qml
@@ -34,177 +34,156 @@ import QtDemoLauncher.QtButtonImageProvider 1.0
 
 Item {
     id: root
-    property string title: qsTr("Display Settings")
-    property int titleWidth: width * 0.382
-    property int margin: root.width * 0.05
+    anchors.fill: parent
 
-    Text {
-        id: displayText
+    Column {
+        spacing: pluginMain.spacing
         anchors.top: parent.top
-        anchors.left: parent.left
-        font.pixelSize: parent.height * 0.045
-        color: "white"
-        text: qsTr("Display")
-    }
+        anchors.topMargin: pluginMain.margin
 
-    Rectangle {
-        id: btmLine
-        anchors.top: displayText.bottom
-        anchors.topMargin: parent.height * 0.025
-        anchors.left: displayText.left
-        width: parent.width * 0.275
-        height: parent.height * 0.005
-    }
+        Text {
+            verticalAlignment: Text.AlignVCenter
+            font.pixelSize: pluginMain.subTitleFontSize
+            text: qsTr("Brightness ") + (brightnessSlider.value / 255 * 100).toFixed(1) + "%"
+            color: "white"
+            height: pluginMain.fieldTextHeight
+        }
 
-    Label {
-        id: brightnessLabel
-        anchors.top: btmLine.bottom
-        anchors.topMargin: parent.height * 0.1
-        font.pixelSize: parent.height * 0.04
-        text: qsTr("Brightness ") + (brightnessSlider.valueAt(brightnessSlider.position) / 255 * 100).toFixed(1) + "%"
-        horizontalAlignment: Text.AlignRight
-        color: "white"
-    }
+        Slider {
+            id: brightnessSlider
+            width: root.width
+            height: pluginMain.buttonHeight
+            Layout.alignment: Qt.AlignVCenter
+            Layout.fillWidth: true
+            from: 0
+            to: 255
+            onValueChanged: DisplaySettings.setDisplayBrightness(value)
 
-    Slider {
-        id: brightnessSlider
-        anchors.top: brightnessLabel.bottom
-        anchors.topMargin: parent.height * 0.05
-        anchors.left: parent.left
-        anchors.right: parent.right
-        value: DisplaySettings.displayBrightness
-        Layout.alignment: Qt.AlignVCenter
-        Layout.fillWidth: true
-        from: 0
-        to: 255
-        background: Rectangle {
-            id: sliderBackground
-            x: brightnessSlider.leftPadding
-            y: brightnessSlider.topPadding + brightnessSlider.availableHeight / 2 - height / 2
-            implicitWidth: root.width
-            implicitHeight: root.height * 0.01
-            width: brightnessSlider.availableWidth
-            height: implicitHeight
-            radius: 2
-            color: "#9d9faa"
-            Rectangle {
-                width: brightnessSlider.visualPosition * parent.width
-                height: parent.height
-                color: "white"
+            background: Rectangle {
+                id: sliderBackground
+                x: brightnessSlider.leftPadding
+                y: brightnessSlider.topPadding + brightnessSlider.availableHeight / 2 - height / 2
+                implicitWidth: root.width
+                implicitHeight: root.height * 0.01
+                width: brightnessSlider.availableWidth
+                height: implicitHeight
                 radius: 2
+                color: "#9d9faa"
+                Rectangle {
+                    width: brightnessSlider.visualPosition * parent.width
+                    height: parent.height
+                    color: "white"
+                    radius: 2
+                }
             }
+            handle: Rectangle {
+                x: brightnessSlider.leftPadding + brightnessSlider.visualPosition * (brightnessSlider.availableWidth - width)
+                y: brightnessSlider.topPadding + brightnessSlider.availableHeight / 2 - height / 2
+                height: sliderBackground.height * 7
+                width: height
+                radius: width * 0.5
+                antialiasing: true
+                color: "#41cd52"
+            }
+
+            Component.onCompleted:  brightnessSlider.value = DisplaySettings.displayBrightness
         }
-        handle: Rectangle {
-            x: brightnessSlider.leftPadding + brightnessSlider.visualPosition * (brightnessSlider.availableWidth - width)
-            y: brightnessSlider.topPadding + brightnessSlider.availableHeight / 2 - height / 2
-            height: sliderBackground.height * 7
-            width: height
-            radius: 1000
-            antialiasing: true
-            color: "#41cd52"
-        }
-    }
 
-    Label {
-        id: screenSizeLabel
-        anchors.top: brightnessSlider.bottom
-        anchors.topMargin: parent.height * 0.1
-        font.pixelSize: parent.height * 0.04
-        text: qsTr("Physical screen size")
-        Layout.preferredWidth: root.titleWidth
-        Layout.alignment: Qt.AlignVCenter
-        horizontalAlignment: Text.AlignRight
-        wrapMode: Label.WordWrap
-        color: "white"
-    }
+        Item {
+            height: pluginMain.margin
+            width: 1
+        }
 
-    Row {
-        id: widthRow
-        height: parent.height * 0.075
-        anchors.top: screenSizeLabel.bottom
-        anchors.topMargin: parent.height * 0.035
-        anchors.left: parent.left
         Text {
-            id: widthText
-            height: parent.height
-            width: root.width * 0.075
-            text: qsTr("Width")
-            color: "white"
-            font.pixelSize: height * 0.35
             verticalAlignment: Text.AlignVCenter
-            horizontalAlignment: Text.AlignLeft
+            height: pluginMain.fieldTextHeight
+            font.pixelSize: pluginMain.subTitleFontSize
+            text: qsTr("Physical screen size")
+            Layout.preferredWidth: root.width * 0.3
+            Layout.alignment: Qt.AlignVCenter
+            wrapMode: Label.WordWrap
+            color: "white"
         }
-        TextField {
-            id: widthField
-            width: root.width * 0.1
-            height: parent.height
-            color: "black"
-            text: DisplaySettings.physicalScreenWidthMm
-            inputMethodHints: Qt.ImhDigitsOnly
-            background: Rectangle {
-                border.color: widthField.focus ? "#41cd52" : "transparent"
-                border.width: parent.width * 0.05
+
+        Row {
+            spacing: pluginMain.spacing
+
+            Text {
+                id: widthText
+                height: pluginMain.buttonHeight
+                width: root.width * 0.1
+                text: qsTr("Width")
+                color: "white"
+                font.pixelSize: pluginMain.valueFontSize
+                verticalAlignment: Text.AlignVCenter
+                horizontalAlignment: Text.AlignLeft
+            }
+            TextField {
+                id: widthField
+                height: pluginMain.buttonHeight
+                width: widthText.width
+                color: "black"
+                text: DisplaySettings.physicalScreenWidthMm
+                inputMethodHints: Qt.ImhDigitsOnly
+                background: Rectangle {
+                    border.color: widthField.focus ? "#41cd52" : "transparent"
+                    border.width: parent.width * 0.05
+                }
+            }
+            Item {
+                width: pluginMain.spacing
+                height: 1
             }
-        }
-    }
 
-    Row {
-        id: heightRow
-        height: parent.height * 0.075
-        anchors.top: screenSizeLabel.bottom
-        anchors.topMargin: parent.height * 0.035
-        anchors.left: widthRow.right
-        anchors.leftMargin: root.margin * 0.5
-        Text {
-            id: heightText
-            height: parent.height
-            width: root.width * 0.085
-            text: qsTr("Height")
-            color: "white"
-            font.pixelSize: height * 0.35
-            verticalAlignment: Text.AlignVCenter
-            horizontalAlignment: Text.AlignLeft
-        }
-        TextField {
-            id: heightField
-            width: root.width * 0.1
-            height: parent.height
-            color: "black"
-            text: DisplaySettings.physicalScreenHeightMm
-            inputMethodHints: Qt.ImhDigitsOnly
-            background: Rectangle {
-                border.color: heightField.focus ? "#41cd52" : "transparent"
-                border.width: parent.width * 0.05
+            Text {
+                id: heightText
+                height: pluginMain.buttonHeight
+                width: widthText.width
+                text: qsTr("Height")
+                color: "white"
+                font.pixelSize: pluginMain.valueFontSize
+                verticalAlignment: Text.AlignVCenter
+                horizontalAlignment: Text.AlignLeft
+            }
+            TextField {
+                id: heightField
+                width: widthText.width
+                height: pluginMain.buttonHeight
+                color: "black"
+                text: DisplaySettings.physicalScreenHeightMm
+                inputMethodHints: Qt.ImhDigitsOnly
+                background: Rectangle {
+                    border.color: heightField.focus ? "#41cd52" : "transparent"
+                    border.width: parent.width * 0.05
+                }
             }
         }
-    }
 
-    QtButton {
-        id: setButton
-        height: parent.height * 0.075
-        anchors.top: heightRow.bottom
-        anchors.topMargin: parent.height * 0.035
-        fillColor: "#41cd52"
-        borderColor: "transparent"
-        text: qsTr("SET")
-        onClicked: {
-            DisplaySettings.physicalScreenHeightMm = parseInt(heightField.text)
-            DisplaySettings.physicalScreenWidthMm = parseInt(widthField.text)
-        }
-    }
-    QtButton {
-        id: resetButton
-        height: parent.height * 0.075
-        anchors.top: heightRow.bottom
-        anchors.topMargin: parent.height * 0.035
-        anchors.left: setButton.right
-        anchors.leftMargin: root.margin * 0.5
-        borderColor: "transparent"
-        fillColor: "#9d9faa"
-        text: qsTr("RESET TO DEFAULT")
-        onClicked: {
-            DisplaySettings.physicalScreenHeightMm = 90
-            DisplaySettings.physicalScreenWidthMm = 154
+        Row {
+            spacing: pluginMain.spacing
+
+            QtButton {
+                id: setButton
+                height: pluginMain.buttonHeight
+                fillColor: "#41cd52"
+                borderColor: "transparent"
+                text: qsTr("SET")
+                onClicked: {
+                    DisplaySettings.physicalScreenHeightMm = parseInt(heightField.text)
+                    DisplaySettings.physicalScreenWidthMm = parseInt(widthField.text)
+                }
+            }
+            QtButton {
+                id: resetButton
+                height: pluginMain.buttonHeight
+                borderColor: "transparent"
+                fillColor: "#9d9faa"
+                text: qsTr("RESET TO DEFAULT")
+                onClicked: {
+                    DisplaySettings.physicalScreenHeightMm = 90
+                    DisplaySettings.physicalScreenWidthMm = 154
+                }
+            }
         }
     }
 }
diff --git a/src/settingsui/locale/Language.qml b/src/settingsui/locale/Language.qml
index e536583..7904a72 100644
--- a/src/settingsui/locale/Language.qml
+++ b/src/settingsui/locale/Language.qml
@@ -37,30 +37,9 @@ Item {
     id: root
     property var currentRegion: Qt.locale(LocaleManager.locale)
 
-    Text {
-        id: languageAndRegionTitle
-        anchors.top: parent.top
-        anchors.left: parent.left
-        fontSizeMode: Text.Fit
-        minimumPixelSize: 1
-        font.pixelSize: parent.height * 0.05
-        color: "white"
-        text: qsTr("Language & Region")
-        font.family: appFont
-        font.styleName: "Bold"
-    }
-    Rectangle {
-        id: btmLine
-        anchors.top: languageAndRegionTitle.bottom
-        anchors.topMargin: parent.height * 0.025
-        anchors.left: languageAndRegionTitle.left
-        width: parent.width * 0.275
-        height: parent.height * 0.005
-    }
-
     Row {
         id: regionRow
-        anchors.top: btmLine.bottom
+        anchors.top: parent.top
         anchors.topMargin: parent.height * 0.075
         anchors.left: parent.left
         height: parent.height * 0.075
diff --git a/src/settingsui/network/NetworkSettings.qml b/src/settingsui/network/NetworkSettings.qml
index 56c62a8..0becc55 100644
--- a/src/settingsui/network/NetworkSettings.qml
+++ b/src/settingsui/network/NetworkSettings.qml
@@ -33,31 +33,9 @@ import QtDeviceUtilities.NetworkSettings 1.0
 import QtDemoLauncher.QtButtonImageProvider 1.0
 
 Item {
-    Text {
-        id: networkText
-        anchors.top: parent.top
-        anchors.left: parent.left
-        fontSizeMode: Text.Fit
-        minimumPixelSize: 1
-        font.pixelSize: parent.height * 0.05
-        color: "white"
-        text: qsTr("Network")
-        font.family: appFont
-        font.styleName: "Bold"
-    }
-
-    Rectangle {
-        id: btmLine
-        anchors.top: networkText.bottom
-        anchors.topMargin: parent.height * 0.025
-        anchors.left: networkText.left
-        width: parent.width * 0.275
-        height: parent.height * 0.005
-    }
-
     NetworkListView {
         id: networkList
-        anchors.top: btmLine.bottom
+        anchors.top: parent.top
         anchors.topMargin: parent.height * 0.025
         anchors.left: parent.left
         anchors.right: parent.right
diff --git a/src/settingsui/power/Power.qml b/src/settingsui/power/Power.qml
index 5adaaa6..4d924a5 100644
--- a/src/settingsui/power/Power.qml
+++ b/src/settingsui/power/Power.qml
@@ -32,57 +32,28 @@ import QtDemoLauncher.QtButtonImageProvider 1.0
 
 Item {
     id: root
-    property int margin: root.width * 0.05
 
-    Text {
-        id: powerText
+    Column {
         anchors.top: parent.top
-        anchors.left: parent.left
-        fontSizeMode: Text.Fit
-        minimumPixelSize: 1
-        font.pixelSize: parent.height * 0.05
-        color: "white"
-        text: qsTr("Power")
-        font.family: appFont
-        font.styleName: "Bold"
-    }
-    Rectangle {
-        id: btmLine
-        anchors.top: powerText.bottom
-        anchors.topMargin: parent.height * 0.025
-        anchors.left: powerText.left
-        width: parent.width * 0.275
-        height: parent.height * 0.005
-    }
+        spacing: pluginMain.margin
 
-    QtButton {
-        id: shutdownButton
-        width: btmLine.width
-        height: parent.height * 0.075
-        anchors.top: btmLine.bottom
-        anchors.topMargin: parent.height * 0.05
-        fillColor: "#41cd52"
-        borderColor: "transparent"
-        text: qsTr("SHUTDOWN")
-        onClicked: {
-            shutdownPopup.powerOffText = qsTr("Shut down the system?")
-            shutdownPopup.buttonText = qsTr("SHUT DOWN")
-            shutdownPopup.open()
+        QtButton {
+            id: shutdownButton
+            width: root.width * 0.25
+            height: pluginMain.fieldHeight
+            fillColor: "#41cd52"
+            borderColor: "transparent"
+            text: qsTr("SHUTDOWN")
+            onClicked: shutdownPopup.open(true)
         }
-    }
-    QtButton {
-        id: rebootButton
-        width: btmLine.width
-        height: parent.height * 0.075
-        anchors.top: shutdownButton.bottom
-        anchors.topMargin: parent.height * 0.05
-        fillColor: "#41cd52"
-        borderColor: "transparent"
-        text: qsTr("REBOOT")
-        onClicked: {
-            shutdownPopup.powerOffText = qsTr("Reboot the system?")
-            shutdownPopup.buttonText = qsTr("REBOOT")
-            shutdownPopup.open()
+        QtButton {
+            id: rebootButton
+            width: root.width * 0.25
+            height: pluginMain.fieldHeight
+            fillColor: "#41cd52"
+            borderColor: "transparent"
+            text: qsTr("REBOOT")
+            onClicked: shutdownPopup.open(false)
         }
     }
 }
diff --git a/src/settingsui/settingsuiapp.qrc b/src/settingsui/settingsuiapp.qrc
index 5af642c..e0170de 100644
--- a/src/settingsui/settingsuiapp.qrc
+++ b/src/settingsui/settingsuiapp.qrc
@@ -10,5 +10,9 @@
         <file>network/PassphraseEnter.qml</file>
         <file>locale/TableKey.qml</file>
         <file>locale/TableValue.qml</file>
+        <file>settingsuiplugin/SettingsDelegate.qml</file>
+        <file>settingsuiplugin/SettingsHeader.qml</file>
+        <file>settingsuiplugin/SettingsTitleItem.qml</file>
+        <file>settingsuiplugin/ShutdownPopup.qml</file>
     </qresource>
 </RCC>
diff --git a/src/settingsui/settingsuiplugin/SettingsDelegate.qml b/src/settingsui/settingsuiplugin/SettingsDelegate.qml
new file mode 100644
index 0000000..abb864e
--- /dev/null
+++ b/src/settingsui/settingsuiplugin/SettingsDelegate.qml
@@ -0,0 +1,85 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.0
+import QtGraphicalEffects 1.0
+
+Item {
+    width: settingsList.width
+    height: settingsList.height * 0.08
+
+    property bool isSelected: settingsList.currentIndex == index
+
+    Image {
+        id: img
+        sourceSize.width: parent.width
+        sourceSize.height: parent.height
+        source: icon
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: parent.width * 0.075
+        height: Math.min(parent.width * 0.5, parent.height * 0.6)
+        width: height
+        fillMode: Image.PreserveAspectFit
+        visible: parent.isSelected ? false : true
+    }
+    ColorOverlay {
+        source: img
+        anchors.fill: img
+        visible: parent.isSelected ? true : false
+        color: "#41cd52"
+    }
+
+    Text {
+        text: title
+        height: parent.height * 0.75
+        anchors.right: parent.right
+        anchors.left: img.right
+        anchors.leftMargin: parent.width * 0.025
+        anchors.verticalCenter: parent.verticalCenter
+        fontSizeMode: Text.Fit
+        minimumPixelSize: 1
+        font.pixelSize: Math.min(parent.width * 0.25, parent.height)
+        color: parent.isSelected ? "#41cd52" : "white"
+        wrapMode: Text.WordWrap
+        verticalAlignment: Text.AlignVCenter
+        font.family: appFont
+        font.styleName: parent.isSelected ? "Bold" : "Regular"
+    }
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        onClicked: {
+            settingsList.currentIndex = index
+            settingsLoader.source = path + '/' + view + '.qml'
+            titleItem.title = title
+        }
+    }
+
+    Component.onCompleted: pluginMain.init()
+}
diff --git a/src/settingsui/settingsuiplugin/SettingsHeader.qml b/src/settingsui/settingsuiplugin/SettingsHeader.qml
new file mode 100644
index 0000000..9432789
--- /dev/null
+++ b/src/settingsui/settingsuiplugin/SettingsHeader.qml
@@ -0,0 +1,118 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.0
+import QtDeviceUtilities.NetworkSettings 1.0
+
+Item {
+    id: header
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: parent.top
+    anchors.margins: pluginMain.margin
+    height: pluginMain.margin * 4
+
+    signal clicked()
+
+    function refreshIP() {
+        var networkCount = NetworkSettingsManager.services.sourceModel.rowCount();
+        var ipAddress = "Not Found";
+        for (var i = 0; i < networkCount; ++i) {
+            var networkService = NetworkSettingsManager.services.itemFromRow(i);
+            var tmp = NetworkSettingsManager.services.itemFromRow(i).ipv4.address;
+            if (tmp !== "" && ipAddress === "Not Found")
+                ipAddress = tmp;
+
+            if (networkService.type === NetworkSettingsType.Wired &&
+                    (networkService.status === NetworkSettingsState.Ready ||
+                     networkService.status === NetworkSettingsState.Online)) {
+                break;
+            }
+        }
+        ipItem.text = qsTr("Device IP: ") + ipAddress;
+    }
+
+    Image {
+        id: backButton
+        anchors.left: parent.left
+        anchors.top: parent.top
+        source: "../newIcons/back_icon.svg"
+        height: parent.height * 0.5
+        width: height / sourceSize.height * sourceSize.width
+        MouseArea {
+            anchors.fill: parent
+            anchors.margins: -parent.height * 0.2
+            onClicked: header.clicked()
+        }
+    }
+
+    Text {
+        id: settingsText
+        anchors.left: backButton.right
+        anchors.verticalCenter: backButton.verticalCenter
+        font.pixelSize: parent.height * 0.45
+        text: qsTr("Settings")
+        color: "white"
+        font.family: appFont
+        font.styleName: "SemiBold"
+        MouseArea {
+            anchors.fill: parent
+            anchors.margins: -parent.height * 0.2
+            onClicked: header.clicked()
+        }
+    }
+
+    Text {
+        id: ipItem
+        width: parent.width * 0.25
+        height: parent.height
+        anchors.verticalCenter: settingsText.verticalCenter
+        anchors.right: parent.right
+        anchors.rightMargin: pluginMain.margin
+        horizontalAlignment: Text.AlignRight
+        verticalAlignment: Text.AlignVCenter
+        font.pixelSize: parent.height * 0.3
+        color: "white"
+        font.family: appFont
+        font.styleName: "SemiBold"
+        text: qsTr("Device IP: ")
+
+        MouseArea {
+            anchors.fill: parent
+            onClicked: header.refreshIP()
+        }
+    }
+
+    Component.onCompleted: {
+        var networkCount = NetworkSettingsManager.services.sourceModel.rowCount();
+        for (var i = 0; i < networkCount; ++i) {
+            NetworkSettingsManager.services.itemFromRow(i).ipv4Changed.connect(refreshIP);
+        }
+        header.refreshIP()
+    }
+}
diff --git a/src/settingsui/settingsuiplugin/SettingsTitleItem.qml b/src/settingsui/settingsuiplugin/SettingsTitleItem.qml
new file mode 100644
index 0000000..0ead0c6
--- /dev/null
+++ b/src/settingsui/settingsuiplugin/SettingsTitleItem.qml
@@ -0,0 +1,57 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.0
+
+Column {
+    id: page
+    spacing: pluginMain.spacing
+
+    property alias title: displayText.text
+
+    Text {
+        id: displayText
+        font.pixelSize: pluginMain.titleFontSize
+        color: "white"
+        fontSizeMode: Text.Fit
+        minimumPixelSize: 1
+        font.family: appFont
+        font.styleName: "Bold"
+    }
+
+    Rectangle {
+        id: btmLine
+        width: page.parent.width * 0.3
+        height: 3
+    }
+
+    Item {
+        height: pluginMain.margin
+        width: 1
+    }
+}
diff --git a/src/settingsui/settingsuiplugin/ShutdownPopup.qml b/src/settingsui/settingsuiplugin/ShutdownPopup.qml
new file mode 100644
index 0000000..916a2fe
--- /dev/null
+++ b/src/settingsui/settingsuiplugin/ShutdownPopup.qml
@@ -0,0 +1,109 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.0
+
+Rectangle {
+    id: shutdownPopup
+    width: parent.width
+    height: parent.height
+    color: "#09102b"
+    opacity: 0.9
+
+    signal accepted()
+    property bool shutdown: false
+
+    function open(sd)
+    {
+        shutdown = sd
+        if (sd) {
+            shutDownConfirmText.text = qsTr("Shut down the system?")
+            shutDownConfirm.text = qsTr("SHUT DOWN")
+        }
+        else {
+            shutDownConfirmText.text = qsTr("Reboot the system?")
+            shutDownConfirm.text = qsTr("REBOOT")
+        }
+
+        visible = true;
+    }
+
+    function close()
+    {
+        visible = false;
+    }
+
+    Rectangle {
+        id: frame
+        color: "#09102b"
+        border.color: "#9d9faa"
+        border.width: 3
+        anchors.centerIn: parent
+        width: parent.width * 0.35
+        height: parent.height * 0.4
+
+        Column {
+            anchors.centerIn: parent
+            spacing: viewSettings.pageMargin
+
+            Text {
+                id: shutDownConfirmText
+                width: frame.width * 0.75
+                height: frame.height * 0.25
+                horizontalAlignment: Text.AlignHCenter
+                anchors.horizontalCenter: parent.horizontalCenter
+                fontSizeMode: Text.Fit
+                minimumPixelSize: 1
+                font.pixelSize: frame.width * 0.3
+                color: "white"
+                font.family: viewSettings.appFont
+                font.styleName: "SemiBold"
+                text: ""
+            }
+            QtButton {
+                id: shutDownConfirm
+                height: frame.height * 0.15
+                width: frame.width * 0.45
+                anchors.horizontalCenter: parent.horizontalCenter
+                text: ""
+                borderColor: "transparent"
+                fillColor: viewSettings.buttonGreenColor
+                onClicked: shutdownPopup.accepted()
+            }
+            QtButton {
+                height: frame.height * 0.15
+                width: frame.width * 0.45
+                anchors.horizontalCenter: parent.horizontalCenter
+                borderColor: "transparent"
+                fillColor: viewSettings.buttonGrayColor
+                text: qsTr("CANCEL")
+                onClicked: shutdownPopup.close()
+            }
+        }
+    }
+}
diff --git a/src/settingsui/settingsuiplugin/plugin.qrc b/src/settingsui/settingsuiplugin/plugin.qrc
index 9449ab1..733c164 100644
--- a/src/settingsui/settingsuiplugin/plugin.qrc
+++ b/src/settingsui/settingsuiplugin/plugin.qrc
@@ -32,5 +32,9 @@
         <file>../network/PassphraseEnter.qml</file>
         <file>../locale/TableKey.qml</file>
         <file>../locale/TableValue.qml</file>
+        <file>SettingsHeader.qml</file>
+        <file>SettingsDelegate.qml</file>
+        <file>SettingsTitleItem.qml</file>
+        <file>ShutdownPopup.qml</file>
     </qresource>
 </RCC>
diff --git a/src/settingsui/settingsuiplugin/pluginMain.qml b/src/settingsui/settingsuiplugin/pluginMain.qml
index e8df0de..1014cdb 100644
--- a/src/settingsui/settingsuiplugin/pluginMain.qml
+++ b/src/settingsui/settingsuiplugin/pluginMain.qml
@@ -36,293 +36,109 @@ import QtDeviceUtilities.NetworkSettings 1.0
 import QtGraphicalEffects 1.0
 import QtDemoLauncher.QtButtonImageProvider 1.0
 
-Item {
-    id: root
+Rectangle {
+    id: pluginMain
     anchors.fill: parent
     visible: true
-    property var service
-    property int margin: (root.width / 3 * 2) * 0.05
-    property alias model: xmlModel.source
-    property alias backgroundColor: background.color
-    signal closed()
+    color: "#09102b"
+    opacity: 0.97
 
-    Rectangle {
-        id: background
-        anchors.fill:parent
-        color: "#09102b"
-    }
+    property bool __initialized: false
+    property var service
+    property int margin: (pluginMain.width / 3 * 2) * 0.05
+    property int spacing: margin * 0.5
+    property int titleFontSize: height * 0.04
+    property int subTitleFontSize: height * 0.035
+    property int valueFontSize: height * 0.03
+    property int fieldHeight: height * 0.07
+    property int fieldTextHeight: height * 0.05
+    property int buttonHeight: height * 0.05
 
-    Item {
-        id: header
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.top: parent.top
-        height: parent.height * 0.125
+    property alias model: xmlModel.source
 
-        Image {
-            id: backButton
-            sourceSize.width: parent.width
-            sourceSize.height: parent.height
-            height: parent.height * 0.5
-            width: height
-            anchors.left: parent.left
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.margins: parent.height * .25
-            fillMode: Image.PreserveAspectFit
-            source: "../newIcons/back_icon.svg"
-            MouseArea {
-                anchors.fill: parent
-                onClicked: {
-                    root.closed()
-                }
+    function init()
+    {
+        if (!__initialized) {
+            __initialized = true;
+            settingsHeader.refreshIP()
+            settingsList.currentIndex = 0
+            if (xmlModel.count >= 1) {
+                settingsLoader.source = xmlModel.get(0).path + '/' +
+                                        xmlModel.get(0).view + '.qml'
+                titleItem.title = xmlModel.get(0).title
+            } else {
+                titleItem.title = qsTr("No settings")
             }
         }
+    }
 
-        Text {
-            id: settingsText
-            anchors.left: backButton.right
-            anchors.verticalCenter: parent.verticalCenter
-            font.pixelSize: parent.height * 0.45
-            text: qsTr("Settings")
-            color: "white"
-            font.family: appFont
-            font.styleName: "SemiBold"
-        }
-
-        Item {
-            id: ipItem
-            width: parent.width * 0.25
-            height: parent.height
-            anchors.right: parent.right
-            anchors.rightMargin: root.margin
-            property alias ipAddressText: ipText.text
-            property var lastService
-            property var currentService: NetworkSettingsManager.services.itemFromRow(0)
-            Text {
-                id: ipText
-                anchors.fill: parent
-                horizontalAlignment: Text.AlignRight
-                verticalAlignment: Text.AlignVCenter
-                font.pixelSize: parent.height * 0.25
-                color: "white"
-                text: qsTr("Device IP: ")
-                font.family: appFont
-                font.styleName: "SemiBold"
-            }
-
-            MouseArea {
-                anchors.fill: parent
-                onClicked: {
-                    parent.refreshIP()
-                }
-            }
-
-            function refreshIP() {
-                var networkCount = NetworkSettingsManager.services.sourceModel.rowCount();
-                var ipAddress = "Not Found";
-                for (var i = 0; i < networkCount; ++i) {
-                    var networkService = NetworkSettingsManager.services.itemFromRow(i);
-                    var tmp = NetworkSettingsManager.services.itemFromRow(i).ipv4.address;
-                    if (tmp !== "" && ipAddress === "Not Found")
-                        ipAddress = tmp;
+    signal closed()
 
-                    if (networkService.type === NetworkSettingsType.Wired &&
-                            (networkService.status === NetworkSettingsState.Ready ||
-                             networkService.status === NetworkSettingsState.Online)) {
-                        break;
-                    }
-                }
-                ipText.text = qsTr("Device IP: ") + ipAddress;
-            }
+    XmlListModel {
+        id: xmlModel
+        source: "settingsview.xml"
+        query: "/xml/settings/item"
+        XmlRole { name: "title"; query: "title/string()"}
+        XmlRole { name: "icon"; query: "icon/string()"}
+        XmlRole { name: "view"; query: "view/string()"}
+        XmlRole { name: "path"; query: "path/string()"}
+    }
 
-            Component.onCompleted: {
-                var networkCount = NetworkSettingsManager.services.sourceModel.rowCount();
-                for (var i = 0; i < networkCount; ++i) {
-                    NetworkSettingsManager.services.itemFromRow(i).ipv4Changed.connect(refreshIP);
-                }
-                refreshIP()
-            }
-        }
+    SettingsHeader {
+        id: settingsHeader
+        onClicked: pluginMain.closed()
     }
-    Item {
-        id: listHolder
-        anchors.top: header.bottom
+
+    ListView {
+        id: settingsList
+        anchors.top: settingsHeader.bottom
         anchors.left: parent.left
         anchors.bottom: parent.bottom
         width: parent.width / 3
+        model: xmlModel
 
-        XmlListModel {
-            id: xmlModel
-            source: "settingsview.xml"
-            query: "/xml/settings/item"
-            XmlRole { name: "title"; query: "title/string()"}
-            XmlRole { name: "icon"; query: "icon/string()"}
-            XmlRole { name: "view"; query: "view/string()"}
-            XmlRole { name: "path"; query: "path/string()"}
-        }
-
-        ListView {
-            id: settingsList
-            anchors.fill: parent
-
-            model: xmlModel
-            delegate: Item {
-                id: delegateItem
-                width: settingsList.width
-                height: settingsList.height * 0.08
-
-                property bool isSelected: settingsList.currentIndex == index
-
-                Image {
-                    id: img
-                    sourceSize.width: parent.width
-                    sourceSize.height: parent.height
-                    source: icon
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.left: parent.left
-                    anchors.leftMargin: parent.width * 0.075
-                    height: Math.min(parent.width * 0.5, parent.height * 0.6)
-                    width: height
-                    fillMode: Image.PreserveAspectFit
-                    visible: parent.isSelected ? false : true
-                }
-                ColorOverlay {
-                    source: img
-                    anchors.fill: img
-                    visible: parent.isSelected ? true : false
-                    color: "#41cd52"
-                }
-                Label {
-                    text: title
-                    height: parent.height * 0.75
-                    anchors.right: parent.right
-                    anchors.left: img.right
-                    anchors.leftMargin: parent.width * 0.025
-                    anchors.verticalCenter: parent.verticalCenter
-                    fontSizeMode: Text.Fit
-                    minimumPixelSize: 1
-                    font.pixelSize: Math.min(parent.width * 0.25, parent.height)
-                    color: parent.isSelected ? "#41cd52" : "white"
-                    wrapMode: Text.WordWrap
-                    verticalAlignment: Text.AlignVCenter
-                    font.family: appFont
-                    font.styleName: parent.isSelected ? "Bold" : "Regular"
-                }
-                MouseArea {
-                    id: mouseArea
-                    anchors.fill: parent
-                    onClicked: {
-                        settingsList.currentIndex = index
-                        settingsLoader.source = path + '/' + view + '.qml'
-                    }
-                }
-                Component.onCompleted: {
-                    if (xmlModel.count == 0) {
-                        console.error("Empty xmlModel")
-                        return
-                    }
-                    settingsLoader.source = xmlModel.get(0).path + '/' + xmlModel.get(0).view + '.qml'
-                }
-            }
-        }
+        delegate: SettingsDelegate {}
     }
 
     Rectangle {
         id: rightLine
-        width: parent.width * 0.002
+        width: 3
         height: parent.height * 0.8
-        anchors.horizontalCenter: listHolder.right
-        anchors.top: header.bottom
+        anchors.left: settingsList.right
+        anchors.top: settingsHeader.bottom
         color: "#9d9faa"
     }
 
-    Item {
-        id: loaderItem
-        anchors.top: header.bottom
-        anchors.left: listHolder.right
+    SettingsTitleItem {
+        id: titleItem
+        anchors.left: rightLine.right
         anchors.right: parent.right
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: root.margin
-        anchors.leftMargin: root.margin
-        anchors.rightMargin: root.margin
+        anchors.top: settingsHeader.bottom
+        anchors.leftMargin: pluginMain.margin * 2
+    }
 
-        Loader {
-            id: settingsLoader
-            anchors.fill: parent
-        }
+    Loader {
+        id: settingsLoader
+        anchors.top: titleItem.bottom
+        anchors.left: rightLine.right
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        anchors.leftMargin: pluginMain.margin * 2
+        anchors.rightMargin: pluginMain.margin * 2
     }
 
-    Popup {
+    ShutdownPopup {
         id: shutdownPopup
-        width: parent.width
-        height: parent.height
-        leftPadding: width * 0.3
-        rightPadding: leftPadding
-        topPadding: height * 0.275
-        bottomPadding: topPadding
-
-        property alias powerOffText: poweroffConfirmText.text
-        property alias buttonText: shutdownConfirm.text
+        visible: false
 
-        background: Rectangle {
-            color: "#09102b"
-            opacity: 0.9
-        }
-        contentItem: Rectangle {
-            color: "#09102b"
-            border.color: "#9d9faa"
-            border.width: 3
-            Text {
-                id: poweroffConfirmText
-                width: parent.width * 0.75
-                height: parent.height * 0.1
-                anchors.top: parent.top
-                anchors.topMargin: parent.height * 0.175
-                anchors.horizontalCenter: parent.horizontalCenter
-                horizontalAlignment: Text.AlignHCenter
-                verticalAlignment: Text.AlignVCenter
-                fontSizeMode: Text.Fit
-                minimumPixelSize: 1
-                font.pixelSize: height * 0.9
-                color: "white"
-                font.family: appFont
-                font.styleName: "Light"
-            }
-            QtButton {
-                id: shutdownConfirm
-                width: parent.width * 0.5
-                height: parent.height * 0.15
-                anchors.top: poweroffConfirmText.bottom
-                anchors.topMargin: parent.height * 0.15
-                anchors.horizontalCenter: parent.horizontalCenter
-                fillColor: "#41cd52"
-                borderColor: "transparent"
-
-                onClicked: {
-                    if (shutdownConfirm.text === qsTr("SHUT DOWN")) {
-                        console.log("Powering off!")
-                        LocalDevice.powerOff()
-                    }
-                    else if (shutdownConfirm.text === qsTr("REBOOT")) {
-                        console.log("Rebooting!")
-                        LocalDevice.reboot()
-                    }
-                }
+        onAccepted: {
+            if (shutdown) {
+                console.log("Powering off!")
+                LocalDevice.powerOff()
             }
-            QtButton {
-                id: shutdownCancel
-                width: parent.width * 0.5
-                height: parent.height * 0.15
-                anchors.top: shutdownConfirm.bottom
-                anchors.topMargin: parent.height * 0.1
-                anchors.horizontalCenter: parent.horizontalCenter
-                fillColor: "#9d9faa"
-                borderColor: "transparent"
-                text: qsTr("CANCEL")
-
-                onClicked: {
-                    shutdownPopup.close()
-                }
+            else {
+                console.log("Rebooting!")
+                LocalDevice.reboot()
             }
         }
     }
diff --git a/src/settingsui/settingsuiplugin/settingsuiplugin.pro b/src/settingsui/settingsuiplugin/settingsuiplugin.pro
index 3ff287f..4e2b67d 100644
--- a/src/settingsui/settingsuiplugin/settingsuiplugin.pro
+++ b/src/settingsui/settingsuiplugin/settingsuiplugin.pro
@@ -26,12 +26,10 @@ DISTFILES += \
 
 qmldir.files = qmldir
 
-unix {
-    installPath = $$[QT_INSTALL_QML]/$$replace(uri, \\., /)
-    qmldir.path = $$installPath
-    target.path = $$installPath
-    INSTALLS += target qmldir
-}
+installPath = $$[QT_INSTALL_QML]/$$replace(uri, \\., /)
+qmldir.path = $$installPath
+target.path = $$installPath
+INSTALLS += target qmldir
 
 RESOURCES += \
     icons.qrc \
diff --git a/src/settingsui/timedate/TimeDate.qml b/src/settingsui/timedate/TimeDate.qml
index 5e9c34c..7a27047 100644
--- a/src/settingsui/timedate/TimeDate.qml
+++ b/src/settingsui/timedate/TimeDate.qml
@@ -44,32 +44,10 @@ Item {
         contentWidth: width
 
         Text {
-            id: dateAndTimeTitle
-            anchors.top: parent.top
-            anchors.left: parent.left
-            fontSizeMode: Text.Fit
-            minimumPixelSize: 1
-            font.pixelSize: parent.height * 0.05
-            color: "white"
-            text: qsTr("Date & Time")
-            font.family: appFont
-            font.styleName: "Bold"
-        }
-
-        Rectangle {
-            id: btmLine
-            anchors.top: dateAndTimeTitle.bottom
-            anchors.topMargin: parent.height * 0.025
-            anchors.left: dateAndTimeTitle.left
-            width: parent.width * 0.275
-            height: parent.height * 0.005
-        }
-
-        Text {
             id: dateText
             width: parent.width
             height: parent.height * 0.055
-            anchors.top: btmLine.bottom
+            anchors.top: parent.top
             anchors.left: parent.left
             anchors.topMargin: parent.height * 0.05
             fontSizeMode: Text.Fit