voom-presenters 0.1.12 → 2.0.2

data/app/demo/components/drawers.pom

@@ -28,7 +28,7 @@ Voom::Presenters.define(:drawers) do
   end
 
   indented_grid do
-    display 'Drawers'
+    headline 'Drawers'
 
     attach :code, file: __FILE__
   end

data/app/demo/components/file_inputs.pom

@@ -0,0 +1,52 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:file_inputs) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'File Inputs'
+
+  indented_grid do
+
+    file_input name: :event_image, preview: [:preview_id, :filename] do
+      grid do
+        column 6 do
+          card do
+            image width: 200, id: :preview_id
+              text id: :filename
+            text 'Drag and drop or click this button to upload'
+            button icon: :cloud_upload
+          end
+        end
+        column 6 do
+        end
+      end
+    end
+
+
+    title 'Simple'
+    file_input name: :upload
+
+    title 'With image preview'
+    file_input preview: :image_id, accept: 'image/png, image/jpeg, image/gif, image/svg+xml'
+    image 'http://geotix.com/application/files/3514/5564/7308/MyNorthTicketsLogo.png', width: 100, id: :image_id
+
+    title 'With image button preview'
+    file_input preview: :button_id, accept: 'image/png, image/jpeg, image/gif, image/svg+xml'
+    button type: :image, id: :button_id do
+      image 'http://geotix.com/application/files/3514/5564/7308/MyNorthTicketsLogo.png'
+    end
+    text 'Note: it binds to the button id, not the nested image id.'
+
+    title 'With text_area preview'
+    file_input preview: :text_area_id, accept: 'text/plain, text/markdown'
+    text_area id: :text_area_id
+
+    title 'With image and file_name preview'
+    file_input preview: [:text_area_id2, :filename_id], accept: 'text/plain, text/markdown'
+    subtitle2 id: :filename_id
+    text_area id: :text_area_id2
+
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/footers.pom

@@ -29,7 +29,7 @@ Voom::Presenters.define(:footers) do
   end
 
   indented_grid do
-    display 'Footers'
+    headline 'Footers', level: 3
 
     attach :code, file: __FILE__
   end

data/app/demo/components/google_maps.pom

@@ -0,0 +1,22 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:maps) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Maps'
+
+  indented_grid do
+    subheading 'Static Maps'
+
+    address = '125 Park Street, Traverse City, MI'
+    google_map address: address, height: 300, width: 400  do
+      event :click do
+        loads "https://www.google.com/maps/place/#{address}"
+      end
+    end
+
+    attach :code, file: __FILE__
+  end
+
+end

data/app/demo/components/headers.pom

@@ -1,41 +1,101 @@
 require_relative '../helpers/indented_grid'
 
+Voom::Presenters.define(:static_header, namespace: :headers) do
+  helpers Demo::Helpers::IndentedGrid
+
+  attach :component_drawer
+
+  indented_grid do
+    text 'The **static header** disappears when scrolling.'
+    text 'It is the default header type and will never cover page content.'
+    text 'You can expand the **Show Source** area below to see it in action.'
+  end
+
+  header title: 'Static Header', placement: :static do
+    nav do
+      item 'Headers' do
+        event :click do
+          loads '/headers'
+        end
+      end
+    end
+  end
+
+  indented_grid do
+    headline 'Headers'
+    
+    attach :code, file: __FILE__
+  end
+end
+
+Voom::Presenters.define(:fixed_header, namespace: :headers) do
+  helpers Demo::Helpers::IndentedGrid
+
+  attach :component_drawer
+
+  indented_grid do
+    text 'The **fixed header** remains fixed to the top of the viewport when scrolling.'
+    text 'A header can be made fixed via `placement: :fixed`, and can cover page content.'
+    text 'You can expand the **Show Source** area below to see it in action.'
+  end
+
+  header title: 'Fixed Header', placement: :fixed do
+    nav do
+      item 'Headers' do
+        event :click do
+          loads '/headers'
+        end
+      end
+    end
+  end
+
+  indented_grid do
+    headline 'Headers'
+    
+    attach :code, file: __FILE__
+  end
+end
+
 Voom::Presenters.define(:headers) do
   helpers Demo::Helpers::IndentedGrid
   
   attach :top_nav
   attach :component_drawer
 
-
   header 'Presenters Demo' do
     nav do
       item 'About (Header)' do
