diff --git a/Gui/TopBar.qml b/Gui/TopBar.qml index 8b4e6dc..af96145 100644 --- a/Gui/TopBar.qml +++ b/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 - background: Rectangle - { - id: dashiBackie - border.width: dashBoard.activeFocus ? 2 : 1 - border.color: "#888" - radius: 4 - gradient: Gradient - { - GradientStop { position: 0 ; color: dashBoard.pressed ? "#000" : "#001" } - GradientStop { position: 1 ; color: dashBoard.pressed ? "#100" : "#000" } - } - } + Layout.topMargin: Dimensions.s + icon.source: "qrc:/images/dash.svg" + + // background: Rectangle + // { + // id: dashiBackie + // border.width: dashBoard.activeFocus ? 2 : 1 + // border.color: "#888" + // radius: 4 + // gradient: Gradient + // { + // 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 - kundiBackie.border.width = 1 - mitoBackie.border.width = 1 - invoBackie.border.width = 1 - objBackie.border.width = 1 + // dashiBackie.border.width = 2 + // kundiBackie.border.width = 1 + // mitoBackie.border.width = 1 + // invoBackie.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 - { - id: kundiBackie - border.width: kunden.activeFocus ? 2 : 1 - border.color: "#888" - radius: 4 - gradient: Gradient - { - GradientStop { position: 0 ; color: kunden.pressed ? "#000" : "#001" } - GradientStop { position: 1 ; color: kunden.pressed ? "#100" : "#000" } - } - } + icon.source: "qrc:/images/customer.svg" + + // background: Rectangle + // { + // id: kundiBackie + // border.width: kunden.activeFocus ? 2 : 1 + // border.color: "#888" + // radius: 4 + // gradient: Gradient + // { + // 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 - dashiBackie.border.width = 1 - mitoBackie.border.width = 1 - invoBackie.border.width = 1 - objBackie.border.width = 1 + // kundiBackie.border.width = 2 + // dashiBackie.border.width = 1 + // mitoBackie.border.width = 1 + // invoBackie.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 - { - id: objBackie - border.width: objekt.activeFocus ? 2 : 1 - border.color: "#888" - radius: 4 - gradient: Gradient - { - GradientStop { position: 0 ; color: objekt.pressed ? "#000" : "#001" } - GradientStop { position: 1 ; color: objekt.pressed ? "#100" : "#000" } - } - } + icon.source: "qrc:/images/object.svg" + + // background: Rectangle + // { + // id: objBackie + // border.width: objekt.activeFocus ? 2 : 1 + // border.color: "#888" + // radius: 4 + // gradient: Gradient + // { + // 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 - dashiBackie.border.width = 1 - kundiBackie.border.width = 1 - mitoBackie.border.width = 1 - invoBackie.border.width = 1 + // objBackie.border.width = 2 + // dashiBackie.border.width = 1 + // kundiBackie.border.width = 1 + // mitoBackie.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 - { - id: mitoBackie - border.width: mitarbeiter.activeFocus ? 2 : 1 - border.color: "#888" - radius: 4 - gradient: Gradient - { - GradientStop { position: 0 ; color: mitarbeiter.pressed ? "#000" : "#001" } - GradientStop { position: 1 ; color: mitarbeiter.pressed ? "#100" : "#000" } - } - } + icon.source: "qrc:/images/employee.svg" + + + // background: Rectangle + // { + // id: mitoBackie + // border.width: mitarbeiter.activeFocus ? 2 : 1 + // border.color: "#888" + // radius: 4 + // 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 - dashiBackie.border.width = 1 - kundiBackie.border.width = 1 - invoBackie.border.width = 1 - objBackie.border.width = 1 + // mitoBackie.border.width = 2 + // dashiBackie.border.width = 1 + // kundiBackie.border.width = 1 + // invoBackie.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 - { - id: offersBackie - border.width: offers.activeFocus ? 2 : 1 - border.color: "#888" - radius: 4 - gradient: Gradient - { - GradientStop { position: 0 ; color: offers.pressed ? "#000" : "#001" } - GradientStop { position: 1 ; color: offers.pressed ? "#100" : "#000" } - } - } + icon.source: "qrc:/images/offer.svg" + + // background: Rectangle + // { + // id: offersBackie + // border.width: offers.activeFocus ? 2 : 1 + // border.color: "#888" + // radius: 4 + // gradient: Gradient + // { + // 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 - dashiBackie.border.width = 1 - kundiBackie.border.width = 1 - invoBackie.border.width = 1 - objBackie.border.width = 1 - offersBackie.border.width = 1 + // mitoBackie.border.width = 2 + // dashiBackie.border.width = 1 + // kundiBackie.border.width = 1 + // invoBackie.border.width = 1 + // objBackie.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 - { - id: invoBackie - border.width: abrechnung.activeFocus ? 2 : 1 - border.color: "#888" - radius: 4 - gradient: Gradient - { - GradientStop { position: 0 ; color: abrechnung.pressed ? "#000" : "#001" } - GradientStop { position: 1 ; color: abrechnung.pressed ? "#100" : "#000" } - } - } + icon.source: "qrc:/images/invoice.svg" + + // background: Rectangle + // { + // id: invoBackie + // border.width: abrechnung.activeFocus ? 2 : 1 + // border.color: "#888" + // radius: 4 + // gradient: Gradient + // { + // 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 { diff --git a/Gui/main.qml b/Gui/main.qml index e912e50..165de90 100644 --- a/Gui/main.qml +++ b/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 - bottomMargin: 5 - rightMargin: 9 - leftMargin: 9 + margins: Dimensions.s } property alias window: appWindow diff --git a/TeroStyle/BarButton.qml b/TeroStyle/BarButton.qml new file mode 100644 index 0000000..0572df1 --- /dev/null +++ b/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" + + } + } + +} diff --git a/TeroStyle/Typography.qml b/TeroStyle/Typography.qml index e778ca9..145d16d 100644 --- a/TeroStyle/Typography.qml +++ b/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, + }) + } diff --git a/TeroStyle/qmldir b/TeroStyle/qmldir index e95abc1..061e41a 100644 --- a/TeroStyle/qmldir +++ b/TeroStyle/qmldir @@ -5,4 +5,5 @@ singleton Typography Typography.qml Button Button.qml ComboBox ComboBox.qml Field Field.qml -TextField TextField.qml \ No newline at end of file +TextField TextField.qml +BarButton BarButton.qml diff --git a/images/contract.svg b/images/contract.svg new file mode 100644 index 0000000..2c0c4c9 --- /dev/null +++ b/images/contract.svg @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/images/customer.svg b/images/customer.svg new file mode 100644 index 0000000..633cbc8 --- /dev/null +++ b/images/customer.svg @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/images/dash.svg b/images/dash.svg new file mode 100644 index 0000000..479346d --- /dev/null +++ b/images/dash.svg @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/images/employee.svg b/images/employee.svg new file mode 100644 index 0000000..10602da --- /dev/null +++ b/images/employee.svg @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/images/invoice.svg b/images/invoice.svg new file mode 100644 index 0000000..4209cf0 --- /dev/null +++ b/images/invoice.svg @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/images/object.svg b/images/object.svg new file mode 100644 index 0000000..30fda33 --- /dev/null +++ b/images/object.svg @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/images/offer.svg b/images/offer.svg new file mode 100644 index 0000000..2913fab --- /dev/null +++ b/images/offer.svg @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/pyqcrm.qrc b/pyqcrm.qrc index 5fb0d1b..d4717d2 100644 --- a/pyqcrm.qrc +++ b/pyqcrm.qrc @@ -17,5 +17,12 @@ README LICENSE images/tero.jpg + images/dash.svg + images/invoice.svg + images/offer.svg + images/employee.svg + images/customer.svg + images/contract.svg + images/object.svg diff --git a/qml.qrc b/qml.qrc index bd61e1b..2e26034 100644 --- a/qml.qrc +++ b/qml.qrc @@ -57,7 +57,7 @@ TeroStyle/qmldir TeroStyle/TextField.qml TeroStyle/Typography.qml + TeroStyle/BarButton.qml -