bar: fix bottom mode, add corner style config

This commit is contained in:
end-4
2025-06-29 23:00:57 +02:00
parent 30c54cb7ce
commit 18ea20f1df
8 changed files with 126 additions and 60 deletions
+100 -35
View File
@@ -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
}
}
}
}
}
+2 -1
View File
@@ -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
+1 -1
View File
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
@@ -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
}
}