From dc1efaeed687150b41d6a2efe2106025c3bdf2da Mon Sep 17 00:00:00 2001
From: aOK <aok@aOKs-MacBook-Pro.local>
Date: Mon, 19 Aug 2024 16:19:27 +0300
Subject: [PATCH] more refactor

---
 README.md               |   2 +
 src/aboutus/about_us.rs |  72 ++++++++++++++++++++++++
 src/aboutus/mod.rs      |   7 +++
 src/app.rs              | 101 ++-------------------------------
 src/app_ui.rs           | 121 ++++++++++++++++++++++++++++++----------
 src/app_web.rs          |  83 +++++++++++++++++++++++++++
 src/home/home_panel.rs  |  16 +++++-
 src/home/home_screen.rs |  17 ++----
 src/lib.rs              |   2 +
 src/shared/widgets.rs   |   2 +-
 10 files changed, 282 insertions(+), 141 deletions(-)
 create mode 100644 src/aboutus/about_us.rs
 create mode 100644 src/aboutus/mod.rs
 create mode 100644 src/app_web.rs

diff --git a/README.md b/README.md
index 09a03b6..4d02702 100644
--- a/README.md
+++ b/README.md
@@ -3,6 +3,8 @@
 1. sudo cargo run --release
 2. sudo cargo makepad wasm run -p salamu --release
 3. sudo cargo makepad android run -p salamu --release
+
+open -a Simulator
 4. sudo cargo makepad apple ios --org=my.test --app=salamu run-sim -p salamu --release
 
 
