voom-presenters 0.2.0 → 2.0.0

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
+

data/app/demo/components/images.pom

@@ -0,0 +1,45 @@
+Voom::Presenters.define(:images) do
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Icons'
+
+  grid do
+    column 1
+    column 10 do
+
+      headline 'Plain'
+      image 'img/demo/welcome_card.jpg', width: 512, height: 176
+
+      headline 'With a Border'
+      image 'img/demo/dog.png', border: '1px'
+
+      headline 'With a Thick Border'
+      image 'img/demo/welcome_card.jpg', width: 512, height: 176, border: '10px'
+
+      headline 'Framed in a Circle'
+      image 'img/demo/image_card.jpg', width: 200, height: 'auto', border_radius: '50%'
+
+      headline 'With rounded corders'
+      image 'img/demo/image_card.jpg', width: 200, height: 'auto', border_radius: '5%'
+
+
+      headline 'Image Fit'
+      grid do
+        column 4 do
+          headline ':cover'
+            image 'img/demo/image_card.jpg', width: '100%', height: '256px', fit: :cover
+        end
+        column 4 do
+          headline ':fill'
+          image 'img/demo/image_card.jpg', width: '100%', height: '256px', fit: :fill
+        end
+        column 4 do
+          headline ':contain'
+          image 'img/demo/image_card.jpg', width: '100%', height: '256px', fit: :contain
+        end
+      end
+
+      attach :code, file: __FILE__
+    end
+  end
+end

data/app/demo/components/layouts.pom

@@ -46,31 +46,9 @@ Voom::Presenters.define(:layouts) do
       end
     end
 
-    headline 'Grid Padding'
-    body 'You can control the grid padding with the `padding` attribute.',
-    'By default a top most grid has padding on all four sides.',
-     'A nested grid has top and bottom padding only. (No right and left padding.)',
-     'Vaid values are `:all`, `:none` and an array that specifies sides to pad: `[:top, :right, :bottom, :left]`. (Same as `:none`)',
-    'You can also pad columns. Column padding is half as wide as grid padding.  '
-    grid padding: :top do
-      column 6, color: :lightgray do
-        body '6 wide with sub-grid of 12'
-        grid padding: :none do
-          (1..12).each do |size|
-            column 1, color: :white do
-              body '1'
-            end
-          end
-        end
-      end
-      column 4, color: :lightgray, padding: [:top, :left, :bottom] do
-        body '4'
-      end
-      column 2, color: :lightgray do
-        body '2'
-      end
-    end
+    headline 'Padding'
+    body "See the [padding demo](#{presenters_path(:padding)})"
 
     attach :code, file: __FILE__
   end
-end
+end

data/app/demo/components/lists.pom

@@ -62,8 +62,28 @@ Voom::Presenters.define(:lists) do
         line do
           text actor.name
           avatar :person
+
+          event :click do
+            loads 'http://www.yahoo.com', target: '_blank'
+          end
+
           actions do
-            icon :star
+            icon :stardo do
+              tooltip 'Person'
+            end
+            button icon: :more_vert do
+              menu position: :right do
+                item 'Some Action' do
+                  event :click do
+                    snackbar 'Hey there'
+                  end
+                end
+                item 'Another Action'
+                divider
+                item 'Disabled Action', disabled: true
+                item 'Yet Another Action'
+              end
+            end
           end
         end
       end
@@ -84,7 +104,7 @@ Voom::Presenters.define(:lists) do
               when 2
                 switch
               when 3
-                icon_toggle :star
+                icon_toggle :star_border, on_icon: :star
             end
           end
         end
@@ -108,7 +128,7 @@ Voom::Presenters.define(:lists) do
               switch
               icon :delete
             when 3
-              icon_toggle :star
+              icon_toggle :star_border
               icon :delete
             end
           end
@@ -125,7 +145,7 @@ Voom::Presenters.define(:lists) do
           avatar :person
           info 'actor' if index == 0
           actions do
-            icon_toggle :star 
+            icon_toggle :star
           end
           subtitle "#{actor.episodes} episodes"
         end

data/app/demo/components/menus.pom

@@ -6,15 +6,25 @@ Voom::Presenters.define(:menus) do
   attach :component_drawer
   page_title 'Menus'
 
-  indented_grid do
+  dialog id: :hello_world do
+    title "Hello World!"
+    actions do
+      button 'Close'
+    end
+  end
 
+  indented_grid do
     grid do
       column 1
       column 5 do
         card height: '300px' do
           button icon: :more_vert do
-            menu do
-              item 'Some Action'
+            menu id: :dialog_test do
+              item 'Some Dialog Action' do
+                event :click do
+                  dialog :hello_world
+                end
+              end
               item 'Another Action'
               divider
               item 'Disabled Action', disabled: true
@@ -26,7 +36,7 @@ Voom::Presenters.define(:menus) do
       column 5 do
         card height: '300px' do
           button icon: :more_vert, position: :right do
-            menu  do
+            menu do
               item 'Some Action'
               item 'Another Action'
               divider

data/app/demo/components/nav/menu.pom

@@ -2,13 +2,44 @@ Voom::Presenters.define('component_menu') do
   helpers Voom::Presenters::Helpers::Inflector
   menu side: :left do
     %i(
-      cards lists expansion_panels tables text_fields
-      selects buttons fabs fabs_mini dialogs
-      layouts headers drawers footers menus
-      toggles chips snackbar badges tooltips
-      hidden_fields text_areas steppers sliders tab_bars
-      content icons datetime_fields date_fields time_fields
-      maps file_inputs
+      avatars
+      badges
+      buttons
+      cards
+      chips
+      content
+      date_fields
+      datetime_fields
+      dialogs
+      drawers
+      expansion_panels
+      fabs
+      fabs_mini
+      file_inputs
+      footers
+      headers
+      hidden_fields
+      icons
+      images
+      image_lists
+      layouts
+      lists
+      number_fields
+      maps
+      menus
+      progress
+      selects
+      sliders
+      snackbar
+      steppers
+      tab_bars
+      tables
+      text_areas
+      text_fields
+      time_fields
+      toggles
+      tooltips
+      unordered_lists
     ).sort.each do |comp|
       item titleize(comp) do
         event :click do