AudioCard: fix issue, change size of slider

Modules/ControlCenter/Cards/AudioCard.qml

@@ -93,27 +93,16 @@ NBox {
       }
 
       // Output Volume Slider
-      RowLayout {
+      NValueSlider {
         Layout.fillWidth: true
-        spacing: Style.marginXS * scaling
-
-        NSlider {
-          Layout.fillWidth: true
-          from: 0
-          to: Settings.data.audio.volumeOverdrive ? 1.5 : 1.0
-          value: localOutputVolume
-          stepSize: 0.01
-          onMoved: value => localOutputVolume = value
-        }
-
-        NText {
-          text: Math.round(AudioService.volume * 100) + "%"
-          pointSize: Style.fontSizeXS * scaling
-          color: Color.mOnSurfaceVariant
-          font.weight: Style.fontWeightMedium
-          verticalAlignment: Text.AlignVCenter
-          Layout.alignment: Qt.AlignVCenter
-        }
+        from: 0
+        to: Settings.data.audio.volumeOverdrive ? 1.5 : 1.0
+        value: localOutputVolume || 0
+        stepSize: 0.01
+        text: Math.round((AudioService.volume || 0) * 100) + "%"
+        textSize: Style.fontSizeXS * scaling
+        customHeightRatio: 0.6
+        onMoved: value => localOutputVolume = value
       }
     }
 
@@ -162,27 +151,16 @@ NBox {
       }
 
       // Input Volume Slider
-      RowLayout {
+      NValueSlider {
         Layout.fillWidth: true
-        spacing: Style.marginXS * scaling
-
-        NSlider {
-          Layout.fillWidth: true
-          from: 0
-          to: Settings.data.audio.volumeOverdrive ? 1.5 : 1.0
-          value: localInputVolume
-          stepSize: 0.01
-          onMoved: value => AudioService.setInputVolume(value)
-        }
-
-        NText {
-          text: Math.round(AudioService.inputVolume * 100) + "%"
-          pointSize: Style.fontSizeXS * scaling
-          color: Color.mOnSurfaceVariant
-          font.weight: Style.fontWeightMedium
-          verticalAlignment: Text.AlignVCenter
-          Layout.alignment: Qt.AlignVCenter
-        }
+        from: 0
+        to: Settings.data.audio.volumeOverdrive ? 1.5 : 1.0
+        value: AudioService.inputVolume || 0
+        stepSize: 0.01
+        text: Math.round((AudioService.inputVolume || 0) * 100) + "%"
+        textSize: Style.fontSizeXS * scaling
+        customHeightRatio: 0.6
+        onMoved: value => AudioService.setInputVolume(value)
       }
     }
   }

Widgets/NValueSlider.qml

@@ -16,12 +16,16 @@ RowLayout {
   property bool snapAlways: true
   property real heightRatio: 0.7
   property string text: ""
+  property real textSize: Style.fontSizeM * scaling
+  property real customHeight: -1
+  property real customHeightRatio: -1
 
   // Signals
   signal moved(real value)
   signal pressedChanged(bool pressed, real value)
 
   spacing: Style.marginL * scaling
+  implicitHeight: root.customHeight > 0 ? root.customHeight : slider.implicitHeight
 
   NSlider {
     id: slider
@@ -32,7 +36,7 @@ RowLayout {
     stepSize: root.stepSize
     cutoutColor: root.cutoutColor
     snapAlways: root.snapAlways
-    heightRatio: root.heightRatio
+    heightRatio: root.customHeightRatio > 0 ? root.customHeightRatio : root.heightRatio
     onMoved: root.moved(value)
     onPressedChanged: root.pressedChanged(pressed, value)
   }
@@ -40,6 +44,7 @@ RowLayout {
   NText {
     visible: root.text !== ""
     text: root.text
+    pointSize: root.textSize
     family: Settings.data.ui.fontFixed
     Layout.alignment: Qt.AlignVCenter
     Layout.preferredWidth: 45 * scaling