1
0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2025-12-06 21:45:38 -05:00

Scrolling text media widget and larger size variant

This commit is contained in:
bbedward
2025-08-10 00:18:48 -04:00
parent 42abed62fe
commit 4b4fdfa72c
4 changed files with 133 additions and 56 deletions

View File

@@ -44,7 +44,7 @@ Singleton {
property bool showWorkspaceIndex: false
property bool showWorkspacePadding: false
property bool clockCompactMode: false
property bool mediaCompactMode: false
property int mediaSize: 1
property var topBarLeftWidgets: ["launcherButton", "workspaceSwitcher", "focusedWindow"]
property var topBarCenterWidgets: ["music", "clock", "weather"]
property var topBarRightWidgets: ["systemTray", "clipboard", "cpuUsage", "memUsage", "notificationButton", "battery", "controlCenterButton"]
@@ -202,8 +202,7 @@ Singleton {
!== undefined ? settings.showWorkspacePadding : false
clockCompactMode = settings.clockCompactMode
!== undefined ? settings.clockCompactMode : false
mediaCompactMode = settings.mediaCompactMode
!== undefined ? settings.mediaCompactMode : false
mediaSize = settings.mediaSize !== undefined ? settings.mediaSize : (settings.mediaCompactMode !== undefined ? (settings.mediaCompactMode ? 0 : 1) : 1)
if (settings.topBarWidgetOrder) {
topBarLeftWidgets = settings.topBarWidgetOrder.filter(
w => ["launcherButton", "workspaceSwitcher", "focusedWindow"].includes(
@@ -302,7 +301,7 @@ Singleton {
"showWorkspaceIndex": showWorkspaceIndex,
"showWorkspacePadding": showWorkspacePadding,
"clockCompactMode": clockCompactMode,
"mediaCompactMode": mediaCompactMode,
"mediaSize": mediaSize,
"topBarLeftWidgets": topBarLeftWidgets,
"topBarCenterWidgets": topBarCenterWidgets,
"topBarRightWidgets": topBarRightWidgets,
@@ -341,8 +340,8 @@ Singleton {
saveSettings()
}
function setMediaCompactMode(enabled) {
mediaCompactMode = enabled
function setMediaSize(size) {
mediaSize = size
saveSettings()
}

View File

@@ -614,11 +614,11 @@ Item {
itemId,
newSize)
}
onCompactModeChanged: (widgetId, enabled) => {
onCompactModeChanged: (widgetId, value) => {
if (widgetId === "clock") {
SettingsData.setClockCompactMode(enabled)
SettingsData.setClockCompactMode(value)
} else if (widgetId === "music") {
SettingsData.setMediaCompactMode(enabled)
SettingsData.setMediaSize(value)
}
}
onGpuSelectionChanged: (sectionId, widgetIndex, selectedIndex) => {
@@ -657,11 +657,11 @@ Item {
itemId,
newSize)
}
onCompactModeChanged: (widgetId, enabled) => {
onCompactModeChanged: (widgetId, value) => {
if (widgetId === "clock") {
SettingsData.setClockCompactMode(enabled)
SettingsData.setClockCompactMode(value)
} else if (widgetId === "music") {
SettingsData.setMediaCompactMode(enabled)
SettingsData.setMediaSize(value)
}
}
onGpuSelectionChanged: (sectionId, widgetIndex, selectedIndex) => {
@@ -700,11 +700,11 @@ Item {
itemId,
newSize)
}
onCompactModeChanged: (widgetId, enabled) => {
onCompactModeChanged: (widgetId, value) => {
if (widgetId === "clock") {
SettingsData.setClockCompactMode(enabled)
SettingsData.setClockCompactMode(value)
} else if (widgetId === "music") {
SettingsData.setMediaCompactMode(enabled)
SettingsData.setMediaSize(value)
}
}
onGpuSelectionChanged: (sectionId, widgetIndex, selectedIndex) => {

View File

@@ -18,7 +18,7 @@ Column {
signal addWidget(string sectionId)
signal removeWidget(string sectionId, int widgetIndex)
signal spacerSizeChanged(string sectionId, string itemId, int newSize)
signal compactModeChanged(string widgetId, bool enabled)
signal compactModeChanged(string widgetId, var value)
signal gpuSelectionChanged(string sectionId, int widgetIndex, int selectedIndex)
width: parent.width
@@ -236,33 +236,56 @@ Column {
}
}
Item {
width: 32
height: 32
Row {
spacing: Theme.spacingXS
visible: modelData.id === "clock" || modelData.id === "music"
DankActionButton {
id: compactModeButton
anchors.fill: parent
buttonSize: 32
iconName: (modelData.id === "clock"
&& SettingsData.clockCompactMode)
|| (modelData.id === "music"
&& SettingsData.mediaCompactMode) ? "zoom_out" : "zoom_in"
iconSize: 18
iconColor: ((modelData.id === "clock"
&& SettingsData.clockCompactMode)
|| (modelData.id === "music"
&& SettingsData.mediaCompactMode)) ? Theme.primary : Theme.outline
id: smallSizeButton
buttonSize: 28
visible: modelData.id === "music"
iconName: "photo_size_select_small"
iconSize: 16
iconColor: SettingsData.mediaSize === 0 ? Theme.primary : Theme.outline
onClicked: {
if (modelData.id === "clock") {
root.compactModeChanged("clock",
!SettingsData.clockCompactMode)
} else if (modelData.id === "music") {
root.compactModeChanged("music",
!SettingsData.mediaCompactMode)
root.compactModeChanged("music", 0)
}
}
DankActionButton {
id: mediumSizeButton
buttonSize: 28
visible: modelData.id === "music"
iconName: "photo_size_select_actual"
iconSize: 16
iconColor: SettingsData.mediaSize === 1 ? Theme.primary : Theme.outline
onClicked: {
root.compactModeChanged("music", 1)
}
}
DankActionButton {
id: largeSizeButton
buttonSize: 28
visible: modelData.id === "music"
iconName: "photo_size_select_large"
iconSize: 16
iconColor: SettingsData.mediaSize === 2 ? Theme.primary : Theme.outline
onClicked: {
root.compactModeChanged("music", 2)
}
}
DankActionButton {
id: compactModeButton
buttonSize: 28
visible: modelData.id === "clock"
iconName: SettingsData.clockCompactMode ? "zoom_out" : "zoom_in"
iconSize: 16
iconColor: SettingsData.clockCompactMode ? Theme.primary : Theme.outline
onClicked: {
root.compactModeChanged("clock", !SettingsData.clockCompactMode)
}
}
Rectangle {
@@ -273,8 +296,7 @@ Column {
color: Theme.surfaceContainer
border.color: Theme.outline
border.width: 1
visible: compactModeButton.children[1]
&& compactModeButton.children[1].containsMouse
visible: false
opacity: visible ? 1 : 0
x: -width - Theme.spacingS
y: (parent.height - height) / 2

View File

@@ -10,9 +10,19 @@ Rectangle {
readonly property MprisPlayer activePlayer: MprisController.activePlayer
readonly property bool playerAvailable: activePlayer !== null
property bool compactMode: false
readonly property int baseContentWidth: mediaRow.implicitWidth + Theme.spacingS * 2
readonly property int normalContentWidth: Math.min(280, baseContentWidth)
readonly property int compactContentWidth: Math.min(120, baseContentWidth)
readonly property int textWidth: {
switch(SettingsData.mediaSize) {
case 0: return 0 // No text in small mode
case 2: return 180 // Large text area
default: return 120 // Medium text area
}
}
readonly property int currentContentWidth: {
// AudioViz (20) + spacing + text + spacing + controls (~90) + padding
const baseWidth = 20 + Theme.spacingXS + 90 + Theme.spacingS * 2
return baseWidth + textWidth + (textWidth > 0 ? Theme.spacingXS : 0)
}
property string section: "center"
property var popupTarget: null
property var parentScreen: null
@@ -34,7 +44,7 @@ Rectangle {
PropertyChanges {
target: root
opacity: 1
width: SettingsData.mediaCompactMode ? compactContentWidth : normalContentWidth
width: currentContentWidth
}
},
State {
@@ -92,13 +102,17 @@ Rectangle {
anchors.verticalCenter: parent.verticalCenter
}
StyledText {
id: mediaText
Rectangle {
id: textContainer
anchors.verticalCenter: parent.verticalCenter
width: SettingsData.mediaCompactMode ? 60 : 140
visible: !SettingsData.mediaCompactMode
text: {
width: textWidth
height: 20
visible: SettingsData.mediaSize > 0
clip: true
color: "transparent"
property string displayText: {
if (!activePlayer || !activePlayer.trackTitle)
return ""
@@ -119,12 +133,54 @@ Rectangle {
}
return subtitle.length > 0 ? title + " • " + subtitle : title
}
StyledText {
id: mediaText
anchors.verticalCenter: parent.verticalCenter
text: textContainer.displayText
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceText
font.weight: Font.Medium
elide: Text.ElideRight
wrapMode: Text.NoWrap
maximumLineCount: 1
property bool needsScrolling: implicitWidth > textContainer.width
property real scrollOffset: 0
x: needsScrolling ? -scrollOffset : 0
SequentialAnimation {
id: scrollAnimation
running: mediaText.needsScrolling && textContainer.visible
loops: Animation.Infinite
PauseAnimation { duration: 2000 }
NumberAnimation {
target: mediaText
property: "scrollOffset"
from: 0
to: mediaText.implicitWidth - textContainer.width + 5
duration: 5000
easing.type: Easing.Linear
}
PauseAnimation { duration: 2000 }
NumberAnimation {
target: mediaText
property: "scrollOffset"
to: 0
duration: 5000
easing.type: Easing.Linear
}
}
onTextChanged: {
scrollOffset = 0
scrollAnimation.restart()
}
}
MouseArea {
anchors.fill: parent