glib-web 0.2.7 → 0.2.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d1d23736ab1385ea517451aa33bebd883ef4b435
-  data.tar.gz: 2e0924b9b4aeaca57659e55d5c9f9a4ee5bf08f6
+  metadata.gz: 71ebbfa315c624f4e03a9f817173ae0ef3828b2f
+  data.tar.gz: c9c83fd55418f5dc5e54734a8c10b13fc6e10fab
 SHA512:
-  metadata.gz: 648ab483946b51659c3f2c3039ada0427655ef1a722ed75cf51b48e643bb40d1927b04f7398bd063abc44abe47f49198b2d1c883863afe0df4fbd747893c8591
-  data.tar.gz: 340c83ff4c79a0146d55323e81a195d10235d5d2c8f393321e7a7c2826079cf3bb37bd85a759fb8f0e37aa89a2b3058dae9128e969e717c14f9d738676fbbb18
+  metadata.gz: 86f2ad586d632b40c5308585692461134229d84629adb9b8ffd2ddc9b2694c57d7c199226417190bb835a9464d2a2d68f6142efd01fdf3659e45925a6fe95554
+  data.tar.gz: 156523cc553b9b31b504e0c13cf1ea0862e0b7bbe183a6b91de6b592716c5b0cdead9cb86bd536a9eca67f38656b2a177d18a5aa9b7eb912e119ceba4831eeac

data/app/controllers/glib/home_controller.rb

@@ -3,7 +3,6 @@ module Glib
 
     def json_ui_garage
       @path_prefix = 'json_ui/garage'
-      @sample_image_url = 'https://cdn-images-1.medium.com/max/1200/1*Qc0XxYm-qAZL-7tjjlNfrg.png'
 
       # We can't use prepend_view_path because it affects the app, not the gem
       path = "#{@path_prefix}/#{params[:path] || 'home/index'}"

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

@@ -148,10 +148,26 @@ module Glib
       end
 
       def self.icon propName
-        define_method(propName) do |value| 
-          json.set!(propName) do
-            json.materialName value
-          end
+        define_method(propName) do |value|
+          if value.is_a?(Hash)
+            json.set!(propName) do
+              json.set value[:set] || 'material'
+              json.name value[:name]
+
+              if (badge = value[:badge]).is_a?(Hash)
+                json.badge badge
+              else
+                json.badge do
+                  json.text badge
+                end
+              end
+              
+            end
+          else
+            json.set!(propName) do
+              json.name value
+            end
+          end 
         end
       end
       

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

@@ -12,6 +12,14 @@ module Glib
       def json_padding_body_this
         { top: 6, right: 10, bottom: 6, left: 10 }
       end
+
+      def json_image_standard_url
+        'https://cdn-images-1.medium.com/max/1200/1*Qc0XxYm-qAZL-7tjjlNfrg.png'
+      end
+
+      def json_image_avatar_url
+        'https://www.wpjournalist.nl/wp-content/uploads/2019/03/avatar-jongen-voorbeeld-1.jpg'
+      end
     end
   end
 end

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

@@ -22,7 +22,7 @@ module Glib
 
       class H1 < View
         string :text
-        action :onClick
+        # action :onClick
       end
 
       class H2 < View
@@ -37,9 +37,6 @@ module Glib
         string :text
       end
 
-      # class Br < View
-      # end
-
       class Spacer < View
       end
 

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

@@ -28,7 +28,7 @@ class Glib::JsonUi::ViewBuilder
     end
 
     class Text < AbstractField
-      int :maxlength
+      int :maxLength
       bool :readOnly
     end
 
@@ -88,7 +88,12 @@ class Glib::JsonUi::ViewBuilder
 
     class RadioGroup < View
       string :name
+      string :value
       views :childViews
+      
+      string :iconOfBeforeSelected
+      string :iconOfSelected
+      string :iconOfAfterSelected
     end
 
     class Radio < View

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

@@ -124,6 +124,7 @@ class Glib::JsonUi::ViewBuilder
     class Vertical < View
       views :childViews
       string :distribution
