dorian/fanny-app
dorian/fanny-app
Archived
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases 1 Wiki Activity

added theme engine and dark theme

Browse source
This commit is contained in:
Dorian Zedler 2019-03-10 12:54:35 +01:00
parent 9c1be60371
commit b16937a73c
19 changed files with 261 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
fannyapp.pro
View file

@ -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 \

31
headers/appstyle.h Normal file
View file

@ -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

4
qml/Components/AppToolBar.qml
View file

@ -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

56
qml/Components/FancyButton.qml
View file

@ -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
}
}
}
}
*/

6
qml/Components/SettingsDelegate.qml
View file

@ -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
}
}

59
qml/Forms/FilterForm.qml
View file

@ -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
}
}
}

10
qml/Forms/HomeForm.qml
View file

@ -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

15
qml/Forms/SettingsForm.qml
View file

@ -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()
}
}
}
}

5
qml/Pages/LoginPage.qml
View file

@ -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

9
qml/Pages/MainPage.qml
View file

@ -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 = "";

9
qml/main.qml
View file

@ -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

BIN
shared/graphics/icons/TreffpunktFannyLogo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
shared/graphics/icons/settings.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 311 KiB

BIN
shared/graphics/images/FannyLogoLight.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 98 KiB

After

Width:  |  Height:  |  Size: 18 KiB

BIN
shared/graphics/images/FannyLogoLightBig.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 98 KiB

BIN
shared/graphics/images/FannyLogoLightSmall.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 18 KiB

3
shared/shared.qrc
View file

@ -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>

110
sources/appstyle.cpp Normal file
View file

@ -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();
}

2
sources/main.cpp
View file

@ -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;