diff --git a/Modules/ControlCenter/Cards/AudioCard.qml b/Modules/ControlCenter/Cards/AudioCard.qml index c09b05bf..b9989624 100644 --- a/Modules/ControlCenter/Cards/AudioCard.qml +++ b/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" } } } diff --git a/Modules/ControlCenter/ControlCenterPanel.qml b/Modules/ControlCenter/ControlCenterPanel.qml index 4f997b17..599dddb6 100644 --- a/Modules/ControlCenter/ControlCenterPanel.qml +++ b/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) diff --git a/Widgets/NSlider.qml b/Widgets/NSlider.qml index e91ecdb8..fb9b0312 100644 --- a/Widgets/NSlider.qml +++ b/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 + } + } } }