expanding image library

library.edn

@@ -22,4 +22,34 @@
   :name "brush teeth",
   :categories ["bedtime"],
   :keywords ["bedtime" "routine"],
-  :image "teeth-brushing.png"}]
+  :image "teeth-brushing.png"}
+ {:id 6, :name "ten second tidy", :image "ten-second-tidy.jpg"}
+ {:id 7, :name "sing", :image "sing.jpg"}
+ {:id 8, :name "blessing", :image "blessing.jpeg"}
+ {:id 9,
+  :name "family home evening",
+  :image "family-home-evening.jpeg"}
+ {:id 11, :name "bath", :image "bath.png"}
+ {:id 12, :name "ice cream cone", :image "ice-cream-cone.png"}
+ {:id 13, :name "sacrament", :image "sacrament.jpeg"}
+ {:id 14, :name "potty", :image "potty.jpg"}
+ {:id 15, :name "temple", :image "temple.jpeg"}
+ {:id 16, :name "church", :image "church.jpg"}
+ {:id 17, :name "clean up", :image "clean-up.jpg"}
+ {:id 18, :name "numbers", :image "numbers.png"}
+ {:id 19, :name "cleaning", :image "cleaning.png"}
+ {:id 20, :name "read", :image "read.png"}
+ {:id 21, :name "walk", :image "walk.jpg"}
+ {:id 22, :name "shoes", :image "shoes.png"}
+ {:id 23, :name "flush", :image "flush.jpg"}
+ {:id 24, :name "video", :image "video.png"}
+ {:id 25, :name "car", :image "car.png"}
+ {:id 26, :name "get dressed", :image "get-dressed.png"}
+ {:id 27, :name "scriptures", :image "scriptures.jpg"}
+ {:id 28, :name "letters", :image "letters.png"}
+ {:id 30, :name "wash hands", :image "wash-hands.png"}
+ {:id 31, :name "typing2", :image "typing2.png"}
+ {:id 32, :name "writing", :image "writing.jpg"}
+ {:id 33, :name "wait", :image "wait.png"}
+ {:id 34, :name "typing1", :image "typing1.png"}
+ {:id 35, :name "pray", :image "pray.jpeg"}]

src/lineup/components/edit/selector.cljs

@@ -10,36 +10,41 @@
     [re-com/modal-panel
      :backdrop-on-click #(re-frame/dispatch [::events/select-selecting nil])
      :child
-     [re-com/v-box
-      :gap "10px"
-      :align :center
-      :children
-      (concat
-       [[re-com/title
-         :label "Select an Activity"
-         :level :level3]
-        [:div "(TODO: search box here)"]]
-       (map
-        (fn [library-item]
-          [re-com/h-box
-           :gap "20px"
-           :align :center
-           :align-self :start
-           :attr {:on-click #(re-frame/dispatch [::events/select-task which (:id library-item)])}
-           :class "task-selector"
-           :children
-           [[re-com/box
-             :width "50px"
-             :height "50px"
-             :max-width "50px"
-             :max-height "50px"
-             :justify :center
-             :child
-             [:img
-              {:src (:image library-item)}]]
-            [re-com/box
-             :child
-             [re-com/title
-              :label (:name library-item)
-              :level :level3]]]])
-        @library-data))]]))
+     [re-com/scroller
+      :v-scroll :auto
+      :h-scroll :off
+      :height "80vh"
+      :child
+      [re-com/v-box
+       :gap "10px"
+       :align :center
+       :children
+       (concat
+        [[re-com/title
+          :label "Select an Activity"
+          :level :level3]
+         [:div "(TODO: search box here)"]]
+        (map
+         (fn [library-item]
+           [re-com/h-box
+            :gap "20px"
+            :align :center
+            :align-self :start
+            :attr {:on-click #(re-frame/dispatch [::events/select-task which (:id library-item)])}
+            :class "task-selector"
+            :children
+            [[re-com/box
+              :width "50px"
+              :height "50px"
+              :max-width "50px"
+              :max-height "50px"
+              :justify :center
+              :child
+              [:img
+               {:src (:image library-item)}]]
+             [re-com/box
+              :child
+              [re-com/title
+               :label (:name library-item)
+               :level :level3]]]])
+         @library-data))]]]))

