From cec5d8086a3c0a30756e46cbb8d21f9b3185d9cc Mon Sep 17 00:00:00 2001 From: Simon Redman Date: Wed, 14 Jul 2021 03:30:25 +0000 Subject: [PATCH] [Plasmoid] Use icon for battery and connectivity status ## Summary Use a pretty, granular icon for battery and connectivity status instead of whacking it into the device name. ## Test Plan It looks so nice! ![image](/uploads/7e64d1339507e1dae90ee70c02327aa6/image.png) Tested all provided icon states by hacking Battery.qml and Connectivity.qml to provide different values. --- plasmoid/package/contents/ui/Battery.qml | 27 ++++++ plasmoid/package/contents/ui/Connectivity.qml | 88 ++++++++++++++++++- .../package/contents/ui/DeviceDelegate.qml | 66 ++++++++++---- 3 files changed, 161 insertions(+), 20 deletions(-) diff --git a/plasmoid/package/contents/ui/Battery.qml b/plasmoid/package/contents/ui/Battery.qml index e9533a55e..4cc9aea73 100644 --- a/plasmoid/package/contents/ui/Battery.qml +++ b/plasmoid/package/contents/ui/Battery.qml @@ -26,6 +26,33 @@ QtObject { property string displayString: (available && charge > -1) ? ((charging) ? (i18n("%1% charging", charge)) : (i18n("%1%", charge))) : i18n("No info") property variant battery: null + /** + * Suggests an icon name to use for the current battery level + */ + readonly property string iconName: { + charge < 0 ? + "battery-missing-symbolic" : + charge < 10 ? + charging ? + "battery-empty-charging-symbolic" : + "battery-empty-symbolic" : + charge < 25 ? + charging ? + "battery-caution-charging-symbolic" : + "battery-caution-symbolic" : + charge < 50 ? + charging ? + "battery-low-charging-symbolic" : + "battery-low-symbolic" : + charge < 75 ? + charging ? + "battery-good-charging-symbolic" : + "battery-good-symbolic" : + charging ? + "battery-full-charging-symbolic": + "battery-full-symbolic" + } + onAvailableChanged: { if (available) { battery = DeviceBatteryDbusInterfaceFactory.create(device.id()) diff --git a/plasmoid/package/contents/ui/Connectivity.qml b/plasmoid/package/contents/ui/Connectivity.qml index 1f5ee223e..2ca2bd645 100644 --- a/plasmoid/package/contents/ui/Connectivity.qml +++ b/plasmoid/package/contents/ui/Connectivity.qml @@ -15,15 +15,35 @@ QtObject { property alias device: checker.device readonly property alias available: checker.available - readonly property bool ready: connectivity && connectivity.cellularNetworkType != "Unknown" && connectivity.cellularNetworkStrength > -1 + readonly property bool ready: connectivity readonly property PluginChecker pluginChecker: PluginChecker { id: checker pluginName: "connectivity_report" } - property string networkType: connectivity ? connectivity.cellularNetworkType : i18n("Unknown") - property int signalStrength: connectivity ? connectivity.cellularNetworkStrength : -1 + /** + * Reports a string indicating the network type. Possible values: + * 5G + * LTE + * HSPA + * UMTS + * CDMA2000 + * EDGE + * GPRS + * GSM + * CDMA + * iDEN + * + * The parsing from Android values into these strings is handled in the + * [ConnectivityReportPlugin.networkTypeToString method](https://invent.kde.org/network/kdeconnect-android/-/blob/master/src/org/kde/kdeconnect/Plugins/ConnectivityReportPlugin/ConnectivityReportPlugin.java#L82) + */ + readonly property string networkType: connectivity ? connectivity.cellularNetworkType : i18n("Unknown") + + /** + * Reports a value between 0 and 4 (inclusive) which represents the strength of the cellular connection + */ + readonly property int signalStrength: connectivity ? connectivity.cellularNetworkStrength : -1 property string displayString: { if (ready) { return `${networkType} ${signalStrength}/4`; @@ -33,6 +53,68 @@ QtObject { } property variant connectivity: null + /** + * Suggests an icon name to use for the current signal level + * + * Returns names which correspond to Plasma Framework's network.svg: + * https://invent.kde.org/frameworks/plasma-framework/-/blob/master/src/desktoptheme/breeze/icons/network.svg + */ + readonly property string iconName: { + // Firstly, get the name prefix which represents the signal strength + var signalStrengthIconName = + (signalStrength < 0 || !ready) ? + // As long as the signal strength is nonsense or the plugin reports as non-ready, + // show us as disconnected + "network-mobile-off" : + (signalStrength == 0) ? + "network-mobile-0" : + (signalStrength == 1) ? + "network-mobile-20" : + (signalStrength == 2) ? + "network-mobile-60" : + (signalStrength == 3) ? + "network-mobile-80" : + (signalStrength == 4) ? + "network-mobile-100" : + // Since all possible values are enumerated above, this default case should never be hit. + // However, I need it in order for my ternary syntax to be valid! + "network-mobile-available" + + // If we understand the network type, append to the icon name to show the type + var networkTypeSuffix = + (networkType === "5G") ? + // No icon for this case! + "" : + (networkType === "LTE") ? + "-lte" : + (networkType === "HSPA") ? + "-hspa" : + (networkType === "UMTS") ? + "-umts" : + (networkType === "CDMA2000") ? + // GSconnect just uses the 3g icon + // No icon for this case! + "" : + (networkType === "EDGE") ? + "-edge" : + (networkType === "GPRS") ? + "-gprs" : + (networkType === "GSM") ? + // GSconnect just uses the 2g icon + // No icon for this case! + "" : + (networkType === "CDMA") ? + // GSconnect just uses the 2g icon + // No icon for this case! + "" : + (networkType === "iDEN") ? + // GSconnect just uses the 2g icon + // No icon for this case! + "" : + "" // We didn't recognize the network type. Don't append anything. + return signalStrengthIconName + networkTypeSuffix + } + onAvailableChanged: { if (available) { connectivity = DeviceConnectivityReportDbusInterfaceFactory.create(device.id()) diff --git a/plasmoid/package/contents/ui/DeviceDelegate.qml b/plasmoid/package/contents/ui/DeviceDelegate.qml index abb563dbb..056ac47a9 100644 --- a/plasmoid/package/contents/ui/DeviceDelegate.qml +++ b/plasmoid/package/contents/ui/DeviceDelegate.qml @@ -72,27 +72,59 @@ PlasmaComponents.ListItem PlasmaComponents.Label { id: deviceName elide: Text.ElideRight - text: { - let statuses = []; - - if (connectivity.available) { - statuses.push(connectivity.displayString); - } - - if (battery.available && battery.charge > -1) { - statuses.push(i18nc("Display the battery charge percentage with the label \"Battery:\" so the user knows what is being displayed", "Battery: %1", battery.displayString)); - } - - if (statuses.length > 0) { - return i18n("%1 (%2)", display, statuses.join(", ")); - } else { - return display; - } - } + text: display Layout.fillWidth: true textFormat: Text.PlainText } + RowLayout + { + id: connectionInformation + visible: connectivity.available + + // TODO: In the future, when the Connectivity Report plugin supports more than one + // subscription, add more signal strength icons to represent all the available + // connections. + + PlasmaCore.IconItem { + id: celluarConnectionStrengthIcon + source: connectivity.iconName + Layout.preferredHeight: connectivityText.height + Layout.preferredWidth: Layout.preferredHeight + Layout.alignment: Qt.AlignCenter + visible: valid + } + + PlasmaComponents.Label { + // Fallback plain-text label. Only show this if the icon doesn't work. + id: connectivityText + text: connectivity.displayString + textFormat: Text.PlainText + visible: !celluarConnectionStrengthIcon.visible + } + } + + RowLayout + { + id: batteryInformation + visible: (battery.available && battery.charge > -1) + + PlasmaCore.IconItem { + id: batteryIcon + source: battery.iconName + // Make the icon the same size as the text so that it doesn't dominate + Layout.preferredHeight: batteryPercent.height + Layout.preferredWidth: Layout.preferredHeight + Layout.alignment: Qt.AlignCenter + } + + PlasmaComponents.Label { + id: batteryPercent + text: i18nc("Battery charge percentage", "%1%", battery.charge) + textFormat: Text.PlainText + } + } + PlasmaComponents3.ToolButton { id: overflowMenu icon.name: "application-menu"