From 08c8313059d234301d680e63df5d5fe79f471cb4 Mon Sep 17 00:00:00 2001 From: Michael Zanetti Date: Mon, 14 May 2018 15:33:21 +0200 Subject: [PATCH] add styling support --- mea/guh-logo.svg | 13 +++--------- mea/main.cpp | 6 +++--- mea/qtquickcontrols2.conf | 3 +++ mea/resources.qrc | 7 +++++++ mea/styles/dark/ApplicationWindow.qml | 11 ++++++++++ mea/styles/dark/Page.qml | 17 +++++++++++++++ mea/styles/light/ApplicationWindow.qml | 12 +++++++++++ mea/styles/light/Page.qml | 17 +++++++++++++++ mea/styles/marantec/ApplicationWindow.qml | 11 ++++++++++ mea/styles/maveo/ApplicationWindow.qml | 11 ++++++++++ mea/ui/MainPage.qml | 8 -------- mea/ui/SettingsPage.qml | 25 +++++++++++++++++++++++ mea/ui/components/GuhHeader.qml | 6 ------ mea/ui/main.qml | 6 +----- 14 files changed, 121 insertions(+), 32 deletions(-) create mode 100644 mea/qtquickcontrols2.conf create mode 100644 mea/styles/dark/ApplicationWindow.qml create mode 100644 mea/styles/dark/Page.qml create mode 100644 mea/styles/light/ApplicationWindow.qml create mode 100644 mea/styles/light/Page.qml create mode 100644 mea/styles/marantec/ApplicationWindow.qml create mode 100644 mea/styles/maveo/ApplicationWindow.qml diff --git a/mea/guh-logo.svg b/mea/guh-logo.svg index 17065d0b..b2de99d5 100644 --- a/mea/guh-logo.svg +++ b/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" /> @@ -279,13 +279,6 @@ inkscape:groupmode="layer" id="layer1" transform="translate(0,-552.36215)"> - diff --git a/mea/main.cpp b/mea/main.cpp index b6f640de..ad4565dd 100644 --- a/mea/main.cpp +++ b/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"))); diff --git a/mea/qtquickcontrols2.conf b/mea/qtquickcontrols2.conf new file mode 100644 index 00000000..cf531d63 --- /dev/null +++ b/mea/qtquickcontrols2.conf @@ -0,0 +1,3 @@ +[Controls] +Style=Material +FallbackStyle=Material diff --git a/mea/resources.qrc b/mea/resources.qrc index f13a7539..cffcdcfb 100644 --- a/mea/resources.qrc +++ b/mea/resources.qrc @@ -151,5 +151,12 @@ ui/devicepages/StateLogPage.qml ui/customviews/GenericTypeLogView.qml guh-logo.svg + qtquickcontrols2.conf + styles/dark/ApplicationWindow.qml + styles/light/ApplicationWindow.qml + styles/light/Page.qml + styles/dark/Page.qml + styles/marantec/ApplicationWindow.qml + styles/maveo/ApplicationWindow.qml diff --git a/mea/styles/dark/ApplicationWindow.qml b/mea/styles/dark/ApplicationWindow.qml new file mode 100644 index 00000000..cb80702a --- /dev/null +++ b/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 +} diff --git a/mea/styles/dark/Page.qml b/mea/styles/dark/Page.qml new file mode 100644 index 00000000..a8a7c534 --- /dev/null +++ b/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 + } + } +} diff --git a/mea/styles/light/ApplicationWindow.qml b/mea/styles/light/ApplicationWindow.qml new file mode 100644 index 00000000..c17c079f --- /dev/null +++ b/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" + +} diff --git a/mea/styles/light/Page.qml b/mea/styles/light/Page.qml new file mode 100644 index 00000000..a8a7c534 --- /dev/null +++ b/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 + } + } +} diff --git a/mea/styles/marantec/ApplicationWindow.qml b/mea/styles/marantec/ApplicationWindow.qml new file mode 100644 index 00000000..1914b881 --- /dev/null +++ b/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" +} diff --git a/mea/styles/maveo/ApplicationWindow.qml b/mea/styles/maveo/ApplicationWindow.qml new file mode 100644 index 00000000..a1cb27e7 --- /dev/null +++ b/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 +} diff --git a/mea/ui/MainPage.qml b/mea/ui/MainPage.qml index 21dfb5ca..1101816b 100644 --- a/mea/ui/MainPage.qml +++ b/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 { diff --git a/mea/ui/SettingsPage.qml b/mea/ui/SettingsPage.qml index 7535b49a..dbcb1b5c 100644 --- a/mea/ui/SettingsPage.qml +++ b/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 { diff --git a/mea/ui/components/GuhHeader.qml b/mea/ui/components/GuhHeader.qml index 1d325271..5f4c1ec3 100644 --- a/mea/ui/components/GuhHeader.qml +++ b/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() } } diff --git a/mea/ui/main.qml b/mea/ui/main.qml index 8d1dfe8a..5b311f46 100644 --- a/mea/ui/main.qml +++ b/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: {