src/lineup/db.cljs

@@ -6,28 +6,58 @@
    :schedule {:tasks [{:ref 2} {:ref 5} {:ref 4} {:ref 5} {:ref 1}]}
 
    :library
-   [{:id 1
-     :name "sleep"
-     :categories ["bedtime" "naping"]
-     :keywords ["bed" "nap"]
+   [{:id 1,
+     :name "sleep",
+     :categories ["bedtime" "naping"],
+     :keywords ["bed" "nap"],
      :image "sleep.png"}
-    {:id 2
-     :name "eat"
-     :categories ["eating"]
-     :keywords ["meal" "food" "chopsticks"]
+    {:id 2,
+     :name "eat",
+     :categories ["eating"],
+     :keywords ["meal" "food" "chopsticks"],
      :image "eating1.png"}
-    {:id 3
-     :name "eat"
-     :categories ["eating"]
-     :keywords ["meal" "food" "spaghetti"]
+    {:id 3,
+     :name "eat",
+     :categories ["eating"],
+     :keywords ["meal" "food" "spaghetti"],
      :image "eating2.png"}
-    {:id 4
-     :name "go to school"
-     :categories ["school"]
-     :keywords ["class"]
+    {:id 4,
+     :name "go to school",
+     :categories ["school"],
+     :keywords ["class"],
      :image "school.png"}
-    {:id 5
-     :name "brush teeth"
-     :categories ["bedtime"]
-     :keywords ["bedtime" "routine"]
-     :image "teeth-brushing.png"}]})
+    {:id 5,
+     :name "brush teeth",
+     :categories ["bedtime"],
+     :keywords ["bedtime" "routine"],
+     :image "teeth-brushing.png"}
+    {:id 6, :name "ten second tidy", :image "ten-second-tidy.jpg"}
+    {:id 7, :name "sing", :image "sing.jpg"}
+    {:id 8, :name "blessing", :image "blessing.jpeg"}
+    {:id 9,
+     :name "family home evening",
+     :image "family-home-evening.jpeg"}
+    {:id 11, :name "bath", :image "bath.png"}
+    {:id 12, :name "ice cream cone", :image "ice-cream-cone.png"}
+    {:id 13, :name "sacrament", :image "sacrament.jpeg"}
+    {:id 14, :name "potty", :image "potty.jpg"}
+    {:id 15, :name "temple", :image "temple.jpeg"}
+    {:id 16, :name "church", :image "church.jpg"}
+    {:id 17, :name "clean up", :image "clean-up.jpg"}
+    {:id 18, :name "numbers", :image "numbers.png"}
+    {:id 19, :name "cleaning", :image "cleaning.png"}
+    {:id 20, :name "read", :image "read.png"}
+    {:id 21, :name "walk", :image "walk.jpg"}
+    {:id 22, :name "shoes", :image "shoes.png"}
+    {:id 23, :name "flush", :image "flush.jpg"}
+    {:id 24, :name "video", :image "video.png"}
+    {:id 25, :name "car", :image "car.png"}
+    {:id 26, :name "get dressed", :image "get-dressed.png"}
+    {:id 27, :name "scriptures", :image "scriptures.jpg"}
+    {:id 28, :name "letters", :image "letters.png"}
+    {:id 30, :name "wash hands", :image "wash-hands.png"}
+    {:id 31, :name "typing2", :image "typing2.png"}
+    {:id 32, :name "writing", :image "writing.jpg"}
+    {:id 33, :name "wait", :image "wait.png"}
+    {:id 34, :name "typing1", :image "typing1.png"}
+    {:id 35, :name "pray", :image "pray.jpeg"}]})