Style EmployeesTable

Gui/Employees/EmployeesTable.qml

@@ -58,85 +58,85 @@ ColumnLayout {
             onClicked: contentStack.push("AddEmployee.qml")
         }
     }
-    HorizontalHeaderView {
+    ColumnLayout {
-        Layout.fillWidth: true
-        implicitHeight: 40
-        movableColumns: true //@disable-check M16
-        syncView: appliEmpTable
-
-        delegate: Rectangle {
-            Layout.fillWidth: true
-            border.color: palette.base
-            color: palette.alternateBase
-            implicitHeight: 40
-            implicitWidth: 1
-
-            Text {
-                color: palette.text
-                elide: Text.ElideRight
-                height: parent.height
-                horizontalAlignment: Text.AlignHCenter
-                text: model.display
-                verticalAlignment: Text.AlignVCenter
-                width: parent.width
-            }
-        }
-    }
-    TableView {
-        id: appliEmpTable
-
         Layout.fillHeight: true
         Layout.fillWidth: true
-        alternatingRows: true
+        spacing: 2
-        columnSpacing: 1
-        model: employee_model
-        resizableColumns: true
-        rowSpacing: 2
-        selectionBehavior: TableView.SelectRows
-        z: 1
 
-        ScrollBar.vertical: ScrollBar {
+        HorizontalHeaderView {
-            policy: appliEmpTable.contentHeight > appliEmpTable.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
+            movableColumns: true
-        }
+            syncView: employeesTable
-        delegate: Rectangle {
-            required property bool current
-            required property bool selected
 
-            color: selected ? palette.highlight : (appliEmpTable.alternatingRows && row % 2 !== 0 ? palette.base : palette.alternateBase)
+            delegate: Rectangle {
-            implicitHeight: 25
+                Layout.fillWidth: true
-            implicitWidth: appliEmpTable.width / appliEmpTable.columns
+                color: Colors.primary
+                implicitHeight: 33
+                implicitWidth: 1
 
-            Text {
+                Text {
-                color: palette.text
+                    color: Colors.primaryContrast
-                elide: Text.ElideRight
+                    elide: Text.ElideRight
-                height: parent.height
+                    font: Typography.smallBold
-                leftPadding: 9
+                    height: parent.height
-                text: (model.display === null || model.display === undefined) ? "" : model.display
+                    horizontalAlignment: Text.AlignLeft
-                verticalAlignment: Text.AlignVCenter
+                    padding: Dimensions.s
-                width: parent.width
+                    text: model.display
-            }
+                    verticalAlignment: Text.AlignVCenter
-            MouseArea {
+                    width: parent.width
-                property bool hovered: false
-
-                anchors.fill: parent
-                hoverEnabled: true
-
-                onDoubleClicked: {
-                    contentStack.push("EmployeeDetails.qml", {
-                        selectedEmployee: row
-                    });
-                }
-                onEntered: {
-                    appliEmpTable.selectionModel.select(appliEmpTable.model.index(row, 0), ItemSelectionModel.SelectCurrent | ItemSelectionModel.Rows);
                 }
             }
         }
-        selectionModel: ItemSelectionModel {
+        TableView {
-            model: appliEmpTable.model
+            id: employeesTable
+
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            columnSpacing: 2
+            model: employee_model
+            resizableColumns: true
+            rowSpacing: 2
+            selectionBehavior: TableView.SelectRows
+            z: 1
+
+            ScrollBar.vertical: ScrollBar {
+                policy: ScrollBar.AsNeeded
+            }
+            delegate: Rectangle {
+                required property bool selected
+
+                color: selected ? Colors.primaryHighlight : Colors.transparent
+                implicitHeight: 33
+                implicitWidth: employeesTable.width / employeesTable.columns
+
+                Text {
+                    color: Colors.foreground
+                    elide: Text.ElideRight
+                    font: Typography.small
+                    height: parent.height
+                    padding: Dimensions.s
+                    text: (model.display === null || model.display === undefined) ? "" : model.display
+                    verticalAlignment: Text.AlignVCenter
+                    width: parent.width
+                }
+                MouseArea {
+                    anchors.fill: parent
+                    cursorShape: Qt.PointingHandCursor
+                    hoverEnabled: true
+
+                    onClicked: {
+                        contentStack.push("EmployeeDetails.qml", {
+                            selectedEmployee: row
+                        });
+                    }
+                    onEntered: {
+                        employeesTable.selectionModel.select(employeesTable.model.index(row, 0), ItemSelectionModel.SelectCurrent | ItemSelectionModel.Rows);
+                    }
+                }
+            }
+            selectionModel: ItemSelectionModel {
+                model: employeesTable.model
+            }
         }
     }
-    Item {
-        Layout.fillWidth: true
-    }
 }
 

TeroStyle/BarButton.qml

@@ -29,7 +29,7 @@ T.ToolButton {
         }
         Label {
             color: parent.color
-            font: Typography.small
+            font: Typography.smaller
             text: control.text
             x: parent.width * .5 - width * .5
         }

TeroStyle/Colors.qml

@@ -12,6 +12,7 @@ QtObject {
     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 primaryHighlight: theme === dark ? Qt.darker(primary, 2- Colors.highlightOpacity) : Qt.lighter(primary, 2- Colors.highlightOpacity)
     readonly property color foreground: theme === dark ? "#fdfdfd" : "#110b0c"
     readonly property color background: theme === dark ? "#303136" : "#eff1f5"
     readonly property color mantle: theme === dark ? "#1E1E23" : "#e7e9ef"

TeroStyle/Typography.qml

@@ -11,7 +11,25 @@ Item {
             letterSpacing: 0,
             kerning: true
         })
+
     readonly property font small: ({
+            family: body.family,
+            pointSize: 14,
+            weight: Font.Medium,
+            letterSpacing: body.letterSpacing,
+            kerning: body.kerning
+    })
+
+
+    readonly property font smallBold: ({
+            family: small.family,
+            pointSize: small.pointSize,
+            weight: Font.Bold,
+            letterSpacing: small.letterSpacing,
+            kerning: small.kerning
+    })
+
+    readonly property font smaller: ({
             family: body.family,
             pointSize: 11,
             weight: Font.DemiBold,