internal: bar only vertical

The bar can only be vertical
Remove box, boxlayout and anchortext
Add StyledClippingRect
This commit is contained in:
2 * r + 2 * t 2025-05-27 10:42:08 +08:00
parent 7d1ee06807
commit 63da636144
18 changed files with 107 additions and 225 deletions

View file

@ -24,8 +24,6 @@ StyledRect {
Item {
id: child
readonly property bool vertical: true
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.right: parent.right
@ -40,7 +38,7 @@ StyledRect {
anchors.topMargin: Appearance.padding.large
}
ClippingRectangle {
StyledClippingRect {
id: workspaces
anchors.horizontalCenter: parent.horizontalCenter
@ -57,16 +55,6 @@ StyledRect {
id: workspacesInner
anchors.centerIn: parent
vertical: true
}
Behavior on color {
ColorAnimation {
duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standard
}
}
}

View file

@ -9,7 +9,6 @@ import QtQuick
Item {
id: root
readonly property bool vertical: parent?.vertical ?? false
property color colour: Colours.palette.m3primary
implicitWidth: child.implicitWidth
@ -18,13 +17,11 @@ Item {
Item {
id: child
readonly property bool vertical: root.vertical
anchors.centerIn: parent
clip: true
implicitWidth: root.vertical ? Math.max(icon.implicitWidth, text.implicitHeight) : icon.implicitWidth + text.implicitWidth + text.anchors.leftMargin
implicitHeight: root.vertical ? icon.implicitHeight + text.implicitWidth + text.anchors.topMargin : Math.max(icon.implicitHeight, text.implicitheight)
implicitWidth: Math.max(icon.implicitWidth, text.implicitHeight)
implicitHeight: icon.implicitHeight + text.implicitWidth + text.anchors.topMargin
MaterialIcon {
id: icon
@ -33,13 +30,15 @@ Item {
text: Icons.getAppCategoryIcon(Hyprland.activeClient?.wmClass, "desktop_windows")
color: root.colour
anchors.horizontalCenter: root.vertical ? parent.horizontalCenter : undefined
anchors.horizontalCenter: parent.horizontalCenter
}
AnchorText {
StyledText {
id: text
prevAnchor: icon
anchors.horizontalCenter: icon.horizontalCenter
anchors.top: icon.bottom
anchors.topMargin: Appearance.spacing.small
text: metrics.elidedText
font.pointSize: metrics.font.pointSize
@ -47,13 +46,13 @@ Item {
color: root.colour
transform: Rotation {
angle: vertical ? 90 : 0
angle: 90
origin.x: text.implicitHeight / 2
origin.y: text.implicitHeight / 2
}
width: vertical ? implicitHeight : implicitWidth
height: vertical ? implicitWidth : implicitHeight
width: implicitHeight
height: implicitWidth
}
TextMetrics {
@ -63,7 +62,7 @@ Item {
font.pointSize: Appearance.font.size.smaller
font.family: Appearance.font.family.mono
elide: Qt.ElideRight
elideWidth: root.vertical ? root.height - icon.height : root.width - icon.width
elideWidth: root.height - icon.height
}
Behavior on implicitWidth {

View file

@ -3,14 +3,12 @@ import "root:/services"
import "root:/config"
import QtQuick
Item {
Column {
id: root
readonly property bool vertical: parent?.vertical ?? false
property color colour: Colours.palette.m3tertiary
implicitWidth: vertical ? Math.max(icon.implicitWidth, text.implicitWidth) : icon.implicitWidth + text.implicitWidth + text.anchors.leftMargin
implicitHeight: vertical ? icon.implicitHeight + text.implicitHeight + text.anchors.topMargin : Math.max(icon.implicitHeight, text.implicitHeight)
spacing: Appearance.spacing.small
MaterialIcon {
id: icon
@ -18,16 +16,16 @@ Item {
text: "calendar_month"
color: root.colour
anchors.horizontalCenter: root.vertical ? parent.horizontalCenter : undefined
anchors.horizontalCenter: parent.horizontalCenter
}
AnchorText {
StyledText {
id: text
prevAnchor: icon
anchors.horizontalCenter: parent.horizontalCenter
horizontalAlignment: StyledText.AlignHCenter
text: root.vertical ? Time.format("hh\nmm") : Time.format("hh:mm • dddd, dd MMMM")
text: Time.format("hh\nmm")
font.pointSize: Appearance.font.size.smaller
font.family: Appearance.font.family.mono
color: root.colour

View file

@ -9,12 +9,11 @@ import QtQuick
Item {
id: root
readonly property bool vertical: parent?.vertical ?? false
property color colour: Colours.palette.m3secondary
clip: true
implicitWidth: vertical ? Math.max(network.implicitWidth, bluetooth.implicitWidth, devices.implicitWidth, battery.implicitWidth) : network.implicitWidth + bluetooth.implicitWidth + bluetooth.anchors.leftMargin + (repeater.count > 0 ? devices.implicitWidth + devices.anchors.leftMargin : 0) + (battery.active ? battery.implicitWidth + battery.anchors.leftMargin : 0)
implicitHeight: vertical ? network.implicitHeight + bluetooth.implicitHeight + bluetooth.anchors.topMargin + (repeater.count > 0 ? devices.implicitHeight + devices.anchors.topMargin : 0) + (battery.active ? battery.implicitHeight + battery.anchors.topMargin : 0) : Math.max(network.implicitHeight, bluetooth.implicitHeight, devices.implicitHeight, battery.implicitHeight)
implicitWidth: Math.max(network.implicitWidth, bluetooth.implicitWidth, devices.implicitWidth, battery.implicitWidth)
implicitHeight: network.implicitHeight + bluetooth.implicitHeight + bluetooth.anchors.topMargin + (repeater.count > 0 ? devices.implicitHeight + devices.anchors.topMargin : 0) + (battery.active ? battery.implicitHeight + battery.anchors.topMargin : 0)
MaterialIcon {
id: network
@ -23,31 +22,27 @@ Item {
text: Icons.getNetworkIcon(Network.active?.strength ?? 0)
color: root.colour
anchors.horizontalCenter: root.vertical ? parent.horizontalCenter : undefined
anchors.horizontalCenter: parent.horizontalCenter
}
AnchorText {
MaterialIcon {
id: bluetooth
prevAnchor: network
anchors.horizontalCenter: network.horizontalCenter
anchors.top: network.bottom
anchors.topMargin: Appearance.spacing.small
animate: true
text: Bluetooth.powered ? "bluetooth" : "bluetooth_disabled"
color: root.colour
font.family: Appearance.font.family.material
font.pointSize: Appearance.font.size.larger
}
Box {
Column {
id: devices
anchors.left: vertical ? undefined : bluetooth.right
anchors.leftMargin: vertical ? 0 : Appearance.padding.smaller
anchors.top: vertical ? bluetooth.bottom : undefined
anchors.topMargin: vertical ? Appearance.padding.smaller : 0
anchors.horizontalCenter: vertical ? bluetooth.horizontalCenter : undefined
anchors.verticalCenter: vertical ? undefined : bluetooth.verticalCenter
anchors.horizontalCenter: bluetooth.horizontalCenter
anchors.top: bluetooth.bottom
anchors.topMargin: Appearance.spacing.small
Repeater {
id: repeater
@ -69,13 +64,9 @@ Item {
Loader {
id: battery
anchors.left: root.vertical ? undefined : repeater.count > 0 ? devices.right : bluetooth.right
anchors.leftMargin: root.vertical ? 0 : Appearance.padding.smaller
anchors.top: root.vertical ? repeater.count > 0 ? devices.bottom : bluetooth.bottom : undefined
anchors.topMargin: root.vertical ? Appearance.padding.smaller : 0
anchors.horizontalCenter: root.vertical ? devices.horizontalCenter : undefined
anchors.verticalCenter: root.vertical ? undefined : devices.verticalCenter
anchors.horizontalCenter: devices.horizontalCenter
anchors.top: repeater.count > 0 ? devices.bottom : bluetooth.bottom
anchors.topMargin: Appearance.spacing.small
active: UPower.displayDevice.isLaptopBattery
asynchronous: true
@ -84,7 +75,7 @@ Item {
text: {
const device = UPower.displayDevice;
const perc = device.percentage;
const charging = device.changeRate >= 0;
const charging = device.changeRate > 0;
if (perc === 1)
return charging ? "battery_charging_full" : "battery_full";
let level = Math.floor(perc * 7);
@ -92,7 +83,7 @@ Item {
level--;
return charging ? `battery_charging_${(level + 3) * 10}` : `battery_${level}_bar`;
}
color: UPower.displayDevice.percentage > 0.2 ? root.colour : Colours.palette.m3error
color: UPower.displayDevice.percentage > 0.2 || UPower.displayDevice.changeRate > 0 ? root.colour : Colours.palette.m3error
fill: 1
}
}

View file

@ -1,5 +1,3 @@
import "root:/widgets"
import "root:/services"
import "root:/config"
import Quickshell.Services.SystemTray
import QtQuick
@ -7,17 +5,28 @@ import QtQuick
Item {
id: root
readonly property bool vertical: parent?.vertical ?? false
clip: true
visible: width > 0 && height > 0 // To avoid warnings about being visible with no size
implicitWidth: layout.implicitWidth
implicitHeight: layout.implicitHeight
BoxLayout {
Column {
id: layout
spacing: Appearance.spacing.small
add: Transition {
NumberAnimation {
properties: "scale"
from: 0
to: 1
duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standardDecel
}
}
Repeater {
model: SystemTray.items

View file

@ -4,10 +4,9 @@ import "root:/config"
import QtQuick
import QtQuick.Effects
Rectangle {
StyledRect {
id: root
required property bool vertical
required property list<Workspace> workspaces
required property Item mask
required property real maskWidth
@ -15,34 +14,26 @@ Rectangle {
required property int groupOffset
readonly property Workspace currentWs: workspaces[Hyprland.activeWsId - 1 - groupOffset] ?? null
property real leading: (vertical ? currentWs?.y : currentWs?.x) ?? 0
property real trailing: (vertical ? currentWs?.y : currentWs?.x) ?? 0
property real leading: currentWs?.y ?? 0
property real trailing: currentWs?.y ?? 0
property real currentSize: (currentWs?.size) ?? 0
property real size: Math.abs(leading - trailing) + currentSize
property real offset: Math.min(leading, trailing)
clip: true
x: vertical ? 1 : offset + 1
y: vertical ? offset + 1 : 1
implicitWidth: (vertical ? BarConfig.sizes.innerHeight : size) - 2
implicitHeight: (vertical ? size : BarConfig.sizes.innerHeight) - 2
x: 1
y: offset + 1
implicitWidth: BarConfig.sizes.innerHeight - 2
implicitHeight: size - 2
radius: BarConfig.workspaces.rounded ? Appearance.rounding.full : 0
color: Colours.palette.m3primary
Rectangle {
StyledRect {
id: base
visible: false
anchors.fill: parent
color: Colours.palette.m3onPrimary
Behavior on color {
ColorAnimation {
duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standard
}
}
}
MultiEffect {
@ -52,21 +43,12 @@ Rectangle {
maskSpreadAtMin: 1
maskThresholdMin: 0.5
x: root.vertical ? 0 : -parent.offset
y: root.vertical ? -parent.offset : 0
x: 0
y: -parent.offset
implicitWidth: root.maskWidth
implicitHeight: root.maskHeight
anchors.horizontalCenter: root.vertical ? parent.horizontalCenter : undefined
anchors.verticalCenter: root.vertical ? undefined : parent.verticalCenter
}
Behavior on color {
ColorAnimation {
duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standard
}
anchors.horizontalCenter: parent.horizontalCenter
}
Behavior on leading {

View file

@ -9,7 +9,6 @@ import QtQuick
Item {
id: root
required property bool vertical
required property list<Workspace> workspaces
required property var occupied
required property int groupOffset
@ -44,7 +43,7 @@ Item {
values: root.pills.filter(p => p)
}
Rectangle {
StyledRect {
id: rect
required property var modelData
@ -57,23 +56,14 @@ Item {
x: start?.x ?? 0
y: start?.y ?? 0
implicitWidth: root.vertical ? BarConfig.sizes.innerHeight : end?.x + end?.width - start?.x
implicitHeight: root.vertical ? end?.y + end?.height - start?.y : BarConfig.sizes.innerHeight
implicitWidth: BarConfig.sizes.innerHeight
implicitHeight: end?.y + end?.height - start?.y
anchors.horizontalCenter: root.vertical ? parent.horizontalCenter : undefined
anchors.verticalCenter: root.vertical ? undefined : parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
scale: 0
Component.onCompleted: scale = 1
Behavior on color {
ColorAnimation {
duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standard
}
}
Behavior on scale {
Anim {
easing.bezierCurve: Appearance.anim.curves.standardDecel

View file

@ -10,20 +10,19 @@ Item {
id: root
required property int index
required property bool vertical
required property var occupied
required property int groupOffset
readonly property bool isWorkspace: true // Flag for finding workspace children
// Unanimated prop for others to use as reference
readonly property real size: childrenRect[vertical ? "height" : "width"] + (hasWindows ? Appearance.padding.normal : 0)
readonly property real size: childrenRect.height + (hasWindows ? Appearance.padding.normal : 0)
readonly property int ws: groupOffset + index + 1
readonly property bool isOccupied: occupied[ws] ?? false
readonly property bool hasWindows: isOccupied && BarConfig.workspaces.showWindows
Layout.preferredWidth: childrenRect.width + (hasWindows && !vertical ? Appearance.padding.normal : 0)
Layout.preferredHeight: childrenRect.height + (hasWindows && vertical ? Appearance.padding.normal : 0)
Layout.preferredWidth: childrenRect.width
Layout.preferredHeight: size
StyledText {
id: indicator
@ -43,16 +42,25 @@ Item {
}
Loader {
id: windows
active: BarConfig.workspaces.showWindows
asynchronous: true
anchors.left: root.vertical ? undefined : indicator.right
anchors.top: root.vertical ? indicator.bottom : undefined
anchors.verticalCenter: root.vertical ? undefined : indicator.verticalCenter
anchors.horizontalCenter: root.vertical ? indicator.horizontalCenter : undefined
anchors.horizontalCenter: indicator.horizontalCenter
anchors.top: indicator.bottom
sourceComponent: Box {
vertical: root.vertical
sourceComponent: Column {
spacing: Appearance.spacing.small
add: Transition {
Anim {
properties: "scale"
from: 0
to: 1
easing.bezierCurve: Appearance.anim.curves.standardDecel
}
}
Repeater {
model: ScriptModel {

View file

@ -4,12 +4,11 @@ import "root:/widgets"
import "root:/services"
import "root:/config"
import QtQuick
import QtQuick.Layouts
Item {
id: root
property alias vertical: layout.vertical
readonly property list<Workspace> workspaces: layout.children.filter(c => c.isWorkspace).sort((w1, w2) => w1.ws - w2.ws)
readonly property var occupied: Hyprland.workspaces.values.reduce((acc, curr) => {
acc[curr.id] = curr.lastIpcObject.windows > 0;
@ -20,7 +19,7 @@ Item {
implicitWidth: layout.implicitWidth
implicitHeight: layout.implicitHeight
BoxLayout {
ColumnLayout {
id: layout
spacing: 0
@ -31,7 +30,6 @@ Item {
model: BarConfig.workspaces.shown
Workspace {
vertical: root.vertical
occupied: root.occupied
groupOffset: root.groupOffset
}
@ -46,7 +44,6 @@ Item {
anchors.fill: parent
sourceComponent: OccupiedBg {
vertical: root.vertical
workspaces: root.workspaces
occupied: root.occupied
groupOffset: root.groupOffset
@ -58,7 +55,6 @@ Item {
asynchronous: true
sourceComponent: ActiveIndicator {
vertical: root.vertical
workspaces: root.workspaces
mask: layout
maskWidth: root.width

View file

@ -98,7 +98,7 @@ Item {
}
}
ClippingRectangle {
StyledClippingRect {
id: cover
anchors.verticalCenter: parent.verticalCenter
@ -130,14 +130,6 @@ Item {
sourceSize.width: width
sourceSize.height: height
}
Behavior on color {
ColorAnimation {
duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standard
}
}
}
Column {

View file

@ -87,7 +87,7 @@ Item {
}
}
ClippingRectangle {
StyledClippingRect {
id: cover
anchors.top: parent.top
@ -118,14 +118,6 @@ Item {
sourceSize.width: width
sourceSize.height: height
}
Behavior on color {
ColorAnimation {
duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standard
}
}
}
StyledText {

View file

@ -13,7 +13,7 @@ Row {
padding: Appearance.padding.large
spacing: Appearance.spacing.large
ClippingRectangle {
StyledClippingRect {
implicitWidth: info.implicitHeight
implicitHeight: info.implicitHeight
@ -32,14 +32,6 @@ Row {
anchors.fill: parent
path: `${Paths.home}/.face`
}
Behavior on color {
ColorAnimation {
duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standard
}
}
}
Column {
@ -109,10 +101,11 @@ Row {
})
}
AnchorText {
StyledText {
id: text
prevAnchor: icon
anchors.verticalCenter: icon.verticalCenter
anchors.left: icon.right
anchors.leftMargin: icon.anchors.leftMargin
text: `: ${line.text}`
font.pointSize: Appearance.font.size.normal

View file

@ -1,17 +0,0 @@
import "root:/config"
import QtQuick
StyledText {
id: root
required property Item prevAnchor
property bool vertical: parent.vertical ?? false
anchors.left: vertical ? undefined : prevAnchor.right
anchors.leftMargin: vertical ? 0 : Appearance.padding.smaller
anchors.top: vertical ? prevAnchor.bottom : undefined
anchors.topMargin: vertical ? Appearance.padding.smaller : 0
anchors.horizontalCenter: vertical ? prevAnchor.horizontalCenter : undefined
anchors.verticalCenter: vertical ? undefined : prevAnchor.verticalCenter
}

View file

@ -1,30 +0,0 @@
import "root:/config"
import QtQuick
Grid {
property bool vertical: parent.vertical ?? false // Propagate from parent
flow: vertical ? Grid.TopToBottom : Grid.LeftToRight
spacing: Appearance.spacing.small
onVerticalChanged: {
if (vertical) {
rows = -1;
columns = 1;
} else {
columns = -1;
rows = 1;
}
}
add: Transition {
NumberAnimation {
properties: "scale"
from: 0
to: 1
duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standardDecel
}
}
}

View file

@ -1,16 +0,0 @@
import "root:/config"
import QtQuick.Layouts
GridLayout {
property bool vertical: parent.vertical ?? false // Propagate from parent
property bool homogenous: false
property int spacing: Appearance.spacing.small
flow: vertical ? GridLayout.TopToBottom : GridLayout.LeftToRight
uniformCellWidths: homogenous || vertical
uniformCellHeights: homogenous || !vertical
rows: vertical ? -1 : 1
columns: vertical ? 1 : -1
rowSpacing: spacing
columnSpacing: spacing
}

View file

@ -3,7 +3,7 @@ import "root:/services"
import "root:/config"
import QtQuick
Rectangle {
StyledRect {
id: root
readonly property alias hovered: mouse.hovered
@ -40,12 +40,4 @@ Rectangle {
easing.bezierCurve: Appearance.anim.curves.standard
}
}
Behavior on color {
ColorAnimation {
duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standard
}
}
}

View file

@ -0,0 +1,17 @@
import "root:/config"
import Quickshell.Widgets
import QtQuick
ClippingRectangle {
id: root
color: "transparent"
Behavior on color {
ColorAnimation {
duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.standard
}
}
}

View file

@ -4,8 +4,6 @@ import QtQuick
Rectangle {
id: root
property bool vertical: parent?.vertical ?? false // Convenience property for propagation to children
color: "transparent"
Behavior on color {