diff --git a/.config/quickshell/ii/modules/bar/BatteryPopup.qml b/.config/quickshell/ii/modules/bar/BatteryPopup.qml index 4138aad8c..cfe16ef73 100644 --- a/.config/quickshell/ii/modules/bar/BatteryPopup.qml +++ b/.config/quickshell/ii/modules/bar/BatteryPopup.qml @@ -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 { } } } - } } diff --git a/.config/quickshell/ii/modules/bar/ClockWidget.qml b/.config/quickshell/ii/modules/bar/ClockWidget.qml index 9a4fce4f0..1523cebd2 100644 --- a/.config/quickshell/ii/modules/bar/ClockWidget.qml +++ b/.config/quickshell/ii/modules/bar/ClockWidget.qml @@ -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 + } + } + } + } + } + } diff --git a/.config/quickshell/ii/modules/bar/Resource.qml b/.config/quickshell/ii/modules/bar/Resource.qml index bc60575dc..8b0eb1633 100644 --- a/.config/quickshell/ii/modules/bar/Resource.qml +++ b/.config/quickshell/ii/modules/bar/Resource.qml @@ -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 diff --git a/.config/quickshell/ii/modules/bar/Resources.qml b/.config/quickshell/ii/modules/bar/Resources.qml index f57372a18..8d39de037 100644 --- a/.config/quickshell/ii/modules/bar/Resources.qml +++ b/.config/quickshell/ii/modules/bar/Resources.qml @@ -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)}%)` + } + ] } } diff --git a/.config/quickshell/ii/modules/bar/weather/WeatherCard.qml b/.config/quickshell/ii/modules/bar/weather/WeatherCard.qml index 03b9a189c..e75dda32f 100644 --- a/.config/quickshell/ii/modules/bar/weather/WeatherCard.qml +++ b/.config/quickshell/ii/modules/bar/weather/WeatherCard.qml @@ -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 } } } diff --git a/.config/quickshell/ii/modules/bar/weather/WeatherPopup.qml b/.config/quickshell/ii/modules/bar/weather/WeatherPopup.qml index 91269e2a2..1e7c39504 100644 --- a/.config/quickshell/ii/modules/bar/weather/WeatherPopup.qml +++ b/.config/quickshell/ii/modules/bar/weather/WeatherPopup.qml @@ -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 } } diff --git a/.config/quickshell/ii/modules/common/Appearance.qml b/.config/quickshell/ii/modules/common/Appearance.qml index 9c9374860..e71eb4274 100644 --- a/.config/quickshell/ii/modules/common/Appearance.qml +++ b/.config/quickshell/ii/modules/common/Appearance.qml @@ -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)