BarButton still in progress

merg

Gui/TopBar.qml

@@ -2,11 +2,11 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 
-RowLayout
+ColumnLayout
 {
     id: topBar
     spacing: 0
-    width: parent.width
+    height: parent.height
     anchors
     {
         top: parent.top
@@ -15,194 +15,217 @@ RowLayout
 
     }
 
-    Button
+    BarButton
     {
         id: dashBoard
         flat: true
         text: qsTr("Dashboard")
-        implicitWidth: abrechnung.implicitContentWidth + 10
+        implicitWidth: 90
+        implicitHeight: 90
         Layout.margins: 3
-        Layout.leftMargin: 0
+        Layout.topMargin: Dimensions.s
-        background: Rectangle
+        icon.source: "qrc:/images/dash.svg"
-        {
+
-            id: dashiBackie
+        // background: Rectangle
-            border.width: dashBoard.activeFocus ? 2 : 1
+        // {
-            border.color: "#888"
+        //     id: dashiBackie
-            radius: 4
+        //     border.width: dashBoard.activeFocus ? 2 : 1
-            gradient: Gradient
+        //     border.color: "#888"
-            {
+        //     radius: 4
-                GradientStop { position: 0 ; color: dashBoard.pressed ? "#000" : "#001" }
+        //     gradient: Gradient
-                GradientStop { position: 1 ; color: dashBoard.pressed ? "#100" : "#000" }
+        //     {
-            }
+        //         GradientStop { position: 0 ; color: dashBoard.pressed ? "#000" : "#001" }
-        }
+        //         GradientStop { position: 1 ; color: dashBoard.pressed ? "#100" : "#000" }
+        //     }
+        // }
         onClicked:
         {
             appLoader.source = "Dashboard.qml"
-            dashiBackie.border.width = 2
+            // dashiBackie.border.width = 2
-            kundiBackie.border.width = 1
+            // kundiBackie.border.width = 1
-            mitoBackie.border.width = 1
+            // mitoBackie.border.width = 1
-            invoBackie.border.width = 1
+            // invoBackie.border.width = 1
-            objBackie.border.width = 1
+            // objBackie.border.width = 1
         }
     }
 
-    Button
+    BarButton
     {
         id: kunden
         flat: true
         text: qsTr("Kunden")
-        implicitWidth: abrechnung.implicitContentWidth + 10
+        implicitWidth: 90
+        implicitHeight: 90
         Layout.margins: 3
-        background: Rectangle
+        icon.source: "qrc:/images/customer.svg"
-        {
+
-            id: kundiBackie
+        // background: Rectangle
-            border.width: kunden.activeFocus ? 2 : 1
+        // {
-            border.color: "#888"
+        //     id: kundiBackie
-            radius: 4
+        //     border.width: kunden.activeFocus ? 2 : 1
-            gradient: Gradient
+        //     border.color: "#888"
-            {
+        //     radius: 4
-                GradientStop { position: 0 ; color: kunden.pressed ? "#000" : "#001" }
+        //     gradient: Gradient
-                GradientStop { position: 1 ; color: kunden.pressed ? "#100" : "#000" }
+        //     {
-            }
+        //         GradientStop { position: 0 ; color: kunden.pressed ? "#000" : "#001" }
-        }
+        //         GradientStop { position: 1 ; color: kunden.pressed ? "#100" : "#000" }
+        //     }
+        // }
         onClicked:
         {
             // TODO: here we should call the model
             appLoader.source = "CustomerTable.qml"
-            kundiBackie.border.width = 2
+            // kundiBackie.border.width = 2
-            dashiBackie.border.width = 1
+            // dashiBackie.border.width = 1
-            mitoBackie.border.width = 1
+            // mitoBackie.border.width = 1
-            invoBackie.border.width = 1
+            // invoBackie.border.width = 1
-            objBackie.border.width = 1
+            // objBackie.border.width = 1
         }
     }
 
-    Button
+    BarButton
     {
         id: objekt
         flat: true
         text: qsTr("Objekt")
-        implicitWidth: abrechnung.implicitContentWidth + 10
+        implicitWidth: 90
+        implicitHeight: 90
         Layout.margins: 3
-        background: Rectangle
+        icon.source: "qrc:/images/object.svg"
-        {
+
-            id: objBackie
+        // background: Rectangle
-            border.width: objekt.activeFocus ? 2 : 1
+        // {
-            border.color: "#888"
+        //     id: objBackie
-            radius: 4
+        //     border.width: objekt.activeFocus ? 2 : 1
-            gradient: Gradient
+        //     border.color: "#888"
-            {
+        //     radius: 4
-                GradientStop { position: 0 ; color: objekt.pressed ? "#000" : "#001" }
+        //     gradient: Gradient
-                GradientStop { position: 1 ; color: objekt.pressed ? "#100" : "#000" }
+        //     {
-            }
+        //         GradientStop { position: 0 ; color: objekt.pressed ? "#000" : "#001" }
-        }
+        //         GradientStop { position: 1 ; color: objekt.pressed ? "#100" : "#000" }
+        //     }
+        // }
         onClicked:
         {
             appLoader.source = "ObjectTable.qml"
-            objBackie.border.width = 2
+            // objBackie.border.width = 2
-            dashiBackie.border.width = 1
+            // dashiBackie.border.width = 1
-            kundiBackie.border.width = 1
+            // kundiBackie.border.width = 1
-            mitoBackie.border.width = 1
+            // mitoBackie.border.width = 1
-            invoBackie.border.width = 1
+            // invoBackie.border.width = 1
         }
 
     }
 
-    Button
+    BarButton
     {
         id: mitarbeiter
         flat: true
         text: qsTr("Mitarbeiter")
-        implicitWidth: abrechnung.implicitContentWidth + 10
+        implicitWidth: 90
+        implicitHeight: 90
         Layout.margins: 3
-        background: Rectangle
+        icon.source: "qrc:/images/employee.svg"
-        {
+
-            id: mitoBackie
+
-            border.width: mitarbeiter.activeFocus ? 2 : 1
+        // background: Rectangle
-            border.color: "#888"
+        // {
-            radius: 4
+        //     id: mitoBackie
-            gradient: Gradient
+        //     border.width: mitarbeiter.activeFocus ? 2 : 1
-            {
+        //     border.color: "#888"
-                GradientStop { position: 0 ; color: mitarbeiter.pressed ? "#000" : "#001" }
+        //     radius: 4
-                GradientStop { position: 1 ; color: mitarbeiter.pressed ? "#100" : "#000" }
+        //     gradient: Gradient
-            }
+        //     {
-        }
+        //         GradientStop { position: 0 ; color: mitarbeiter.pressed ? "#000" : "#001" }
+        //         GradientStop { position: 1 ; color: mitarbeiter.pressed ? "#100" : "#000" }
+        //     }
+        // }
         onClicked:
         {
             appLoader.source = "EmployeeTable.qml"
-            mitoBackie.border.width = 2
+            // mitoBackie.border.width = 2
-            dashiBackie.border.width = 1
+            // dashiBackie.border.width = 1
-            kundiBackie.border.width = 1
+            // kundiBackie.border.width = 1
-            invoBackie.border.width = 1
+            // invoBackie.border.width = 1
-            objBackie.border.width = 1
+            // objBackie.border.width = 1
         }
     }
 
-    Button
+    BarButton
     {
         id: offers
         flat: true
         text: qsTr("Angebote")
-        implicitWidth: abrechnung.implicitContentWidth + 10
+        implicitWidth: 90
+        implicitHeight: 90
         Layout.margins: 3
-        background: Rectangle
+        icon.source: "qrc:/images/offer.svg"
-        {
+
-            id: offersBackie
+        // background: Rectangle
-            border.width: offers.activeFocus ? 2 : 1
+        // {
-            border.color: "#888"
+        //     id: offersBackie
-            radius: 4
+        //     border.width: offers.activeFocus ? 2 : 1
-            gradient: Gradient
+        //     border.color: "#888"
-            {
+        //     radius: 4
-                GradientStop { position: 0 ; color: offers.pressed ? "#000" : "#001" }
+        //     gradient: Gradient
-                GradientStop { position: 1 ; color: offers.pressed ? "#100" : "#000" }
+        //     {
-            }
+        //         GradientStop { position: 0 ; color: offers.pressed ? "#000" : "#001" }
-        }
+        //         GradientStop { position: 1 ; color: offers.pressed ? "#100" : "#000" }
+        //     }
+        // }
         onClicked:
         {
             appLoader.source = "OfferTable.qml"
-            mitoBackie.border.width = 2
+            // mitoBackie.border.width = 2
-            dashiBackie.border.width = 1
+            // dashiBackie.border.width = 1
-            kundiBackie.border.width = 1
+            // kundiBackie.border.width = 1
-            invoBackie.border.width = 1
+            // invoBackie.border.width = 1
-            objBackie.border.width = 1
+            // objBackie.border.width = 1
-            offersBackie.border.width = 1
+            // offersBackie.border.width = 1
         }
     }
 
-    Button
+    BarButton
     {
         id: abrechnung
         flat: true
         text: qsTr("Abrechnung")
-        implicitWidth: abrechnung.implicitContentWidth + 10
+        implicitWidth: 90
+        implicitHeight: 90
         Layout.margins: 3
-        background: Rectangle
+        icon.source: "qrc:/images/invoice.svg"
-        {
+
-            id: invoBackie
+        // background: Rectangle
-            border.width: abrechnung.activeFocus ? 2 : 1
+        // {
-            border.color: "#888"
+        //     id: invoBackie
-            radius: 4
+        //     border.width: abrechnung.activeFocus ? 2 : 1
-            gradient: Gradient
+        //     border.color: "#888"
-            {
+        //     radius: 4
-                GradientStop { position: 0 ; color: abrechnung.pressed ? "#000" : "#001" }
+        //     gradient: Gradient
-                GradientStop { position: 1 ; color: abrechnung.pressed ? "#100" : "#000" }
+        //     {
-            }
+        //         GradientStop { position: 0 ; color: abrechnung.pressed ? "#000" : "#001" }
-        }
+        //         GradientStop { position: 1 ; color: abrechnung.pressed ? "#100" : "#000" }
+        //     }
+        // }
     }
 
     Item
     {
         id: hspacer
-        Layout.fillWidth: true
+        Layout.fillHeight: true
     }
 
-    Button
+    BarButton
     {
         id: atajos
         icon.source: "qrc:/images/menu.svg"
-        icon.color: "red"
+
+        implicitWidth: 90
+        implicitHeight: 90
+
+
         flat: true
-        Layout.rightMargin: 9
+        Layout.bottomMargin: Dimensions.s
         onClicked: mainMenu.open()
 
         Menu {

Gui/main.qml

@@ -51,14 +51,11 @@ ApplicationWindow
 
         anchors
         {
-            left: parent.left
+            left: topBar.right
             right: parent.right
-            top: topBar.bottom
+            top: parent.top
             bottom: parent.bottom
-            topMargin: 0
+            margins: Dimensions.s
-            bottomMargin: 5
-            rightMargin: 9
-            leftMargin: 9
         }
 
         property alias window: appWindow

TeroStyle/BarButton.qml

@@ -0,0 +1,87 @@
+import QtQuick
+import QtQuick.Controls.impl
+import QtQuick.Controls
+import QtQuick.Templates as T
+
+T.ToolButton {
+    id: control
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
+    checkable: true
+    icon.color: Colors.foreground
+    icon.height: 36
+    icon.width: 36
+    topPadding: 20
+    // horizontalPadding: padding + 2
+    // spacing: 6
+    // display: AbstractButton.TextUnderIcon
+
+    // icon.color: control.checked || control.highlighted ? control.palette.brightText :
+    //            control.flat && !control.down ? (control.visualFocus ? control.palette.highlight : control.palette.windowText) : control.palette.buttonText
+
+    contentItem: Column
+    {
+
+        IconLabel
+        {
+
+
+            x: parent.width * .5 - width * .5
+            // height: icon.height
+            // width: icon.width
+            icon: control.icon
+
+            // display: control.display
+
+
+        }
+        Label
+        {
+            text: control.text
+            font: Typography.dash
+
+            color: Colors.foreground
+            x: parent.width * .5 - width * .5
+
+
+
+        }
+
+        // spacing: control.spacing
+        // mirrored: control.mirrored
+        // display: control.TextUnderIcon
+
+        // icon: control.icon
+        // text: control.text
+        // font: control.font
+        // color: control.checked || control.highlighted ? control.palette.brightText :
+        //        control.flat && !control.down ? (control.visualFocus ? control.palette.highlight : control.palette.windowText) : control.palette.buttonText
+
+    }
+
+    background: Rectangle {
+        id: mainrect
+        implicitWidth: control.width
+        implicitHeight: control.height
+        visible: !control.flat || control.down || control.checked || control.highlighted
+        x: control.left
+        y: control.top
+        color: Color.blend(control.checked || control.highlighted ? control.palette.dark : control.palette.button,
+                                                                    control.palette.mid, control.down ? 0.5 : 0.0)
+        border.color: control.palette.highlight
+        border.width: control.visualFocus ? 2 : 0
+        Rectangle
+        {
+            implicitHeight: control.height
+            implicitWidth: 6
+            x: mainrect.left
+            y: mainrect.top
+            color: "yellow"
+
+        }
+    }
+
+}

TeroStyle/Typography.qml

@@ -27,4 +27,14 @@ Item
         letterSpacing: body.letterSpacing,
         kerning: body.kerning,
     })
+
+    readonly property font dash:
+    ({
+        family: body.family,
+        pointSize: 10,
+        weight: body.weight,
+        letterSpacing: body.letterSpacing,
+        kerning: body.kerning,
+    })
+
 }

