From 36740dc2db2e04247758da58446e6c44e2c3745e Mon Sep 17 00:00:00 2001
From: aOK <aok@aOKs-MacBook-Pro.local>
Date: Wed, 13 Dec 2023 03:39:09 +0300
Subject: [PATCH] good enough

---
 src/app.rs                     |  20 ++---
 src/counter/counterscrn.rs     |  25 +++---
 src/shared/card.rs             | 144 +++++++++++++++++++++++++++++++++
 src/shared/cbutton.rs          |   2 +-
 src/shared/custom_button.rs    |  12 +--
 src/shared/stack_navigation.rs |   1 +
 src/welcome/welcome_screen.rs  |  49 ++++++-----
 7 files changed, 194 insertions(+), 59 deletions(-)
 create mode 100644 src/shared/card.rs

diff --git a/src/app.rs b/src/app.rs
index a01e4b7..33bd3b3 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -15,6 +15,7 @@ live_design!{
     import crate::shared::stack_navigation::*;
 
     import crate::shared::styles::*;
+    import crate::shared::helpers::*;
 
     ICON_CHAT = dep("crate://self/resources/icons/chat.svg")
 
@@ -68,19 +69,20 @@ live_design!{
                             // welcome_frame = <CounterScreen> { visible: true }
                         }
                     }
