glib-web 0.2.1 → 0.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 16cdd34be25cdf7ddc7eed6386b812fad3344f9d
-  data.tar.gz: 22e6e356684d59ef1eacafc4db92f1ba3b65cc3e
+  metadata.gz: 6172e95852bba5794a140c99ad5e82fe0c744794
+  data.tar.gz: 2bcf5c2e01de6e21b29a48a6cb27e8818481e244
 SHA512:
-  metadata.gz: 760f82dd68348ebe244c5b4a9a13ab4250b39ccb4aaeb8cda728d51b936be3e5603d06021a7a78313da84eb73670052d35e133b84c2b3cc81199af5380726dfe
-  data.tar.gz: 94fa00daca4205c602579f97c6b4ee5e1846736b301b07ac2fea10efa05b9e5800302ad2c96d04fb69bcd817325e9aaca1cb3530f039fb9f01a94dcf975ef4db
+  metadata.gz: 84d11ec676c1d58f85efe5d40a6b6cc001ed4243f1038ee4b4316a7df2452018d8e7797f9fcfcacb1cbbe2478305afe4ee90505b3de9c259a08c588757fd9610
+  data.tar.gz: db45ed05de333b5b83b254d783d00bb175202a1912682a6b2fe0e860f455af25f5771b7f851f8e1a858b63e42dc857ce650dad41e292a66fcb60768eed26dad0

data/app/helpers/glib/json_ui/list_builders.rb

@@ -7,6 +7,8 @@ module Glib
         end
 
         class AbstractTemplate < JsonUiElement
+          # hash :padding
+
           def editButtons(block)
             json.editButtons do
               block.call page.menu_builder
@@ -27,9 +29,6 @@ module Glib
         end
       end
 
-      # class Sections < AbstractBuilder
-      # end
-
       class Section < AbstractBuilder
         def initialize json, page, template
           super json, page
@@ -41,24 +40,10 @@ module Glib
             json.padding options[:padding]
             json.childViews do
               options[:childViews]&.call page.view_builder
-              # yield page.view_builder
             end
           end
         end
 
-        # def rows(array = nil)
-        #   template = page.list_template_builder
-        #   json.rows do
-        #     if array
-        #       array.each do |object|
-        #         yield template, object
-        #       end
-        #     else
-        #       yield template
-        #     end
-        #   end
-        # end
-
         def rows(options = {})
           block = options[:builder]
           json.rows do
@@ -77,7 +62,6 @@ module Glib
             json.padding options[:padding]
             json.childViews do
               options[:childViews]&.call page.view_builder
-              # yield page.view_builder
             end
           end
         end

data/app/helpers/glib/json_ui/styling_helper.rb

@@ -0,0 +1,9 @@
+module Glib
+  module JsonUi
+    module StylingHelper
+      def body_padding
+        { top: 12, left: 20, right: 20, bottom: 12 }
+      end
+    end
+  end
+end

data/app/helpers/glib/json_ui/view_builder/fields.rb

@@ -47,7 +47,14 @@ class Glib::JsonUi::ViewBuilder
     class Hidden < Text
     end
 
+    class CheckGroup < View
+      string :name
+      views :childViews
+      string :uncheckValue
+    end
+
     class Check < Text
+      string :uncheckValue
     end
 
     # This doesn't use camel case because some terms have become single words (e.g. snackbar) 
@@ -66,6 +73,7 @@ class Glib::JsonUi::ViewBuilder
     class Select < AbstractField
       array :options
       bool :readOnly
+      bool :multiple
     end
 
     class RadioGroup < View

data/app/helpers/glib/json_ui/view_builder.rb

@@ -14,6 +14,8 @@ module Glib
         length :height
         color :backgroundColor
         hash :padding
+        array :styleClasses
+        singleton_array :styleClass, :styleClasses
       end
 
       ### View definitions
@@ -31,7 +33,14 @@ module Glib
         string :text
       end
 
-      class Br < View
+      class H4 < View
+        string :text
+      end
+
+      # class Br < View
+      # end
+
+      class Spacer < View
       end
 
       class Hr < View
@@ -41,8 +50,6 @@ module Glib
         icon :icon
         string :text
         action :onClick
