Merge pull request #95 from swetar-mecha/merge/dev

chore(update): content style for window width
mecha-org · Apr 19, 2024 · 54b76d6 · 54b76d6
2 parents 18be2d2 + 24bbcbf
commit 54b76d6
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 59 deletions.
diff --git a/client/app/src/assets/css/style.css b/client/app/src/assets/css/style.css
@@ -43,8 +43,8 @@
 }
 
 .info-icon {
-    min-width: 24px;
-    min-height: 24px;
+    min-width: 22px;
+    min-height: 22px;
     margin-right: 10px;
 }
 
@@ -54,8 +54,7 @@
 }
 
 .start-header-p {
-    padding: 0px 10px;
-    font-size: 18px;
+    font-size: 14px;
 }
 
 .start-screen-steps-container {
@@ -68,11 +67,11 @@
 }
 
 .start-screen-steps-box {
-    min-height: 80px;
+    min-height: 70px;
     font-weight: 500;
     font-size: 16px;
-    line-height: 24px;
-    padding: 30px 28px 30px 28px;
+    line-height: 22px;
+    padding: 28px 28px 28px 28px;
     margin: 20px 10px 25px 10px;
     background-color: #15171D;
     border-radius: 10px;
@@ -93,7 +92,7 @@
 }
 
 .link-machine-steps-container {
-    margin: 20px 0px;
+    margin: 10px 0px;
     color:#FAFBFC;
 }
 
@@ -109,8 +108,8 @@
     border-radius: 4px;
     font-weight: 500;
     font-size: 28px;
-    line-height: 35.73px;
-    padding: 18px 16px 18px 16px;
+    line-height: 30px;
+    padding: 10px 16px 10px 16px;
     margin: 5px 0px 0px 0px;
     background-color: #15171D;
 }
