added theme engine and dark theme

fannyapp.pro

@@ -24,14 +24,16 @@ SOURCES += \
     sources/appsettings.cpp \
     sources/foodplanmodel.cpp \
     sources/eventmodel.cpp \
-    sources/filtermodel.cpp
+    sources/filtermodel.cpp \
+    sources/appstyle.cpp
 
 HEADERS += \
     headers/serverconn.h \
     headers/appsettings.h \
     headers/foodplanmodel.h \
     headers/eventmodel.h \
-    headers/filtermodel.h
+    headers/filtermodel.h \
+    headers/appstyle.h
 
 RESOURCES += \
     shared/shared.qrc \

headers/appstyle.h

@@ -0,0 +1,31 @@
+#ifndef APPSTYLE_H
+#define APPSTYLE_H
+
+#include <QObject>
+#include <QVariant>
+
+#include "appsettings.h"
+
+class AppStyle : public QObject
+{
+    Q_OBJECT
+    Q_PROPERTY(QVariant style READ getStyle NOTIFY styleChanged)
+
+public:
+    explicit AppStyle(QObject *parent = nullptr);
+
+private:
+    QVariant lightTheme;
+    QVariant darkTheme;
+
+    QVariant * currentTheme;
+
+signals:
+    void styleChanged();
+
+public slots:
+    QVariant getStyle();
+    Q_INVOKABLE void changeTheme();
+};
+
+#endif // APPSTYLE_H

qml/Components/AppToolBar.qml

@@ -19,6 +19,7 @@
 import QtQuick 2.6
 import QtQuick.Controls 2.1
 import QtGraphicalEffects 1.0