-        array :styleClasses
-        singleton_array :styleClass, :styleClasses
       end
 
       class Fab < View
@@ -56,6 +63,11 @@ module Glib
         action :onClick
       end
 
+      class Avatar < View
+        string :url
+        action :onClick
+      end
+
       class Label < View
         string :text
       end

data/app/views/json_ui/garage/forms/basic.json.jbuilder

@@ -3,19 +3,10 @@ json.title 'Forms'
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
   
-  page.form url: json_ui_garage_url(path: 'forms/basic_post'), method: 'post', padding: { top: 12, left: 20, right: 20, bottom: 12 }, childViews: ->(form) do
+  page.form url: json_ui_garage_url(path: 'forms/basic_post'), method: 'post', padding: body_padding, childViews: ->(form) do
     form.fields_text name: 'user[name]', width: 'matchParent', label: 'Name'
     form.fields_password name: 'user[password]', width: 'matchParent', label: 'Password'
     
-    form.fields_radioGroup name: 'user[gender]', childViews: ->(group) do
-      group.h3 text: 'Gender'
-      group.br height: 6
-      group.fields_radio value: 'M', label: 'Male'
-      group.fields_radio value: 'F', label: 'Female'
-    end
-
-    form.fields_check name: 'user[employer]', value: 1, label: 'I am an employer'
-
     form.panels_split width: 'matchParent', rightViews: ->(split) do
       split.button text: 'Submit', onClick: ->(action) { action.forms_submit }
     end

data/app/views/json_ui/garage/forms/checkboxes.json.jbuilder

