3r.m4zy.lol
A simple yet powerful UI overlay made for Wayland WMs built with Quickshell
wayland
qs
linux
ui
ux
1import QtQuick
2import QtQuick.Layouts
3import QtQuick.Dialogs
4
5import "suites"
6import qs.modules.launcher
7import qs.modules.settings
8
9Item {
10 id: root
11 required property QtObject config
12 required property QtObject sidebarState
13
14 required property var screen
15
16 readonly property int pad: (config && config.appearance && config.appearance.pad !== undefined)
17 ? config.appearance.pad
18 : 12
19
20 readonly property int outsidePadLeft: 5
21 readonly property int insidePadLeft: 14
22
23 readonly property int outsidePadRight: 5
24 readonly property int insidePadRight: 14
25
26 readonly property string screenName: (root.screen && root.screen.name) ? root.screen.name : ""
27
28 readonly property string edgeRaw: (root.config && root.config.sidebar)
29 ? (root.config.sidebar.edgeForScreen
30 ? root.config.sidebar.edgeForScreen(root.screenName)
31 : (root.config.sidebar.edge ?? "right"))
32 : "right"
33
34 readonly property string edge: String(edgeRaw).trim().toLowerCase()
35
36 readonly property bool isRightEdge: (root.edge === "right")
37 readonly property bool isLeftEdge: (root.edge === "left")
38
39 readonly property int outsidePad: root.isRightEdge ? root.outsidePadRight : root.outsidePadLeft
40 readonly property int insidePad: root.isRightEdge ? root.insidePadRight : root.insidePadLeft
41
42 readonly property int leftPad: root.isRightEdge ? root.insidePad : root.outsidePad
43 readonly property int rightPad: root.isRightEdge ? root.outsidePad : root.insidePad
44
45 FileDialog {
46 id: wallpaperDialog
47 title: "Select a wallpaper"
48 nameFilters: [
49 "Images (*.png *.jpg *.jpeg *.webp *.bmp *.gif)",
50 "All files (*)"
51 ]
52
53 onAccepted: {
54 const u = selectedFile.toString()
55 const path = u.startsWith("file://") ? decodeURIComponent(u.slice(7)) : u
56 if (root.config && root.config.wallpapers && root.config.wallpapers.setWallpaper)
57 root.config.wallpapers.setWallpaper(path)
58 }
59 }
60
61 AppLauncher {
62 id: launcher
63 visible: false
64 screen: root.screen
65 bg: (root.config && root.config.appearance && root.config.appearance.bg)
66 ? root.config.appearance.bg : "#121212"
67 bg2: (root.config && root.config.appearance && root.config.appearance.bg2)
68 ? root.config.appearance.bg2 : "#1A1A1A"
69 red: (root.config && root.config.appearance && root.config.appearance.accent)
70 ? root.config.appearance.accent : "#B80000"
71 text: (root.config && root.config.appearance && (root.config.appearance.fg ?? root.config.appearance.text))
72 ? (root.config.appearance.fg ?? root.config.appearance.text) : "#E6E6E6"
73 borderColor: (root.config && root.config.appearance && (root.config.appearance.borderColor ?? root.config.appearance.border))
74 ? (root.config.appearance.borderColor ?? root.config.appearance.border) : "#2A2A2A"
75 }
76
77 SettingsPanel {
78 id: settingsPanel
79 visible: false
80 screen: root.screen
81 config: root.config
82 }
83
84 Flickable {
85 id: flick
86 anchors.fill: parent
87 clip: true
88
89 boundsBehavior: Flickable.StopAtBounds
90 flickableDirection: Flickable.VerticalFlick
91 interactive: true
92
93 contentX: 0
94
95 contentWidth: width
96 contentHeight: col.implicitHeight + (root.pad * 2)
97
98 Column {
99 id: col
100
101 y: root.pad
102
103 x: root.leftPad
104 width: Math.max(0, flick.width - (root.leftPad + root.rightPad))
105
106 spacing: 10
107
108 Buttons {
109 width: col.width
110 config: root.config
111 onRequestWallpaper: wallpaperDialog.open()
112 onRequestAppLauncher: launcher.visible = !launcher.visible
113 onRequestSettings: settingsPanel.toggle()
114 }
115
116 VisualSuite { width: col.width; config: root.config; sidebarState: root.sidebarState }
117 VolumeSuite { width: col.width; config: root.config; sidebarState: root.sidebarState }
118 BluetoothSuite { width: col.width; config: root.config; sidebarState: root.sidebarState }
119 NetworkSuite { width: col.width; config: root.config; sidebarState: root.sidebarState }
120 VPNSuite { width: col.width; config: root.config; sidebarState: root.sidebarState }
121 SSHSuite { width: col.width; config: root.config; sidebarState: root.sidebarState }
122 DGPUSuite { width: col.width; config: root.config; sidebarState: root.sidebarState }
123 PowerSuite { width: col.width; config: root.config; sidebarState: root.sidebarState }
124 }
125 }
126}