lock: shrink media if small screen

This commit is contained in:
2 * r + 2 * t 2025-06-25 16:37:12 +10:00
parent 73682163ca
commit 4d563a38af
3 changed files with 20 additions and 13 deletions

View file

@ -11,8 +11,11 @@ JsonObject {
property int weatherWidth: 400
property int weatherHeight: 100
property int mediaWidth: 600
property int mediaWidthSmall: 450
property int mediaHeight: 170
property int mediaHeightSmall: 150
property int mediaCoverSize: 150
property int mediaCoverSizeSmall: 120
property int mediaCoverBorder: 3
}
}

View file

@ -269,8 +269,8 @@ Item {
ShapePath {
id: mediaPath
property int width: root.locked ? Config.lock.sizes.mediaWidth - Config.lock.sizes.border / 4 : 0
property real height: root.locked ? Config.lock.sizes.mediaHeight : 0
property int width: root.locked ? (root.isLarge ? Config.lock.sizes.mediaWidth : Config.lock.sizes.mediaWidthSmall) - Config.lock.sizes.border / 4 : 0
property real height: root.locked ? (root.isLarge ? Config.lock.sizes.mediaHeight : Config.lock.sizes.mediaHeightSmall) : 0
readonly property real rounding: Appearance.rounding.large * 2
readonly property real roundingX: width < rounding * 2 ? width / 2 : rounding

View file

@ -11,8 +11,8 @@ RowLayout {
required property bool isLarge
spacing: Appearance.spacing.large * 2
width: Config.lock.sizes.mediaWidth
spacing: Appearance.spacing.large * (isLarge ? 2 : 1.5)
width: isLarge ? Config.lock.sizes.mediaWidth : Config.lock.sizes.mediaWidthSmall
property real playerProgress: {
const active = Players.active;
@ -36,12 +36,13 @@ RowLayout {
}
Item {
Layout.alignment: Qt.AlignVCenter
Layout.topMargin: root.isLarge ? 0 : Config.lock.sizes.border / 2
Layout.bottomMargin: root.isLarge ? Config.lock.sizes.border / 2 : 0
Layout.leftMargin: root.isLarge ? 0 : Config.lock.sizes.border / 2
implicitWidth: Config.lock.sizes.mediaCoverSize
implicitHeight: Config.lock.sizes.mediaCoverSize
implicitWidth: root.isLarge ? Config.lock.sizes.mediaCoverSize : Config.lock.sizes.mediaCoverSizeSmall
implicitHeight: root.isLarge ? Config.lock.sizes.mediaCoverSize : Config.lock.sizes.mediaCoverSizeSmall
ClippingWrapperRectangle {
anchors.fill: parent
@ -101,7 +102,7 @@ RowLayout {
text: "art_track"
color: Colours.palette.m3onSurfaceVariant
font.pointSize: Config.lock.sizes.mediaCoverSize * 0.4
font.pointSize: (root.isLarge ? Config.lock.sizes.mediaCoverSize : Config.lock.sizes.mediaCoverSizeSmall) * 0.4
}
Image {
@ -123,7 +124,7 @@ RowLayout {
Layout.rightMargin: root.isLarge ? Config.lock.sizes.border / 2 : 0
Layout.fillWidth: true
spacing: Appearance.spacing.small
spacing: root.isLarge ? Appearance.spacing.small : Appearance.spacing.small / 2
StyledText {
Layout.fillWidth: true
@ -131,7 +132,7 @@ RowLayout {
animate: true
text: (Players.active?.trackTitle ?? qsTr("No media")) || qsTr("Unknown title")
color: Colours.palette.m3primary
font.pointSize: Appearance.font.size.large
font.pointSize: root.isLarge ? Appearance.font.size.large : Appearance.font.size.larger
elide: Text.ElideRight
}
@ -141,7 +142,7 @@ RowLayout {
animate: true
text: (Players.active?.trackAlbum ?? qsTr("No media")) || qsTr("Unknown album")
color: Colours.palette.m3outline
font.pointSize: Appearance.font.size.larger
font.pointSize: root.isLarge ? Appearance.font.size.larger : Appearance.font.size.normal
elide: Text.ElideRight
}
@ -151,7 +152,7 @@ RowLayout {
animate: true
text: (Players.active?.trackArtist ?? qsTr("No media")) || qsTr("Unknown artist")
color: Colours.palette.m3secondary
font.pointSize: Appearance.font.size.larger
font.pointSize: root.isLarge ? Appearance.font.size.larger : Appearance.font.size.normal
elide: Text.ElideRight
}
@ -165,7 +166,7 @@ RowLayout {
Slider {
id: slider
Layout.rightMargin: Appearance.spacing.small
Layout.rightMargin: root.isLarge ? Appearance.spacing.small : 0
Layout.fillWidth: true
implicitHeight: Appearance.padding.normal * 3
@ -230,6 +231,7 @@ RowLayout {
Control {
icon: "skip_previous"
canUse: Players.active?.canGoPrevious ?? false
fontSize: root.isLarge ? Appearance.font.size.extraLarge : Appearance.font.size.large * 1.2
function onClicked(): void {
Players.active?.previous();
@ -239,6 +241,7 @@ RowLayout {
Control {
icon: Players.active?.isPlaying ? "pause" : "play_arrow"
canUse: Players.active?.canTogglePlaying ?? false
fontSize: root.isLarge ? Appearance.font.size.extraLarge : Appearance.font.size.large * 1.2
primary: true
function onClicked(): void {
@ -249,6 +252,7 @@ RowLayout {
Control {
icon: "skip_next"
canUse: Players.active?.canGoNext ?? false
fontSize: root.isLarge ? Appearance.font.size.extraLarge : Appearance.font.size.large * 1.2
function onClicked(): void {
Players.active?.next();
@ -262,7 +266,7 @@ RowLayout {
required property string icon
required property bool canUse
property int fontSize: Appearance.font.size.extraLarge
required property int fontSize
property int padding
property bool fill: true
property bool primary