@@ -0,0 +1,139 @@
+json.title 'Forms'
+
+json_ui_page json do |page|
+  render "#{@path_prefix}/nav_menu", json: json, page: page
+  
+  page.scroll childViews: ->(scroll) do
+    scroll.panels_form url: json_ui_garage_url(path: 'forms/generic_post'), method: 'post', padding: body_padding, childViews: ->(form) do
+      form.spacer height: 20
+      form.h2 text: 'Radio Group'
+      form.spacer height: 6
+      form.h4 text: 'Gender'
+      form.fields_radioGroup name: 'user[gender]', childViews: ->(group) do
+        group.fields_radio value: 'M', label: 'Male'
+        group.fields_radio value: 'F', label: 'Female'
+      end
+  
+      form.button text: 'Submit', onClick: ->(action) { action.forms_submit }
+    end
+
+    scroll.panels_form url: json_ui_garage_url(path: 'forms/generic_post'), method: 'post', padding: body_padding, childViews: ->(form) do
+      form.spacer height: 20
+      form.h2 text: 'Check Group'
+      form.fields_checkGroup name: 'user[skills][]', uncheckValue: 1, childViews: ->(group) do
+        form.fields_check value: 2, label: 'Game Development'
+        form.fields_check value: 3, label: 'Web Development'
+        form.fields_check value: 4, label: 'Mobile Development'
+      end
+      # form.fields_check name: 'user[skills][]', value: 1, label: 'Game Development'
+      # form.fields_check name: 'user[skills][]', value: 2, label: 'Web Development'
+      # form.fields_check name: 'user[skills][]', value: 3, label: 'Mobile Development'
+  
+      form.button text: 'Submit', onClick: ->(action) { action.forms_submit }
+    end
+    
+    scroll.panels_form url: json_ui_garage_url(path: 'forms/generic_post'), method: 'post', padding: body_padding, childViews: ->(form) do
+      form.spacer height: 20
+      form.h2 text: 'Single Check'
+      form.fields_check name: 'user[employer]', value: 2, uncheckValue: 1, label: 'I am an employer'
+  
+      form.button text: 'Submit', onClick: ->(action) { action.forms_submit }
+    end
+  end
+
+  
+  # form.spacer height: 20
+  # form.h2 text: 'Radio/Check'
+  # form.spacer height: 6
+  # form.h4 text: 'Gender'
+  # form.fields_radioGroup name: 'user[gender]', childViews: ->(group) do
+  #   group.fields_radio value: 'M', label: 'Male'
+  #   group.fields_radio value: 'F', label: 'Female'
+  # end
+
+  # page.form url: json_ui_garage_url(path: 'forms/generic_post'), method: 'post', padding: body_padding, childViews: ->(form) do
+  #   # form.h2 text: 'Select'
+  #   # form.spacer height: 6
+  #   # languages = {
+  #   #   'zh-HK' => 'Hong Kong',
+  #   #   'zh-TW' => 'Taiwan',
+  #   #   'zh-CN' => 'China',
+  #   #   'ja-JP' => 'Japan',
+  #   #   'ko-KR' => 'Korea',
+  #   #   'ru-RU' => 'Russian',
+  #   #   'en-PH' => 'Philippines'
+  #   # }
+  #   # form.fields_select name: 'user[primary_language]', width: 'matchParent', label: 'Primary Language', options: languages.map { |k, v| { value: k, text: v } }, value: 'ja-JP'
+  #   # form.fields_select name: 'user[preferred_languages][]', width: 'matchParent', label: 'Preferred Languages', options: languages.map { |k, v| { value: k, text: v } }, value: ['ja-JP', 'ko-KR'], multiple: true
+
+  #   # form.spacer height: 20
+  #   # form.h2 text: 'Date/Time'
+  #   # form.spacer height: 6
+  #   # form.fields_date name: 'user[date]', width: 'matchParent', label: 'Date', min: '2010-01-01', max: '2012-01-01', value: '2010-02-01'
+  #   # form.fields_datetime name: 'user[date_time]', width: 'matchParent', label: 'Date Time', min: '2018-06-09T00:00', max: '2018-06-17T00:00', value: '2018-06-15T19:30'
+    
+  #   # form.spacer height: 20
+  #   # form.h2 text: 'Radio/Check'
+  #   # form.spacer height: 6
+  #   # form.h4 text: 'Gender'
+  #   # form.fields_radioGroup name: 'user[gender]', childViews: ->(group) do
+  #   #   group.fields_radio value: 'M', label: 'Male'
+  #   #   group.fields_radio value: 'F', label: 'Female'
+  #   # end
+  #   form.fields_check name: 'user[skills][]', value: 1, label: 'Game Development'
+  #   form.fields_check name: 'user[skills][]', value: 2, label: 'Web Development'
+  #   form.fields_check name: 'user[skills][]', value: 3, label: 'Mobile Development'
+
+  #   # form.spacer height: 20
+  #   # form.h2 text: 'Map'
+  #   # form.spacer height: 6
+  #   # form.fields_latLong name: 'user[address]', width: 'matchParent', label: 'Type an address', value: 'Sydney Harbour Bridge',
+  #   #   latitudeField: { name: 'user[latitude]', label: 'Lat', value: -33.8523063, readOnly: true },
+  #   #   longitudeField: { name: 'user[longitude]', label: 'Long', value: 151.21078710000006, readOnly: true }
+
+  #   form.button text: 'Submit', onClick: ->(action) { action.forms_submit }
+  # end
+  
+  # page.form url: json_ui_garage_url(path: 'forms/generic_post'), method: 'post', padding: body_padding, childViews: ->(form) do
+  #   # form.h2 text: 'Select'
+  #   # form.spacer height: 6
+  #   # languages = {
+  #   #   'zh-HK' => 'Hong Kong',
+  #   #   'zh-TW' => 'Taiwan',
+  #   #   'zh-CN' => 'China',
+  #   #   'ja-JP' => 'Japan',
+  #   #   'ko-KR' => 'Korea',
+  #   #   'ru-RU' => 'Russian',
+  #   #   'en-PH' => 'Philippines'
+  #   # }
+  #   # form.fields_select name: 'user[primary_language]', width: 'matchParent', label: 'Primary Language', options: languages.map { |k, v| { value: k, text: v } }, value: 'ja-JP'
+  #   # form.fields_select name: 'user[preferred_languages][]', width: 'matchParent', label: 'Preferred Languages', options: languages.map { |k, v| { value: k, text: v } }, value: ['ja-JP', 'ko-KR'], multiple: true
+
+  #   # form.spacer height: 20
+  #   # form.h2 text: 'Date/Time'
+  #   # form.spacer height: 6
+  #   # form.fields_date name: 'user[date]', width: 'matchParent', label: 'Date', min: '2010-01-01', max: '2012-01-01', value: '2010-02-01'
+  #   # form.fields_datetime name: 'user[date_time]', width: 'matchParent', label: 'Date Time', min: '2018-06-09T00:00', max: '2018-06-17T00:00', value: '2018-06-15T19:30'
+    
+  #   # form.spacer height: 20
+  #   # form.h2 text: 'Radio/Check'
+  #   # form.spacer height: 6
+  #   # form.h4 text: 'Gender'
+  #   # form.fields_radioGroup name: 'user[gender]', childViews: ->(group) do
+  #   #   group.fields_radio value: 'M', label: 'Male'
+  #   #   group.fields_radio value: 'F', label: 'Female'
+  #   # end
+  #   form.fields_check name: 'user[skills][]', value: 1, label: 'Game Development'
+  #   form.fields_check name: 'user[skills][]', value: 2, label: 'Web Development'
+  #   form.fields_check name: 'user[skills][]', value: 3, label: 'Mobile Development'
+
+  #   # form.spacer height: 20
+  #   # form.h2 text: 'Map'
+  #   # form.spacer height: 6
+  #   # form.fields_latLong name: 'user[address]', width: 'matchParent', label: 'Type an address', value: 'Sydney Harbour Bridge',
+  #   #   latitudeField: { name: 'user[latitude]', label: 'Lat', value: -33.8523063, readOnly: true },
+  #   #   longitudeField: { name: 'user[longitude]', label: 'Long', value: 151.21078710000006, readOnly: true }
+
+  #   form.button text: 'Submit', onClick: ->(action) { action.forms_submit }
+  # end
+end