+      string :align
     end
 
     class Horizontal < View

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

@@ -3,7 +3,7 @@ if local_assigns[:top_nav] || json_ui_app_is_web?
 
   page.leftDrawer content: ->(drawer) do
     drawer.header childViews: ->(header) do
-      header.h1 text: 'App', onClick: ->(action) do
+      header.button text: 'App', onClick: ->(action) do
         action.windows_open url: root_url
       end
     end
@@ -14,6 +14,10 @@ if local_assigns[:top_nav] || json_ui_app_is_web?
         action.windows_open url: json_ui_garage_url(path: 'pages/index')
       end
   
+      menu.button text: 'Panels', onClick: ->(action) do
+        action.windows_open url: json_ui_garage_url(path: 'panels/index')
+      end
+      
       menu.button text: 'Lists', onClick: ->(action) do
         action.windows_open url: json_ui_garage_url(path: 'lists/index')
       end
@@ -22,10 +26,6 @@ if local_assigns[:top_nav] || json_ui_app_is_web?
         action.windows_open url: json_ui_garage_url(path: 'forms/index')
       end
       
-      menu.button text: 'Panels', onClick: ->(action) do
-        action.windows_open url: json_ui_garage_url(path: 'panels/index')
-      end
-      
       menu.button text: 'Views', onClick: ->(action) do
         action.windows_open url: json_ui_garage_url(path: 'views/index')
       end
@@ -37,11 +37,11 @@ if local_assigns[:top_nav] || json_ui_app_is_web?
       menu.divider
       menu.label text: 'Misc Menu'
       
-      menu.button text: 'Categories', onClick: ->(action) do
+      menu.button icon: 'list', text: 'Categories', onClick: ->(action) do
         action.windows_open url: json_ui_garage_url
       end
   