-              event :click do
-                loads :index
-              end
-            end
-
-            item 'Components (Header)' do
-              event :click do
-                loads :components
-              end
-            end
-
-            item 'Styles (Header)' do
-              event :click do
-                loads :styles
-              end
-            end
+        event :click do
+          loads :index
+        end
+      end
+
+      item 'Components (Header)' do
+        event :click do
+          loads :components
+        end
+      end
+
+      item 'Styles (Header)' do
+        event :click do
+          loads :styles
+        end
+      end
     end
   end
+
   page_title 'Page about headers' do
     icon :subtitles
   end
 
+  indented_grid do
+    headline 'Headers'
+
+    text '* [Static](/headers/static_header): Hides when the viewport is scrolled'
+    text '* [Fixed](/headers/fixed_header): Remains fixed at the top of the viewport'
+  end
 
   indented_grid do
-    display 'Headers'
-    
     attach :code, file: __FILE__
   end
-end
+end

data/app/demo/components/icons.pom

@@ -5,7 +5,7 @@ Voom::Presenters.define(:icons) do
 
   helpers do
     def small_card(&block)
-      card height: '100px', width: '100px' do
+      card height: '100px', width: '100%' do
         yield_to(&block) # Special method that yields in the correct binding context
       end
     end
@@ -16,65 +16,96 @@ Voom::Presenters.define(:icons) do
     column 10 do
       body 'An icon is commonly used on a menu, button, chip, list or card. They can be used standalone as well.'
 
-      headline 'Plain'
-      title 'Material design icons'
-      body 'By default the icon name will be assumed to be [material design](https://material.io/icons/).'
-      icon :thumb_up
-
-      title 'Font awesome icons'
-      body "[Font awesome](https://fontawesome.com/icons?d=gallery) icons can also be used."\
-         'You provide the font awesome class.'
-      body 'For example: `fa-thumbs-up`:', level: 2
-      icon 'fa-thumbs-up'
-      body 'You can also optionally add the font awesome style prefix, if not provided it defaults to `fas` (solid).', level: 2
-      body 'For example: `far fa-thumbs-up`:', level: 2
-      icon 'far fa-thumbs-up'
-
-
-      headline 'Color'
-      title 'primary'
-      icon :thumb_up, color: :primary
-      title 'secondary'
-      icon :thumb_up, color: :secondary
-      title 'custom'
-      icon :thumb_up, color: :hotpink
-
-      headline 'Size'
-      body 'You can specify the size of an icon'
-      icon :thumb_up, color: :hotpink, size: '64px'
-
-      title 'Position'
-      body "'Icon's can be positioned to left, right, top, and bottom"
-
       grid do
-        column 1 do
-          small_card do
-            icon :face, position: :left
-          end
-        end
-        column 1 do
-          small_card do
-            icon :face, position: :right
-          end
+        column 12 do
+          headline 'Plain'
+          subtitle 'Material design icons'
+          body 'By default the icon name will be assumed to be [material design](https://material.io/icons/).'
+          icon :thumb_up
         end
-        column 1 do
-          small_card do
-            icon :face, position: :top
-          end
+      end
+
+      grid do
+        column 12 do
+          headline 'Font awesome icons'
+          body "[Font awesome](https://fontawesome.com/icons?d=gallery) icons can also be used."\
+             'You provide the font awesome class.'
+          body 'For example: `fa-thumbs-up`:', level: 2
+          icon 'fa-thumbs-up'
+          body 'You can also optionally add the font awesome style prefix, if not provided it defaults to `fas` (solid).', level: 2
+          body 'For example: `far fa-thumbs-up`:', level: 2
+          icon 'far fa-thumbs-up'
         end
-        column 1 do
-          small_card do
-            icon :face, position: :bottom
-          end
+      end
+
+      grid do
+        column 12 do
+          headline 'Color'
+          body '**primary**'
+          icon :thumb_up, color: :primary
+          body '**secondary**'
+          icon :thumb_up, color: :secondary
+          body '**custom from palette**'
+          icon :thumb_up, color: :red
+          body '**custom**'
+          icon :thumb_up, color: :hotpink
         end
-        column 1 do
-          small_card do
-            icon :face, position: [:top, :right]
-          end
+      end
+
+      grid do
+        column 12 do
+          headline 'Size'
+          body 'You can specify the size of an icon'
+          subtitle '**x-small**'
+          icon :thumb_up, size: 'x-small'
+          subtitle '**small**'
+          icon :thumb_up, size: 'small'
+          subtitle '**medium** (default)'
+          icon :thumb_up, size: 'medium'
+          subtitle '**large**'
+          icon :thumb_up, size: 'large'
+          subtitle '**x-large**'
+          icon :thumb_up, size: 'x-large'
+          subtitle '**xx-large**'
+          icon :thumb_up, size: 'xx-large'
         end
