sync

mp/src/app.rs

@@ -178,6 +178,7 @@ impl LiveRegister for App {
         crate::widgets::area::live_design(_cx);
         crate::widgets::renderer::live_design(_cx);
         crate::widgets::selector_modal::live_design(_cx);
+        crate::widgets::background_text::live_design(_cx);
     }
 }
 

mp/src/app_ui.rs

@@ -1,3 +1,4 @@
+use makepad_widgets::Dock;
 use makepad_widgets::*;
 live_design! {
     import makepad_widgets::base::*;
@@ -7,6 +8,7 @@ live_design! {
 
     import makepad_draw::shader::std::*;
     import crate::widgets::selector_modal::SelectorItem;
+    import crate::widgets::background_text::BackgroundLabel;
 
     HELLO = "Hello, World!";
 
@@ -128,10 +130,26 @@ live_design! {
 
                 <H4>{ text: "Input"}
 
-                <SelectorItem> {
+                <View>{
-                    text: "PPI"
+                    flow: Right
+                    width: Fill
+                    height: Fit
+
+                    <BackgroundLabel>{
+                        text: "Holy Shit",
                     }
 
+                    <BackgroundLabel>{
+                        text: "Holy Shit",
+                    }
+
+                    <BackgroundLabel>{
+                        text: "Holy Shit",
+                    }
+                }
+
+
+
                 <Group> {
 
                     <ButtonGroup> {

mp/src/widgets/background_text.rs

@@ -0,0 +1,136 @@
+use makepad_widgets::*;
+
+live_design! {
+    import makepad_draw::shader::std::*;
+    import makepad_widgets::base::*;
+    import makepad_widgets::theme_desktop_dark::*;
+
+    BackgroundIcon = {{BackgroundIcon}} {
+        draw_icon: {
+            color: #fff
+        }
+
+        draw_bg: {
+            instance color: #3c3c3c
+            instance radius: 3.0
+
+            fn get_color(self) -> vec4 {
+                return self.color;
+            }
+
+            fn pixel(self) -> vec4 {
+                let sdf = Sdf2d::viewport(self.pos * self.rect_size)
+                sdf.box(
+                    0.0,0.0,
+                    self.rect_size.x,
+                    self.rect_size.y,
+                    max(1.0, self.radius)
+                )
+                sdf.fill_keep(self.get_color())
+                return sdf.result;
+            }
+        }
+    }
+
+    BackgroundLabel = {{BackgroundLabel}} {
+        draw_text: {
+            color: #fff
+            text_style: <THEME_FONT_BOLD>{
+                font_size: 8.0
+            }
+        }
+
+        draw_bg: {
+            instance color: #3c3c3c
+            instance radius: 3.0
+
+            fn get_color(self) -> vec4 {
+                return self.color;
+            }
+
+            fn pixel(self) -> vec4 {
+                let sdf = Sdf2d::viewport(self.pos * self.rect_size)
+                sdf.box(
+                    0.0,0.0,
+                    self.rect_size.x,
+                    self.rect_size.y,
+                    max(1.0, self.radius)
+                )
+                sdf.fill_keep(self.get_color())
+                return sdf.result;
+            }
+        }
+    }
+}
+
+#[derive(LiveHook, Live, Widget)]
+pub struct BackgroundLabel {
+    #[redraw]
+    #[live]
+    draw_bg: DrawQuad,
+    #[live]
+    draw_text: DrawText,
+    #[live]
+    text: ArcStringMut,
+    #[live]
+    padding: Padding,
+    #[live]
+    align: Align,
+    #[rust]
+    selected: bool,
+}
+
+impl Widget for BackgroundLabel {
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        let walk = Walk::fit();
+        self.draw_bg.begin(cx, walk, Layout::default());
+        self.draw_text.draw_walk(
+            cx,
+            Walk::fit().with_margin_all(5.0),
+            Align { x: 0.5, y: 0.5 },
+            self.text.as_ref(),
+        );
+        self.draw_bg.end(cx);
+        DrawStep::done()
+    }
+
+    fn text(&self) -> String {
+        self.text.as_ref().to_string()
+    }
+
+    fn set_text(&mut self, _v: &str) {
+        self.text.as_mut_empty().push_str(_v);
+        self.label(id!(lb)).set_text(_v);
+    }
+}
+
+#[derive(LiveHook, Live, Widget)]
+pub struct BackgroundIcon {
+    #[redraw]
+    #[live]
+    draw_bg: DrawQuad,
+    #[live]
+    draw_icon: DrawIcon,
+    #[live]
+    text: ArcStringMut,
+    #[live]
+    padding: Padding,
+    #[live]
+    align: Align,
+    #[rust]
+    selected: bool,
+}
+
+impl Widget for BackgroundIcon {
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        let walk = Walk::fit();
+        self.draw_bg.begin(
+            cx,
+            walk,
+            Layout::default().with_align_x(0.5).with_align_y(0.5),
+        );
+        self.draw_icon.draw_walk(cx, Walk::fixed(64.0, 64.0));
+        self.draw_bg.end(cx);
+        DrawStep::done()
+    }
+}

mp/src/widgets/mod.rs

@@ -1,3 +1,4 @@
 pub mod area;
+pub mod background_text;
 pub mod renderer;
 pub mod selector_modal;

mp/src/widgets/selector_modal.rs

@@ -1,194 +1,193 @@
+use makepad_derive_widget::*;
+use makepad_micro_serde::*;
+use makepad_micro_serde::{DeRon, SerRon};
+use makepad_widgets::Dock;
 use makepad_widgets::*;
 
 live_design! {
     import makepad_draw::shader::std::*;
     import makepad_widgets::base::*;
     import makepad_widgets::theme_desktop_dark::*;
-
     ICO_SEARCH = dep("crate://self/resources/icons/Icon_Search.svg")
-
-    SelectorModal = <Modal> {
-        content: {
-            height: 600,
-            width: 300,
-            show_bg: true,
-            draw_bg: {
-                color: #3c3c3c
-            }
-            align: {
-                x: 0.5,
-                y: 0.5
-            }
-            <RoundedView> {
-
-                show_bg: true,
-                draw_bg: {
-                    color: #3c3c3c
-                    radius: 3.0
-                }
-
-                notifacion_title = <Label> {
-                    text: "Notification"
-                }
-                notification_message = <Label> {
-                    width: 170
-                }
-                close_popup_button = <Button> {
-                    width: Fit,
-                    height: Fit,
-                    margin: {top: -20 },
-                    icon_walk: {width: 10, height: 10}
-                }
-
-            }
-
-        }
-    }
-
-    SelectorItem = {{SelectorItem}} {
-        height: 64.0
-        width: 64.0
-        flow: Down
-        align: {x:0.5}
-        
-        draw_bg: {
-
-            instance radius:5.0
-            instance color: #0048E1
-            instance inset: vec4(0.0, 0.0, 0.0, 0.0)
-
-            fn get_color(self) -> vec4 {
-                return self.color
-            }
-
-            fn pixel(self) -> vec4 {
-                let sdf = Sdf2d::viewport(self.pos * self.rect_size)
-                sdf.box(
-                    self.inset.x,
-                    self.inset.y,
-                    self.rect_size.x - (self.inset.x + self.inset.z),
-                    self.rect_size.y - (self.inset.y + self.inset.w),
-                    max(1.0, self.radius)
-                )
-                sdf.fill_keep(self.get_color())
-                return sdf.result;
-            }
-        }
-        draw_label: {
-            color: #f0f0f0
-            text_style: <THEME_FONT_BOLD> {
-                font_size: 8
-            }
-        }
-        draw_icon: {
-            // svg_file: ICO_SEARCH,
-            svg_file: dep("crate://self/resources/logo_makepad.svg")
-            fn get_color(self) -> vec4 {
-                return (#ffffff)
-            }
-        }
-        icon_walk: {width: Fill, height: Fit}
-
-        label_walk: {width: Fit, height: Fit}
-    }
 }
 
-#[derive(Live, Widget)]
+#[derive(Debug, Clone, Default, Eq, Hash, Copy, PartialEq, FromLiveId)]
-pub struct SelectorModal {
+pub struct SelectorModalItemId(pub LiveId);
-    #[deref]
-    view: View,
-}
 
-impl Widget for SelectorModal {
+#[derive(Live, LiveHook, Widget)]
-    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+pub struct SelectorModalItem {
-        DrawStep::done()
-    }
-}
-
-impl LiveHook for SelectorModal {}
-
-#[derive(Clone, Debug, DefaultNone)]
-pub enum SelectorItemAction {
-    Select(usize),
-    Unselect(usize),
-    None,
-}
-
-#[derive(Live, Widget)]
-pub struct SelectorItem {
     #[redraw]
-    #[rust]
-    area: Area,
     #[live]
     draw_bg: DrawQuad,
     #[live]
-    draw_label: DrawText,
+    draw_icon_bg: DrawQuad,
     #[live]
     draw_icon: DrawIcon,
-    #[walk]
-    walk: Walk,
 
     #[live]
-    icon_walk: Walk,
+    draw_label_bg: DrawQuad,
     #[live]
-    label_walk: Walk,
+    draw_label: DrawText,
     #[layout]
     layout: Layout,
-
+    #[walk]
-    #[rust]
+    walk: Walk,
-    selected: bool,
-    #[rust]
-    id: usize,
     #[live]
-    pub text: ArcStringMut,
+    icon_walk: Walk,
+    #[rust]
+    area: Area,
 
     #[rust]
-    pub keyboard_shift: f64,
+    text: ArcStringMut,
+
+    #[live]
+    selected: f32,
+    #[live]
+    hover: f32,
 }
 
-impl Widget for SelectorItem {
+pub enum SelectorModalItemAction {
-    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+    WasSweeped,
-        let uid = self.widget_uid();
+    WasSelected,
-        match event.hits(cx, self.draw_bg.area()) {
+    MightBeSelected,
+    None,
+}
+
+impl SelectorModalItem {
+    pub fn handle_event_with(
+        &mut self,
+        cx: &mut Cx,
+        event: &Event,
+        sweep_area: Area,
+        dispatch_action: &mut dyn FnMut(&mut Cx, SelectorModalItemAction),
+    ) {
+        match event.hits_with_options(cx, self.area, HitOptions::new().with_sweep_area(sweep_area))
+        {
+            Hit::FingerHoverIn(_) => {}
+
+            Hit::FingerHoverOut(_) => {}
+
             Hit::FingerDown(_) => {
-                if self.selected {
+                dispatch_action(cx, SelectorModalItemAction::WasSweeped);
-                    cx.widget_action(uid, &scope.path, SelectorItemAction::Unselect(self.id));
+            }
-                    self.selected = false;
+
-                    self.draw_bg
+            Hit::FingerUp(se) => {
-                        .draw_vars
+                if !se.is_sweep {
-                        .set_var_instance(cx, id!(bg_color), &[]);
+                    dispatch_action(cx, SelectorModalItemAction::WasSelected);
                 } else {
-                    cx.widget_action(uid, &scope.path, SelectorItemAction::Select(self.id));
-                    self.selected = true;
                 }
             }
+
             _ => {}
         }
     }
-    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+}
-        self.begin(cx, self.walk);
-        self.draw_bg.begin(cx, self.walk, self.layout);
-        self.draw_icon.draw_walk(cx, self.icon_walk);
-        self.draw_bg.end(cx);
-        self.end(cx);
 
-        self.begin(cx, walk);
+impl Widget for SelectorModalItem {
-        self.draw_label.draw_walk(cx, Walk::fit(), Align { x: 0.5, y: 0.5 }, self.text.as_ref());
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
-        self.end(cx);
+        let walk = Walk::fit().with_margin_all(5.0);
+
+        cx.begin_turtle(walk, Layout::default().with_align_x(0.5));
+
+        let icon_walk = Walk::fixed(64.0, 64.0).with_add_padding(Padding {
+            left: 10.0,
+            right: 10.0,
+            top: 10.0,
+            bottom: 10.0,
+        });
+
+        self.draw_icon_bg.begin(
+            cx,
+            icon_walk,
+            Layout::default().with_align_x(0.5).with_align_y(0.5),
+        );
+
+        self.draw_icon.draw_walk(
+            cx,
+            Walk {
+                width: Size::Fixed(54.0),
+                height: Size::Fit,
+                ..Default::default()
+            },
+        );
+        self.draw_icon_bg.end(cx);
+
+        self.draw_label_bg.begin(
+            cx,
+            Walk::fit().with_margin_all(5.0),
+            Layout::default().with_align_x(0.5).with_align_y(0.5),
+        );
+
+        self.draw_label.draw_walk(
+            cx,
+            Walk::fit(),
+            Align { x: 0.5, y: 0.5 },
+            self.text.as_ref(),
+        );
+        self.draw_label_bg.end(cx);
+
+        cx.end_turtle_with_area(&mut self.area);
+
+        DrawStep::done()
+    }
+
+    fn text(&self) -> String {
+        self.text.as_ref().to_string()
+    }
+}
+
+#[derive(Live, LiveHook, Widget)]
+pub struct SelectorModalItemList {
+    #[redraw]
+    #[live]
+    draw_bg: DrawQuad,
+    #[rust]
+    items: ComponentMap<SelectorModalItemId, SelectorModalItem>,
+    #[rust]
+    count: usize,
+
+    #[live]
+    draw_title: DrawText,
+
+    #[rust]
+    title: String,
+}
+
+impl Widget for SelectorModalItemList {
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        let walk = Walk {
+            width: Size::Fill,
+            height: Size::Fit,
+            ..Default::default()
+        };
+        let mut layout = Layout::default();
+        layout.flow = Flow::RightWrap;
+
+        let items = self.items.iter_mut();
+        cx.begin_turtle(walk, layout);
+
+        for (_, item) in items {
+            item.draw_walk(cx, scope, Walk::default());
+        }
+
+        cx.end_turtle();
         DrawStep::done()
     }
 }
 
-impl SelectorItem {
+impl SelectorModalItemList {
-    fn begin(&mut self, cx: &mut Cx2d, walk: Walk) { 
+    pub fn set_items(&mut self, cx: &mut Cx, items: Vec<(String, String, String)>) {
-        cx.begin_turtle(walk, self.layout.with_scroll(dvec2(0.,self.keyboard_shift)));
+        self.items.insert(
+            SelectorModalItemId(LiveId::new(cx)),
+            SelectorModalItem::new(cx),
+        );
     }
-    
-    fn end(&mut self, cx: &mut Cx2d) {
-        cx.end_turtle_with_area(&mut self.area);
-    }
-
-
 }
 
-impl LiveHook for SelectorItem {}
+#[derive(Clone, Debug, Live, LiveHook, SerRon, DeRon)]
+pub struct SelectorItem {
+    #[live("icon")]
+    icon: String,
+    #[live("label")]
+    label: String,
+}

mp/src/widgets/shaders/mod.rs

@@ -0,0 +1 @@
+