diff --git a/src/aboutus/about_us.rs b/src/aboutus/about_us.rs
new file mode 100644
index 0000000..f9e0ed9
--- /dev/null
+++ b/src/aboutus/about_us.rs
@@ -0,0 +1,72 @@
+use makepad_widgets::*;
+
+live_design! {
+    import makepad_widgets::base::*;
+    import makepad_widgets::theme_desktop_dark::*;
+    import makepad_draw::shader::std::*;
+
+    AboutUs = {{AboutUs}} {
+        flow: Overlay
+        width: Fill
+        height: Fill
+
+        <View> {
+            flow: Overlay,
+            width: Fill
+            height: Fill
+            padding: {left: 25, right: 25, bottom: 20},
+
+
+            <View>{
+                flow: Down,
+                spacing:10,
+                align: {
+                    x: 0.5,
+                    y: 0.5
+                },
+                label1 = <Label> {
+                    draw_text: {
+                        color: #f
+                    },
+                    text: r#"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique condimentum tristique. Donec sapien arcu, molestie vitae neque pretium, ultrices luctus diam. Aenean a eros ac lectus sollicitudin eleifend non in tellus. Nullam sapien velit, sodales et tincidunt vestibulum, sollicitudin et purus. Praesent elementum risus rhoncus enim consectetur pulvinar. Quisque rutrum leo quis odio mattis blandit. Etiam sit amet nibh felis. Vivamus maximus hendrerit turpis, vitae efficitur risus faucibus in. Vestibulum lorem dui, consectetur consectetur magna nec, hendrerit bibendum magna. Mauris faucibus rhoncus turpis luctus porta. Aenean interdum auctor sapien ac hendrerit.
+
+                        Aliquam erat volutpat. Praesent velit felis, iaculis at interdum sed, pellentesque nec tortor. Nulla mauris augue, sollicitudin non nisi ac, consequat dapibus lorem. Maecenas mollis, nulla id tincidunt finibus, neque enim ultricies libero, vel accumsan metus libero vel mauris. Vivamus et suscipit nisl, vel lacinia massa. Sed et bibendum lectus, nec pellentesque tortor. Cras non est ut eros venenatis volutpat quis quis risus. Suspendisse convallis vestibulum orci. Etiam sit amet nisl eleifend, semper nibh sit amet, tincidunt leo. Sed ut tristique nunc. Nulla dictum hendrerit augue.
+
+                        Vivamus ac porttitor sem. In auctor posuere velit ac molestie. Suspendisse ornare ex quis eros porttitor tincidunt. Praesent tincidunt purus tellus, vel malesuada dui condimentum at. Morbi pellentesque, velit euismod tristique rhoncus, metus mi tincidunt lacus, at faucibus tortor nunc ut nibh. Etiam efficitur est diam, ut commodo enim bibendum at. Suspendisse accumsan gravida nisi, sit amet sodales lectus maximus eu."#,
+                    width: 200.0,
+                }
+            }
+
+        }
+    }
+}
+
+#[derive(Live, LiveHook, Widget)]
+pub struct AboutUs {
+    #[deref]
+    view: View,
+}
+
+impl Widget for AboutUs {
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        self.view.handle_event(cx, event, scope);
+        self.widget_match_event(cx, event, scope);
+        // self.match_event(cx, event);
+        // self.view.handle_event(cx, event, &mut Scope::empty());
+    }
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        // DrawStep::done()
+        self.view.draw_walk(cx, scope, walk)
+    }
+}
+
+impl WidgetMatchEvent for AboutUs {
+    fn handle_actions(&mut self, _cx: &mut Cx, _actions: &Actions, _scope: &mut Scope) {
+        // if self.view.button(id!(button1)).clicked(&actions) {
+        //     log!("Press button {}", self.counter);
+        //     self.counter += 1;
+        //     let label = self.view.label(id!(label1));
+        //     label.set_text_and_redraw(cx, &format!("Counter: {}", self.counter));
+        // }
+    }
+}
diff --git a/src/aboutus/mod.rs b/src/aboutus/mod.rs
new file mode 100644
index 0000000..8835e45
--- /dev/null
+++ b/src/aboutus/mod.rs
@@ -0,0 +1,7 @@
+use makepad_widgets::Cx;
+
+pub mod about_us;
+
+pub fn live_design(cx: &mut Cx) {
+    about_us::live_design(cx);
+}
diff --git a/src/app.rs b/src/app.rs
index c9d0549..0b8b110 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -1,16 +1,10 @@
-// use makepad_platform::live_atomic::*;
 use makepad_widgets::*;
 
 live_design! {
     import makepad_widgets::base::*;
     import makepad_widgets::theme_desktop_dark::*;
     import makepad_draw::shader::std::*;
-
-
     import crate::app_ui::AppUI;
-    import crate::app_mobile::AppMobileUI;
-
-
 
     App = {{App}} {
         ui: <Root>{
@@ -24,8 +18,7 @@ live_design! {
                     root = <View> {
                         width: Fill,
                         height: Fill,
-                        mobile = <AppMobileUI>{}
-                        web = <AppUI>{}
+                        app_ui = <AppUI>{}
                     }
                 }
             }
@@ -35,19 +28,10 @@ live_design! {
 
 app_main!(App);
 
-enum ScreenSize {
-    Mobile,
-    Web,
-}
-
-#[derive(Live)]
+#[derive(Live, LiveHook)]
 pub struct App {
     #[live]
     ui: WidgetRef,
-    // #[rust]
-    // counter: usize,
-    #[rust]
-    screen_width: f64,
 }
 
 impl LiveRegister for App {
@@ -55,95 +39,20 @@ impl LiveRegister for App {
         crate::makepad_widgets::live_design(cx);
         crate::app_ui::live_design(cx);
         crate::app_mobile::live_design(cx);
+        crate::app_web::live_design(cx);
 
         crate::home::live_design(cx);
+        crate::aboutus::live_design(cx);
         crate::shared::live_design(cx);
     }
 }
-impl LiveHook for App {
-    fn after_new_from_doc(&mut self, cx: &mut Cx) {
-        let mobile_screen = self.ui.view(id!(mobile));
-        let web_screen = self.ui.view(id!(web));
-        if self.screen_width < 960_f64 {
-            log!("SCREEN_WIDTH ===> {}", self.screen_width);
-            web_screen.set_visible(false);
-            mobile_screen.set_visible_and_redraw(cx, true);
-        } else if self.screen_width > 960_f64 {
-            mobile_screen.set_visible(false);
-            web_screen.set_visible_and_redraw(cx, true);
-        } else {
-            log!("SCREEN_WIDTH ===> {}", self.screen_width);
-        }
-    }
-}
 
 impl MatchEvent for App {
-    fn handle_draw_2d(&mut self, cx: &mut Cx2d) {
-        let mobile_screen = self.ui.view(id!(mobile));
-        let web_screen = self.ui.view(id!(web));
-
-        while let Some(next) = self.ui.draw(cx, &mut Scope::empty()).step() {
-            // if let Some(mut mobile_screen) = mobile_screen.has_widget(&next).borrow_mut() {}
-            if self.screen_width == 0_f64 {
-                continue;
-            }
-            if self.screen_width < 960_f64 {
-                web_screen.set_visible(false);
-                mobile_screen.set_visible_and_redraw(cx, true);
-                mobile_screen.draw_all(cx, &mut Scope::empty());
-            } else if self.screen_width > 960_f64 {
-                mobile_screen.set_visible(false);
-                web_screen.set_visible_and_redraw(cx, true);
-                web_screen.draw_all(cx, &mut Scope::empty());
-            } else {
-                log!("ESLE_SCREEN_WIDTH ===> {}", self.screen_width);
-            }
-        }
-    }
-    fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions) {
-        for action in actions {
-            if let WindowAction::WindowGeomChange(ce) = action.as_widget_action().cast() {
-                self.screen_width = ce.new_geom.inner_size.x * ce.new_geom.dpi_factor;
-                let mobile_screen = self.ui.view(id!(mobile));
-                let web_screen = self.ui.view(id!(web));
-                if self.screen_width < 960_f64 {
-                    // log!("SCREEN_WIDTH ===> {}", self.screen_width);
-                    web_screen.set_visible(false);
-                    mobile_screen.set_visible_and_redraw(cx, true);
-                } else if self.screen_width > 960_f64 {
-                    // log!("SCREEN_WIDTH ===> {}", self.screen_width);
-                    self.ui
-                        .radio_button_set(ids!(
-                            navbar_menu.home_screen_tab,
-                            // sidebar_menu.chat_tab,
-                            // sidebar_menu.my_models_tab,
-                        ))
-                        .selected_to_visible(
-                            cx,
-                            &self.ui,
-                            actions,
-                            ids!(
-                                application_pages.home_screen_frame,
-                                // application_pages.chat_frame,
-                                // application_pages.my_models_frame,
-                            ),
-                        );
-                    mobile_screen.set_visible(false);
-                    web_screen.set_visible_and_redraw(cx, true);
-                } else {
-                    log!("ESLE_SCREEN_WIDTH ===> {}", self.screen_width);
-                    // web_screen.set_visible_and_redraw(cx, true);
-                }
-            }
-        }
-    }
+    fn handle_actions(&mut self, _cx: &mut Cx, _actions: &Actions) {}
 }
 
 impl AppMain for App {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event) {
-        if self.match_event_with_draw_2d(cx, event).is_ok() {
-            return;
-        }
         self.match_event(cx, event);
         self.ui.handle_event(cx, event, &mut Scope::empty());
     }
diff --git a/src/app_ui.rs b/src/app_ui.rs
index 0e18862..4aa9197 100644
--- a/src/app_ui.rs
+++ b/src/app_ui.rs
@@ -5,7 +5,12 @@ live_design! {
     import makepad_widgets::theme_desktop_dark::*;
 
     import crate::shared::styles::*;
+    import crate::app_web::AppWebUI;
+    import crate::app_mobile::AppMobileUI;
+
     import crate::home::home_screen::HomeScreen;
+    import crate::aboutus::about_us::AboutUs;
+
 
     import crate::shared::widgets::NavbarMenuButton;
 
@@ -13,49 +18,105 @@ live_design! {
     ICON_CHAT = dep("crate://self/resources/icons/chat.svg")
     ICON_MY_MODELS = dep("crate://self/resources/icons/my_models.svg")
 
-    AppUI = <ScrollXYView>{
+    AppUI = {{AppUI}} {
         width: Fill,
         height: Fill,
         align: {x: 0.5},
         padding: {top: 0, bottom: 48 }
         // debug: A
 
-        navbar_menu = <RoundedView> {
+        <View> {
             width: Fill,
-            height: Fit,
+            height: Fill,
+            mobile = <AppMobileUI>{}
+            web = <AppWebUI>{}
+        }
+    }
+}
 
-            flow: Right, spacing: 20.0,
-            padding: { top: 0 }
+enum ScreenSize {
+    Mobile,
+    Web,
+}
 
-            align: {x: 0.5, y: 0.0},
+#[derive(Live, Widget)]
+pub struct AppUI {
+    #[deref]
+    view: View,
 
-            show_bg: true,
-            draw_bg: {
-                color: (SIDEBAR_BG_COLOR),
-                instance radius: 0.0,
-                border_color: #EAECF0,
-                border_width: 1.2,
+    #[rust]
+    screen_width: f64,
+}
+
+impl LiveHook for AppUI {
+    fn after_new_from_doc(&mut self, cx: &mut Cx) {
+        let mobile_screen = self.view.view(id!(mobile));
+        let web_screen = self.view.view(id!(web));
+        if self.screen_width < 960_f64 {
+            log!("SCREEN_WIDTH ===> {}", self.screen_width);
+            web_screen.set_visible(false);
+            mobile_screen.set_visible_and_redraw(cx, true);
+            // web_screen.draw_all(cx, &mut Scope::empty());
+        } else if self.screen_width > 960_f64 {
+            mobile_screen.set_visible(false);
+            web_screen.set_visible_and_redraw(cx, true);
+            // web_screen.draw_all(cx, &mut Scope::empty());
+        } else {
+            log!("SCREEN_WIDTH ===> {}", self.screen_width);
+        }
+    }
+}
+
+impl Widget for AppUI {
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        self.view.handle_event(cx, event, scope);
+        self.widget_match_event(cx, event, scope);
+    }
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        // DrawStep::done()
+        let mobile_screen = self.view.view(id!(mobile));
+        let web_screen = self.view.view(id!(web));
+
+        while let Some(_next) = self.view.draw(cx, &mut Scope::empty()).step() {
+            // if let Some(mut mobile_screen) = mobile_screen.has_widget(&next).borrow_mut() {}
+            if self.screen_width == 0_f64 {
+                continue;
             }
-            home_screen_tab = <NavbarMenuButton> {
-                animator: {selected = {default: on}}
-                text: "Home",
-                draw_icon: {
-                    svg_file: (ICON_DISCOVER),
+            if self.screen_width < 960_f64 {
+                web_screen.set_visible(false);
+                mobile_screen.set_visible_and_redraw(cx, true);
+                mobile_screen.draw_all(cx, &mut Scope::empty());
+                self.view.draw_walk(cx, scope, walk)?;
+            } else if self.screen_width > 960_f64 {
+                mobile_screen.set_visible(false);
+                web_screen.set_visible_and_redraw(cx, true);
+                web_screen.draw_all(cx, &mut Scope::empty());
+                self.view.draw_walk(cx, scope, walk)?;
+            } else {
+                log!("ESLE_SCREEN_WIDTH ===> {}", self.screen_width);
+            }
+        }
+        DrawStep::done()
+    }
+}
+
+impl WidgetMatchEvent for AppUI {
+    fn handle_actions(&mut self, cx: &mut Cx, actions: &Actions, _scope: &mut Scope) {
+        for action in actions {
+            if let WindowAction::WindowGeomChange(ce) = action.as_widget_action().cast() {
+                self.screen_width = ce.new_geom.inner_size.x * ce.new_geom.dpi_factor;
+                let mobile_screen = self.view.view(id!(mobile));
+                let web_screen = self.view.view(id!(web));
+                if self.screen_width < 960_f64 {
+                    web_screen.set_visible(false);
+                    mobile_screen.set_visible_and_redraw(cx, true);
+                } else if self.screen_width > 960_f64 {
+                    mobile_screen.set_visible(false);
+                    web_screen.set_visible_and_redraw(cx, true);
+                } else {
+                    log!("ELSE_SCREEN_WIDTH ===> {}", self.screen_width);
                 }
             }
-            application_pages = <View> {
-                margin: 0.0,
-                padding: 0.0,
-
-                flow: Overlay,
-
-                width: Fill,
-                height: Fill,
-
-                home_screen_frame = <HomeScreen> {visible: true, app_menu = <View>{}}
-                // chat_frame = <ChatScreen> {visible: false}
-                // my_models_frame = <MyModelsScreen> {visible: false}
-            }
         }
     }
 }
diff --git a/src/app_web.rs b/src/app_web.rs
new file mode 100644
index 0000000..7746965
--- /dev/null
+++ b/src/app_web.rs
@@ -0,0 +1,83 @@
+use makepad_widgets::*;
+
+live_design! {
+    import makepad_widgets::base::*;
+    import makepad_widgets::theme_desktop_dark::*;
+
+    import crate::shared::styles::*;
+    import crate::home::home_screen::HomeScreen;
+    import crate::aboutus::about_us::AboutUs;
+
+    import crate::shared::widgets::NavbarMenuButton;
+
+    ICON_DISCOVER = dep("crate://self/resources/icons/discover.svg")
+    ICON_CHAT = dep("crate://self/resources/icons/chat.svg")
+    ICON_MY_MODELS = dep("crate://self/resources/icons/my_models.svg")
+
+    AppWebUI = <ScrollXYView>{
+        width: Fill,
+        height: Fill,
+        align: {x: 0.5},
+        padding: {top: 0, bottom: 48 }
+        // debug: A
+
+        navbar_menu = <RoundedView> {
+            width: Fill,
+            height: Fit,
+            flow: Right, spacing: 20.0,
+            padding: { top: 0 }
+            align: {x: 0.5, y: 0.0},
+
+            show_bg: true,
+            draw_bg: {
+                color: (SIDEBAR_BG_COLOR),
+                instance radius: 0.0,
+                border_color: #EAECF0,
+                border_width: 1.2,
+            }
+            home_screen_tab = <NavbarMenuButton> {
+                animator: {selected = {default: on}}
+                text: "Home",
+                draw_icon: {
+                    svg_file: (ICON_DISCOVER),
+                }
+            }
+            aboutus_screen_tab = <NavbarMenuButton> {
+                text: "About Us",
+                draw_icon: {
+                    svg_file: (ICON_MY_MODELS),
+                }
+            }
+            application_pages = <View> {
+                margin: 0.0,
+                padding: 0.0,
+                flow: Down,
+                width: Fit,
+                height: Fit,
+                // debug: A
+
+                home_screen_frame = <HomeScreen> {visible: true}
+                aboutus_screen_frame = <AboutUs> {visible: false}
+            }
+        }
+    }
+}
+#[derive(Live, LiveHook, Widget)]
+pub struct AppWebUI {
+    #[deref]
+    view: View,
+}
+impl Widget for AppWebUI {
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        self.view.handle_event(cx, event, scope);
+        self.widget_match_event(cx, event, scope);
+    }
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        // DrawStep::done()
+        self.view.draw_walk(cx, scope, walk)
+    }
+}
+
+impl WidgetMatchEvent for AppWebUI {
+    fn handle_actions(&mut self, _cx: &mut Cx, _actions: &Actions, _scope: &mut Scope) {}
+}
diff --git a/src/home/home_panel.rs b/src/home/home_panel.rs
index 5a246e1..6d1147b 100644
--- a/src/home/home_panel.rs
+++ b/src/home/home_panel.rs
@@ -5,6 +5,8 @@ live_design! {
     import makepad_widgets::theme_desktop_dark::*;
     import makepad_draw::shader::std::*;
 
+    import crate::shared::styles::*;
+
     HomePanel = {{HomePanel}} {
         flow: Overlay
         width: Fill
@@ -42,10 +44,22 @@ live_design! {
                         Aliquam erat volutpat. Praesent velit felis, iaculis at interdum sed, pellentesque nec tortor. Nulla mauris augue, sollicitudin non nisi ac, consequat dapibus lorem. Maecenas mollis, nulla id tincidunt finibus, neque enim ultricies libero, vel accumsan metus libero vel mauris. Vivamus et suscipit nisl, vel lacinia massa. Sed et bibendum lectus, nec pellentesque tortor. Cras non est ut eros venenatis volutpat quis quis risus. Suspendisse convallis vestibulum orci. Etiam sit amet nisl eleifend, semper nibh sit amet, tincidunt leo. Sed ut tristique nunc. Nulla dictum hendrerit augue.
 
                         Vivamus ac porttitor sem. In auctor posuere velit ac molestie. Suspendisse ornare ex quis eros porttitor tincidunt. Praesent tincidunt purus tellus, vel malesuada dui condimentum at. Morbi pellentesque, velit euismod tristique rhoncus, metus mi tincidunt lacus, at faucibus tortor nunc ut nibh. Etiam efficitur est diam, ut commodo enim bibendum at. Suspendisse accumsan gravida nisi, sit amet sodales lectus maximus eu."#,
-                    width: 200.0,
+                    // width: 400.0,
+                    width: Fill,
                 }
+
             }
 
+            <View>{
+                footer = <Label> {
+                    margin: {bottom: (SSPACING_1)}
+                    draw_text: {
+                        text_style: <H2_TEXT_BOLD> {},
+                        color: #000
+                    }
+                    text: "Here"
+                }
+            }
         }
     }
 }
diff --git a/src/home/home_screen.rs b/src/home/home_screen.rs
index 865c588..c239c33 100644
--- a/src/home/home_screen.rs
+++ b/src/home/home_screen.rs
@@ -3,6 +3,7 @@ use makepad_widgets::*;
 live_design! {
     import makepad_widgets::base::*;
     import makepad_widgets::theme_desktop_dark::*;
+    import makepad_draw::shader::std::*;
 
     import crate::shared::styles::*;
     import crate::home::home_panel::HomePanel;
@@ -28,16 +29,6 @@ live_design! {
                 app_menu = <View>{}
             }
         }
-
-
-        // footer = <Label> {
-        //     margin: {bottom: (SSPACING_1)}
-        //     draw_text: {
-        //         text_style: <H2_TEXT_BOLD> {},
-        //         color: #000
-        //     }
-        //     text: "Here"
-        // }
     }
 }
 
