QML: added theme color preference

config.default.json

@@ -1,4 +1,6 @@
 {
+    "version": 0.1,
+    "theme_color": 8,
     "virt": {
         "device": "VIRTUAL1",
         "width": 1368,

qml/AppWindow.qml

@@ -12,9 +12,10 @@ ApplicationWindow {
     flags: Qt.FramelessWindowHint
     title: "Basic layouts"
 
+    property int theme_color: settings.theme_color
     Material.theme: Material.Light
-    Material.primary: Material.Teal
-    Material.accent: Material.Teal
+    Material.primary: theme_color
+    Material.accent: theme_color
     // Material.background: Material.Grey
 
     width: 380
@@ -53,6 +54,7 @@ ApplicationWindow {
             
             Label {
                 id: vncStateLabel
+                color: "white"
                 text: vncStateText.text
             }
 
@@ -60,12 +62,28 @@ ApplicationWindow {
                 id: menuButton
                 anchors.right: parent.right
                 text: qsTr("⋮")
+                contentItem: Text {
+                    text: parent.text
+                    font: parent.font
+                    color: "white"
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                    elide: Text.ElideRight
+                }
+
                 onClicked: menu.open()
 
                 Menu {
                     id: menu
                     y: toolbar.height
 
+                    MenuItem {
+                        text: qsTr("&Preference")
+                        onTriggered: {
+                            preferenceLoader.active = true;
+                        }
+                    }
+
                     MenuItem {
                         text: qsTr("&About")
                         onTriggered: {
@@ -202,6 +220,17 @@ ApplicationWindow {
         }
         onRejected: passwordFIeld.text = ""
     }
+
+    Loader {
+        id: preferenceLoader
+        active: false
+        source: "preferenceDialog.qml"
+        onLoaded: {
+            item.onClosed.connect(function() {
+                preferenceLoader.active = false;
+            });
+        }
+    }
     
     SwipeView {
         anchors.top: tabBar.bottom

qml/DisplayPage.qml

@@ -2,6 +2,8 @@ import QtQuick 2.10
 import QtQuick.Controls 2.3
 import QtQuick.Layouts 1.3
 
+import VirtScreen.Backend 1.0
+
 ColumnLayout {
     GroupBox {
         title: "Virtual Display"

qml/preferenceDialog.qml

@@ -0,0 +1,58 @@
+import QtQuick 2.10
+import QtQuick.Controls 2.3
+import QtQuick.Controls.Material 2.3
+import QtQuick.Layouts 1.3
+
+Dialog {
+    id: preferenceDialog
+    title: "Preference"
+    focus: true
+    modal: true
+    visible: true
+    standardButtons: Dialog.Ok | Dialog.Cancel
+    x: (window.width - width) / 2
+    y: (window.width - height) / 2 
+    width: popupWidth
+    ColumnLayout {
+        anchors.fill: parent
+        RowLayout {
+            anchors.left: parent.left
+            anchors.right: parent.right
+            Label { id: themeColorLabel; text: "Theme Color"; }
+            ComboBox {
+                id: themeColorComboBox
+                anchors.left: themeColorLabel.right
+                anchors.right: parent.right
+                anchors.leftMargin: 50
+                Material.background: currentIndex
+                Material.foreground: "white"
+                textRole: "name"
+                model: [{"value": Material.Red, "name": "Red"}, {"value": Material.Pink, "name": "Pink"},
+                        {"value": Material.Purple, "name": "Purple"},{"value": Material.DeepPurple, "name": "DeepPurple"},
+                        {"value": Material.Indigo, "name": "Indigo"}, {"value": Material.Blue, "name": "Blue"},
+                        {"value": Material.LightBlue, "name": "LightBlue"}, {"value": Material.Cyan, "name": "Cyan"},
+                        {"value": Material.Teal, "name": "Teal"}, {"value": Material.Green, "name": "Green"},
+                        {"value": Material.LightGreen, "name": "LightGreen"}, {"value": Material.Lime, "name": "Lime"},
+                        {"value": Material.Yellow, "name": "Yellow"}, {"value": Material.Amber, "name": "Amber"},
+                        {"value": Material.Orange, "name": "Orange"}, {"value": Material.DeepOrange, "name": "DeepOrange"},
+                        {"value": Material.Brown, "name": "Brown"}, {"value": Material.Grey, "name": "Grey"},
+                        {"value": Material.BlueGrey, "name": "BlueGrey"}]
+                currentIndex: settings.theme_color
+                onActivated: function(index) {
+                    window.theme_color = index;
+                    settings.theme_color = index;
+                } 
+                delegate: ItemDelegate {
+                    width: parent.width
+                    text: modelData.name + (themeColorComboBox.currentIndex === index ? " (Current)" : "")
+                    Material.foreground: "white"
+                    background: Rectangle {
+                        color: Material.color(modelData.value)
+                    }
+                }
+            }
+        }
+    }
+    onAccepted: {}
+    onRejected: {}
+}