feat: add configurable text and separator spacing

README.md

@@ -92,6 +92,16 @@ Enable the repository pre-commit hook:
 make hooks-install
 ```
 
+## Customization
+
+The widget appearance can be tuned from the Plasma widget settings, including:
+
+- title/artist vertical spacing
+- NOW/PLAYING label vertical spacing
+- separator gap from labels
+- separator gap from track text
+- separator height percentage
+
 ## Release Upload
 
 Required GitHub repository secrets:

package/contents/config/main.xml

@@ -41,5 +41,25 @@
             <label>Enable text shadow</label>
             <default>false</default>
         </entry>
+        <entry name="trackTextVerticalSpacing" type="Int">
+            <label>Track text vertical spacing</label>
+            <default>5</default>
+        </entry>
+        <entry name="labelVerticalSpacing" type="Int">
+            <label>Now Playing label vertical spacing</label>
+            <default>0</default>
+        </entry>
+        <entry name="separatorGapLabel" type="Int">
+            <label>Separator gap from label rail</label>
+            <default>4</default>
+        </entry>
+        <entry name="separatorGapTrack" type="Int">
+            <label>Separator gap from track text</label>
+            <default>4</default>
+        </entry>
+        <entry name="separatorHeight" type="Int">
+            <label>Separator height percent</label>
+            <default>90</default>
+        </entry>
     </group>
 </kcfg>

package/contents/ui/Representation.qml

@@ -15,6 +15,11 @@ MouseArea {
     property int configuredBackgroundRadius: 0
     property string configuredForegroundColor: "white"
     property bool configuredTextShadowEnabled: false
+    property int configuredTrackTextVerticalSpacing: 5
+    property int configuredLabelVerticalSpacing: 0
+    property int configuredSeparatorGapLabel: 4
+    property int configuredSeparatorGapTrack: 4
+    property int configuredSeparatorHeight: 90
     readonly property double buttonSize: 16
     readonly property string effectiveLabelVisibilityMode: configuredLabelVisibilityMode === "always" || configuredLabelVisibilityMode === "never" ? configuredLabelVisibilityMode : "auto"
     readonly property bool labelsOnRight: configuredLabelPlacement === "right"
@@ -22,10 +27,14 @@ MouseArea {
     readonly property bool usesCustomBackground: configuredBackgroundStyle === "custom"
     readonly property int hideModeHorizontalPadding: 8
     readonly property int labelRailWidth: 100
-    readonly property int separatorPadding: 4
     readonly property string effectiveBackgroundColor: configuredBackgroundColor || "transparent"
     readonly property int effectiveBackgroundRadius: Math.max(0, configuredBackgroundRadius)
     readonly property string effectiveForegroundColor: configuredForegroundColor || "white"
+    readonly property int effectiveTrackTextVerticalSpacing: configuredTrackTextVerticalSpacing
+    readonly property int effectiveLabelVerticalSpacing: configuredLabelVerticalSpacing
+    readonly property int effectiveSeparatorGapLabel: Math.max(0, configuredSeparatorGapLabel)
+    readonly property int effectiveSeparatorGapTrack: Math.max(0, configuredSeparatorGapTrack)
+    readonly property int effectiveSeparatorHeight: Math.max(0, Math.min(100, configuredSeparatorHeight))
     readonly property bool hasTrackInfo: player.ready && (((player.title || "").trim().length > 0) || ((player.artists || "").trim().length > 0))
     readonly property bool nowPlayingLabelsVisible: {
         if (effectiveLabelVisibilityMode === "always")
@@ -104,7 +113,7 @@ MouseArea {
                 id: nowPlayingLabels
 
                 Layout.alignment: mediaControlsMouseArea.labelsOnRight ? Qt.AlignLeft : Qt.AlignRight
-                spacing: 0
+                spacing: mediaControlsMouseArea.effectiveLabelVerticalSpacing
                 visible: mediaControlsMouseArea.nowPlayingLabelsVisible
 
                 ShadowedLabel {
@@ -218,19 +227,25 @@ MouseArea {
 
         }
 
-        Rectangle {
+        Item {
-            id: separator
+            id: separatorContainer
 
             visible: mediaControlsMouseArea.nowPlayingLabelsVisible && !mediaControlsMouseArea.hideNowPlayingArea
             Layout.fillHeight: true
-            Layout.leftMargin: visible ? mediaControlsMouseArea.separatorPadding : 0
+            Layout.leftMargin: visible ? mediaControlsMouseArea.effectiveSeparatorGapLabel : 0
-            Layout.rightMargin: visible ? mediaControlsMouseArea.separatorPadding : 0
+            Layout.rightMargin: visible ? mediaControlsMouseArea.effectiveSeparatorGapTrack : 0
-            Layout.topMargin: visible ? mediaControlsMouseArea.separatorPadding : 0
-            Layout.bottomMargin: visible ? mediaControlsMouseArea.separatorPadding : 0
             Layout.minimumWidth: visible ? 1 : 0
             Layout.preferredWidth: visible ? 1 : 0
             Layout.maximumWidth: visible ? 1 : 0
-            color: mediaControlsMouseArea.effectiveForegroundColor
+
+            Rectangle {
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.verticalCenter: parent.verticalCenter
+                width: 1
+                height: Math.round(parent.height * mediaControlsMouseArea.effectiveSeparatorHeight / 100)
+                color: mediaControlsMouseArea.effectiveForegroundColor
+            }
+
         }
 
         ColumnLayout {
@@ -240,6 +255,7 @@ MouseArea {
             Layout.minimumWidth: 0
             Layout.leftMargin: mediaControlsMouseArea.hideNowPlayingArea ? mediaControlsMouseArea.hideModeHorizontalPadding : 0
             Layout.rightMargin: mediaControlsMouseArea.hideNowPlayingArea ? mediaControlsMouseArea.hideModeHorizontalPadding : 0
+            spacing: mediaControlsMouseArea.effectiveTrackTextVerticalSpacing
 
             ShadowedLabel {
                 Layout.fillWidth: true
@@ -255,7 +271,6 @@ MouseArea {
             }
 
             ShadowedLabel {
-                Layout.maximumWidth: 300
                 Layout.fillWidth: true
                 Layout.alignment: mediaControlsMouseArea.labelsOnRight ? Qt.AlignRight : Qt.AlignLeft
                 shadowEnabled: mediaControlsMouseArea.configuredTextShadowEnabled

package/contents/ui/configGeneral.qml

@@ -17,6 +17,11 @@ KCM.SimpleKCM {
     property alias cfg_backgroundRadius: backgroundRadiusSpinBox.value
     property alias cfg_foregroundColor: foregroundColorField.text
     property alias cfg_textShadowEnabled: textShadowCheckBox.checked
+    property alias cfg_trackTextVerticalSpacing: trackTextVerticalSpacingSpinBox.value
+    property alias cfg_labelVerticalSpacing: labelVerticalSpacingSpinBox.value
+    property alias cfg_separatorGapLabel: separatorGapLabelSpinBox.value
+    property alias cfg_separatorGapTrack: separatorGapTrackSpinBox.value
+    property alias cfg_separatorHeight: separatorHeightSpinBox.value
     readonly property var availableFonts: Qt.fontFamilies()
     readonly property var labelVisibilityOptions: [{
         "text": i18n("Auto hide when idle"),
@@ -187,6 +192,46 @@ KCM.SimpleKCM {
             text: i18n("Enable")
         }
 
+        QQC2.SpinBox {
+            id: trackTextVerticalSpacingSpinBox
+
+            Kirigami.FormData.label: i18n("Title/artist spacing:")
+            from: -12
+            to: 24
+        }
+
+        QQC2.SpinBox {
+            id: labelVerticalSpacingSpinBox
+
+            Kirigami.FormData.label: i18n("NOW/PLAYING spacing:")
+            from: -12
+            to: 24
+        }
+
+        QQC2.SpinBox {
+            id: separatorGapLabelSpinBox
+
+            Kirigami.FormData.label: i18n("Separator gap from labels:")
+            from: 0
+            to: 24
+        }
+
+        QQC2.SpinBox {
+            id: separatorGapTrackSpinBox
+
+            Kirigami.FormData.label: i18n("Separator gap from track:")
+            from: 0
+            to: 24
+        }
+
+        QQC2.SpinBox {
+            id: separatorHeightSpinBox
+
+            Kirigami.FormData.label: i18n("Separator height (%):")
+            from: 0
+            to: 100
+        }
+
     }
 
     Dialogs.ColorDialog {

package/contents/ui/main.qml

@@ -27,6 +27,16 @@ PlasmoidItem {
     property string configuredForegroundColor: plasmoid.configuration.foregroundColor
     // qmllint disable missing-property
     property bool configuredTextShadowEnabled: plasmoid.configuration.textShadowEnabled
+    // qmllint disable missing-property
+    property int configuredTrackTextVerticalSpacing: plasmoid.configuration.trackTextVerticalSpacing
+    // qmllint disable missing-property
+    property int configuredLabelVerticalSpacing: plasmoid.configuration.labelVerticalSpacing
+    // qmllint disable missing-property
+    property int configuredSeparatorGapLabel: plasmoid.configuration.separatorGapLabel
+    // qmllint disable missing-property
+    property int configuredSeparatorGapTrack: plasmoid.configuration.separatorGapTrack
+    // qmllint disable missing-property
+    property int configuredSeparatorHeight: plasmoid.configuration.separatorHeight
     readonly property int resolvedBackgroundHints: {
         if (configuredBackgroundStyle === "default")
             return PlasmaCore.Types.DefaultBackground | PlasmaCore.Types.ConfigurableBackground;
@@ -61,6 +71,11 @@ PlasmoidItem {
         configuredBackgroundRadius: root.configuredBackgroundRadius
         configuredForegroundColor: root.configuredForegroundColor
         configuredTextShadowEnabled: root.configuredTextShadowEnabled
+        configuredTrackTextVerticalSpacing: root.configuredTrackTextVerticalSpacing
+        configuredLabelVerticalSpacing: root.configuredLabelVerticalSpacing
+        configuredSeparatorGapLabel: root.configuredSeparatorGapLabel
+        configuredSeparatorGapTrack: root.configuredSeparatorGapTrack
+        configuredSeparatorHeight: root.configuredSeparatorHeight
     }
 
     compactRepresentation: Representation {
@@ -76,6 +91,11 @@ PlasmoidItem {
         configuredBackgroundRadius: root.configuredBackgroundRadius
         configuredForegroundColor: root.configuredForegroundColor
         configuredTextShadowEnabled: root.configuredTextShadowEnabled
+        configuredTrackTextVerticalSpacing: root.configuredTrackTextVerticalSpacing
+        configuredLabelVerticalSpacing: root.configuredLabelVerticalSpacing
+        configuredSeparatorGapLabel: root.configuredSeparatorGapLabel
+        configuredSeparatorGapTrack: root.configuredSeparatorGapTrack
+        configuredSeparatorHeight: root.configuredSeparatorHeight
     }
 
 }