TeroStyle/qmldir

@@ -6,3 +6,4 @@ Button Button.qml
 ComboBox ComboBox.qml
 Field Field.qml
 TextField TextField.qml
+BarButton BarButton.qml

images/contract.svg

@@ -0,0 +1,3 @@
+<svg data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z"></path>
+</svg>

images/customer.svg

@@ -0,0 +1,3 @@
+<svg data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"></path>
+</svg>

images/dash.svg

@@ -0,0 +1,3 @@
+<svg data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M6.429 9.75 2.25 12l4.179 2.25m0-4.5 5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0 4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0-5.571 3-5.571-3"></path>
+</svg>

images/employee.svg

@@ -0,0 +1,3 @@
+<svg data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z"></path>
+</svg>

images/invoice.svg

@@ -0,0 +1,3 @@
+<svg data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a2.25 2.25 0 0 0-2.25-2.25H15a3 3 0 1 1-6 0H5.25A2.25 2.25 0 0 0 3 12m18 0v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6m18 0V9M3 12V9m18 0a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 9m18 0V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v3"></path>
+</svg>

images/object.svg

@@ -0,0 +1,3 @@
+<svg data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Zm0 3h.008v.008h-.008v-.008Z"></path>
+</svg>

images/offer.svg

@@ -0,0 +1,3 @@
+<svg data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M6 6.878V6a2.25 2.25 0 0 1 2.25-2.25h7.5A2.25 2.25 0 0 1 18 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 0 0 4.5 9v.878m13.5-3A2.25 2.25 0 0 1 19.5 9v.878m0 0a2.246 2.246 0 0 0-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0 1 21 12v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6c0-.98.626-1.813 1.5-2.122"></path>
+</svg>

pyqcrm.qrc

@@ -17,5 +17,12 @@
         <file>README</file>
         <file>LICENSE</file>
         <file>images/tero.jpg</file>
+        <file>images/dash.svg</file>
+        <file>images/invoice.svg</file>
+        <file>images/offer.svg</file>
+        <file>images/employee.svg</file>
+        <file>images/customer.svg</file>
+        <file>images/contract.svg</file>
+        <file>images/object.svg</file>
     </qresource>
 </RCC>

qml.qrc

@@ -57,7 +57,7 @@
         <file>TeroStyle/qmldir</file>
         <file>TeroStyle/TextField.qml</file>
         <file>TeroStyle/Typography.qml</file>
+        <file>TeroStyle/BarButton.qml</file>
     </qresource>
     <qresource prefix="/TeroStyle"/>
 </RCC>
-