feat: initial commit for pixel-snapping components and helpers
This commit is contained in:
+178
-154
@@ -1,13 +1,14 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import Quickshell.Services.Mpris
|
||||
import ZShell
|
||||
import ZShell.Components
|
||||
import ZShell.Config
|
||||
import qs.Components
|
||||
import qs.Services
|
||||
import qs.Helpers
|
||||
|
||||
ColumnLayout {
|
||||
Item {
|
||||
id: root
|
||||
|
||||
readonly property bool hasUnknownLength: (Players.active?.length ?? 0) > 2147483647
|
||||
@@ -25,46 +26,187 @@ ColumnLayout {
|
||||
return `${mins}:${secs}`;
|
||||
}
|
||||
|
||||
spacing: Tokens.spacing.extraSmall
|
||||
implicitHeight: ZUtils.snap(layout.implicitHeight, root)
|
||||
implicitWidth: layout.implicitWidth
|
||||
|
||||
Timer {
|
||||
running: Players.active?.isPlaying ?? false
|
||||
interval: Config.dashboard.mediaUpdateInterval
|
||||
triggeredOnStart: true
|
||||
repeat: true
|
||||
onTriggered: Players.active?.positionChanged()
|
||||
}
|
||||
SnapLayout {
|
||||
orientation: Qt.Vertical
|
||||
id: layout
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
y: ZUtils.snap((parent.height - implicitHeight) / 2, root)
|
||||
|
||||
CustomText {
|
||||
Layout.fillWidth: true
|
||||
text: Players.active?.trackTitle ?? ""
|
||||
font: Tokens.font.title.large
|
||||
elide: Text.ElideRight
|
||||
animate: true
|
||||
}
|
||||
spacing: ZUtils.snap(Tokens.spacing.extraSmall, root)
|
||||
|
||||
CustomText {
|
||||
Layout.fillWidth: true
|
||||
text: Players.active?.trackArtist || qsTr("Unknown artist")
|
||||
color: Colors.palette.m3onSurfaceVariant
|
||||
font: Tokens.font.title.medium
|
||||
elide: Text.ElideRight
|
||||
animate: true
|
||||
}
|
||||
Timer {
|
||||
running: Players.active?.isPlaying ?? false
|
||||
interval: Config.dashboard.mediaUpdateInterval
|
||||
triggeredOnStart: true
|
||||
repeat: true
|
||||
onTriggered: Players.active?.positionChanged()
|
||||
}
|
||||
|
||||
CustomText {
|
||||
Layout.fillWidth: true
|
||||
text: Players.active?.trackAlbum || qsTr("Unknown album")
|
||||
color: Colors.palette.m3secondary
|
||||
font: Tokens.font.title.medium
|
||||
elide: Text.ElideRight
|
||||
animate: true
|
||||
}
|
||||
CustomText {
|
||||
id: title
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: ZUtils.snapCeil(implicitHeight, root)
|
||||
text: Players.active?.trackTitle ?? ""
|
||||
font: Tokens.font.title.large
|
||||
elide: Text.ElideRight
|
||||
animate: true
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
Layout.topMargin: Tokens.spacing.extraLargeIncreased
|
||||
Layout.fillWidth: true
|
||||
spacing: Tokens.spacing.small
|
||||
CustomText {
|
||||
id: artist
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: ZUtils.snapCeil(implicitHeight, root)
|
||||
text: Players.active?.trackArtist || qsTr("Unknown artist")
|
||||
color: Colors.palette.m3onSurfaceVariant
|
||||
font: Tokens.font.title.medium
|
||||
elide: Text.ElideRight
|
||||
animate: true
|
||||
}
|
||||
|
||||
CustomText {
|
||||
id: album
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: ZUtils.snapCeil(implicitHeight, root)
|
||||
text: Players.active?.trackAlbum || qsTr("Unknown album")
|
||||
color: Colors.palette.m3secondary
|
||||
font: Tokens.font.title.medium
|
||||
elide: Text.ElideRight
|
||||
animate: true
|
||||
}
|
||||
|
||||
SnapLayout {
|
||||
id: sliderLayout
|
||||
Layout.topMargin: Tokens.spacing.extraLargeIncreased
|
||||
Layout.fillWidth: true
|
||||
spacing: ZUtils.snap(Tokens.spacing.small, root)
|
||||
|
||||
CustomText {
|
||||
id: positionLabel
|
||||
|
||||
Layout.preferredWidth: ZUtils.snapCeil(timeMetrics.width, root)
|
||||
Layout.preferredHeight: positionSlider.implicitHeight
|
||||
text: root.lengthStr(Players.active?.position ?? -1)
|
||||
color: Colors.palette.m3onSurfaceVariant
|
||||
font: timeMetrics.font
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
}
|
||||
|
||||
CustomSlider {
|
||||
id: positionSlider
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: ZUtils.snap(implicitHeight, root)
|
||||
value: Players.active ? Players.active.position / (Players.active.length || 1) : 0
|
||||
enabled: (Players.active?.canSeek ?? false) && !root.hasUnknownLength
|
||||
wavy: true
|
||||
animateWave: Players.active?.isPlaying ?? false
|
||||
waveFrequency: 5
|
||||
waveDuration: 2000
|
||||
interactionOnMove: false
|
||||
onInteraction: value => {
|
||||
const active = Players.active;
|
||||
if (active?.canSeek && active?.positionSupported)
|
||||
active.position = value * active.length;
|
||||
}
|
||||
|
||||
Binding {
|
||||
target: positionLabel
|
||||
property: "text"
|
||||
value: root.lengthStr(positionSlider.pos * (Players.active?.length ?? 0))
|
||||
when: positionSlider.dragging
|
||||
}
|
||||
}
|
||||
|
||||
CustomText {
|
||||
Layout.preferredWidth: ZUtils.snapCeil(timeMetrics.width, root)
|
||||
Layout.preferredHeight: positionSlider.implicitHeight
|
||||
text: root.hasUnknownLength ? "--:--" : root.lengthStr(Players.active?.length ?? -1)
|
||||
color: Colors.palette.m3onSurfaceVariant
|
||||
font: timeMetrics.font
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
}
|
||||
}
|
||||
|
||||
ButtonRow {
|
||||
Layout.topMargin: Tokens.spacing.largeIncreased
|
||||
Layout.fillWidth: true
|
||||
spacing: Tokens.spacing.extraSmall
|
||||
|
||||
IconButton {
|
||||
type: IconButton.Tonal
|
||||
icon: "shuffle"
|
||||
isRound: true
|
||||
shapeMorph: true
|
||||
checked: Players.active?.shuffle ?? false
|
||||
font: Tokens.font.icon.builders.medium.weight(Font.Medium).build()
|
||||
enabled: Players.active?.shuffleSupported
|
||||
onClicked: Players.active.shuffle = !Players.active?.shuffle
|
||||
implicitWidth: Math.round(implicitHeight * 0.9)
|
||||
}
|
||||
|
||||
IconButton {
|
||||
id: previousBtn
|
||||
|
||||
type: IconButton.Tonal
|
||||
icon: "skip_previous"
|
||||
isRound: true
|
||||
shapeMorph: true
|
||||
font: Tokens.font.icon.large
|
||||
enabled: Players.active?.canGoPrevious
|
||||
onClicked: Players.active?.previous()
|
||||
}
|
||||
|
||||
IconButton {
|
||||
id: playPauseBtn
|
||||
|
||||
icon: Players.active?.isPlaying ? "pause" : "play_arrow"
|
||||
isRound: true
|
||||
shapeMorph: true
|
||||
fillWidth: true
|
||||
checked: Players.active?.isPlaying ?? false
|
||||
font: Tokens.font.icon.large
|
||||
enabled: Players.active?.canTogglePlaying
|
||||
onClicked: Players.active?.togglePlaying()
|
||||
}
|
||||
|
||||
IconButton {
|
||||
id: nextBtn
|
||||
|
||||
type: IconButton.Tonal
|
||||
icon: "skip_next"
|
||||
isRound: true
|
||||
shapeMorph: true
|
||||
font: Tokens.font.icon.large
|
||||
enabled: Players.active?.canGoNext
|
||||
onClicked: Players.active?.next()
|
||||
}
|
||||
|
||||
IconButton {
|
||||
type: IconButton.Tonal
|
||||
icon: Players.active?.loopState === MprisLoopState.Track ? "repeat_one" : "repeat"
|
||||
isRound: true
|
||||
shapeMorph: true
|
||||
checked: Players.active?.loopState === MprisLoopState.Track || Players.active?.loopState === MprisLoopState.Playlist
|
||||
font: Tokens.font.icon.builders.medium.weight(Font.Medium).build()
|
||||
enabled: Players.active?.loopSupported
|
||||
onClicked: {
|
||||
const state = Players.active.loopState;
|
||||
if (state === MprisLoopState.None)
|
||||
Players.active.loopState = MprisLoopState.Track;
|
||||
else if (state === MprisLoopState.Track)
|
||||
Players.active.loopState = MprisLoopState.Playlist;
|
||||
else
|
||||
Players.active.loopState = MprisLoopState.None;
|
||||
}
|
||||
implicitWidth: Math.round(implicitHeight * 0.9)
|
||||
}
|
||||
}
|
||||
|
||||
TextMetrics {
|
||||
id: timeMetrics
|
||||
@@ -72,123 +214,5 @@ ColumnLayout {
|
||||
text: Players.active ? root.lengthStr(Math.max(Players.active.position, root.hasUnknownLength ? 0 : Players.active.length)).replace(/[1-9]/g, "0") : "00:00"
|
||||
font: Tokens.font.label.medium
|
||||
}
|
||||
|
||||
CustomText {
|
||||
id: positionLabel
|
||||
|
||||
Layout.preferredWidth: timeMetrics.width
|
||||
text: root.lengthStr(Players.active?.position ?? -1)
|
||||
color: Colors.palette.m3onSurfaceVariant
|
||||
font: timeMetrics.font
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
}
|
||||
|
||||
CustomSlider {
|
||||
id: positionSlider
|
||||
|
||||
Layout.fillWidth: true
|
||||
value: Players.active ? Players.active.position / (Players.active.length || 1) : 0
|
||||
enabled: (Players.active?.canSeek ?? false) && !root.hasUnknownLength
|
||||
wavy: true
|
||||
animateWave: Players.active?.isPlaying ?? false
|
||||
waveFrequency: 5
|
||||
waveDuration: 2000
|
||||
interactionOnMove: false
|
||||
onInteraction: value => {
|
||||
const active = Players.active;
|
||||
if (active?.canSeek && active?.positionSupported)
|
||||
active.position = value * active.length;
|
||||
}
|
||||
|
||||
Binding {
|
||||
target: positionLabel
|
||||
property: "text"
|
||||
value: root.lengthStr(positionSlider.pos * (Players.active?.length ?? 0))
|
||||
when: positionSlider.dragging
|
||||
}
|
||||
}
|
||||
|
||||
CustomText {
|
||||
Layout.preferredWidth: timeMetrics.width
|
||||
text: root.hasUnknownLength ? "--:--" : root.lengthStr(Players.active?.length ?? -1)
|
||||
color: Colors.palette.m3onSurfaceVariant
|
||||
font: timeMetrics.font
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
}
|
||||
}
|
||||
|
||||
ButtonRow {
|
||||
Layout.topMargin: Tokens.spacing.largeIncreased
|
||||
Layout.fillWidth: true
|
||||
spacing: Tokens.spacing.extraSmall
|
||||
|
||||
IconButton {
|
||||
type: IconButton.Tonal
|
||||
icon: "shuffle"
|
||||
isRound: true
|
||||
shapeMorph: true
|
||||
checked: Players.active?.shuffle ?? false
|
||||
font: Tokens.font.icon.builders.medium.weight(Font.Medium).build()
|
||||
enabled: Players.active?.shuffleSupported
|
||||
onClicked: Players.active.shuffle = !Players.active?.shuffle
|
||||
implicitWidth: Math.round(implicitHeight * 0.9)
|
||||
}
|
||||
|
||||
IconButton {
|
||||
id: previousBtn
|
||||
|
||||
type: IconButton.Tonal
|
||||
icon: "skip_previous"
|
||||
isRound: true
|
||||
shapeMorph: true
|
||||
font: Tokens.font.icon.large
|
||||
enabled: Players.active?.canGoPrevious
|
||||
onClicked: Players.active?.previous()
|
||||
}
|
||||
|
||||
IconButton {
|
||||
id: playPauseBtn
|
||||
|
||||
icon: Players.active?.isPlaying ? "pause" : "play_arrow"
|
||||
isRound: true
|
||||
shapeMorph: true
|
||||
fillWidth: true
|
||||
checked: Players.active?.isPlaying ?? false
|
||||
font: Tokens.font.icon.large
|
||||
enabled: Players.active?.canTogglePlaying
|
||||
onClicked: Players.active?.togglePlaying()
|
||||
}
|
||||
|
||||
IconButton {
|
||||
id: nextBtn
|
||||
|
||||
type: IconButton.Tonal
|
||||
icon: "skip_next"
|
||||
isRound: true
|
||||
shapeMorph: true
|
||||
font: Tokens.font.icon.large
|
||||
enabled: Players.active?.canGoNext
|
||||
onClicked: Players.active?.next()
|
||||
}
|
||||
|
||||
IconButton {
|
||||
type: IconButton.Tonal
|
||||
icon: Players.active?.loopState === MprisLoopState.Track ? "repeat_one" : "repeat"
|
||||
isRound: true
|
||||
shapeMorph: true
|
||||
checked: Players.active?.loopState === MprisLoopState.Track || Players.active?.loopState === MprisLoopState.Playlist
|
||||
font: Tokens.font.icon.builders.medium.weight(Font.Medium).build()
|
||||
enabled: Players.active?.loopSupported
|
||||
onClicked: {
|
||||
const state = Players.active.loopState;
|
||||
if (state === MprisLoopState.None)
|
||||
Players.active.loopState = MprisLoopState.Track;
|
||||
else if (state === MprisLoopState.Track)
|
||||
Players.active.loopState = MprisLoopState.Playlist;
|
||||
else
|
||||
Players.active.loopState = MprisLoopState.None;
|
||||
}
|
||||
implicitWidth: Math.round(implicitHeight * 0.9)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@ pragma ComponentBehavior: Bound
|
||||
import QtQuick
|
||||
import QtQuick.Effects
|
||||
import QtQuick.Layouts
|
||||
import ZShell.Components
|
||||
import ZShell.Config
|
||||
import ZShell.Services
|
||||
import qs.Components
|
||||
@@ -157,7 +158,8 @@ Item {
|
||||
active: opacity > 0
|
||||
opacity: 0
|
||||
|
||||
sourceComponent: ColumnLayout {
|
||||
sourceComponent: SnapLayout {
|
||||
orientation: Qt.Vertical
|
||||
spacing: Tokens.spacing.large
|
||||
|
||||
CustomRect {
|
||||
@@ -198,7 +200,8 @@ Item {
|
||||
active: opacity > 0
|
||||
opacity: 0
|
||||
|
||||
sourceComponent: ColumnLayout {
|
||||
sourceComponent: SnapLayout {
|
||||
orientation: Qt.Vertical
|
||||
spacing: Tokens.spacing.small
|
||||
|
||||
MaterialIcon {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import ZShell.Components
|
||||
import Quickshell
|
||||
import Quickshell.Services.Mpris
|
||||
import ZShell.Config
|
||||
@@ -8,14 +9,15 @@ import qs.Helpers
|
||||
import qs.Services
|
||||
|
||||
Item {
|
||||
ColumnLayout {
|
||||
SnapLayout {
|
||||
orientation: Qt.Vertical
|
||||
id: layout
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: Tokens.padding.medium
|
||||
spacing: Tokens.spacing.medium
|
||||
|
||||
RowLayout {
|
||||
SnapLayout {
|
||||
Layout.bottomMargin: -Tokens.spacing.medium
|
||||
spacing: Tokens.spacing.medium
|
||||
z: 1
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import ZShell.Components
|
||||
import ZShell
|
||||
import ZShell.Blobs
|
||||
import ZShell.Config
|
||||
@@ -141,7 +142,8 @@ Item {
|
||||
}
|
||||
]
|
||||
|
||||
ColumnLayout {
|
||||
SnapLayout {
|
||||
orientation: Qt.Vertical
|
||||
id: layout
|
||||
|
||||
anchors.centerIn: parent
|
||||
|
||||
Reference in New Issue
Block a user