-      menu.button text: 'Diagnostics', onClick: ->(action) do
+      menu.button icon: { name: 'zoom_in', badge: '!' }, text: 'Diagnostics', onClick: ->(action) do
         action.dialogs_alert message: %{
           Bundle ID: #{json_ui_app_bundle_id || '<unknown>'}
           App Version: #{json_ui_app_build_version || '<unknown>'}

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

@@ -13,10 +13,30 @@ json_ui_page json do |page|
         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.spacer height: 20
+      form.h2 text: 'Rating'
+      form.spacer height: 6
+      form.fields_radioGroup name: 'user[rating1][]', iconOfSelected: 'star', iconOfBeforeSelected: 'star', iconOfAfterSelected: 'star_border', childViews: ->(panel) do
+        panel.panels_horizontal childViews: ->(panel) do
+          panel.fields_radio value: 1
+          panel.fields_radio value: 2
+          panel.fields_radio value: 3
+          panel.fields_radio value: 4
+          panel.fields_radio value: 5
+        end
+      end
+      form.fields_radioGroup name: 'user[rating2][]', iconOfSelected: 'star', iconOfBeforeSelected: 'star', iconOfAfterSelected: 'star_border', value: 1, childViews: ->(panel) do
+        panel.panels_horizontal childViews: ->(panel) do
+          panel.fields_radio value: 1
+          panel.fields_radio value: 2
+          panel.fields_radio value: 3
+          panel.fields_radio value: 4
+          panel.fields_radio value: 5
+        end
+      end
   
+      form.spacer height: 20
       form.button text: 'Submit', onClick: ->(action) { action.forms_submit }
     end
     

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

@@ -7,7 +7,7 @@ json_ui_page json do |page|
     form.h2 text: 'Radio Group'
     form.spacer height: 6
     form.h4 text: 'Gender'
-    form.fields_radioGroup name: 'user[gender]', childViews: ->(group) do
+    form.fields_radioGroup name: 'user[gender]', value: 'F', childViews: ->(group) do
       group.fields_radio value: 'M', label: 'Male'
       group.fields_radio value: 'F', label: 'Female'
     end
@@ -38,6 +38,12 @@ json_ui_page json do |page|
     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: 'Country'
+    form.spacer height: 6
+    region_field = { name: 'user[city]', label: 'City' }
+    form.fields_country name: 'user[country]', width: 'matchParent', label: 'Country', region: region_field
+
     form.spacer height: 20
     form.h2 text: 'Map'
     form.spacer height: 6

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

@@ -3,13 +3,13 @@ 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: Turn on html5 validation
+  page.form url: json_ui_garage_url(path: 'forms/generic_post'), method: 'post', padding: json_padding_body, childViews: ->(form) do
     form.fields_email name: 'user[email]', width: 'matchParent', label: 'Email'
-    form.fields_email name: 'user[url]', width: 'matchParent', label: 'URL'
+    form.fields_url name: 'user[url]', width: 'matchParent', label: 'URL'
+    form.fields_number name: 'user[number]', width: 'matchParent', label: 'Number'
+    form.fields_password name: 'user[password]', width: 'matchParent', label: 'Password'
+    form.fields_textarea name: 'user[textarea]', width: 'matchParent', label: 'Textarea with maxLength', maxLength: 50
 
-    form.panels_split width: 'matchParent', rightViews: ->(split) do
-      split.button text: 'Submit', onClick: ->(action) { action.forms_submit }
-    end
+    form.button text: 'Submit', onClick: ->(action) { action.forms_submit }
   end
 end

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

@@ -5,10 +5,6 @@ json_ui_page json do |page|
   
   page.list firstSection: ->(section) do
     section.rows builder: ->(template) do
-      template.thumbnail title: 'Nav Buttons', onClick: ->(action) do
-        action.windows_open url: json_ui_garage_url(path: 'pages/nav_buttons')
-      end
-      
       template.thumbnail title: 'Hamburger Layout', onClick: ->(action) do
         action.windows_open url: json_ui_garage_url(path: 'pages/layout')
       end
@@ -20,6 +16,10 @@ json_ui_page json do |page|
       template.thumbnail title: 'Tab Bar', onClick: ->(action) do
         action.windows_open url: json_ui_garage_url(path: 'pages/tab_bar')
       end
+
+      template.thumbnail title: 'Nav Buttons', onClick: ->(action) do
+        action.windows_open url: json_ui_garage_url(path: 'pages/nav_buttons')
+      end
     end
     
   end

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

@@ -7,12 +7,15 @@ json_ui_page json do |page|
     menu.button icon: 'search', onClick: ->(action) do 
       action.dialogs_alert message: 'Perform some action'
     end
-    menu.button icon: 'map', onClick: ->(action) do 
+    menu.button icon: { name: 'star', badge: { text: '1', backgroundColor: '#ff0000' } }, onClick: ->(action) do 
+      action.dialogs_alert message: 'Perform some action'
+    end
+    menu.button icon: { name: 'map', badge: '2' }, onClick: ->(action) do 
       action.dialogs_alert message: 'Perform some action'
     end
   end
 
-  page.scroll padding: {top: 20, left: 20, right: 20, bottom: 20}, childViews: ->(scroll) do
+  page.scroll padding: json_padding_body, childViews: ->(scroll) do
     scroll.label text: 'See the right menu buttons on the nav bar'
   end
 end

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

@@ -4,7 +4,13 @@ json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
   
   page.scroll padding: json_padding_body, childViews: ->(scroll) do
-    scroll.panels_custom template: 'thumbnail', data: { imageUrl: @sample_image_url, title: 'Title', subtitle: 'Subtitle' }
+    scroll.h2 text: 'Thumbnail Template'
+    scroll.spacer height: 6
+    scroll.panels_custom template: 'thumbnail', width: 'matchParent', backgroundColor: '#fafafa',
+      data: { imageUrl: json_image_standard_url, title: 'Title', subtitle: 'Use the same template from list templates' }
+    
+    scroll.spacer height: 20
+    scroll.h2 text: 'Non-existent Template'
     scroll.spacer height: 6
     scroll.panels_custom template: 'nonExistentTemplate'
   end

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

@@ -3,65 +3,88 @@ json.title 'Panels'
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page, top_nav: true
   
-
   page.list sections: [
     ->(section) do
+      section.header padding: json_padding_list, childViews: ->(header) do
+        header.h2 text: 'Layout for child components'
+      end
+
       section.rows builder: ->(template) do
-        template.thumbnail title: 'Card', onClick: ->(action) do
-          action.windows_open url: json_ui_garage_url(path: 'panels/card')
-        end
         template.thumbnail title: 'Vertical', onClick: ->(action) do
           action.windows_open url: json_ui_garage_url(path: 'panels/vertical')
         end
         template.thumbnail title: 'Horizontal', onClick: ->(action) do
           action.windows_open url: json_ui_garage_url(path: 'panels/horizontal')
         end
-        template.thumbnail title: 'Split', onClick: ->(action) do
-          action.windows_open url: json_ui_garage_url(path: 'panels/split')
-        end
         template.thumbnail title: 'Carousel', onClick: ->(action) do
           action.windows_open url: json_ui_garage_url(path: 'panels/carousel')
         end
-        template.thumbnail title: 'Custom', onClick: ->(action) do
-          action.windows_open url: json_ui_garage_url(path: 'panels/custom')
+        
+      end
+    end, ->(section) do
+      section.header padding: json_padding_list, childViews: ->(header) do
+        header.h2 text: 'Layout with sub-panels'
+        header.spacer height: 6
+        header.label text: 'Each sub-panel is a vertical panel'
+      end
+
+      section.rows builder: ->(template) do
+        template.thumbnail title: 'Split', subtitle: 'Sub-panels: left, center, right', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'panels/split')
+        end
+        template.thumbnail title: 'Page', subtitle: 'Sub-panels: header, content, footer', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'pages/index')
+        end
+        template.thumbnail title: 'List', subtitle: 'Sub-panels: header, footer', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'lists/index')
         end
         
       end
     end, ->(section) do
       section.header padding: json_padding_list, childViews: ->(header) do