data/app/views/json_ui/garage/forms/generic_post.json.jbuilder

@@ -1,5 +1,3 @@
-sleep 0.5
-
 json_ui_response json do |action|
-  action.dialogs_alert message: 'Success!'
+  action.dialogs_alert message: "Submitted information: #{params.require(:user).values.join(", ")}"
 end

data/app/views/json_ui/garage/forms/index.json.jbuilder

@@ -6,7 +6,7 @@ json_ui_page json do |page|
   page.list sections: [
     ->(section) do
       section.header padding: { top: 12, bottom: 12, left: 16, right: 16 }, childViews: ->(header) do
-        header.h3 text: 'Form Fields'
+        header.h2 text: 'Form Fields'
       end
 
       section.rows builder: ->(template) do
@@ -16,6 +16,9 @@ json_ui_page json do |page|
         template.thumbnail title: 'Pickers (TODO: web, ios, android)', onClick: ->(action) do
           action.windows_open url: json_ui_garage_url(path: 'forms/pickers')
         end
+        template.thumbnail title: 'Checkboxes', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'forms/checkboxes')
+        end
         template.thumbnail title: 'File Upload', onClick: ->(action) do
           action.windows_open url: json_ui_garage_url(path: 'forms/file_upload')
         end
@@ -26,7 +29,7 @@ json_ui_page json do |page|
       end
     end, ->(section) do
       section.header padding: { top: 12, bottom: 12, left: 16, right: 16 }, childViews: ->(header) do
-        header.h3 text: 'Submission Logics'
+        header.h2 text: 'Submission Logics'
       end
 
       section.rows builder: ->(template) do
@@ -43,7 +46,7 @@ json_ui_page json do |page|
       end
     end, ->(section) do
       section.header padding: { top: 12, bottom: 12, left: 16, right: 16 }, childViews: ->(header) do
-        header.h3 text: 'Web Only'
+        header.h2 text: 'Web Only'
       end
 
       section.rows builder: ->(template) do

data/app/views/json_ui/garage/forms/pickers.json.jbuilder

@@ -3,38 +3,43 @@ json.title 'Forms'
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
   
