add styling support

mea/guh-logo.svg

@@ -13,7 +13,7 @@
    height="500"
    id="svg2"
    version="1.1"
-   inkscape:version="0.91 r13725"
+   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
    sodipodi:docname="guh-logo.svg"
    inkscape:export-filename="/home/timon/guh/guh/guh/icons/guh-logo-512x512.png"
    inkscape:export-xdpi="92.160004"
@@ -258,9 +258,9 @@
      inkscape:current-layer="layer1"
      showgrid="false"
      inkscape:window-width="2880"
-     inkscape:window-height="1749"
+     inkscape:window-height="1698"
      inkscape:window-x="0"
-     inkscape:window-y="51"
+     inkscape:window-y="44"
      inkscape:window-maximized="1" />
   <metadata
      id="metadata7">
@@ -279,13 +279,6 @@
      inkscape:groupmode="layer"
      id="layer1"
      transform="translate(0,-552.36215)">
-    <rect
-       style="fill:#ffffff;fill-opacity:1;stroke:none"
-       id="rect4243"
-       width="500"
-       height="500"
-       x="0"
-       y="552.36218" />
     <g
        transform="matrix(2.2038606,0,0,2.2038606,-672.50331,283.61944)"
        id="g41">

mea/main.cpp

@@ -80,9 +80,6 @@ int main(int argc, char *argv[])
     applicationFont.setWeight(QFont::Normal);
     QGuiApplication::setFont(applicationFont);
 
-    QSettings settings;
-    QQuickStyle::setStyle(settings.value("style", "Material").toString());
-
     const char uri[] = "Mea";
 
     qDebug() << "Running on" << QSysInfo::machineHostName() << QSysInfo::prettyProductName() << QSysInfo::productType() << QSysInfo::productVersion();
@@ -161,6 +158,9 @@ int main(int argc, char *argv[])
 
     Engine::instance();
 
+    QSettings settings;
+    QQuickStyle::setStyle(":/styles/" + settings.value("style", "light").toString());
+
     QQmlApplicationEngine engine;
     engine.load(QUrl(QLatin1String("qrc:/ui/main.qml")));
 

mea/qtquickcontrols2.conf

@@ -0,0 +1,3 @@
+[Controls]
+Style=Material
+FallbackStyle=Material

mea/resources.qrc

@@ -151,5 +151,12 @@
         <file>ui/devicepages/StateLogPage.qml</file>
         <file>ui/customviews/GenericTypeLogView.qml</file>
         <file>guh-logo.svg</file>
+        <file>qtquickcontrols2.conf</file>
+        <file>styles/dark/ApplicationWindow.qml</file>
+        <file>styles/light/ApplicationWindow.qml</file>
+        <file>styles/light/Page.qml</file>
+        <file>styles/dark/Page.qml</file>
+        <file>styles/marantec/ApplicationWindow.qml</file>
+        <file>styles/maveo/ApplicationWindow.qml</file>
     </qresource>
 </RCC>

mea/styles/dark/ApplicationWindow.qml

@@ -0,0 +1,11 @@
+import QtQuick 2.0
+import QtQuick.Templates 2.2
+import QtQuick.Controls.Material 2.2
+
+ApplicationWindow {
+    property color guhAccent: "#ff57baae"
+
+    Material.theme: Material.Dark
+    Material.accent: guhAccent
+    Material.primary: Material.background
+}

mea/styles/dark/Page.qml

@@ -0,0 +1,17 @@
+import QtQuick 2.0
+import QtQuick.Templates 2.2
+import QtQuick.Controls.Material 2.2
+
+Page {
+
+    background: Rectangle {
+        color: Material.background
+        Image {
+            id: bg
+            source: "qrc:/guh-logo.svg"
+            anchors.fill: parent
+            fillMode: Image.PreserveAspectFit
+            opacity: .2
+        }
+    }
+}

mea/styles/light/ApplicationWindow.qml

