lock: shrink media if small screen
This commit is contained in:
parent
73682163ca
commit
4d563a38af
3 changed files with 20 additions and 13 deletions
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue