some styling improvements

This commit is contained in:
dorian 2019-11-03 17:48:30 +01:00
parent 3a7f559190
commit b3b5fd1940
90 changed files with 214 additions and 192 deletions

View file

@ -1,4 +1,4 @@
QT += qml quick quickcontrols2
QT += qml quick quickcontrols2 widgets
CONFIG += c++11
VERSION = 1.0.1
@ -69,5 +69,7 @@ ios {
DISTFILES += \
android-sources/AndroidManifest.xml \
CHANGELOG.md
CHANGELOG.md \
$$files(shared/icons/*.png, true) \
shared/icons/ibmaterial/index.theme

View file

@ -21,92 +21,8 @@ import QtQuick.Controls 2.1
import QtGraphicalEffects 1.0
import QtQuick.Controls.Material 2.1
Item {
ToolBar {
id: control
height: 50
property bool showErrorBar: true
RectangularGlow {
id: toolBarEffect
glowRadius: 3
spread: 0.2
color: "black"
opacity: 0.3
anchors.fill: toolBar
}
Rectangle {
id: toolBar
color: app.style.style.menuColor
anchors.fill: parent
// anchors {
// top: parent.top
// left: parent.left
// right: parent.right
// topMargin: -60
// }
Rectangle {
id: errorField
width: parent.width
height: 30
enabled: app.is_error & app.state !== "notLoggedIn" & control.showErrorBar
anchors.top: parent.bottom
color: "red"
onEnabledChanged: {
if(enabled){
toolBar.state = 'moveIn'
}
else {
toolBar.state = 'moveOut'
}
}
MouseArea { anchors.fill: parent; onClicked: {
toolBar.state = 'moveOut'
console.log("clicked")
}
}
Text {
anchors {
horizontalCenter: parent.horizontalCenter
verticalCenter: parent.verticalCenter
}
id: errorText
font.family: "Helvetica"
color: "White"
font.pointSize: 8
visible: parent.height !== 0
text: app.error
}
}
states: [
State {
name: "moveOut"
PropertyChanges { target: errorField; height: 0 }
},
State {
name: "moveIn"
PropertyChanges { target: errorField; height: 30 }
}
]
transitions: [
Transition {
to: "moveOut"
NumberAnimation { properties: "height"; easing.type: Easing.InOutQuad; duration: 200 }
},
Transition {
to: "moveIn"
NumberAnimation { properties: "height"; easing.type: Easing.InOutQuad; duration: 200 }
}
]
}
Material.background: app.style.style.menuColor
}

View file

@ -33,14 +33,6 @@ Button {
height: control.size
width: control.size
scale: control.pressed ? 0.8:1
Behavior on scale {
PropertyAnimation {
duration: 100
}
}
onSizeChanged: {
control.width = control.size
@ -72,7 +64,13 @@ Button {
radius: control.size * 0.5
color: control.color
color: control.down ? Qt.darker(control.color, 1.2) : control.color
Behavior on color {
ColorAnimation {
duration: 200
}
}
}
}

View file

@ -201,15 +201,20 @@ Page {
focus: true
add: Transition {
NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 300 }
NumberAnimation { property: "scale"; from: 0.9; to: 1.0; duration: 300 }
}
displaced: Transition {
NumberAnimation { properties: "x,y"; duration: 300; easing.type: Easing.InOutQuad }
}
delegate: ItemDelegate {
id: delegate
width: contactView.width
height: 0
Component.onCompleted: {
delegate.height = 50
}
height: 50
text: grade + classLetter
font.pixelSize: delegate.height * 0.4
@ -217,6 +222,24 @@ Page {
enabled: root.teacherMode ? role === "t":role === "s"
Rectangle {
anchors {
top: parent.top
left: parent.left
right: parent.right
}
visible: index === 0
height: 1
width: parent.width
color: "lightgrey"
opacity: 0.5
}
Rectangle {
anchors {
@ -229,24 +252,28 @@ Page {
width: parent.width
color: "lightgrey"
opacity: 0.5
}
Behavior on height {
ParallelAnimation {
id: deleteAnimation
NumberAnimation {
duration: 500
target: delegate
property: "scale"
duration: 300
from: 1
to: 0.9
easing.type: Easing.InOutQuad
}
}
NumberAnimation {
id: deleteAnimation
target: delegate
property: "height"
duration: 500
from: delegate.height
property: "opacity"
duration: 300
from: 1
to: 0
easing.type: Easing.InOutQuad
}
onRunningChanged: {
if(!running){
contactView.model.remove(index)
@ -254,7 +281,7 @@ Page {
}
}
Button {
ToolButton {
id: deleteButton
anchors {
@ -263,20 +290,14 @@ Page {
verticalCenter: parent.verticalCenter
}
height: parent.height * 0.6
width: height
height: parent.height
scale: pressed ? 0.8:1
icon.name: "delete"
onClicked: {
deleteAnimation.start()
}
background: Image {
source: "/graphics/icons/delete.png"
fillMode: Image.PreserveAspectFit
}
Behavior on scale {
PropertyAnimation {
duration: 100
@ -310,10 +331,12 @@ Page {
filterDialog.createContact()
}
Label {
anchors.centerIn: parent
Text {
anchors.fill: parent
font.pixelSize: parent.height * 0.6
text: "+"
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
color: app.style.style.textColor
}
}

View file

@ -50,7 +50,7 @@ Page {
FancyButton {
id: todayButton
image: "qrc:/graphics/icons/sheute.png"
image: "qrc:/icons/sheute.png"
size: mainMenu.buttonSize
@ -63,7 +63,7 @@ Page {
FancyButton {
id: tomorrowButton
image: "qrc:/graphics/icons/smorgen.png"
image: "qrc:/icons/smorgen.png"
size: mainMenu.buttonSize
@ -125,7 +125,7 @@ Page {
FancyButton {
id: logoutButton
image: "qrc:/graphics/icons/logoutRed.png"
image: "qrc:/icons/logoutRed.png"
imageScale: 0.8
size: smallMenu.buttonSize

View file

@ -126,6 +126,7 @@ Page {
}
}
}
}
SwitchDelegate {

View file

@ -19,6 +19,7 @@
import QtQuick 2.2
import QtQuick.Controls 2.1
import QtGraphicalEffects 1.0
import QtQuick.Layouts 1.3
import "../Components"
import "../Forms"
@ -133,23 +134,23 @@ Page {
anchors {
top: parent.top
left: parent.left
right: parent.right
topMargin: -60
}
height: 50
width: parent.width
Button {
id:toolButton
enabled: true
anchors {
left: parent.left
verticalCenter: parent.verticalCenter
leftMargin: parent.width *0.02
}
height: parent.height - parent.height * 0.5
width: height
RowLayout {
anchors.fill: parent
spacing: width * 0.02
ToolButton {
id: toolButton
icon.name: "back"
icon.color: app.style.style.textColor
onClicked: {
if(!formStack.currentItem.locked){
@ -157,29 +158,14 @@ Page {
}
}
onPressed: toolButton.scale = 0.9
onReleased: toolButton.scale = 1.0
background: Image {
source: app.style.style.backIcon
height: parent.height
width: parent.width
fillMode: Image.PreserveAspectFit
Behavior on scale {
PropertyAnimation {
duration: 100
}
}
}
}
Label {
Layout.fillWidth: true
text: getText()
anchors {
verticalCenter: parent.verticalCenter
left: toolButton.right
leftMargin: parent.width * 0.02
}
font.bold: true
color: app.style.style.textColor
@ -196,6 +182,8 @@ Page {
}
}
}
Behavior on anchors.topMargin {
NumberAnimation {
duration: 500

Binary file not shown.

Before

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.7 KiB

View file

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 10 KiB

View file

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

View file

Before

Width:  |  Height:  |  Size: 289 B

After

Width:  |  Height:  |  Size: 289 B

BIN
shared/icons/delete.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 776 B

View file

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 220 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 487 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 308 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 715 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 431 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 379 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 123 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 309 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 369 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 123 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 606 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 501 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 843 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 731 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 363 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 289 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 534 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 347 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 829 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 672 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 778 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

View file

Before

Width:  |  Height:  |  Size: 126 B

After

Width:  |  Height:  |  Size: 126 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 545 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 663 B

View file

Before

Width:  |  Height:  |  Size: 158 B

After

Width:  |  Height:  |  Size: 158 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 701 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 576 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 960 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 821 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 591 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 351 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 626 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 393 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 975 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 888 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 130 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 691 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 884 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 193 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 838 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 674 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 957 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 727 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 452 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 704 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 439 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 790 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 131 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 806 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 223 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 981 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 777 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 767 B

View file

@ -0,0 +1,24 @@
[Icon Theme]
Name=ibmaterial
Comment=some material icons
Directories=20x20,20x20@2,20x20@3,20x20@4
[20x20]
Size=20
Type=Fixed
[20x20@2]
Size=20
Scale=2
Type=Fixed
[20x20@3]
Size=20
Scale=3
Type=Fixed
[20x20@4]
Size=20
Scale=4
Type=Fixed

View file

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 4.4 KiB

View file

Before

Width:  |  Height:  |  Size: 7.4 KiB

After

Width:  |  Height:  |  Size: 7.4 KiB

View file

Before

Width:  |  Height:  |  Size: 311 KiB

After

Width:  |  Height:  |  Size: 311 KiB

View file

Before

Width:  |  Height:  |  Size: 324 KiB

After

Width:  |  Height:  |  Size: 324 KiB

View file

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 7.2 KiB

View file

Before

Width:  |  Height:  |  Size: 8.8 KiB

After

Width:  |  Height:  |  Size: 8.8 KiB

View file

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 11 KiB

View file

@ -1,27 +1,90 @@
<RCC>
<qresource prefix="/">
<file>graphics/icons/sheute.png</file>
<file>graphics/icons/smorgen.png</file>
<file>graphics/icons/back.png</file>
<file>graphics/icons/drawer.png</file>
<file>graphics/icons/menu.png</file>
<file>graphics/icons/hide.png</file>
<file>graphics/icons/view.png</file>
<file>graphics/images/FannyLogoDark.jpg</file>
<file>graphics/images/FannyLogoLight.png</file>
<file>graphics/images/TreffpunktFannyLogoDark.png</file>
<file>graphics/images/TreffpunktFannyLogoLight.png</file>
<file>graphics/icons/logoutBlack.png</file>
<file>graphics/icons/logoutRed.png</file>
<file>graphics/icons/settingsBlack.png</file>
<file>graphics/icons/backDark.png</file>
<file>graphics/icons/delete.png</file>
<file>sampleEventData/sample.pdf</file>
<file>sampleEventData/sample.txt</file>
<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>
<file>icons/ibmaterial/20x20/back.png</file>
<file>icons/ibmaterial/20x20/bookmark.png</file>
<file>icons/ibmaterial/20x20/bookmarkFilled.png</file>
<file>icons/ibmaterial/20x20/buy.png</file>
<file>icons/ibmaterial/20x20/calendar.png</file>
<file>icons/ibmaterial/20x20/cup.png</file>
<file>icons/ibmaterial/20x20/drawer.png</file>
<file>icons/ibmaterial/20x20/filter.png</file>
<file>icons/ibmaterial/20x20/flowchart.png</file>
<file>icons/ibmaterial/20x20/menu.png</file>
<file>icons/ibmaterial/20x20/pin.png</file>
<file>icons/ibmaterial/20x20/pinFilled.png</file>
<file>icons/ibmaterial/20x20/star.png</file>
<file>icons/ibmaterial/20x20/starFilled.png</file>
<file>icons/ibmaterial/20x20/year.png</file>
<file>icons/ibmaterial/20x20@2/back.png</file>
<file>icons/ibmaterial/20x20@2/bookmark.png</file>
<file>icons/ibmaterial/20x20@2/bookmarkFilled.png</file>
<file>icons/ibmaterial/20x20@2/buy.png</file>
<file>icons/ibmaterial/20x20@2/calendar.png</file>
<file>icons/ibmaterial/20x20@2/cup.png</file>
<file>icons/ibmaterial/20x20@2/drawer.png</file>
<file>icons/ibmaterial/20x20@2/filter.png</file>
<file>icons/ibmaterial/20x20@2/flowchart.png</file>
<file>icons/ibmaterial/20x20@2/menu.png</file>
<file>icons/ibmaterial/20x20@2/pin.png</file>
<file>icons/ibmaterial/20x20@2/pinFilled.png</file>
<file>icons/ibmaterial/20x20@2/star.png</file>
<file>icons/ibmaterial/20x20@2/starFilled.png</file>
<file>icons/ibmaterial/20x20@2/year.png</file>
<file>icons/ibmaterial/20x20@3/back.png</file>
<file>icons/ibmaterial/20x20@3/bookmark.png</file>
<file>icons/ibmaterial/20x20@3/bookmarkFilled.png</file>
<file>icons/ibmaterial/20x20@3/buy.png</file>
<file>icons/ibmaterial/20x20@3/calendar.png</file>
<file>icons/ibmaterial/20x20@3/cup.png</file>
<file>icons/ibmaterial/20x20@3/drawer.png</file>
<file>icons/ibmaterial/20x20@3/filter.png</file>
<file>icons/ibmaterial/20x20@3/flowchart.png</file>
<file>icons/ibmaterial/20x20@3/menu.png</file>
<file>icons/ibmaterial/20x20@3/pin.png</file>
<file>icons/ibmaterial/20x20@3/pinFilled.png</file>
<file>icons/ibmaterial/20x20@3/star.png</file>
<file>icons/ibmaterial/20x20@3/starFilled.png</file>
<file>icons/ibmaterial/20x20@3/year.png</file>
<file>icons/ibmaterial/20x20@4/back.png</file>
<file>icons/ibmaterial/20x20@4/bookmark.png</file>
<file>icons/ibmaterial/20x20@4/bookmarkFilled.png</file>
<file>icons/ibmaterial/20x20@4/buy.png</file>
<file>icons/ibmaterial/20x20@4/calendar.png</file>
<file>icons/ibmaterial/20x20@4/cup.png</file>
<file>icons/ibmaterial/20x20@4/drawer.png</file>
<file>icons/ibmaterial/20x20@4/filter.png</file>
<file>icons/ibmaterial/20x20@4/flowchart.png</file>
<file>icons/ibmaterial/20x20@4/menu.png</file>
<file>icons/ibmaterial/20x20@4/pin.png</file>
<file>icons/ibmaterial/20x20@4/pinFilled.png</file>
<file>icons/ibmaterial/20x20@4/star.png</file>
<file>icons/ibmaterial/20x20@4/starFilled.png</file>
<file>icons/ibmaterial/20x20@4/year.png</file>
<file>icons/ibmaterial/index.theme</file>
<file>icons/back.png</file>
<file>icons/backDark.png</file>
<file>icons/delete.png</file>
<file>icons/hide.png</file>
<file>icons/logoutBlack.png</file>
<file>icons/logoutRed.png</file>
<file>icons/settings.png</file>
<file>icons/settingsBlack.png</file>
<file>icons/sheute.png</file>
<file>icons/smorgen.png</file>
<file>icons/TreffpunktFannyLogo.png</file>
<file>icons/view.png</file>
<file>icons/ibmaterial/20x20/delete.png</file>
<file>icons/ibmaterial/20x20@2/delete.png</file>
<file>icons/ibmaterial/20x20@3/delete.png</file>
<file>icons/ibmaterial/20x20@4/delete.png</file>
</qresource>
</RCC>

View file

@ -27,8 +27,8 @@ AppStyle::AppStyle(QObject *parent) : QObject(parent)
{"lineColor", "grey"},
{"backIcon", "qrc:/graphics/icons/back.png"},
{"settingsIcon", "qrc:/graphics/icons/settings.png"},
{"backIcon", "qrc:/icons/back.png"},
{"settingsIcon", "qrc:/icons/settings.png"},
{"treffpunktFannyIcon", "qrc:/graphics/images/TreffpunktFannyLogoLight.png"},
{"fannyLogo", "qrc:/graphics/images/FannyLogoLight.png"},
@ -62,8 +62,8 @@ AppStyle::AppStyle(QObject *parent) : QObject(parent)
{"lineColor", "grey"},
{"backIcon", "qrc:/graphics/icons/backDark.png"},
{"settingsIcon", "qrc:/graphics/icons/settingsBlack.png"},
{"backIcon", "qrc:/icons/backDark.png"},
{"settingsIcon", "qrc:/icons/settingsBlack.png"},
{"treffpunktFannyIcon", "qrc:/graphics/images/TreffpunktFannyLogoDark.png"},
{"fannyLogo", "qrc:/graphics/images/FannyLogoDark.jpg"}

View file

@ -23,6 +23,9 @@
#include <QFile>
#include <QDesktopServices>
#include <QIcon>
#include <QStyleFactory>
#include <QtCore/QUrl>
#include <QtCore/QCommandLineOption>
#include <QtCore/QCommandLineParser>
@ -44,6 +47,7 @@ int main(int argc, char *argv[])
// ServerConn * pServerConn = new ServerConn();
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QGuiApplication::setAttribute(Qt::AA_UseHighDpiPixmaps);
QGuiApplication app(argc, argv);
@ -54,6 +58,9 @@ int main(int argc, char *argv[])
qmlRegisterType<AppStyle>("Backend", 1, 0, "AppStyle");
QQuickStyle::setStyle("Material");
QIcon::setFallbackSearchPaths(QIcon::fallbackSearchPaths() << ":/shared/icons");
QIcon::setThemeName("ibmaterial");
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
QQmlContext *context = engine.rootContext();