@@ -171,23 +170,21 @@
 
 .configure-machine-text {
     font-weight: 500;
-    font-size: 20px;
-    line-height: 30px;
+    font-size: 18px;
+    line-height: 28px;
     color: #FAFBFC;
 }
 
 .timeout-img {
-    /* min-width: 318px; */
-    min-width: 200px;
-    min-height: 318px;
-    margin: 30px 40px 20px 40px;
+    min-width: 240px;
+    min-height: 290px;
+    margin: 30px 40px 30px 40px;
 }
 
 .setup-status-label {
     font-weight: 500;
-    font-size: 20px;
-    line-height: 30px;
-    /* margin: 20px 0px; */
+    font-size: 18px;
+    line-height: 28px;
 }
 
 .setup-fail-border-box {
@@ -240,8 +237,8 @@
 
 .device-info-sentence {
     font-weight: 500;
-    font-size: 18px;
-    line-height: 24px;
+    font-size: 16px;
+    line-height: 22px;
     color: #B7BBC8;
     margin:10px 5px;
 }

diff --git a/client/app/src/main.rs b/client/app/src/main.rs
@@ -113,6 +113,7 @@ fn init_window(settings: ScreenSettings) -> gtk::Window {
         .css_classes(["window"])
         .build();
     window.set_resizable(false);
+    window.set_default_size(window_settings.size.0, window_settings.size.1);
     println!("CHECK WINDOW SIZE {:?} ", window.default_size());
     window
 }
@@ -230,34 +231,34 @@ impl AsyncComponent for MechaConnectApp {
             Option::from(Pages::NoInternet.to_string().as_str()),
         );
 
-        // screen_stack.add_named(
-        //     link_machine.widget(),
-        //     Option::from(Pages::LinkMachine.to_string().as_str()),
-        // );
-
-        // screen_stack.add_named(
-        //     configure_machine.widget(),
-        //     Option::from(Pages::ConfigureMachine.to_string().as_str()),
-        // );
-
-        // screen_stack.add_named(
-        //     timeout_screen.widget(),
-        //     Option::from(Pages::TimeoutScreen.to_string().as_str()),
-        // );
-
-        // screen_stack.add_named(
-        //     setup_success.widget(),
-        //     Option::from(Pages::SetupSuccess(String::from("")).to_string().as_str()),
-        // );
-
-        // screen_stack.add_named(
-        //     setup_failed.widget(),
-        //     Option::from(
-        //         Pages::SetupFailed(String::from(""), String::from(""))
-        //             .to_string()
-        //             .as_str(),
-        //     ),
-        // );
+        screen_stack.add_named(
+            link_machine.widget(),
+            Option::from(Pages::LinkMachine.to_string().as_str()),
+        );
+
+        screen_stack.add_named(
+            configure_machine.widget(),
+            Option::from(Pages::ConfigureMachine.to_string().as_str()),
+        );
+
+        screen_stack.add_named(
+            timeout_screen.widget(),
+            Option::from(Pages::TimeoutScreen.to_string().as_str()),
+        );
+
+        screen_stack.add_named(
+            setup_success.widget(),
+            Option::from(Pages::SetupSuccess(String::from("")).to_string().as_str()),
+        );
+
+        screen_stack.add_named(
+            setup_failed.widget(),
+            Option::from(
+                Pages::SetupFailed(String::from(""), String::from(""))
+                    .to_string()
+                    .as_str(),
+            ),
+        );
 
         screen_stack.add_named(
             machine_info.widget(),
@@ -460,6 +461,8 @@ impl AsyncComponent for MechaConnectApp {
                         self.timeout_screen = timeout_screen;
                     }
                     Pages::SetupSuccess(machine_id) => {
+                        println!("RENDER::SetupSuccess machine_id {:?}", machine_id.clone());
+
                         self.setup_success.detach_runtime();
 
                         self.machine_id = machine_id.clone();
@@ -599,7 +602,8 @@ fn create_start_screen(
                 StartScreenOutput::BackPressed => Message::ChangeScreen(Pages::StartScreen),
                 StartScreenOutput::ShowMachineInfo(machine_id) => Message::ChangeScreen(Pages::MachineInfo(machine_id)),
                 StartScreenOutput::ShowCheckInternet => Message::ChangeScreen(Pages::CheckInternet),        // OG
-                // StartScreenOutput::NextPressed => Message::ChangeScreen(Pages::ConfigureMachine)        // TEMP - TO TEST
+
+                // StartScreenOutput::ShowMachineInfo(machine_id) => Message::ChangeScreen(Pages::ConfigureMachine), // TEMP - TO TEST
             }),
         );
 

diff --git a/client/app/src/pages/configure_machine.rs b/client/app/src/pages/configure_machine.rs
@@ -150,10 +150,15 @@ async fn machine_info_sevice_call() -> Result<MachineInformation> {
 async fn get_machine_info(sender: AsyncComponentSender<ConfigureMachine>) {
     let fn_name = "configure_machine_screen -> get_machine_info";
     let result = tokio::time::timeout(Duration::from_secs(15), machine_info_sevice_call()).await;
+    let _ = sender.output(ConfigureOutput::Timeout);
 
     match result {
         Ok(res) => match res {
             Ok(res) => {
+                println!(
+                    "configure machine for machine_id {:?}",
+                    res.machine_id.clone()
+                );
                 let _ = sender.output(ConfigureOutput::SetupSuccess(res.machine_id));
             }
             Err(e) => {

diff --git a/client/app/src/pages/link_machine.rs b/client/app/src/pages/link_machine.rs
@@ -142,12 +142,15 @@ impl AsyncComponent for LinkMachine {
 
         let header_info_box = gtk::Box::builder()
             .orientation(gtk::Orientation::Horizontal)
-            // .css_classes(["start-header-p"])
+            .css_classes(["start-header-p"])
             .build();
 
         let info_sentence = gtk::Label::builder()
             .label("Use this below code to connect this machine to your Mecha account")
-            .halign(gtk::Align::Start)
+            .hexpand(true)
+            .justify(gtk::Justification::Fill)
+            .wrap(true)
+            .wrap_mode(pango::WrapMode::Word)
             .build();
 
         header_info_box.append(&info_sentence);
@@ -188,7 +191,6 @@ impl AsyncComponent for LinkMachine {
         let progress_box = gtk::Box::builder()
             .orientation(gtk::Orientation::Horizontal)
             .hexpand(true)
-            // .css_classes(["link-machine-progress-box"])
             .build();
 
         // progressbar

diff --git a/client/app/src/pages/machine_info.rs b/client/app/src/pages/machine_info.rs
@@ -191,14 +191,15 @@ impl AsyncComponent for MachineInfo {
             .css_classes(["device-info-sentence"])
             .build();
 
-        let sentence: gtk::Label = gtk::Label::builder()
+        let info_sentence = gtk::Label::builder()
             .label("You can unlink your machine from your Mecha account")
+            .hexpand(true)
+            .justify(gtk::Justification::Fill)
             .wrap(true)
             .wrap_mode(pango::WrapMode::Word)
-            .hexpand(true)
             .build();
 
-        sentence_box.append(&sentence);
+        sentence_box.append(&info_sentence);
         main_content_box.append(&sentence_box);
 
         let toast_box = gtk::Box::builder()

diff --git a/client/app/src/pages/setup_failed.rs b/client/app/src/pages/setup_failed.rs
@@ -8,6 +8,7 @@ use relm4::{
         self,
         gdk::Display,
         glib::clone,
+        pango,
         prelude::{ButtonExt, WidgetExt},
         Button, CssProvider, STYLE_PROVIDER_PRIORITY_APPLICATION,
     },
@@ -189,5 +190,9 @@ impl SimpleComponent for SetupFailed {
 
     fn update_view(&self, widgets: &mut Self::Widgets, sender: ComponentSender<Self>) {
         widgets.error_message.set_label(&self.error_message);
+        widgets.error_message.set_wrap(true);
+        widgets.error_message.set_wrap_mode(pango::WrapMode::Word);
+        widgets.error_message.set_hexpand(true);
+        widgets.error_message.set_justify(gtk::Justification::Fill);
     }
 }
diff --git a/client/app/src/pages/setup_success.rs b/client/app/src/pages/setup_success.rs
@@ -8,6 +8,7 @@ use relm4::{
     gtk::{
         self,
         glib::clone,
+        pango,
         prelude::{ButtonExt, WidgetExt},
         Button,
     },
@@ -91,6 +92,11 @@ impl SimpleComponent for SetupSuccess {
         let label1: gtk::Label = gtk::Label::builder()
             .label("Machine is now connected to your Mecha account")
             .halign(gtk::Align::Center)
+            .valign(gtk::Align::Center)
+            .hexpand(true)
+            .justify(gtk::Justification::Center)
+            .wrap(true)
+            .wrap_mode(pango::WrapMode::Word)
             .build();
 
         main_content_box.append(&image_from);

diff --git a/client/app/src/pages/start_screen.rs b/client/app/src/pages/start_screen.rs
@@ -53,6 +53,7 @@ impl AsyncComponent for StartScreen {
     fn init_root() -> Self::Root {
         gtk::Box::builder()
             .orientation(gtk::Orientation::Vertical)
+            .css_classes(["page-container"])
             .build()
     }
 
@@ -108,7 +109,7 @@ impl AsyncComponent for StartScreen {
 
         let info_box = gtk::Box::builder()
             .orientation(gtk::Orientation::Horizontal)
-            // .css_classes(["start-header-p"])
+            .css_classes(["start-header-p"])
             .build();
 
         let info_icon: gtk::Image = get_image_from_path(
@@ -119,6 +120,10 @@ impl AsyncComponent for StartScreen {
         let info_sentence = gtk::Label::builder()
             .label("Please sign up on mecha.so before getting started.")
             .halign(gtk::Align::Start)
+            .hexpand(true)
+            .justify(gtk::Justification::Fill)
+            .wrap(true)
+            .wrap_mode(pango::WrapMode::Word)
             .build();
 
         info_box.append(&info_icon);

diff --git a/client/app/src/server/mod.rs b/client/app/src/server/mod.rs
@@ -1,3 +1,3 @@
-pub mod provision_client;
 pub mod identity_client;
-pub mod settings_client;
+pub mod provision_client;
+pub mod settings_client;