- Refactored TimerPage component to improve layout and user experience. - Updated theme configuration to utilize design tokens for better maintainability. - Introduced new tokens for colors and typography to align with design principles. - Simplified state management and improved timer functionality. - Enhanced accessibility and responsiveness of UI elements.
56 lines
1.5 KiB
QML
56 lines
1.5 KiB
QML
// Eyebrow, title, actions, rule — the same opening every page uses.
|
|
import QtQuick
|
|
import QtQuick.Controls
|
|
import QtQuick.Layouts
|
|
|
|
import ".."
|
|
|
|
ColumnLayout {
|
|
property string eyebrow: ""
|
|
property string title: ""
|
|
property string caption: ""
|
|
default property alias actions: actionRow.data
|
|
|
|
Layout.fillWidth: true
|
|
spacing: 10
|
|
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
spacing: 16
|
|
|
|
ColumnLayout {
|
|
Layout.fillWidth: true
|
|
spacing: 2
|
|
Label {
|
|
visible: eyebrow !== ""
|
|
text: eyebrow.toUpperCase()
|
|
color: Theme.muted
|
|
font.pixelSize: 10
|
|
font.letterSpacing: 1.3
|
|
font.weight: Font.DemiBold
|
|
font.family: Theme.sansFamily
|
|
}
|
|
Label {
|
|
text: title
|
|
color: Theme.ink
|
|
font.pixelSize: 27
|
|
font.family: Theme.displayFamily
|
|
font.letterSpacing: -0.6
|
|
}
|
|
Label {
|
|
visible: caption !== ""
|
|
text: caption
|
|
color: Theme.muted
|
|
font.pixelSize: 13
|
|
font.family: Theme.sansFamily
|
|
Layout.fillWidth: true
|
|
wrapMode: Text.WordWrap
|
|
}
|
|
}
|
|
|
|
RowLayout { id: actionRow; spacing: 8; Layout.alignment: Qt.AlignRight | Qt.AlignVCenter }
|
|
}
|
|
|
|
Rectangle { Layout.fillWidth: true; height: 1; color: Theme.rule }
|
|
}
|