-        header.h2 text: 'Web Only'
+        header.h2 text: 'Layout with uniform rows'
       end
 
       section.rows builder: ->(template) do
-        template.thumbnail title: 'Table', onClick: ->(action) do
+        template.thumbnail title: 'List', subtitle: 'Rows without columns', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'lists/index')
+        end
+        template.thumbnail title: 'Table (Web only)', subtitle: 'Rows with columns', onClick: ->(action) do
           action.windows_open url: json_ui_garage_url(path: 'panels/table')
         end
         
       end
-    end
-  ]
+    end, ->(section) do
+      section.header padding: json_padding_list, childViews: ->(header) do
+        header.h2 text: 'Non-layout'
+        header.spacer height: 6
+        header.label text: 'Adds functionality to a vertical layout'
+      end
 
-  # page.list firstSection: ->(section) do
-  #   section.rows builder: ->(template) do
-  #     template.thumbnail title: 'Card', onClick: ->(action) do
-  #       action.windows_open url: json_ui_garage_url(path: 'panels/card')
-  #     end
-  #     template.thumbnail title: 'Vertical', onClick: ->(action) do
-  #       action.windows_open url: json_ui_garage_url(path: 'panels/vertical')
-  #     end
-  #     template.thumbnail title: 'Horizontal', onClick: ->(action) do
-  #       action.windows_open url: json_ui_garage_url(path: 'panels/horizontal')
-  #     end
-  #     template.thumbnail title: 'Split', onClick: ->(action) do
-  #       action.windows_open url: json_ui_garage_url(path: 'panels/split')
-  #     end
-  #     template.thumbnail title: 'Carousel', onClick: ->(action) do
-  #       action.windows_open url: json_ui_garage_url(path: 'panels/carousel')
-  #     end
-  #     template.thumbnail title: 'Custom', onClick: ->(action) do
-  #       action.windows_open url: json_ui_garage_url(path: 'panels/custom')
-  #     end
-  #   end
+      section.rows builder: ->(template) do
+        template.thumbnail title: 'Scroll', subtitle: 'Adds scrolling', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'pages/index')
+        end
+        template.thumbnail title: 'Form', subtitle: 'Adds form functionality', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'forms/index')
+        end
+        template.thumbnail title: 'Card', subtitle: 'Adds card-like bevel', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'panels/card')
+        end
+        
+      end
+    end, ->(section) do
+      section.header padding: json_padding_list, childViews: ->(header) do
+        header.h2 text: 'Child-less Layout'
+      end
+
+      section.rows builder: ->(template) do
+        template.thumbnail title: 'Custom', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'panels/custom')
+        end
+        
+      end
+    end, 
+  ]
 