-        column 1 do
-          small_card do
-            icon :face, position: [:bottom, :right]
+      end
+
+      grid do
+        column 12 do
+          headline 'Position'
+          body "Icon's can be positioned to the left, right, top, and bottom"
+          grid padding: false do
+            column 1 do
+              small_card do
+                icon :face, position: :left
+              end
+            end
+            column 1 do
+              small_card do
+                icon :face, position: :right
+              end
+            end
+            column 1 do
+              small_card do
+                icon :face, position: :top
+              end
+            end
+            column 1 do
+              small_card do
+                icon :face, position: :bottom
+              end
+            end
+            column 1 do
+              small_card do
+                icon :face, position: [:top, :right]
+              end
+            end
+            column 1 do
+              small_card do
+                icon :face, position: [:bottom, :right]
+              end
+            end
           end
         end
       end

data/app/demo/components/image_lists.pom

@@ -0,0 +1,100 @@
+Voom::Presenters.define(:image_lists) do
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Image Lists'
+
+  grid do
+    column 1
+    column 8 do
+
+      grid do
+        column 12 do
+          headline 'Standard with 5 columns'
+          image_list do
+            image 'img/demo/dog.png', label: 'Dog'
+            image 'img/demo/dog.png', label: 'Dog'
+            image 'img/demo/dog.png', label: 'Cat'
+            image 'img/demo/dog.png'
+            image 'img/demo/dog.png'
+            image 'img/demo/dog.png', label: 'I have an action' do
+              event :click do
+                snackbar 'Clicked a dog!'
+              end
+            end
+          end
+        end
+      end
+
+      grid do
+        column 12 do
+          headline 'Text protection with 3 columns'
+          image_list list_type: 'text-protection', columns: 3 do
+            image 'img/demo/dog.png', label: 'Dog'
+            image 'img/demo/dog.png', label: 'Dog'
+            image 'img/demo/dog.png', label: 'Cat'
+          end
+        end
+      end
+
+      grid do
+        column 12 do
+          headline 'Masonry with 4 columns'
+          image_list list_type: 'masonry', columns: 4 do
+            image 'img/demo/image_card.jpg', label: 'Person'
+            image 'img/demo/dog.png', label: 'Dog'
+            image 'img/demo/dog.png', label: 'Cat'
+            image 'img/demo/dog.png'
+            image 'img/demo/dog.png'
+            image 'img/demo/dog.png'
+            image 'img/demo/dog.png'
+            image 'img/demo/dog.png'
+            image 'img/demo/dog.png'
+          end
+        end
+      end
+
+      grid do
+        column 12 do
+          headline 'Inherits image component border attributes'
+          image_list list_type: 'standard', columns: 4 do
+            image 'img/demo/image_card.jpg', label: 'No border'
+            image 'img/demo/dog.png', label: 'Round', border_radius: '50%'
+            image 'img/demo/image_card.jpg', label: 'Rounded Corners', border_radius: '5%'
+            image 'img/demo/dog.png', label: 'Thick Border', border: '10px'
+            image 'img/demo/image_card.jpg', label: 'Thin secondary border', border: '1px', border_color: :secondary
+          end
+        end
+      end
+
+      grid do
+        column 12 do
+          headline 'Image attributes applied globally'
+          image_list list_type: 'standard', columns: 4, border_radius: '50%' do
+            image 'img/demo/image_card.jpg'
+            image 'img/demo/dog.png'
+            image 'img/demo/image_card.jpg'
+            image 'img/demo/dog.png'
+            image 'img/demo/image_card.jpg'
+          end
+        end
+      end
+
+      grid do
+        column 12 do
+          headline 'Primary color border with spacing'
+          image_list list_type: 'standard', columns: 4, border: '2px', border_color: :primary, spacing: '10px' do
+            image 'img/demo/image_card.jpg'
+            image 'img/demo/dog.png'
+            image 'img/demo/image_card.jpg'
+            image 'img/demo/dog.png'
+            image 'img/demo/image_card.jpg'
+          end
+        end
+      end
+
+      attach :code, file: __FILE__
+
+    end
+  end
+end
+