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,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
|
||||
}
|
||||
Reference in New Issue
Block a user