Added customization for Material and Universal styles

AddonsPanel.qml

@@ -18,6 +18,7 @@ import QtQuick 2.9
 import GitAddonsManager.engine 1.0
 import QtQuick.Controls 2.4
 import QtQuick.Layouts 1.3
+import QtQuick.Controls.Material 2.4
 
 Page {
     title: "Addons"
@@ -30,6 +31,7 @@ Page {
                 action: addAction
                 ToolTip.visible: hovered
                 ToolTip.text: "Download a new addon from a git repository"
+                Material.foreground: Material.background
             }
             ToolButton {
                 hoverEnabled: true
@@ -37,12 +39,14 @@ Page {
                 icon.name: availableUpdates > 0 ? "update-high" : "update-none"
                 ToolTip.visible: hovered
                 ToolTip.text: "Upgrade all addons"
+                Material.foreground: Material.background
             }
             ToolButton {
                 hoverEnabled: true
                 action: openAddonsFolder
                 ToolTip.visible: hovered
                 ToolTip.text: "Open addons folder externally"
+                Material.foreground: Material.background
             }
 
             Item {
@@ -55,6 +59,7 @@ Page {
                 action: refreshAction
                 ToolTip.visible: hovered
                 ToolTip.text: "Refresh addons list and check for updates"
+                Material.foreground: Material.background
             }
         }
     }

ColorPicker.qml

@@ -0,0 +1,36 @@
+import QtQuick 2.9
+import QtQuick.Layouts 1.3
+import QtQuick.Controls 2.4
+
+RowLayout {
+    id: comp
+    property alias text: label.text
+    property alias model: colorBox.model
+    property int currentIndex
+    property color color: model.count>0?model.get(currentIndex).color:"transparent"
+    Label {
+        id: label
+    }
+    ComboBox {
+        id: colorBox
+        delegate: ItemDelegate{
+            width: colorBox.width
+            height: colorBox.height
+            background: Rectangle {
+                color: comp.model.get(index).color
+            }
+        }
+        indicator: Item {}
+        contentItem: Item {}
+        background: Button {
+            id: bg
+            onClicked: colorBox.popup.visible = true
+            contentItem: Rectangle {
+                radius: height/2
+                color: comp.color
+            }
+        }
+        currentIndex: comp.currentIndex
+        onActivated: comp.currentIndex = currentIndex
+    }
+}

Options.qml

@@ -18,7 +18,9 @@ import QtQuick 2.9
 import QtQuick.Controls 2.4
 import GitAddonsManager.engine 1.0
 import QtQuick.Layouts 1.3
-
+import QtQuick.Controls.Material 2.2
+import QtQuick.Controls.Universal 2.2
+import Qt.labs.settings 1.0
 
 ColumnLayout {
     RowLayout {
@@ -44,6 +46,7 @@ ColumnLayout {
         }
     }
     CheckBox {
+        Layout.fillWidth: true
         tristate: Engine.minimizeToTray == Engine.MinimizeToTrayAsk
         onCheckedChanged: Engine.minimizeToTray = checked ? Engine.MinimizeToTrayYes : Engine.MinimizeToTrayNo
         checkState: Engine.minimizeToTray == Engine.MinimizeToTrayAsk ?
@@ -55,20 +58,93 @@ ColumnLayout {
         ToolTip.visible: hovered
         ToolTip.text: qsTr("Minimize to System Tray when the main window is closed.")
     }
-    RowLayout {
-        Label {
-            text: qsTr("Style")
-        }
-        ComboBox {
-            model: Engine.availableStyles
-            currentIndex: Engine.availableStyles.indexOf(Engine.style)
-            onActivated: {
-                Engine.style = Engine.availableStyles[currentIndex]
-                restartDialog.visible = true
+    GroupBox {
+        Layout.fillWidth: true
+        title: qsTr("Style")
+        Flow {
+            anchors.fill: parent
+            spacing: 4
+            ComboBox {
+                model: Engine.availableStyles
+                currentIndex: Engine.availableStyles.indexOf(Engine.style)
+                onActivated: {
+                    Engine.style = Engine.availableStyles[currentIndex]
+                    restartDialog.visible = true
+                }
+                ToolTip.text: qsTr("Requires restart")
+                ToolTip.visible: hovered
+                hoverEnabled: true
+            }
+            ComboBox {
+                id: materialTheme
+                visible: Engine.style == "Material"
+                model: ["Light", "Dark"]
+                onCurrentIndexChanged: window.Material.theme = currentIndex
+            }
+            ComboBox {
+                id: universalTheme
+                visible: Engine.style == "Universal"
+                model: ["Light", "Dark", "System"]
+                onActivated: window.Universal.theme = currentIndex
+            }
+            ListModel {
+                id: materialColors
+                dynamicRoles: true
+                Component.onCompleted: {
+                    for (var i = 0; i < 19; i++)
+                        append({"color": Material.color(i)})}
+            }
+            ListModel {
+                id: materialDarkColors
+                dynamicRoles: true
+                Component.onCompleted: {
+                    for (var i = 0; i < 19; i++)
+                        append({"color": Material.color(i,Material.Shade200)})}
+            }
+            ListModel {
+                id: universalColors
+                dynamicRoles: true
+                Component.onCompleted: {
+                    for (var i = 0; i < 20; i++)
+                        append({"color": Universal.color(i)})}
+            }
+
+            ColorPicker {
+                id: materialPrimary
+                visible: Engine.style == "Material"
+                text: qsTr("Primary:")
+                model: materialTheme.currentIndex === Material.Dark ? materialDarkColors : materialColors
+                currentIndex: Material.Indigo
+                onColorChanged: window.Material.primary = color
+            }
+            ColorPicker {
+                id: materialAccent
+                visible: Engine.style == "Material"
+                text: qsTr("Accent:")
+                model: materialTheme.currentIndex === Material.Dark ? materialDarkColors : materialColors
+                currentIndex: Material.Pink
+                onColorChanged: window.Material.accent = color
+            }
+            ColorPicker {
+                id: universalAccent
+                visible: Engine.style == "Universal"
+                text: qsTr("Accent:")
+                model: universalColors
+                currentIndex: Universal.Cobalt
+                onColorChanged: window.Universal.accent = color
+            }
+
+            Settings {
+                category: "Material"
+                property alias primary: materialPrimary.currentIndex
+                property alias accent: materialAccent.currentIndex
+                property alias theme: materialTheme.currentIndex
+            }
+            Settings {
+                category: "Universal"
+                property alias accent: universalAccent.currentIndex
+                property alias theme: universalTheme.currentIndex
             }
-            ToolTip.text: qsTr("Requires restart")
-            ToolTip.visible: hovered
-            hoverEnabled: true
         }
     }
     Dialog {

main.qml

@@ -125,7 +125,8 @@ ApplicationWindow {
             }
 
             Options {
-                width: parent.width
+                Layout.fillWidth: true
+                Layout.fillHeight: true
             }
 
             ColumnLayout {

qml.qrc

@@ -19,5 +19,6 @@
         <file>icons/breeze/svg/view-refresh.svg</file>
         <file>icons/breeze/COPYING-ICONS</file>
         <file>icons/breeze/index.theme</file>
+        <file>ColorPicker.qml</file>
     </qresource>
 </RCC>