Improve hover behaviour, make font configurable, adjust overview

This commit is contained in:
2026-09-09 16:35:32 -07:00
parent 69cc62cb55
commit 410ad1a299
13 changed files with 97 additions and 32 deletions
+5
View File
@@ -42,6 +42,7 @@ Column {
Text {
parent: profile
anchors.centerIn: parent
font.family: root.font
text: PowerProfile.toString(powerProfile)
color: PowerProfiles.profile === powerProfile ? "black" : "white"
Behavior on color { ColorAnimation {duration: 50}}
@@ -96,6 +97,7 @@ Column {
Text {
anchors.centerIn: parent
font.pixelSize: 20
font.family: root.font
color: "white"
text: Math.round(modelData.percentage * 100) + "%"
}
@@ -107,6 +109,7 @@ Column {
x: 4
text: UPowerDeviceType.toString(modelData.type)
font.pixelSize: 20
font.family: root.font
color: "white"
}
Row {
@@ -126,6 +129,7 @@ Column {
anchors.horizontalCenter: parent.horizontalCenter
color: "white"
font.pixelSize: 16
font.family: root.font
text: card.data
}
Text {
@@ -133,6 +137,7 @@ Column {
color: "#aaa"
text: card.label
font.pixelSize: 12
font.family: root.font
}
}
}
+2
View File
@@ -41,6 +41,7 @@ Column {
leftMargin: 6
}
font.pixelSize: 16
font.family: root.font
color: "white"
text: "Display brightness"
}
@@ -75,6 +76,7 @@ Column {
}
height: 24
font.pixelSize: 14
font.family: root.font
color: "white"
text: toggleButton.text
}
+3
View File
@@ -47,6 +47,7 @@ Item {
Behavior on x {NumberAnimation {duration: 300; easing.type: Easing.OutQuint}}
focus: true
font.pixelSize: 20
font.family: root.font
color: "white"
cursorDelegate: Item {}
onCursorPositionChanged: cursorPosition = text.length
@@ -156,6 +157,7 @@ Item {
Text {
anchors.horizontalCenter: parent.horizontalCenter
font.pixelSize: 64
font.family: root.font
text: modelData.emoji ?? ""
color: "white"
}
@@ -168,6 +170,7 @@ Item {
text: modelData.name
color: "white"
font.pixelSize: 16
font.family: root.font
horizontalAlignment: Text.AlignHCenter
elide: Text.ElideRight
}
+4
View File
@@ -39,6 +39,7 @@ Item {
anchors.horizontalCenter: parent.horizontalCenter
color: "#888"
text: "No notifications"
font.family: root.font
}
}
ListView {
@@ -94,6 +95,7 @@ Item {
anchors.horizontalCenter: parent.horizontalCenter
color: "#888"
text: "Nothing playing"
font.family: root.font
}
}
Column {
@@ -177,6 +179,7 @@ Item {
color: "white"
text: player.modelData?.trackTitle ?? ""
font.pixelSize: 16
font.family: root.font
}
Text {
anchors {
@@ -188,6 +191,7 @@ Item {
color: "white"
text: player.modelData?.trackArtist ?? ""
font.pixelSize: 12
font.family: root.font
}
Item {width: 1; height: 8}
Row {
+45 -8
View File
@@ -1,4 +1,5 @@
import QtQuick
import QtQuick.Effects
import Quickshell
import Quickshell.Hyprland
import Quickshell.Widgets
@@ -16,7 +17,7 @@ Grid {
horizontalItemAlignment: Grid.AlignHCenter
verticalItemAlignment: Grid.AlignVCenter
onVisibleChanged: {
if (!visible) return
if (!visible) return;
Hyprland.refreshToplevels()
}
component WorkspaceView: ClippingRectangle {
@@ -52,20 +53,56 @@ Grid {
}
Repeater {
model: Hyprland.toplevels.values.filter(tl => tl.workspace?.id == modelData + 1)
delegate: ClippingRectangle {
x: modelData.lastIpcObject.at[0] * workspaceView.widthRatio - 2
y: modelData.lastIpcObject.at[1] * workspaceView.widthRatio - 2
width: modelData.lastIpcObject.size[0] * workspaceView.widthRatio
height: modelData.lastIpcObject.size[1] * workspaceView.widthRatio
delegate: Item {
x: modelData.lastIpcObject.at?.[0] * workspaceView.widthRatio - 2
y: modelData.lastIpcObject.at?.[1] * workspaceView.widthRatio - 2
width: modelData.lastIpcObject.size?.[0] * workspaceView.widthRatio
height: modelData.lastIpcObject.size?.[1] * workspaceView.widthRatio
ScreencopyView {
anchors.fill: parent
captureSource: modelData.wayland
live: overview.visible
layer.enabled: true
layer.effect: MultiEffect {
blurEnabled: true
blurMax: 8
blur: 1
autoPaddingEnabled: false
}
}
Image {
id: appicon
anchors.centerIn: parent
width: 36
height: width
sourceSize.width: width
sourceSize.height: height
source: {
const appId = modelData.wayland?.appId
const iconName = DesktopEntries.applications.values.find(
app => app.startupClass === appId || app.id === appId
)?.icon;
return Quickshell.iconPath(iconName)
}
layer.enabled: true
visible: false
}
MultiEffect {
anchors.fill: appicon
source: appicon
blurMax: 12
shadowEnabled: true
}
MultiEffect {
anchors.fill: appicon
source: appicon
blurMax: 12
shadowEnabled: true
}
}
}
TapHandler { onTapped: {
if (modelData < 0) return
if (modelData < 0) return;
Hyprland.dispatch(`hl.dsp.focus({workspace = ${modelData + 1}})`)
root.close()
}}
@@ -80,7 +117,7 @@ Grid {
bottomRightRadius: 12
TapHandler {
onTapped: {
Hyprland.dispatch(`hl.dsp.workspace.toggle_special()`)
Hyprland.dispatch('hl.dsp.workspace.toggle_special()')
root.close()
}
}
+1
View File
@@ -86,6 +86,7 @@ Row {
}
color: "white"
font.pixelSize: 16
font.family: root.font
}
Widgets.Slider {
value: modelData.audio.volume
+7 -3
View File
@@ -8,6 +8,7 @@ import QtQuick.Effects
import QtQuick.Shapes
import "." as Shell
import "./Panes" as Panes
import "./config.mjs" as Config
PanelWindow {
id: root
@@ -16,7 +17,6 @@ PanelWindow {
left: true
right: true
}
property var font: {family: "0xProto Nerd Font"}
implicitHeight: 400
WlrLayershell.keyboardFocus: (up && !background.exit.running && !shortcut.pressed && background.index <= 1) ? WlrKeyboardFocus.Exclusive : WlrKeyboardFocus.None
@@ -24,6 +24,7 @@ PanelWindow {
exclusionMode: ExclusionMode.Ignore
color: "transparent"
visible: false
readonly property string font: 'Rubik'
property bool up: false
IpcHandler {
@@ -87,7 +88,7 @@ PanelWindow {
easing.type: Easing.OutQuint
}
}
DefaultTransition on width { }
DefaultTransition on width { id: transition }
DefaultTransition on height { }
property int index: 0
onIndexChanged: {
@@ -192,7 +193,10 @@ PanelWindow {
}
HoverHandler {
id: hover
onHoveredChanged: { if (!hovered && background.index === 0) root.close() }
onHoveredChanged: {
if (!hovered && (background.index === 1 || !transition.animation?.running))
root.close()
}
}
}
}
+2
View File
@@ -3,6 +3,7 @@ import Quickshell.Widgets
import QtQuick
import Quickshell
import "." as Widgets
import "../config.mjs" as Config
Item {
anchors {
@@ -52,6 +53,7 @@ Item {
anchors.verticalCenter: parent.verticalCenter
x: 10
color: "white"
font.family: Config.font
text: `${Math.round(UPower.displayDevice.percentage * 100)}% · ${UPower.displayDevice.changeRate.toPrecision(2)}W`
}
}
+2 -2
View File
@@ -49,7 +49,7 @@ Rectangle {
right: parent.right
}
color: "white"
font.family: "Comfortaa"
font.family: root.font
font.pixelSize: 16
text: modelData?.summary ?? text
elide: Text.ElideRight
@@ -62,7 +62,7 @@ Rectangle {
right: parent.right
}
color: "white"
font.family: "Comfortaa"
font.family: root.font
font.pixelSize: 12
text: modelData?.body ?? text
elide: Text.ElideRight
+10 -10
View File
@@ -4,7 +4,7 @@ import Quickshell.Services.Pipewire
import QtQuick
Shape {
id: root
id: percentIndicator
preferredRendererType: Shape.CurveRenderer
property var percent
ShapePath {
@@ -14,10 +14,10 @@ Shape {
strokeWidth: 2
PathAngleArc {
moveToStart: true
centerX: root.width/2
centerY: root.height/2
radiusX: root.width/2
radiusY: root.height/2
centerX: percentIndicator.width/2
centerY: percentIndicator.height/2
radiusX: percentIndicator.width/2
radiusY: percentIndicator.height/2
startAngle: 90 + 40
sweepAngle: 360 - 80
}
@@ -29,12 +29,12 @@ Shape {
strokeWidth: 2
PathAngleArc {
moveToStart: true
centerX: root.width/2
centerY: root.height/2
radiusX: root.width/2 - 1
radiusY: root.height/2 - 1
centerX: percentIndicator.width/2
centerY: percentIndicator.height/2
radiusX: percentIndicator.width/2 - 1
radiusY: percentIndicator.height/2 - 1
startAngle: 90 + 40
sweepAngle: root.percent * (360 - 80)
sweepAngle: percentIndicator.percent * (360 - 80)
}
}
}
+8 -7
View File
@@ -4,13 +4,13 @@ import Quickshell.Widgets
import Quickshell.Services.Mpris
Item {
id: root
id: time
property var player: Mpris.players.values[0]
anchors {
top: parent.top
bottom: parent.bottom
}
width: children[1].width + 24
width: children[1].width + 18
Rectangle {
anchors.fill: parent
anchors.margins: 4
@@ -20,20 +20,20 @@ Item {
Behavior on color {ColorAnimation {duration: 150}}
}
Row {
spacing: 12
spacing: 8
anchors.verticalCenter: parent.verticalCenter
x: 12
x: 8
ClippingRectangle {
visible: !!root.player
visible: !!time.player
anchors.verticalCenter: parent.verticalCenter
width: 24
height: width
radius: 6
Image {
anchors.fill: parent
source: root.player?.trackArtUrl ?? source
source: time.player?.trackArtUrl ?? source
}
opacity: root.player?.isPlaying ? 1 : 0.5
opacity: time.player?.isPlaying ? 1 : 0.5
Behavior on opacity {NumberAnimation {duration: 150}}
}
Text {
@@ -41,6 +41,7 @@ Item {
property var clock: SystemClock {}
color: "white"
text: Qt.formatDateTime(clock.date, "ddd MMM dd · hh:mm")
font.family: root.font
}
}
HoverHandler {id: hover}
+7 -1
View File
@@ -27,7 +27,13 @@ Item {
property var icon: {
let appId
if (workspace) {
let toplevel = Array.from(workspace.toplevels.values).reduce((prev, curr) => (prev.lastIpcObject.focusHistoryID < curr.lastIpcObject.focusHistoryID) ? prev : curr)
// Find most recently focused toplevel on workspace
let toplevel = Array.from(workspace.toplevels.values).reduce(
(prev, curr) => (
prev.lastIpcObject.focusHistoryID <
curr.lastIpcObject.focusHistoryID
) ? prev : curr
);
appId = toplevel.wayland?.appId
}
return DesktopEntries.applications.values.find(
+1 -1
View File
@@ -27,7 +27,7 @@ ShellRoot {
color: "transparent"
exclusionMode: ExclusionMode.Ignore
implicitHeight: 1
implicitWidth: 800
implicitWidth: 1000
HoverHandler {onHoveredChanged: {if (hovered) bar.open() }}
}
Shell.Corners { }