dashboard: scale face based on info height

Also increase spacing
This commit is contained in:
2 * r + 2 * t 2025-05-18 00:38:10 +08:00
parent 086c5c9f02
commit 52d0c0807b
5 changed files with 22 additions and 18 deletions

View file

@ -9,7 +9,6 @@ Singleton {
component Sizes: QtObject { component Sizes: QtObject {
readonly property int tabIndicatorHeight: 3 readonly property int tabIndicatorHeight: 3
readonly property int tabIndicatorSpacing: 5 readonly property int tabIndicatorSpacing: 5
readonly property int faceSize: 100
readonly property int infoWidth: 200 readonly property int infoWidth: 200
readonly property int infoIconSize: 25 readonly property int infoIconSize: 25
} }

View file

@ -7,8 +7,8 @@ import QtQuick.Layouts
GridLayout { GridLayout {
id: root id: root
rowSpacing: Appearance.spacing.small rowSpacing: Appearance.spacing.normal
columnSpacing: Appearance.spacing.small columnSpacing: Appearance.spacing.normal
Rect { Rect {
Layout.columnSpan: 3 Layout.columnSpan: 3

View file

@ -84,7 +84,6 @@ Item {
required property string iconName required property string iconName
readonly property bool current: TabBar.tabBar.currentItem === this readonly property bool current: TabBar.tabBar.currentItem === this
property real fill: current ? 1 : 0
background: null background: null
@ -204,10 +203,16 @@ Item {
text: tab.iconName text: tab.iconName
color: tab.current ? Colours.palette.m3primary : Colours.palette.m3onSurfaceVariant color: tab.current ? Colours.palette.m3primary : Colours.palette.m3onSurfaceVariant
fill: tab.current ? 1 : 0
font.pointSize: Appearance.font.size.large 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 { 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 { component Anim: NumberAnimation {

View file

@ -15,8 +15,8 @@ Row {
spacing: Appearance.spacing.large spacing: Appearance.spacing.large
ClippingRectangle { ClippingRectangle {
implicitWidth: DashboardConfig.sizes.faceSize implicitWidth: info.implicitHeight
implicitHeight: DashboardConfig.sizes.faceSize implicitHeight: info.implicitHeight
radius: Appearance.rounding.full radius: Appearance.rounding.full
color: Colours.palette.m3surfaceContainerHigh color: Colours.palette.m3surfaceContainerHigh
@ -25,7 +25,8 @@ Row {
anchors.centerIn: parent anchors.centerIn: parent
text: "person" text: "person"
font.pointSize: DashboardConfig.sizes.faceSize / 2 fill: 1
font.pointSize: (info.implicitHeight / 2) || 1
} }
CachingImage { CachingImage {
@ -43,6 +44,8 @@ Row {
} }
Column { Column {
id: info
spacing: Appearance.spacing.normal spacing: Appearance.spacing.normal
InfoLine { InfoLine {

View file

@ -2,6 +2,11 @@ import "root:/config"
import QtQuick import QtQuick
StyledText { StyledText {
property real fill
font.family: Appearance.font.family.material font.family: Appearance.font.family.material
font.pointSize: Appearance.font.size.larger font.pointSize: Appearance.font.size.larger
font.variableAxes: ({
FILL: fill
})
} }