Fix up Menu

Gui/Dashboard.qml

@@ -2,127 +2,106 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 
-ColumnLayout
+ColumnLayout {
-{
+    anchors.top: Navigation.bottom
-    anchors.top: TopBar.bottom
 
-    Rectangle
+    Rectangle {
-    {
+        Layout.bottomMargin: 3
-        color: "dimgrey"
         Layout.fillHeight: true
         Layout.fillWidth: true
-        Layout.bottomMargin: 3
+        color: "dimgrey"
         radius: 45
 
-        RowLayout
+        RowLayout {
-        {
             anchors.fill: parent
 
-            Rectangle
+            Rectangle {
-            {
                 id: contractButton
-                width: 300
+
-                height: 145
-                color: "darkslategray"
-                radius: 45
                 Layout.alignment: Qt.AlignHCenter
                 border.color: "steelblue"
                 border.width: 1
-                Text
+                color: "darkslategray"
-                {
+                height: 145
+                radius: 45
+                width: 300
+
+                Text {
+                    anchors.centerIn: parent
+                    color: "lightgoldenrodyellow"
+                    font.bold: true
+                    font.pixelSize: 45
                     text: qsTr("Aufträge")
-                    anchors.centerIn: parent
-                    font.pixelSize: 45
-                    font.bold: true
-                    color: "lightgoldenrodyellow"
                 }
-
+                MouseArea {
-                MouseArea
-                {
                     anchors.fill: parent
                     cursorShape: Qt.PointingHandCursor
                     hoverEnabled: true
-                    onPressed:
-                    {
-                        contractButton.color = "darkolivegreen"
-                        contractButton.border.width = 3
-                        contractButton.border.color = "skyblue"
-                        console.log("Aufträge...")
-                    }
 
-                    onReleased:
+                    onExited: {
-                    {
+                        contractButton.color = "darkslategray";
-                        contractButton.color = "darkslategray"
+                        contractButton.border.color = "steelblue";
-                        contractButton.border.width = 1
+                        contractButton.border.width = 1;
-                        contractButton.border.color = "steelblue"
                     }
-
+                    onHoveredChanged: {
-                    onHoveredChanged:
+                        var w = contractButton.border.width === 3 ? 1 : 3;
-                    {
+                        contractButton.border.width = w;
-                        var w = contractButton.border.width === 3? 1: 3
-                        contractButton.border.width = w
                     }
-
+                    onPressed: {
-                    onExited:
+                        contractButton.color = "darkolivegreen";
-                    {
+                        contractButton.border.width = 3;
-
+                        contractButton.border.color = "skyblue";
-                        contractButton.color = "darkslategray"
+                        console.log("Aufträge...");
-                        contractButton.border.color = "steelblue"
+                    }
-                        contractButton.border.width = 1
+                    onReleased: {
+                        contractButton.color = "darkslategray";
+                        contractButton.border.width = 1;
+                        contractButton.border.color = "steelblue";
                     }
                 }
             }
-
+            Rectangle {
-            Rectangle
-            {
                 id: offerButton
-                width: 300
+
-                height: 145
-                color: "darkslategray"
-                radius: 45
                 Layout.alignment: Qt.AlignHCenter
                 border.color: "steelblue"
                 border.width: 1
-                Text
+                color: "darkslategray"
-                {
+                height: 145
-                    text: qsTr("Angebote")
+                radius: 45
+                width: 300
+
+                Text {
                     anchors.centerIn: parent
-                    font.pixelSize: 45
-                    font.bold: true
                     color: "lightgoldenrodyellow"
+                    font.bold: true
+                    font.pixelSize: 45
+                    text: qsTr("Angebote")
                 }
-                MouseArea
+                MouseArea {
-                {
                     anchors.fill: parent
                     cursorShape: Qt.PointingHandCursor
                     hoverEnabled: true
 
-                    onPressed:
+                    onExited: {
-                    {
+                        offerButton.color = "darkslategray";
-                        offerButton.color = "darkolivegreen"
+                        offerButton.border.color = "steelblue";
-                        offerButton.border.width = 3
+                        offerButton.border.width = 1;
-                        offerButton.border.color = "skyblue"
-                        console.log("Angebote...")
                     }
-                    onReleased:
+                    onHoveredChanged: {
-                    {
+                        var w = offerButton.border.width === 3 ? 1 : 3;
-                        offerButton.color = "darkslategray"
+                        offerButton.border.width = w;
-                        offerButton.border.width = 1
-                        offerButton.border.color = "steelblue"
                     }
-
+                    onPressed: {
-                    onHoveredChanged:
+                        offerButton.color = "darkolivegreen";
-                    {
+                        offerButton.border.width = 3;
-                        var w = offerButton.border.width === 3? 1: 3
+                        offerButton.border.color = "skyblue";
-                        offerButton.border.width = w
+                        console.log("Angebote...");
                     }
-
+                    onReleased: {
-                    onExited:
+                        offerButton.color = "darkslategray";
-                    {
+                        offerButton.border.width = 1;
-
+                        offerButton.border.color = "steelblue";
-                        offerButton.color = "darkslategray"
-                        offerButton.border.color = "steelblue"
-                        offerButton.border.width = 1
                     }
                 }
             }

Gui/Navigation.qml

@@ -3,8 +3,6 @@ import QtQuick.Controls
 import QtQuick.Layouts
 
 ColumnLayout {
-    id: topBar
-
     height: parent.height
     spacing: 0
 
@@ -14,18 +12,12 @@ ColumnLayout {
     }
     ButtonGroup {
         id: buttonBar
-
     }
     BarButton {
         id: dashBoard
 
         ButtonGroup.group: buttonBar
-        Layout.margins: 3
-        Layout.topMargin: Dimensions.s
-        flat: true
         icon.source: "qrc:/images/dash.svg"
-        implicitHeight: 90
-        implicitWidth: 90
         text: qsTr("Dashboard")
 
         onClicked: {
@@ -36,11 +28,7 @@ ColumnLayout {
         id: kunden
 
         ButtonGroup.group: buttonBar
-        Layout.margins: 3
-        flat: true
         icon.source: "qrc:/images/customer.svg"
-        implicitHeight: 90
-        implicitWidth: 90
         text: qsTr("Kunden")
 
         onClicked: {
@@ -51,11 +39,7 @@ ColumnLayout {
         id: objekt
 
         ButtonGroup.group: buttonBar
-        Layout.margins: 3
-        flat: true
         icon.source: "qrc:/images/object.svg"
-        implicitHeight: 90
-        implicitWidth: 90
         text: qsTr("Objekt")
 
         onClicked: {
@@ -66,11 +50,7 @@ ColumnLayout {
         id: mitarbeiter
 
         ButtonGroup.group: buttonBar
-        Layout.margins: 3
-        flat: true
         icon.source: "qrc:/images/employee.svg"
-        implicitHeight: 90
-        implicitWidth: 90
         text: qsTr("Mitarbeiter")
 
         onClicked: {
@@ -81,11 +61,7 @@ ColumnLayout {
         id: offers
 
         ButtonGroup.group: buttonBar
-        Layout.margins: 3
-        flat: true
         icon.source: "qrc:/images/offer.svg"
-        implicitHeight: 90
-        implicitWidth: 90
         text: qsTr("Angebote")
 
         onClicked: {
@@ -96,11 +72,7 @@ ColumnLayout {
         id: abrechnung
 
         ButtonGroup.group: buttonBar
-        Layout.margins: 3
-        flat: true
         icon.source: "qrc:/images/invoice.svg"
-        implicitHeight: 90
-        implicitWidth: 90
         text: qsTr("Abrechnung")
     }
     Item {

Gui/main.qml

@@ -4,173 +4,148 @@ import QtQuick.Controls
 import QtQuick.Dialogs
 import QtCore
 
-ApplicationWindow
+ApplicationWindow {
-{
     id: appWindow
-    width: Screen.width * .75
+
-    height: Screen.height * .85
-    visible: true
-    title: "TERO Personal"
-    font: Typography.body
-    color: Colors.mantle
     property string confile: ""
     property alias settingsFileDialog: settingsFiledialog
 
+    function goToLogin() {
+        appLoader.source = "LoginScreen.qml";
+        navigation.visible = true;
+    }
+    function showWindow(why) {
+        if (why === 3) {
+            systray.setVisible(false);
+            appWindow.show();
+        }
+    }
+
+    color: Colors.mantle
+    font: Typography.body
+    height: Screen.height * .85
     palette.text: Colors.foreground
+    title: "TERO Personal"
+    visible: true
+    width: Screen.width * .75
 
+    Component.onCompleted: {
+        config.configurationReady.connect(goToLogin);
+        systray.activated.connect(showWindow);
 
-    TopBar
+        if (bad_config) {
-    {
+            importDialog.open();
-        id:topBar
+        } else {
-        visible: bad_config || !db_con ? false: true
+            if (db_con)
+                appLoader.source = "LoginScreen.qml";
+            else
+                appLoader.source = "NoDbConnection.qml";
+        }
+    }
+    onClosing: close => {
+        if (false) {
+            console.log("Main window closed!! Was soll ich tun? kann ich mich beenden?!");
+        }
+    }
+    onVisibilityChanged: {
+        if (appWindow.visibility === Window.Minimized && config.systray()) {
+            systray.setVisible(true);
+            appWindow.hide();
+        }
+    }
+    onWindowStateChanged: windowState => {
+        if (windowState !== Qt.WindowMinimized) {
+            systray.setVisible(false);
+            appWindow.show();
+        }
     }
 
-    PrinterDialog
+    Navigation {
-    {
+        id: navigation
+
+        visible: bad_config || !db_con ? false : true
+    }
+    PrinterDialog {
         id: printerDialog
-    }
 
-    ReadMe
+    }
-    {
+    ReadMe {
         id: readMeWin
-    }
 
-    Item
+    }
-    {
+    Item {
         id: mainView
+
     }
 
-    Loader
+    Rectangle {
-    {
+        id: contentBackground
-        id: appLoader
+        anchors {
-
+            bottom: parent.bottom
-        anchors
+            left: navigation.right
-        {
-            left: topBar.right
             right: parent.right
             top: parent.top
-            bottom: parent.bottom
-
-
-
-            topMargin: Dimensions.l
-            bottomMargin: Dimensions.l
-            rightMargin: Dimensions.l
-            leftMargin: Dimensions.l
-
         }
+        color: Colors.background
+    }
+
+    Loader {
+        id: appLoader
 
         property alias window: appWindow
+
+        anchors {
+            fill: contentBackground
+            margins: Dimensions.l
+        }
     }
 
-
+    Dialog {
-    Dialog
-    {
         id: importDialog
-        modal: true
+
         anchors.centerIn: parent
+        modal: true
         standardButtons: Dialog.Yes | Dialog.No
-        onAccepted: settingsFiledialog.open()
-        onRejected: appLoader.source= "Firststart.qml"
         title: qsTr("Einstellungen importieren")
+
+        onAccepted: settingsFiledialog.open()
+        onRejected: appLoader.source = "Firststart.qml"
     }
-
+    FileDialog {
-    FileDialog
-    {
-
         id: settingsFiledialog
-        title: qsTr("PYQCRM Einstellungen")
+
         currentFolder: StandardPaths.standardLocations(StandardPaths.DocumentsLocation)[0]
         modality: "ApplicationModal"
         nameFilters: [qsTr("PYQCRM Einstellungen (*.pyqrec)")]
-        onAccepted:
-        {
-            exportFilePassword.open()
-            confile = selectedFile
-        }
-    }
-
-    Dialog
-    {
-        id: exportFilePassword
-        modal: true
         title: qsTr("PYQCRM Einstellungen")
+
+        onAccepted: {
+            exportFilePassword.open();
+            confile = selectedFile;
+        }
+    }
+    Dialog {
+        id: exportFilePassword
+
         anchors.centerIn: parent
+        modal: true
         standardButtons: Dialog.Ok | Dialog.Cancel
+        title: qsTr("PYQCRM Einstellungen")
+
         onAccepted: config.importConfig(confile, exportPasswordInput.text)
-        ColumnLayout
+
-        {
+        ColumnLayout {
-            RowLayout
+            RowLayout {
-            {
+                Label {
-                Label
-                {
                     text: qsTr("Passwort eingeben:")
                 }
-
+                TextField {
-                TextField
-                {
                     id: exportPasswordInput
+
                     echoMode: TextInput.Password
                     implicitWidth: 300
                 }
             }
         }
     }
-
-    Component.onCompleted:
-    {
-        config.configurationReady.connect(goToLogin)
-        systray.activated.connect(showWindow)
-
-        if(bad_config)
-        {
-            importDialog.open()
-        }
-        else
-        {
-            if (db_con) appLoader.source= "LoginScreen.qml"
-            else appLoader.source= "NoDbConnection.qml"
-        }
-    }
-
-
-    function showWindow(why)
-    {
-        if (why === 3)
-        {
-            systray.setVisible(false)
-            appWindow.show()
-        }
-    }
-    onVisibilityChanged:
-    {
-        if (appWindow.visibility === Window.Minimized && config.systray())
-        {
-            systray.setVisible(true)
-            appWindow.hide()
-        }
-    }
-
-    onWindowStateChanged: (windowState) =>
-    {
-        if (windowState !== Qt.WindowMinimized)
-        {
-            systray.setVisible(false)
-            appWindow.show()
-        }
-    }
-
-    onClosing: (close) =>
-    {
-        if (false)
-        {
-            console.log("Main window closed!! Was soll ich tun? kann ich mich beenden?!")
-        }
-    }
-
-    function goToLogin()
-    {
-        appLoader.source= "LoginScreen.qml"
-        topBar.visible = true
-    }
 }

Gui/qmldir

@@ -1,2 +1,2 @@
 module gui
-TopBar 1.0 TopBar.qml
+TopBar 1.0 Navigation.qml

TeroStyle/BarButton.qml

@@ -10,40 +10,43 @@ T.ToolButton {
     icon.color: Colors.foreground
     icon.height: 36
     icon.width: 36
-    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitContentHeight + topPadding + bottomPadding)
+    implicitHeight: 90
-    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitContentWidth + leftPadding + rightPadding)
+    implicitWidth: 100
     topPadding: 20
 
-    background: Rectangle {
-        id: mainrect
-
-        border.color: control.palette.highlight
-        border.width: control.visualFocus ? 2 : 0
-        color: Color.blend(control.checked || control.highlighted ? control.palette.dark : control.palette.button, control.palette.mid, control.down ? 0.5 : 0.0)
-        implicitHeight: control.height
-        implicitWidth: control.width
-        visible: !control.flat || control.down || control.checked || control.highlighted
-        x: control.left
-        y: control.top
-
-        Rectangle {
-            color: "yellow"
-            implicitHeight: control.height
-            implicitWidth: 6
-            x: mainrect.left
-            y: mainrect.top
-        }
-    }
     contentItem: Column {
+        readonly property color color: control.checked ? Colors.primaryShade : control.hovered ? Colors.primary : Colors.foreground
+
         IconLabel {
-            icon: control.icon
+            icon.color: parent.color
+            icon.source: control.icon.source
+            icon.height: control.icon.height
+            icon.width: control.icon.width
+            color: parent.color
             x: parent.width * .5 - width * .5
         }
         Label {
-            color: Colors.foreground
+            font: Typography.small
-            font: Typography.dash
+            color: parent.color
             text: control.text
             x: parent.width * .5 - width * .5
         }
     }
+
+    Rectangle {
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.top: parent.top
+        color: control.checked ? Colors.primaryShade : Colors.primary
+        implicitWidth: 6
+        visible: control.checked || control.hovered
+    }
+    MouseArea {
+        id: mouseArea
+
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+
+        onPressed: mouse => mouse.accepted = false
+    }
 }

TeroStyle/Colors.qml

@@ -11,9 +11,10 @@ QtObject {
     readonly property color primary: "#b81a34"
     readonly property color primaryContrast: "#fdfdfd"
     readonly property color primaryLighter: Qt.lighter(primary, 1.5)
+    readonly property color primaryShade: theme === dark ? primaryLighter : Qt.darker(primary, 1.5)
     readonly property color foreground: theme === dark ? "#fdfdfd" : "#110b0c"
     readonly property color background: theme === dark ? "#303136" : "#eff1f5"
-    readonly property color mantle: theme === dark ? "#1e1f22" : "#e7e9ef"
+    readonly property color mantle: theme === dark ? "#1E1E23" : "#e7e9ef"
     readonly property color interactive: theme === dark ? "#878b97" : "#d9d9da"
     readonly property color error: theme === dark ? "#ff2264" : "#ff004b"
     readonly property color transparent: "transparent"

TeroStyle/Typography.qml

@@ -3,38 +3,29 @@ pragma Singleton
 import QtCore
 import QtQuick
 
-Item
+Item {
-{
+    readonly property font body: ({
-    readonly property FontLoader robotoCondensed: FontLoader
-    {
-        source: "qrc:/fonts/RobotoCondensed.otf"
-    }
-
-    readonly property font body:
-    ({
             family: robotoCondensed.font,
             pointSize: 16,
             weight: Font.Medium,
             letterSpacing: 0,
-        kerning: true,
+            kerning: true
         })
-
+    readonly property font small: ({
-    readonly property font h1:
+            family: body.family,
-    ({
+            pointSize: 11,
+            weight: Font.DemiBold,
+            letterSpacing: body.letterSpacing,
+            kerning: body.kerning
+        })
+    readonly property font h1: ({
             family: body.family,
             pointSize: 38,
             weight: body.weight,
             letterSpacing: body.letterSpacing,
-        kerning: body.kerning,
+            kerning: body.kerning
         })
-
+    readonly property FontLoader robotoCondensed: FontLoader {
-    readonly property font dash:
+        source: "qrc:/fonts/RobotoCondensed.otf"
-    ({
+    }
-        family: body.family,
-        pointSize: 10,
-        weight: body.weight,
-        letterSpacing: body.letterSpacing,
-        kerning: body.kerning,
-    })
-
 }

qml.qrc

@@ -1,6 +1,6 @@
 <RCC>
     <qresource prefix="/">
-        <file>Gui/TopBar.qml</file>
+        <file>Gui/Navigation.qml</file>
         <file>Gui/AdminUserConfig.qml</file>
         <file>Gui/EncryptionKey.qml</file>
         <file>Gui/DbConfiguration.qml</file>