-  # end
 end

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

@@ -3,7 +3,18 @@ json.title 'Panels'
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
   
-  page.scroll padding: { top: 12, bottom: 12, left: 16, right: 16 }, childViews: ->(scroll) do
+  page.scroll padding: json_padding_body, childViews: ->(scroll) do
+
+    # TODO: Consider moving towards this
+    # scroll.panels_split width: 'matchParent', builder: ->(builder) do
+    #   builder.left childViews: ->(left) do
+    #     left.button text: '1'
+    #   end
+    #   builder.right childViews: ->(right) do
+    #     right.button text: '2'
+    #   end
+    # end
+
     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

@@ -4,7 +4,7 @@ json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
   
   page.scroll padding: { top: 12, bottom: 12, left: 16, right: 16 }, childViews: ->(scroll) do
-    scroll.h1 text: 'Vertical Panel'
+    scroll.h1 text: 'Vertical panel'
     scroll.panels_vertical backgroundColor: '#b3bac2', childViews: ->(panel) do
       panel.button text: 'Button1'
       panel.button text: 'Button2', width: 200
@@ -12,7 +12,7 @@ json_ui_page json do |page|
     end
 
     scroll.label text: "\n"
-    scroll.h1 text: 'Vertical Panel with equal filling'
+    scroll.h1 text: 'Vertical panel with equal filling'
     scroll.panels_vertical backgroundColor: '#b3bac2', height: 300, distribution: 'fillEqually', childViews: ->(panel) do
       panel.button text: 'Button1'
       panel.button text: 'Button2'
@@ -20,12 +20,21 @@ json_ui_page json do |page|
     end
 
     scroll.label text: "\n"
-    scroll.h1 text: 'Vertical Panel with equal spacing'
+    scroll.h1 text: 'Vertical panel with equal spacing'
     scroll.panels_vertical backgroundColor: '#b3bac2', height: 300, distribution: 'spaceEqually', childViews: ->(panel) do
       panel.button text: 'Button1'
       panel.button text: 'Button2'
       panel.button text: 'Button3'
     end
 
+    scroll.label text: "\n"
+    scroll.h1 text: 'Vertical panel with alignment'
+    scroll.panels_vertical width: 'matchParent', backgroundColor: '#b3bac2', align: 'center', childViews: ->(panel) do
+      panel.button text: 'Center'
+    end
+    scroll.panels_vertical width: 'matchParent', backgroundColor: '#b3bac2', align: 'right', childViews: ->(panel) do
+      panel.button text: 'Right'
+    end
+
   end
 end

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

@@ -1,29 +1,34 @@
 
 json.events do
+  
   json.child! do
-    json.date '2018-12-30'
-    json.text 'Birthday'
+    json.start '2018-12-14'
+    json.end '2018-12-17'
+    json.text 'Hackathon'
     json.onClick do
       json.action 'dialogs/alert-v1'
-      json.message 'At home'
+      json.message 'At Town Hall'
     end
   end
 
   json.child! do
-    json.date '2018-12-31'
-    json.text 'Conference'
+    json.start '2018-12-30'
+    json.end '2018-12-30'
+    json.text 'Birthday'
     json.onClick do
       json.action 'dialogs/alert-v1'
-      json.message 'In Perth'
+      json.message 'At home'
     end
   end
-  
+
   json.child! do