+import QtQuick.Controls.Material 2.3
 
 Item {
     id: control
@@ -36,9 +37,10 @@ Item {
 
     Rectangle {
         id: toolBar
-        color: "white"
+        color: app.style.style.menuColor
         anchors.fill: parent
 
+
 //        anchors {
 //            top: parent.top
 //            left: parent.left

qml/Components/FancyButton.qml

@@ -19,12 +19,14 @@
 import QtQuick 2.9
 import QtQuick.Controls 2.4
 import QtGraphicalEffects 1.0
+import QtQuick.Controls.Material 2.3
 
 Button {
     id: control
 
     property string image
     property real imageScale: 1
+    property color color: app.style.style.buttonColor
 
 
     scale: control.pressed ? 0.8:1
@@ -38,14 +40,6 @@ Button {
     background: Item {
         id: controlBackgroundContainer
 
-
-
-        Behavior on scale {
-            PropertyAnimation {
-                duration: 100
-            }
-        }
-
         RectangularGlow {
             id: effect
             glowRadius: 0.001
@@ -64,6 +58,8 @@ Button {
 
             radius: height * 0.5
 
+            color: control.color
+
             Image {
                 id: buttonIcon
                 source: control.image
@@ -82,47 +78,3 @@ Button {
     }
 
 }
-/*
-    background: Image {
-        id: smorgenBackground
-        source: "qrc:/circle.png"
-        height: control.height
-        width: height
-
-        scale: control.pressed ? 0.8:1
-
-        Behavior on scale {
-            PropertyAnimation {
-                duration: 100
-            }
-        }
-
-        mipmap: true
-        smooth: true
-
-        fillMode: Image.PreserveAspectFit
-
-        Image {
-            id: smorgenImage
-            source: control.image
-
-            anchors.centerIn: parent
-            height: parent.height * 0.5
-            width: height
-
-            mipmap: true
-            smooth: true
-
-            fillMode: Image.PreserveAspectFit
-
-            scale: control.imageScale
-
-            Behavior on scale {
-                PropertyAnimation {
-                    duration: 100
-                }
-            }
-        }
-    }
-    */
-

qml/Components/SettingsDelegate.qml

@@ -41,6 +41,8 @@ ItemDelegate {
 
         text: control.title
 
+        color: app.style.style.textColor
+
     }
 
     Label {
@@ -58,6 +60,8 @@ ItemDelegate {
         wrapMode: Label.Wrap
 
         text: control.description
+
+        color: app.style.style.textColor
     }
 
     Image {
@@ -77,7 +81,7 @@ ItemDelegate {
 
         fillMode: Image.PreserveAspectFit
 
-        source: "/graphics/icons/backDark.png"
+        source: app.style.style.backIcon
     }
 
 }

qml/Forms/FilterForm.qml

@@ -19,6 +19,10 @@
 import QtQuick 2.9
 import QtQuick.Controls 2.4
 import QtQuick.Layouts 1.3
+import QtQuick.Controls.Material 2.3
+import QtGraphicalEffects 1.0
+import QtQuick.Controls.impl 2.0
+import QtQuick.Templates 2.0 as T
 import Backend 1.0
 
 import "../Components"
@@ -35,6 +39,9 @@ Page {
 
     onOpened: {}
 
+    Material.theme: app.style.style.nameMaterialStyle === "Dark" ? Material.Dark:Material.Light
+
+
     Dialog {
         id: filterDialog
 
@@ -42,6 +49,8 @@ Page {
 
         property bool teacherMode: _cppAppSettings.loadSetting("teacherMode") === "true"
 
+        Material.theme: app.style.style.nameMaterialStyle === "Dark" ? Material.Dark:Material.Light
+
         onFinished: {
             if(_cppAppSettings.loadSetting("teacherMode") === "true"){
                 contactView.model.append(teacherShortcut, "", "t");
@@ -115,6 +124,52 @@ Page {
                     model: ["a", "b", "c", "d", "e", "alle"]
                     enabled: gradeSb.value < 11
                     visible: !filterDialog.teacherMode
+
+                    popup: T.Popup {
+                        y: classLetterCb.editable ? classLetterCb.height - 5 : 0
+                        width: classLetterCb.width
+                        height: Math.min(contentItem.implicitHeight, app.height - topMargin - bottomMargin)
+                        transformOrigin: Item.Top
+                        topMargin: 12
+                        bottomMargin: 12
+
+                        Material.theme: classLetterCb.Material.theme
+                        Material.accent: classLetterCb.Material.accent
+                        Material.primary: classLetterCb.Material.primary
+
+                        enter: Transition {
+                            // grow_fade_in
+                            NumberAnimation { property: "scale"; from: 0.9; to: 1.0; easing.type: Easing.OutQuint; duration: 220 }
+                            NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; easing.type: Easing.OutCubic; duration: 150 }
+                        }
+
+                        exit: Transition {
+                            // shrink_fade_out
+                            NumberAnimation { property: "scale"; from: 1.0; to: 0.9; easing.type: Easing.OutQuint; duration: 220 }
+                            NumberAnimation { property: "opacity"; from: 1.0; to: 0.0; easing.type: Easing.OutCubic; duration: 150 }
+                        }
+
+                        contentItem: ListView {
+                            clip: true
+                            implicitHeight: contentHeight
+                            model: classLetterCb.delegateModel
+                            currentIndex: classLetterCb.highlightedIndex
+                            highlightMoveDuration: 0
+
+                            T.ScrollIndicator.vertical: ScrollIndicator { }
+                        }
+
+                        background: Rectangle {
+                            radius: 2
+                            color: app.style.style.backgroundColor
+
+                            layer.enabled: classLetterCb.enabled
+//                            layer.effect: ElevationEffect {
+//                                elevation: 8
+//                            }
+                        }
+                    }
+
                 }
 
                 Label {
@@ -159,7 +214,8 @@ Page {
             }
 
             text: grade + classLetter
-            font.pixelSize: height * 0.4
+            font.pixelSize: delegate.height * 0.4
+
 
             enabled: root.teacherMode ? role === "t":role === "s"
 
@@ -262,6 +318,7 @@ Page {
             anchors.centerIn: parent
             font.pixelSize: parent.height * 0.6
             text: "+"
+            color: app.style.style.textColor
         }
     }
 }

qml/Forms/HomeForm.qml

@@ -18,6 +18,7 @@
 
 import QtQuick 2.9
 import QtQuick.Controls 2.4
+import QtQuick.Controls.Material 2.3
 
 import "../Components"
 
@@ -90,7 +91,7 @@ Page {
             FancyButton {
                 id: foodplanButton
 
-                image: "qrc:/graphics/images/TreffpunktFannyLogoDark.png"
+                image: app.style.style.treffpunktFannyIcon
 
                 width: smallMenu.buttonWidth
                 height: smallMenu.buttonHeight
@@ -103,7 +104,7 @@ Page {
             FancyButton {
                 id: fannyButton
 
-                image: "qrc:/graphics/images/FannyLogoDark.jpg"
+                image: app.style.style.fannyLogo
                 imageScale: 1.2
 
                 width: smallMenu.buttonWidth
@@ -117,7 +118,7 @@ Page {
             FancyButton {
                 id: settingsButton
 
-                image: "qrc:/graphics/icons/settingsBlack.png"
+                image: app.style.style.settingsIcon
                 imageScale: 0.8
 
                 width: smallMenu.buttonWidth
@@ -150,6 +151,9 @@ Page {
 
                     modal: true
                     standardButtons: Dialog.Cancel | Dialog.Ok
+
+                    Material.theme: app.style.style.nameMaterialStyle === "Dark" ? Material.Dark:Material.Light
+
                     Column {
                         spacing: 20
                         anchors.fill: parent

qml/Forms/SettingsForm.qml

@@ -70,6 +70,8 @@ Page {
 
                 text: "Lehrermodus"
 
+                color: app.style.style.textColor
+
             }
 
             Label {
@@ -87,6 +89,8 @@ Page {
                 wrapMode: Label.Wrap
 
                 text: "Lehrermodus aktivieren"
+
+                color: app.style.style.textColor
             }
 
             indicator: Rectangle {
@@ -123,5 +127,16 @@ Page {
                 }
             }
         }
+
+        SettingsDelegate {
+            showForwardIcon: false
+            title: "Design ändern"
+            description: "Ändere das Design der App"
+            width: parent.width
+            onClicked: {
+                app.style.changeTheme()
+            }
+        }
+
     }
 }

qml/Pages/LoginPage.qml

@@ -19,6 +19,7 @@
 import QtQuick 2.11
 import QtQuick.Layouts 1.3
 import QtQuick.Controls 2.2
+import QtQuick.Controls.Material 2.3
 import "../Components"
 
 Page {
@@ -29,7 +30,7 @@ Page {
         Label {
             text: "Anmeldung"
             anchors.centerIn: parent
-            color: "black"
+            color: app.style.style.textColor
         }
     }
 
@@ -302,6 +303,8 @@ Page {
             width: Math.min(window.width, window.height) / 3 * 2
             height: 150
             contentHeight: contentColumn.height
+            Material.theme: _cppAppSettings.loadSetting("theme") === "Dark" ? Material.Dark:Material.Light
+
             Column {
                 id: contentColumn
                 spacing: 20

qml/Pages/MainPage.qml

@@ -37,6 +37,11 @@ Page {
         }
     }
 
+    Rectangle {
+        anchors.fill: parent
+        color: app.style.style.backgroundColor
+    }
+
     StackView {
         id: formStack
         property var currPage
@@ -156,7 +161,7 @@ Page {
             onReleased: toolButton.scale = 1.0
 
             background: Image {
-                source: formStack.depth > 1 ? "qrc:/graphics/icons/backDark.png" : "qrc:/graphics/icons/drawer.png"
+                source: app.style.style.backIcon
                 height: parent.height
                 width: parent.width
                 fillMode: Image.PreserveAspectFit
@@ -176,7 +181,7 @@ Page {
                 leftMargin: parent.width * 0.02
             }
             font.bold: true
-            color: "black"
+            color: app.style.style.textColor
 
             function getText(){
                 var titleString = "";

qml/main.qml

@@ -18,6 +18,7 @@
 
 import QtQuick 2.9
 import QtQuick.Controls 2.2
+import QtQuick.Controls.Material 2.3
 
 import Backend 1.0
 
@@ -43,6 +44,8 @@ ApplicationWindow {
         property string backgroundColor: "white"
         property string toolbarColor: "#312f38"
 
+        property QtObject style: style
+
         state: serverConn.state
 
         states: [
@@ -71,6 +74,12 @@ ApplicationWindow {
             }
         }
 
+        AppStyle {
+            id: style
+        }
+
+        Material.theme: app.style.style.nameMaterialStyle === "Dark" ? Material.Dark:Material.Light
+
         StackView {
             id: mainStack
 

shared/shared.qrc

@@ -9,7 +9,6 @@
         <file>graphics/icons/view.png</file>
         <file>graphics/images/FannyLogoDark.jpg</file>
         <file>graphics/images/FannyLogoLight.png</file>
-        <file>graphics/images/FannyLogoLightSmall.png</file>
         <file>graphics/images/TreffpunktFannyLogoDark.png</file>
         <file>graphics/images/TreffpunktFannyLogoLight.png</file>
         <file>graphics/icons/logoutBlack.png</file>
@@ -22,5 +21,7 @@
         <file>sampleEventData/sample.json</file>
         <file>fonts/fontawesome-webfont.ttf</file>
         <file>graphics/images/FannyIcon.png</file>
+        <file>graphics/icons/TreffpunktFannyLogo.png</file>
+        <file>graphics/icons/settings.png</file>
     </qresource>
 </RCC>

sources/appstyle.cpp

@@ -0,0 +1,110 @@
+#include "headers/appstyle.h"
+
+AppStyle::AppStyle(QObject *parent) : QObject(parent)
+{
+    QVariantMap tmpDarkTheme = {
+        {"backgroundColor", "#2d3037"},
+
+        {"buttonColor", "#202227"},
+        {"buttonPressedColor", "#6ccaf2"},
+        {"buttonBorderColor", "grey"},
+        {"disabledButtonColor", "#555555"},
+
+        {"viewColor", "#202227"},
+        {"menuColor", "#292b32"},
+
+        {"delegate1Color", "#202227"},
+        {"delegate2Color", "#202227"},
+
+        {"textColor", "#ffffff"},
+        {"textDarkColor", "#232323"},
+        {"disabledTextColor", "#777777"},
+
+        {"sliderColor", "#6ccaf2"},
+
+        {"errorColor", "#ba3f62"},
+        {"infoColor", "#3fba62"},
+
+        {"lineColor", "grey"},
+
+        {"backIcon", "qrc:/graphics/icons/back.png"},
+        {"settingsIcon", "qrc:/graphics/icons/settings.png"},
+        {"treffpunktFannyIcon", "qrc:/graphics/images/TreffpunktFannyLogoLight.png"},
+        {"fannyLogo", "qrc:/graphics/images/FannyLogoLight.png"},
+
+        {"nameMaterialStyle", "Dark"}
+
+    };
+    this->darkTheme = tmpDarkTheme;
+
+    QVariantMap tmpLightTheme = {
+        {"backgroundColor", "white"},
+
+        {"buttonColor", "white"},
+        {"buttonPressedColor", "lightgrey"},
+        {"buttonBorderColor", "grey"},
+        {"disabledButtonColor", "#d5d5d5"},
+
+        {"viewColor", "white"},
+        {"menuColor", "#f8f8f8"},
+
+        {"delegate1Color", "#202227"},
+        {"delegate2Color", "#202227"},
+
+        {"textColor", "black"},
+        {"textDarkColor", "#232323"},
+        {"disabledTextColor", "grey"},
+
+        {"sliderColor", "#6ccaf2"},
+
+        {"errorColor", "#ba3f62"},
+        {"infoColor", "#3fba62"},
+
+        {"lineColor", "grey"},
+
+        {"backIcon", "qrc:/graphics/icons/backDark.png"},
+        {"settingsIcon", "qrc:/graphics/icons/settingsBlack.png"},
+        {"treffpunktFannyIcon", "qrc:/graphics/images/TreffpunktFannyLogoDark.png"},
+        {"fannyLogo", "qrc:/graphics/images/FannyLogoDark.jpg"}
+
+    };
+    this->lightTheme = tmpLightTheme;
+
+    QString currentThemeString = pGlobalAppSettings->loadSetting("theme");
+
+    if(currentThemeString == "Light"){
+        this->currentTheme = &this->lightTheme;
+    }
+    else if (currentThemeString == "Dark") {
+        this->currentTheme = &this->darkTheme;
+    }
+    else {
+        this->currentTheme = &this->lightTheme;
+    }
+}
+
+QVariant AppStyle::getStyle() {
+    return *this->currentTheme;
+}
+
+void AppStyle::changeTheme() {
+    QString currentThemeString = pGlobalAppSettings->loadSetting("theme");
+    QString newThemeString = "Light";
+
+    if(currentThemeString == "Light"){
+        this->currentTheme = &this->darkTheme;
+        newThemeString = "Dark";
+
+    }
+    else if (currentThemeString == "Dark") {
+        this->currentTheme = &this->lightTheme;
+        newThemeString = "Light";
+    }
+    else {
+        this->currentTheme = &this->lightTheme;
+    }
+
+    pGlobalAppSettings->writeSetting("theme", newThemeString);
+
+    emit this->styleChanged();
+}

sources/main.cpp

@@ -36,6 +36,7 @@
 #include "headers/foodplanmodel.h"
 #include "headers/eventmodel.h"
 #include "headers/filtermodel.h"
+#include "headers/appstyle.h"
 
 int main(int argc, char *argv[])
 {
@@ -50,6 +51,7 @@ int main(int argc, char *argv[])
     qmlRegisterType<EventModel>("Backend", 1, 0, "EventModel");
     qmlRegisterType<FilterModel>("Backend", 1, 0, "FilterModel");
     qmlRegisterType<ServerConn>("Backend", 1, 0, "ServerConn");
+    qmlRegisterType<AppStyle>("Backend", 1, 0, "AppStyle");
 
     QQuickStyle::setStyle("Material");
     QQmlApplicationEngine engine;