kenji/illogical-impulse
1
0
Fork 0
forked from Shinonome/dots-hyprland
Code Pull Requests Activity

bar tooltips: use correct color, add subhead text

Browse Source
This commit is contained in:
end-4
2025-08-11 20:12:20 +07:00
parent 70a5520f47
commit 291b997972
7 changed files with 255 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.config/quickshell/ii/modules/bar/BatteryPopup.qml
+50 -27
View File
@@ -10,14 +10,37 @@ Rectangle {
readonly property real margin: 10
implicitWidth: columnLayout.implicitWidth + margin * 2
implicitHeight: columnLayout.implicitHeight + margin * 2
color: Appearance.colors.colTooltip
color: Appearance.colors.colSurfaceContainer
radius: Appearance.rounding.small
clip: true
ColumnLayout {
id: columnLayout
anchors.centerIn: parent
spacing: 8
spacing: 4
// Header
RowLayout {
id: header
spacing: 5
MaterialSymbol {
fill: 0
font.weight: Font.Medium
text: "battery_android_full"
iconSize: Appearance.font.pixelSize.large
color: Appearance.colors.colOnSurfaceVariant
}
StyledText {
text: "Battery"
font {
weight: Font.Medium
pixelSize: Appearance.font.pixelSize.normal
}
color: Appearance.colors.colOnSurfaceVariant
}
}
// This row is hidden when the battery is full.
RowLayout {
@@ -30,14 +53,25 @@ Rectangle {
}
visible: rowVisible
opacity: rowVisible ? 1 : 0
Behavior on opacity { NumberAnimation { duration: 500 } }
Behavior on opacity {
NumberAnimation {
duration: 500
}
}
MaterialSymbol { text: "schedule"; color: Appearance.colors.colOnTooltip }
StyledText { text: Battery.isCharging ? Translation.tr("Time to full:") : Translation.tr("Time to empty:"); color: Appearance.colors.colOnTooltip }
MaterialSymbol {
text: "schedule"
color: Appearance.colors.colOnSurfaceVariant
iconSize: Appearance.font.pixelSize.large
}
StyledText {
text: Battery.isCharging ? Translation.tr("Time to full:") : Translation.tr("Time to empty:")
color: Appearance.colors.colOnSurfaceVariant
}
StyledText {
Layout.fillWidth: true
horizontalAlignment: Text.AlignRight
color: Appearance.colors.colOnTooltip
color: Appearance.colors.colOnSurfaceVariant
text: {
function formatTime(seconds) {
var h = Math.floor(seconds / 3600);
@@ -62,27 +96,17 @@ Rectangle {
property bool rowVisible: !(Battery.chargeState != 4 && Battery.energyRate == 0)
visible: rowVisible
opacity: rowVisible ? 1 : 0
Behavior on opacity { NumberAnimation { duration: 500 } }
MaterialSymbol {
text: {
if (Battery.isCharging) {
return "power";
} else if (Battery.percentage >= 0.8) {
return "battery_full";
} else if (Battery.percentage >= 0.6) {
return "battery_5_bar";
} else if (Battery.percentage >= 0.4) {
return "battery_4_bar";
} else if (Battery.percentage >= 0.2) {
return "battery_2_bar";
} else {
return "battery_0_bar";
}
Behavior on opacity {
NumberAnimation {
duration: 500
}
color: Appearance.colors.colOnTooltip
}
MaterialSymbol {
text: "bolt"
color: Appearance.colors.colOnSurfaceVariant
iconSize: Appearance.font.pixelSize.large
}
StyledText {
text: {
@@ -94,13 +118,13 @@ Rectangle {
return Translation.tr("Discharging:");
}
}
color: Appearance.colors.colOnTooltip
color: Appearance.colors.colOnSurfaceVariant
}
StyledText {
Layout.fillWidth: true
horizontalAlignment: Text.AlignRight
color: Appearance.colors.colOnTooltip
color: Appearance.colors.colOnSurfaceVariant
text: {
if (Battery.chargeState == 4) {
return "";
@@ -110,6 +134,5 @@ Rectangle {
}
}
}
}
}
.config/quickshell/ii/modules/bar/ClockWidget.qml
+80 -74
View File
@@ -39,80 +39,6 @@ Item {
property string formattedUptime: DateTime.uptime
property string todosSection: getUpcomingTodos()
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
acceptedButtons: Qt.NoButton
}
StyledPopup {
hoverTarget: mouseArea
contentComponent: Rectangle {
id: datePopup
readonly property real margin: 12
implicitWidth: columnLayout.implicitWidth + margin * 2
implicitHeight: columnLayout.implicitHeight + margin * 2
color: Appearance.colors.colTooltip
radius: Appearance.rounding.small
clip: true
ColumnLayout {
id: columnLayout
anchors.centerIn: parent
spacing: 8
// Date + Time row
RowLayout {
spacing: 5
Layout.fillWidth: true
StyledText {
Layout.fillWidth: true
horizontalAlignment: Text.AlignLeft
color: Appearance.colors.colOnTooltip
text: `${root.formattedDate} • ${root.formattedTime}`
}
}
// Uptime row
RowLayout {
spacing: 5
Layout.fillWidth: true
MaterialSymbol { text: "timelapse"; color: Appearance.colors.colOnTooltip }
StyledText { text: Translation.tr("System uptime:"); color: Appearance.colors.colOnTooltip }
StyledText {
Layout.fillWidth: true
horizontalAlignment: Text.AlignRight
color: Appearance.colors.colOnTooltip
text: root.formattedUptime
}
}
// Tasks
ColumnLayout {
spacing: 2
Layout.fillWidth: true
RowLayout {
spacing: 5
Layout.fillWidth: true
MaterialSymbol { text: "checklist"; color: Appearance.colors.colOnTooltip }
StyledText { text: Translation.tr("To Do:"); color: Appearance.colors.colOnTooltip }
}
StyledText {
Layout.fillWidth: true
topPadding: 5
horizontalAlignment: Text.AlignLeft
wrapMode: Text.Wrap
color: Appearance.colors.colOnTooltip
text: root.todosSection
}
}
}
}
}
RowLayout {
id: rowLayout
anchors.centerIn: parent
@@ -140,4 +66,84 @@ Item {
}
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
acceptedButtons: Qt.NoButton
}
StyledPopup {
hoverTarget: mouseArea
contentComponent: Rectangle {
id: datePopup
readonly property real margin: 12
implicitWidth: columnLayout.implicitWidth + margin * 2
implicitHeight: columnLayout.implicitHeight + margin * 2
color: Appearance.colors.colSurfaceContainer
radius: Appearance.rounding.small
clip: true
ColumnLayout {
id: columnLayout
anchors.centerIn: parent
spacing: 4
// Date + Time row
RowLayout {
spacing: 5
MaterialSymbol {
fill: 0
font.weight: Font.Medium
text: "calendar_month"
iconSize: Appearance.font.pixelSize.large
color: Appearance.colors.colOnSurfaceVariant
}
StyledText {
horizontalAlignment: Text.AlignLeft
color: Appearance.colors.colOnSurfaceVariant
text: `${root.formattedDate} • ${root.formattedTime}`
font.weight: Font.Medium
}
}
// Uptime row
RowLayout {
spacing: 5
Layout.fillWidth: true
MaterialSymbol { text: "timelapse"; color: Appearance.colors.colOnSurfaceVariant; font.pixelSize: Appearance.font.pixelSize.large }
StyledText { text: Translation.tr("System uptime:"); color: Appearance.colors.colOnSurfaceVariant }
StyledText {
Layout.fillWidth: true
horizontalAlignment: Text.AlignRight
color: Appearance.colors.colOnSurfaceVariant
text: root.formattedUptime
}
}
// Tasks
ColumnLayout {
spacing: 0
Layout.fillWidth: true
RowLayout {
spacing: 4
Layout.fillWidth: true
MaterialSymbol { text: "checklist"; color: Appearance.colors.colOnSurfaceVariant; font.pixelSize: Appearance.font.pixelSize.large }
StyledText { text: Translation.tr("To Do:"); color: Appearance.colors.colOnSurfaceVariant }
}
StyledText {
Layout.fillWidth: true
horizontalAlignment: Text.AlignLeft
wrapMode: Text.Wrap
color: Appearance.colors.colOnSurfaceVariant
text: root.todosSection
}
}
}
}
}
}
.config/quickshell/ii/modules/bar/Resource.qml
+80 -89
View File
@@ -10,6 +10,9 @@ Item {
id: root
required property string iconName
required property double percentage
property var tooltipData: [{ icon: "info", label: "System resource", value: "" }]
property var tooltipHeaderIcon
property var tooltipHeaderText
property bool shown: true
clip: true
visible: width > 0 && height > 0
@@ -21,95 +24,6 @@ Item {
return (kb / (1024 * 1024)).toFixed(1) + " GB"
}
// Generate tooltip content based on resource type
property var tooltipData: {
switch(iconName) {
case "memory":
return [
{ icon: "memory", label: Translation.tr("Memory Usage"), value: "" },
{ icon: "clock_loader_60", label: Translation.tr("Used:"), value: formatKB(ResourceUsage.memoryUsed) },
{ icon: "check_circle", label: Translation.tr("Free:"), value: formatKB(ResourceUsage.memoryFree) },
{ icon: "empty_dashboard", label: Translation.tr("Total:"), value: formatKB(ResourceUsage.memoryTotal) },
]
case "swap_horiz":
return ResourceUsage.swapTotal > 0 ?
[
{ icon: "swap_horiz", label: Translation.tr("Swap Usage"), value: "" },
{ icon: "clock_loader_60", label: Translation.tr("Used:"), value: formatKB(ResourceUsage.swapUsed) },
{ icon: "check_circle", label: Translation.tr("Free:"), value: formatKB(ResourceUsage.swapFree) },
{ icon: "empty_dashboard", label: Translation.tr("Total:"), value: formatKB(ResourceUsage.swapTotal) },
] :
[
{ icon: "swap_horiz", label: Translation.tr("Swap:"), value: Translation.tr("Not configured") }
]
case "settings_slow_motion":
return [
{ icon: "settings_slow_motion", label: Translation.tr("CPU Usage"), value: "" },
{ icon: "bolt", label: Translation.tr("Load:"), value: (ResourceUsage.cpuUsage > 0.8 ?
Translation.tr("High") :
ResourceUsage.cpuUsage > 0.4 ? Translation.tr("Medium") : Translation.tr("Low"))
+ ` (${Math.round(ResourceUsage.cpuUsage * 100)}%)`
}
]
default:
return [
{ icon: "info", label: Translation.tr("System Resource"), value: "" }
]
}
}
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
acceptedButtons: Qt.NoButton
enabled: resourceRowLayout.x >= 0 && root.width > 0 && root.visible
}
StyledPopup {
hoverTarget: mouseArea
contentComponent: Rectangle {
id: resourcePopup
readonly property real margin: 10
implicitWidth: columnLayout.implicitWidth + margin * 2
implicitHeight: columnLayout.implicitHeight + margin * 2
color: Appearance.colors.colTooltip
radius: Appearance.rounding.small
clip: true
ColumnLayout {
id: columnLayout
anchors.centerIn: parent
spacing: 6
Repeater {
model: root.tooltipData
delegate: RowLayout {
spacing: 5
Layout.fillWidth: true
MaterialSymbol {
text: modelData.icon
color: Appearance.colors.colOnTooltip
}
StyledText {
text: modelData.label
color: Appearance.colors.colOnTooltip
}
StyledText {
Layout.fillWidth: true
horizontalAlignment: Text.AlignRight
visible: modelData.value !== ""
color: Appearance.colors.colOnTooltip
text: modelData.value
}
}
}
}
}
}
RowLayout {
spacing: 4
id: resourceRowLayout
@@ -146,6 +60,83 @@ Item {
}
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
acceptedButtons: Qt.NoButton
enabled: resourceRowLayout.x >= 0 && root.width > 0 && root.visible
}
StyledPopup {
hoverTarget: mouseArea
contentComponent: Rectangle {
id: resourcePopup
readonly property real margin: 10
implicitWidth: columnLayout.implicitWidth + margin * 2
implicitHeight: columnLayout.implicitHeight + margin * 2
color: Appearance.colors.colSurfaceContainer
radius: Appearance.rounding.small
clip: true
ColumnLayout {
id: columnLayout
anchors.centerIn: parent
spacing: 4
// Header
RowLayout {
id: header
spacing: 5
MaterialSymbol {
fill: 0
font.weight: Font.Medium
text: root.tooltipHeaderIcon
iconSize: Appearance.font.pixelSize.large
color: Appearance.colors.colOnSurfaceVariant
}
StyledText {
text: root.tooltipHeaderText
font {
weight: Font.Medium
pixelSize: Appearance.font.pixelSize.normal
}
color: Appearance.colors.colOnSurfaceVariant
}
}
// Info rows
Repeater {
model: root.tooltipData
delegate: RowLayout {
spacing: 5
Layout.fillWidth: true
MaterialSymbol {
text: modelData.icon
color: Appearance.colors.colOnSurfaceVariant
iconSize: Appearance.font.pixelSize.large
}
StyledText {
text: modelData.label
color: Appearance.colors.colOnSurfaceVariant
}
StyledText {
Layout.fillWidth: true
horizontalAlignment: Text.AlignRight
visible: modelData.value !== ""
color: Appearance.colors.colOnSurfaceVariant
text: modelData.value
}
}
}
}
}
}
Behavior on implicitWidth {
NumberAnimation {
duration: Appearance.animation.elementMove.duration
.config/quickshell/ii/modules/bar/Resources.qml
+29
View File
@@ -1,6 +1,7 @@
import qs.modules.common
import qs.modules.common.widgets
import qs.services
import qs
import QtQuick
import QtQuick.Layouts
@@ -22,6 +23,14 @@ Item {
Resource {
iconName: "memory"
percentage: ResourceUsage.memoryUsedPercentage
tooltipHeaderIcon: "memory"
tooltipHeaderText: Translation.tr("Memory usage")
tooltipData: [
{ icon: "clock_loader_60", label: Translation.tr("Used:"), value: formatKB(ResourceUsage.memoryUsed) },
{ icon: "check_circle", label: Translation.tr("Free:"), value: formatKB(ResourceUsage.memoryFree) },
{ icon: "empty_dashboard", label: Translation.tr("Total:"), value: formatKB(ResourceUsage.memoryTotal) },
]
}
Resource {
@@ -31,6 +40,16 @@ Item {
(MprisController.activePlayer?.trackTitle == null) ||
root.alwaysShowAllResources
Layout.leftMargin: shown ? 4 : 0
tooltipHeaderIcon: "swap_horiz"
tooltipHeaderText: Translation.tr("Swap usage")
tooltipData: ResourceUsage.swapTotal > 0 ? [
{ icon: "clock_loader_60", label: Translation.tr("Used:"), value: formatKB(ResourceUsage.swapUsed) },
{ icon: "check_circle", label: Translation.tr("Free:"), value: formatKB(ResourceUsage.swapFree) },
{ icon: "empty_dashboard", label: Translation.tr("Total:"), value: formatKB(ResourceUsage.swapTotal) },
] : [
{ icon: "swap_horiz", label: Translation.tr("Swap:"), value: Translation.tr("Not configured") }
]
}
Resource {
@@ -40,6 +59,16 @@ Item {
!(MprisController.activePlayer?.trackTitle?.length > 0) ||
root.alwaysShowAllResources
Layout.leftMargin: shown ? 4 : 0
tooltipHeaderIcon: "settings_slow_motion"
tooltipHeaderText: Translation.tr("CPU usage")
tooltipData: [
{ icon: "bolt", label: Translation.tr("Load:"), value: (ResourceUsage.cpuUsage > 0.8 ?
Translation.tr("High") :
ResourceUsage.cpuUsage > 0.4 ? Translation.tr("Medium") : Translation.tr("Low"))
+ ` (${Math.round(ResourceUsage.cpuUsage * 100)}%)`
}
]
}
}
.config/quickshell/ii/modules/bar/weather/WeatherCard.qml
+4 -4
View File
@@ -7,7 +7,7 @@ import qs.modules.common.widgets
Rectangle {
id: root
radius: Appearance.rounding.small
color: Appearance.colors.colTooltip
color: Appearance.colors.colSurfaceContainerHigh
implicitWidth: columnLayout.implicitWidth + 14 * 2
implicitHeight: columnLayout.implicitHeight + 14 * 2
Layout.fillWidth: parent
@@ -26,19 +26,19 @@ Rectangle {
id: symbol
fill: 0
iconSize: Appearance.font.pixelSize.normal
color: Appearance.colors.colOnTooltip
color: Appearance.colors.colOnSurfaceVariant
}
StyledText {
id: title
font.pixelSize: Appearance.font.pixelSize.smaller
color: Appearance.colors.colOnTooltip
color: Appearance.colors.colOnSurfaceVariant
}
}
StyledText {
id: value
Layout.alignment: Qt.AlignHCenter
font.pixelSize: Appearance.font.pixelSize.small
color: Appearance.colors.colOnTooltip
color: Appearance.colors.colOnSurfaceVariant
}
}
}
.config/quickshell/ii/modules/bar/weather/WeatherPopup.qml
+10 -7
View File
@@ -11,7 +11,7 @@ Rectangle {
readonly property real margin: 10
implicitWidth: columnLayout.implicitWidth + margin * 2
implicitHeight: columnLayout.implicitHeight + margin * 2
color: Appearance.colors.colTooltip
color: Appearance.colors.colSurfaceContainer
radius: Appearance.rounding.small
clip: true
@@ -26,20 +26,23 @@ Rectangle {
RowLayout {
id: header
spacing: 5
Layout.fillWidth: parent
Layout.alignment: Qt.AlignHCenter
MaterialSymbol {
fill: 0
font.weight: Font.Medium
text: "location_on"
iconSize: Appearance.font.pixelSize.huge
color: Appearance.colors.colOnTooltip
iconSize: Appearance.font.pixelSize.large
color: Appearance.colors.colOnSurfaceVariant
}
StyledText {
text: Weather.data.city
font.pixelSize: Appearance.font.pixelSize.title
font.family: Appearance.font.family.title
color: Appearance.colors.colOnTooltip
font {
weight: Font.Medium
pixelSize: Appearance.font.pixelSize.normal
}
color: Appearance.colors.colOnSurfaceVariant
}
}
.config/quickshell/ii/modules/common/Appearance.qml
+2
View File
@@ -141,6 +141,8 @@ Singleton {
property color colSurfaceContainerHighest: ColorUtils.transparentize(m3colors.m3surfaceContainerHighest, root.contentTransparency)
property color colSurfaceContainerHighestHover: ColorUtils.mix(m3colors.m3surfaceContainerHighest, m3colors.m3onSurface, 0.95)
property color colSurfaceContainerHighestActive: ColorUtils.mix(m3colors.m3surfaceContainerHighest, m3colors.m3onSurface, 0.85)
property color colOnSurface: m3colors.m3onSurface
property color colOnSurfaceVariant: m3colors.m3onSurfaceVariant
property color colTooltip: m3colors.m3inverseSurface
property color colOnTooltip: m3colors.m3inverseOnSurface
property color colScrim: ColorUtils.transparentize(m3colors.m3scrim, 0.5)