Files
illogical-impulse/.config/quickshell/modules/bar/Bar.qml
T
2025-06-09 09:20:51 +02:00

465 lines
22 KiB
QML

import "root:/"
import "root:/modules/common"
import "root:/modules/common/widgets"
import "root:/services"
import "root:/modules/common/functions/color_utils.js" as ColorUtils
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
import Quickshell
import Quickshell.Wayland
import Quickshell.Hyprland
import Quickshell.Services.UPower
Scope {
id: bar
readonly property int barHeight: Appearance.sizes.barHeight
readonly property int osdHideMouseMoveThreshold: 20
property bool showBarBackground: ConfigOptions.bar.showBackground
component VerticalBarSeparator: Rectangle {
Layout.topMargin: barHeight / 3
Layout.bottomMargin: barHeight / 3
Layout.fillHeight: true
implicitWidth: 1
color: Appearance.m3colors.m3outlineVariant
}
Variants { // For each monitor
model: Quickshell.screens
PanelWindow { // Bar window
id: barRoot
screen: modelData
property ShellScreen modelData
property var brightnessMonitor: Brightness.getMonitorForScreen(modelData)
property real useShortenedForm: (Appearance.sizes.barHellaShortenScreenWidthThreshold >= screen.width) ? 2 :
(Appearance.sizes.barShortenScreenWidthThreshold >= screen.width) ? 1 : 0
readonly property int centerSideModuleWidth:
(useShortenedForm == 2) ? Appearance.sizes.barCenterSideModuleWidthHellaShortened :
(useShortenedForm == 1) ? Appearance.sizes.barCenterSideModuleWidthShortened :
Appearance.sizes.barCenterSideModuleWidth
WlrLayershell.namespace: "quickshell:bar"
implicitHeight: barHeight + Appearance.rounding.screenRounding
exclusiveZone: showBarBackground ? barHeight : (barHeight - 4)
mask: Region {
item: barContent
}
color: "transparent"
anchors {
top: !ConfigOptions.bar.bottom
bottom: ConfigOptions.bar.bottom
left: true
right: true
}
Rectangle { // Bar background
id: barContent
anchors {
right: parent.right
left: parent.left
top: !ConfigOptions.bar.bottom ? parent.top : undefined
bottom: ConfigOptions.bar.bottom ? parent.bottom : undefined
}
color: showBarBackground ? Appearance.colors.colLayer0 : "transparent"
height: barHeight
MouseArea { // Left side | scroll to change brightness
id: barLeftSideMouseArea
anchors.left: parent.left
implicitHeight: barHeight
width: (barRoot.width - middleSection.width) / 2
property bool hovered: false
property real lastScrollX: 0
property real lastScrollY: 0
property bool trackingScroll: false
acceptedButtons: Qt.LeftButton
hoverEnabled: true
propagateComposedEvents: true
onEntered: (event) => {
barLeftSideMouseArea.hovered = true
}
onExited: (event) => {
barLeftSideMouseArea.hovered = false
barLeftSideMouseArea.trackingScroll = false
}
onPressed: (event) => {
if (event.button === Qt.LeftButton) {
Hyprland.dispatch('global quickshell:sidebarLeftOpen')
}
}
// Scroll to change brightness
WheelHandler {
onWheel: (event) => {
if (event.angleDelta.y < 0)
barRoot.brightnessMonitor.setBrightness(barRoot.brightnessMonitor.brightness - 0.05);
else if (event.angleDelta.y > 0)
barRoot.brightnessMonitor.setBrightness(barRoot.brightnessMonitor.brightness + 0.05);
// Store the mouse position and start tracking
barLeftSideMouseArea.lastScrollX = event.x;
barLeftSideMouseArea.lastScrollY = event.y;
barLeftSideMouseArea.trackingScroll = true;
}
acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
}
onPositionChanged: (mouse) => {
if (barLeftSideMouseArea.trackingScroll) {
const dx = mouse.x - barLeftSideMouseArea.lastScrollX;
const dy = mouse.y - barLeftSideMouseArea.lastScrollY;
if (Math.sqrt(dx*dx + dy*dy) > osdHideMouseMoveThreshold) {
Hyprland.dispatch('global quickshell:osdBrightnessHide')
barLeftSideMouseArea.trackingScroll = false;
}
}
}
Item { // Left section
anchors.fill: parent
implicitHeight: leftSectionRowLayout.implicitHeight
implicitWidth: leftSectionRowLayout.implicitWidth
ScrollHint {
reveal: barLeftSideMouseArea.hovered
icon: "light_mode"
tooltipText: qsTr("Scroll to change brightness")
side: "left"
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
}
RowLayout { // Content
id: leftSectionRowLayout
anchors.fill: parent
spacing: 10
RippleButton { // Left sidebar button
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
Layout.leftMargin: Appearance.rounding.screenRounding
Layout.fillWidth: false
property real buttonPadding: 5
implicitWidth: distroIcon.width + buttonPadding * 2
implicitHeight: distroIcon.height + buttonPadding * 2
buttonRadius: Appearance.rounding.full
colBackground: barLeftSideMouseArea.hovered ? Appearance.colors.colLayer1Hover : ColorUtils.transparentize(Appearance.colors.colLayer1Hover, 1)
colBackgroundHover: Appearance.colors.colLayer1Hover
colRipple: Appearance.colors.colLayer1Active
colBackgroundToggled: Appearance.m3colors.m3secondaryContainer
colBackgroundToggledHover: Appearance.colors.colSecondaryContainerHover
colRippleToggled: Appearance.colors.colSecondaryContainerActive
toggled: GlobalStates.sidebarLeftOpen
property color colText: toggled ? Appearance.m3colors.m3onSecondaryContainer : Appearance.colors.colOnLayer0
onPressed: {
Hyprland.dispatch('global quickshell:sidebarLeftToggle')
}
CustomIcon {
id: distroIcon
anchors.centerIn: parent
width: 19.5
height: 19.5
source: ConfigOptions.bar.topLeftIcon == 'distro' ?
SystemInfo.distroIcon : "spark-symbolic"
}
ColorOverlay {
anchors.fill: distroIcon
source: distroIcon
color: Appearance.colors.colOnLayer0
}
}
ActiveWindow {
visible: barRoot.useShortenedForm === 0 && width > 0 && height > 0
Layout.rightMargin: Appearance.rounding.screenRounding
Layout.fillWidth: true
bar: barRoot
}
}
}
}
RowLayout { // Middle section
id: middleSection
anchors.centerIn: parent
spacing: ConfigOptions?.bar.borderless ? 4 : 8
RowLayout {
id: leftCenterGroup
Layout.preferredWidth: barRoot.centerSideModuleWidth
spacing: 4
Layout.fillHeight: true
implicitWidth: 350
Resources {
alwaysShowAllResources: barRoot.useShortenedForm === 2
Layout.fillWidth: barRoot.useShortenedForm === 2
}
Media {
visible: barRoot.useShortenedForm < 2
Layout.fillWidth: true
}
}
VerticalBarSeparator {visible: ConfigOptions?.bar.borderless}
RowLayout {
id: middleCenterGroup
Layout.fillHeight: true
Workspaces {
bar: barRoot
MouseArea { // Right-click to toggle overview
anchors.fill: parent
acceptedButtons: Qt.RightButton
onPressed: (event) => {
if (event.button === Qt.RightButton) {
Hyprland.dispatch('global quickshell:overviewToggle')
}
}
}
}
}
VerticalBarSeparator {visible: ConfigOptions?.bar.borderless}
RowLayout {
id: rightCenterGroup
Layout.preferredWidth: leftCenterGroup.width
Layout.fillHeight: true
spacing: 4
ClockWidget {
showDate: barRoot.useShortenedForm < 2
Layout.alignment: Qt.AlignVCenter
Layout.fillWidth: true
}
UtilButtons {
visible: barRoot.useShortenedForm === 0
Layout.alignment: Qt.AlignVCenter
}
BatteryIndicator {
visible: (barRoot.useShortenedForm < 2 && UPower.displayDevice.isLaptopBattery)
Layout.alignment: Qt.AlignVCenter
}
}
}
MouseArea { // Right side | scroll to change volume
id: barRightSideMouseArea
anchors.right: parent.right
implicitHeight: barHeight
width: (barRoot.width - middleSection.width) / 2
property bool hovered: false
property real lastScrollX: 0
property real lastScrollY: 0
property bool trackingScroll: false
acceptedButtons: Qt.LeftButton
hoverEnabled: true
propagateComposedEvents: true
onEntered: (event) => {
barRightSideMouseArea.hovered = true
}
onExited: (event) => {
barRightSideMouseArea.hovered = false
barRightSideMouseArea.trackingScroll = false
}
onPressed: (event) => {
if (event.button === Qt.LeftButton) {
Hyprland.dispatch('global quickshell:sidebarRightOpen')
}
else if (event.button === Qt.RightButton) {
MprisController.activePlayer.next()
}
}
// Scroll to change volume
WheelHandler {
onWheel: (event) => {
const currentVolume = Audio.value;
const step = currentVolume < 0.1 ? 0.01 : 0.02 || 0.2;
if (event.angleDelta.y < 0)
Audio.sink.audio.volume -= step;
else if (event.angleDelta.y > 0)
Audio.sink.audio.volume = Math.min(1, Audio.sink.audio.volume + step);
// Store the mouse position and start tracking
barRightSideMouseArea.lastScrollX = event.x;
barRightSideMouseArea.lastScrollY = event.y;
barRightSideMouseArea.trackingScroll = true;
}
acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
}
onPositionChanged: (mouse) => {
if (barRightSideMouseArea.trackingScroll) {
const dx = mouse.x - barRightSideMouseArea.lastScrollX;
const dy = mouse.y - barRightSideMouseArea.lastScrollY;
if (Math.sqrt(dx*dx + dy*dy) > osdHideMouseMoveThreshold) {
Hyprland.dispatch('global quickshell:osdVolumeHide')
barRightSideMouseArea.trackingScroll = false;
}
}
}
Item {
anchors.fill: parent
implicitHeight: rightSectionRowLayout.implicitHeight
implicitWidth: rightSectionRowLayout.implicitWidth
ScrollHint {
reveal: barRightSideMouseArea.hovered
icon: "volume_up"
tooltipText: qsTr("Scroll to change volume")
side: "right"
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
}
RowLayout {
id: rightSectionRowLayout
anchors.fill: parent
spacing: 5
layoutDirection: Qt.RightToLeft
RippleButton { // Right sidebar button
id: rightSidebarButton
Layout.margins: 4
Layout.rightMargin: Appearance.rounding.screenRounding
Layout.fillHeight: true
implicitWidth: indicatorsRowLayout.implicitWidth + 10*2
buttonRadius: Appearance.rounding.full
colBackground: barRightSideMouseArea.hovered ? Appearance.colors.colLayer1Hover : ColorUtils.transparentize(Appearance.colors.colLayer1Hover, 1)
colBackgroundHover: Appearance.colors.colLayer1Hover
colRipple: Appearance.colors.colLayer1Active
colBackgroundToggled: Appearance.m3colors.m3secondaryContainer
colBackgroundToggledHover: Appearance.colors.colSecondaryContainerHover
colRippleToggled: Appearance.colors.colSecondaryContainerActive
toggled: GlobalStates.sidebarRightOpen
property color colText: toggled ? Appearance.m3colors.m3onSecondaryContainer : Appearance.colors.colOnLayer0
Behavior on colText {
animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
}
onPressed: {
Hyprland.dispatch('global quickshell:sidebarRightToggle')
}
RowLayout {
id: indicatorsRowLayout
anchors.centerIn: parent
property real realSpacing: 15
spacing: 0
Revealer {
reveal: Audio.sink?.audio?.muted ?? false
Layout.fillHeight: true
Layout.rightMargin: reveal ? indicatorsRowLayout.realSpacing : 0
Behavior on Layout.rightMargin {
NumberAnimation {
duration: Appearance.animation.elementMoveFast.duration
easing.type: Appearance.animation.elementMoveFast.type
easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
}
}
MaterialSymbol {
text: "volume_off"
iconSize: Appearance.font.pixelSize.larger
color: rightSidebarButton.colText
}
}
Revealer {
reveal: Audio.source?.audio?.muted ?? false
Layout.fillHeight: true
Layout.rightMargin: reveal ? indicatorsRowLayout.realSpacing : 0
Behavior on Layout.rightMargin {
NumberAnimation {
duration: Appearance.animation.elementMoveFast.duration
easing.type: Appearance.animation.elementMoveFast.type
easing.bezierCurve: Appearance.animation.elementMoveFast.bezierCurve
}
}
MaterialSymbol {
text: "mic_off"
iconSize: Appearance.font.pixelSize.larger
color: rightSidebarButton.colText
}
}
MaterialSymbol {
Layout.rightMargin: indicatorsRowLayout.realSpacing
text: Network.materialSymbol
iconSize: Appearance.font.pixelSize.larger
color: rightSidebarButton.colText
}
MaterialSymbol {
text: Bluetooth.bluetoothConnected ? "bluetooth_connected" : Bluetooth.bluetoothEnabled ? "bluetooth" : "bluetooth_disabled"
iconSize: Appearance.font.pixelSize.larger
color: rightSidebarButton.colText
}
}
}
SysTray {
bar: barRoot
visible: barRoot.useShortenedForm === 0
Layout.fillWidth: false
Layout.fillHeight: true
}
Item {
Layout.fillWidth: true
Layout.fillHeight: true
}
}
}
}
}
// Round decorators
Item {
anchors {
left: parent.left
right: parent.right
// top: barContent.bottom
top: ConfigOptions.bar.bottom ? undefined : barContent.bottom
bottom: ConfigOptions.bar.bottom ? barContent.top : undefined
}
height: Appearance.rounding.screenRounding
RoundCorner {
anchors.top: parent.top
anchors.left: parent.left
size: Appearance.rounding.screenRounding
corner: ConfigOptions.bar.bottom ? cornerEnum.bottomLeft : cornerEnum.topLeft
color: showBarBackground ? Appearance.colors.colLayer0 : "transparent"
}
RoundCorner {
anchors.top: parent.top
anchors.right: parent.right
size: Appearance.rounding.screenRounding
corner: ConfigOptions.bar.bottom ? cornerEnum.bottomRight : cornerEnum.topRight
color: showBarBackground ? Appearance.colors.colLayer0 : "transparent"
}
}
}
}
}