-    json.date '2019-01-01'
-    json.text 'Hackathon'
+    json.start '2018-12-31'
+    json.end '2018-12-31'
+    json.text 'Conference'
     json.onClick do
       json.action 'dialogs/alert-v1'
-      json.message 'At Town Hall'
+      json.message 'In Perth'
     end
   end
+
 end

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

@@ -8,6 +8,7 @@ json_ui_page json do |page|
 
     json.child! do
       json.view 'charts/line-v1'
+      
       json.dataSeries do
         json.child! do
           json.title 'Line 1'

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

@@ -6,12 +6,12 @@ json_ui_page json do |page|
   page.scroll padding: json_padding_body, childViews: ->(scroll) do
     scroll.h2 text: 'Avatar'
     scroll.spacer height: 6
-    scroll.avatar url: 'https://www.wpjournalist.nl/wp-content/uploads/2019/03/avatar-jongen-voorbeeld-1.jpg'
+    scroll.avatar url: json_image_avatar_url
 
     scroll.spacer height: 20
     scroll.h2 text: 'Image with URL'
     scroll.spacer height: 6
-    scroll.image width: 100, url: @sample_image_url
+    scroll.image width: 100, url: json_image_standard_url
 
     scroll.spacer height: 20
     scroll.h2 text: 'Image with base64 data'
@@ -28,5 +28,6 @@ json_ui_page json do |page|
     else
       scroll.label text: 'Include "rqrcode" gem to enable this'
     end
+    
   end
 end

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

@@ -17,6 +17,9 @@ json_ui_page json do |page|
       template.thumbnail title: 'Charts', onClick: ->(action) do
         action.windows_open url: json_ui_garage_url(path: 'views/charts')
       end
+      template.thumbnail title: 'Links', onClick: ->(action) do
+        action.windows_open url: json_ui_garage_url(path: 'views/links')
+      end
     end
 
   end

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

@@ -0,0 +1,39 @@
+json.title 'Views'
+
+json_ui_page json do |page|
+  render "#{@path_prefix}/nav_menu", json: json, page: page
+  
+  page.scroll padding: json_padding_body, childViews: ->(scroll) do
+
+    scroll.h2 text: 'Standard button'
+    scroll.spacer height: 6
+    scroll.button text: 'Button', onClick: ->(action) do
+      action.windows_openWeb url: 'https://www.google.com/'
+    end
+
+    scroll.spacer height: 20
+    scroll.h2 text: 'Button with link style'
+    scroll.spacer height: 6
+    scroll.button text: 'Link', styleClass: 'link', onClick: ->(action) do
+      action.windows_openWeb url: 'https://www.google.com/'
+    end
+
+    scroll.spacer height: 20
+    scroll.h2 text: 'Avatar with onClick'
+    # TODO: Make sure "open in new tab" works
+    scroll.spacer height: 10
+    scroll.avatar url: json_image_avatar_url, styleClass: 'link', onClick: ->(action) do
+      action.windows_openWeb url: 'https://www.google.com/'
+    end
+
+    scroll.spacer height: 20
+    scroll.h2 text: 'Image with onClick'
+    # TODO: Make sure "open in new tab" works
+    scroll.spacer height: 10
+    scroll.image width: 100, url: json_image_standard_url, styleClass: 'link', onClick: ->(action) do
+      action.windows_openWeb url: 'https://www.google.com/'
+    end
+
+
+  end
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: glib-web
 version: !ruby/object:Gem::Version
-  version: 0.2.7
+  version: 0.2.8
 platform: ruby
 authors:
 - ''
@@ -91,6 +91,7 @@ files:
 - app/views/json_ui/garage/views/charts.json.jbuilder
 - app/views/json_ui/garage/views/images.json.jbuilder
 - app/views/json_ui/garage/views/index.json.jbuilder
+- app/views/json_ui/garage/views/links.json.jbuilder
 - app/views/json_ui/garage/views/map_data.json.jbuilder
 - config/routes.rb
 - lib/glib-web.rb