@@ -53,9 +44,9 @@ impl Widget for HomeScreen {
         // It's not clear why it's needed here, but without this line
         // the "View all files" link in Discover section does not work after visiting the chat screen
 
-        // if self.visible || !event.requires_visibility() {
-        self.view.handle_event(cx, event, scope);
-        // }
+        if self.visible || !event.requires_visibility() {
+            self.view.handle_event(cx, event, scope);
+        }
     }
 
     fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
diff --git a/src/lib.rs b/src/lib.rs
index 1889dd5..8d7fc61 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -2,6 +2,8 @@ pub use makepad_widgets;
 pub mod app;
 pub mod app_mobile;
 pub mod app_ui;
+pub mod app_web;
 
+pub mod aboutus;
 pub mod home;
 pub mod shared;
diff --git a/src/shared/widgets.rs b/src/shared/widgets.rs
index 33f2062..4bfa952 100644
--- a/src/shared/widgets.rs
+++ b/src/shared/widgets.rs
@@ -103,7 +103,7 @@ live_design! {
         width: 80,
         height: 70,
         padding: 0, margin: 0,
-        flow: Right, spacing: 8.0, align: {x: 0.5, y: 0.5}
+        flow: Down, spacing: 8.0, align: {x: 0.5, y: 0.5}
 
         icon_walk: {margin: 0, width: 30, height: 30}
         label_walk: {margin: 0}