diff --git a/fannyapp.pro b/fannyapp.pro index 1f0ff98..aa389d8 100644 --- a/fannyapp.pro +++ b/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 \ diff --git a/headers/appstyle.h b/headers/appstyle.h new file mode 100644 index 0000000..9136f75 --- /dev/null +++ b/headers/appstyle.h @@ -0,0 +1,31 @@ +#ifndef APPSTYLE_H +#define APPSTYLE_H + +#include +#include + +#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 diff --git a/qml/Components/AppToolBar.qml b/qml/Components/AppToolBar.qml index 48b09ca..08050b2 100644 --- a/qml/Components/AppToolBar.qml +++ b/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 diff --git a/qml/Components/FancyButton.qml b/qml/Components/FancyButton.qml index 2ea10bb..46c1418 100644 --- a/qml/Components/FancyButton.qml +++ b/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 - } - } - } - } - */ - diff --git a/qml/Components/SettingsDelegate.qml b/qml/Components/SettingsDelegate.qml index 2d563eb..a6dda00 100644 --- a/qml/Components/SettingsDelegate.qml +++ b/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 } } diff --git a/qml/Forms/FilterForm.qml b/qml/Forms/FilterForm.qml index 4226baa..a03c781 100644 --- a/qml/Forms/FilterForm.qml +++ b/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 } } } diff --git a/qml/Forms/HomeForm.qml b/qml/Forms/HomeForm.qml index 5208648..61c979f 100644 --- a/qml/Forms/HomeForm.qml +++ b/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 diff --git a/qml/Forms/SettingsForm.qml b/qml/Forms/SettingsForm.qml index e467771..17f9224 100644 --- a/qml/Forms/SettingsForm.qml +++ b/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() + } + } + } } diff --git a/qml/Pages/LoginPage.qml b/qml/Pages/LoginPage.qml index f8c63f9..9b850bf 100644 --- a/qml/Pages/LoginPage.qml +++ b/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 diff --git a/qml/Pages/MainPage.qml b/qml/Pages/MainPage.qml index 433673e..d717d5e 100644 --- a/qml/Pages/MainPage.qml +++ b/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 = ""; diff --git a/qml/main.qml b/qml/main.qml index 3063458..84c6886 100644 --- a/qml/main.qml +++ b/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 diff --git a/shared/graphics/icons/TreffpunktFannyLogo.png b/shared/graphics/icons/TreffpunktFannyLogo.png new file mode 100644 index 0000000..b85aaed Binary files /dev/null and b/shared/graphics/icons/TreffpunktFannyLogo.png differ diff --git a/shared/graphics/icons/settings.png b/shared/graphics/icons/settings.png new file mode 100644 index 0000000..6b76df6 Binary files /dev/null and b/shared/graphics/icons/settings.png differ diff --git a/shared/graphics/images/FannyLogoLight.png b/shared/graphics/images/FannyLogoLight.png index f963950..ac6d27a 100644 Binary files a/shared/graphics/images/FannyLogoLight.png and b/shared/graphics/images/FannyLogoLight.png differ diff --git a/shared/graphics/images/FannyLogoLightBig.png b/shared/graphics/images/FannyLogoLightBig.png new file mode 100644 index 0000000..f963950 Binary files /dev/null and b/shared/graphics/images/FannyLogoLightBig.png differ diff --git a/shared/graphics/images/FannyLogoLightSmall.png b/shared/graphics/images/FannyLogoLightSmall.png deleted file mode 100644 index ac6d27a..0000000 Binary files a/shared/graphics/images/FannyLogoLightSmall.png and /dev/null differ diff --git a/shared/shared.qrc b/shared/shared.qrc index 026e559..419fd72 100644 --- a/shared/shared.qrc +++ b/shared/shared.qrc @@ -9,7 +9,6 @@ graphics/icons/view.png graphics/images/FannyLogoDark.jpg graphics/images/FannyLogoLight.png - graphics/images/FannyLogoLightSmall.png graphics/images/TreffpunktFannyLogoDark.png graphics/images/TreffpunktFannyLogoLight.png graphics/icons/logoutBlack.png @@ -22,5 +21,7 @@ sampleEventData/sample.json fonts/fontawesome-webfont.ttf graphics/images/FannyIcon.png + graphics/icons/TreffpunktFannyLogo.png + graphics/icons/settings.png diff --git a/sources/appstyle.cpp b/sources/appstyle.cpp new file mode 100644 index 0000000..013a5f6 --- /dev/null +++ b/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(); +} diff --git a/sources/main.cpp b/sources/main.cpp index 3dff70a..8cf9136 100644 --- a/sources/main.cpp +++ b/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("Backend", 1, 0, "EventModel"); qmlRegisterType("Backend", 1, 0, "FilterModel"); qmlRegisterType("Backend", 1, 0, "ServerConn"); + qmlRegisterType("Backend", 1, 0, "AppStyle"); QQuickStyle::setStyle("Material"); QQmlApplicationEngine engine;