fix: restore vertical centering for label

README.md

@@ -4,6 +4,8 @@ NowPlaying is a KDE Plasma 6 widget inspired by the Cleartext Rainmeter widget.
 
 Now on KDE 6: https://www.pling.com/p/2195583/
 
+> Too little too late but I plan to update it regularly now if any issues are created - ruinivist
+
 ## Prerequisites
 
 You need the basic KDE and Qt 6 tools for Plasma widget development.
@@ -90,6 +92,18 @@ Enable the repository pre-commit hook:
 make hooks-install
 ```
 
+## Customization
+
+The widget appearance can be tuned from the Plasma widget settings, including:
+
+- custom multiline label text
+- independent label, title, and artist font sizes
+- 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

@@ -13,6 +13,18 @@
             <label>Font family</label>
             <default>Noto Sans</default>
         </entry>
+        <entry name="labelFontSize" type="Int">
+            <label>Now Playing label font size</label>
+            <default>16</default>
+        </entry>
+        <entry name="titleFontSize" type="Int">
+            <label>Track title font size</label>
+            <default>28</default>
+        </entry>
+        <entry name="artistFontSize" type="Int">
+            <label>Track artist font size</label>
+            <default>26</default>
+        </entry>
         <entry name="labelVisibilityMode" type="String">
             <label>Now Playing label visibility mode</label>
             <default>auto</default>
@@ -21,6 +33,11 @@
             <label>Now Playing label placement</label>
             <default>left</default>
         </entry>
+        <entry name="labelText" type="String">
+            <label>Now Playing label text</label>
+            <default><![CDATA[NOW
+PLAYING]]></default>
+        </entry>
         <entry name="backgroundStyle" type="String">
             <label>Background style</label>
             <default>custom</default>
@@ -41,5 +58,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

@@ -8,13 +8,22 @@ MouseArea {
     id: mediaControlsMouseArea
 
     property string configuredFontFamily: "Noto Sans"
+    property int configuredLabelFontSize: 16
+    property int configuredTitleFontSize: 28
+    property int configuredArtistFontSize: 26
     property string configuredLabelVisibilityMode: "auto"
     property string configuredLabelPlacement: "left"
+    property string configuredLabelText: "NOW\nPLAYING"
     property string configuredBackgroundStyle: "custom"
     property string configuredBackgroundColor: "transparent"
     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,11 +31,21 @@ 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 effectiveLabelFontSize: Math.max(1, configuredLabelFontSize)
+    readonly property int effectiveTitleFontSize: Math.max(1, configuredTitleFontSize)
+    readonly property int effectiveArtistFontSize: Math.max(1, configuredArtistFontSize)
+    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 var effectiveLabelLines: (configuredLabelText || "").split(/\r?\n/)
     readonly property bool hasTrackInfo: player.ready && (((player.title || "").trim().length > 0) || ((player.artists || "").trim().length > 0))
+    readonly property bool rawHoverActive: rootHoverHandler.hovered
+    readonly property bool controlsHoverActive: rawHoverActive || hoverExitTimer.running
     readonly property bool nowPlayingLabelsVisible: {
         if (effectiveLabelVisibilityMode === "always")
             return true;
@@ -38,7 +57,14 @@ MouseArea {
     }
 
     focus: true
+    acceptedButtons: Qt.NoButton
     hoverEnabled: true
+    onRawHoverActiveChanged: {
+        if (rawHoverActive)
+            hoverExitTimer.stop();
+        else
+            hoverExitTimer.restart();
+    }
     Keys.onPressed: (event) => {
         if (!event.modifiers) {
             event.accepted = true;
@@ -53,6 +79,18 @@ MouseArea {
         }
     }
 
+    HoverHandler {
+        id: rootHoverHandler
+
+        margin: 12
+    }
+
+    Timer {
+        id: hoverExitTimer
+
+        interval: 300
+    }
+
     Rectangle {
         anchors.fill: parent
         visible: mediaControlsMouseArea.usesCustomBackground
@@ -75,7 +113,7 @@ MouseArea {
             states: [
                 State {
                     name: "buttonsVisible"
-                    when: mediaControlsMouseArea.containsMouse
+                    when: mediaControlsMouseArea.controlsHoverActive
 
                     PropertyChanges {
                         target: nowPlayingLabels
@@ -85,7 +123,7 @@ MouseArea {
                 },
                 State {
                     name: "buttonsHidden"
-                    when: !mediaControlsMouseArea.containsMouse
+                    when: !mediaControlsMouseArea.controlsHoverActive
 
                     PropertyChanges {
                         target: nowPlayingLabels
@@ -104,33 +142,28 @@ MouseArea {
                 id: nowPlayingLabels
 
                 Layout.alignment: mediaControlsMouseArea.labelsOnRight ? Qt.AlignLeft : Qt.AlignRight
-                spacing: 0
+                Layout.fillWidth: true
+                spacing: mediaControlsMouseArea.effectiveLabelVerticalSpacing
                 visible: mediaControlsMouseArea.nowPlayingLabelsVisible
 
-                ShadowedLabel {
+                Repeater {
+                    model: mediaControlsMouseArea.effectiveLabelLines
+
+                    delegate: ShadowedLabel {
+                        required property string modelData
+
                         Layout.alignment: mediaControlsMouseArea.labelsOnRight ? Qt.AlignLeft : Qt.AlignRight
+                        Layout.fillWidth: true
                         shadowEnabled: mediaControlsMouseArea.configuredTextShadowEnabled
-                    text: "NOW"
+                        text: modelData
                         lineHeight: 0.8
-                    font.pixelSize: 16
                         font.bold: true
+                        font.pixelSize: mediaControlsMouseArea.effectiveLabelFontSize
                         font.family: mediaControlsMouseArea.configuredFontFamily
                         color: mediaControlsMouseArea.effectiveForegroundColor
                         horizontalAlignment: mediaControlsMouseArea.labelsOnRight ? Text.AlignLeft : Text.AlignRight
                     }
 
-                ShadowedLabel {
-                    id: nowPlayingLabel2
-
-                    Layout.alignment: mediaControlsMouseArea.labelsOnRight ? Qt.AlignLeft : Qt.AlignRight
-                    shadowEnabled: mediaControlsMouseArea.configuredTextShadowEnabled
-                    text: "PLAYING"
-                    lineHeight: 0.8
-                    font.bold: true
-                    font.pixelSize: 16
-                    font.family: mediaControlsMouseArea.configuredFontFamily
-                    color: mediaControlsMouseArea.effectiveForegroundColor
-                    horizontalAlignment: mediaControlsMouseArea.labelsOnRight ? Text.AlignLeft : Text.AlignRight
                 }
 
             }
@@ -139,8 +172,9 @@ MouseArea {
                 id: mediaControls
 
                 Layout.alignment: mediaControlsMouseArea.labelsOnRight ? Qt.AlignLeft : Qt.AlignRight
-                opacity: mediaControlsMouseArea.containsMouse && mediaControlsMouseArea.nowPlayingLabelsVisible && !mediaControlsMouseArea.hideNowPlayingArea ? 1 : 0
-                visible: opacity > 0 && mediaControlsMouseArea.nowPlayingLabelsVisible && !mediaControlsMouseArea.hideNowPlayingArea
+                enabled: mediaControlsMouseArea.controlsHoverActive
+                opacity: mediaControlsMouseArea.controlsHoverActive && mediaControlsMouseArea.nowPlayingLabelsVisible && !mediaControlsMouseArea.hideNowPlayingArea ? 1 : 0
+                visible: mediaControlsMouseArea.controlsHoverActive && mediaControlsMouseArea.nowPlayingLabelsVisible && !mediaControlsMouseArea.hideNowPlayingArea
 
                 QQC2.Button {
                     Layout.preferredWidth: buttonSize
@@ -218,21 +252,27 @@ MouseArea {
 
         }
 
-        Rectangle {
-            id: separator
+        Item {
+            id: separatorContainer
 
             visible: mediaControlsMouseArea.nowPlayingLabelsVisible && !mediaControlsMouseArea.hideNowPlayingArea
             Layout.fillHeight: true
-            Layout.leftMargin: visible ? mediaControlsMouseArea.separatorPadding : 0
-            Layout.rightMargin: visible ? mediaControlsMouseArea.separatorPadding : 0
-            Layout.topMargin: visible ? mediaControlsMouseArea.separatorPadding : 0
-            Layout.bottomMargin: visible ? mediaControlsMouseArea.separatorPadding : 0
+            Layout.leftMargin: visible ? mediaControlsMouseArea.effectiveSeparatorGapLabel : 0
+            Layout.rightMargin: visible ? mediaControlsMouseArea.effectiveSeparatorGapTrack : 0
             Layout.minimumWidth: visible ? 1 : 0
             Layout.preferredWidth: visible ? 1 : 0
             Layout.maximumWidth: visible ? 1 : 0
+
+            Rectangle {
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.verticalCenter: parent.verticalCenter
+                width: 1
+                height: Math.round(parent.height * mediaControlsMouseArea.effectiveSeparatorHeight / 100)
                 color: mediaControlsMouseArea.effectiveForegroundColor
             }
 
+        }
+
         ColumnLayout {
             id: infoColumn
 
@@ -240,12 +280,13 @@ 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
                 shadowEnabled: mediaControlsMouseArea.configuredTextShadowEnabled
                 text: player.title
-                font.pixelSize: 28
+                font.pixelSize: mediaControlsMouseArea.effectiveTitleFontSize
                 font.bold: true
                 font.family: mediaControlsMouseArea.configuredFontFamily
                 color: mediaControlsMouseArea.effectiveForegroundColor
@@ -255,12 +296,11 @@ MouseArea {
             }
 
             ShadowedLabel {
-                Layout.maximumWidth: 300
                 Layout.fillWidth: true
                 Layout.alignment: mediaControlsMouseArea.labelsOnRight ? Qt.AlignRight : Qt.AlignLeft
                 shadowEnabled: mediaControlsMouseArea.configuredTextShadowEnabled
                 text: player.artists
-                font.pixelSize: 26
+                font.pixelSize: mediaControlsMouseArea.effectiveArtistFontSize
                 font.family: mediaControlsMouseArea.configuredFontFamily
                 color: mediaControlsMouseArea.effectiveForegroundColor
                 lineHeight: 0.8

package/contents/ui/configGeneral.qml

@@ -10,13 +10,22 @@ KCM.SimpleKCM {
 
     property alias cfg_opacity: opacitySpinBox.value
     property string cfg_fontFamily
+    property alias cfg_labelFontSize: labelFontSizeSpinBox.value
+    property alias cfg_titleFontSize: titleFontSizeSpinBox.value
+    property alias cfg_artistFontSize: artistFontSizeSpinBox.value
     property string cfg_labelVisibilityMode
     property string cfg_labelPlacement
+    property alias cfg_labelText: labelTextArea.text
     property string cfg_backgroundStyle
     property alias cfg_backgroundColor: backgroundColorField.text
     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"),
@@ -58,6 +67,33 @@ KCM.SimpleKCM {
         return options[resolvedIndex].value;
     }
 
+    component SectionHeader: Item {
+        required property string title
+        Kirigami.FormData.isSection: true
+        implicitHeight: sectionLayout.implicitHeight
+
+        ColumnLayout {
+            id: sectionLayout
+            anchors.left: parent.left
+            anchors.right: parent.right
+            spacing: Kirigami.Units.smallSpacing
+
+            QQC2.Label {
+                text: parent.parent.title
+                font.bold: true
+            }
+
+            Rectangle {
+                Layout.fillWidth: true
+                implicitHeight: 1
+                color: Kirigami.Theme.textColor
+                opacity: 0.25
+            }
+
+        }
+
+    }
+
     onCfg_fontFamilyChanged: {
         const index = availableFonts.indexOf(cfg_fontFamily);
         if (index >= 0 && fontFamilyComboBox.currentIndex !== index)
@@ -84,6 +120,10 @@ KCM.SimpleKCM {
     }
 
     Kirigami.FormLayout {
+        SectionHeader {
+            title: i18n("Global")
+        }
+
         QQC2.SpinBox {
             id: opacitySpinBox
 
@@ -100,26 +140,6 @@ KCM.SimpleKCM {
             onActivated: configRoot.cfg_fontFamily = currentText
         }
 
-        QQC2.ComboBox {
-            id: labelVisibilityModeComboBox
-
-            Kirigami.FormData.label: i18n("Now Playing labels:")
-            model: configRoot.labelVisibilityOptions
-            textRole: "text"
-            valueRole: "value"
-            onActivated: configRoot.cfg_labelVisibilityMode = currentValue
-        }
-
-        QQC2.ComboBox {
-            id: labelPlacementComboBox
-
-            Kirigami.FormData.label: i18n("Label placement:")
-            model: configRoot.labelPlacementOptions
-            textRole: "text"
-            valueRole: "value"
-            onActivated: configRoot.cfg_labelPlacement = currentValue
-        }
-
         QQC2.ComboBox {
             id: backgroundStyleComboBox
 
@@ -187,6 +207,108 @@ KCM.SimpleKCM {
             text: i18n("Enable")
         }
 
+        QQC2.SpinBox {
+            id: separatorHeightSpinBox
+
+            Kirigami.FormData.label: i18n("Separator height (%):")
+            from: 0
+            to: 100
+        }
+
+        SectionHeader {
+            title: i18n("Label")
+        }
+
+        QQC2.ComboBox {
+            id: labelVisibilityModeComboBox
+
+            Kirigami.FormData.label: i18n("Now Playing labels:")
+            model: configRoot.labelVisibilityOptions
+            textRole: "text"
+            valueRole: "value"
+            onActivated: configRoot.cfg_labelVisibilityMode = currentValue
+        }
+
+        QQC2.ComboBox {
+            id: labelPlacementComboBox
+
+            Kirigami.FormData.label: i18n("Label placement:")
+            model: configRoot.labelPlacementOptions
+            textRole: "text"
+            valueRole: "value"
+            onActivated: configRoot.cfg_labelPlacement = currentValue
+        }
+
+        QQC2.TextArea {
+            id: labelTextArea
+
+            Kirigami.FormData.label: i18n("Label text:")
+            Layout.fillWidth: true
+            Layout.preferredHeight: Kirigami.Units.gridUnit * 3
+            placeholderText: i18n("Use a line break for multiple lines")
+            wrapMode: TextEdit.NoWrap
+        }
+
+        QQC2.SpinBox {
+            id: labelFontSizeSpinBox
+
+            Kirigami.FormData.label: i18n("Label font size:")
+            from: 8
+            to: 72
+        }
+
+        QQC2.SpinBox {
+            id: labelVerticalSpacingSpinBox
+
+            Kirigami.FormData.label: i18n("Label line spacing (negatives possible):")
+            from: -200
+            to: 200
+        }
+
+        QQC2.SpinBox {
+            id: separatorGapLabelSpinBox
+
+            Kirigami.FormData.label: i18n("Separator gap from label:")
+            from: 0
+            to: 24
+        }
+
+        SectionHeader {
+            title: i18n("Track & Artist")
+        }
+
+        QQC2.SpinBox {
+            id: titleFontSizeSpinBox
+
+            Kirigami.FormData.label: i18n("Title font size:")
+            from: 8
+            to: 96
+        }
+
+        QQC2.SpinBox {
+            id: artistFontSizeSpinBox
+
+            Kirigami.FormData.label: i18n("Artist font size:")
+            from: 8
+            to: 96
+        }
+
+        QQC2.SpinBox {
+            id: trackTextVerticalSpacingSpinBox
+
+            Kirigami.FormData.label: i18n("Title/artist spacing (negatives possible):")
+            from: -200
+            to: 200
+        }
+
+        QQC2.SpinBox {
+            id: separatorGapTrackSpinBox
+
+            Kirigami.FormData.label: i18n("Separator gap from track:")
+            from: 0
+            to: 24
+        }
+
     }
 
     Dialogs.ColorDialog {

package/contents/ui/main.qml

@@ -14,10 +14,19 @@ PlasmoidItem {
     // qmllint disable missing-property
     property string configuredFontFamily: plasmoid.configuration.fontFamily
     // qmllint disable missing-property
+    property int configuredLabelFontSize: plasmoid.configuration.labelFontSize
+    // qmllint disable missing-property
+    property int configuredTitleFontSize: plasmoid.configuration.titleFontSize
+    // qmllint disable missing-property
+    property int configuredArtistFontSize: plasmoid.configuration.artistFontSize
+    // qmllint disable missing-property
     property string configuredLabelVisibilityMode: plasmoid.configuration.labelVisibilityMode
     // qmllint disable missing-property
+    // qmllint disable missing-property
     property string configuredLabelPlacement: plasmoid.configuration.labelPlacement
     // qmllint disable missing-property
+    property string configuredLabelText: plasmoid.configuration.labelText
+    // qmllint disable missing-property
     property string configuredBackgroundStyle: plasmoid.configuration.backgroundStyle
     // qmllint disable missing-property
     property string configuredBackgroundColor: plasmoid.configuration.backgroundColor
@@ -27,6 +36,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;
@@ -49,33 +68,55 @@ PlasmoidItem {
     }
 
     fullRepresentation: Representation {
+        width: root.width
+        height: root.height
         Layout.minimumWidth: Kirigami.Units.gridUnit * 25
         Layout.minimumHeight: Kirigami.Units.gridUnit * 5
         Layout.preferredWidth: root.width
         Layout.preferredHeight: root.height
         configuredFontFamily: root.configuredFontFamily
+        configuredLabelFontSize: root.configuredLabelFontSize
+        configuredTitleFontSize: root.configuredTitleFontSize
+        configuredArtistFontSize: root.configuredArtistFontSize
         configuredLabelVisibilityMode: root.configuredLabelVisibilityMode
         configuredLabelPlacement: root.configuredLabelPlacement
+        configuredLabelText: root.configuredLabelText
         configuredBackgroundStyle: root.configuredBackgroundStyle
         configuredBackgroundColor: root.configuredBackgroundColor
         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 {
+        width: root.width
+        height: root.height
         Layout.minimumWidth: Kirigami.Units.gridUnit * 25
         Layout.minimumHeight: Kirigami.Units.gridUnit * 5
         Layout.preferredWidth: root.width
         Layout.preferredHeight: root.height
         configuredFontFamily: root.configuredFontFamily
+        configuredLabelFontSize: root.configuredLabelFontSize
+        configuredTitleFontSize: root.configuredTitleFontSize
+        configuredArtistFontSize: root.configuredArtistFontSize
         configuredLabelVisibilityMode: root.configuredLabelVisibilityMode
         configuredLabelPlacement: root.configuredLabelPlacement
+        configuredLabelText: root.configuredLabelText
         configuredBackgroundStyle: root.configuredBackgroundStyle
         configuredBackgroundColor: root.configuredBackgroundColor
         configuredBackgroundRadius: root.configuredBackgroundRadius
         configuredForegroundColor: root.configuredForegroundColor
         configuredTextShadowEnabled: root.configuredTextShadowEnabled
+        configuredTrackTextVerticalSpacing: root.configuredTrackTextVerticalSpacing
+        configuredLabelVerticalSpacing: root.configuredLabelVerticalSpacing
+        configuredSeparatorGapLabel: root.configuredSeparatorGapLabel
+        configuredSeparatorGapTrack: root.configuredSeparatorGapTrack
+        configuredSeparatorHeight: root.configuredSeparatorHeight
     }
 
 }