sync

mp/src/app_ui.rs

@@ -129,7 +129,7 @@ live_design! {
                 <H4>{ text: "Input"}
 
                 <SelectorItem> {
-                    text: "Selector Item"
+                    text: "PPI"
                 }
 
                 <Group> {

mp/src/widgets/selector_modal.rs

@@ -46,12 +46,32 @@ live_design! {
     }
 
     SelectorItem = {{SelectorItem}} {
-        height: Fit
-        width: Fit
+        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 {
-                return mix(#7,#4,self.pos.y);
+                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: {
@@ -64,10 +84,12 @@ live_design! {
             // svg_file: ICO_SEARCH,
             svg_file: dep("crate://self/resources/logo_makepad.svg")
             fn get_color(self) -> vec4 {
-                return (THEME_COLOR_D_1)
+                return (#ffffff)
             }
         }
-        icon_walk: {width: 250.0, height: Fit}
+        icon_walk: {width: Fill, height: Fit}
+
+        label_walk: {width: Fit, height: Fit}
     }
 }
 
@@ -95,6 +117,8 @@ pub enum SelectorItemAction {
 #[derive(Live, Widget)]
 pub struct SelectorItem {
     #[redraw]
+    #[rust]
+    area: Area,
     #[live]
     draw_bg: DrawQuad,
     #[live]
@@ -106,6 +130,10 @@ pub struct SelectorItem {
 
     #[live]
     icon_walk: Walk,
+    #[live]
+    label_walk: Walk,
+    #[layout]
+    layout: Layout,
 
     #[rust]
     selected: bool,
@@ -113,6 +141,9 @@ pub struct SelectorItem {
     id: usize,
     #[live]
     pub text: ArcStringMut,
+
+    #[rust]
+    pub keyboard_shift: f64,
 }
 
 impl Widget for SelectorItem {
@@ -135,15 +166,29 @@ impl Widget for SelectorItem {
         }
     }
     fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
-        self.draw_bg.begin(cx, walk, Layout::default());
+        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_label
-            .draw_walk(cx, walk, Align::default(), self.text.as_ref());
         self.draw_bg.end(cx);
+        self.end(cx);
+
+        self.begin(cx, walk);
+        self.draw_label.draw_walk(cx, Walk::fit(), Align { x: 0.5, y: 0.5 }, self.text.as_ref());
+        self.end(cx);
         DrawStep::done()
     }
 }
 
-impl SelectorItem {}
+impl SelectorItem {
+    fn begin(&mut self, cx: &mut Cx2d, walk: Walk) { 
+        cx.begin_turtle(walk, self.layout.with_scroll(dvec2(0.,self.keyboard_shift)));
+    }
+    
+    fn end(&mut self, cx: &mut Cx2d) {
+        cx.end_turtle_with_area(&mut self.area);
+    }
+
+
+}
 
 impl LiveHook for SelectorItem {}