Merge pull request mecha-org#164 from swetar-mecha/settings-app/ui-im…

…provements settings app: update ui
namana-mecha · Jan 3, 2025 · 34a191a · 34a191a
2 parents de8de15 + d8b6867
commit 34a191a
Show file tree

Hide file tree

Showing 16 changed files with 118 additions and 175 deletions.
diff --git a/apps/Cargo.toml b/apps/Cargo.toml
@@ -6,7 +6,7 @@ members = [
 default-members = ["settings-app", "camera",  "files"]
 
 [workspace.package]
-version = "0.1.8"
+version = "0.1.9"
 authors = [
    "Sweta <[email protected]>", 
    "Naman <[email protected]>",

diff --git a/apps/settings-app/src/components.rs b/apps/settings-app/src/components.rs
@@ -64,7 +64,7 @@ macro_rules! header_node {
             node!(
                 Div::new(),
                 lay![
-                    size_pct: [70, Auto],
+                    size_pct: [72, Auto],
                     axis_alignment: Alignment::Start,
                     cross_alignment: Alignment::Center,
                 ],
@@ -85,8 +85,8 @@ macro_rules! header_node {
                     .style("active_color", Color::rgba(85., 85., 85., 0.50))
                     .style("radius", 10.),
                 lay![
-                    size: [42, 42],
-                    padding: [0, 0, 0, 2.],
+                    size: [52, 52],
+                    padding: [0, 0, 0, 20.],
                     axis_alignment: Alignment::Start,
                     cross_alignment: Alignment::Center,
                 ]
@@ -95,22 +95,13 @@ macro_rules! header_node {
                 node!(
                     Div::new(),
                     lay![
-                        size_pct: [100, Auto],
+                        size_pct: [28, Auto],
                         direction: Direction::Column,
                         axis_alignment: Alignment::Start,
                     ]
                 )
                 .push(text_node),
             ),
-        )
-        .push(
-            node!(
-                Div::new(),
-                lay![
-                    size_pct: [30, Auto],
-                    axis_alignment: Alignment::End
-                ]
-            )
         );
 
         let result_node = node!(
@@ -674,8 +665,7 @@ macro_rules! radio_node {
             RadioButtons::new($options)
                 .selected($selcted_option)
                 .direction(mctk_core::layout::Direction::Column)
-                .style("font_size", 18.0)
-                .style("padding", 8.)
+                .with_class("text-xl leading-6 font-medium")
                 .max_columns(1)
                 .on_change($on_change),
             lay![
@@ -690,8 +680,7 @@ macro_rules! radio_node {
             RadioButtons::new($options)
                 .selected($selcted_option)
                 .direction(mctk_core::layout::Direction::Column)
-                .style("font_size", 18.0)
-                .style("padding", 8.)
+                .with_class("text-xl leading-6 font-medium")
                 .max_columns(1),
             lay![
                 size: [440, Auto],
@@ -886,7 +875,7 @@ pub fn single_detail_row(key_val_1: DetailRow) -> Node {
             Text::new(txt!(key_val_1.key.to_owned()))
                 .style("color", Color::rgba(255., 255., 255., 1.))
                 .style("font", "Inter")
-                .with_class("text-2xl leading-7 font-medium"),
+                .with_class("text-xl leading-6 font-medium"),
             lay![
                 margin: [0.0, 10.0, 0.0, 0.0],
             ]
@@ -898,13 +887,14 @@ pub fn single_detail_row(key_val_1: DetailRow) -> Node {
             lay![
                 size_pct: [60, Auto],
                 axis_alignment: Alignment::End,
+                padding: [0., 0., 0., 10.]
             ]
         )
         .push(node!(
             Text::new(txt!(key_val_1.value.trim().to_owned()))
                 .style("color", Color::rgba(197., 197., 197., 1.))
                 .style("font", "Inter")
-                .with_class("text-2xl leading-7 font-medium"),
+                .with_class("text-xl leading-6 font-medium"),
             lay![
                 axis_alignment: Alignment::End,
                 cross_alignment: Alignment::End,

diff --git a/apps/settings-app/src/screens/about/about_device.rs b/apps/settings-app/src/screens/about/about_device.rs
@@ -111,7 +111,7 @@ impl Component for AboutDevice {
                 Text::new(txt!(provision_machine_name.clone()))
                     .style("color", Color::WHITE)
                     .style("font", "Inter")
-                    .with_class("text-xl leading-6 font-medium"),
+                    .with_class("text-2xl leading-7 font-medium"),
                 lay![]
             )),
         )
@@ -161,7 +161,7 @@ impl Component for AboutDevice {
         )
         .push(single_detail_row(DetailRow {
             key: "Host name".to_string(),
-            value: format!("{}.local", os_info.hostname),
+            value: format!("{}.local ", os_info.hostname),
         }))
         .push(node!(HDivider {
             size: 0.8,
@@ -175,63 +175,50 @@ impl Component for AboutDevice {
             size: 0.8,
             color: Color::rgba(83., 83., 83., 1.)
         }))
-        .push(single_detail_row(
-            DetailRow {
-                key: "Wireless IP".to_string(),
-                value: wireless_ip_address.to_string(),
-
-            }
-        ))
+        .push(single_detail_row(DetailRow {
+            key: "Wireless IP".to_string(),
+            value: wireless_ip_address.to_string(),
+        }))
         .push(node!(HDivider {
             size: 0.8,
             color: Color::rgba(83., 83., 83., 1.)
         }))
-        .push(single_detail_row(
-            DetailRow {
-                key: "Ethernet IP".to_string(),
-                value: ethernet_ip_address.to_string(),
-            }
-        ))
+        .push(single_detail_row(DetailRow {
+            key: "Ethernet IP".to_string(),
+            value: ethernet_ip_address.to_string(),
+        }))
         .push(node!(HDivider {
             size: 0.8,
             color: Color::rgba(83., 83., 83., 1.)
         }))
-        .push(single_detail_row(
-            DetailRow {
-                key: "Wireless MAC".to_string(),
-                value: wireless_mac_address.to_string(),
-            }
-        ))
+        .push(single_detail_row(DetailRow {
+            key: "Wireless MAC".to_string(),
+            value: wireless_mac_address.to_string(),
+        }))
         .push(node!(HDivider {
             size: 0.8,
             color: Color::rgba(83., 83., 83., 1.)
         }))
-        .push(single_detail_row(
-            DetailRow {
-                key: "Ethernet MAC".to_string(),
-                value: ethernet_mac_address.to_string(),
-            }
-        ))
+        .push(single_detail_row(DetailRow {
+            key: "Ethernet MAC".to_string(),
+            value: ethernet_mac_address.to_string(),
+        }))
         .push(node!(HDivider {
             size: 0.8,
             color: Color::rgba(83., 83., 83., 1.)
         }))
-        .push(single_detail_row(
-            DetailRow {
-                key: "OS".to_string(),
-                value: os_info.name.to_string(),
-            }
-        ))
+        .push(single_detail_row(DetailRow {
+            key: "OS".to_string(),
+            value: os_info.name.to_string(),
+        }))
         .push(node!(HDivider {
             size: 0.8,
             color: Color::rgba(83., 83., 83., 1.)
         }))
-        .push(single_detail_row(
-            DetailRow {
-                key: "Kernel".to_string(),
-                value: os_info.version.to_string(),
-            }
-        ));
+        .push(single_detail_row(DetailRow {
+            key: "Kernel".to_string(),
+            value: os_info.version.to_string(),
+        }));
 
         base = base.push(header_node!(
             "About Device",

diff --git a/apps/settings-app/src/screens/battery/battery_screen.rs b/apps/settings-app/src/screens/battery/battery_screen.rs
@@ -57,10 +57,9 @@ impl Component for BatteryScreen {
         let mut main_node = node!(
             widgets::Div::new(),
             lay![
-                size_pct: [100, 90],
-                cross_alignment: layout::Alignment::Stretch,
-                direction: layout::Direction::Column,
-                margin: [10., 0., 0., 0.],
+                size: [440, Auto],
+                direction: Direction::Column,
+                cross_alignment: Alignment::Stretch,
             ]
         );
 

diff --git a/apps/settings-app/src/screens/battery/performance_mode.rs b/apps/settings-app/src/screens/battery/performance_mode.rs
@@ -17,9 +17,8 @@ impl Component for PerformanceMode {
             widgets::Div::new(),
             lay![
                 size_pct: [100, 90],
-                cross_alignment: layout::Alignment::Stretch,
-                direction: layout::Direction::Column,
-                margin: [10., 0., 0., 0.],
+                direction: Direction::Column,
+                cross_alignment: Alignment::Stretch,
             ]
         );
 

diff --git a/apps/settings-app/src/screens/display/display_screen.rs b/apps/settings-app/src/screens/display/display_screen.rs
@@ -64,10 +64,9 @@ impl Component for DisplayScreen {
         let mut main_node = node!(
             widgets::Div::new(),
             lay![
-                size_pct: [100, 90],
-                cross_alignment: layout::Alignment::Stretch,
-                direction: layout::Direction::Column,
-                margin: [10., 0., 0., 0.],
+                size: [440, Auto],
+                direction: Direction::Column,
+                cross_alignment: Alignment::Stretch,
             ]
         );
 

diff --git a/apps/settings-app/src/screens/display/screen_off_time.rs b/apps/settings-app/src/screens/display/screen_off_time.rs
@@ -16,16 +16,23 @@ impl Component for ScreenOffTime {
             ]
         );
 
-        let mut main_node = node!(
-            widgets::Div::new(),
+        let mut content_node = node!(
+            Div::new(),
             lay![
-                size_pct: [100, 90],
-                cross_alignment: layout::Alignment::Stretch,
-                direction: layout::Direction::Column,
-                margin: [10., 0., 0., 0.],
+                size: [440, Auto],
+                direction: Direction::Column,
+                cross_alignment: Alignment::Stretch,
             ]
         );
 
+        let sub_header = node!(
+            Div::new(),
+            lay![
+                margin: [0., 10., 0., 8.]
+            ]
+        )
+        .push(sub_header_node("Screen off time"));
+
         let mut scrollable = node!(
             Scrollable::new(size!(440, 288)),
             lay![
@@ -41,25 +48,21 @@ impl Component for ScreenOffTime {
             ]
         ));
 
-        let sub_header = node!(
-            Div::new(),
-            lay![
-                margin: [0., 10., 0., 8.]
-            ]
-        )
-        .push(sub_header_node("Screen off time"));
-
         let options = vec!["10s", "20s", "30s", "60s", "5m", "Never"];
         let mut options_vec: Vec<(Vec<TextSegment>, Vec<TextSegment>)> = vec![];
         for (i, option) in options.into_iter().enumerate() {
             options_vec.push((txt!(option), txt!(option)));
         }
         scrollable = scrollable.push(radio_node!(options_vec, txt!("30s")));
 
-        main_node = main_node.push(sub_header);
-        main_node = main_node.push(scrollable);
+        content_node = content_node.push(sub_header);
+        content_node = content_node.push(node!(HDivider {
+            size: 1.,
+            color: Color::rgba(83., 83., 83., 1.)
+        }));
+        content_node = content_node.push(scrollable);
 
-        base = base.push(main_node);
+        base = base.push(content_node);
         Some(base)
     }
 }
diff --git a/apps/settings-app/src/screens/network/network_details.rs b/apps/settings-app/src/screens/network/network_details.rs
@@ -122,14 +122,13 @@ impl Component for NetworkDetails {
                 size: [440, Auto],
                 direction: Direction::Column,
                 cross_alignment: Alignment::Stretch,
-                // margin: [10., 0., 0., 0.],
             ]
         );
 
         let mut scrollable_section = node!(
-            Scrollable::new(size!(440, 380)),
+            Scrollable::new(size!(440, 370)),
             lay![
-                size: [440, 380],
+                size: [440, 370],
                 direction: Direction::Column,
                 cross_alignment: Alignment::Stretch,
             ]
@@ -154,14 +153,6 @@ impl Component for NetworkDetails {
                 cross_alignment: Alignment::Stretch,
             ],
         )
-        .push(single_detail_row(DetailRow {
-            key: "Name".to_string(),
-            value: truncate(connected_network.clone().name.clone(), 17),
-        }))
-        .push(node!(HDivider {
-            size: 0.8,
-            color: Color::rgba(83., 83., 83., 1.)
-        }))
         .push(single_detail_row(DetailRow {
             key: "Status".to_string(),
             value: network_status.to_string(),