diff --git a/.config/quickshell/modules/bar/Bar.qml b/.config/quickshell/modules/bar/Bar.qml index 0a890c6ee..bac9f720d 100644 --- a/.config/quickshell/modules/bar/Bar.qml +++ b/.config/quickshell/modules/bar/Bar.qml @@ -15,13 +15,12 @@ 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.topMargin: Appearance.sizes.baseBarHeight / 3 + Layout.bottomMargin: Appearance.sizes.baseBarHeight / 3 Layout.fillHeight: true implicitWidth: 1 color: Appearance.colors.colOutlineVariant @@ -38,9 +37,9 @@ Scope { PanelWindow { // Bar window id: barRoot + required property ShellScreen modelData 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 @@ -50,8 +49,8 @@ Scope { Appearance.sizes.barCenterSideModuleWidth WlrLayershell.namespace: "quickshell:bar" - implicitHeight: barHeight + Appearance.rounding.screenRounding - exclusiveZone: showBarBackground ? barHeight : (barHeight - 4) + implicitHeight: Appearance.sizes.barHeight + Appearance.rounding.screenRounding + exclusiveZone: Appearance.sizes.baseBarHeight + (ConfigOptions.bar.cornerStyle === 1 ? Appearance.sizes.hyprlandGapsOut : 0) mask: Region { item: barContent } @@ -64,21 +63,46 @@ Scope { right: true } - Rectangle { // Bar background + Item { // Bar content region id: barContent anchors { right: parent.right left: parent.left - top: !ConfigOptions.bar.bottom ? parent.top : undefined - bottom: ConfigOptions.bar.bottom ? parent.bottom : undefined + top: parent.top + bottom: undefined + } + implicitHeight: Appearance.sizes.barHeight + height: Appearance.sizes.barHeight + + states: State { + name: "bottom" + when: ConfigOptions.bar.bottom + AnchorChanges { + target: barContent + anchors { + right: parent.right + left: parent.left + top: undefined + bottom: parent.bottom + } + } + } + + // Background + Rectangle { + anchors { + fill: parent + margins: ConfigOptions.bar.cornerStyle === 1 ? (Appearance.sizes.hyprlandGapsOut) : 0 // idk why but +1 is needed + } + color: showBarBackground ? Appearance.colors.colLayer0 : "transparent" + radius: ConfigOptions.bar.cornerStyle === 1 ? Appearance.rounding.windowRounding : 0 } - color: showBarBackground ? Appearance.colors.colLayer0 : "transparent" - height: barHeight MouseArea { // Left side | scroll to change brightness id: barLeftSideMouseArea anchors.left: parent.left - implicitHeight: barHeight + implicitHeight: Appearance.sizes.baseBarHeight + height: Appearance.sizes.barHeight width: (barRoot.width - middleSection.width) / 2 property bool hovered: false property real lastScrollX: 0 @@ -279,7 +303,8 @@ Scope { id: barRightSideMouseArea anchors.right: parent.right - implicitHeight: barHeight + implicitHeight: Appearance.sizes.baseBarHeight + height: Appearance.sizes.barHeight width: (barRoot.width - middleSection.width) / 2 property bool hovered: false @@ -354,10 +379,14 @@ Scope { RippleButton { // Right sidebar button id: rightSidebarButton - Layout.margins: 4 + + Layout.alignment: Qt.AlignRight | Qt.AlignVCenter Layout.rightMargin: Appearance.rounding.screenRounding - Layout.fillHeight: true - implicitWidth: indicatorsRowLayout.implicitWidth + 10*2 + Layout.fillWidth: false + + implicitWidth: indicatorsRowLayout.implicitWidth + 10 * 2 + implicitHeight: indicatorsRowLayout.implicitHeight + 5 * 2 + buttonRadius: Appearance.rounding.full colBackground: barRightSideMouseArea.hovered ? Appearance.colors.colLayer1Hover : ColorUtils.transparentize(Appearance.colors.colLayer1Hover, 1) colBackgroundHover: Appearance.colors.colLayer1Hover @@ -447,32 +476,68 @@ Scope { } // Round decorators - Item { + Loader { + id: roundDecorators anchors { left: parent.left right: parent.right - // top: barContent.bottom - top: ConfigOptions.bar.bottom ? undefined : barContent.bottom - bottom: ConfigOptions.bar.bottom ? barContent.top : undefined } + y: Appearance.sizes.barHeight + width: parent.width height: Appearance.rounding.screenRounding - visible: showBarBackground + active: showBarBackground && ConfigOptions.bar.cornerStyle === 0 // Hug - 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" - opacity: 1.0 - Appearance.transparency + states: State { + name: "bottom" + when: ConfigOptions.bar.bottom + PropertyChanges { + roundDecorators.y: 0 + } } - 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" - opacity: 1.0 - Appearance.transparency + + sourceComponent: Item { + implicitHeight: Appearance.rounding.screenRounding + RoundCorner { + id: leftCorner + anchors { + top: parent.top + bottom: parent.bottom + left: parent.left + } + + size: Appearance.rounding.screenRounding + color: showBarBackground ? Appearance.colors.colLayer0 : "transparent" + opacity: 1.0 - Appearance.transparency + + corner: RoundCorner.CornerEnum.TopLeft + states: State { + name: "bottom" + when: ConfigOptions.bar.bottom + PropertyChanges { + leftCorner.corner: RoundCorner.CornerEnum.BottomLeft + } + } + } + RoundCorner { + id: rightCorner + anchors { + right: parent.right + top: !ConfigOptions.bar.bottom ? parent.top : undefined + bottom: ConfigOptions.bar.bottom ? parent.bottom : undefined + } + size: Appearance.rounding.screenRounding + color: showBarBackground ? Appearance.colors.colLayer0 : "transparent" + opacity: 1.0 - Appearance.transparency + + corner: RoundCorner.CornerEnum.TopRight + states: State { + name: "bottom" + when: ConfigOptions.bar.bottom + PropertyChanges { + rightCorner.corner: RoundCorner.CornerEnum.BottomRight + } + } + } } } diff --git a/.config/quickshell/modules/bar/BarGroup.qml b/.config/quickshell/modules/bar/BarGroup.qml index a71b67e46..acc15169b 100644 --- a/.config/quickshell/modules/bar/BarGroup.qml +++ b/.config/quickshell/modules/bar/BarGroup.qml @@ -7,7 +7,8 @@ import QtQuick.Layouts Item { id: root property real padding: 5 - implicitHeight: 40 + implicitHeight: Appearance.sizes.baseBarHeight + height: Appearance.sizes.barHeight implicitWidth: rowLayout.implicitWidth + padding * 2 default property alias items: rowLayout.children diff --git a/.config/quickshell/modules/bar/Media.qml b/.config/quickshell/modules/bar/Media.qml index 3bd8a78a4..432ed5b1d 100644 --- a/.config/quickshell/modules/bar/Media.qml +++ b/.config/quickshell/modules/bar/Media.qml @@ -17,7 +17,7 @@ Item { Layout.fillHeight: true implicitWidth: rowLayout.implicitWidth + rowLayout.spacing * 2 - implicitHeight: 40 + implicitHeight: Appearance.sizes.barHeight Timer { running: activePlayer?.playbackState == MprisPlaybackState.Playing diff --git a/.config/quickshell/modules/bar/Workspaces.qml b/.config/quickshell/modules/bar/Workspaces.qml index 93de99c0f..5c8b13e32 100644 --- a/.config/quickshell/modules/bar/Workspaces.qml +++ b/.config/quickshell/modules/bar/Workspaces.qml @@ -48,7 +48,7 @@ Item { } implicitWidth: rowLayout.implicitWidth + rowLayout.spacing * 2 - implicitHeight: 40 + implicitHeight: Appearance.sizes.barHeight // Scroll to switch workspaces WheelHandler { @@ -78,7 +78,7 @@ Item { spacing: 0 anchors.fill: parent - implicitHeight: 40 + implicitHeight: Appearance.sizes.barHeight Repeater { model: ConfigOptions.bar.workspaces.shown @@ -157,7 +157,7 @@ Item { spacing: 0 anchors.fill: parent - implicitHeight: 40 + implicitHeight: Appearance.sizes.barHeight Repeater { model: ConfigOptions.bar.workspaces.shown diff --git a/.config/quickshell/modules/common/Appearance.qml b/.config/quickshell/modules/common/Appearance.qml index 0036eb617..e3b16aa26 100644 --- a/.config/quickshell/modules/common/Appearance.qml +++ b/.config/quickshell/modules/common/Appearance.qml @@ -288,7 +288,9 @@ Singleton { } sizes: QtObject { - property real barHeight: 40 + property real baseBarHeight: 40 + property real barHeight: ConfigOptions.bar.cornerStyle === 1 ? + (baseBarHeight + Appearance.sizes.hyprlandGapsOut * 2) : baseBarHeight property real barCenterSideModuleWidth: ConfigOptions?.bar.verbose ? 360 : 140 property real barCenterSideModuleWidthShortened: 280 property real barCenterSideModuleWidthHellaShortened: 190 diff --git a/.config/quickshell/modules/common/ConfigOptions.qml b/.config/quickshell/modules/common/ConfigOptions.qml index 992ff5b5b..f2988cc63 100644 --- a/.config/quickshell/modules/common/ConfigOptions.qml +++ b/.config/quickshell/modules/common/ConfigOptions.qml @@ -47,6 +47,7 @@ Singleton { property QtObject bar: QtObject { property bool bottom: false // Instead of top + property int cornerStyle: 0 // 0: Hug | 1: Float | 2: Plain rectangle property bool borderless: false // true for no grouping of items property string topLeftIcon: "spark" // Options: distro, spark property bool showBackground: true diff --git a/.config/quickshell/modules/common/widgets/RoundCorner.qml b/.config/quickshell/modules/common/widgets/RoundCorner.qml index c9a2827a6..6fba4b92d 100644 --- a/.config/quickshell/modules/common/widgets/RoundCorner.qml +++ b/.config/quickshell/modules/common/widgets/RoundCorner.qml @@ -3,24 +3,21 @@ import QtQuick 2.9 Item { id: root + enum CornerEnum { TopLeft, TopRight, BottomLeft, BottomRight } + property var corner: RoundCorner.CornerEnum.TopLeft // Default to TopLeft + property int size: 25 property color color: "#000000" onColorChanged: { canvas.requestPaint(); } - - property QtObject cornerEnum: QtObject { - property int topLeft: 0 - property int topRight: 1 - property int bottomLeft: 2 - property int bottomRight: 3 + onCornerChanged: { + canvas.requestPaint(); } - property int corner: cornerEnum.topLeft // Default to TopLeft - - width: size - height: size + implicitWidth: size + implicitHeight: size Canvas { id: canvas @@ -31,22 +28,22 @@ Item { onPaint: { var ctx = getContext("2d"); var r = root.size; - + ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); switch (root.corner) { - case cornerEnum.topLeft: + case RoundCorner.CornerEnum.TopLeft: ctx.arc(r, r, r, Math.PI, 3 * Math.PI / 2); ctx.lineTo(0, 0); break; - case cornerEnum.topRight: + case RoundCorner.CornerEnum.TopRight: ctx.arc(0, r, r, 3 * Math.PI / 2, 2 * Math.PI); ctx.lineTo(r, 0); break; - case cornerEnum.bottomLeft: + case RoundCorner.CornerEnum.BottomLeft: ctx.arc(r, 0, r, Math.PI / 2, Math.PI); ctx.lineTo(0, r); break; - case cornerEnum.bottomRight: + case RoundCorner.CornerEnum.BottomRight: ctx.arc(0, 0, r, 0, Math.PI / 2); ctx.lineTo(r, r); break; diff --git a/.config/quickshell/modules/screenCorners/ScreenCorners.qml b/.config/quickshell/modules/screenCorners/ScreenCorners.qml index 3988d73d8..9a1f1a22c 100644 --- a/.config/quickshell/modules/screenCorners/ScreenCorners.qml +++ b/.config/quickshell/modules/screenCorners/ScreenCorners.qml @@ -56,28 +56,28 @@ Scope { anchors.top: parent.top anchors.left: parent.left size: Appearance.rounding.screenRounding - corner: cornerEnum.topLeft + corner: RoundCorner.CornerEnum.TopLeft } RoundCorner { id: topRightCorner anchors.top: parent.top anchors.right: parent.right size: Appearance.rounding.screenRounding - corner: cornerEnum.topRight + corner: RoundCorner.CornerEnum.TopRight } RoundCorner { id: bottomLeftCorner anchors.bottom: parent.bottom anchors.left: parent.left size: Appearance.rounding.screenRounding - corner: cornerEnum.bottomLeft + corner: RoundCorner.CornerEnum.BottomLeft } RoundCorner { id: bottomRightCorner anchors.bottom: parent.bottom anchors.right: parent.right size: Appearance.rounding.screenRounding - corner: cornerEnum.bottomRight + corner: RoundCorner.CornerEnum.BottomRight } }