-  page.form url: json_ui_garage_url(path: 'forms/basic_post'), method: 'post', padding: { top: 12, left: 20, right: 20, bottom: 12 }, childViews: ->(form) do
-    # TODO: Implement vuejs component, e.g. https://vuetifyjs.com/en/components/date-pickers#date-pickers-in-dialog-and-menu
-    form.fields_date name: 'user[date]', width: 'matchParent', label: 'Date', min: '1990-01-01', max: '2030-01-01', value: '2010-01-01'
+  page.form url: json_ui_garage_url(path: 'forms/generic_post'), method: 'post', padding: body_padding, childViews: ->(form) do
+    form.h2 text: 'Select'
+    form.spacer height: 6
+    languages = {
+      'zh-HK' => 'Hong Kong',
+      'zh-TW' => 'Taiwan',
+      'zh-CN' => 'China',
+      'ja-JP' => 'Japan',
+      'ko-KR' => 'Korea',
+      'ru-RU' => 'Russian',
+      'en-PH' => 'Philippines'
+    }
+    form.fields_select name: 'user[primary_language]', width: 'matchParent', label: 'Primary Language', options: languages.map { |k, v| { value: k, text: v } }, value: 'ja-JP'
+    form.fields_select name: 'user[preferred_languages][]', width: 'matchParent', label: 'Preferred Languages', options: languages.map { |k, v| { value: k, text: v } }, value: ['ja-JP', 'ko-KR'], multiple: true
+
+    form.spacer height: 20
+    form.h2 text: 'Date/Time'
+    form.spacer height: 6
+    form.fields_date name: 'user[date]', width: 'matchParent', label: 'Date', min: '2010-01-01', max: '2012-01-01', value: '2010-02-01'
+    form.fields_datetime name: 'user[date_time]', width: 'matchParent', label: 'Date Time', min: '2018-06-09T00:00', max: '2018-06-17T00:00', value: '2018-06-15T19:30'
     
-    # TODO: Implement vuejs component, e.g. using a combination of:
-    # - https://vuetifyjs.com/en/components/date-pickers#date-pickers-in-dialog-and-menu
-    # - https://vuetifyjs.com/en/components/time-pickers
-    form.fields_datetime name: 'user[date_time]', width: 'matchParent', label: 'Date Time', min: '2018-06-07T00:00', max: '2018-06-14T00:00', value: '2018-06-12T19:30'
+    # form.spacer height: 20
+    # form.h2 text: 'Radio/Check'
+    # form.spacer height: 6
+    # form.h4 text: 'Gender'
+    # form.fields_radioGroup name: 'user[gender]', childViews: ->(group) do
+    #   group.fields_radio value: 'M', label: 'Male'
+    #   group.fields_radio value: 'F', label: 'Female'
+    # end
 
+    form.spacer height: 20
+    form.h2 text: 'Map'
+    form.spacer height: 6
     form.fields_latLong name: 'user[address]', width: 'matchParent', label: 'Type an address', value: 'Sydney Harbour Bridge',
       latitudeField: { name: 'user[latitude]', label: 'Lat', value: -33.8523063, readOnly: true },
       longitudeField: { name: 'user[longitude]', label: 'Long', value: 151.21078710000006, readOnly: true }
 
-    # json.child! do
-    #   json.view 'fields/latLong-v1'
-    #   json.name 'user[address]'
-    #   json.value 'Sydney Harbour Bridge'
-    #   json.label 'Type an address'
-    #   json.latitudeField do
-    #     json.name 'user[latitude]'
-    #     json.label 'Lat'
-    #     json.value -33.8523063
-    #     json.readOnly true
-    #   end
-    #   json.longitudeField do
-    #     json.name 'user[longitude]'
-    #     json.label 'Long'
-    #     json.value 151.21078710000006
-    #     json.readOnly true
-    #   end
-    # end
-
     form.button text: 'Submit', onClick: ->(action) { action.forms_submit }
   end
 end

data/app/views/json_ui/garage/forms/submission_indicator.json.jbuilder

@@ -3,7 +3,8 @@ json.title 'Forms'
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
   
-  page.form url: json_ui_garage_url(path: 'forms/generic_post'), method: 'post', padding: { top: 12, left: 20, right: 20, bottom: 12 }, childViews: ->(form) do
+  page.form url: json_ui_garage_url(path: 'forms/submission_indicator_post'), method: 'post', padding: { top: 12, left: 20, right: 20, bottom: 12 }, childViews: ->(form) do
     form.button text: 'This button gets disabled on submit', onClick: ->(action) { action.forms_submit }
+    form.fab icon: 'send', onClick: ->(action) { action.forms_submit }
   end
 end

