dashboard: scale face based on info height
Also increase spacing
This commit is contained in:
parent
086c5c9f02
commit
52d0c0807b
5 changed files with 22 additions and 18 deletions
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
})
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue