AudioCard: sleeker volume sliders

Modules/ControlCenter/Cards/AudioCard.qml

@@ -39,10 +39,10 @@ NBox {
     }
   }
 
-  ColumnLayout {
+  RowLayout {
     anchors.fill: parent
     anchors.margins: Style.marginM
-    spacing: 0
+    spacing: Style.marginM
 
     // Output Volume Section
     ColumnLayout {
@@ -59,7 +59,7 @@ NBox {
         NIconButton {
           icon: AudioService.muted ? "volume-off" : "volume-high"
           baseSize: Style.baseWidgetSize * 0.5
-          colorFg: AudioService.muted ? Color.mError : Color.mOnSurfaceVariant
+          colorFg: AudioService.muted ? Color.mError : Color.mOnSurface
           colorBg: Color.transparent
           colorBgHover: Color.mTertiary
           colorFgHover: Color.mOnTertiary
@@ -70,39 +70,27 @@ NBox {
           }
         }
 
-        RowLayout {
-          spacing: Style.marginXXS
+        NText {
+          text: AudioService.sink ? AudioService.sink.description : "No output device"
+          pointSize: Style.fontSizeXS
+          color: Color.mOnSurfaceVariant
+          font.weight: Style.fontWeightMedium
+          elide: Text.ElideRight
           Layout.fillWidth: true
-
-          NText {
-            text: I18n.tr("settings.audio.volumes.output-volume.label")
-            pointSize: Style.fontSizeXS
-            color: Color.mOnSurface
-            font.weight: Style.fontWeightMedium
-          }
-
-          NText {
-            text: AudioService.sink ? AudioService.sink.description : "No output device"
-            pointSize: Style.fontSizeXS
-            color: Color.mOnSurfaceVariant
-            font.weight: Style.fontWeightMedium
-            elide: Text.ElideRight
-            Layout.fillWidth: true
-          }
         }
       }
 
       // Output Volume Slider
-      NValueSlider {
+      NSlider {
         Layout.fillWidth: true
         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
-        customHeightRatio: 0.6
-        onMoved: value => localOutputVolume = value
+        heightRatio: 0.5
+        onMoved: localOutputVolume = value
+        tooltipText: `${Math.round((AudioService.volume || 0) * 100)}%`
+        tooltipDirection: "bottom"
       }
     }
 
@@ -121,46 +109,34 @@ NBox {
         NIconButton {
           icon: AudioService.inputMuted ? "microphone-off" : "microphone"
           baseSize: Style.baseWidgetSize * 0.5
-          colorFg: AudioService.inputMuted ? Color.mError : Color.mOnSurfaceVariant
+          colorFg: AudioService.inputMuted ? Color.mError : Color.mOnSurface
           colorBg: Color.transparent
           colorBgHover: Color.mTertiary
           colorFgHover: Color.mOnTertiary
           onClicked: AudioService.setInputMuted(!AudioService.inputMuted)
         }
 
-        RowLayout {
-          spacing: Style.marginXXS
+        NText {
+          text: AudioService.source ? AudioService.source.description : "No input device"
+          pointSize: Style.fontSizeXS
+          color: Color.mOnSurfaceVariant
+          font.weight: Style.fontWeightMedium
+          elide: Text.ElideRight
           Layout.fillWidth: true
-
-          NText {
-            text: I18n.tr("settings.audio.volumes.input-volume.label")
-            pointSize: Style.fontSizeXS
-            color: Color.mOnSurface
-            font.weight: Style.fontWeightMedium
-          }
-
-          NText {
-            text: AudioService.source ? AudioService.source.description : "No input device"
-            pointSize: Style.fontSizeXS
-            color: Color.mOnSurfaceVariant
-            font.weight: Style.fontWeightMedium
-            elide: Text.ElideRight
-            Layout.fillWidth: true
-          }
         }
       }
 
       // Input Volume Slider
-      NValueSlider {
+      NSlider {
         Layout.fillWidth: true
         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
-        customHeightRatio: 0.6
-        onMoved: value => AudioService.setInputVolume(value)
+        heightRatio: 0.5
+        onMoved: AudioService.setInputVolume(value)
+        tooltipText: `${Math.round((AudioService.inputVolume || 0) * 100)}%`
+        tooltipDirection: "bottom"
       }
     }
   }

Modules/ControlCenter/ControlCenterPanel.qml

@@ -55,7 +55,7 @@ NPanel {
 
   readonly property int profileHeight: Math.round(64 * Style.uiScaleRatio)
   readonly property int shortcutsHeight: Math.round(52 * Style.uiScaleRatio)
-  readonly property int audioHeight: Math.round(120 * Style.uiScaleRatio)
+  readonly property int audioHeight: Math.round(60 * Style.uiScaleRatio)
   readonly property int weatherHeight: Math.round(190 * Style.uiScaleRatio)
   readonly property int mediaSysMonHeight: Math.round(260 * Style.uiScaleRatio)
 

Widgets/NSlider.qml

@@ -10,6 +10,9 @@ Slider {
   property var cutoutColor: Color.mSurface
   property bool snapAlways: true
   property real heightRatio: 0.7
+  property string tooltipText
+  property string tooltipDirection: "auto"
+  property bool hovering: false
 
   readonly property real knobDiameter: Math.round((Style.baseWidgetSize * heightRatio * Style.uiScaleRatio) / 2) * 2
   readonly property real trackHeight: Math.round((knobDiameter * 0.4 * Style.uiScaleRatio) / 2) * 2
@@ -125,5 +128,47 @@ Slider {
         }
       }
     }
+
+    MouseArea {
+      enabled: true
+      anchors.fill: parent
+      cursorShape: Qt.PointingHandCursor
+      hoverEnabled: true
+      // Pass through mouse events to the slider
+      propagateComposedEvents: true
+      preventStealing: false
+
+      onEntered: {
+        root.hovering = true
+        if (root.tooltipText) {
+          TooltipService.show(Screen, knob, root.tooltipText, root.tooltipDirection)
+        }
+      }
+
+      onExited: {
+        root.hovering = false
+        if (root.tooltipText) {
+          TooltipService.hide()
+        }
+      }
+
+      onPressed: function (mouse) {
+        if (root.tooltipText) {
+          TooltipService.hide()
+        }
+        // Pass the event through to the slider
+        mouse.accepted = false
+      }
+
+      onReleased: function (mouse) {
+        // Pass the event through to the slider
+        mouse.accepted = false
+      }
+
+      onPositionChanged: function (mouse) {
+        // Pass the event through to the slider
+        mouse.accepted = false
+      }
+    }
   }
 }