terra: migrate quickshell config into repo, add quickshell + opencode packages
Config was symlinked from ~/.dots/quickshell (separate dotfiles repo); now tracked here and applied via home-manager xdg.configFile. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 5
@@ -0,0 +1,80 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import Quickshell
|
||||
import Quickshell.Widgets
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
|
||||
import qs.widgets.launcher
|
||||
|
||||
Scope {
|
||||
id: root
|
||||
|
||||
Variants {
|
||||
model: Quickshell.screens
|
||||
|
||||
PanelWindow {
|
||||
required property var modelData
|
||||
screen: modelData
|
||||
|
||||
color: "transparent"
|
||||
|
||||
anchors {
|
||||
bottom: true
|
||||
left: true
|
||||
right: true
|
||||
}
|
||||
|
||||
implicitHeight: wrapper.implicitHeight
|
||||
|
||||
WrapperRectangle {
|
||||
id: wrapper
|
||||
|
||||
color: "transparent"
|
||||
|
||||
anchors.fill: parent
|
||||
|
||||
leftMargin: 12
|
||||
rightMargin: 12
|
||||
bottomMargin: 12
|
||||
|
||||
Rectangle {
|
||||
implicitHeight: 12
|
||||
|
||||
// Brightens when the Dock launcher (variant 5) opens.
|
||||
color: LauncherState.dockOpen ? "#FFF3C0" : "#FFD063"
|
||||
|
||||
Behavior on color {
|
||||
ColorAnimation {
|
||||
duration: 250
|
||||
}
|
||||
}
|
||||
|
||||
// Gentle "listening" pulse while the dock is open.
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: "#FFFFFF"
|
||||
opacity: 0
|
||||
visible: LauncherState.dockOpen
|
||||
|
||||
SequentialAnimation on opacity {
|
||||
running: LauncherState.dockOpen
|
||||
loops: Animation.Infinite
|
||||
|
||||
NumberAnimation {
|
||||
to: 0.4
|
||||
duration: 700
|
||||
easing.type: Easing.InOutSine
|
||||
}
|
||||
NumberAnimation {
|
||||
to: 0.0
|
||||
duration: 700
|
||||
easing.type: Easing.InOutSine
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import Quickshell
|
||||
import Quickshell.Widgets
|
||||
import QtQuick
|
||||
|
||||
import qs.widgets.launcher
|
||||
|
||||
Scope {
|
||||
id: root
|
||||
|
||||
Variants {
|
||||
model: Quickshell.screens
|
||||
|
||||
PanelWindow {
|
||||
id: topBar
|
||||
|
||||
required property var modelData
|
||||
screen: modelData
|
||||
|
||||
color: "transparent"
|
||||
|
||||
anchors {
|
||||
top: true
|
||||
left: true
|
||||
right: true
|
||||
}
|
||||
|
||||
implicitHeight: wrapper.implicitHeight
|
||||
|
||||
WrapperRectangle {
|
||||
id: wrapper
|
||||
|
||||
color: "transparent"
|
||||
|
||||
anchors.fill: parent
|
||||
|
||||
margin: 12
|
||||
bottomMargin: 0
|
||||
|
||||
Rectangle {
|
||||
implicitHeight: 6
|
||||
|
||||
// Brightens when the Console launcher (variant 4) opens.
|
||||
color: LauncherState.consoleOpen ? "#FFF3C0" : "#FFD063"
|
||||
|
||||
Behavior on color {
|
||||
ColorAnimation {
|
||||
duration: 250
|
||||
}
|
||||
}
|
||||
|
||||
// Gentle "listening" pulse while the console is open.
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: "#FFFFFF"
|
||||
opacity: 0
|
||||
visible: LauncherState.consoleOpen
|
||||
|
||||
SequentialAnimation on opacity {
|
||||
running: LauncherState.consoleOpen
|
||||
loops: Animation.Infinite
|
||||
|
||||
NumberAnimation {
|
||||
to: 0.4
|
||||
duration: 700
|
||||
easing.type: Easing.InOutSine
|
||||
}
|
||||
NumberAnimation {
|
||||
to: 0.0
|
||||
duration: 700
|
||||
easing.type: Easing.InOutSine
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import QtQuick
|
||||
|
||||
Rectangle {
|
||||
width: 10
|
||||
height: 10
|
||||
color: "red"
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import QtQuick
|
||||
import QtQuick.Shapes
|
||||
|
||||
Item {
|
||||
Shape {
|
||||
id: shape
|
||||
|
||||
anchors.fill: parent
|
||||
|
||||
preferredRendererType: Shape.CurveRenderer
|
||||
ShapePath {
|
||||
strokeWidth: 4
|
||||
strokeColor: "black"
|
||||
|
||||
startX: shape.width
|
||||
startY: 0
|
||||
|
||||
PathLine {
|
||||
x: 0
|
||||
y: shape.height
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import QtQuick
|
||||
import QtQuick.Shapes
|
||||
|
||||
Shape {
|
||||
preferredRendererType: Shape.CurveRenderer
|
||||
ShapePath {
|
||||
fillColor: "#FFD063"
|
||||
strokeWidth: 0
|
||||
|
||||
startX: 0
|
||||
startY: 0
|
||||
|
||||
PathLine {
|
||||
x: parent.width
|
||||
y: 0
|
||||
}
|
||||
|
||||
PathLine {
|
||||
x: parent.width - 15
|
||||
y: 38
|
||||
}
|
||||
|
||||
PathLine {
|
||||
x: parent.width - 15
|
||||
y: parent.height - 15
|
||||
}
|
||||
|
||||
PathLine {
|
||||
x: parent.width - 30
|
||||
y: parent.height
|
||||
}
|
||||
|
||||
PathLine {
|
||||
x: 0
|
||||
y: parent.height
|
||||
}
|
||||
|
||||
PathLine {
|
||||
x: 0
|
||||
y: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
import Quickshell.Widgets
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Shapes
|
||||
|
||||
import qs.widgets.decoration
|
||||
|
||||
WrapperItem {
|
||||
RowLayout {
|
||||
spacing: 6
|
||||
|
||||
Item {
|
||||
id: container
|
||||
|
||||
Layout.fillWidth: true
|
||||
|
||||
implicitHeight: 22
|
||||
|
||||
Shape {
|
||||
id: shape
|
||||
anchors.fill: container
|
||||
preferredRendererType: Shape.CurveRenderer
|
||||
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#0F1012"
|
||||
|
||||
startX: 8
|
||||
startY: 0
|
||||
|
||||
PathLine {
|
||||
x: 12
|
||||
y: 0
|
||||
}
|
||||
|
||||
PathLine {
|
||||
x: 4
|
||||
y: shape.height
|
||||
}
|
||||
|
||||
PathLine {
|
||||
x: 0
|
||||
y: shape.height
|
||||
}
|
||||
|
||||
PathLine {
|
||||
x: 8
|
||||
y: 0
|
||||
}
|
||||
}
|
||||
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#0F1012"
|
||||
|
||||
startX: 16
|
||||
startY: 0
|
||||
|
||||
PathLine {
|
||||
x: 20
|
||||
y: 0
|
||||
}
|
||||
|
||||
PathLine {
|
||||
x: 12
|
||||
y: shape.height
|
||||
}
|
||||
|
||||
PathLine {
|
||||
x: 8
|
||||
y: shape.height
|
||||
}
|
||||
|
||||
PathLine {
|
||||
x: 16
|
||||
y: 0
|
||||
}
|
||||
}
|
||||
|
||||
ShapePath {
|
||||
startX: 24
|
||||
startY: 0
|
||||
|
||||
strokeWidth: 0
|
||||
fillColor: "#0F1012"
|
||||
|
||||
PathLine {
|
||||
x: shape.width
|
||||
y: 0
|
||||
}
|
||||
|
||||
PathLine {
|
||||
x: shape.width - 8
|
||||
y: shape.height
|
||||
}
|
||||
|
||||
PathLine {
|
||||
x: 16
|
||||
y: shape.height
|
||||
}
|
||||
|
||||
PathLine {
|
||||
x: 24
|
||||
y: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
import Quickshell
|
||||
import QtQuick
|
||||
|
||||
// Non-visual, reusable app-search model shared by every launcher variant.
|
||||
// Set `search`; read `apps` (a ranked, filtered list of DesktopEntry).
|
||||
QtObject {
|
||||
id: root
|
||||
|
||||
property string search: ""
|
||||
|
||||
// `keywords`/`categories` come through as string lists, so coerce every
|
||||
// field to a string before matching (String([]) joins with commas).
|
||||
function haystack(a) {
|
||||
return (String(a.name || "") + " " + String(a.genericName || "") + " " + String(a.comment || "") + " " + String(a.keywords || "")).toLowerCase();
|
||||
}
|
||||
|
||||
readonly property var apps: {
|
||||
const all = DesktopEntries.applications.values.filter(a => !a.noDisplay);
|
||||
const q = root.search.trim().toLowerCase();
|
||||
|
||||
if (q.length === 0)
|
||||
return all.slice().sort((x, y) => String(x.name).localeCompare(String(y.name)));
|
||||
|
||||
const matches = all.filter(a => root.haystack(a).includes(q));
|
||||
|
||||
// Prefix matches on the visible name rank first, then alphabetical.
|
||||
return matches.slice().sort((x, y) => {
|
||||
const xs = String(x.name).toLowerCase().startsWith(q) ? 0 : 1;
|
||||
const ys = String(y.name).toLowerCase().startsWith(q) ? 0 : 1;
|
||||
if (xs !== ys)
|
||||
return xs - ys;
|
||||
return String(x.name).localeCompare(String(y.name));
|
||||
});
|
||||
}
|
||||
|
||||
function launch(index) {
|
||||
const list = root.apps;
|
||||
if (index >= 0 && index < list.length) {
|
||||
list[index].execute();
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,282 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import Quickshell
|
||||
import Quickshell.Hyprland
|
||||
import Quickshell.Wayland
|
||||
import Quickshell.Widgets
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
|
||||
// Variant 4 — "Console": a full-width command deck that unfolds down out of
|
||||
// the top bar, with a horizontal carousel of app cards. While open it drives
|
||||
// LauncherState.consoleOpen, which the top bar reacts to (brighten + pulse).
|
||||
Scope {
|
||||
id: root
|
||||
|
||||
property bool active: false
|
||||
|
||||
function toggle() {
|
||||
root.active = !root.active;
|
||||
}
|
||||
|
||||
// The top bar observes this to energize itself while the console is open.
|
||||
onActiveChanged: LauncherState.consoleOpen = root.active
|
||||
|
||||
GlobalShortcut {
|
||||
name: "launcher4"
|
||||
description: "Toggle app launcher (Console)"
|
||||
onPressed: root.toggle()
|
||||
}
|
||||
|
||||
PanelWindow {
|
||||
id: win
|
||||
|
||||
// Stay mapped while the collapse animation plays out.
|
||||
visible: root.active || panel.height > 1
|
||||
|
||||
WlrLayershell.layer: WlrLayer.Overlay
|
||||
WlrLayershell.keyboardFocus: root.active ? WlrKeyboardFocus.Exclusive : WlrKeyboardFocus.None
|
||||
|
||||
color: "transparent"
|
||||
|
||||
anchors {
|
||||
top: true
|
||||
left: true
|
||||
right: true
|
||||
}
|
||||
|
||||
// Sit just below the top bar strip (12px margin + 6px strip + gap).
|
||||
margins {
|
||||
top: 22
|
||||
left: 12
|
||||
right: 12
|
||||
}
|
||||
|
||||
implicitHeight: 210
|
||||
|
||||
readonly property int openHeight: 200
|
||||
|
||||
property int sel: 0
|
||||
onSelChanged: carousel.positionViewAtIndex(sel, ListView.Contain)
|
||||
|
||||
onVisibleChanged: {
|
||||
if (visible && root.active) {
|
||||
input.text = "";
|
||||
sel = 0;
|
||||
input.forceActiveFocus();
|
||||
}
|
||||
}
|
||||
|
||||
function move(delta) {
|
||||
const n = model.apps.length;
|
||||
if (n === 0)
|
||||
return;
|
||||
sel = Math.max(0, Math.min(n - 1, sel + delta));
|
||||
}
|
||||
|
||||
function run() {
|
||||
if (model.launch(sel))
|
||||
root.active = false;
|
||||
}
|
||||
|
||||
AppModel {
|
||||
id: model
|
||||
search: input.text
|
||||
}
|
||||
|
||||
// The console body, unfolding downward from the top bar.
|
||||
Rectangle {
|
||||
id: panel
|
||||
|
||||
anchors.top: parent.top
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
|
||||
clip: true
|
||||
color: "#0F1012"
|
||||
|
||||
height: root.active ? win.openHeight : 0
|
||||
|
||||
Behavior on height {
|
||||
NumberAnimation {
|
||||
duration: 220
|
||||
easing.type: root.active ? Easing.OutCubic : Easing.InCubic
|
||||
}
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
spacing: 0
|
||||
|
||||
// Accent lid — mirrors the top bar strip, reads as its extension.
|
||||
Rectangle {
|
||||
color: "#FFD063"
|
||||
implicitHeight: 4
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
// Search / command line
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
Layout.leftMargin: 18
|
||||
Layout.rightMargin: 18
|
||||
Layout.topMargin: 12
|
||||
Layout.bottomMargin: 10
|
||||
spacing: 14
|
||||
|
||||
Text {
|
||||
text: ">_"
|
||||
color: "#FFD063"
|
||||
font.family: "Digital-7 Mono"
|
||||
font.pointSize: 22
|
||||
font.bold: true
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: 30
|
||||
|
||||
TextInput {
|
||||
id: input
|
||||
anchors.fill: parent
|
||||
verticalAlignment: TextInput.AlignVCenter
|
||||
|
||||
color: "#EEEEEE"
|
||||
font.pointSize: 16
|
||||
clip: true
|
||||
|
||||
Keys.onPressed: event => {
|
||||
switch (event.key) {
|
||||
case Qt.Key_Right:
|
||||
case Qt.Key_Tab:
|
||||
win.move(1);
|
||||
event.accepted = true;
|
||||
break;
|
||||
case Qt.Key_Left:
|
||||
case Qt.Key_Backtab:
|
||||
win.move(-1);
|
||||
event.accepted = true;
|
||||
break;
|
||||
case Qt.Key_Return:
|
||||
case Qt.Key_Enter:
|
||||
win.run();
|
||||
event.accepted = true;
|
||||
break;
|
||||
case Qt.Key_Escape:
|
||||
root.active = false;
|
||||
event.accepted = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
onTextChanged: win.sel = 0
|
||||
|
||||
Text {
|
||||
anchors.fill: parent
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
visible: input.text.length === 0
|
||||
text: "launch application…"
|
||||
color: "#7A7B7D"
|
||||
font: input.font
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
text: model.apps.length + " apps"
|
||||
color: "#7A7B7D"
|
||||
font.family: "Digital-7 Mono"
|
||||
font.pointSize: 15
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
color: "#292C30"
|
||||
implicitHeight: 1
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
// Horizontal carousel of app cards.
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
|
||||
ListView {
|
||||
id: carousel
|
||||
anchors.fill: parent
|
||||
anchors.margins: 12
|
||||
|
||||
orientation: ListView.Horizontal
|
||||
clip: true
|
||||
model: model.apps
|
||||
currentIndex: win.sel
|
||||
spacing: 10
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
|
||||
delegate: MouseArea {
|
||||
id: card
|
||||
required property int index
|
||||
required property var modelData
|
||||
|
||||
width: 108
|
||||
height: carousel.height
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
|
||||
onEntered: win.sel = index
|
||||
onClicked: win.run()
|
||||
|
||||
readonly property bool selected: index === win.sel
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: card.selected ? "#292C30" : "transparent"
|
||||
border.width: 1
|
||||
border.color: card.selected ? "#FFD063" : "#292C30"
|
||||
|
||||
Behavior on border.color {
|
||||
ColorAnimation {
|
||||
duration: 120
|
||||
}
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 10
|
||||
spacing: 8
|
||||
|
||||
IconImage {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
Layout.fillHeight: true
|
||||
implicitSize: 46
|
||||
source: Quickshell.iconPath(card.modelData.icon, "application-x-executable")
|
||||
}
|
||||
|
||||
Text {
|
||||
Layout.fillWidth: true
|
||||
text: card.modelData.name
|
||||
color: card.selected ? "#FFD063" : "#EEEEEE"
|
||||
font.pointSize: 9
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
elide: Text.ElideRight
|
||||
maximumLineCount: 2
|
||||
wrapMode: Text.Wrap
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
visible: model.apps.length === 0
|
||||
text: "no matches"
|
||||
color: "#7A7B7D"
|
||||
font.family: "Digital-7 Mono"
|
||||
font.pointSize: 16
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,797 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import Quickshell
|
||||
import Quickshell.Hyprland
|
||||
import Quickshell.Wayland
|
||||
import Quickshell.Widgets
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Shapes
|
||||
|
||||
// Variant 7 — a copy of the "Slant" (V6) launcher, plus a small floating
|
||||
// power panel docked to its right with Shutdown / Reboot buttons.
|
||||
Scope {
|
||||
id: root
|
||||
|
||||
property bool active: false
|
||||
|
||||
function toggle() {
|
||||
root.active = !root.active;
|
||||
}
|
||||
|
||||
GlobalShortcut {
|
||||
name: "launcher7"
|
||||
description: "Toggle app launcher (Slant copy + power panel)"
|
||||
onPressed: root.toggle()
|
||||
}
|
||||
|
||||
PanelWindow {
|
||||
id: win
|
||||
|
||||
visible: root.active
|
||||
|
||||
WlrLayershell.layer: WlrLayer.Overlay
|
||||
WlrLayershell.keyboardFocus: WlrKeyboardFocus.Exclusive
|
||||
|
||||
// Ignore other panels' exclusive zones so the full-screen dim
|
||||
// backdrop below isn't shrunk away from the bar strips.
|
||||
exclusionMode: ExclusionMode.Ignore
|
||||
|
||||
color: "transparent"
|
||||
|
||||
anchors {
|
||||
top: true
|
||||
left: true
|
||||
right: true
|
||||
bottom: true
|
||||
}
|
||||
|
||||
property int sel: 0
|
||||
onSelChanged: list.positionViewAtIndex(sel, ListView.Contain)
|
||||
|
||||
onVisibleChanged: {
|
||||
if (visible) {
|
||||
input.text = "";
|
||||
sel = 0;
|
||||
input.forceActiveFocus();
|
||||
}
|
||||
}
|
||||
|
||||
function move(delta) {
|
||||
const n = model.apps.length;
|
||||
if (n === 0)
|
||||
return;
|
||||
sel = (sel + delta + n) % n;
|
||||
}
|
||||
|
||||
function run() {
|
||||
if (model.launch(sel))
|
||||
root.active = false;
|
||||
}
|
||||
|
||||
AppModel {
|
||||
id: model
|
||||
search: input.text
|
||||
}
|
||||
|
||||
// Dim backdrop — click to dismiss.
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: "#0A0A0C"
|
||||
opacity: 0.55
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
onClicked: root.active = false
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: frame
|
||||
anchors.centerIn: parent
|
||||
width: 620
|
||||
height: 470
|
||||
|
||||
readonly property int chamfer: 18
|
||||
readonly property int bevel: 4 // inward thickness of the bevel borders
|
||||
readonly property int chunkThick: 8 // outward thickness of the heavy border chunks
|
||||
readonly property int chunkSlant: 12 // slant of their end pieces
|
||||
readonly property int capSize: 10 // floating triangle cap in the bottom-right notch
|
||||
readonly property int smallChamfer: 6 // small bevel on the top-right & bottom-left corners
|
||||
|
||||
// Chamfered panel: rectangle with the top-left and bottom-right
|
||||
// corners cut off, filled dark with an accent edge.
|
||||
Shape {
|
||||
id: panelShape
|
||||
anchors.fill: parent
|
||||
preferredRendererType: Shape.CurveRenderer
|
||||
|
||||
ShapePath {
|
||||
fillColor: "#0F1012"
|
||||
strokeColor: "#FFD063"
|
||||
strokeWidth: 2
|
||||
|
||||
startX: frame.chamfer
|
||||
startY: 0
|
||||
// top edge to the small top-right bevel
|
||||
PathLine {
|
||||
x: panelShape.width - frame.smallChamfer
|
||||
y: 0
|
||||
}
|
||||
PathLine {
|
||||
x: panelShape.width
|
||||
y: frame.smallChamfer
|
||||
}
|
||||
PathLine {
|
||||
x: panelShape.width
|
||||
y: panelShape.height - frame.chamfer
|
||||
}
|
||||
PathLine {
|
||||
x: panelShape.width - frame.chamfer
|
||||
y: panelShape.height
|
||||
}
|
||||
// bottom edge to the small bottom-left bevel
|
||||
PathLine {
|
||||
x: frame.smallChamfer
|
||||
y: panelShape.height
|
||||
}
|
||||
PathLine {
|
||||
x: 0
|
||||
y: panelShape.height - frame.smallChamfer
|
||||
}
|
||||
PathLine {
|
||||
x: 0
|
||||
y: frame.chamfer
|
||||
}
|
||||
PathLine {
|
||||
x: frame.chamfer
|
||||
y: 0
|
||||
}
|
||||
}
|
||||
|
||||
// Thick top-left bevel border — a trapezoid whose inner ends
|
||||
// run out to the top and left edges to meet the straight borders.
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#FFD063"
|
||||
|
||||
startX: 0
|
||||
startY: frame.chamfer
|
||||
PathLine {
|
||||
x: frame.chamfer
|
||||
y: 0
|
||||
}
|
||||
PathLine {
|
||||
x: frame.chamfer + 2 * frame.bevel
|
||||
y: 0
|
||||
}
|
||||
PathLine {
|
||||
x: 0
|
||||
y: frame.chamfer + 2 * frame.bevel
|
||||
}
|
||||
PathLine {
|
||||
x: 0
|
||||
y: frame.chamfer
|
||||
}
|
||||
}
|
||||
|
||||
// Thick bottom-right bevel border — trapezoid running out to the
|
||||
// bottom and right edges.
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#FFD063"
|
||||
|
||||
startX: panelShape.width
|
||||
startY: panelShape.height - frame.chamfer
|
||||
PathLine {
|
||||
x: panelShape.width - frame.chamfer
|
||||
y: panelShape.height
|
||||
}
|
||||
PathLine {
|
||||
x: panelShape.width - frame.chamfer - 2 * frame.bevel
|
||||
y: panelShape.height
|
||||
}
|
||||
PathLine {
|
||||
x: panelShape.width
|
||||
y: panelShape.height - frame.chamfer - 2 * frame.bevel
|
||||
}
|
||||
PathLine {
|
||||
x: panelShape.width
|
||||
y: panelShape.height - frame.chamfer
|
||||
}
|
||||
}
|
||||
|
||||
// Floating triangle cap sitting in the bottom-right bevel notch,
|
||||
// detached from the panel by the width of the cut.
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#FFD063"
|
||||
|
||||
startX: panelShape.width
|
||||
startY: panelShape.height
|
||||
PathLine {
|
||||
x: panelShape.width
|
||||
y: panelShape.height - frame.capSize
|
||||
}
|
||||
PathLine {
|
||||
x: panelShape.width - frame.capSize
|
||||
y: panelShape.height
|
||||
}
|
||||
PathLine {
|
||||
x: panelShape.width
|
||||
y: panelShape.height
|
||||
}
|
||||
}
|
||||
|
||||
// Heavy outward chunk wrapping the bottom-left corner: a third of
|
||||
// the way across the bottom edge and 40px up the left edge, with
|
||||
// slanted end pieces on both arms.
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#FFD063"
|
||||
|
||||
// inner, right end of the bottom arm
|
||||
startX: panelShape.width / 3
|
||||
startY: panelShape.height
|
||||
// outer, slanted right end of the bottom arm
|
||||
PathLine {
|
||||
x: panelShape.width / 3 - frame.chunkSlant
|
||||
y: panelShape.height + frame.chunkThick
|
||||
}
|
||||
// outer bevel across the corner
|
||||
PathLine {
|
||||
x: frame.smallChamfer
|
||||
y: panelShape.height + frame.chunkThick
|
||||
}
|
||||
PathLine {
|
||||
x: -frame.chunkThick
|
||||
y: panelShape.height - frame.smallChamfer
|
||||
}
|
||||
// outer, slanted top end of the left arm
|
||||
PathLine {
|
||||
x: -frame.chunkThick
|
||||
y: panelShape.height - panelShape.height / 7 + frame.chunkSlant
|
||||
}
|
||||
// inner, top end of the left arm
|
||||
PathLine {
|
||||
x: 0
|
||||
y: panelShape.height - panelShape.height / 7
|
||||
}
|
||||
// inner bevel across the corner, then back along the bottom edge
|
||||
PathLine {
|
||||
x: 0
|
||||
y: panelShape.height - frame.smallChamfer
|
||||
}
|
||||
PathLine {
|
||||
x: frame.smallChamfer
|
||||
y: panelShape.height
|
||||
}
|
||||
PathLine {
|
||||
x: panelShape.width / 3
|
||||
y: panelShape.height
|
||||
}
|
||||
}
|
||||
|
||||
// Heavy outward chunk wrapping the top-right corner: down a third
|
||||
// of the right edge and a fifth back along the top edge, with
|
||||
// slanted end pieces on both arms.
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#FFD063"
|
||||
|
||||
// inner, bottom of the right arm
|
||||
startX: panelShape.width
|
||||
startY: panelShape.height / 3
|
||||
// outer, slanted bottom end of the right arm
|
||||
PathLine {
|
||||
x: panelShape.width + frame.chunkThick
|
||||
y: panelShape.height / 3 - frame.chunkSlant
|
||||
}
|
||||
// outer bevel across the corner
|
||||
PathLine {
|
||||
x: panelShape.width + frame.chunkThick
|
||||
y: frame.smallChamfer
|
||||
}
|
||||
PathLine {
|
||||
x: panelShape.width - frame.smallChamfer
|
||||
y: -frame.chunkThick
|
||||
}
|
||||
// outer, slanted left end of the top arm
|
||||
PathLine {
|
||||
x: panelShape.width - panelShape.width / 5 + frame.chunkSlant
|
||||
y: -frame.chunkThick
|
||||
}
|
||||
// inner, left end of the top arm
|
||||
PathLine {
|
||||
x: panelShape.width - panelShape.width / 5
|
||||
y: 0
|
||||
}
|
||||
// inner bevel across the corner, then back down the right edge
|
||||
PathLine {
|
||||
x: panelShape.width - frame.smallChamfer
|
||||
y: 0
|
||||
}
|
||||
PathLine {
|
||||
x: panelShape.width
|
||||
y: frame.smallChamfer
|
||||
}
|
||||
PathLine {
|
||||
x: panelShape.width
|
||||
y: panelShape.height / 3
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: 28
|
||||
anchors.bottomMargin: 28
|
||||
anchors.leftMargin: 30
|
||||
anchors.rightMargin: 26
|
||||
spacing: 14
|
||||
|
||||
// Header: slash-trio deco + prompt + count
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
spacing: 12
|
||||
|
||||
// Slanted slash trio, echoing the SearchBar motif.
|
||||
Shape {
|
||||
id: slashes
|
||||
implicitWidth: 26
|
||||
implicitHeight: 22
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
preferredRendererType: Shape.CurveRenderer
|
||||
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#FFD063"
|
||||
startX: 6
|
||||
startY: 0
|
||||
PathLine {
|
||||
x: 10
|
||||
y: 0
|
||||
}
|
||||
PathLine {
|
||||
x: 4
|
||||
y: slashes.height
|
||||
}
|
||||
PathLine {
|
||||
x: 0
|
||||
y: slashes.height
|
||||
}
|
||||
PathLine {
|
||||
x: 6
|
||||
y: 0
|
||||
}
|
||||
}
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#FFD063"
|
||||
startX: 15
|
||||
startY: 0
|
||||
PathLine {
|
||||
x: 19
|
||||
y: 0
|
||||
}
|
||||
PathLine {
|
||||
x: 13
|
||||
y: slashes.height
|
||||
}
|
||||
PathLine {
|
||||
x: 9
|
||||
y: slashes.height
|
||||
}
|
||||
PathLine {
|
||||
x: 15
|
||||
y: 0
|
||||
}
|
||||
}
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#FFD063"
|
||||
startX: 24
|
||||
startY: 0
|
||||
PathLine {
|
||||
x: 28
|
||||
y: 0
|
||||
}
|
||||
PathLine {
|
||||
x: 22
|
||||
y: slashes.height
|
||||
}
|
||||
PathLine {
|
||||
x: 18
|
||||
y: slashes.height
|
||||
}
|
||||
PathLine {
|
||||
x: 24
|
||||
y: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: 30
|
||||
|
||||
TextInput {
|
||||
id: input
|
||||
anchors.fill: parent
|
||||
verticalAlignment: TextInput.AlignVCenter
|
||||
|
||||
color: "#EEEEEE"
|
||||
font.family: "Digital-7 Mono"
|
||||
font.pointSize: 20
|
||||
font.letterSpacing: 1
|
||||
clip: true
|
||||
|
||||
Keys.onPressed: event => {
|
||||
switch (event.key) {
|
||||
case Qt.Key_Down:
|
||||
case Qt.Key_Tab:
|
||||
win.move(1);
|
||||
event.accepted = true;
|
||||
break;
|
||||
case Qt.Key_Up:
|
||||
case Qt.Key_Backtab:
|
||||
win.move(-1);
|
||||
event.accepted = true;
|
||||
break;
|
||||
case Qt.Key_Return:
|
||||
case Qt.Key_Enter:
|
||||
win.run();
|
||||
event.accepted = true;
|
||||
break;
|
||||
case Qt.Key_Escape:
|
||||
root.active = false;
|
||||
event.accepted = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
onTextChanged: win.sel = 0
|
||||
|
||||
Text {
|
||||
anchors.fill: parent
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
visible: input.text.length === 0
|
||||
text: "run"
|
||||
color: "#7A7B7D"
|
||||
font: input.font
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
text: model.apps.length
|
||||
color: "#7A7B7D"
|
||||
font.family: "Digital-7 Mono"
|
||||
font.pointSize: 18
|
||||
}
|
||||
}
|
||||
|
||||
// Slanted divider.
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: 4
|
||||
|
||||
Shape {
|
||||
id: divider
|
||||
anchors.fill: parent
|
||||
preferredRendererType: Shape.CurveRenderer
|
||||
|
||||
readonly property int slant: 2
|
||||
readonly property int chunk: 6
|
||||
readonly property int chunkSlant: 6
|
||||
readonly property int leftChunkLength: 2
|
||||
readonly property int rightChunkLength: 7
|
||||
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#FFD063"
|
||||
startX: divider.slant
|
||||
startY: 0
|
||||
PathLine {
|
||||
x: divider.width
|
||||
y: 0
|
||||
}
|
||||
PathLine {
|
||||
x: divider.width - divider.slant
|
||||
y: divider.height
|
||||
}
|
||||
PathLine {
|
||||
x: 0
|
||||
y: divider.height
|
||||
}
|
||||
PathLine {
|
||||
x: divider.slant
|
||||
y: 0
|
||||
}
|
||||
}
|
||||
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#FFD063"
|
||||
startX: 0
|
||||
startY: divider.height
|
||||
PathLine {
|
||||
x: divider.width / divider.leftChunkLength
|
||||
y: divider.height
|
||||
}
|
||||
PathLine {
|
||||
x: divider.width / divider.leftChunkLength - divider.chunkSlant
|
||||
y: divider.height + divider.chunk
|
||||
}
|
||||
PathLine {
|
||||
x: 0
|
||||
y: divider.height + divider.chunk
|
||||
}
|
||||
PathLine {
|
||||
x: 0
|
||||
y: divider.height
|
||||
}
|
||||
}
|
||||
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#FFD063"
|
||||
startX: divider.width
|
||||
startY: 0
|
||||
PathLine {
|
||||
x: divider.width - divider.width / divider.rightChunkLength
|
||||
y: 0
|
||||
}
|
||||
PathLine {
|
||||
x: divider.width - divider.width / divider.rightChunkLength + divider.chunkSlant
|
||||
y: -divider.chunk
|
||||
}
|
||||
PathLine {
|
||||
x: divider.width
|
||||
y: -divider.chunk
|
||||
}
|
||||
PathLine {
|
||||
x: divider.width
|
||||
y: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ListView {
|
||||
id: list
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
|
||||
clip: true
|
||||
model: model.apps
|
||||
currentIndex: win.sel
|
||||
spacing: 3
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
|
||||
delegate: MouseArea {
|
||||
id: appRow
|
||||
required property int index
|
||||
required property var modelData
|
||||
|
||||
readonly property int shear: 14
|
||||
|
||||
width: ListView.view.width
|
||||
implicitHeight: 42
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
|
||||
onEntered: win.sel = index
|
||||
onClicked: win.run()
|
||||
|
||||
readonly property bool selected: index === win.sel
|
||||
|
||||
// Sheared (parallelogram) selection highlight — the
|
||||
// rows are anything but rectangular when active.
|
||||
Shape {
|
||||
id: rowShape
|
||||
anchors.fill: parent
|
||||
visible: appRow.selected
|
||||
preferredRendererType: Shape.CurveRenderer
|
||||
|
||||
// Body
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#22262C"
|
||||
startX: appRow.shear
|
||||
startY: 0
|
||||
PathLine {
|
||||
x: rowShape.width
|
||||
y: 0
|
||||
}
|
||||
PathLine {
|
||||
x: rowShape.width - appRow.shear
|
||||
y: rowShape.height
|
||||
}
|
||||
PathLine {
|
||||
x: 0
|
||||
y: rowShape.height
|
||||
}
|
||||
PathLine {
|
||||
x: appRow.shear
|
||||
y: 0
|
||||
}
|
||||
}
|
||||
// Left accent edge
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#FFD063"
|
||||
startX: appRow.shear
|
||||
startY: 0
|
||||
PathLine {
|
||||
x: appRow.shear + 5
|
||||
y: 0
|
||||
}
|
||||
PathLine {
|
||||
x: 5
|
||||
y: rowShape.height
|
||||
}
|
||||
PathLine {
|
||||
x: 0
|
||||
y: rowShape.height
|
||||
}
|
||||
PathLine {
|
||||
x: appRow.shear
|
||||
y: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: appRow.shear + 16
|
||||
anchors.rightMargin: 12
|
||||
spacing: 12
|
||||
|
||||
IconImage {
|
||||
implicitSize: 28
|
||||
source: Quickshell.iconPath(appRow.modelData.icon, "application-x-executable")
|
||||
}
|
||||
|
||||
Text {
|
||||
text: appRow.modelData.name
|
||||
color: appRow.selected ? "#FFD063" : "#EEEEEE"
|
||||
font.pointSize: 12
|
||||
elide: Text.ElideRight
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
Text {
|
||||
text: appRow.modelData.genericName || ""
|
||||
color: "#7A7B7D"
|
||||
font.pointSize: 10
|
||||
elide: Text.ElideRight
|
||||
Layout.maximumWidth: 220
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── Power panel ────────────────────────────────────────────────────
|
||||
// Small floating panel docked to the right of the main frame, with
|
||||
// Shutdown / Reboot buttons. Same chamfered-panel idiom as the main
|
||||
// frame, kept plain since it's a small secondary surface.
|
||||
Item {
|
||||
id: powerPanel
|
||||
anchors.left: frame.right
|
||||
anchors.leftMargin: 18
|
||||
anchors.top: frame.top
|
||||
anchors.topMargin: frame.chamfer / 2
|
||||
width: 132
|
||||
height: powerColumn.implicitHeight + 32
|
||||
|
||||
readonly property int chamfer: 18
|
||||
|
||||
Shape {
|
||||
anchors.fill: parent
|
||||
preferredRendererType: Shape.CurveRenderer
|
||||
|
||||
ShapePath {
|
||||
fillColor: "#FFD063"
|
||||
strokeColor: "#FFD063"
|
||||
strokeWidth: 2
|
||||
|
||||
startX: 0
|
||||
startY: 0
|
||||
PathLine {
|
||||
x: powerPanel.width
|
||||
y: 0
|
||||
}
|
||||
PathLine {
|
||||
x: powerPanel.width
|
||||
y: powerPanel.height - powerPanel.chamfer
|
||||
}
|
||||
PathLine {
|
||||
x: powerPanel.width - powerPanel.chamfer
|
||||
y: powerPanel.height
|
||||
}
|
||||
PathLine {
|
||||
x: 0
|
||||
y: powerPanel.height
|
||||
}
|
||||
PathLine {
|
||||
x: 0
|
||||
y: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
id: powerColumn
|
||||
anchors.centerIn: parent
|
||||
width: parent.width - 24
|
||||
spacing: 10
|
||||
|
||||
Text {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
text: "POWER"
|
||||
font.family: "Digital-7 Mono"
|
||||
font.pointSize: 11
|
||||
color: "#0F1012"
|
||||
}
|
||||
|
||||
Repeater {
|
||||
model: [
|
||||
{ label: "SHUTDOWN", command: ["systemctl", "poweroff"] },
|
||||
{ label: "REBOOT", command: ["systemctl", "reboot"] }
|
||||
]
|
||||
|
||||
delegate: MouseArea {
|
||||
id: powerButton
|
||||
required property var modelData
|
||||
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: 34
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
|
||||
onClicked: Quickshell.execDetached(modelData.command)
|
||||
|
||||
readonly property int chamfer: 6
|
||||
|
||||
Shape {
|
||||
anchors.fill: parent
|
||||
preferredRendererType: Shape.CurveRenderer
|
||||
|
||||
ShapePath {
|
||||
strokeWidth: 1
|
||||
strokeColor: powerButton.containsMouse ? "#FFD063" : "#7A7B7D"
|
||||
fillColor: "#292C30"
|
||||
|
||||
startX: powerButton.chamfer
|
||||
startY: 0
|
||||
PathLine { x: powerButton.width; y: 0 }
|
||||
PathLine { x: powerButton.width; y: powerButton.height - powerButton.chamfer }
|
||||
PathLine { x: powerButton.width - powerButton.chamfer; y: powerButton.height }
|
||||
PathLine { x: 0; y: powerButton.height }
|
||||
PathLine { x: 0; y: powerButton.chamfer }
|
||||
PathLine { x: powerButton.chamfer; y: 0 }
|
||||
|
||||
Behavior on strokeColor {
|
||||
ColorAnimation {
|
||||
duration: 150
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: powerButton.modelData.label
|
||||
color: powerButton.containsMouse ? "#FFD063" : "#EEEEEE"
|
||||
font.family: "Digital-7 Mono"
|
||||
font.pointSize: 11
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,288 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import Quickshell
|
||||
import Quickshell.Hyprland
|
||||
import Quickshell.Wayland
|
||||
import Quickshell.Widgets
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
|
||||
// Variant 5 — "Dock": the Console concept mirrored to the bottom edge. A
|
||||
// full-width deck rises up out of the bottom bar, which energizes via
|
||||
// LauncherState.dockOpen while it is open.
|
||||
Scope {
|
||||
id: root
|
||||
|
||||
property bool active: false
|
||||
|
||||
function toggle() {
|
||||
root.active = !root.active;
|
||||
}
|
||||
|
||||
onActiveChanged: LauncherState.dockOpen = root.active
|
||||
|
||||
GlobalShortcut {
|
||||
name: "launcher5"
|
||||
description: "Toggle app launcher (Dock)"
|
||||
onPressed: root.toggle()
|
||||
}
|
||||
|
||||
PanelWindow {
|
||||
id: win
|
||||
|
||||
visible: root.active || panel.height > 1
|
||||
|
||||
WlrLayershell.layer: WlrLayer.Overlay
|
||||
WlrLayershell.keyboardFocus: root.active ? WlrKeyboardFocus.Exclusive : WlrKeyboardFocus.None
|
||||
|
||||
color: "transparent"
|
||||
|
||||
anchors {
|
||||
bottom: true
|
||||
left: true
|
||||
right: true
|
||||
}
|
||||
|
||||
// Sit just above the bottom bar strip (12px margin + 6px strip + gap).
|
||||
margins {
|
||||
bottom: 22
|
||||
left: 12
|
||||
right: 12
|
||||
}
|
||||
|
||||
implicitHeight: 210
|
||||
|
||||
readonly property int openHeight: 200
|
||||
|
||||
property int sel: 0
|
||||
onSelChanged: carousel.positionViewAtIndex(sel, ListView.Contain)
|
||||
|
||||
onVisibleChanged: {
|
||||
if (visible && root.active) {
|
||||
input.text = "";
|
||||
sel = 0;
|
||||
input.forceActiveFocus();
|
||||
}
|
||||
}
|
||||
|
||||
function move(delta) {
|
||||
const n = model.apps.length;
|
||||
if (n === 0)
|
||||
return;
|
||||
sel = Math.max(0, Math.min(n - 1, sel + delta));
|
||||
}
|
||||
|
||||
function run() {
|
||||
if (model.launch(sel))
|
||||
root.active = false;
|
||||
}
|
||||
|
||||
AppModel {
|
||||
id: model
|
||||
search: input.text
|
||||
}
|
||||
|
||||
// The deck, rising up from the bottom bar. Content is pinned to the
|
||||
// bottom at full height and revealed by the clipping panel as it grows.
|
||||
Rectangle {
|
||||
id: panel
|
||||
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
|
||||
clip: true
|
||||
color: "#0F1012"
|
||||
|
||||
height: root.active ? win.openHeight : 0
|
||||
|
||||
Behavior on height {
|
||||
NumberAnimation {
|
||||
duration: 220
|
||||
easing.type: root.active ? Easing.OutCubic : Easing.InCubic
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
height: win.openHeight
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
spacing: 0
|
||||
|
||||
// Horizontal carousel of app cards.
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
|
||||
ListView {
|
||||
id: carousel
|
||||
anchors.fill: parent
|
||||
anchors.margins: 12
|
||||
|
||||
orientation: ListView.Horizontal
|
||||
clip: true
|
||||
model: model.apps
|
||||
currentIndex: win.sel
|
||||
spacing: 10
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
|
||||
delegate: MouseArea {
|
||||
id: card
|
||||
required property int index
|
||||
required property var modelData
|
||||
|
||||
width: 108
|
||||
height: carousel.height
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
|
||||
onEntered: win.sel = index
|
||||
onClicked: win.run()
|
||||
|
||||
readonly property bool selected: index === win.sel
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: card.selected ? "#292C30" : "transparent"
|
||||
border.width: 1
|
||||
border.color: card.selected ? "#FFD063" : "#292C30"
|
||||
|
||||
Behavior on border.color {
|
||||
ColorAnimation {
|
||||
duration: 120
|
||||
}
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 10
|
||||
spacing: 8
|
||||
|
||||
IconImage {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
Layout.fillHeight: true
|
||||
implicitSize: 46
|
||||
source: Quickshell.iconPath(card.modelData.icon, "application-x-executable")
|
||||
}
|
||||
|
||||
Text {
|
||||
Layout.fillWidth: true
|
||||
text: card.modelData.name
|
||||
color: card.selected ? "#FFD063" : "#EEEEEE"
|
||||
font.pointSize: 9
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
elide: Text.ElideRight
|
||||
maximumLineCount: 2
|
||||
wrapMode: Text.Wrap
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
visible: model.apps.length === 0
|
||||
text: "no matches"
|
||||
color: "#7A7B7D"
|
||||
font.family: "Digital-7 Mono"
|
||||
font.pointSize: 16
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
color: "#292C30"
|
||||
implicitHeight: 1
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
// Search / command line, sitting next to the bottom bar.
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
Layout.leftMargin: 18
|
||||
Layout.rightMargin: 18
|
||||
Layout.topMargin: 10
|
||||
Layout.bottomMargin: 12
|
||||
spacing: 14
|
||||
|
||||
Text {
|
||||
text: ">_"
|
||||
color: "#FFD063"
|
||||
font.family: "Digital-7 Mono"
|
||||
font.pointSize: 22
|
||||
font.bold: true
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: 30
|
||||
|
||||
TextInput {
|
||||
id: input
|
||||
anchors.fill: parent
|
||||
verticalAlignment: TextInput.AlignVCenter
|
||||
|
||||
color: "#EEEEEE"
|
||||
font.pointSize: 16
|
||||
clip: true
|
||||
|
||||
Keys.onPressed: event => {
|
||||
switch (event.key) {
|
||||
case Qt.Key_Right:
|
||||
case Qt.Key_Tab:
|
||||
win.move(1);
|
||||
event.accepted = true;
|
||||
break;
|
||||
case Qt.Key_Left:
|
||||
case Qt.Key_Backtab:
|
||||
win.move(-1);
|
||||
event.accepted = true;
|
||||
break;
|
||||
case Qt.Key_Return:
|
||||
case Qt.Key_Enter:
|
||||
win.run();
|
||||
event.accepted = true;
|
||||
break;
|
||||
case Qt.Key_Escape:
|
||||
root.active = false;
|
||||
event.accepted = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
onTextChanged: win.sel = 0
|
||||
|
||||
Text {
|
||||
anchors.fill: parent
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
visible: input.text.length === 0
|
||||
text: "launch application…"
|
||||
color: "#7A7B7D"
|
||||
font: input.font
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
text: model.apps.length + " apps"
|
||||
color: "#7A7B7D"
|
||||
font.family: "Digital-7 Mono"
|
||||
font.pointSize: 15
|
||||
}
|
||||
}
|
||||
|
||||
// Accent lid — mirrors the bottom bar strip.
|
||||
Rectangle {
|
||||
color: "#FFD063"
|
||||
implicitHeight: 4
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,283 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import Quickshell
|
||||
import Quickshell.Hyprland
|
||||
import Quickshell.Wayland
|
||||
import Quickshell.Widgets
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
|
||||
// Variant 2 — "Grid": centered app-drawer with a dim backdrop and icon tiles.
|
||||
Scope {
|
||||
id: root
|
||||
|
||||
property bool active: false
|
||||
|
||||
function toggle() {
|
||||
root.active = !root.active;
|
||||
}
|
||||
|
||||
GlobalShortcut {
|
||||
name: "launcher2"
|
||||
description: "Toggle app launcher (Grid)"
|
||||
onPressed: root.toggle()
|
||||
}
|
||||
|
||||
PanelWindow {
|
||||
id: win
|
||||
|
||||
visible: root.active
|
||||
|
||||
WlrLayershell.layer: WlrLayer.Overlay
|
||||
WlrLayershell.keyboardFocus: WlrKeyboardFocus.Exclusive
|
||||
|
||||
// Ignore other panels' exclusive zones so the full-screen dim
|
||||
// backdrop below isn't shrunk away from the bar strips.
|
||||
exclusionMode: ExclusionMode.Ignore
|
||||
|
||||
color: "transparent"
|
||||
|
||||
anchors {
|
||||
top: true
|
||||
left: true
|
||||
right: true
|
||||
bottom: true
|
||||
}
|
||||
|
||||
property int sel: 0
|
||||
|
||||
onVisibleChanged: {
|
||||
if (visible) {
|
||||
input.text = "";
|
||||
sel = 0;
|
||||
input.forceActiveFocus();
|
||||
}
|
||||
}
|
||||
|
||||
function move(delta) {
|
||||
const n = model.apps.length;
|
||||
if (n === 0)
|
||||
return;
|
||||
const next = win.sel + delta;
|
||||
if (next < 0 || next >= n)
|
||||
return;
|
||||
win.sel = next;
|
||||
grid.positionViewAtIndex(next, GridView.Contain);
|
||||
}
|
||||
|
||||
function run() {
|
||||
if (model.launch(sel))
|
||||
root.active = false;
|
||||
}
|
||||
|
||||
AppModel {
|
||||
id: model
|
||||
search: input.text
|
||||
}
|
||||
|
||||
// Dim backdrop — click anywhere outside to dismiss.
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: "#0A0A0C"
|
||||
opacity: 0.55
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
onClicked: root.active = false
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: panel
|
||||
anchors.centerIn: parent
|
||||
width: 760
|
||||
height: 560
|
||||
|
||||
color: "#0F1012"
|
||||
border.width: 1
|
||||
border.color: "#FFD063"
|
||||
opacity: 0.98
|
||||
|
||||
// Accent corner brackets for the cyberpunk frame.
|
||||
Rectangle {
|
||||
anchors.top: parent.top
|
||||
anchors.left: parent.left
|
||||
width: 5
|
||||
height: 28
|
||||
color: "#FFD063"
|
||||
}
|
||||
Rectangle {
|
||||
anchors.top: parent.top
|
||||
anchors.right: parent.right
|
||||
width: 28
|
||||
height: 5
|
||||
color: "#FFD063"
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 20
|
||||
spacing: 14
|
||||
|
||||
// Search header
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
spacing: 12
|
||||
|
||||
Text {
|
||||
text: "APPS"
|
||||
color: "#FFD063"
|
||||
font.family: "Digital-7 Mono"
|
||||
font.pointSize: 22
|
||||
font.letterSpacing: 3
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: 34
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: "#292C30"
|
||||
border.width: 1
|
||||
border.color: input.activeFocus ? "#FFD063" : "#7A7B7D"
|
||||
|
||||
Behavior on border.color {
|
||||
ColorAnimation {
|
||||
duration: 150
|
||||
}
|
||||
}
|
||||
|
||||
TextInput {
|
||||
id: input
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: 12
|
||||
anchors.rightMargin: 12
|
||||
verticalAlignment: TextInput.AlignVCenter
|
||||
|
||||
color: "#EEEEEE"
|
||||
font.pointSize: 13
|
||||
clip: true
|
||||
|
||||
Keys.onPressed: event => {
|
||||
const cols = Math.max(1, Math.floor(grid.width / grid.cellWidth));
|
||||
switch (event.key) {
|
||||
case Qt.Key_Right:
|
||||
case Qt.Key_Tab:
|
||||
win.move(1);
|
||||
event.accepted = true;
|
||||
break;
|
||||
case Qt.Key_Left:
|
||||
case Qt.Key_Backtab:
|
||||
win.move(-1);
|
||||
event.accepted = true;
|
||||
break;
|
||||
case Qt.Key_Down:
|
||||
win.move(cols);
|
||||
event.accepted = true;
|
||||
break;
|
||||
case Qt.Key_Up:
|
||||
win.move(-cols);
|
||||
event.accepted = true;
|
||||
break;
|
||||
case Qt.Key_Return:
|
||||
case Qt.Key_Enter:
|
||||
win.run();
|
||||
event.accepted = true;
|
||||
break;
|
||||
case Qt.Key_Escape:
|
||||
root.active = false;
|
||||
event.accepted = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
onTextChanged: win.sel = 0
|
||||
|
||||
Text {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
visible: input.text.length === 0
|
||||
text: "Type to search…"
|
||||
color: "#7A7B7D"
|
||||
font: input.font
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
color: "#FFD063"
|
||||
implicitHeight: 3
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
GridView {
|
||||
id: grid
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
|
||||
clip: true
|
||||
model: model.apps
|
||||
currentIndex: win.sel
|
||||
cellWidth: 140
|
||||
cellHeight: 128
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
|
||||
delegate: MouseArea {
|
||||
id: tile
|
||||
required property int index
|
||||
required property var modelData
|
||||
|
||||
width: grid.cellWidth
|
||||
height: grid.cellHeight
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
|
||||
onEntered: win.sel = index
|
||||
onClicked: win.run()
|
||||
|
||||
readonly property bool selected: index === win.sel
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 6
|
||||
color: tile.selected ? "#292C30" : "transparent"
|
||||
border.width: 1
|
||||
border.color: tile.selected ? "#FFD063" : "transparent"
|
||||
|
||||
Behavior on border.color {
|
||||
ColorAnimation {
|
||||
duration: 120
|
||||
}
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 10
|
||||
spacing: 8
|
||||
|
||||
IconImage {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
implicitSize: 52
|
||||
source: Quickshell.iconPath(tile.modelData.icon, "application-x-executable")
|
||||
}
|
||||
|
||||
Text {
|
||||
Layout.fillWidth: true
|
||||
text: tile.modelData.name
|
||||
color: tile.selected ? "#FFD063" : "#EEEEEE"
|
||||
font.pointSize: 10
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
elide: Text.ElideRight
|
||||
maximumLineCount: 2
|
||||
wrapMode: Text.Wrap
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,677 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import Quickshell
|
||||
import Quickshell.Hyprland
|
||||
import Quickshell.Wayland
|
||||
import Quickshell.Widgets
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Shapes
|
||||
|
||||
// Variant 6 — "Slant": breaks up the rectangular layout with angled geometry —
|
||||
// a chamfered panel, a slanted header divider and sheared row highlights.
|
||||
Scope {
|
||||
id: root
|
||||
|
||||
property bool active: false
|
||||
|
||||
function toggle() {
|
||||
root.active = !root.active;
|
||||
}
|
||||
|
||||
GlobalShortcut {
|
||||
name: "launcher6"
|
||||
description: "Toggle app launcher (Slant)"
|
||||
onPressed: root.toggle()
|
||||
}
|
||||
|
||||
PanelWindow {
|
||||
id: win
|
||||
|
||||
visible: root.active
|
||||
|
||||
WlrLayershell.layer: WlrLayer.Overlay
|
||||
WlrLayershell.keyboardFocus: WlrKeyboardFocus.Exclusive
|
||||
|
||||
// Ignore other panels' exclusive zones so the full-screen dim
|
||||
// backdrop below isn't shrunk away from the bar strips.
|
||||
exclusionMode: ExclusionMode.Ignore
|
||||
|
||||
color: "transparent"
|
||||
|
||||
anchors {
|
||||
top: true
|
||||
left: true
|
||||
right: true
|
||||
bottom: true
|
||||
}
|
||||
|
||||
property int sel: 0
|
||||
onSelChanged: list.positionViewAtIndex(sel, ListView.Contain)
|
||||
|
||||
onVisibleChanged: {
|
||||
if (visible) {
|
||||
input.text = "";
|
||||
sel = 0;
|
||||
input.forceActiveFocus();
|
||||
}
|
||||
}
|
||||
|
||||
function move(delta) {
|
||||
const n = model.apps.length;
|
||||
if (n === 0)
|
||||
return;
|
||||
sel = (sel + delta + n) % n;
|
||||
}
|
||||
|
||||
function run() {
|
||||
if (model.launch(sel))
|
||||
root.active = false;
|
||||
}
|
||||
|
||||
AppModel {
|
||||
id: model
|
||||
search: input.text
|
||||
}
|
||||
|
||||
// Dim backdrop — click to dismiss.
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: "#0A0A0C"
|
||||
opacity: 0.55
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
onClicked: root.active = false
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: frame
|
||||
anchors.centerIn: parent
|
||||
width: 620
|
||||
height: 470
|
||||
|
||||
readonly property int chamfer: 18
|
||||
readonly property int bevel: 4 // inward thickness of the bevel borders
|
||||
readonly property int chunkThick: 8 // outward thickness of the heavy border chunks
|
||||
readonly property int chunkSlant: 12 // slant of their end pieces
|
||||
readonly property int capSize: 10 // floating triangle cap in the bottom-right notch
|
||||
readonly property int smallChamfer: 6 // small bevel on the top-right & bottom-left corners
|
||||
|
||||
// Chamfered panel: rectangle with the top-left and bottom-right
|
||||
// corners cut off, filled dark with an accent edge.
|
||||
Shape {
|
||||
id: panelShape
|
||||
anchors.fill: parent
|
||||
preferredRendererType: Shape.CurveRenderer
|
||||
|
||||
ShapePath {
|
||||
fillColor: "#0F1012"
|
||||
strokeColor: "#FFD063"
|
||||
strokeWidth: 2
|
||||
|
||||
startX: frame.chamfer
|
||||
startY: 0
|
||||
// top edge to the small top-right bevel
|
||||
PathLine {
|
||||
x: panelShape.width - frame.smallChamfer
|
||||
y: 0
|
||||
}
|
||||
PathLine {
|
||||
x: panelShape.width
|
||||
y: frame.smallChamfer
|
||||
}
|
||||
PathLine {
|
||||
x: panelShape.width
|
||||
y: panelShape.height - frame.chamfer
|
||||
}
|
||||
PathLine {
|
||||
x: panelShape.width - frame.chamfer
|
||||
y: panelShape.height
|
||||
}
|
||||
// bottom edge to the small bottom-left bevel
|
||||
PathLine {
|
||||
x: frame.smallChamfer
|
||||
y: panelShape.height
|
||||
}
|
||||
PathLine {
|
||||
x: 0
|
||||
y: panelShape.height - frame.smallChamfer
|
||||
}
|
||||
PathLine {
|
||||
x: 0
|
||||
y: frame.chamfer
|
||||
}
|
||||
PathLine {
|
||||
x: frame.chamfer
|
||||
y: 0
|
||||
}
|
||||
}
|
||||
|
||||
// Thick top-left bevel border — a trapezoid whose inner ends
|
||||
// run out to the top and left edges to meet the straight borders.
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#FFD063"
|
||||
|
||||
startX: 0
|
||||
startY: frame.chamfer
|
||||
PathLine {
|
||||
x: frame.chamfer
|
||||
y: 0
|
||||
}
|
||||
PathLine {
|
||||
x: frame.chamfer + 2 * frame.bevel
|
||||
y: 0
|
||||
}
|
||||
PathLine {
|
||||
x: 0
|
||||
y: frame.chamfer + 2 * frame.bevel
|
||||
}
|
||||
PathLine {
|
||||
x: 0
|
||||
y: frame.chamfer
|
||||
}
|
||||
}
|
||||
|
||||
// Thick bottom-right bevel border — trapezoid running out to the
|
||||
// bottom and right edges.
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#FFD063"
|
||||
|
||||
startX: panelShape.width
|
||||
startY: panelShape.height - frame.chamfer
|
||||
PathLine {
|
||||
x: panelShape.width - frame.chamfer
|
||||
y: panelShape.height
|
||||
}
|
||||
PathLine {
|
||||
x: panelShape.width - frame.chamfer - 2 * frame.bevel
|
||||
y: panelShape.height
|
||||
}
|
||||
PathLine {
|
||||
x: panelShape.width
|
||||
y: panelShape.height - frame.chamfer - 2 * frame.bevel
|
||||
}
|
||||
PathLine {
|
||||
x: panelShape.width
|
||||
y: panelShape.height - frame.chamfer
|
||||
}
|
||||
}
|
||||
|
||||
// Floating triangle cap sitting in the bottom-right bevel notch,
|
||||
// detached from the panel by the width of the cut.
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#FFD063"
|
||||
|
||||
startX: panelShape.width
|
||||
startY: panelShape.height
|
||||
PathLine {
|
||||
x: panelShape.width
|
||||
y: panelShape.height - frame.capSize
|
||||
}
|
||||
PathLine {
|
||||
x: panelShape.width - frame.capSize
|
||||
y: panelShape.height
|
||||
}
|
||||
PathLine {
|
||||
x: panelShape.width
|
||||
y: panelShape.height
|
||||
}
|
||||
}
|
||||
|
||||
// Heavy outward chunk wrapping the bottom-left corner: a third of
|
||||
// the way across the bottom edge and 40px up the left edge, with
|
||||
// slanted end pieces on both arms.
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#FFD063"
|
||||
|
||||
// inner, right end of the bottom arm
|
||||
startX: panelShape.width / 3
|
||||
startY: panelShape.height
|
||||
// outer, slanted right end of the bottom arm
|
||||
PathLine {
|
||||
x: panelShape.width / 3 - frame.chunkSlant
|
||||
y: panelShape.height + frame.chunkThick
|
||||
}
|
||||
// outer bevel across the corner
|
||||
PathLine {
|
||||
x: frame.smallChamfer
|
||||
y: panelShape.height + frame.chunkThick
|
||||
}
|
||||
PathLine {
|
||||
x: -frame.chunkThick
|
||||
y: panelShape.height - frame.smallChamfer
|
||||
}
|
||||
// outer, slanted top end of the left arm
|
||||
PathLine {
|
||||
x: -frame.chunkThick
|
||||
y: panelShape.height - panelShape.height / 7 + frame.chunkSlant
|
||||
}
|
||||
// inner, top end of the left arm
|
||||
PathLine {
|
||||
x: 0
|
||||
y: panelShape.height - panelShape.height / 7
|
||||
}
|
||||
// inner bevel across the corner, then back along the bottom edge
|
||||
PathLine {
|
||||
x: 0
|
||||
y: panelShape.height - frame.smallChamfer
|
||||
}
|
||||
PathLine {
|
||||
x: frame.smallChamfer
|
||||
y: panelShape.height
|
||||
}
|
||||
PathLine {
|
||||
x: panelShape.width / 3
|
||||
y: panelShape.height
|
||||
}
|
||||
}
|
||||
|
||||
// Heavy outward chunk wrapping the top-right corner: down a third
|
||||
// of the right edge and a fifth back along the top edge, with
|
||||
// slanted end pieces on both arms.
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#FFD063"
|
||||
|
||||
// inner, bottom of the right arm
|
||||
startX: panelShape.width
|
||||
startY: panelShape.height / 3
|
||||
// outer, slanted bottom end of the right arm
|
||||
PathLine {
|
||||
x: panelShape.width + frame.chunkThick
|
||||
y: panelShape.height / 3 - frame.chunkSlant
|
||||
}
|
||||
// outer bevel across the corner
|
||||
PathLine {
|
||||
x: panelShape.width + frame.chunkThick
|
||||
y: frame.smallChamfer
|
||||
}
|
||||
PathLine {
|
||||
x: panelShape.width - frame.smallChamfer
|
||||
y: -frame.chunkThick
|
||||
}
|
||||
// outer, slanted left end of the top arm
|
||||
PathLine {
|
||||
x: panelShape.width - panelShape.width / 5 + frame.chunkSlant
|
||||
y: -frame.chunkThick
|
||||
}
|
||||
// inner, left end of the top arm
|
||||
PathLine {
|
||||
x: panelShape.width - panelShape.width / 5
|
||||
y: 0
|
||||
}
|
||||
// inner bevel across the corner, then back down the right edge
|
||||
PathLine {
|
||||
x: panelShape.width - frame.smallChamfer
|
||||
y: 0
|
||||
}
|
||||
PathLine {
|
||||
x: panelShape.width
|
||||
y: frame.smallChamfer
|
||||
}
|
||||
PathLine {
|
||||
x: panelShape.width
|
||||
y: panelShape.height / 3
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: 28
|
||||
anchors.bottomMargin: 28
|
||||
anchors.leftMargin: 30
|
||||
anchors.rightMargin: 26
|
||||
spacing: 14
|
||||
|
||||
// Header: slash-trio deco + prompt + count
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
spacing: 12
|
||||
|
||||
// Slanted slash trio, echoing the SearchBar motif.
|
||||
Shape {
|
||||
id: slashes
|
||||
implicitWidth: 26
|
||||
implicitHeight: 22
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
preferredRendererType: Shape.CurveRenderer
|
||||
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#FFD063"
|
||||
startX: 6
|
||||
startY: 0
|
||||
PathLine {
|
||||
x: 10
|
||||
y: 0
|
||||
}
|
||||
PathLine {
|
||||
x: 4
|
||||
y: slashes.height
|
||||
}
|
||||
PathLine {
|
||||
x: 0
|
||||
y: slashes.height
|
||||
}
|
||||
PathLine {
|
||||
x: 6
|
||||
y: 0
|
||||
}
|
||||
}
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#FFD063"
|
||||
startX: 15
|
||||
startY: 0
|
||||
PathLine {
|
||||
x: 19
|
||||
y: 0
|
||||
}
|
||||
PathLine {
|
||||
x: 13
|
||||
y: slashes.height
|
||||
}
|
||||
PathLine {
|
||||
x: 9
|
||||
y: slashes.height
|
||||
}
|
||||
PathLine {
|
||||
x: 15
|
||||
y: 0
|
||||
}
|
||||
}
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#FFD063"
|
||||
startX: 24
|
||||
startY: 0
|
||||
PathLine {
|
||||
x: 28
|
||||
y: 0
|
||||
}
|
||||
PathLine {
|
||||
x: 22
|
||||
y: slashes.height
|
||||
}
|
||||
PathLine {
|
||||
x: 18
|
||||
y: slashes.height
|
||||
}
|
||||
PathLine {
|
||||
x: 24
|
||||
y: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: 30
|
||||
|
||||
TextInput {
|
||||
id: input
|
||||
anchors.fill: parent
|
||||
verticalAlignment: TextInput.AlignVCenter
|
||||
|
||||
color: "#EEEEEE"
|
||||
font.family: "Digital-7 Mono"
|
||||
font.pointSize: 20
|
||||
font.letterSpacing: 1
|
||||
clip: true
|
||||
|
||||
Keys.onPressed: event => {
|
||||
switch (event.key) {
|
||||
case Qt.Key_Down:
|
||||
case Qt.Key_Tab:
|
||||
win.move(1);
|
||||
event.accepted = true;
|
||||
break;
|
||||
case Qt.Key_Up:
|
||||
case Qt.Key_Backtab:
|
||||
win.move(-1);
|
||||
event.accepted = true;
|
||||
break;
|
||||
case Qt.Key_Return:
|
||||
case Qt.Key_Enter:
|
||||
win.run();
|
||||
event.accepted = true;
|
||||
break;
|
||||
case Qt.Key_Escape:
|
||||
root.active = false;
|
||||
event.accepted = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
onTextChanged: win.sel = 0
|
||||
|
||||
Text {
|
||||
anchors.fill: parent
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
visible: input.text.length === 0
|
||||
text: "run"
|
||||
color: "#7A7B7D"
|
||||
font: input.font
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
text: model.apps.length
|
||||
color: "#7A7B7D"
|
||||
font.family: "Digital-7 Mono"
|
||||
font.pointSize: 18
|
||||
}
|
||||
}
|
||||
|
||||
// Slanted divider.
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: 4
|
||||
|
||||
Shape {
|
||||
id: divider
|
||||
anchors.fill: parent
|
||||
preferredRendererType: Shape.CurveRenderer
|
||||
|
||||
readonly property int slant: 2
|
||||
readonly property int chunk: 6
|
||||
readonly property int chunkSlant: 6
|
||||
readonly property int leftChunkLength: 2
|
||||
readonly property int rightChunkLength: 7
|
||||
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#FFD063"
|
||||
startX: divider.slant
|
||||
startY: 0
|
||||
PathLine {
|
||||
x: divider.width
|
||||
y: 0
|
||||
}
|
||||
PathLine {
|
||||
x: divider.width - divider.slant
|
||||
y: divider.height
|
||||
}
|
||||
PathLine {
|
||||
x: 0
|
||||
y: divider.height
|
||||
}
|
||||
PathLine {
|
||||
x: divider.slant
|
||||
y: 0
|
||||
}
|
||||
}
|
||||
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#FFD063"
|
||||
startX: 0
|
||||
startY: divider.height
|
||||
PathLine {
|
||||
x: divider.width / divider.leftChunkLength
|
||||
y: divider.height
|
||||
}
|
||||
PathLine {
|
||||
x: divider.width / divider.leftChunkLength - divider.chunkSlant
|
||||
y: divider.height + divider.chunk
|
||||
}
|
||||
PathLine {
|
||||
x: 0
|
||||
y: divider.height + divider.chunk
|
||||
}
|
||||
PathLine {
|
||||
x: 0
|
||||
y: divider.height
|
||||
}
|
||||
}
|
||||
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#FFD063"
|
||||
startX: divider.width
|
||||
startY: 0
|
||||
PathLine {
|
||||
x: divider.width - divider.width / divider.rightChunkLength
|
||||
y: 0
|
||||
}
|
||||
PathLine {
|
||||
x: divider.width - divider.width / divider.rightChunkLength + divider.chunkSlant
|
||||
y: -divider.chunk
|
||||
}
|
||||
PathLine {
|
||||
x: divider.width
|
||||
y: -divider.chunk
|
||||
}
|
||||
PathLine {
|
||||
x: divider.width
|
||||
y: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ListView {
|
||||
id: list
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
|
||||
clip: true
|
||||
model: model.apps
|
||||
currentIndex: win.sel
|
||||
spacing: 3
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
|
||||
delegate: MouseArea {
|
||||
id: appRow
|
||||
required property int index
|
||||
required property var modelData
|
||||
|
||||
readonly property int shear: 14
|
||||
|
||||
width: ListView.view.width
|
||||
implicitHeight: 42
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
|
||||
onEntered: win.sel = index
|
||||
onClicked: win.run()
|
||||
|
||||
readonly property bool selected: index === win.sel
|
||||
|
||||
// Sheared (parallelogram) selection highlight — the
|
||||
// rows are anything but rectangular when active.
|
||||
Shape {
|
||||
id: rowShape
|
||||
anchors.fill: parent
|
||||
visible: appRow.selected
|
||||
preferredRendererType: Shape.CurveRenderer
|
||||
|
||||
// Body
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#22262C"
|
||||
startX: appRow.shear
|
||||
startY: 0
|
||||
PathLine {
|
||||
x: rowShape.width
|
||||
y: 0
|
||||
}
|
||||
PathLine {
|
||||
x: rowShape.width - appRow.shear
|
||||
y: rowShape.height
|
||||
}
|
||||
PathLine {
|
||||
x: 0
|
||||
y: rowShape.height
|
||||
}
|
||||
PathLine {
|
||||
x: appRow.shear
|
||||
y: 0
|
||||
}
|
||||
}
|
||||
// Left accent edge
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#FFD063"
|
||||
startX: appRow.shear
|
||||
startY: 0
|
||||
PathLine {
|
||||
x: appRow.shear + 5
|
||||
y: 0
|
||||
}
|
||||
PathLine {
|
||||
x: 5
|
||||
y: rowShape.height
|
||||
}
|
||||
PathLine {
|
||||
x: 0
|
||||
y: rowShape.height
|
||||
}
|
||||
PathLine {
|
||||
x: appRow.shear
|
||||
y: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: appRow.shear + 16
|
||||
anchors.rightMargin: 12
|
||||
spacing: 12
|
||||
|
||||
IconImage {
|
||||
implicitSize: 28
|
||||
source: Quickshell.iconPath(appRow.modelData.icon, "application-x-executable")
|
||||
}
|
||||
|
||||
Text {
|
||||
text: appRow.modelData.name
|
||||
color: appRow.selected ? "#FFD063" : "#EEEEEE"
|
||||
font.pointSize: 12
|
||||
elide: Text.ElideRight
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
Text {
|
||||
text: appRow.modelData.genericName || ""
|
||||
color: "#7A7B7D"
|
||||
font.pointSize: 10
|
||||
elide: Text.ElideRight
|
||||
Layout.maximumWidth: 220
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,262 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import Quickshell
|
||||
import Quickshell.Hyprland
|
||||
import Quickshell.Wayland
|
||||
import Quickshell.Widgets
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
|
||||
// Variant 3 — "Spotlight": top-center command bar with a compact result list.
|
||||
Scope {
|
||||
id: root
|
||||
|
||||
property bool active: false
|
||||
|
||||
function toggle() {
|
||||
root.active = !root.active;
|
||||
}
|
||||
|
||||
GlobalShortcut {
|
||||
name: "launcher3"
|
||||
description: "Toggle app launcher (Spotlight)"
|
||||
onPressed: root.toggle()
|
||||
}
|
||||
|
||||
PanelWindow {
|
||||
id: win
|
||||
|
||||
visible: root.active
|
||||
|
||||
WlrLayershell.layer: WlrLayer.Overlay
|
||||
WlrLayershell.keyboardFocus: WlrKeyboardFocus.Exclusive
|
||||
|
||||
// Ignore other panels' exclusive zones so the full-screen dim
|
||||
// backdrop below isn't shrunk away from the bar strips.
|
||||
exclusionMode: ExclusionMode.Ignore
|
||||
|
||||
color: "transparent"
|
||||
|
||||
anchors {
|
||||
top: true
|
||||
left: true
|
||||
right: true
|
||||
bottom: true
|
||||
}
|
||||
|
||||
readonly property int maxRows: 7
|
||||
|
||||
property int sel: 0
|
||||
onSelChanged: list.positionViewAtIndex(sel, ListView.Contain)
|
||||
|
||||
onVisibleChanged: {
|
||||
if (visible) {
|
||||
input.text = "";
|
||||
sel = 0;
|
||||
input.forceActiveFocus();
|
||||
}
|
||||
}
|
||||
|
||||
function move(delta) {
|
||||
const n = model.apps.length;
|
||||
if (n === 0)
|
||||
return;
|
||||
sel = (sel + delta + n) % n;
|
||||
}
|
||||
|
||||
function run() {
|
||||
if (model.launch(sel))
|
||||
root.active = false;
|
||||
}
|
||||
|
||||
AppModel {
|
||||
id: model
|
||||
search: input.text
|
||||
}
|
||||
|
||||
// Dim backdrop — click to dismiss.
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
onClicked: root.active = false
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
anchors.top: parent.top
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.topMargin: Math.round(parent.height * 0.16)
|
||||
width: 640
|
||||
spacing: 0
|
||||
|
||||
// Command line
|
||||
Rectangle {
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: 60
|
||||
color: "#0F1012"
|
||||
border.width: 1
|
||||
border.color: "#FFD063"
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: 18
|
||||
anchors.rightMargin: 18
|
||||
spacing: 14
|
||||
|
||||
Text {
|
||||
text: ">"
|
||||
color: "#FFD063"
|
||||
font.family: "Digital-7 Mono"
|
||||
font.pointSize: 26
|
||||
font.bold: true
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: 34
|
||||
|
||||
TextInput {
|
||||
id: input
|
||||
anchors.fill: parent
|
||||
verticalAlignment: TextInput.AlignVCenter
|
||||
|
||||
color: "#EEEEEE"
|
||||
font.pointSize: 17
|
||||
clip: true
|
||||
|
||||
Keys.onPressed: event => {
|
||||
switch (event.key) {
|
||||
case Qt.Key_Down:
|
||||
case Qt.Key_Tab:
|
||||
win.move(1);
|
||||
event.accepted = true;
|
||||
break;
|
||||
case Qt.Key_Up:
|
||||
case Qt.Key_Backtab:
|
||||
win.move(-1);
|
||||
event.accepted = true;
|
||||
break;
|
||||
case Qt.Key_Return:
|
||||
case Qt.Key_Enter:
|
||||
win.run();
|
||||
event.accepted = true;
|
||||
break;
|
||||
case Qt.Key_Escape:
|
||||
root.active = false;
|
||||
event.accepted = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
onTextChanged: win.sel = 0
|
||||
|
||||
Text {
|
||||
anchors.fill: parent
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
visible: input.text.length === 0
|
||||
text: "run application"
|
||||
color: "#7A7B7D"
|
||||
font: input.font
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
text: model.apps.length + " ▸"
|
||||
color: "#7A7B7D"
|
||||
font.family: "Digital-7 Mono"
|
||||
font.pointSize: 16
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Accent seam between the command line and results.
|
||||
Rectangle {
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: 3
|
||||
color: "#FFD063"
|
||||
visible: model.apps.length > 0
|
||||
}
|
||||
|
||||
// Results
|
||||
Rectangle {
|
||||
Layout.fillWidth: true
|
||||
// Cap the visible height to maxRows; scroll beyond that.
|
||||
implicitHeight: Math.min(model.apps.length, win.maxRows) * 44 + 2
|
||||
color: "#0F1012"
|
||||
opacity: 0.97
|
||||
visible: model.apps.length > 0
|
||||
border.width: 1
|
||||
border.color: "#292C30"
|
||||
|
||||
ListView {
|
||||
id: list
|
||||
anchors.fill: parent
|
||||
anchors.margins: 1
|
||||
|
||||
clip: true
|
||||
model: model.apps
|
||||
currentIndex: win.sel
|
||||
interactive: contentHeight > height
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
|
||||
delegate: MouseArea {
|
||||
id: entry
|
||||
required property int index
|
||||
required property var modelData
|
||||
|
||||
width: ListView.view.width
|
||||
implicitHeight: 44
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
|
||||
onEntered: win.sel = index
|
||||
onClicked: win.run()
|
||||
|
||||
readonly property bool selected: index === win.sel
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: entry.selected ? "#1A1C1F" : "transparent"
|
||||
|
||||
Rectangle {
|
||||
anchors.left: parent.left
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
width: 3
|
||||
color: "#FFD063"
|
||||
visible: entry.selected
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: 16
|
||||
anchors.rightMargin: 16
|
||||
spacing: 12
|
||||
|
||||
IconImage {
|
||||
implicitSize: 24
|
||||
source: Quickshell.iconPath(entry.modelData.icon, "application-x-executable")
|
||||
}
|
||||
|
||||
Text {
|
||||
text: entry.modelData.name
|
||||
color: entry.selected ? "#FFD063" : "#EEEEEE"
|
||||
font.pointSize: 12
|
||||
elide: Text.ElideRight
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
Text {
|
||||
text: entry.modelData.genericName || ""
|
||||
color: "#7A7B7D"
|
||||
font.pointSize: 10
|
||||
elide: Text.ElideRight
|
||||
Layout.maximumWidth: 200
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,268 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import Quickshell
|
||||
import Quickshell.Hyprland
|
||||
import Quickshell.Wayland
|
||||
import Quickshell.Widgets
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
|
||||
// Variant 1 — "Stack": left-anchored vertical list launcher.
|
||||
// Framed with the top/bottom accent strips used by the main Bar.
|
||||
Scope {
|
||||
id: root
|
||||
|
||||
property bool active: false
|
||||
|
||||
function toggle() {
|
||||
root.active = !root.active;
|
||||
}
|
||||
|
||||
GlobalShortcut {
|
||||
name: "launcher1"
|
||||
description: "Toggle app launcher (Stack)"
|
||||
onPressed: root.toggle()
|
||||
}
|
||||
|
||||
PanelWindow {
|
||||
id: win
|
||||
|
||||
visible: root.active
|
||||
|
||||
WlrLayershell.layer: WlrLayer.Overlay
|
||||
WlrLayershell.keyboardFocus: WlrKeyboardFocus.Exclusive
|
||||
|
||||
color: "transparent"
|
||||
|
||||
anchors {
|
||||
top: true
|
||||
right: true
|
||||
bottom: true
|
||||
}
|
||||
|
||||
margins {
|
||||
top: 12
|
||||
bottom: 12
|
||||
right: 12
|
||||
}
|
||||
|
||||
implicitWidth: 360
|
||||
|
||||
property int sel: 0
|
||||
onSelChanged: list.positionViewAtIndex(sel, ListView.Contain)
|
||||
|
||||
// Reset state each time the panel opens.
|
||||
onVisibleChanged: {
|
||||
if (visible) {
|
||||
input.text = "";
|
||||
sel = 0;
|
||||
input.forceActiveFocus();
|
||||
}
|
||||
}
|
||||
|
||||
function move(delta) {
|
||||
const n = model.apps.length;
|
||||
if (n === 0)
|
||||
return;
|
||||
sel = (sel + delta + n) % n;
|
||||
}
|
||||
|
||||
function run() {
|
||||
if (model.launch(sel))
|
||||
root.active = false;
|
||||
}
|
||||
|
||||
AppModel {
|
||||
id: model
|
||||
search: input.text
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
spacing: 0
|
||||
|
||||
Rectangle {
|
||||
color: "#FFD063"
|
||||
implicitHeight: 5
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
WrapperRectangle {
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
|
||||
margin: 12
|
||||
border.width: 1
|
||||
border.color: "#FFD063"
|
||||
color: "#0F1012"
|
||||
opacity: 0.95
|
||||
|
||||
ColumnLayout {
|
||||
spacing: 10
|
||||
|
||||
// Search field
|
||||
RowLayout {
|
||||
spacing: 8
|
||||
Layout.fillWidth: true
|
||||
|
||||
Text {
|
||||
text: "▚"
|
||||
color: "#FFD063"
|
||||
font.pointSize: 14
|
||||
font.bold: true
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: 26
|
||||
|
||||
TextInput {
|
||||
id: input
|
||||
anchors.fill: parent
|
||||
verticalAlignment: TextInput.AlignVCenter
|
||||
|
||||
color: "#EEEEEE"
|
||||
font.family: "Digital-7 Mono"
|
||||
font.pointSize: 16
|
||||
clip: true
|
||||
|
||||
Keys.onPressed: event => {
|
||||
switch (event.key) {
|
||||
case Qt.Key_Down:
|
||||
case Qt.Key_Tab:
|
||||
win.move(1);
|
||||
event.accepted = true;
|
||||
break;
|
||||
case Qt.Key_Up:
|
||||
case Qt.Key_Backtab:
|
||||
win.move(-1);
|
||||
event.accepted = true;
|
||||
break;
|
||||
case Qt.Key_Return:
|
||||
case Qt.Key_Enter:
|
||||
win.run();
|
||||
event.accepted = true;
|
||||
break;
|
||||
case Qt.Key_Escape:
|
||||
root.active = false;
|
||||
event.accepted = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Reset selection to top whenever the query changes.
|
||||
onTextChanged: win.sel = 0
|
||||
|
||||
Text {
|
||||
anchors.fill: parent
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
visible: input.text.length === 0
|
||||
text: "search"
|
||||
color: "#7A7B7D"
|
||||
font: input.font
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
text: model.apps.length
|
||||
color: "#7A7B7D"
|
||||
font.family: "Digital-7 Mono"
|
||||
font.pointSize: 14
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
color: "#FFD063"
|
||||
implicitHeight: 2
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
ListView {
|
||||
id: list
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
|
||||
clip: true
|
||||
model: model.apps
|
||||
currentIndex: win.sel
|
||||
interactive: true
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
spacing: 2
|
||||
|
||||
delegate: MouseArea {
|
||||
id: appRow
|
||||
required property int index
|
||||
required property var modelData
|
||||
|
||||
width: ListView.view.width
|
||||
implicitHeight: 40
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
|
||||
onEntered: win.sel = index
|
||||
onClicked: win.run()
|
||||
|
||||
readonly property bool selected: index === win.sel
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: appRow.selected ? "#292C30" : "transparent"
|
||||
|
||||
// Accent bar on the selected row.
|
||||
Rectangle {
|
||||
anchors.left: parent.left
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
width: 3
|
||||
color: "#FFD063"
|
||||
visible: appRow.selected
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: 12
|
||||
anchors.rightMargin: 8
|
||||
spacing: 10
|
||||
|
||||
IconImage {
|
||||
implicitSize: 26
|
||||
source: Quickshell.iconPath(appRow.modelData.icon, "application-x-executable")
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
spacing: 0
|
||||
Layout.fillWidth: true
|
||||
|
||||
Text {
|
||||
text: appRow.modelData.name
|
||||
color: appRow.selected ? "#FFD063" : "#EEEEEE"
|
||||
font.pointSize: 12
|
||||
elide: Text.ElideRight
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
Text {
|
||||
visible: text.length > 0
|
||||
text: appRow.modelData.genericName || appRow.modelData.comment || ""
|
||||
color: "#7A7B7D"
|
||||
font.pointSize: 9
|
||||
elide: Text.ElideRight
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
color: "#FFD063"
|
||||
implicitHeight: 5
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
pragma Singleton
|
||||
|
||||
import Quickshell
|
||||
import QtQuick
|
||||
|
||||
// Shared launcher state so other widgets (e.g. the top bar) can react to the
|
||||
// launcher without a direct dependency on it.
|
||||
Singleton {
|
||||
// True while the "Console" launcher (variant 4) is open — top bar reacts.
|
||||
property bool consoleOpen: false
|
||||
|
||||
// True while the "Dock" launcher (variant 5) is open — bottom bar reacts.
|
||||
property bool dockOpen: false
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
|
||||
RowLayout {
|
||||
id: outerLayout
|
||||
default property alias content: innerLayout.data
|
||||
|
||||
RowLayout {
|
||||
id: innerLayout
|
||||
spacing: outerLayout.spacing
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
|
||||
ColumnLayout {
|
||||
id: outerLayout
|
||||
default property alias content: innerLayout.data
|
||||
|
||||
ColumnLayout {
|
||||
id: innerLayout
|
||||
spacing: outerLayout.spacing
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillHeight: true
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,119 @@
|
||||
import Quickshell.Services.Notifications
|
||||
import Quickshell.Widgets
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
|
||||
ColumnLayout {
|
||||
id: root
|
||||
|
||||
required property Notification modelData
|
||||
|
||||
spacing: 0
|
||||
Layout.fillWidth: true
|
||||
|
||||
Rectangle {
|
||||
color: "#FFD063"
|
||||
implicitHeight: 5
|
||||
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
WrapperRectangle {
|
||||
Layout.fillWidth: true
|
||||
|
||||
margin: 12
|
||||
border.width: 1
|
||||
border.color: "#FFD063"
|
||||
color: "#0F1012"
|
||||
opacity: .9
|
||||
|
||||
ColumnLayout {
|
||||
spacing: 4
|
||||
|
||||
Layout.fillWidth: true
|
||||
|
||||
RowLayout {
|
||||
spacing: 8
|
||||
|
||||
Layout.fillWidth: true
|
||||
|
||||
IconImage {
|
||||
visible: root.modelData.appIcon !== ""
|
||||
source: root.modelData.appIcon
|
||||
implicitSize: 20
|
||||
}
|
||||
|
||||
Text {
|
||||
text: root.modelData.summary
|
||||
color: "#EEEEEE"
|
||||
font.pointSize: 14
|
||||
font.bold: true
|
||||
elide: Text.ElideRight
|
||||
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
Text {
|
||||
id: dismissButton
|
||||
|
||||
text: "×"
|
||||
color: "#FFD063"
|
||||
font.pointSize: 18
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: root.modelData.dismiss()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
visible: root.modelData.body !== ""
|
||||
text: root.modelData.body
|
||||
color: "#EEEEEE"
|
||||
font.pointSize: 12
|
||||
wrapMode: Text.Wrap
|
||||
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
visible: root.modelData.actions.length > 0
|
||||
spacing: 6
|
||||
|
||||
Layout.fillWidth: true
|
||||
|
||||
Repeater {
|
||||
model: root.modelData.actions
|
||||
|
||||
Rectangle {
|
||||
id: actionButton
|
||||
|
||||
required property NotificationAction modelData
|
||||
|
||||
color: "#292C30"
|
||||
border.width: 1
|
||||
border.color: "#FFD063"
|
||||
implicitHeight: 28
|
||||
implicitWidth: actionText.implicitWidth + 16
|
||||
|
||||
Text {
|
||||
id: actionText
|
||||
anchors.centerIn: parent
|
||||
text: actionButton.modelData.text
|
||||
color: "#EEEEEE"
|
||||
font.pointSize: 12
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: actionButton.modelData.invoke()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
import Quickshell
|
||||
import Quickshell.Services.Notifications
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
|
||||
Scope {
|
||||
id: root
|
||||
|
||||
NotificationServer {
|
||||
id: server
|
||||
|
||||
keepOnReload: true
|
||||
bodySupported: true
|
||||
bodyMarkupSupported: true
|
||||
imageSupported: true
|
||||
actionsSupported: true
|
||||
actionIconsSupported: true
|
||||
|
||||
onNotification: notification => {
|
||||
notification.tracked = true;
|
||||
|
||||
const timeout = notification.expireTimeout === 0 ? 0 : notification.expireTimeout > 0 ? notification.expireTimeout : (notification.urgency === NotificationUrgency.Critical ? 0 : 5000);
|
||||
|
||||
if (timeout <= 0)
|
||||
return;
|
||||
|
||||
let closed = false;
|
||||
notification.closed.connect(() => {
|
||||
closed = true;
|
||||
});
|
||||
|
||||
const timer = expiryTimerComponent.createObject(root, {
|
||||
interval: timeout
|
||||
});
|
||||
timer.triggered.connect(() => {
|
||||
if (!closed)
|
||||
notification.expire();
|
||||
timer.destroy();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: expiryTimerComponent
|
||||
|
||||
Timer {
|
||||
running: true
|
||||
}
|
||||
}
|
||||
|
||||
PanelWindow {
|
||||
screen: Quickshell.screens.find(s => s.name === "DP-2")
|
||||
|
||||
color: "transparent"
|
||||
|
||||
anchors {
|
||||
top: true
|
||||
right: true
|
||||
}
|
||||
|
||||
margins.top: 12
|
||||
margins.right: 12
|
||||
|
||||
implicitWidth: 340
|
||||
implicitHeight: column.implicitHeight
|
||||
|
||||
ColumnLayout {
|
||||
id: column
|
||||
anchors.fill: parent
|
||||
spacing: 8
|
||||
|
||||
Repeater {
|
||||
model: server.trackedNotifications
|
||||
|
||||
NotificationPopup {}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
import Quickshell
|
||||
import Quickshell.Services.Pipewire
|
||||
import Quickshell.Wayland
|
||||
import QtQuick
|
||||
|
||||
Scope {
|
||||
id: root
|
||||
|
||||
readonly property PwNode sink: Pipewire.defaultAudioSink
|
||||
readonly property real volume: sink?.audio?.volume ?? 0
|
||||
readonly property bool muted: sink?.audio?.muted ?? false
|
||||
readonly property real maxVolume: 1.5
|
||||
|
||||
property bool active: false
|
||||
|
||||
PwObjectTracker {
|
||||
objects: [root.sink]
|
||||
}
|
||||
|
||||
Timer {
|
||||
id: hideTimer
|
||||
interval: 1500
|
||||
onTriggered: root.active = false
|
||||
}
|
||||
|
||||
Connections {
|
||||
target: root.sink?.audio
|
||||
|
||||
function onVolumeChanged() {
|
||||
root.active = true;
|
||||
hideTimer.restart();
|
||||
}
|
||||
|
||||
function onMutedChanged() {
|
||||
root.active = true;
|
||||
hideTimer.restart();
|
||||
}
|
||||
}
|
||||
|
||||
PanelWindow {
|
||||
screen: Quickshell.screens.find(s => s.name === "DP-2")
|
||||
visible: root.active
|
||||
|
||||
WlrLayershell.layer: WlrLayer.Overlay
|
||||
exclusionMode: ExclusionMode.Ignore
|
||||
|
||||
color: "transparent"
|
||||
|
||||
anchors {
|
||||
bottom: true
|
||||
left: true
|
||||
right: true
|
||||
}
|
||||
|
||||
margins {
|
||||
bottom: 30
|
||||
left: 12
|
||||
right: 12
|
||||
}
|
||||
|
||||
implicitHeight: percentText.implicitHeight + 4 + bar.height
|
||||
|
||||
Text {
|
||||
id: percentText
|
||||
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.bottom: bar.top
|
||||
anchors.bottomMargin: 4
|
||||
|
||||
text: Math.round(Math.min(root.volume, root.maxVolume) * 100) + "%"
|
||||
color: !root.muted && root.volume > 1 ? "#FF6B4A" : "#FFD063"
|
||||
font.pointSize: 12
|
||||
font.bold: true
|
||||
}
|
||||
|
||||
Item {
|
||||
id: bar
|
||||
|
||||
anchors.bottom: parent.bottom
|
||||
width: parent.width
|
||||
height: 6
|
||||
|
||||
Rectangle {
|
||||
anchors.centerIn: parent
|
||||
implicitHeight: 6
|
||||
width: parent.width * Math.min(root.volume, root.maxVolume) / root.maxVolume
|
||||
color: "#FF6B4A"
|
||||
visible: !root.muted && root.volume > 1
|
||||
|
||||
Behavior on width {
|
||||
NumberAnimation {
|
||||
duration: 150
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors.centerIn: parent
|
||||
implicitHeight: 6
|
||||
width: parent.width * Math.min(root.volume, 1) / root.maxVolume
|
||||
color: root.muted ? "#7A7B7D" : "#FFD063"
|
||||
|
||||
Behavior on width {
|
||||
NumberAnimation {
|
||||
duration: 150
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,476 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import Quickshell
|
||||
import Quickshell.Hyprland
|
||||
import Quickshell.Services.Pipewire
|
||||
import Quickshell.Wayland
|
||||
import Quickshell.Widgets
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Shapes
|
||||
|
||||
// A vertical sidebar carrying the "Slant" (launcher V6) visual language —
|
||||
// chamfered panel, thick trapezoid bevel accents, an outward bracket, a
|
||||
// floating triangle cap and a slanted divider. Right-anchored, mirrored.
|
||||
Scope {
|
||||
id: root
|
||||
|
||||
property bool active: true
|
||||
|
||||
function toggle() {
|
||||
root.active = !root.active;
|
||||
}
|
||||
|
||||
GlobalShortcut {
|
||||
name: "sidebar"
|
||||
description: "Toggle the Slant sidebar"
|
||||
onPressed: root.toggle()
|
||||
}
|
||||
|
||||
readonly property PwNode sink: Pipewire.defaultAudioSink
|
||||
readonly property real volume: sink?.audio?.volume ?? 0
|
||||
readonly property bool muted: sink?.audio?.muted ?? false
|
||||
readonly property real maxVolume: 1.5
|
||||
|
||||
PwObjectTracker {
|
||||
objects: [root.sink]
|
||||
}
|
||||
|
||||
PanelWindow {
|
||||
id: win
|
||||
|
||||
visible: root.active
|
||||
|
||||
color: "transparent"
|
||||
|
||||
anchors {
|
||||
top: true
|
||||
right: true
|
||||
bottom: true
|
||||
}
|
||||
|
||||
margins {
|
||||
top: 8
|
||||
}
|
||||
|
||||
// Frame width plus the gutter the outward bracket grows into.
|
||||
readonly property int pad: 10
|
||||
implicitWidth: 72 + 2 * pad
|
||||
|
||||
Item {
|
||||
id: frame
|
||||
|
||||
// Inset so the outward bracket has room in the gutter.
|
||||
anchors.fill: parent
|
||||
anchors.margins: win.pad
|
||||
|
||||
readonly property int chamfer: 18 // big cut corners (top-right, bottom-left)
|
||||
readonly property int smallChamfer: 7 // small bevel (top-left, bottom-right)
|
||||
readonly property int bevel: 4 // inward thickness of the trapezoid accents
|
||||
readonly property int chunkThick: 7 // outward thickness of the bracket
|
||||
readonly property int chunkSlant: 10 // slant of the bracket end pieces
|
||||
readonly property int capSize: 10 // floating triangle cap
|
||||
readonly property int armSide: 58 // bracket arm down the left edge
|
||||
readonly property int armTop: 34 // bracket arm along the top edge
|
||||
|
||||
Shape {
|
||||
id: panelShape
|
||||
anchors.fill: parent
|
||||
preferredRendererType: Shape.CurveRenderer
|
||||
|
||||
// Panel: big chamfers on top-right & bottom-left, small bevels
|
||||
// on top-left & bottom-right (mirror of the left-anchored panel).
|
||||
ShapePath {
|
||||
fillColor: "#0F1012"
|
||||
strokeColor: "#FFD063"
|
||||
strokeWidth: 2
|
||||
|
||||
startX: panelShape.width - frame.chamfer
|
||||
startY: 0
|
||||
PathLine {
|
||||
x: frame.smallChamfer
|
||||
y: 0
|
||||
}
|
||||
PathLine {
|
||||
x: 0
|
||||
y: frame.smallChamfer
|
||||
}
|
||||
PathLine {
|
||||
x: 0
|
||||
y: panelShape.height - frame.chamfer
|
||||
}
|
||||
PathLine {
|
||||
x: frame.chamfer
|
||||
y: panelShape.height
|
||||
}
|
||||
PathLine {
|
||||
x: panelShape.width - frame.smallChamfer
|
||||
y: panelShape.height
|
||||
}
|
||||
PathLine {
|
||||
x: panelShape.width
|
||||
y: panelShape.height - frame.smallChamfer
|
||||
}
|
||||
PathLine {
|
||||
x: panelShape.width
|
||||
y: frame.chamfer
|
||||
}
|
||||
PathLine {
|
||||
x: panelShape.width - frame.chamfer
|
||||
y: 0
|
||||
}
|
||||
}
|
||||
|
||||
// Thick top-right bevel accent (trapezoid to the edges).
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#FFD063"
|
||||
|
||||
startX: panelShape.width
|
||||
startY: frame.chamfer
|
||||
PathLine {
|
||||
x: panelShape.width - frame.chamfer
|
||||
y: 0
|
||||
}
|
||||
PathLine {
|
||||
x: panelShape.width - frame.chamfer - 2 * frame.bevel
|
||||
y: 0
|
||||
}
|
||||
PathLine {
|
||||
x: panelShape.width
|
||||
y: frame.chamfer + 2 * frame.bevel
|
||||
}
|
||||
PathLine {
|
||||
x: panelShape.width
|
||||
y: frame.chamfer
|
||||
}
|
||||
}
|
||||
|
||||
// Thick bottom-left bevel accent.
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#FFD063"
|
||||
|
||||
startX: 0
|
||||
startY: panelShape.height - frame.chamfer
|
||||
PathLine {
|
||||
x: frame.chamfer
|
||||
y: panelShape.height
|
||||
}
|
||||
PathLine {
|
||||
x: frame.chamfer + 2 * frame.bevel
|
||||
y: panelShape.height
|
||||
}
|
||||
PathLine {
|
||||
x: 0
|
||||
y: panelShape.height - frame.chamfer - 2 * frame.bevel
|
||||
}
|
||||
PathLine {
|
||||
x: 0
|
||||
y: panelShape.height - frame.chamfer
|
||||
}
|
||||
}
|
||||
|
||||
// Floating triangle cap in the bottom-left notch.
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#FFD063"
|
||||
|
||||
startX: 0
|
||||
startY: panelShape.height
|
||||
PathLine {
|
||||
x: 0
|
||||
y: panelShape.height - frame.capSize
|
||||
}
|
||||
PathLine {
|
||||
x: frame.capSize
|
||||
y: panelShape.height
|
||||
}
|
||||
PathLine {
|
||||
x: 0
|
||||
y: panelShape.height
|
||||
}
|
||||
}
|
||||
|
||||
// Outward bracket wrapping the top-left corner: down the left
|
||||
// edge and along the top edge, with slanted ends and a beveled
|
||||
// corner following the small chamfer.
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#FFD063"
|
||||
|
||||
startX: 0
|
||||
startY: frame.armSide
|
||||
PathLine {
|
||||
x: -frame.chunkThick
|
||||
y: frame.armSide - frame.chunkSlant
|
||||
}
|
||||
PathLine {
|
||||
x: -frame.chunkThick
|
||||
y: frame.smallChamfer
|
||||
}
|
||||
PathLine {
|
||||
x: frame.smallChamfer
|
||||
y: -frame.chunkThick
|
||||
}
|
||||
PathLine {
|
||||
x: frame.armTop - frame.chunkSlant
|
||||
y: -frame.chunkThick
|
||||
}
|
||||
PathLine {
|
||||
x: frame.armTop
|
||||
y: 0
|
||||
}
|
||||
PathLine {
|
||||
x: frame.smallChamfer
|
||||
y: 0
|
||||
}
|
||||
PathLine {
|
||||
x: 0
|
||||
y: frame.smallChamfer
|
||||
}
|
||||
PathLine {
|
||||
x: 0
|
||||
y: frame.armSide
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── Content ────────────────────────────────────────────────────
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: 16
|
||||
anchors.bottomMargin: 16
|
||||
anchors.leftMargin: 10
|
||||
anchors.rightMargin: 8
|
||||
spacing: 10
|
||||
|
||||
// Clock — Digital-7, hh over mm
|
||||
Text {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
text: Qt.formatDateTime(clock.date, "hh\nmm")
|
||||
font.family: "Digital-7 Mono"
|
||||
font.pointSize: 22
|
||||
font.letterSpacing: 1
|
||||
color: "#EEEEEE"
|
||||
|
||||
SystemClock {
|
||||
id: clock
|
||||
precision: SystemClock.Minutes
|
||||
}
|
||||
}
|
||||
|
||||
// Date
|
||||
Text {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
text: Qt.formatDateTime(clock.date, "dd\nMMM").toUpperCase()
|
||||
font.family: "Digital-7 Mono"
|
||||
font.pointSize: 13
|
||||
color: "#FFD063"
|
||||
}
|
||||
|
||||
// Slanted divider
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: 4
|
||||
|
||||
Shape {
|
||||
id: divider
|
||||
anchors.fill: parent
|
||||
preferredRendererType: Shape.CurveRenderer
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#FFD063"
|
||||
startX: 8
|
||||
startY: 0
|
||||
PathLine { x: divider.width; y: 0 }
|
||||
PathLine { x: divider.width - 8; y: divider.height }
|
||||
PathLine { x: 0; y: divider.height }
|
||||
PathLine { x: 8; y: 0 }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillHeight: true
|
||||
}
|
||||
|
||||
// Volume — vertical meter with a sheared fill and a % readout
|
||||
Text {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
text: "VOL"
|
||||
font.family: "Digital-7 Mono"
|
||||
font.pointSize: 10
|
||||
color: "#7A7B7D"
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
spacing: 3
|
||||
|
||||
// Overflow — three floating slanted segments for volume
|
||||
// pushed above 100%, lit with the same overload color as
|
||||
// the volume OSD.
|
||||
Repeater {
|
||||
model: 3
|
||||
|
||||
delegate: Item {
|
||||
id: seg
|
||||
required property int index
|
||||
|
||||
readonly property real segStart: 1 + (2 - index) / 3 * (root.maxVolume - 1)
|
||||
readonly property real segEnd: 1 + (3 - index) / 3 * (root.maxVolume - 1)
|
||||
readonly property real frac: root.muted ? 0 : Math.max(0, Math.min(1, (root.volume - segStart) / (segEnd - segStart)))
|
||||
readonly property int chamfer: 4
|
||||
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
implicitWidth: 16
|
||||
implicitHeight: 12
|
||||
|
||||
// Empty track, chamfered to match the main meter.
|
||||
Shape {
|
||||
anchors.fill: parent
|
||||
preferredRendererType: Shape.CurveRenderer
|
||||
|
||||
ShapePath {
|
||||
strokeWidth: 1
|
||||
strokeColor: "#7A7B7D"
|
||||
fillColor: "#292C30"
|
||||
|
||||
startX: seg.chamfer
|
||||
startY: 0
|
||||
PathLine { x: seg.width; y: 0 }
|
||||
PathLine { x: seg.width; y: seg.height - seg.chamfer }
|
||||
PathLine { x: seg.width - seg.chamfer; y: seg.height }
|
||||
PathLine { x: 0; y: seg.height }
|
||||
PathLine { x: 0; y: seg.chamfer }
|
||||
PathLine { x: seg.chamfer; y: 0 }
|
||||
}
|
||||
}
|
||||
|
||||
// Overload fill — reveals a fixed copy of the same
|
||||
// chamfered hexagon from the bottom, so filled and
|
||||
// empty states always share one silhouette.
|
||||
Item {
|
||||
id: segFillClip
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 2
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 2
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 2
|
||||
clip: true
|
||||
height: seg.frac * (seg.height - 4)
|
||||
|
||||
Shape {
|
||||
id: segFill
|
||||
width: seg.width - 4
|
||||
height: seg.height - 4
|
||||
y: segFillClip.height - height
|
||||
preferredRendererType: Shape.CurveRenderer
|
||||
|
||||
readonly property int chamfer: seg.chamfer - 2
|
||||
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#FF6B4A"
|
||||
startX: segFill.chamfer
|
||||
startY: 0
|
||||
PathLine { x: segFill.width; y: 0 }
|
||||
PathLine { x: segFill.width; y: segFill.height - segFill.chamfer }
|
||||
PathLine { x: segFill.width - segFill.chamfer; y: segFill.height }
|
||||
PathLine { x: 0; y: segFill.height }
|
||||
PathLine { x: 0; y: segFill.chamfer }
|
||||
PathLine { x: segFill.chamfer; y: 0 }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: volMeter
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
implicitWidth: 16
|
||||
implicitHeight: 96
|
||||
|
||||
readonly property int chamfer: 6
|
||||
|
||||
// Track — chamfered top-left/bottom-right to match the
|
||||
// panel's slant, so the sheared fill sits in a shape that
|
||||
// agrees with it rather than a plain rectangle.
|
||||
Shape {
|
||||
anchors.fill: parent
|
||||
preferredRendererType: Shape.CurveRenderer
|
||||
|
||||
ShapePath {
|
||||
strokeWidth: 1
|
||||
strokeColor: "#7A7B7D"
|
||||
fillColor: "#292C30"
|
||||
|
||||
startX: volMeter.chamfer
|
||||
startY: 0
|
||||
PathLine { x: volMeter.width; y: 0 }
|
||||
PathLine { x: volMeter.width; y: volMeter.height - volMeter.chamfer }
|
||||
PathLine { x: volMeter.width - volMeter.chamfer; y: volMeter.height }
|
||||
PathLine { x: 0; y: volMeter.height }
|
||||
PathLine { x: 0; y: volMeter.chamfer }
|
||||
PathLine { x: volMeter.chamfer; y: 0 }
|
||||
}
|
||||
}
|
||||
|
||||
// Accent fill — reveals a fixed copy of the same
|
||||
// chamfered hexagon as the track from the bottom, so
|
||||
// the fill and background always share one silhouette.
|
||||
Item {
|
||||
id: fillClip
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 2
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 2
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 2
|
||||
clip: true
|
||||
|
||||
readonly property real frac: root.muted ? 0 : Math.min(root.volume, 1)
|
||||
height: frac * (volMeter.height - 4)
|
||||
|
||||
Shape {
|
||||
id: vol
|
||||
width: volMeter.width - 4
|
||||
height: volMeter.height - 4
|
||||
y: fillClip.height - height
|
||||
preferredRendererType: Shape.CurveRenderer
|
||||
|
||||
readonly property int chamfer: volMeter.chamfer - 2
|
||||
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: root.muted ? "#7A7B7D" : "#FFD063"
|
||||
startX: vol.chamfer
|
||||
startY: 0
|
||||
PathLine { x: vol.width; y: 0 }
|
||||
PathLine { x: vol.width; y: vol.height - vol.chamfer }
|
||||
PathLine { x: vol.width - vol.chamfer; y: vol.height }
|
||||
PathLine { x: 0; y: vol.height }
|
||||
PathLine { x: 0; y: vol.chamfer }
|
||||
PathLine { x: vol.chamfer; y: 0 }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
text: root.muted ? "--" : Math.round(root.volume * 100)
|
||||
font.family: "Digital-7 Mono"
|
||||
font.pointSize: 14
|
||||
color: root.muted ? "#7A7B7D" : "#EEEEEE"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,220 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import Quickshell
|
||||
import Quickshell.Services.SystemTray
|
||||
import Quickshell.Widgets
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Shapes
|
||||
|
||||
// The right bar: a compact utility strip for the SystemTray icons, styled
|
||||
// in the same family as the Launcher (V6 "Slant") and SideBar — accent
|
||||
// color, chamfered corners, Digital-7 Mono, the slash-trio motif — but with
|
||||
// its own plain, evenly-chamfered panel rather than their ornate
|
||||
// bracket-and-cap silhouette, since this is a secondary/utility bar rather
|
||||
// than a hero surface.
|
||||
Scope {
|
||||
id: root
|
||||
|
||||
Variants {
|
||||
model: Quickshell.screens
|
||||
|
||||
PanelWindow {
|
||||
id: win
|
||||
|
||||
required property var modelData
|
||||
screen: modelData
|
||||
|
||||
color: "transparent"
|
||||
|
||||
anchors {
|
||||
top: true
|
||||
right: true
|
||||
bottom: true
|
||||
}
|
||||
|
||||
margins {
|
||||
top: 8
|
||||
}
|
||||
|
||||
readonly property int pad: 10
|
||||
implicitWidth: 64 + 2 * pad
|
||||
|
||||
Item {
|
||||
id: frame
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.margins: win.pad
|
||||
|
||||
readonly property int chamfer: 14 // uniform corner cut on all four corners
|
||||
|
||||
Shape {
|
||||
id: panelShape
|
||||
anchors.fill: parent
|
||||
preferredRendererType: Shape.CurveRenderer
|
||||
|
||||
ShapePath {
|
||||
fillColor: "#0F1012"
|
||||
strokeColor: "#FFD063"
|
||||
strokeWidth: 2
|
||||
|
||||
startX: frame.chamfer
|
||||
startY: 0
|
||||
PathLine {
|
||||
x: panelShape.width - frame.chamfer
|
||||
y: 0
|
||||
}
|
||||
PathLine {
|
||||
x: panelShape.width
|
||||
y: frame.chamfer
|
||||
}
|
||||
PathLine {
|
||||
x: panelShape.width
|
||||
y: panelShape.height - frame.chamfer
|
||||
}
|
||||
PathLine {
|
||||
x: panelShape.width - frame.chamfer
|
||||
y: panelShape.height
|
||||
}
|
||||
PathLine {
|
||||
x: frame.chamfer
|
||||
y: panelShape.height
|
||||
}
|
||||
PathLine {
|
||||
x: 0
|
||||
y: panelShape.height - frame.chamfer
|
||||
}
|
||||
PathLine {
|
||||
x: 0
|
||||
y: frame.chamfer
|
||||
}
|
||||
PathLine {
|
||||
x: frame.chamfer
|
||||
y: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── Content ────────────────────────────────────────────────
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: 20
|
||||
anchors.bottomMargin: 20
|
||||
anchors.leftMargin: 10
|
||||
anchors.rightMargin: 10
|
||||
spacing: 14
|
||||
|
||||
// Slash-trio deco, echoing the launcher/sidebar header motif.
|
||||
Shape {
|
||||
id: slashes
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
implicitWidth: 26
|
||||
implicitHeight: 20
|
||||
preferredRendererType: Shape.CurveRenderer
|
||||
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#FFD063"
|
||||
startX: 6
|
||||
startY: 0
|
||||
PathLine { x: 10; y: 0 }
|
||||
PathLine { x: 4; y: slashes.height }
|
||||
PathLine { x: 0; y: slashes.height }
|
||||
PathLine { x: 6; y: 0 }
|
||||
}
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#FFD063"
|
||||
startX: 15
|
||||
startY: 0
|
||||
PathLine { x: 19; y: 0 }
|
||||
PathLine { x: 13; y: slashes.height }
|
||||
PathLine { x: 9; y: slashes.height }
|
||||
PathLine { x: 15; y: 0 }
|
||||
}
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#FFD063"
|
||||
startX: 24
|
||||
startY: 0
|
||||
PathLine { x: 28; y: 0 }
|
||||
PathLine { x: 22; y: slashes.height }
|
||||
PathLine { x: 18; y: slashes.height }
|
||||
PathLine { x: 24; y: 0 }
|
||||
}
|
||||
}
|
||||
|
||||
// Slanted divider
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: 4
|
||||
|
||||
Shape {
|
||||
id: divider
|
||||
anchors.fill: parent
|
||||
preferredRendererType: Shape.CurveRenderer
|
||||
ShapePath {
|
||||
strokeWidth: 0
|
||||
fillColor: "#FFD063"
|
||||
startX: 8
|
||||
startY: 0
|
||||
PathLine { x: divider.width; y: 0 }
|
||||
PathLine { x: divider.width - 8; y: divider.height }
|
||||
PathLine { x: 0; y: divider.height }
|
||||
PathLine { x: 8; y: 0 }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
text: "TRAY"
|
||||
font.family: "Digital-7 Mono"
|
||||
font.pointSize: 12
|
||||
color: "#7A7B7D"
|
||||
}
|
||||
|
||||
ListView {
|
||||
id: trayList
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
|
||||
clip: true
|
||||
spacing: 10
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
model: SystemTray.items
|
||||
|
||||
delegate: Item {
|
||||
required property SystemTrayItem modelData
|
||||
|
||||
width: ListView.view.width
|
||||
implicitHeight: 36
|
||||
|
||||
SysTrayItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
modelData: parent.modelData
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
visible: SystemTray.items.values.length === 0
|
||||
text: "--"
|
||||
font.family: "Digital-7 Mono"
|
||||
font.pointSize: 14
|
||||
color: "#7A7B7D"
|
||||
}
|
||||
|
||||
Text {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
text: SystemTray.items.values.length
|
||||
font.family: "Digital-7 Mono"
|
||||
font.pointSize: 16
|
||||
color: "#EEEEEE"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import Quickshell
|
||||
import Quickshell.Services.SystemTray
|
||||
import QtQuick
|
||||
import QtQuick.Shapes
|
||||
|
||||
// A single tray icon, chamfered to match the Slant (launcher V6 / SideBar)
|
||||
// visual language instead of a plain rectangular hit target.
|
||||
MouseArea {
|
||||
id: root
|
||||
|
||||
required property SystemTrayItem modelData
|
||||
|
||||
implicitWidth: 36
|
||||
implicitHeight: 36
|
||||
|
||||
acceptedButtons: Qt.LeftButton | Qt.RightButton
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
|
||||
onClicked: event => {
|
||||
if (event.button === Qt.LeftButton) {
|
||||
modelData.activate();
|
||||
} else if (modelData.hasMenu) {
|
||||
const window = root.QsWindow?.window;
|
||||
modelData.display(window, window.width, root.mapToItem(null, 0, 0).y);
|
||||
}
|
||||
event.accepted = true;
|
||||
}
|
||||
|
||||
readonly property int chamfer: 6
|
||||
|
||||
Shape {
|
||||
anchors.fill: parent
|
||||
preferredRendererType: Shape.CurveRenderer
|
||||
|
||||
ShapePath {
|
||||
strokeWidth: 1
|
||||
strokeColor: root.containsMouse ? "#FFD063" : "#7A7B7D"
|
||||
fillColor: "#292C30"
|
||||
|
||||
startX: root.chamfer
|
||||
startY: 0
|
||||
PathLine { x: root.width; y: 0 }
|
||||
PathLine { x: root.width; y: root.height - root.chamfer }
|
||||
PathLine { x: root.width - root.chamfer; y: root.height }
|
||||
PathLine { x: 0; y: root.height }
|
||||
PathLine { x: 0; y: root.chamfer }
|
||||
PathLine { x: root.chamfer; y: 0 }
|
||||
|
||||
Behavior on strokeColor {
|
||||
ColorAnimation {
|
||||
duration: 150
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Image {
|
||||
anchors.centerIn: parent
|
||||
source: modelData.icon
|
||||
fillMode: Image.PreserveAspectFit
|
||||
width: 20
|
||||
height: 20
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user