-                my_counter_stack_view = <StackNavigationView> {
-                    header = {
-                        content = {
-                            title_container = {
-                                title = {
-                                    text: "Counter"
+                    my_counter_stack_view = <StackNavigationView> {
+                        position: vec2(0, 0), 
+                        header = {
+                            content = {
+                                title_container = {
+                                    title = {
+                                        text: "Counter"
+                                    }
                                 }
                             }
                         }
+                        // <CounterScreen> {}
+                        <CounterScrn> {}
                     }
-                    // <CounterScreen> {}
-                    <CounterScrn> {}
-                }
                 }
             }
         }
diff --git a/src/counter/counterscrn.rs b/src/counter/counterscrn.rs
index 4fb9dcf..59beec0 100644
--- a/src/counter/counterscrn.rs
+++ b/src/counter/counterscrn.rs
@@ -64,7 +64,7 @@ live_design! {
                         <View> {
                             width: Fit, height: Fill
                             flow: Down, 
-                            align: {x: 0, y: 0.5}, 
+                            align: {x: 0.5, y: 0.5}, 
                             padding: {top: 5., left: 10., right: 10.}, spacing: 20.
                             // username = <Label> {
                             //     // padding: {top: 50., left: 140.}
@@ -104,7 +104,6 @@ live_design! {
                                 }
                             }
                             label1 = <Label> {
-                                width: Fill, height: Fit, margin: 0
                                 draw_text: {
                                     color: #000
                                 },
@@ -181,22 +180,22 @@ impl Counter {
         //     log!("WELCOME BUTTON CLICKED"); 
         // }
 
-        if self
-            .view
-            .clickable_view(id!(button1.button))
-            .clicked(&actions)
-        {
-            log!("BUTTON CLICKED {}", self.counter); 
-            self.counter += 1;
-            let label = self.view.label(id!(label1));
-            label.set_text_and_redraw(cx,&format!("Counter: {}", self.counter));
-        }
-        // if self.view.button(id!(button1.button)).clicked(&actions) 
+        // if self
+        //     .view
+        //     .clickable_view(id!(button1))
+        //     .clicked(&actions)
         // {
         //     log!("BUTTON CLICKED {}", self.counter); 
         //     self.counter += 1;
         //     let label = self.view.label(id!(label1));
         //     label.set_text_and_redraw(cx,&format!("Counter: {}", self.counter));
         // }
+        if self.view.button(id!(button1)).clicked(&actions) 
+        {
+            log!("BUTTON CLICKED {}", 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/shared/card.rs b/src/shared/card.rs
new file mode 100644
index 0000000..88ec942
--- /dev/null
+++ b/src/shared/card.rs
@@ -0,0 +1,144 @@
+use makepad_widgets::*;
+
+live_design! {
+    import makepad_draw::shader::std::*;
+    import makepad_widgets::base::*;
+    import makepad_widgets::theme_desktop_dark::*;
+
+    import crate::shared::styles::*;
+    import crate::shared::clickable_view::ClickableView
+
+    CatalogItem = <ClickableView> {
+        width: Fill
+        height: Fit
+
+        show_bg: false
+
+        container = <RoundedView> {
+            width: Fill
+            height: Fit
+            flow: Down
+            align: {x: 0.5, y: 0.0}
+            spacing: 2.0
+
+            draw_bg: {
+                color: #fff,
+                radius: 8.
+            }
+
+            image = <Image> {
+                width: Fill, height: 166
+                source: (CATALOG_FLIP_FLOPS_IMG)
+
+                // Override to have the upper corners rounded
+                draw_bg: {
+                    instance radius: 8.
+                    fn pixel(self) -> vec4 {
+                        let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+                        sdf.box(
+                            1,
+                            1,
+                            self.rect_size.x - 2.0,
+                            // This calculation is to make sure the bottom part is not rounded
+                            self.rect_size.y + self.radius * 2.0,
+                            max(1.0, self.radius)
+                        )
+                        sdf.fill_keep(self.get_color())
+                        sdf.stroke(#fff, 1);
+                        return sdf.result
+                    }
+                }
+            }
+            info = <View> {
+                width: Fill
+                height: Fit
+                flow: Down
+                padding: 5.
+                spacing: 3.
+
+                title = <Label> {
+                    width: Fill
+                    height: Fit
+
+                    text: "男士人字拖 2023"
+                    draw_text: {
+                        color: #000
+                        text_style: <REGULAR_TEXT> {font_size: 12.0},
+                    }
+                }
+
+                subtitle = <Label> {
+                    width: Fill
+                    height: Fit
+
+                    text: "500+人付费"
+                    draw_text: {
+                        color: #888
+                        text_style: <REGULAR_TEXT> {font_size: 8.0},
+                    }
+                }
+
+                <View> {
+                    width: 160
+                    height: 40
+                    flow: Overlay
+
+                    <Image> {
+                        width: Fill
+                        height: Fill
+                        source: (BUY_IT_BANNER_IMG)
+                    }
+
+                    <View> {
+                        width: Fill
+                        height: Fill
+                        padding: 5.
+                        flow: Down
+                        spacing: 2.
+
+                        <View> {
+                            width: Fit
+                            height: Fit
+                            flow: Right
+                            spacing: 1.
+                            align: {x: 0.0, y: 1.0}
+
+                            <Label> {
+                                width: Fit
+                                height: Fit
+                                margin: {bottom: 2.}
+
+                                text: "¥"
+                                draw_text: {
+                                    color: #fff
+                                    text_style: <REGULAR_TEXT> {font_size: 10.0},
+                                }
+                            }
+                            <Label> {
+                                width: Fit
+                                height: Fit
+
+                                text: "58"
+                                draw_text: {
+                                    color: #fff
+                                    text_style: <REGULAR_TEXT> {font_size: 14.0},
+                                }
+                            }
+                        }
+                        <Label> {
+                            width: Fit
+                            height: Fit
+
+                            text: "USD 8.11"
+                            draw_text: {
+                                color: #fff
+                                text_style: <REGULAR_TEXT> {font_size: 8.0},
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    
+}
diff --git a/src/shared/cbutton.rs b/src/shared/cbutton.rs
index 17547d1..ae9fd77 100644
--- a/src/shared/cbutton.rs
+++ b/src/shared/cbutton.rs
@@ -8,7 +8,7 @@ live_design! {
     import crate::shared::styles::*;
     import crate::shared::clickable_view::ClickableView
 
-    CButton = <View> {
+    CButton = <ClickableView> {
         width: Fill, height: Fit
         // flow: Right
         show_bg: false
diff --git a/src/shared/custom_button.rs b/src/shared/custom_button.rs
index 4c0260f..117ccd5 100644
--- a/src/shared/custom_button.rs
+++ b/src/shared/custom_button.rs
@@ -8,16 +8,7 @@ live_design! {
     import crate::shared::styles::*;
     import crate::shared::clickable_view::ClickableView
 
-    CustomButton = <ClickableView> {
-        width: Fill, height: Fit
-        // flow: Right
-        show_bg: false
-        draw_bg: {
-            // color: #EDEDED;
-            color: #000;
-        }
-
-        button = <Button> {
+    CustomButton = <Button> {
             width: Fill, height: 34.
             text: "Welcome"
             draw_text: {
@@ -50,6 +41,5 @@ live_design! {
                     return sdf.result
                 }
             }
-        }
     }
 }
diff --git a/src/shared/stack_navigation.rs b/src/shared/stack_navigation.rs
index d1670cd..3fc6be8 100644
--- a/src/shared/stack_navigation.rs
+++ b/src/shared/stack_navigation.rs
@@ -32,6 +32,7 @@ live_design! {
         visible: false
         width: Fill, height: Fill
         flow: Down
+        // flow: Overlay
         show_bg: true
         draw_bg: {
             color: #fff
diff --git a/src/welcome/welcome_screen.rs b/src/welcome/welcome_screen.rs
index edfa85f..eabfbe9 100644
--- a/src/welcome/welcome_screen.rs
+++ b/src/welcome/welcome_screen.rs
@@ -14,6 +14,7 @@ live_design! {
     import crate::shared::clickable_view::ClickableView
     import crate::shared::search_bar::SearchBar;
     import crate::shared::custom_button::CustomButton;
+    import crate::shared::cbutton::CButton;
 
     IMG_DEFAULT_AVATAR = dep("crate://self/resources/img/default_avatar.png")
     IMG_FAVORITES = dep("crate://self/resources/img/favorites.png")
@@ -24,7 +25,7 @@ live_design! {
 
     Welcome = {{Welcome}} {
         view: {
-            width: Fill, height: Fit
+            width: Fill, height: Fill
             spacing: 10.
             draw_bg: {
                 color: #000
@@ -43,15 +44,14 @@ live_design! {
                     color: #fff
                 }
                 <View> {
-                    width: Fit
-                    height: Fill
+                    width: Fill height: Fill
                     show_bg: false
                     // align:{ x: 0.5 }
                     align: {x: 0.5, y: 0.5}
                     container = <RoundedView> {
                         width: 360
                         height: 400
-                        // flow: Down
+                        flow: Down
                         align: {x: 0.5, y: 0.5}
                         // margin: {left: 200.0, right: 200.0, top: 100.0, bottom: 100.0}
                         spacing: 2.0
@@ -62,25 +62,22 @@ live_design! {
                             radius: (CARD_CORNER_RADIUS)
                         }
                         <View> {
-                            width: Fit, height: Fill
+                            width: Fill, height: Fill
                             flow: Down, 
                             align: {x: 0, y: 0.5}, 
                             padding: {top: 5., left: 10., right: 10.}, spacing: 20.
                             username = <Label> {
-                                // padding: {top: 50., left: 140.}
                                 draw_text:{
                                     color: #000,
                                     text_style: <TEXT_SUB>{font_size: 20.},
                                 }
                                 text:"Welcome To Simple Nav"
                             }
-                            // <FillerY> {}
                             message_input = <SearchBar> {
                                 show_bg: false
                                 input = {
                                     width: Fill, height: Fit, margin: 0
                                     empty_message: "Enter Your Name"
-                                    // text: ""
                                     draw_bg: {
                                         color: #fff
                                         border_width: 0.5,
@@ -90,11 +87,9 @@ live_design! {
                             }
                             welcome_frame = <CustomButton> {
                                 button = {
-                                    // width: Fill, height: Fit, margin: 0
                                     text: "Welcome"
                                 }
                             }
-                            // <FillerY> {}
                         }
                     }
                 }
@@ -156,24 +151,28 @@ impl Welcome {
     ) {
         let actions = self.view.handle_widget_event(cx, event);
 
-        if self
-            .view
-            .clickable_view(id!(welcome_frame))
-            .clicked(&actions)
+        // if self
+        //     .view
+        //     .clickable_view(id!(welcome_frame))
+        //     .clicked(&actions)
+        // {
+        //     dispatch_action(cx, StackViewAction::ShowCounterScreen);
+        //     // let input11 = self.view.text_input(id!(message_input));
+        //     let user_prompt1 = self.view.text_input(id!(message_input.input)).text();
+
+        //     log!("WELCOME BUTTON CLICKED: {}", user_prompt1); 
+        // }
+
+        if self.view.button(id!(welcome_frame)).clicked(&actions) 
         {
             dispatch_action(cx, StackViewAction::ShowCounterScreen);
-            // let input11 = self.view.text_input(id!(message_input));
             let user_prompt1 = self.view.text_input(id!(message_input.input)).text();
-
-            log!("WELCOME BUTTON CLICKED: {}", user_prompt1); 
+            log!("WELCOME BUTTON CLICKED: {}", user_prompt1);
+            
+            // log!("BUTTON CLICKED {}", self.counter); 
+            // self.counter += 1;
+            // let label = self.view.label(id!(label1));
+            // label.set_text_and_redraw(cx,&format!("Counter: {}", self.counter));
         }
-
-        // if self.view.button(id!(button1)).clicked(&actions) 
-        // {
-        //     log!("BUTTON CLICKED {}", self.counter); 
-        //     self.counter += 1;
-        //     let label = self.view.label(id!(label1));
-        //     label.set_text_and_redraw(cx,&format!("Counter: {}", self.counter));
-        // }
     }
 }