voom-presenters 0.1.13 → 2.0.3

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

@@ -2,18 +2,18 @@ require_relative '../helpers/indented_grid'
 
 Voom::Presenters.define(:layouts) do
   helpers Demo::Helpers::IndentedGrid
-  
+
   attach :top_nav
   attach :component_drawer
   page_title 'Layouts'
 
   indented_grid do
 
-    display 'Grid'
+    headline 'Grid'
 
     grid do
       (1..12).each do |size|
-        column 1, color:  :lightgray do
+        column 1, color: :lightgray do
           body '1'
         end
       end
@@ -29,7 +29,14 @@ Voom::Presenters.define(:layouts) do
 
     grid do
       column 6, color: :lightgray do
-        body '6'
+        body '6 wide with sub-grid of 12'
+        grid do
+          (1..12).each do |size|
+            column 1, color: :white do
+              body '1'
+            end
+          end
+        end
       end
       column 4, color: :lightgray do
         body '4'
@@ -39,6 +46,9 @@ Voom::Presenters.define(:layouts) do
       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,32 @@ Voom::Presenters.define(:lists) do
               when 2
                 switch
               when 3
-                icon_toggle :star
+                icon_toggle :star_border, on_icon: :star
+            end
+          end
+        end
+      end
+    end
+
+    headline 'Multiple controls'
+    list do
+      actors.each_with_index do |actor, index|
+        line do
+          text actor.name
+          actions do
+            case index%4
+            when 0
+              checkbox
+              icon :delete
+            when 1
+              radio_button
+              icon :delete
+            when 2
+              switch
+              icon :delete
+            when 3
+              icon_toggle :star_border
+              icon :delete
             end
           end
         end
@@ -100,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

@@ -1,8 +1,46 @@
 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 forms icons datetime_fields date_fields time_fields).sort.each do |comp|
+    %i(
+      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
           loads comp

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

@@ -0,0 +1,5 @@
+Voom::Presenters.define(:pattern_drawer) do
+  drawer 'Patterns' do
+    attach :pattern_menu
+  end
+end

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

@@ -0,0 +1,12 @@
+Voom::Presenters.define('pattern_menu') do
+  helpers Voom::Presenters::Helpers::Inflector
+  menu side: :left do
+    %i(search_select floating_card drag_drop).sort.each do |pattern|
+      item titleize(pattern)  do
+        event :click do
+          loads pattern
+        end
+      end
+    end
+  end
+end

data/app/demo/components/number_fields.pom

@@ -0,0 +1,53 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:number_fields) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Number Fields'
+
+  indented_grid do
+
+    title 'Basic'
+    number_field name: :text do
+      label 'Enter a number'
+      hint 'Enter text or scroll to your desired number'
+    end
+    blank
+
+    title 'Min/Max/Step'
+    number_field name: :min_max, min: 0, max: 100, step: 5 do
+      label 'Min/Max/Step'
+      hint 'Arrows will step in increments of 5'
+    end
+    blank
+
+    title 'Decimals'
+    number_field name: :decimal, min: 1.0, max: 100, step: 0.01 do
+      label 'Decimal'
+      hint 'Arrows will step in increments of .01'
+    end
+    blank
+
+    title 'With Leading Icon'
+    number_field name: :amount do
+      label 'Amount'
+      icon :attach_money, position: :left
+    end
+
+    title 'With Trailing Icon'
+    number_field name: :amount2 do
+      label 'Amount'
+      icon :attach_money, position: :right
+    end
+    blank
+
+    title 'Read Only'
+    number_field name: :readonly, readonly: true do
+      label 'Amount'
+      value '500'
+    end
+
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/padding.pom

@@ -0,0 +1,96 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:padding) do
+  helpers Demo::Helpers::IndentedGrid
+
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Padding'
+
+  indented_grid do
+
+    headline 'Padding'
+    text %(Block containers (grid/column, content, card) have default padding that can be modified.)
+    blank
+    text %(There are four levels of padding: 0 = off, 1 = gutter_width/4, 2 = gutter_width/2, 3 = gutter_width)
+    text %(You can also specify :all, :none or true (same as :all) and false (same as :none))
+    text %(Each block container defines its default values (top,bottom,right,left) padding differently.)
+
+
+    blank
+    title 'Grid padding'
+    text %(Top level grid padding by default is level 3: top3, right3, bottom3, left3.
+          Specifying padding: top is the same as padding: top3.)
+    text %(Column padding defaults to :none. The definition of column padding for [top,bottom,right,left] is equal to [top2,right2,bottom2,left2])
+  end
+  grid color: :darkgrey do
+    column 12, color: :lightgray do
+      body 'top level default grid padding'
+    end
+  end
+  indented_grid do
+    blank
+    text %(A grid nested in another grid turns off padding for the right and left by default: top3, right0, bottom3: left0.)
+
+    grid color: :darkgrey do
+      column 12, color: :lightgray do
+        body 'nested default level grid padding'
+      end
+    end
+    blank
+    text %(You can control the padding for each dimension.)
+
+    grid color: :darkgrey, padding: [:left0, :top3, :bottom2, :right1] do
+      column 12, color: :lightgray, padding: [:left3, :top1, :bottom2, :right0] do
+        body 'Custom padding (view source to see this)'
+      end
+    end
+    blank
+
+    title 'Content padding'
+    text %(A content block by default has `:none` padding. The default level is level 2. So :all is equal to [:top2,:right2,:bottom2,:left2])
+    grid color: :darkgrey, padding: :none do
+      column 12, color: :lightgray, padding: :none do
+        content do
+          body 'No padding'
+        end
+      end
+    end
+    blank
+    grid color: :darkgrey, padding: :none do
+      column 12, color: :lightgray, padding: :none do
+        content padding: :all do
+          body 'default :all padding is level 2'
+        end
+      end
+    end
+    blank
+    grid color: :darkgrey, padding: :none do
+      column 12, color: :lightgray, padding: :none do
+        content padding: [:top3, :bottom0, :right1, :left2] do
+          body 'Custom padding'
+        end
+      end
+    end
+    blank
+    title 'Card padding'
+    text %(A card defaults its padding to `:all`. The default level is level 2. So :all is equal to [:top2,:right2,:bottom2,:left2])
+    grid color: :darkgrey, padding: :none do
+      column 12, color: :lightgray, padding: :none do
+        card do
+          body 'Defaults to :all, level2'
+        end
+      end
+    end
+    blank
+    grid color: :darkgrey, padding: :none do
+      column 12, color: :lightgray, padding: :none do
+        card padding: [:top3, :bottom0, :right1, :left2] do
+          body 'Custom padding'
+        end
+      end
+    end
+    blank
+    attach :code, file: __FILE__
+  end
+end