feat(ui): Redesign NodeItem for improved clarity and density#4475
Merged
Conversation
This commit redesigns the `NodeItem` composable for a more compact and organized presentation of node information. Key changes: - Restructured `NodeItem` into a clearer layout with distinct header, metrics, and footer sections. - Metrics are now organized into logical rows and a responsive `FlowRow` for environmental sensor data, adapting to available space. - Introduced labels for all `IconInfo` components to clarify the meaning of each metric (e.g., Temp, Hum, Sats). - Refined the visual styling of `IconInfo`, `MaterialBatteryInfo`, and `SignalInfo` for a cleaner and more consistent look. - Updated `SignalInfo` to provide a more detailed and compact summary including SNR, RSSI, and signal quality text. - Shortened several string resources for a more condensed UI. - Added a fallback to "unknown" in `formatAgo` for invalid `lastHeard` timestamps. Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
The `Chart` icon in the `TelemetricActionsSection` has been replaced with the more visually appropriate `LineAxis` icon from the Material library. This provides a clearer representation for the "logs" action. Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #4475 +/- ##
========================================
- Coverage 8.56% 8.56% -0.01%
========================================
Files 427 427
Lines 14324 14326 +2
Branches 2382 2383 +1
========================================
Hits 1227 1227
- Misses 12875 12877 +2
Partials 222 222 ☔ View full report in Codecov by Sentry. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request focuses on improving the UI consistency and readability by updating string resources to use shorter labels, refining icon and text styling in information components, and making minor adjustments to layout and sizing. The most important changes are grouped below by theme.
UI Text and String Resource Updates:
channel,channel_utilization,air_utilization,temperature,humidity,soil_temperature,soil_moisture, andbaro_pressureto concise forms (e.g., "Ch", "ChUtil", "Temp", "Hum", "Baro") instrings.xmlfor more compact UI display. [1] [2] [3]IconInfo Component Enhancements:
IconInfoto support an optionallabelparameter, improved text styling for label and value, reduced icon size to 14dp, and adjusted color opacity for better visual hierarchy. [1] [2]IconInfoto include the new label parameter and improved layout. [1] [2] [3] [4] [5] [6]Battery Info Component Improvements:
MaterialBatteryInfostyling: reduced icon size, adjusted spacing, improved text color and font weight for battery percentage and voltage, and fixed label typo ("PWD" to "PWR"). [1] [2] [3] [4]Signal Indicator Component Updates:
SnrandRssi, and improved text styling for signal quality display. [1] [2] [3] [4] [5]Layout and Sizing Adjustments:
NodeChipto allow for more compact node display.These changes collectively enhance the clarity and consistency of the UI, making information easier to read and the interface more visually appealing.