Shinonome/dots-hyprland
1
0
Fork 1
mirror of https://github.com/end-4/dots-hyprland.git synced 2026-06-05 23:09:26 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

refractor bar tooltips

Browse Source
This commit is contained in:
end-4
2025-11-06 21:35:31 +01:00
parent 281646ef0c
commit 06c51553ba
9 changed files with 184 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dots/.config/quickshell/ii/modules/bar/BatteryPopup.qml
+38 -123
View File
@@ -13,143 +13,58 @@ StyledPopup {
spacing: 4
// Header
Row {
id: header
spacing: 5
MaterialSymbol {
anchors.verticalCenter: parent.verticalCenter
fill: 0
font.weight: Font.Medium
text: "battery_android_full"
iconSize: Appearance.font.pixelSize.large
color: Appearance.colors.colOnSurfaceVariant
}
StyledText {
anchors.verticalCenter: parent.verticalCenter
text: "Battery"
font {
weight: Font.Medium
pixelSize: Appearance.font.pixelSize.normal
}
color: Appearance.colors.colOnSurfaceVariant
}
StyledPopupHeaderRow {
icon: "battery_android_full"
label: Translation.tr("Battery")
}
// This row is hidden when the battery is full.
RowLayout {
spacing: 5
Layout.fillWidth: true
property bool rowVisible: {
StyledPopupValueRow {
visible: {
let timeValue = Battery.isCharging ? Battery.timeToFull : Battery.timeToEmpty;
let power = Battery.energyRate;
return !(Battery.chargeState == 4 || timeValue <= 0 || power <= 0.01);
}
visible: rowVisible
opacity: rowVisible ? 1 : 0
Behavior on opacity {
NumberAnimation {
duration: 500
}
}
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.colOnSurfaceVariant
text: {
function formatTime(seconds) {
var h = Math.floor(seconds / 3600);
var m = Math.floor((seconds % 3600) / 60);
if (h > 0)
return `${h}h, ${m}m`;
else
return `${m}m`;
}
if (Battery.isCharging)
return formatTime(Battery.timeToFull);
icon: "schedule"
label: Battery.isCharging ? Translation.tr("Time to full:") : Translation.tr("Time to empty:")
value: {
function formatTime(seconds) {
var h = Math.floor(seconds / 3600);
var m = Math.floor((seconds % 3600) / 60);
if (h > 0)
return `${h}h, ${m}m`;
else
return formatTime(Battery.timeToEmpty);
return `${m}m`;
}
if (Battery.isCharging)
return formatTime(Battery.timeToFull);
else
return formatTime(Battery.timeToEmpty);
}
}
RowLayout {
spacing: 5
visible: Battery.health > 0
Layout.fillWidth: true
StyledPopupValueRow {
icon: "heart_check"
label: Translation.tr("Health:")
value: `${(Battery.health).toFixed(1)}%`
}
MaterialSymbol {
text: "heart_check"
color: Appearance.colors.colOnSurfaceVariant
iconSize: Appearance.font.pixelSize.large
}
StyledText {
text: Translation.tr("Health:")
color: Appearance.colors.colOnSurfaceVariant
}
StyledText {
Layout.fillWidth: true
horizontalAlignment: Text.AlignRight
color: Appearance.colors.colOnSurfaceVariant
text: `${(Battery.health).toFixed(1)}%`
StyledPopupValueRow {
visible: !(Battery.chargeState != 4 && Battery.energyRate == 0)
icon: "bolt"
label: {
if (Battery.chargeState == 4) {
return Translation.tr("Fully charged");
} else if (Battery.chargeState == 1) {
return Translation.tr("Charging:");
} else {
return Translation.tr("Discharging:");
}
}
RowLayout {
spacing: 5
Layout.fillWidth: true
property bool rowVisible: !(Battery.chargeState != 4 && Battery.energyRate == 0)
visible: rowVisible
opacity: rowVisible ? 1 : 0
Behavior on opacity {
NumberAnimation {
duration: 500
}
}
MaterialSymbol {
text: "bolt"
color: Appearance.colors.colOnSurfaceVariant
iconSize: Appearance.font.pixelSize.large
}
StyledText {
text: {
if (Battery.chargeState == 4) {
return Translation.tr("Fully charged");
} else if (Battery.chargeState == 1) {
return Translation.tr("Charging:");
} else {
return Translation.tr("Discharging:");
}
}
color: Appearance.colors.colOnSurfaceVariant
}
StyledText {
Layout.fillWidth: true
horizontalAlignment: Text.AlignRight
color: Appearance.colors.colOnSurfaceVariant
text: {
if (Battery.chargeState == 4) {
return "";
} else {
return `${Battery.energyRate.toFixed(2)}W`;
}
value: {
if (Battery.chargeState == 4) {
return "";
} else {
return `${Battery.energyRate.toFixed(2)}W`;
}
}
}
dots/.config/quickshell/ii/modules/bar/ClockWidget.qml
+1 -1
View File
@@ -43,7 +43,7 @@ Item {
hoverEnabled: true
acceptedButtons: Qt.NoButton
ClockWidgetTooltip {
ClockWidgetPopup {
hoverTarget: mouseArea
}
}
dots/.config/quickshell/ii/modules/bar/ClockWidgetPopup.qml
+70
View File
@@ -0,0 +1,70 @@
import qs.modules.common
import qs.modules.common.widgets
import qs.services
import QtQuick
import QtQuick.Layouts
StyledPopup {
id: root
property string formattedDate: Qt.locale().toString(DateTime.clock.date, "dddd, MMMM dd, yyyy")
property string formattedTime: DateTime.time
property string formattedUptime: DateTime.uptime
property string todosSection: getUpcomingTodos()
function getUpcomingTodos() {
const unfinishedTodos = Todo.list.filter(function (item) {
return !item.done;
});
if (unfinishedTodos.length === 0) {
return Translation.tr("No pending tasks");
}
// Limit to first 5 todos to keep popup manageable
const limitedTodos = unfinishedTodos.slice(0, 5);
let todoText = limitedTodos.map(function (item, index) {
return ` ${index + 1}. ${item.content}`;
}).join('\n');
if (unfinishedTodos.length > 5) {
todoText += `\n ${Translation.tr("... and %1 more").arg(unfinishedTodos.length - 5)}`;
}
return todoText;
}
ColumnLayout {
id: columnLayout
anchors.centerIn: parent
spacing: 4
StyledPopupHeaderRow {
icon: "calendar_month"
label: root.formattedDate
}
StyledPopupValueRow {
icon: "timelapse"
label: Translation.tr("System uptime:")
value: root.formattedUptime
}
// Tasks
Column {
spacing: 0
Layout.fillWidth: true
StyledPopupValueRow {
icon: "checklist"
label: Translation.tr("To Do:")
value: ""
}
StyledText {
horizontalAlignment: Text.AlignLeft
wrapMode: Text.Wrap
color: Appearance.colors.colOnSurfaceVariant
text: root.todosSection
}
}
}
}
dots/.config/quickshell/ii/modules/bar/ClockWidgetTooltip.qml
-110
View File
@@ -1,110 +0,0 @@
import qs.modules.common
import qs.modules.common.widgets
import qs.services
import QtQuick
import QtQuick.Layouts
StyledPopup {
id: root
property string formattedDate: Qt.locale().toString(DateTime.clock.date, "dddd, MMMM dd, yyyy")
property string formattedTime: DateTime.time
property string formattedUptime: DateTime.uptime
property string todosSection: getUpcomingTodos()
function getUpcomingTodos() {
const unfinishedTodos = Todo.list.filter(function (item) {
return !item.done;
});
if (unfinishedTodos.length === 0) {
return Translation.tr("No pending tasks");
}
// Limit to first 5 todos to keep popup manageable
const limitedTodos = unfinishedTodos.slice(0, 5);
let todoText = limitedTodos.map(function (item, index) {
return `${index + 1}. ${item.content}`;
}).join('\n');
if (unfinishedTodos.length > 5) {
todoText += `\n${Translation.tr("... and %1 more").arg(unfinishedTodos.length - 5)}`;
}
return todoText;
}
ColumnLayout {
id: columnLayout
anchors.centerIn: parent
spacing: 4
// Date + Time row
Row {
spacing: 5
MaterialSymbol {
anchors.verticalCenter: parent.verticalCenter
fill: 0
font.weight: Font.Medium
text: "calendar_month"
iconSize: Appearance.font.pixelSize.large
color: Appearance.colors.colOnSurfaceVariant
}
StyledText {
anchors.verticalCenter: parent.verticalCenter
horizontalAlignment: Text.AlignLeft
color: Appearance.colors.colOnSurfaceVariant
text: `${root.formattedDate}`
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
Column {
spacing: 0
Layout.fillWidth: true
Row {
spacing: 4
MaterialSymbol {
anchors.verticalCenter: parent.verticalCenter
text: "checklist"
color: Appearance.colors.colOnSurfaceVariant
font.pixelSize: Appearance.font.pixelSize.large
}
StyledText {
anchors.verticalCenter: parent.verticalCenter
text: Translation.tr("To Do:")
color: Appearance.colors.colOnSurfaceVariant
}
}
StyledText {
horizontalAlignment: Text.AlignLeft
wrapMode: Text.Wrap
color: Appearance.colors.colOnSurfaceVariant
text: root.todosSection
}
}
}
}
dots/.config/quickshell/ii/modules/bar/ResourcesPopup.qml
+11 -62
View File
@@ -12,57 +12,6 @@ StyledPopup {
return (kb / (1024 * 1024)).toFixed(1) + " GB";
}
component ResourceItem: RowLayout {
id: resourceItem
required property string icon
required property string label
required property string value
spacing: 4
MaterialSymbol {
text: resourceItem.icon
color: Appearance.colors.colOnSurfaceVariant
iconSize: Appearance.font.pixelSize.large
}
StyledText {
text: resourceItem.label
color: Appearance.colors.colOnSurfaceVariant
}
StyledText {
Layout.fillWidth: true
horizontalAlignment: Text.AlignRight
visible: resourceItem.value !== ""
color: Appearance.colors.colOnSurfaceVariant
text: resourceItem.value
}
}
component ResourceHeaderItem: Row {
id: headerItem
required property var icon
required property var label
spacing: 5
MaterialSymbol {
anchors.verticalCenter: parent.verticalCenter
fill: 0
font.weight: Font.Medium
text: headerItem.icon
iconSize: Appearance.font.pixelSize.large
color: Appearance.colors.colOnSurfaceVariant
}
StyledText {
anchors.verticalCenter: parent.verticalCenter
text: headerItem.label
font {
weight: Font.Medium
pixelSize: Appearance.font.pixelSize.normal
}
color: Appearance.colors.colOnSurfaceVariant
}
}
Row {
anchors.centerIn: parent
spacing: 12
@@ -71,23 +20,23 @@ StyledPopup {
anchors.top: parent.top
spacing: 8
ResourceHeaderItem {
StyledPopupHeaderRow {
icon: "memory"
label: "RAM"
}
Column {
spacing: 4
ResourceItem {
StyledPopupValueRow {
icon: "clock_loader_60"
label: Translation.tr("Used:")
value: root.formatKB(ResourceUsage.memoryUsed)
}
ResourceItem {
StyledPopupValueRow {
icon: "check_circle"
label: Translation.tr("Free:")
value: root.formatKB(ResourceUsage.memoryFree)
}
ResourceItem {
StyledPopupValueRow {
icon: "empty_dashboard"
label: Translation.tr("Total:")
value: root.formatKB(ResourceUsage.memoryTotal)
@@ -100,23 +49,23 @@ StyledPopup {
anchors.top: parent.top
spacing: 8
ResourceHeaderItem {
StyledPopupHeaderRow {
icon: "swap_horiz"
label: "Swap"
}
Column {
spacing: 4
ResourceItem {
StyledPopupValueRow {
icon: "clock_loader_60"
label: Translation.tr("Used:")
value: root.formatKB(ResourceUsage.swapUsed)
}
ResourceItem {
StyledPopupValueRow {
icon: "check_circle"
label: Translation.tr("Free:")
value: root.formatKB(ResourceUsage.swapFree)
}
ResourceItem {
StyledPopupValueRow {
icon: "empty_dashboard"
label: Translation.tr("Total:")
value: root.formatKB(ResourceUsage.swapTotal)
@@ -128,16 +77,16 @@ StyledPopup {
anchors.top: parent.top
spacing: 8
ResourceHeaderItem {
StyledPopupHeaderRow {
icon: "planner_review"
label: "CPU"
}
Column {
spacing: 4
ResourceItem {
StyledPopupValueRow {
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)}%)`
value: `${Math.round(ResourceUsage.cpuUsage * 100)}%`
}
}
}
dots/.config/quickshell/ii/modules/bar/StyledPopupHeaderRow.qml
+30
View File
@@ -0,0 +1,30 @@
import QtQuick
import QtQuick.Layouts
import qs.modules.common
import qs.modules.common.widgets
Row {
id: root
required property var icon
required property var label
spacing: 5
MaterialSymbol {
anchors.verticalCenter: parent.verticalCenter
fill: 0
font.weight: Font.DemiBold
text: root.icon
iconSize: Appearance.font.pixelSize.large
color: Appearance.colors.colOnSurfaceVariant
}
StyledText {
anchors.verticalCenter: parent.verticalCenter
text: root.label
font {
weight: Font.DemiBold
pixelSize: Appearance.font.pixelSize.normal
}
color: Appearance.colors.colOnSurfaceVariant
}
}
dots/.config/quickshell/ii/modules/bar/StyledPopupValueRow.qml
+29
View File
@@ -0,0 +1,29 @@
import QtQuick
import QtQuick.Layouts
import qs.modules.common
import qs.modules.common.widgets
RowLayout {
id: root
required property string icon
required property string label
required property string value
spacing: 4
MaterialSymbol {
text: root.icon
color: Appearance.colors.colOnSurfaceVariant
iconSize: Appearance.font.pixelSize.large
}
StyledText {
text: root.label
color: Appearance.colors.colOnSurfaceVariant
}
StyledText {
Layout.fillWidth: true
horizontalAlignment: Text.AlignRight
visible: root.value !== ""
color: Appearance.colors.colOnSurfaceVariant
text: root.value
}
}
dots/.config/quickshell/ii/modules/verticalBar/VerticalClockWidget.qml
+1 -1
View File
@@ -36,7 +36,7 @@ Item {
hoverEnabled: true
acceptedButtons: Qt.NoButton
Bar.ClockWidgetTooltip {
Bar.ClockWidgetPopup {
hoverTarget: mouseArea
}
}
dots/.config/quickshell/ii/modules/verticalBar/VerticalMedia.qml
+4 -21
View File
@@ -74,30 +74,13 @@ MouseArea {
anchors.centerIn: parent
spacing: 4
Row {
spacing: 4
MaterialSymbol {
anchors.verticalCenter: parent.verticalCenter
fill: 0
font.weight: Font.Medium
text: "music_note"
iconSize: Appearance.font.pixelSize.large
color: Appearance.colors.colOnSurfaceVariant
}
StyledText {
anchors.verticalCenter: parent.verticalCenter
text: "Media"
font {
weight: Font.Medium
pixelSize: Appearance.font.pixelSize.normal
}
color: Appearance.colors.colOnSurfaceVariant
}
Bar.StyledPopupHeaderRow {
icon: "music_note"
label: Translation.tr("Media")
}
StyledText {
color: Appearance.colors.colOnSurfaceVariant
text: `${cleanedTitle}${activePlayer?.trackArtist ? '\n' + activePlayer.trackArtist : ''}`
}
}