data/app/views/json_ui/garage/forms/submission_indicator_post.json.jbuilder

@@ -0,0 +1,5 @@
+sleep 0.5
+
+json_ui_response json do |action|
+  action.dialogs_alert message: 'Success!'
+end

data/app/views/json_ui/garage/lists/templating.json.jbuilder

@@ -14,7 +14,7 @@ json_ui_page json do |page|
       end
       template.thumbnail title: 'Item with subtitle', subtitle: 'Item subtitle'
       template.thumbnail title: 'Item with thumbnail image', subtitle: 'Item subtitle', imageUrl: @sample_image_url
-      # template.featured title: 'Featured with featured image', subtitle: 'Item subtitle', imageUrl: @sample_image_url
+      template.featured title: 'Featured with featured image', subtitle: 'Item subtitle', imageUrl: @sample_image_url
     end
   end
 end

data/app/views/json_ui/garage/pages/full_width_height.json.jbuilder

@@ -1,43 +1,5 @@
 json.title 'Pages'
 
-# json.header do
-#   render "#{@path_prefix}/nav_menu", json: json, page: page
-  
-#   json.padding(left: 20, right: 20, top: 5, bottom: 5)
-#   json.backgroundColor '#b3bac2'
-#   json.subviews do
-#     json.child! do
-#       json.view 'h1-v1'
-#       json.text 'Header'
-#     end
-#   end
-# end
-
-# json.content do
-#   json.height 'matchParent'
-#   json.padding(top: 15, left: 20, right: 20, bottom: 15)
-#   json.subviews do
-#     json.child! do
-#       json.view 'button-v1'
-#       json.width 'matchParent'
-#       json.height 'matchParent'
-#       json.text 'Full Width/Height'
-#     end
-#   end
-# end
-
-# json.footer do
-#   json.height 80
-#   json.padding(left: 20, right: 20, top: 5, bottom: 5)
-#   json.backgroundColor '#b3bac2'
-#   json.subviews do
-#     json.child! do
-#       json.view 'h1-v1'
-#       json.text 'Footer'
-#     end
-#   end
-# end
-
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
 
@@ -46,16 +8,14 @@ json_ui_page json do |page|
   end
 
   page.body height: 'matchParent', padding: {top: 15, left: 20, right: 20, bottom: 15}, childViews: ->(body) do
-    body.panels_scroll width: 'matchParent', height: 'matchParent', padding: {top: 20, left: 20, right: 20, bottom: 20}, childViews: ->(scroll) do
-      scroll.button width: 'matchParent', height: 'matchParent', text: 'Full Width/Height'
-    end
+    body.button width: 'matchParent', height: 'matchParent', text: 'Full Width/Height'
+
+    # body.panels_scroll width: 'matchParent', height: 'matchParent', padding: {top: 20, left: 20, right: 20, bottom: 20}, childViews: ->(scroll) do
+    #   scroll.button width: 'matchParent', height: 'matchParent', text: 'Full Width/Height'
+    # end
   end
 
   page.footer height: 80, padding: {top: 12, left: 20, right: 20, bottom: 12}, backgroundColor: '#b3bac2', childViews: ->(footer) do
     footer.h1 text: 'Footer'
   end
-
-  # page.scroll height: 'matchParent', padding: {top: 20, left: 20, right: 20, bottom: 20}, childViews: ->(scroll) do
-  #   scroll.button width: 'matchParent', height: 'matchParent', text: 'Full Width/Height'
-  # end
 end

data/app/views/json_ui/garage/panels/card.json.jbuilder

@@ -3,24 +3,21 @@ json.title 'Panels'
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
   
-  page.scroll childViews: ->(scroll) do
-    scroll.br height: 20
-
+  page.scroll backgroundColor: '#fafafa', padding: { top: 12, bottom: 12, left: 16, right: 16 }, childViews: ->(scroll) do
     scroll.panels_card width: 'matchParent', padding: { top: 12, bottom: 12, left: 16, right: 16 }, childViews: ->(card) do
