Skip to content

Commit e2ce78a

Browse files
PixelKhaosPixelKhaos
committed
feat: sdfs with deformation used for flyouts/popouts
1 parent 8d4265d commit e2ce78a

3 files changed

Lines changed: 171 additions & 64 deletions

File tree

‎modules/nexus/Nexus.qml‎

Lines changed: 161 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import QtQuick
44
import QtQuick.Layouts
55
import Quickshell
66
import Quickshell.Hyprland
7+
import Caelestia.Blobs
78
import qs.components
89
import qs.services
910
import qs.config
@@ -32,6 +33,50 @@ Item {
3233
implicitWidth: implicitHeight * 1.67
3334
implicitHeight: screen.height * 0.85
3435

36+
Item {
37+
id: blobLayer
38+
39+
anchors.fill: parent
40+
41+
BlobGroup {
42+
id: blobGroup
43+
44+
color: Colours.tPalette.m3surfaceContainer
45+
smoothing: 16
46+
47+
Behavior on color {
48+
CAnim {}
49+
}
50+
}
51+
52+
// Border frame
53+
BlobInvertedRect {
54+
property real pad: 50
55+
56+
anchors.fill: parent
57+
anchors.margins: -pad
58+
group: blobGroup
59+
radius: Appearance.rounding.small
60+
borderLeft: sidebarContainer.width + 10 + pad
61+
borderTop: 10 + pad
62+
borderRight: 10 + pad
63+
borderBottom: 10 + pad
64+
}
65+
66+
BlobRect {
67+
id: notchBlob
68+
69+
group: blobGroup
70+
x: root.width - (closeBtn.width + maximizeBtn.width)
71+
y: 0
72+
implicitWidth: closeBtn.width + maximizeBtn.width
73+
implicitHeight: closeBtn.height
74+
radius: 0
75+
bottomLeftRadius: Appearance.rounding.small
76+
deformScale: 0
77+
}
78+
}
79+
3580
RowLayout {
3681
id: mainLayout
3782

@@ -47,7 +92,7 @@ Item {
4792

4893
topLeftRadius: root.rounding
4994
bottomLeftRadius: root.rounding
50-
color: Colours.tPalette.m3surfaceContainer
95+
color: "transparent"
5196

5297
Behavior on Layout.preferredWidth {
5398
NumberAnimation {
@@ -75,9 +120,8 @@ Item {
75120

76121
topRightRadius: root.rounding
77122
bottomRightRadius: root.rounding
78-
color: Colours.tPalette.m3surfaceContainer
123+
color: "transparent"
79124

80-
// Inner content
81125
Item {
82126
anchors.fill: parent
83127
anchors.margins: 10
@@ -87,7 +131,7 @@ Item {
87131

88132
anchors.fill: parent
89133
radius: Appearance.rounding.small
90-
color: Colours.tPalette.m3surface
134+
color: "transparent"
91135
clip: true
92136

93137
ContentArea {
@@ -96,64 +140,125 @@ Item {
96140
}
97141
}
98142
}
143+
}
144+
}
99145

100-
Rectangle {
101-
id: closeBtn
146+
// Overlay blobs
147+
Item {
148+
x: sidebarContainer.width
149+
y: 0
150+
width: root.width - sidebarContainer.width
151+
height: root.height
152+
clip: true
153+
154+
BlobRect {
155+
id: flyoutBlob
156+
157+
group: blobGroup
158+
x: flyout.x - sidebarContainer.width
159+
y: flyout.y
160+
implicitWidth: flyout.drawerWidth
161+
implicitHeight: flyout.drawerHeight
162+
radius: Appearance.rounding.small
163+
topLeftRadius: 0
164+
bottomLeftRadius: 0
165+
topRightRadius: flyout.y <= 0 ? 0 : Appearance.rounding.small
166+
deformScale: 0.00001
167+
stiffness: 200
168+
damping: 16
169+
}
102170

103-
property bool hovered: closeMA.containsMouse
171+
BlobRect {
172+
id: searchPopoutBlob
173+
174+
group: blobGroup
175+
x: searchPopoutContent.x - sidebarContainer.width
176+
y: searchPopoutContent.y
177+
implicitWidth: searchPopoutContent.drawerWidth
178+
implicitHeight: searchPopoutContent.drawerHeight
179+
visible: session.sidebarCollapsed
180+
radius: Appearance.rounding.normal
181+
topLeftRadius: 0
182+
topRightRadius: 0
183+
bottomLeftRadius: 0
184+
deformScale: 0.00001
185+
stiffness: 200
186+
damping: 16
187+
}
104188

105-
anchors.top: parent.top
106-
anchors.right: parent.right
107-
width: 40
108-
height: 40
189+
BlobRect {
190+
id: configPopoutBlob
191+
192+
group: blobGroup
193+
x: configPopoutContent.x - sidebarContainer.width
194+
y: 0
195+
implicitWidth: configPopoutContent.drawerWidth
196+
implicitHeight: configPopoutContent.drawerHeight
197+
visible: session.sidebarCollapsed
198+
radius: Appearance.rounding.normal
199+
topLeftRadius: 0
200+
topRightRadius: 0
201+
bottomLeftRadius: 0
202+
deformScale: 0.00001
203+
stiffness: 200
204+
damping: 16
205+
}
206+
}
109207

110-
color: Colours.tPalette.m3surfaceContainer
208+
Rectangle {
209+
id: closeBtn
111210

112-
MaterialIcon {
113-
anchors.centerIn: parent
114-
text: "close"
115-
font.pointSize: Appearance.font.size.larger
116-
color: closeBtn.hovered ? Colours.palette.m3error : Colours.palette.m3onSurfaceVariant
117-
}
211+
property bool hovered: closeMA.containsMouse
118212

119-
MouseArea {
120-
id: closeMA
213+
x: root.width - width
214+
y: 0
215+
width: 40
216+
height: 40
121217

122-
anchors.fill: parent
123-
hoverEnabled: true
124-
onClicked: root.close()
125-
}
126-
}
218+
color: "transparent"
127219

128-
Rectangle {
129-
id: maximizeBtn
220+
MaterialIcon {
221+
anchors.centerIn: parent
222+
text: "close"
223+
font.pointSize: Appearance.font.size.larger
224+
color: closeBtn.hovered ? Colours.palette.m3error : Colours.palette.m3onSurfaceVariant
225+
}
130226

131-
property bool hovered: maxMA.containsMouse
227+
MouseArea {
228+
id: closeMA
132229

133-
anchors.top: parent.top
134-
anchors.right: closeBtn.left
135-
width: 44
136-
height: 40
137-
color: Colours.tPalette.m3surfaceContainer
138-
bottomLeftRadius: Appearance.rounding.small
230+
anchors.fill: parent
231+
hoverEnabled: true
232+
onClicked: root.close()
233+
}
234+
}
139235

140-
MaterialIcon {
141-
anchors.centerIn: parent
142-
text: root.floating ? "fullscreen" : "fullscreen_exit"
143-
font.pointSize: Appearance.font.size.normal
144-
color: maximizeBtn.hovered ? Colours.palette.m3primary : Colours.palette.m3onSurfaceVariant
145-
}
236+
Rectangle {
237+
id: maximizeBtn
146238

147-
MouseArea {
148-
id: maxMA
239+
property bool hovered: maxMA.containsMouse
149240

150-
anchors.fill: parent
151-
hoverEnabled: true
152-
onClicked: {
153-
Hyprland.dispatch("togglefloating");
154-
root.floating = !root.floating;
155-
}
156-
}
241+
x: root.width - closeBtn.width - width
242+
y: 0
243+
width: 44
244+
height: 40
245+
color: "transparent"
246+
247+
MaterialIcon {
248+
anchors.centerIn: parent
249+
text: root.floating ? "fullscreen" : "fullscreen_exit"
250+
font.pointSize: Appearance.font.size.normal
251+
color: maximizeBtn.hovered ? Colours.palette.m3primary : Colours.palette.m3onSurfaceVariant
252+
}
253+
254+
MouseArea {
255+
id: maxMA
256+
257+
anchors.fill: parent
258+
hoverEnabled: true
259+
onClicked: {
260+
Hyprland.dispatch("togglefloating");
261+
root.floating = !root.floating;
157262
}
158263
}
159264
}
@@ -165,7 +270,7 @@ Item {
165270
flyoutCategory: sidebar.flyoutCategory
166271
open: session.sidebarCollapsed && sidebar.flyoutCategory !== ""
167272

168-
x: sidebarContainer.width + 8
273+
x: sidebarContainer.width
169274
y: sidebar.flyoutTop
170275

171276
onHoverEntered: sidebar.cancelFlyoutClose()
@@ -183,8 +288,9 @@ Item {
183288
}
184289
}
185290

186-
// Search popout
187291
SidebarPopout {
292+
id: searchPopoutContent
293+
188294
x: sidebarContainer.width
189295
y: 0
190296
visible: session.sidebarCollapsed
@@ -198,11 +304,13 @@ Item {
198304
}
199305
}
200306

201-
// Config popout
202307
SidebarPopout {
308+
id: configPopoutContent
309+
203310
x: sidebarContainer.width
204-
y: 50
311+
y: 0
205312
visible: session.sidebarCollapsed
313+
touchingTop: true
206314

207315
open: session.configPopoutOpen
208316
popoutWidth: 275

‎modules/nexus/SidebarFlyout.qml‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ Item {
1515
property bool open: false
1616
readonly property var currentCat: flyoutCategory !== "" ? NexusRegistry.getById(flyoutCategory) : null
1717
readonly property int childCount: currentCat?.children?.length ?? 0
18+
readonly property real drawerWidth: drawer.width
19+
readonly property real drawerHeight: drawer.height
1820

1921
property string _prevCategory: ""
2022
property var _prevCat: null
@@ -39,12 +41,10 @@ Item {
3941
property real targetHeight: (root.currentCat?.children?.length ?? 0) * 68 + 46 || 80
4042

4143
width: root.open ? targetWidth : 0
42-
height: targetHeight
44+
height: root.open ? targetHeight : drawer.height
4345
clip: true
44-
color: Colours.tPalette.m3surfaceContainer
46+
color: "transparent"
4547
radius: 0
46-
topRightRadius: Appearance.rounding.small
47-
bottomRightRadius: Appearance.rounding.small
4848

4949
Behavior on width {
5050
NumberAnimation {

‎modules/nexus/components/SidebarPopout.qml‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,24 +13,23 @@ Item {
1313
property int popoutPadding: 16
1414
property bool touchingTop: false
1515

16+
readonly property real drawerWidth: drawer.width
17+
readonly property real drawerHeight: drawer.height
18+
1619
default property alias content: contentLayout.children
1720

18-
implicitWidth: root.open ? popoutWidth + 20 : 0
19-
implicitHeight: drawer.height + 20
21+
implicitWidth: drawer.width
22+
implicitHeight: drawer.height
2023

2124
Rectangle {
2225
id: drawer
2326

24-
x: 10
25-
y: 10
2627
clip: true
2728
width: root.open ? root.popoutWidth : 0
2829
height: contentLayout.implicitHeight + root.popoutPadding * 2
2930

30-
color: Colours.tPalette.m3surfaceContainer
31+
color: "transparent"
3132
radius: 0
32-
topRightRadius: root.touchingTop ? 0 : Appearance.rounding.normal
33-
bottomRightRadius: Appearance.rounding.normal
3433

3534
Behavior on width {
3635
NumberAnimation {

0 commit comments

Comments
 (0)