honney/quickshell
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Made the bar scaling relative and ia a config file

Browse Source
This commit is contained in:
Hannes
2026-06-08 19:25:33 +02:00
parent bddebdb983
commit 57d0a2d6a5
11 changed files with 157 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/Config.qml
+26
View File
@@ -0,0 +1,26 @@
pragma Singleton
import QtQuick 2.15
QtObject {
readonly property int small_spacing: 4
readonly property int spacing: 8
readonly property int small_radius: 4
readonly property int radius: 6
readonly property int big_radius: 10
readonly property int border_width: 2
readonly property string font: "CodeNewRoman Nerd Font"
function big_font_size(value) {
return value * 0.6
}
function medium_scaling(value) {
return value * 0.4
}
// Tray
readonly property int reload_interval: 10000
readonly property int fast_reload_interval: 10000
}
modules/bar/Bar.qml
+6 -6
View File
@@ -3,6 +3,7 @@ import Quickshell
import Quickshell.Hyprland import Quickshell.Hyprland
import "./widgets" import "./widgets"
import "../../colors" import "../../colors"
import "../../config"
// TODO: interact with PyWal // TODO: interact with PyWal
@@ -15,7 +16,7 @@ PanelWindow {
anchors.left: true anchors.left: true
anchors.right: true anchors.right: true
implicitHeight: 40 implicitHeight: Math.floor(screen.height * 0.025)
exclusiveZone: height // this is so context menus don't clip into the bar exclusiveZone: height // this is so context menus don't clip into the bar
@@ -31,15 +32,14 @@ PanelWindow {
id: bar id: bar
anchors.fill: parent anchors.fill: parent
color: Qt.alpha(Colors.background, 0.5) color: Qt.alpha(Colors.background, 0.5)
radius: 0
Row { // bar widgets left Row { // bar widgets left
id: widgetsLeft id: widgetsLeft
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 16 anchors.leftMargin: 0 // parent.height / 4
spacing: 8 spacing: Math.floor(parent.height / 4)
MenuButton {} MenuButton {}
// TODO: Add functionallity (Maybe just rofi or own way) // TODO: Add functionallity (Maybe just rofi or own way)
@@ -68,8 +68,8 @@ PanelWindow {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 16 anchors.rightMargin: 0 //parent.height / 4
spacing: 8 spacing: Math.floor(parent.height / 4)
// TODO: Add bluetooth, network, audio, power, maybe HW monitor // TODO: Add bluetooth, network, audio, power, maybe HW monitor
Tray{} Tray{}
modules/bar/scripts/Apps.sh
+2 -2
View File
@@ -149,6 +149,6 @@ done
# echo "$app" # echo "$app"
# done # done
RESULT="$ID $(printf '%s ' "${APPS[@]}")" RESULT="$(printf '%s' "${APPS[@]}")"
RESULT=${RESULT% } # remove trailing space # RESULT=${RESULT% } # remove trailing space
echo "$RESULT" echo "$RESULT"
modules/bar/widgets/Battery.qml
+25 -14
View File
@@ -3,11 +3,12 @@ import Quickshell
import Quickshell.Hyprland import Quickshell.Hyprland
import Quickshell.Io import Quickshell.Io
import "../../../colors" import "../../../colors"
import "../../../config"
import "../states/Battery" import "../states/Battery"
MouseArea { MouseArea {
id: batteryButton id: batteryButton
width: clicked ? Math.max(batteryPercentage.width + parent.spacing*2, bar.height) : Math.max(batteryText.width + parent.spacing*2, bar.height) width: clicked ? Math.max(batteryPercentageText.width + parent.spacing*3, bar.height) : Math.max(batteryText.width + parent.spacing*2, bar.height)
height: bar.height height: bar.height
hoverEnabled: true hoverEnabled: true
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
@@ -22,8 +23,8 @@ MouseArea {
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
color: batteryButton.containsMouse ? Colors.tertiary : Qt.alpha(Colors.tertiaryContainer, 0.25) color: batteryButton.containsMouse ? Colors.tertiary : Qt.alpha(Colors.tertiaryContainer, 0.25)
radius: 6 radius: Config.radius
border.width: 2 border.width: Config.border_width
border.color: batteryButton.containsMouse ? Colors.tertiaryContainer_fg border.color: batteryButton.containsMouse ? Colors.tertiaryContainer_fg
: Colors.secondaryContainer_fg : Colors.secondaryContainer_fg
@@ -38,8 +39,8 @@ MouseArea {
BatteryState.percentage >= 25 ? "" : BatteryState.percentage >= 25 ? "" :
"" ""
) )
font.pixelSize: 26 font.pixelSize: Config.big_font_size(bar.height)
font.family: "Nerd Font" font.family: Config.font
color: ( color: (
BatteryState.charging ? BatteryState.percentage == 100 ? "white" : "green" : BatteryState.charging ? BatteryState.percentage == 100 ? "white" : "green" :
BatteryState.percentage <= 5 ? "red" : BatteryState.percentage <= 5 ? "red" :
@@ -50,15 +51,25 @@ MouseArea {
} }
Text { Text {
id: batteryChargingText id: batteryPercentageText
visible : !clicked && BatteryState.charging visible : clicked
anchors.horizontalCenter: parent.horizontalCenter anchors.centerIn: parent
anchors.verticalCenter: parent.verticalCenter text: (
text: "󱐋" BatteryState.charging ? "󰂄" :
style: Text.Outline BatteryState.percentage >= 90 ? "󰁹 " + BatteryState.percentage + "%" :
styleColor: Colors.tertiaryContainer BatteryState.percentage >= 80 ? "󰂂 " + BatteryState.percentage + "%" :
font.pixelSize: 26 BatteryState.percentage >= 70 ? "󰂁 " + BatteryState.percentage + "%" :
font.family: "Nerd Font" BatteryState.percentage >= 60 ? "󰂀 " + BatteryState.percentage + "%" :
BatteryState.percentage >= 50 ? "󰁿 " + BatteryState.percentage + "%" :
BatteryState.percentage >= 40 ? "󰁾 " + BatteryState.percentage + "%" :
BatteryState.percentage >= 30 ? "󰁽 " + BatteryState.percentage + "%" :
BatteryState.percentage >= 20 ? "󰁼 " + BatteryState.percentage + "%" :
BatteryState.percentage >= 10 ? "󰁻 " + BatteryState.percentage + "%" :
BatteryState.percentage >= 5 ? "󰁺 " + BatteryState.percentage + "%" :
"󰂃 " + BatteryState.percentage + "%"
)
font.pixelSize: Config.big_font_size(bar.height)
font.family: Config.font
color: ( color: (
BatteryState.charging ? BatteryState.percentage == 100 ? "white" : "green" : BatteryState.charging ? BatteryState.percentage == 100 ? "white" : "green" :
BatteryState.percentage <= 5 ? "red" : BatteryState.percentage <= 5 ? "red" :
modules/bar/widgets/Clock.qml
+9 -7
View File
@@ -2,14 +2,16 @@ import QtQuick
import Quickshell import Quickshell
import Quickshell.Hyprland import Quickshell.Hyprland
import "../../../colors" import "../../../colors"
import "../../../config"
Rectangle { //workspace Rectangle { //workspace
width: timeDisplay.width + 8 + dateDisplay.width + 16 id: timeAnchore
height: timeDisplay.height + 16 width: dateTimer.running ? Math.max(dateDisplay.width + timeDisplay.width + Config.spacing*3, bar.height) : Math.max(dateDisplay.width + timeDisplay.width + Config.spacing*2, bar.height)
radius: 4 height: bar.height
radius: Config.radius
color: Colors.primaryContainer color: Colors.primaryContainer
border.color: Colors.primaryContainer_fg border.color: Colors.primaryContainer_fg
border.width: 2 border.width: Config.border_width
MouseArea { MouseArea {
hoverEnabled: true hoverEnabled: true
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
@@ -18,7 +20,7 @@ Rectangle { //workspace
Row { Row {
id: row id: row
spacing: 8 spacing: Config.spacing
anchors.centerIn: parent anchors.centerIn: parent
Text { Text {
@@ -27,7 +29,7 @@ Rectangle { //workspace
text: currentDate text: currentDate
color: Colors.primary color: Colors.primary
font.pixelSize: 18 font.pixelSize: Math.floor(bar.height/2)
font.family: "Inter, sans-serif" font.family: "Inter, sans-serif"
Timer { Timer {
@@ -49,7 +51,7 @@ Rectangle { //workspace
text: currentTime text: currentTime
color: Colors.primary color: Colors.primary
font.pixelSize: 18 font.pixelSize: Math.floor(bar.height/2)
font.family: "Inter, sans-serif" font.family: "Inter, sans-serif"
Component.onCompleted: { Component.onCompleted: {
modules/bar/widgets/IdleButton.qml
+5 -4
View File
@@ -3,6 +3,7 @@ import Quickshell
import Quickshell.Hyprland import Quickshell.Hyprland
import Quickshell.Io import Quickshell.Io
import "../../../colors" import "../../../colors"
import "../../../config"
import "../states/Idle" as Global import "../states/Idle" as Global
MouseArea { MouseArea {
@@ -19,8 +20,8 @@ MouseArea {
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
color: idleButton.containsMouse ? Colors.tertiary : Qt.alpha(Colors.tertiaryContainer, 0.25) color: idleButton.containsMouse ? Colors.tertiary : Qt.alpha(Colors.tertiaryContainer, 0.25)
radius: 6 radius: Config.radius
border.width: 2 border.width: Config.border_width
border.color: idleButton.containsMouse ? Colors.tertiaryContainer_fg border.color: idleButton.containsMouse ? Colors.tertiaryContainer_fg
: Colors.secondaryContainer_fg : Colors.secondaryContainer_fg
@@ -51,8 +52,8 @@ MouseArea {
id: idleText id: idleText
anchors.centerIn: parent anchors.centerIn: parent
text: Global.IdleState.idle ? "" : "" text: Global.IdleState.idle ? "" : ""
font.pixelSize: 26 font.pixelSize: Config.big_font_size(bar.height)
font.family: "Nerd Font" font.family: Config.font
color: idleButton.containsMouse ? Colors.tertiary_fg : idleText.text == "" ? Colors.primary : Colors.tertiary color: idleButton.containsMouse ? Colors.tertiary_fg : idleText.text == "" ? Colors.primary : Colors.tertiary
} }
} }
modules/bar/widgets/MenuButton.qml
+7 -5
View File
@@ -3,11 +3,12 @@ import Quickshell
import Quickshell.Hyprland import Quickshell.Hyprland
import Quickshell.Io import Quickshell.Io
import "../../../colors" import "../../../colors"
import "../../../config"
MouseArea { MouseArea {
id: archButton id: archButton
width: 30 width: Math.max(bar.height, archButtonText.width+Config.spacing)
height: 28 height: bar.height
hoverEnabled: true hoverEnabled: true
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
@@ -18,13 +19,14 @@ MouseArea {
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
color: archButton.containsMouse ? Colors.tertiary : Qt.alpha(Colors.primaryContainer, 0.25) color: archButton.containsMouse ? Colors.tertiary : Qt.alpha(Colors.primaryContainer, 0.25)
radius: 6 radius: Config.radius
Text { Text {
id: archButtonText
anchors.centerIn: parent anchors.centerIn: parent
text: "󰣇" text: "󰣇"
font.pixelSize: 26 font.pixelSize: Config.big_font_size(bar.height)
font.family: "Nerd Font" font.family: Config.font
color: archButton.containsMouse ? Colors.tertiary_fg : Colors.primary color: archButton.containsMouse ? Colors.tertiary_fg : Colors.primary
} }
} }
modules/bar/widgets/Network.qml
+7 -5
View File
@@ -3,13 +3,15 @@ import Quickshell
import Quickshell.Hyprland import Quickshell.Hyprland
import Quickshell.Io import Quickshell.Io
import "../../../colors" import "../../../colors"
import "../../../config"
import "../states/Network" as Global import "../states/Network" as Global
MouseArea { MouseArea {
id: networkButton id: networkButton
width: Math.max(networkText.width + parent.spacing*2, bar.height)
width: Math.max(networkText.width + Config.spacing*2, bar.height)
height: bar.height height: bar.height
hoverEnabled: true hoverEnabled: true
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
@@ -21,8 +23,8 @@ MouseArea {
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
color: networkButton.containsMouse ? Colors.tertiary : Qt.alpha(Colors.tertiaryContainer, 0.25) color: networkButton.containsMouse ? Colors.tertiary : Qt.alpha(Colors.tertiaryContainer, 0.25)
radius: 6 radius: Config.radius
border.width: 2 border.width: Config.border_width
border.color: networkButton.containsMouse ? Colors.tertiaryContainer_fg border.color: networkButton.containsMouse ? Colors.tertiaryContainer_fg
: Colors.secondaryContainer_fg : Colors.secondaryContainer_fg
@@ -30,8 +32,8 @@ MouseArea {
id: networkText id: networkText
text: Global.NetworkState.status text: Global.NetworkState.status
anchors.centerIn: parent anchors.centerIn: parent
font.pixelSize: 26 font.pixelSize: Config.big_font_size(bar.height)
font.family: "Nerd Font" font.family: Config.font
color: networkButton.containsMouse ? Colors.tertiary_fg : networkText.text === "󰤭 /󱐤" ? Colors.error : Colors.primary color: networkButton.containsMouse ? Colors.tertiary_fg : networkText.text === "󰤭 /󱐤" ? Colors.error : Colors.primary
} }
modules/bar/widgets/PowerButton.qml
+6 -5
View File
@@ -3,18 +3,19 @@ import Quickshell
import Quickshell.Hyprland import Quickshell.Hyprland
import Quickshell.Io import Quickshell.Io
import "../../../colors" import "../../../colors"
import "../../../config"
MouseArea { MouseArea {
id: powerButton id: powerButton
width: powerText.width + 16 width: Math.max(powerText.width + Config.spacing, bar.height)
height: bar.height height: bar.height
hoverEnabled: true hoverEnabled: true
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
color: powerButton.containsMouse ? Colors.secondaryContainer_fg : Qt.alpha(Colors.secondary, 0.5) color: powerButton.containsMouse ? Colors.secondaryContainer_fg : Qt.alpha(Colors.secondary, 0.75)
radius: 6 radius: Config.radius
Item { Item {
anchors.fill: parent anchors.fill: parent
@@ -41,8 +42,8 @@ MouseArea {
id: powerText id: powerText
anchors.centerIn: parent anchors.centerIn: parent
text: "" text: ""
font.pixelSize: 26 font.pixelSize: Config.big_font_size(bar.height)
font.family: "Nerd Font" font.family: Config.font
color:powerButton.containsMouse ? Colors.secondaryContainer : Colors.secondary_fg color:powerButton.containsMouse ? Colors.secondaryContainer : Colors.secondary_fg
} }
} }
modules/bar/widgets/Tray.qml
+12 -11
View File
@@ -4,26 +4,27 @@ import Quickshell.Hyprland
import Quickshell.Services.SystemTray import Quickshell.Services.SystemTray
import Quickshell.Io import Quickshell.Io
import "../../../colors" import "../../../colors"
import "../../../config"
Row { // Workspace Row Row { // Workspace Row
id: trayRow id: trayRow
spacing: 4 spacing: Math.floor(bar.height/8)
Repeater { Repeater {
model: SystemTray.items model: SystemTray.items
Column{ Column{
Rectangle{ Rectangle{
width: iconImage.width + 8 width: iconImage.width + Config.spacing
height: (bar.height-trayItem.height)/2 height: Math.floor((bar.height-trayItem.height)/2)
color: "transparent" color: "transparent"
} }
Rectangle { //trayItem Rectangle { //trayItem
id: trayItem id: trayItem
width: iconImage.width + 8 width: iconImage.width + Config.spacing
height: iconImage.height + 8 height: iconImage.height + Config.spacing
radius: 4 radius: Config.small_radius
color: "transparent" color: "transparent"
border.width: 2 border.width: Config.border_width
Process { Process {
id: steamRunner id: steamRunner
@@ -74,7 +75,7 @@ Row { // Workspace Row
border.color: workspaceButton.containsMouse ? Colors.tertiaryContainer_fg border.color: workspaceButton.containsMouse ? Colors.tertiaryContainer_fg
: modelData.active ? Colors.primaryContainer_fg : modelData.active ? Colors.primaryContainer_fg
: Colors.secondaryContainer_fg : Colors.secondaryContainer_fg
radius: 6 radius: Config.radius
} }
} }
@@ -86,8 +87,8 @@ Row { // Workspace Row
anchors.centerIn: parent anchors.centerIn: parent
width: bar.height*0.5 width: Config.big_font_size(bar.height)
height: bar.height*0.5 height: Config.big_font_size(bar.height)
// Component.onCompleted: { // Component.onCompleted: {
// // Default to the original icon // // Default to the original icon
@@ -119,7 +120,7 @@ Row { // Workspace Row
} }
Timer { Timer {
interval: 10000 interval: Config.reload_interval
running: true running: true
repeat: true repeat: true
triggeredOnStart: true triggeredOnStart: true
modules/bar/widgets/Workspaces.qml
+50 -29
View File
@@ -3,12 +3,13 @@ import Quickshell
import Quickshell.Hyprland import Quickshell.Hyprland
import Quickshell.Io import Quickshell.Io
import "../../../colors" import "../../../colors"
import "../../../config"
Row { // Workspace Row Row { // Workspace Row
id: workspacesRow id: workspacesRow
required property HyprlandMonitor thisMonitor required property HyprlandMonitor thisMonitor
spacing: 8 spacing: Math.floor(bar.height/4)
// Get infos of Type Unknown // Get infos of Type Unknown
// Repeater { // Repeater {
@@ -31,16 +32,20 @@ Row { // Workspace Row
active: modelData.monitor === thisMonitor active: modelData.monitor === thisMonitor
sourceComponent: Rectangle { //workspace sourceComponent: Rectangle { //workspace
// visible: modelData.monitor === thisMonitor // visible: modelData.monitor === thisMonitor
width: (workspaceNum.width + 16) < (workspaceNum.height + 8) ? workspaceNum.height + 8 : workspaceNum.width + 16 width: Math.max(workspaceNum.width + workspaceText.width+Config.spacing*2, bar.height)
height: workspaceNum.height + 8 height: workspaceNum.height + Config.spacing
radius: 4 radius: Config.small_radius
color: workspaceButton.containsMouse ? Colors.tertiaryContainer color: (
: modelData.active ? Colors.primaryContainer workspaceButton.containsMouse ? Colors.tertiaryContainer :
: Colors.secondaryContainer modelData.active ? Colors.primaryContainer :
border.color: workspaceButton.containsMouse ? Colors.tertiaryContainer_fg Colors.secondaryContainer
: modelData.active ? Colors.primaryContainer_fg )
: Colors.secondaryContainer_fg border.color: (
border.width: 2 workspaceButton.containsMouse ? Colors.tertiaryContainer_fg :
modelData.active ? Colors.primaryContainer_fg :
Colors.secondaryContainer_fg
)
border.width: Config.border_width
MouseArea { MouseArea {
id: workspaceButton id: workspaceButton
@@ -49,22 +54,38 @@ Row { // Workspace Row
anchors.fill: parent anchors.fill: parent
onClicked: Hyprland.dispatch("workspace " + modelData.id) onClicked: Hyprland.dispatch("workspace " + modelData.id)
Rectangle { Row {
anchors.fill: parent id: workspaceRow
color: "transparent" anchors.centerIn: parent
radius: 6 spacing: Math.floor(bar.height/8)
} leftPadding: Math.floor(bar.height/4)
}
Text { Text {
id: workspaceNum id: workspaceNum
text: modelData.id text: modelData.id
anchors.centerIn: parent anchors.verticalCenter: parent.verticalCenter
color: workspaceButton.containsMouse ? Colors.tertiary color: workspaceButton.containsMouse ? Colors.tertiary
: modelData.active ? Colors.primary : modelData.active ? Colors.primary
: Colors.secondary : Colors.secondary
font.pixelSize: 18
font.family: "Inter, sans-serif" font.pixelSize: Config.medium_scaling(bar.height)*1.2
font.family: Config.font
font.bold: true
}
Text {
id: workspaceText
text: ""
anchors.verticalCenter: parent.verticalCenter
color: workspaceButton.containsMouse ? Colors.tertiary
: modelData.active ? Colors.primary
: Colors.secondary
font.pixelSize: Config.medium_scaling(bar.height)
font.family: Config.font
font.letterSpacing: Math.floor(Config.medium_scaling(bar.height) * (2 / 3))
}
}
} }
Process { Process {
@@ -74,14 +95,14 @@ Row { // Workspace Row
stdout: StdioCollector { stdout: StdioCollector {
onStreamFinished: { onStreamFinished: {
workspaceNum.text = this.text workspaceText.text = this.text
// console.log("workspaceScript output:", this.text) // console.log("workspaceScript output:", this.text)
} }
} }
} }
Timer { Timer {
interval: 1000 interval: Config.fast_reload_interval
running: true running: true
repeat: true repeat: true
onTriggered: workspaceContent.running = true onTriggered: workspaceContent.running = true
@@ -94,6 +115,6 @@ Row { // Workspace Row
visible: Hyprland.workspaces.length === 0 visible: Hyprland.workspaces.length === 0
text: "No Workspaces" text: "No Workspaces"
color: Colors.error color: Colors.error
font.pixelSize: 18 font.pixelSize: Config.big_font_size(bar.height)
} }
} }