refactor: use anchors instead of layouts

This commit is contained in:
2 * r + 2 * t 2025-04-29 10:29:30 +10:00
parent 46e1127b66
commit 5fd8d0f6da
11 changed files with 186 additions and 47 deletions

View file

@ -6,9 +6,18 @@ import QtQuick
Singleton {
property bool vertical: false
readonly property QtObject workspaces: QtObject {
property int shown: 10
property string style: ""
property bool occupiedBg: false
readonly property Sizes sizes: Sizes {}
readonly property Workspaces workspaces: Workspaces {}
component Sizes: QtObject {
readonly property int height: 50
readonly property int floatingGap: 10
readonly property int floatingGapLarge: 15
}
component Workspaces: QtObject {
readonly property int shown: 10
readonly property string style: ""
readonly property bool occupiedBg: false
}
}

View file

@ -5,6 +5,7 @@ import "components/workspaces"
import Quickshell
import Quickshell.Wayland
import QtQuick
import QtQuick.Controls
Variants {
model: Quickshell.screens
@ -13,46 +14,68 @@ Variants {
id: win
required property ShellScreen modelData
readonly property bool vertical: BarConfig.vertical
screen: modelData
namespace: "caelestia-bar"
color: "transparent"
width: content.width
height: content.height
anchors.top: true
anchors.left: true
anchors.right: !vertical
anchors.bottom: vertical
anchors.right: true
width: contents.implicitWidth
height: contents.implicitHeight
// Connections {
// target: BarConfig
Box {
id: contents
// function onVerticalChanged(): void {
// win.visible = false;
// if (BarConfig.vertical) {
// win.anchors.right = false;
// win.anchors.bottom = true;
// } else {
// win.anchors.bottom = false;
// win.anchors.right = true;
// }
// win.visible = true;
// }
// }
padding: [Appearance.padding.normal, Appearance.padding.large, 0, Appearance.padding.large]
// SwipeView {
// anchors.fill: parent
BoxLayout {
vertical: win.vertical
spacing: Appearance.spacing.larger
padding: [0, Appearance.padding.large]
color: Appearance.alpha(Appearance.colours.base, false)
radius: Appearance.rounding.full
OsIcon {}
Workspaces {
vertical: win.vertical
}
Clock {
vertical: win.vertical
}
ActiveWindow {
vertical: win.vertical
}
}
// }
Pills {
id: content
}
// Box {
// id: contents
// padding: [Appearance.padding.normal, Appearance.padding.large, 0, Appearance.padding.large]
// BoxLayout {
// vertical: win.vertical
// spacing: Appearance.spacing.larger
// padding: [0, Appearance.padding.large]
// color: Appearance.alpha(Appearance.colours.base, false)
// radius: Appearance.rounding.full
// OsIcon {}
// Workspaces {
// vertical: win.vertical
// }
// Clock {
// vertical: win.vertical
// }
// ActiveWindow {
// vertical: win.vertical
// }
// }
// }
}
}

105
modules/bar/Pills.qml Normal file
View file

@ -0,0 +1,105 @@
pragma ComponentBehavior: Bound
import "root:/widgets"
import "root:/config"
import "components"
import "components/workspaces"
import Quickshell
import Quickshell.Wayland
import QtQuick
import QtQuick.Controls
Item {
id: root
function get(horiz, vert) {
return BarConfig.vertical ? vert : horiz;
}
anchors.fill: parent
anchors.leftMargin: get(BarConfig.sizes.floatingGapLarge, BarConfig.sizes.floatingGap)
anchors.topMargin: get(BarConfig.sizes.floatingGap, BarConfig.sizes.floatingGapLarge)
anchors.rightMargin: get(BarConfig.sizes.floatingGapLarge, 0)
anchors.bottomMargin: get(0, BarConfig.sizes.floatingGapLarge)
width: get(-1, BarConfig.sizes.height + BarConfig.sizes.floatingGap)
height: get(BarConfig.sizes.height + BarConfig.sizes.floatingGap, -1)
Pill {
anchors.left: parent.left
OsIcon {
id: osIcon
anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
}
Workspaces {
vertical: BarConfig.vertical
anchors.left: root.get(osIcon.right, undefined)
anchors.leftMargin: root.get(Appearance.padding.smaller, 0)
anchors.top: root.get(undefined, osIcon.bottom)
anchors.topMargin: root.get(0, Appearance.padding.smaller)
anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
}
}
Pill {
anchors.horizontalCenter: root.get(parent.horizontalCenter, undefined)
anchors.verticalCenter: root.get(undefined, parent.verticalCenter)
ActiveWindow {
vertical: BarConfig.vertical
anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
}
}
Pill {
anchors.right: parent.right
Clock {
vertical: BarConfig.vertical
anchors.horizontalCenter: root.get(undefined, parent.horizontalCenter)
anchors.verticalCenter: root.get(parent.verticalCenter, undefined)
}
}
component Pill: Box {
id: pill
color: Appearance.alpha(Appearance.colours.base, false)
radius: Appearance.rounding.full
padding: BarConfig.vertical ? [Appearance.padding.large, 0] : [0, Appearance.padding.large]
anchors.top: parent.top
anchors.bottom: parent.bottom
state: BarConfig.vertical ? "vertical" : ""
states: State {
name: "vertical"
AnchorChanges {
target: pill
anchors.top: undefined
anchors.bottom: undefined
anchors.left: parent.left
anchors.right: parent.right
}
}
transitions: Transition {
AnchorAnimation {
duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.emphasized
}
}
}
}

View file

@ -5,7 +5,7 @@ import "root:/config"
import QtQuick
import QtQuick.Layouts
BoxLayout {
Box {
id: root
readonly property color colour: Appearance.colours.pink
@ -15,20 +15,20 @@ BoxLayout {
clip: true
MaterialIcon {
id: icon
text: Icons.getAppCategoryIcon(Hyprland.activeClient?.class) ?? "desktop_windows"
color: root.colour
Layout.alignment: Layout.Center
}
Label {
StyledText {
text: Hyprland.activeClient?.title ?? "Desktop"
font.pointSize: Appearance.font.size.smaller
font.family: Appearance.font.family.mono
color: root.colour
rotation: root.vertical ? 90 : 0
Layout.alignment: Layout.Center
Layout.maximumWidth: root.vertical ? this.implicitHeight : this.implicitWidth
anchors.left: icon.right
anchors.leftMargin: Appearance.padding.smaller
}
}

View file

@ -18,8 +18,8 @@ BoxLayout {
Layout.alignment: Layout.Center
}
Label {
horizontalAlignment: Label.AlignHCenter
StyledText {
horizontalAlignment: StyledText.AlignHCenter
text: root.vertical ? Time.format("hh\nmm") : Time.format("dd/MM/yy hh:mm")
font.pointSize: Appearance.font.size.smaller
font.family: Appearance.font.family.mono

View file

@ -8,7 +8,7 @@ import QtQuick.Layouts
Box {
padding: [Appearance.padding.smaller, 0]
Label {
StyledText {
text: Icons.osIcon
font.pointSize: Appearance.font.size.smaller
font.family: Appearance.font.family.mono

View file

@ -9,7 +9,7 @@ BoxLayout {
id: root
required property bool vertical
required property list<Label> workspaces
required property list<StyledText> workspaces
required property var occupied
required property BoxLayout layout

View file

@ -3,7 +3,7 @@ import "root:/services"
import "root:/config"
import QtQuick.Layouts
Label {
StyledText {
required property int index
required property BoxLayout layout
required property var occupied
@ -11,7 +11,7 @@ Label {
text: index + 1
color: BarConfig.workspaces.occupiedBg || occupied[index + 1] ? Appearance.colours.text : Appearance.colours.subtext0
horizontalAlignment: Label.AlignHCenter
horizontalAlignment: StyledText.AlignHCenter
Layout.preferredWidth: layout.homogenous && !layout.vertical ? layout.height : -1
Layout.preferredHeight: layout.homogenous && layout.vertical ? layout.width : -1

View file

@ -16,7 +16,7 @@ Item {
property bool occupiedBg: false
property bool showWindows: false
readonly property list<Label> workspaces: layout.children.filter(c => c.isWorkspace)
readonly property list<StyledText> workspaces: layout.children.filter(c => c.isWorkspace)
readonly property var occupied: Hyprland.workspaces.values.reduce((acc, curr) => {
acc[curr.id] = curr.lastIpcObject.windows > 0;
return acc;

View file

@ -1,7 +1,7 @@
import "root:/config"
import QtQuick
Label {
StyledText {
font.family: Appearance.font.family.material
font.pointSize: Appearance.font.size.larger
}

View file

@ -5,6 +5,8 @@ Text {
id: root
renderType: Text.NativeRendering
color: Appearance.colours.text
font.family: Appearance.font.family.sans
Behavior on color {
ColorAnimation {