add volume and brightness control
This commit is contained in:
@@ -67,6 +67,11 @@ PanelWindow {
|
||||
Layout.fillHeight: true
|
||||
}
|
||||
|
||||
ControlsMenu {
|
||||
bar: bar
|
||||
Layout.fillHeight: true
|
||||
}
|
||||
|
||||
WifiMenu {
|
||||
bar: bar
|
||||
Layout.fillHeight: true
|
||||
|
||||
@@ -0,0 +1,80 @@
|
||||
import QtQuick
|
||||
import qs.config
|
||||
import qs.components
|
||||
import qs.services
|
||||
|
||||
// Right section: the volume button, which also opens the brightness slider.
|
||||
// The sliders live in ControlsPanel.qml as a separate layer surface.
|
||||
Item {
|
||||
id: root
|
||||
|
||||
required property var bar
|
||||
|
||||
readonly property int percent: Math.round(Audio.volume * 100)
|
||||
|
||||
// Nothing to control — no pipewire sink and no backlight — means no button.
|
||||
visible: Audio.available || Brightness.available
|
||||
|
||||
implicitWidth: button.implicitWidth
|
||||
|
||||
PanelButton {
|
||||
id: button
|
||||
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
height: root.height - Theme.spacing
|
||||
minContentWidth: Theme.iconSize
|
||||
active: panel.visible
|
||||
activeColor: Theme.accent
|
||||
acceptedButtons: Qt.LeftButton | Qt.MiddleButton
|
||||
|
||||
onClicked: event => {
|
||||
// Middle click mutes, the way it does on most panels.
|
||||
if (event.button === Qt.MiddleButton)
|
||||
Audio.toggleMute();
|
||||
else
|
||||
Session.toggle("controls", panel.screenName);
|
||||
}
|
||||
|
||||
Row {
|
||||
spacing: Theme.spacing
|
||||
|
||||
VolumeGlyph {
|
||||
size: Theme.iconSize
|
||||
struck: Audio.muted || !Audio.available
|
||||
level: !Audio.available || Audio.muted ? 0 : Audio.volume > 0.5 ? 2 : Audio.volume > 0 ? 1 : 0
|
||||
color: button.active ? Theme.background : Audio.muted || !Audio.available ? Theme.textDim : Theme.text
|
||||
dimColor: button.active ? Qt.rgba(Theme.background.r, Theme.background.g, Theme.background.b, 0.4) : Theme.border
|
||||
}
|
||||
|
||||
Text {
|
||||
height: Theme.iconSize
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
visible: Audio.available
|
||||
text: root.percent + "%"
|
||||
color: button.active ? Theme.background : Audio.muted ? Theme.textDim : Theme.text
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: Theme.fontSizeSmall
|
||||
font.bold: true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Scrolling the button changes the volume without opening anything, which
|
||||
// is the fastest way to nudge it with a pointer.
|
||||
WheelHandler {
|
||||
acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
|
||||
enabled: Audio.available
|
||||
|
||||
onWheel: event => {
|
||||
const notches = event.angleDelta.y / 120;
|
||||
if (notches !== 0)
|
||||
Audio.step(notches * Config.volumeStep);
|
||||
}
|
||||
}
|
||||
|
||||
ControlsPanel {
|
||||
id: panel
|
||||
|
||||
bar: root.bar
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,181 @@
|
||||
import Quickshell
|
||||
import Quickshell.Wayland
|
||||
import QtQuick
|
||||
import qs.config
|
||||
import qs.components
|
||||
import qs.services
|
||||
|
||||
// The volume and brightness sliders. Same full-screen layer surface as the
|
||||
// other menus, so click-away and Escape work on any wlroots compositor.
|
||||
//
|
||||
// A row is only here when there is something behind it: a machine with no
|
||||
// backlight gets the volume slider alone, and the panel shrinks to fit.
|
||||
PanelWindow {
|
||||
id: root
|
||||
|
||||
required property var bar
|
||||
|
||||
readonly property string screenName: root.bar.screen ? root.bar.screen.name : ""
|
||||
|
||||
visible: Session.isOpen("controls", root.screenName)
|
||||
|
||||
screen: root.bar.screen
|
||||
WlrLayershell.layer: WlrLayer.Overlay
|
||||
WlrLayershell.namespace: Config.namespace + "-controls"
|
||||
WlrLayershell.keyboardFocus: WlrKeyboardFocus.Exclusive
|
||||
|
||||
anchors {
|
||||
left: true
|
||||
right: true
|
||||
top: true
|
||||
bottom: true
|
||||
}
|
||||
// Reserve nothing, respect what others reserved — see Launcher.qml. Keeps
|
||||
// the menu clear of the bar and of an on-screen keyboard.
|
||||
exclusionMode: ExclusionMode.Normal
|
||||
exclusiveZone: 0
|
||||
color: "transparent"
|
||||
|
||||
readonly property int barInset: Config.reserveSpace ? 0 : Theme.barHeight
|
||||
|
||||
// ---- Data ------------------------------------------------------------
|
||||
|
||||
// The rows on screen, in order, as ids the key handler can act on.
|
||||
readonly property var rows: [Audio.available ? "volume" : "", Brightness.available ? "brightness" : ""].filter(row => row !== "")
|
||||
|
||||
property int currentIndex: 0
|
||||
|
||||
readonly property string currentRow: root.rows[root.currentIndex] ?? ""
|
||||
|
||||
// One arrow key, in the step size the row it lands on uses.
|
||||
function adjust(direction: int): void {
|
||||
if (root.currentRow === "volume")
|
||||
Audio.step(direction * Config.volumeStep);
|
||||
else if (root.currentRow === "brightness")
|
||||
Brightness.step(direction * Config.brightnessStep);
|
||||
}
|
||||
|
||||
onVisibleChanged: {
|
||||
if (root.visible) {
|
||||
root.currentIndex = 0;
|
||||
Brightness.refresh();
|
||||
keyHandler.forceActiveFocus();
|
||||
}
|
||||
}
|
||||
|
||||
// sysfs raises no change events, so the backlight is polled — but only
|
||||
// while it is being looked at. The hardware keys move it behind our back;
|
||||
// nothing else does.
|
||||
Timer {
|
||||
interval: 1000
|
||||
repeat: true
|
||||
running: root.visible && Brightness.available
|
||||
|
||||
onTriggered: Brightness.refresh()
|
||||
}
|
||||
|
||||
// ---- Chrome ----------------------------------------------------------
|
||||
|
||||
// Click-away scrim.
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
onClicked: Session.close()
|
||||
}
|
||||
|
||||
Item {
|
||||
id: keyHandler
|
||||
|
||||
anchors.fill: parent
|
||||
focus: true
|
||||
|
||||
Keys.onEscapePressed: Session.close()
|
||||
Keys.onDownPressed: root.currentIndex = Math.min(root.currentIndex + 1, root.rows.length - 1)
|
||||
Keys.onUpPressed: root.currentIndex = Math.max(root.currentIndex - 1, 0)
|
||||
Keys.onLeftPressed: root.adjust(-1)
|
||||
Keys.onRightPressed: root.adjust(1)
|
||||
Keys.onReturnPressed: if (root.currentRow === "volume")
|
||||
Audio.toggleMute()
|
||||
Keys.onEnterPressed: if (root.currentRow === "volume")
|
||||
Audio.toggleMute()
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: menu
|
||||
|
||||
// Anchored to the panel's right edge, above the button that opens it.
|
||||
anchors {
|
||||
right: parent.right
|
||||
bottom: parent.bottom
|
||||
rightMargin: Theme.padding
|
||||
bottomMargin: root.barInset + Theme.padding
|
||||
}
|
||||
|
||||
width: Math.min(Config.controlsMenuWidth, root.width - Theme.padding * 2)
|
||||
height: Theme.padding * 4 + column.height
|
||||
|
||||
color: Theme.surface
|
||||
radius: Theme.radius * 2
|
||||
border.width: Theme.borderWidth
|
||||
border.color: Theme.border
|
||||
|
||||
// Swallow clicks so they do not reach the scrim behind.
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
}
|
||||
|
||||
Column {
|
||||
id: column
|
||||
|
||||
anchors {
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
verticalCenter: parent.verticalCenter
|
||||
margins: Theme.padding * 2
|
||||
}
|
||||
spacing: Theme.padding
|
||||
|
||||
SliderRow {
|
||||
width: column.width
|
||||
visible: Audio.available
|
||||
label: "Volume"
|
||||
valueText: Audio.muted ? "Muted" : Math.round(Audio.volume * 100) + "%"
|
||||
value: Audio.volume
|
||||
stepSize: Config.volumeStep
|
||||
selected: root.currentRow === "volume"
|
||||
iconClickable: true
|
||||
|
||||
onMoved: value => {
|
||||
// Moving the slider is a request for that much sound, so a
|
||||
// muted sink comes back rather than moving silently.
|
||||
Audio.setMuted(false);
|
||||
Audio.setVolume(value);
|
||||
}
|
||||
onIconClicked: Audio.toggleMute()
|
||||
|
||||
VolumeGlyph {
|
||||
size: 18
|
||||
struck: Audio.muted
|
||||
level: Audio.muted ? 0 : Audio.volume > 0.5 ? 2 : Audio.volume > 0 ? 1 : 0
|
||||
color: Audio.muted ? Theme.textDim : Theme.text
|
||||
}
|
||||
}
|
||||
|
||||
SliderRow {
|
||||
width: column.width
|
||||
visible: Brightness.available
|
||||
label: "Brightness"
|
||||
valueText: Math.round(Brightness.value * 100) + "%"
|
||||
value: Brightness.value
|
||||
stepSize: Config.brightnessStep
|
||||
selected: root.currentRow === "brightness"
|
||||
|
||||
onMoved: value => Brightness.set(value)
|
||||
|
||||
BrightnessGlyph {
|
||||
size: 18
|
||||
color: Theme.text
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user