some styling improvements

fannyapp.pro

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

qml/Components/AppToolBar.qml

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

qml/Components/FancyButton.qml

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

qml/Forms/FilterForm.qml

@@ -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 {
+                    target: delegate
+                    property: "opacity"
+                    duration: 300
+                    from: 1
+                    to: 0
                     easing.type: Easing.InOutQuad
                 }
-            }
-
-
-            NumberAnimation {
-                id: deleteAnimation
-                target: delegate
-                property: "height"
-                duration: 500
-                from: delegate.height
-                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
         }
     }

qml/Forms/HomeForm.qml

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

qml/Forms/SettingsForm.qml

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

qml/Pages/MainPage.qml

@@ -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,67 +134,54 @@ 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 {
 
-            onClicked: {
-                if(!formStack.currentItem.locked){
-                    formStack.pop()
-                }
-            }
+            anchors.fill: parent
 
-            onPressed: toolButton.scale = 0.9
-            onReleased: toolButton.scale = 1.0
+            spacing: width * 0.02
 
-            background: Image {
-                source: app.style.style.backIcon
-                height: parent.height
-                width: parent.width
-                fillMode: Image.PreserveAspectFit
-                Behavior on scale {
-                    PropertyAnimation {
-                        duration: 100
+            ToolButton {
+                id: toolButton
+
+                icon.name: "back"
+                icon.color: app.style.style.textColor
+
+                onClicked: {
+                    if(!formStack.currentItem.locked){
+                        formStack.pop()
                     }
                 }
-            }
-        }
 
-        Label {
-            text: getText()
-            anchors {
-                verticalCenter: parent.verticalCenter
-                left: toolButton.right
-                leftMargin: parent.width * 0.02
             }
-            font.bold: true
-            color: app.style.style.textColor
 
-            function getText(){
-                var titleString = "";
-                for(var i=1; i<formStack.depth; i++){
-                    if(i > 1){
-                        titleString += " > "
+            Label {
+
+                Layout.fillWidth: true
+
+                text: getText()
+
+                font.bold: true
+                color: app.style.style.textColor
+
+                function getText(){
+                    var titleString = "";
+                    for(var i=1; i<formStack.depth; i++){
+                        if(i > 1){
+                            titleString += " > "
+                        }
+
+                        titleString += formStack.get(i).title
                     }
-
-                    titleString += formStack.get(i).title
+                    return(titleString)
                 }
-                return(titleString)
             }
+
         }
 
         Behavior on anchors.topMargin {

shared/icons/ibmaterial/index.theme

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

shared/shared.qrc

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

sources/appstyle.cpp

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

sources/main.cpp

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