zoriya/noctalia-shell
1
0
Fork 0
mirror of https://github.com/zoriya/noctalia-shell.git synced 2026-06-08 04:42:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

MediaMini: implement dynamic width with max width setting

Browse Source
This commit is contained in:
Sakari
2025-10-17 14:57:26 +08:00
parent d56c197fd3
commit 8e5e003f8a
9 changed files with 86 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Assets/Translations/de.json
+4
View File
@@ -1071,6 +1071,10 @@
"label": "Visualizer-Typ",
"description": "Stil des Audio-Visualizers auswählen."
},
"max-width": {
"label": "Maximale Breite",
"description": "Stellt die maximale Horizontalgröße des Widgets ein. Das Widget wird sich an kürzere Inhalte anpassen."
},
"scrolling-mode": {
"label": "Scrollmodus",
"description": "Steuern, wann Textscrolling für lange Track-Titel aktiviert ist."
Assets/Translations/en.json
+4
View File
@@ -1054,6 +1054,10 @@
"label": "Visualizer type",
"description": "Choose the style of audio visualizer to display."
},
"max-width": {
"label": "Maximum Width",
"description": "Sets the maximum horizontal size of the widget. The widget will shrink to fit shorter content."
},
"scrolling-mode": {
"label": "Scrolling mode",
"description": "Control when text scrolling is enabled for long track titles."
Assets/Translations/es.json
+4
View File
@@ -1054,6 +1054,10 @@
"label": "Tipo de visualizador",
"description": "Elegir el estilo de visualizador de audio a mostrar."
},
"max-width": {
"label": "Ancho Máximo",
"description": "Establece el tamaño horizontal máximo del widget. El widget se reducirá para adaptarse a contenido más corto."
},
"scrolling-mode": {
"label": "Modo de desplazamiento",
"description": "Controlar cuándo está habilitado el desplazamiento de texto para títulos de pista largos."
Assets/Translations/fr.json
+4
View File
@@ -1050,6 +1050,10 @@
"label": "Type de visualiseur",
"description": "Choisir le style de visualiseur audio à afficher."
},
"max-width": {
"label": "Largeur Maximale",
"description": "Définit la taille horizontale maximale du widget. Le widget se rétrécira pour s'adapter à un contenu plus court."
},
"scrolling-mode": {
"label": "Mode de défilement",
"description": "Contrôler quand le défilement de texte est activé pour les titres de piste longs."
Assets/Translations/pt.json
+4
View File
@@ -1054,6 +1054,10 @@
"label": "Tipo de visualizador",
"description": "Escolher o estilo de visualizador de áudio a exibir."
},
"max-width": {
"label": "Largura Máxima",
"description": "Define o tamanho horizontal máximo do widget. O widget será reduzido para se adequar a conteúdo mais curto."
},
"scrolling-mode": {
"label": "Modo de rolagem",
"description": "Controlar quando a rolagem de texto está habilitada para títulos de faixa longos."
Assets/Translations/zh-CN.json
+4
View File
@@ -1054,6 +1054,10 @@
"label": "可视化器类型",
"description": "选择要显示的音频可视化器样式。"
},
"max-width": {
"label": "最大宽度",
"description": "设置小部件的最大水平尺寸。当内容较短时，小部件会自动收缩以适应内容。"
},
"scrolling-mode": {
"label": "滚动模式",
"description": "控制何时为长曲目标题启用文本滚动。"
Modules/Bar/Widgets/MediaMini.qml
+50 -4
View File
@@ -38,8 +38,8 @@ Item {
readonly property string visualizerType: (widgetSettings.visualizerType !== undefined && widgetSettings.visualizerType !== "") ? widgetSettings.visualizerType : widgetMetadata.visualizerType
readonly property string scrollingMode: (widgetSettings.scrollingMode !== undefined) ? widgetSettings.scrollingMode : widgetMetadata.scrollingMode
// Fixed width - no expansion
readonly property real widgetWidth: Math.max(145, screen.width * 0.06)
// Maximum widget width with user settings support
readonly property real maxWidth: (widgetSettings.maxWidth !== undefined) ? widgetSettings.maxWidth : Math.max(widgetMetadata.maxWidth, screen.width * 0.06)
readonly property bool hasActivePlayer: MediaService.currentPlayer !== null
readonly property string placeholderText: I18n.tr("bar.widget-settings.media-mini.no-active-player")
@@ -60,7 +60,7 @@ Item {
}
implicitHeight: visible ? (isVerticalBar ? calculatedVerticalDimension() : Style.barHeight) : 0
implicitWidth: visible ? (isVerticalBar ? calculatedVerticalDimension() : widgetWidth) : 0
implicitWidth: visible ? (isVerticalBar ? calculatedVerticalDimension() : dynamicWidth) : 0
// "visible": Always Visible, "hidden": Hide When Empty, "transparent": Transparent When Empty
visible: hideMode !== "hidden" || hasActivePlayer
@@ -80,6 +80,44 @@ Item {
return Math.round((Style.baseWidgetSize - 5) * scaling)
}
function calculateContentWidth() {
// Calculate the actual content width based on visible elements
var contentWidth = 0
var margins = Style.marginS * scaling * 2 // Left and right margins
// Icon or album art width
if (!hasActivePlayer || !showAlbumArt) {
// Icon width
contentWidth += Style.fontSizeL * scaling
} else if (showAlbumArt && hasActivePlayer) {
// Album art width
contentWidth += 21 * scaling
}
// Spacing between icon/art and text
contentWidth += Style.marginS * scaling
// Text width (use the measured width)
contentWidth += fullTitleMetrics.contentWidth
// Additional small margin for text
contentWidth += Style.marginXXS * 2
// Add container margins
contentWidth += margins
return Math.ceil(contentWidth)
}
// Dynamic width: adapt to content but respect maximum width setting
readonly property real dynamicWidth: {
if (!hasActivePlayer) {
return maxWidth
}
// Use content width but don't exceed user-set maximum width
return Math.min(calculateContentWidth(), maxWidth)
}
// A hidden text element to safely measure the full title width
NText {
id: fullTitleMetrics
@@ -95,11 +133,19 @@ Item {
visible: root.visible
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
width: isVerticalBar ? root.width : (widgetWidth)
width: isVerticalBar ? root.width : dynamicWidth
height: isVerticalBar ? width : Style.capsuleHeight
radius: isVerticalBar ? width / 2 : Style.radiusM
color: Settings.data.bar.showCapsule ? Color.mSurfaceVariant : Color.transparent
// Smooth width transition
Behavior on width {
NumberAnimation {
duration: Style.animationNormal
easing.type: Easing.InOutCubic
}
}
Item {
id: mainContainer
anchors.fill: parent
Modules/Settings/Bar/WidgetSettings/MediaMiniSettings.qml
+11
View File
@@ -19,6 +19,7 @@ ColumnLayout {
property bool valueShowVisualizer: widgetData.showVisualizer !== undefined ? widgetData.showVisualizer : widgetMetadata.showVisualizer
property string valueVisualizerType: widgetData.visualizerType || widgetMetadata.visualizerType
property string valueScrollingMode: widgetData.scrollingMode || widgetMetadata.scrollingMode
property int valueMaxWidth: widgetData.maxWidth !== undefined ? widgetData.maxWidth : widgetMetadata.maxWidth
Component.onCompleted: {
if (widgetData && widgetData.hideMode !== undefined) {
@@ -33,6 +34,7 @@ ColumnLayout {
settings.showVisualizer = valueShowVisualizer
settings.visualizerType = valueVisualizerType
settings.scrollingMode = valueScrollingMode
settings.maxWidth = parseInt(widthInput.text) || widgetMetadata.maxWidth
return settings
}
@@ -87,6 +89,15 @@ ColumnLayout {
minimumWidth: 200
}
NTextInput {
id: widthInput
Layout.fillWidth: true
label: I18n.tr("bar.widget-settings.media-mini.max-width.label")
description: I18n.tr("bar.widget-settings.media-mini.max-width.description")
placeholderText: widgetMetadata.maxWidth
text: valueMaxWidth
}
NComboBox {
label: I18n.tr("bar.widget-settings.media-mini.scrolling-mode.label")
description: I18n.tr("bar.widget-settings.media-mini.scrolling-mode.description")
Services/BarWidgetRegistry.qml
+1
View File
@@ -88,6 +88,7 @@ Singleton {
"hideMode": "hidden",
"scrollingMode"// "visible", "hidden", "transparent"
: "hover",
"maxWidth": 145,
"showAlbumArt": false,
"showVisualizer": false,
"visualizerType": "linear"