Reworked the bar display colors/capsule, etc...

This commit is contained in:
quadbyte 2025-08-18 16:10:29 -04:00
parent 7d3dc9c815
commit 81eff0d234
22 changed files with 156 additions and 108 deletions

View file

@ -54,11 +54,9 @@ Row {
Rectangle {
// Let the Rectangle size itself based on its content (the Row)
width: row.width + Style.marginM * scaling * 2
height: Math.round(Style.barHeight * 0.75 * scaling)
height: Math.round(Style.capsuleHeight * scaling)
radius: Math.round(Style.radiusM * scaling)
color: Color.mSurfaceVariant
border.color: Color.mOutline
border.width: Math.max(1, Math.round(Style.borderS * scaling))
anchors.verticalCenter: parent.verticalCenter

View file

@ -82,19 +82,8 @@ Variants {
anchors.verticalCenter: bar.verticalCenter
spacing: Style.marginS * scaling
// Screen Recording Indicator
NIconButton {
id: screenRecordingIndicator
icon: "videocam"
tooltipText: "Screen Recording Active"
sizeMultiplier: 0.8
showBorder: false
showFilled: ScreenRecorderService.isRecording
visible: ScreenRecorderService.isRecording
ScreenRecorderIndicator {
anchors.verticalCenter: parent.verticalCenter
onClicked: {
ScreenRecorderService.toggleRecording()
}
}
Tray {
@ -112,6 +101,7 @@ Variants {
Bluetooth {
anchors.verticalCenter: parent.verticalCenter
}
Battery {
anchors.verticalCenter: parent.verticalCenter
}
@ -139,33 +129,7 @@ Variants {
// demoPanel.isLoaded = !demoPanel.isLoaded
// }
// }
NIconButton {
id: sidePanelToggle
icon: "widgets"
tooltipText: "Open Side Panel"
sizeMultiplier: 0.8
showBorder: false
anchors.verticalCenter: parent.verticalCenter
onClicked: {
// Map this button's center to the screen and open the side panel below it
const localCenterX = width / 2
const localCenterY = height / 2
const globalPoint = mapToItem(null, localCenterX, localCenterY)
if (sidePanel.isLoaded) {
// Call hide() instead of directly setting isLoaded to false
if (sidePanel.item && sidePanel.item.hide) {
sidePanel.item.hide()
} else {
sidePanel.isLoaded = false
}
} else if (sidePanel.openAt) {
sidePanel.openAt(globalPoint.x, screen)
} else {
// Fallback: toggle if API unavailable
sidePanel.isLoaded = true
}
}
}
SidePanelToggle {}
}
}
}

View file

@ -10,7 +10,7 @@ NPill {
id: root
// Test mode
property bool testMode: false
property bool testMode: true
property int testPercent: 49
property bool testCharging: false
@ -52,9 +52,6 @@ NPill {
icon: root.batteryIcon()
text: Math.round(root.percent) + "%"
pillColor: Color.mSurfaceVariant
iconCircleColor: Color.mPrimary
iconTextColor: Color.mSurface
textColor: charging ? Color.mPrimary : Color.mOnSurface
tooltipText: {
let lines = []

View file

@ -12,7 +12,6 @@ NIconButton {
readonly property bool bluetoothEnabled: Settings.data.network.bluetoothEnabled
sizeMultiplier: 0.8
showBorder: false
visible: bluetoothEnabled
icon: {

View file

@ -4,25 +4,35 @@ import qs.Services
import qs.Widgets
// Clock Icon with attached calendar
NClock {
Rectangle {
id: root
width: clock.width + Style.marginM * 2 * scaling
height: Math.round(Style.capsuleHeight * scaling)
radius: Math.round(Style.radiusM * scaling)
color: Color.mSurfaceVariant
NTooltip {
id: tooltip
text: Time.dateString
target: root
}
NClock {
id: clock
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
onEntered: {
if (!calendarPanel.isLoaded) {
tooltip.show()
NTooltip {
id: tooltip
text: Time.dateString
target: clock
}
onEntered: {
if (!calendarPanel.isLoaded) {
tooltip.show()
}
}
onExited: {
tooltip.hide()
}
onClicked: {
tooltip.hide()
calendarPanel.isLoaded = !calendarPanel.isLoaded
}
}
onExited: {
tooltip.hide()
}
onClicked: {
tooltip.hide()
calendarPanel.isLoaded = !calendarPanel.isLoaded
}
}

View file

@ -28,7 +28,7 @@ Row {
// Let the Rectangle size itself based on its content (the Row)
width: row.width + Style.marginM * scaling * 2
height: Math.round(Style.barHeight * 0.75 * scaling)
height: Math.round(Style.capsuleHeight * scaling)
radius: Math.round(Style.radiusM * scaling)
color: Color.mSurfaceVariant
border.color: Color.mOutline

View file

@ -12,9 +12,13 @@ NIconButton {
visible: Settings.data.bar.showNotificationsHistory
sizeMultiplier: 0.8
showBorder: false
icon: "notifications"
tooltipText: "Notification History"
colorBg: Color.mSurfaceVariant
colorFg: Color.mOnSurface
colorBorder: Color.transparent
colorBorderHover: Color.transparent
onClicked: {
if (!notificationHistoryPanel.active) {
notificationHistoryPanel.isLoaded = true

View file

@ -0,0 +1,18 @@
import qs.Commons
import qs.Services
import qs.Widgets
// Screen Recording Indicator
NIconButton {
id: screenRecordingIndicator
icon: "videocam"
tooltipText: "Screen Recording Active\nClick To Stop Recording"
sizeMultiplier: 0.8
colorBg: Color.mPrimary
colorFg: Color.mOnPrimary
visible: ScreenRecorderService.isRecording
anchors.verticalCenter: parent.verticalCenter
onClicked: {
ScreenRecorderService.toggleRecording()
}
}

View file

@ -0,0 +1,36 @@
import Quickshell
import qs.Commons
import qs.Widgets
NIconButton {
id: sidePanelToggle
icon: "widgets"
tooltipText: "Open Side Panel"
sizeMultiplier: 0.8
colorBg: Color.mSurfaceVariant
colorFg: Color.mOnSurface
colorBorder: Color.transparent
colorBorderHover: Color.transparent
anchors.verticalCenter: parent.verticalCenter
onClicked: {
// Map this button's center to the screen and open the side panel below it
const localCenterX = width / 2
const localCenterY = height / 2
const globalPoint = mapToItem(null, localCenterX, localCenterY)
if (sidePanel.isLoaded) {
// Call hide() instead of directly setting isLoaded to false
if (sidePanel.item && sidePanel.item.hide) {
sidePanel.item.hide()
} else {
sidePanel.isLoaded = false
}
} else if (sidePanel.openAt) {
sidePanel.openAt(globalPoint.x, screen)
} else {
// Fallback: toggle if API unavailable
sidePanel.isLoaded = true
}
}
}

View file

@ -14,11 +14,9 @@ Row {
// Let the Rectangle size itself based on its content (the Row)
width: row.width + Style.marginM * scaling * 2
height: Math.round(Style.barHeight * 0.75 * scaling)
height: Math.round(Style.capsuleHeight * scaling)
radius: Math.round(Style.radiusM * scaling)
color: Color.mSurfaceVariant
border.color: Color.mOutline
border.width: Math.max(1, Math.round(Style.borderS * scaling))
anchors.verticalCenter: parent.verticalCenter

View file

@ -9,18 +9,24 @@ import qs.Commons
import qs.Services
import qs.Widgets
Item {
Rectangle {
readonly property real itemSize: 24 * scaling
visible: Settings.data.bar.showTray
width: tray.width
height: itemSize
width: tray.width + Style.marginM * scaling * 2
height: Math.round(Style.capsuleHeight * scaling)
radius: Math.round(Style.radiusM * scaling)
color: Color.mSurfaceVariant
Layout.alignment: Qt.AlignVCenter
Row {
id: tray
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
spacing: Style.marginS * scaling
Layout.alignment: Qt.AlignVCenter
Repeater {
id: repeater

View file

@ -11,9 +11,15 @@ NIconButton {
id: root
readonly property bool wifiEnabled: Settings.data.network.wifiEnabled
sizeMultiplier: 0.8
showBorder: false
visible: wifiEnabled
colorBg: Color.mSurfaceVariant
colorFg: Color.mOnSurface
colorBorder: Color.transparent
colorBorderHover: Color.transparent
icon: {
let connected = false
let signalStrength = 0

View file

@ -116,11 +116,9 @@ Item {
id: workspaceBackground
width: parent.width - Style.marginS * scaling * 2
height: Math.round(Style.barHeight * 0.75 * scaling)
height: Math.round(Style.capsuleHeight * scaling)
radius: Math.round(Style.radiusM * scaling)
color: Color.mSurfaceVariant
border.color: Color.mOutline
border.width: Math.max(1, Math.round(Style.borderS * scaling))
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter