coprl 0.1.0 → 3.0.0.beta.5

data/app/demo/components/images.pom

@@ -0,0 +1,45 @@
+Coprl::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

@@ -0,0 +1,54 @@
+require_relative '../helpers/indented_grid'
+
+Coprl::Presenters.define(:layouts) do
+  helpers Demo::Helpers::IndentedGrid
+
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Layouts'
+
+  indented_grid do
+
+    headline 'Grid'
+
+    grid do
+      (1..12).each do |size|
+        column 1, color: :lightgray do
+          body '1'
+        end
+      end
+    end
+
+    grid do
+      (1..3).each do |size|
+        column 4, color: :lightgray do
+          body '4'
+        end
+      end
+    end
+
+    grid do
+      column 6, color: :lightgray do
+        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'
+      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

data/app/demo/components/lists.pom

@@ -0,0 +1,168 @@
+require_relative '../helpers/indented_grid'
+
+Coprl::Presenters.define(:lists) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Lists'
+  helpers do
+    def actors
+      [OpenStruct.new(name: "<strong>Bryan Cranston</strong>", episodes: 62, body: 'Bryan Cranston played the role of Walter in Breaking Bad. He is also known for playing Hal in Malcom in the Middle.'),
+       OpenStruct.new(name: "Aaron Paul", episodes: 62, body: 'Aaron Paul played the role of Jesse in Breaking Bad. He also featured in the "Need For Speed" Movie'),
+       OpenStruct.new(name: "Bob Odenkirk", episodes: 62, body: 'Bob Odinkrik played the role of Saul in Breaking Bad. Due to public fondness for the character, Bob stars in his own show now, called "Better Call Saul".'),
+       OpenStruct.new(name: "Giancarlo Esposito", episodes: 24, body: 'Giancarlo Giuseppe Alessandro Esposito played the role of Gustavo "Gus" Fring on the AMC shows Breaking Bad and Better Call Saul.')]
+    end
+  end
+
+  indented_grid do
+
+    headline 'Simple'
+    list do
+      actors.each do |actor|
+        line do
+          text actor.name
+        end
+      end
+    end
+
+    headline 'Simple with Separators'
+    list do
+      actors.each do |actor|
+        line do
+          text actor.name
+        end
+        separator unless actor == actors.last
+      end
+    end
+
+    headline 'Simple with Selected'
+    list do
+      actors.each do |actor|
+        line selected: actors.first == actor do
+          text actor.name
+        end
+      end
+    end
+
+
+    headline 'Icons'
+    list do
+      actors.each do |actor|
+        line do
+          text actor.name
+          icon :person
+        end
+      end
+    end
+
+
+    headline 'Avatars and actions'
+    list do
+      actors.each do |actor|
+        line do
+          text actor.name
+          avatar :person
+
+          event :click do
+            loads 'http://www.yahoo.com', target: '_blank'
+          end
+
+          actions do
+            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
+    end
+
+    headline 'Avatars and controls'
+    list do
+      actors.each_with_index do |actor, index|
+        line do
+          text actor.name
+          avatar :person
+          actions do
+            case index%4
+              when 0
+                checkbox
+              when 1
+                radio_button
+              when 2
+                switch
+              when 3
+                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
+      end
+    end
+
+    headline 'Two line'
+
+    list do
+      actors.each_with_index do |actor, index|
+        line do
+          text actor.name
+          avatar :person
+          info 'actor' if index == 0
+          actions do
+            icon_toggle :star
+          end
+          subtitle "#{actor.episodes} episodes"
+        end
+      end
+    end
+
+    headline 'Selectable List'
+    list selectable: true do
+      actors.each do |actor|
+        line do
+          text actor.name
+          avatar :person
+          subtitle "#{actor.episodes} episodes"
+        end
+      end
+    end
+
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/menus.pom

@@ -0,0 +1,53 @@
+require_relative '../helpers/indented_grid'
+
+Coprl::Presenters.define(:menus) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Menus'
+
+  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 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
+              item 'Yet Another Action'
+            end
+          end
+        end
+      end
+      column 5 do
+        card height: '300px' do
+          button icon: :more_vert, position: :right do
+            menu do
+              item 'Some Action'
+              item 'Another Action'
+              divider
+              item 'Disabled Action', disabled: true
+              item 'Yet Another Action'
+            end
+          end
+        end
+      end
+    end
+
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/multi_selects.pom

@@ -0,0 +1,29 @@
+require_relative '../helpers/indented_grid'
+
+Coprl::Presenters.define(:multi_selects) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Multi Select Fields'
+
+  indented_grid do
+    content do
+      multi_select do
+        label 'Multi Select Field'
+        check_option value: 'value1', text: 'First value', selected: true
+        check_option value: 'value2', text: 'Second value', selected: true
+        check_option value: 'value3', text: 'Third value', selected: true
+      end
+
+      multi_select do
+        label 'One Selection'
+        check_option value: 'value1', text: 'First value', selected: true
+        check_option value: 'value2', text: 'Second value', selected: false
+        check_option value: 'value3', text: 'Third value', selected: false
+      end
+
+    end
+
+    attach :code, file: __FILE__
+  end
+end

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

@@ -0,0 +1,5 @@
+Coprl::Presenters.define(:component_drawer) do
+  drawer 'Components' do
+    attach :component_menu
+  end
+end

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

@@ -0,0 +1,53 @@
+Coprl::Presenters.define('component_menu') do
+  helpers Coprl::Presenters::Helpers::Inflector
+  menu side: :left do
+    %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
+      menus
+      multi_selects
+      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
+        end
+      end
+    end
+  end
+end
+
+

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

@@ -0,0 +1,5 @@
+Coprl::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 @@
+Coprl::Presenters.define('pattern_menu') do
+  helpers Coprl::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'
+
+Coprl::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