-      card.h1 text: 'Vertical Panel'
-      card.panels_vertical backgroundColor: '#b3bac2', childViews: ->(panel) do
-      # card.panels_vertical backgroundColor: '#ff0000', childViews: ->(panel) do
-        panel.button text: 'Button1'
-        panel.button text: 'Button2', width: 200
-        panel.button text: 'Button3', width: 300
-      end
+      card.h1 text: 'With Default Layout'
+      card.br height: 6
+      card.button text: 'Button1'
+      card.button text: 'Button2'
+      card.button text: 'Button3'
     end
 
     scroll.br height: 20
     
     scroll.panels_card width: 'matchParent', padding: { top: 12, bottom: 12, left: 16, right: 16 }, childViews: ->(card) do
-      card.h1 text: 'Vertical Panel with equal filling'
-      card.panels_vertical backgroundColor: '#b3bac2', height: 300, distribution: 'fillEqually', childViews: ->(panel) do
+      card.h1 text: 'With Child Panel'
+      card.br height: 6
+      card.panels_horizontal backgroundColor: '#b3bac2', childViews: ->(panel) do
         panel.button text: 'Button1'
         panel.button text: 'Button2'
         panel.button text: 'Button3'

data/app/views/json_ui/garage/panels/carousel.json.jbuilder

@@ -6,7 +6,7 @@ image_url2 = 'https://s.abcnews.com/images/International/Guam03-gty-jrl-170809_1
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
   
-  page.scroll childViews: ->(scroll) do
+  page.scroll padding: { top: 12, bottom: 12, left: 16, right: 16 }, childViews: ->(scroll) do
     scroll.h1 text: 'Carousel panel'
     scroll.panels_carousel width: 'matchParent', childViews: ->(carousel) do
       carousel.image url: image_url1, width: 'matchParent'

data/app/views/json_ui/garage/panels/horizontal.json.jbuilder

@@ -3,7 +3,7 @@ json.title 'Panels'
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
   
-  page.scroll childViews: ->(scroll) do
+  page.scroll padding: { top: 12, bottom: 12, left: 16, right: 16 }, childViews: ->(scroll) do
     scroll.h1 text: 'Horizontal panel'
     scroll.panels_horizontal backgroundColor: '#b3bac2', childViews: ->(panel) do
       panel.button text: '1'

data/app/views/json_ui/garage/panels/split.json.jbuilder

@@ -3,7 +3,7 @@ json.title 'Panels'
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
   
-  page.scroll childViews: ->(scroll) do
+  page.scroll padding: { top: 12, bottom: 12, left: 16, right: 16 }, childViews: ->(scroll) do
     scroll.h1 text: '2 columns'
     scroll.panels_split width: 'matchParent', leftViews: ->(panel) do
       panel.button text: '1'

data/app/views/json_ui/garage/panels/vertical.json.jbuilder

@@ -3,30 +3,7 @@ json.title 'Panels'
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
   
-  page.scroll childViews: ->(scroll) do
-    # scroll.br height: 20
-
-    # scroll.panels_card width: 'matchParent', padding: { top: 12, bottom: 12, left: 16, right: 16 }, childViews: ->(card) do
-    #   card.h1 text: 'Vertical Panel'
-    #   card.panels_vertical backgroundColor: '#b3bac2', childViews: ->(panel) do
-    #   # card.panels_vertical backgroundColor: '#ff0000', childViews: ->(panel) do
-    #     panel.button text: 'Button1'
-    #     panel.button text: 'Button2', width: 200
-    #     panel.button text: 'Button3', width: 300
-    #   end
-    # end
-
-    # scroll.br height: 20
-    
-    # scroll.panels_card width: 'matchParent', padding: { top: 12, bottom: 12, left: 16, right: 16 }, childViews: ->(card) do
-    #   card.h1 text: 'Vertical Panel with equal filling'
-    #   card.panels_vertical backgroundColor: '#b3bac2', height: 300, distribution: 'fillEqually', childViews: ->(panel) do
-    #     panel.button text: 'Button1'
-    #     panel.button text: 'Button2'
-    #     panel.button text: 'Button3'
-    #   end
-    # end
-
+  page.scroll padding: { top: 12, bottom: 12, left: 16, right: 16 }, childViews: ->(scroll) do
     scroll.h1 text: 'Vertical Panel'
     scroll.panels_vertical backgroundColor: '#b3bac2', childViews: ->(panel) do
       panel.button text: 'Button1'

