dashboard: scale face based on info height

Also increase spacing

5 files changed, 22 insertions, 18 deletions

diff --git a/config/DashboardConfig.qml b/config/DashboardConfig.qml
index b24232a..86d0e9b 100644
--- a/config/DashboardConfig.qml
+++ b/config/DashboardConfig.qml
@@ -9,7 +9,6 @@ Singleton {
     component Sizes: QtObject {
         readonly property int tabIndicatorHeight: 3
         readonly property int tabIndicatorSpacing: 5
-        readonly property int faceSize: 100
         readonly property int infoWidth: 200
         readonly property int infoIconSize: 25
     }
diff --git a/modules/dashboard/Dash.qml b/modules/dashboard/Dash.qml
index 1631287..2d768c7 100644
--- a/modules/dashboard/Dash.qml
+++ b/modules/dashboard/Dash.qml
@@ -7,8 +7,8 @@ import QtQuick.Layouts
 GridLayout {
     id: root
 
-    rowSpacing: Appearance.spacing.small
-    columnSpacing: Appearance.spacing.small
+    rowSpacing: Appearance.spacing.normal
+    columnSpacing: Appearance.spacing.normal
 
     Rect {
         Layout.columnSpan: 3
diff --git a/modules/dashboard/Tabs.qml b/modules/dashboard/Tabs.qml
index 5b9793a..4a1fa0e 100644
--- a/modules/dashboard/Tabs.qml
+++ b/modules/dashboard/Tabs.qml
@@ -84,7 +84,6 @@ Item {
 
         required property string iconName
         readonly property bool current: TabBar.tabBar.currentItem === this
-        property real fill: current ? 1 : 0
 
         background: null
 
@@ -204,10 +203,16 @@ Item {
 
                 text: tab.iconName
                 color: tab.current ? Colours.palette.m3primary : Colours.palette.m3onSurfaceVariant
+                fill: tab.current ? 1 : 0
                 font.pointSize: Appearance.font.size.large
-                font.variableAxes: ({
-                    FILL: tab.fill
-                })
+
+                Behavior on fill {
+                    NumberAnimation {
+                        duration: Appearance.anim.durations.normal
+                        easing.type: Easing.BezierSpline
+                        easing.bezierCurve: Appearance.anim.curves.standard
+                    }
+                }
             }
 
             StyledText {
@@ -221,14 +226,6 @@ Item {
             }
 
         }
-
-        Behavior on fill {
-            NumberAnimation {
-                duration: Appearance.anim.durations.normal
-                easing.type: Easing.BezierSpline
-                easing.bezierCurve: Appearance.anim.curves.standard
-            }
-        }
     }
 
     component Anim: NumberAnimation {
diff --git a/modules/dashboard/dash/User.qml b/modules/dashboard/dash/User.qml
index f8acdfd..700216f 100644
--- a/modules/dashboard/dash/User.qml
+++ b/modules/dashboard/dash/User.qml
@@ -15,8 +15,8 @@ Row {
     spacing: Appearance.spacing.large
 
     ClippingRectangle {
-        implicitWidth: DashboardConfig.sizes.faceSize
-        implicitHeight: DashboardConfig.sizes.faceSize
+        implicitWidth: info.implicitHeight
+        implicitHeight: info.implicitHeight
 
         radius: Appearance.rounding.full
         color: Colours.palette.m3surfaceContainerHigh
@@ -25,7 +25,8 @@ Row {
             anchors.centerIn: parent
 
             text: "person"
-            font.pointSize: DashboardConfig.sizes.faceSize / 2
+            fill: 1
+            font.pointSize: (info.implicitHeight / 2) || 1
         }
 
         CachingImage {
@@ -43,6 +44,8 @@ Row {
     }
 
     Column {
+        id: info
+
         spacing: Appearance.spacing.normal
 
         InfoLine {
diff --git a/widgets/MaterialIcon.qml b/widgets/MaterialIcon.qml
index 2181f9c..f625319 100644
--- a/widgets/MaterialIcon.qml
+++ b/widgets/MaterialIcon.qml
@@ -2,6 +2,11 @@ import "root:/config"
 import QtQuick
 
 StyledText {
+    property real fill
+
     font.family: Appearance.font.family.material
     font.pointSize: Appearance.font.size.larger
+    font.variableAxes: ({
+            FILL: fill
+        })
 }