nosignal/nosignal-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: improve dash media controls

Browse source
This commit is contained in:
2 * r + 2 * t 2026-04-23 20:05:44 +10:00
parent 16a4114609
commit eed9e4f8a0
2 changed files with 43 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
components/controls/IconButton.qml
View file

@ -19,6 +19,10 @@ StyledRect {
property alias font: label.fontStyle property alias font: label.fontStyle
property int type: IconButton.Filled property int type: IconButton.Filled
property bool disabled property bool disabled
property bool isRound
readonly property alias pressed: stateLayer.pressed
readonly property alias hovered: stateLayer.containsMouse
property alias stateLayer: stateLayer property alias stateLayer: stateLayer
property alias label: label property alias label: label
@ -44,7 +48,7 @@ StyledRect {
onCheckedChanged: internalChecked = checked onCheckedChanged: internalChecked = checked
radius: internalChecked ? Tokens.rounding.medium : implicitHeight / 2 * Math.min(1, Tokens.rounding.scale) radius: stateLayer.pressed ? Tokens.rounding.small : internalChecked ? Tokens.rounding.medium : isRound ? implicitHeight / 2 * Math.min(1, Tokens.rounding.scale) : Tokens.rounding.large
color: type === IconButton.Text ? "transparent" : disabled ? disabledColour : internalChecked ? activeColour : inactiveColour color: type === IconButton.Text ? "transparent" : disabled ? disabledColour : internalChecked ? activeColour : inactiveColour
implicitWidth: implicitHeight implicitWidth: implicitHeight
@ -79,6 +83,8 @@ StyledRect {
Behavior on radius { Behavior on radius {
Anim { Anim {
id: radiusAnim id: radiusAnim
type: Anim.DefaultEffects
} }
} }
} }

69
modules/dashboard/dash/Media.qml
View file

@ -1,13 +1,12 @@
pragma ComponentBehavior: Bound pragma ComponentBehavior: Bound
import QtQuick import QtQuick
import QtQuick.Shapes
import QtQuick.Effects import QtQuick.Effects
import M3Shapes import M3Shapes
import Caelestia.Config import Caelestia.Config
import Caelestia.Services import Caelestia.Services
import Caelestia.Components
import qs.components import qs.components
import qs.components.controls
import qs.components.effects import qs.components.effects
import qs.services import qs.services
import qs.utils import qs.utils
@ -223,30 +222,51 @@ Item {
elide: Text.ElideRight elide: Text.ElideRight
} }
Row { Item {
id: controls id: controls
anchors.top: artist.bottom anchors.top: artist.bottom
anchors.horizontalCenter: parent.horizontalCenter anchors.left: parent.left
anchors.right: parent.right
anchors.topMargin: Tokens.spacing.medium anchors.topMargin: Tokens.spacing.medium
anchors.margins: Tokens.padding.large
spacing: Tokens.spacing.small implicitHeight: Math.max(previousBtn.implicitHeight, playPauseBtn.implicitHeight, nextBtn.implicitHeight)
PlayerControl { PlayerControl {
id: previousBtn
anchors.left: parent.left
width: Math.round(implicitWidth * shapeMorphExpansion - playPauseBtn.implicitWidth * (playPauseBtn.shapeMorphExpansion - 1))
type: IconButton.Tonal
icon: "skip_previous" icon: "skip_previous"
canUse: Players.active?.canGoPrevious ?? false disabled: !Players.active?.canGoPrevious
onClicked: Players.active?.previous() onClicked: Players.active?.previous()
} }
PlayerControl { PlayerControl {
id: playPauseBtn
anchors.left: previousBtn.right
anchors.right: nextBtn.left
anchors.margins: Tokens.spacing.small
icon: Players.active?.isPlaying ? "pause" : "play_arrow" icon: Players.active?.isPlaying ? "pause" : "play_arrow"
canUse: Players.active?.canTogglePlaying ?? false checked: Players.active?.isPlaying
disabled: !Players.active?.canTogglePlaying
onClicked: Players.active?.togglePlaying() onClicked: Players.active?.togglePlaying()
} }
PlayerControl { PlayerControl {
id: nextBtn
anchors.right: parent.right
width: Math.round(implicitWidth * shapeMorphExpansion - playPauseBtn.implicitWidth * (playPauseBtn.shapeMorphExpansion - 1))
type: IconButton.Tonal
icon: "skip_next" icon: "skip_next"
canUse: Players.active?.canGoNext ?? false disabled: !Players.active?.canGoNext
onClicked: Players.active?.next() onClicked: Players.active?.next()
} }
} }
@ -269,33 +289,16 @@ Item {
fillMode: AnimatedImage.PreserveAspectFit fillMode: AnimatedImage.PreserveAspectFit
} }
component PlayerControl: StyledRect { component PlayerControl: IconButton {
id: control property real shapeMorphExpansion: pressed ? 1.16 : 1
required property string icon font: Tokens.font.icon.medium
required property bool canUse isRound: true
signal clicked Behavior on shapeMorphExpansion {
Anim {
implicitWidth: Math.max(icon.implicitHeight, icon.implicitHeight) + Tokens.padding.extraSmall type: Anim.FastSpatial
implicitHeight: implicitWidth }
StateLayer {
disabled: !control.canUse
radius: Tokens.rounding.full
onClicked: control.clicked()
}
MaterialIcon {
id: icon
anchors.centerIn: parent
anchors.verticalCenterOffset: font.pointSize * 0.05
animate: true
text: control.icon
color: control.canUse ? Colours.palette.m3onSurface : Colours.palette.m3outline
fontStyle: Tokens.font.icon.large
} }
} }
} }