@@ -0,0 +1,12 @@
+import QtQuick 2.0
+import QtQuick.Templates 2.2
+import QtQuick.Controls.Material 2.2
+
+ApplicationWindow {
+    property color guhAccent: "#ff57baae"
+
+    Material.theme: Material.Light
+    Material.accent: guhAccent
+    Material.primary: "white"
+
+}

mea/styles/light/Page.qml

@@ -0,0 +1,17 @@
+import QtQuick 2.0
+import QtQuick.Templates 2.2
+import QtQuick.Controls.Material 2.2
+
+Page {
+
+    background: Rectangle {
+        color: Material.background
+        Image {
+            id: bg
+            source: "qrc:/guh-logo.svg"
+            anchors.fill: parent
+            fillMode: Image.PreserveAspectFit
+            opacity: .2
+        }
+    }
+}

mea/styles/marantec/ApplicationWindow.qml

@@ -0,0 +1,11 @@
+import QtQuick 2.0
+import QtQuick.Templates 2.2
+import QtQuick.Controls.Material 2.2
+
+ApplicationWindow {
+    property color guhAccent: "red"
+
+    Material.theme: Material.Light
+    Material.accent: guhAccent
+    Material.primary: "red"
+}

mea/styles/maveo/ApplicationWindow.qml

@@ -0,0 +1,11 @@
+import QtQuick 2.0
+import QtQuick.Templates 2.2
+import QtQuick.Controls.Material 2.2
+
+ApplicationWindow {
+    property color guhAccent: "#ffcc00"
+
+    Material.theme: Material.Light
+    Material.accent: guhAccent
+    Material.primary: Material.Grey
+}

mea/ui/MainPage.qml

@@ -15,14 +15,6 @@ Page {
         onMenuPressed: mainMenu.open()
     }
 
-    Image {
-        id: bg
-        source: "../guh-logo.svg"
-        anchors.fill: parent
-        fillMode: Image.PreserveAspectFit
-        opacity: .2
-    }
-
     // FIXME: Currently we don't have any feedback for executeAction
     // we don't want all the results, e.g. on looped calls like "all off"
 //    Connections {

mea/ui/SettingsPage.qml

@@ -60,6 +60,31 @@ Page {
                 }
             }
 
+            RowLayout {
+                Layout.fillWidth: true
+                Label {
+                    Layout.fillWidth: true
+                    text: "Style"
+                }
+                ComboBox {
+                    model: ["light", "dark", "maveo"]
+                    currentIndex: {
+                        switch (settings.style) {
+                        case "light":
+                            return 0;
+                        case "dark":
+                            return 1;
+                        case "maveo":
+                            return 2;
+                        }
+                    }
+
+                    onActivated: {
+                        settings.style = model[index]
+                    }
+                }
+            }
+
             RowLayout {
                 Layout.fillWidth: true
                 Label {

mea/ui/components/GuhHeader.qml

@@ -15,11 +15,6 @@ ToolBar {
     signal backPressed();
     signal menuPressed();
 
-    Rectangle {
-        anchors.fill: parent
-        color: "#fefefe"
-    }
-
     RowLayout {
         id: layout
         anchors { fill: parent; leftMargin: app.margins; rightMargin: app.margins }
@@ -43,7 +38,6 @@ ToolBar {
             verticalAlignment: Text.AlignVCenter
             font.pixelSize: app.largeFont
             elide: Text.ElideRight
-            color: "#333"
             text: root.text.toUpperCase()
         }
     }

mea/ui/main.qml

@@ -13,11 +13,6 @@ ApplicationWindow {
     visibility: settings.viewMode
     font: Qt.application.font
 
-    property color guhAccent: "#ff57baae"
-//    Material.primary: "#ff57baae"
-    Material.primary: "white"
-    Material.accent: guhAccent
-
     property int margins: 14
     property int bigMargins: 20
     property int smallFont: 14
@@ -32,6 +27,7 @@ ApplicationWindow {
         property int viewMode: ApplicationWindow.Maximized
         property bool returnToHome: false
         property string graphStyle: "bars"
+        property string style: "light"
     }
 
     Component.onCompleted: {