data/app/views/json_ui/garage/views/basic.json.jbuilder

@@ -3,14 +3,14 @@ json.title 'Views'
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
   
-  page.scroll padding: {top: 20, left: 20, right: 20, bottom: 20}, childViews: ->(scroll) do
-    scroll.h1 text: 'Map'
+  page.scroll padding: body_padding, childViews: ->(scroll) do
+    scroll.h2 text: 'Map'
     scroll.br height: 6
     scroll.map width: 'matchParent', latitude: 13.4837, longitude: 144.7917, zoom: 11, height: 250, dataUrl: json_ui_garage_url(path: 'views/map_data')
 
     # TODO: Implement in vuejs
     scroll.br height: 20
-    scroll.h1 text: 'Calendar'
+    scroll.h2 text: 'Calendar'
     scroll.br height: 6
     scroll.calendar width: 'matchParent', height: 500, dataUrl: json_ui_garage_url(path: 'views/calendar_data')
 

data/app/views/json_ui/garage/views/images.json.jbuilder

@@ -3,16 +3,24 @@ json.title 'Views'
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
   
-  page.scroll childViews: ->(scroll) do
-    scroll.label text: "\n"
-    scroll.h1 text: 'Image with URL'
+  page.scroll padding: body_padding, childViews: ->(scroll) do
+    scroll.h2 text: 'Avatar'
+    scroll.br height: 6
+    scroll.avatar url: 'https://www.wpjournalist.nl/wp-content/uploads/2019/03/avatar-jongen-voorbeeld-1.jpg'
+
+    scroll.br height: 20
+    scroll.h2 text: 'Image with URL'
+    scroll.br height: 6
     scroll.image width: 100, url: @sample_image_url
-    scroll.label text: "\n"
-    scroll.h1 text: 'Image with base64 data'
+
+    scroll.br height: 20
+    scroll.h2 text: 'Image with base64 data'
+    scroll.br height: 6
     scroll.image height: 100, base64Data: 'data:image/gif;base64,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'
-    scroll.label text: "\n"
-    scroll.h1 text: 'QR Code as base64 image'
 
+    scroll.br height: 20
+    scroll.h2 text: 'QR Code as base64 image'
+    scroll.br height: 6
     if defined? RQRCode
       qr_content = { version: 1, message: 'This is a test' }
       qr = RQRCode::QRCode.new(qr_content.to_json)

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: glib-web
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.2.2
 platform: ruby
 authors:
 - ''
@@ -41,6 +41,7 @@ files:
 - app/helpers/glib/json_ui/menu_builder.rb
 - app/helpers/glib/json_ui/page_helper.rb
 - app/helpers/glib/json_ui/response_helper.rb
+- app/helpers/glib/json_ui/styling_helper.rb
 - app/helpers/glib/json_ui/table_builders.rb
 - app/helpers/glib/json_ui/view_builder.rb
 - app/helpers/glib/json_ui/view_builder/fields.rb
@@ -50,6 +51,7 @@ files:
 - app/views/json_ui/garage/actions/index.json.jbuilder
 - app/views/json_ui/garage/forms/basic.json.jbuilder
 - app/views/json_ui/garage/forms/basic_post.json.jbuilder
+- app/views/json_ui/garage/forms/checkboxes.json.jbuilder
 - app/views/json_ui/garage/forms/file_upload.json.jbuilder
 - app/views/json_ui/garage/forms/floating_submit.json.jbuilder
 - app/views/json_ui/garage/forms/generic_post.json.jbuilder
@@ -59,6 +61,7 @@ files:
 - app/views/json_ui/garage/forms/submission_flow.json.jbuilder
 - app/views/json_ui/garage/forms/submission_flow_post.json.jbuilder
 - app/views/json_ui/garage/forms/submission_indicator.json.jbuilder
+- app/views/json_ui/garage/forms/submission_indicator_post.json.jbuilder
 - app/views/json_ui/garage/forms/text_validation.json.jbuilder
 - app/views/json_ui/garage/home/index.json.jbuilder
 - app/views/json_ui/garage/lists/_infinite_scroll_section.json.jbuilder