glib-web 0.5.58 → 0.5.63

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0530acf902c8752058a734963723a16e5811befbe70266998c69a8f4aaa848d1
-  data.tar.gz: 78382d21966ea3f149afc4b8ce1dc31505909756011979351b50359f49877bc2
+  metadata.gz: dacfeeb7446f91959b4e0ac4ac86bb5e8fbc80e5bce79794bfbcf98ee37398a2
+  data.tar.gz: 95e67ccbd12f6cea3799fbd2a378f29c6b0059e03daf813ad832c5c28605ca9a
 SHA512:
-  metadata.gz: 8828097d8d8d4959888bbdd7634d8cbf676ddd31183b98fa16440535ace50cdde2a8f6230ca9eb0d22ef1fc8bf9e5358642b3a2652ab1b9014dcbcc3c78fca17
-  data.tar.gz: 8d2c328743536269527adac29527b00ec2cae739cdef6c9d1ac645c041e73aa56ab5d13aeec7ec72505f813b45d96d54d1351ffc78b3eee92e0c9355dd17be1e
+  metadata.gz: 427e9cb5d7385eb33e3e93e71717fcd9c5318671d0f9957ca8fb0a5766beb55e1bd61e2b28516a40c2d89a04c621f08b262795594e530741d67d31d57ef921e2
+  data.tar.gz: f42ef59f998e58b5b2bf1a8ae8dc565261b3999d4e82d33567ba0b716f4859abcf9d3ee18916f69808a8a47c58ae7fe7273577cb7767b28348e5330142dbe8bc

data/app/channels/glib/channel/online_channel.rb

@@ -0,0 +1,29 @@
+module Glib
+  module Channel
+    class OnlineChannel < ApplicationCable::Channel
+      class << self
+        attr_accessor :channel_name
+      end
+
+      def channel_name
+        self.class.channel_name
+      end
+
+      def subscribed
+        stream_from "#{self.class.channel_name}_#{params['conversation_id']}"
+      end
+
+      def online_status(data)
+        ActionCable.server.broadcast \
+          "#{self.class.channel_name}_#{params['conversation_id']}",
+          action: {
+            action: 'component/set',
+            name: User.find(data['user_id']).full_name,
+            status: data['status'],
+            user_id: data['user_id'],
+            event: 'online_status'
+          }
+      end
+    end
+  end
+end

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

@@ -123,13 +123,35 @@ module Glib
       end
 
       class Avatar < View
+        int    :size
         string :url
         action :onClick
       end
 
       class Icon < View
+        # TODO: Remove later. Deprecated.
         icon :spec
+
         action :onClick
+        color :color
+
+        def name(value)
+          @name = value
+        end
+
+        def size(value)
+          @size = value
+        end
+
+        # Override
+        def created
+          if @name
+            json.material do
+              json.name @name
+              json.size @size if @size
+            end
+          end
+        end
       end
 
       # class Banner < View

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

@@ -241,6 +241,11 @@ class Glib::JsonUi::ViewBuilder
       string :currency
     end
 
+    class Phone < AbstractField
+      string :defaultCountry
+      bool :disableAutoDetect
+    end
+
     class CreditCard < AbstractField
       string :publicKey
     end

data/app/views/json_ui/garage/actions/_timeouts.json.jbuilder

@@ -9,6 +9,12 @@ section.rows builder: ->(template) do
       subaction.snackbars_alert message: 'Timeout elapsed'
     end
   end
+
+  template.thumbnail title: 'timeouts/set with repeat', onClick: ->(action) do
+    action.timeouts_set interval: 1000, repeat: true, onTimeout: ->(subaction) do
+      subaction.snackbars_alert message: 'Timeout elapsed every 1 second'
+    end
+  end
 end
 
 # section.rows builder: ->(template) do

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

@@ -5,7 +5,7 @@ render "#{@path_prefix}/nav_menu", json: json, page: page
 
 page.form url: json_ui_garage_url(path: 'forms/generic_post'), method: 'post', padding: glib_json_padding_body, childViews: ->(form) do
   form.h1 text: 'Text'
-  form.fields_password name: 'user[text1]', width: 'matchParent', label: 'Type "show"'
+  form.fields_password name: 'user[text1]', width: 'matchParent', label: 'Type "show"', value: ''
   form.label text: 'Typed', showIf: {
     "==": [
       {
@@ -14,6 +14,14 @@ page.form url: json_ui_garage_url(path: 'forms/generic_post'), method: 'post', p
       'show'
     ]
   }
+  form.label text: 'Type something', showIf: {
+    "==": [
+      {
+        "var": 'user[text1]'
+      },
+      ''
+    ]
+  }
 
   form.spacer height: 20
   form.h1 text: 'Textarea'
@@ -45,6 +53,7 @@ page.form url: json_ui_garage_url(path: 'forms/generic_post'), method: 'post', p
   form.fields_radioGroup name: 'user[radio1]', value: 'F', childViews: ->(group) do
     group.fields_radio value: 'show', label: 'Show'
     group.fields_radio value: 'hide', label: 'Hide'
+    group.fields_radio value: '', label: 'Empty'
   end
   form.spacer height: 10
   form.label text: 'Chosen', showIf: {
@@ -55,11 +64,19 @@ page.form url: json_ui_garage_url(path: 'forms/generic_post'), method: 'post', p
       'show'
     ]
   }
+  form.label text: 'Unspecified', showIf: {
+    "==": [
+      {
+        "var": 'user[radio1]'
+      },
+      ''
+    ]
+  }
 
   form.spacer height: 20
   form.h1 text: 'Select'
-  options = ['show', 'hide']
-  form.fields_select name: 'user[select1]', width: 'matchParent', label: 'Select "show"', options: options
+  options = ['', 'show', 'hide']
+  form.fields_select name: 'user[select1]', width: 'matchParent', label: 'Select "show"', options: options, value: ''
   form.label text: 'Selected', showIf: {
     "==": [
       {
@@ -68,6 +85,14 @@ page.form url: json_ui_garage_url(path: 'forms/generic_post'), method: 'post', p
       'show'
     ]
   }
+  form.label text: 'Unspecified', showIf: {
+    "==": [
+      {
+        "var": 'user[select1]'
+      },
+      ''
+    ]
+  }
 
   form.spacer height: 20
   form.h1 text: 'Combined conditions'
@@ -90,7 +115,7 @@ page.form url: json_ui_garage_url(path: 'forms/generic_post'), method: 'post', p
   form.spacer height: 10
   form.fields_check name: 'user[check2]', checkValue: 'on', label: 'Show field'
   form.spacer height: 10
-  form.fields_text width: 'matchParent', label: 'Comment (optional)', name: 'user[comment]', value: 'This field can be submitted when it is hidden, but it is not necessary (i.e. up to the app)', showIf: {
+  form.fields_text width: 'matchParent', label: 'Comment (optional)', name: 'user[comment]', value: 'This field should be submitted even when it is hidden', showIf: {
     "==": [
       {
         "var": 'user[check2]'

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

@@ -26,6 +26,18 @@ page.form \
       leftText: 'USD',
       rightText: '.00'
 
+    form.fields_phone \
+      name: 'user[phone1]',
+      width: 'matchParent',
+      label: 'Phone field'
+
+    form.fields_phone \
+      name: 'user[phone2]',
+      width: 'matchParent',
+      label: "Phone field with Australia as the default country",
+      disableAutoDetect: true, # Disable country auto detect by user IP
+      defaultCountry: 'AU' # ISO Country code, see: https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes
+
     form.fields_password \
       name: 'user[password]',
       width: 'matchParent',

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

@@ -1,11 +1,15 @@
 json.title 'Lists'
 
-json_ui_page json do |page|
-  render "#{@path_prefix}/nav_menu", json: json, page: page
+page_index = params[:page].to_i
+page = json_ui_page json
+render "#{@path_prefix}/nav_menu", json: json, page: page
 
-  page.list firstSection: ->(section) do
-    section.rows builder: ->(template) do
-      template.thumbnail title: 'Click menu (web) or swipe left (Android/iOS)', leftButtons: ->(menu) do
+page.list firstSection: ->(section) do
+  section.rows builder: ->(template) do
+    template.thumbnail \
+      title: 'Click menu (web) or swipe left (Android/iOS)',
+      subtitle: "Page index: #{page_index}",
+      leftButtons: ->(menu) do
         menu.button styleClass: 'icon', icon: 'check_box', onClick: ->(subaction) do
           subaction.dialogs_alert message: 'Tick/untick'
         end
@@ -17,38 +21,39 @@ json_ui_page json do |page|
           subaction.dialogs_alert message: 'Open'
         end
       end, editButtons: ->(menu) do
-        menu.button text: 'Edit', onClick: ->(action) do
-          action.dialogs_alert message: 'Perform action'
+        menu.button text: "Edit (ID: #{page_index})", onClick: ->(action) do
+          action.dialogs_alert message: 'Perform Edit action'
         end
         menu.button text: 'Delete', onClick: ->(action) do
-          action.dialogs_alert message: 'Perform action'
+          action.dialogs_alert message: 'Perform Delete action'
         end
+      end, onClick: ->(action) do
+        action.windows_open url: json_ui_garage_url(path: 'lists/edit_actions', page: page_index + 1)
       end
 
-      template.thumbnail title: 'Long press to get an alert', onLongPress: ->(action) do
-        action.dialogs_alert message: 'This is an alert'
-      end
+    template.thumbnail title: 'Long press to get an alert', onLongPress: ->(action) do
+      action.dialogs_alert message: 'This is an alert'
+    end
 
-      template.thumbnail title: 'Long press to see menu', onLongPress: ->(action) do
-        action.sheets_select message: 'Context Menu', buttons: ->(menu) do
-          menu.button icon: 'edit', text: 'Edit', onClick: ->(subaction) do
-            subaction.dialogs_alert message: 'Perform action'
-          end
-          menu.button icon: 'delete', text: 'Delete', onClick: ->(subaction) do
-            subaction.dialogs_alert message: 'Perform action'
-          end
+    template.thumbnail title: 'Long press to see menu', onLongPress: ->(action) do
+      action.sheets_select message: 'Context Menu', buttons: ->(menu) do
+        menu.button icon: 'edit', text: 'Edit', onClick: ->(subaction) do
+          subaction.dialogs_alert message: 'Perform action'
+        end
+        menu.button icon: 'delete', text: 'Delete', onClick: ->(subaction) do
+          subaction.dialogs_alert message: 'Perform action'
         end
       end
-
-      # template.thumbnail title: 'Long press to see menu', contextButtons: ->(menu) do
-      #   menu.button text: 'Edit', onClick: ->(action) do
-      #     action.dialogs_alert message: 'Perform action'
-      #   end
-      #   menu.button text: 'Delete', onClick: ->(action) do
-      #     action.dialogs_alert message: 'Perform action'
-      #   end
-      # end
     end
 
+    # template.thumbnail title: 'Long press to see menu', contextButtons: ->(menu) do
+    #   menu.button text: 'Edit', onClick: ->(action) do
+    #     action.dialogs_alert message: 'Perform action'
+    #   end
+    #   menu.button text: 'Delete', onClick: ->(action) do
+    #     action.dialogs_alert message: 'Perform action'
+    #   end
+    # end
   end
+
 end

data/app/views/json_ui/garage/notifications/action_cable.json.jbuilder

@@ -1,6 +1,10 @@
 json.title 'ActionCable Real-time Update'
 page = json_ui_page json
 
+online_channel = 'OnlineChannel'
+typing_channel = 'IsTypingChannel'
+first_user = User.first
+second_user = User.offset(1).first
 # Implement a page that shows how ActionCable works in json_ui
 
 # 1. Example for list
@@ -21,13 +25,19 @@ page = json_ui_page json
 
 
 # 3. Example for online status
-#    - TODO: Implement "repeat: true" in glib-web-npm
-# page.on load: ->(action) do
-#   action.timeouts_set interval: 10000, repeat: true, onTimeout: ->(subaction) do
-#     subaction.cables_push channel: 'message', event: 'online'
-#   end
+
+# put on app/channels/online_channel.rb
+# class OnlineChannel < Glib::Channel::OnlineChannel
+#   self.channel_name = 'OnlineChannel'
 # end
 
+page.on load: ->(action) do
+  action.timeouts_set interval: 1000, repeat: true, onTimeout: ->(subaction) do
+    subaction.cables_push channel: online_channel, event: 'online_status', payload: { status: true, user_id: first_user.id }
+  end
+end
+
+# 4. Example for typing status
 
 # put on app/channels/is_typing_channel.rb
 # class IsTypingChannel < Glib::Channel::IsTypingChannel
@@ -36,30 +46,35 @@ page = json_ui_page json
 
 page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
 
-  channel = 'IsTypingChannel'
-  first_user = User.first
-  second_user = User.offset(1).first
-
   scroll.panels_split width: 'matchParent', content: ->(content) do
     content.left childViews: ->(left) do
+      online_socket_config = {
+        channel: online_channel,
+        filterKey: second_user.id,
+        params: {
+          conversation: 2
+        }
+      }
+      left.label actionCable: online_socket_config, text: ' '
+
       left.fields_textarea \
         width: 440,
         label: "Messages from #{first_user.full_name}",
         onTypeStart: lambda { |action|
           action.cables_push \
-            channel: channel, event: 'typing',
+            channel: typing_channel, event: 'typing',
             payload: { status: true, user_id: first_user.id }
         },
         onTypeEnd: lambda { |action|
           action.cables_push \
-            channel: channel,
+            channel: typing_channel,
             event: 'typing',
             payload: { status: false, user_id: first_user.id }
         }
       left.spacer height: 10
 
       socket_config = {
-        channel: channel,
+        channel: typing_channel,
         filterKey: first_user.id,
         params: {
           conversation: 2
@@ -67,25 +82,26 @@ page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
       }
       left.label actionCable: socket_config, text: ' '
     end
+
     content.right childViews: ->(right) do
       right.fields_textarea \
         width: 440,
         label: "Messages from #{second_user.full_name}",
         onTypeStart: lambda { |action|
           action.cables_push \
-            channel: channel, event: 'typing',
+            channel: typing_channel, event: 'typing',
             payload: { status: true, user_id: second_user.id }
         },
         onTypeEnd: lambda { |action|
           action.cables_push \
-            channel: channel,
+            channel: typing_channel,
             event: 'typing',
             payload: { status: false, user_id: second_user.id }
         }
       right.spacer height: 10
 
       socket_config = {
-        channel: channel,
+        channel: typing_channel,
         filterKey: second_user.id,
         params: {
           conversation: 2

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

@@ -0,0 +1,1450 @@
+json.title 'Views'
+
+page = json_ui_page json
+render "#{@path_prefix}/nav_menu", json: json, page: page
+
+page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
+  # From https://material.io/resources/icons
+  #
+  # To scrape, run this on JS console:
+  #
+  # function download(content, fileName, contentType) {
+  #   var a = document.createElement("a");
+  #   var file = new Blob([JSON.stringify(content)], { type: contentType });
+  #   a.href = URL.createObjectURL(file);
+  #   a.download = fileName;
+  #   a.click();
+  # }
+  #
+  # let sections = [];
+  # let containersNode = document.querySelectorAll(".category-container");
+  # for (const containerNode of containersNode) {
+  #   let titleNode = containerNode.querySelector(".category-name");
+  #   let iconsNode = Array.from(
+  #     containerNode.querySelectorAll(".icon-image-preview")
+  #   );
+  #   let section = {
+  #     title: titleNode.textContent,
+  #     icons: iconsNode.map(function(iconNode) {
+  #       return iconNode.textContent;
+  #     })
+  #   };
+  #   sections.push(section);
+  # }
+  # download(sections, "json.txt", "text/plain");
+  #
+  categories = [
+    {
+      "title": "action",
+      "icons": [
+        "3d_rotation",
+        "accessibility",
+        "accessibility_new",
+        "accessible",
+        "accessible_forward",
+        "account_balance",
+        "account_balance_wallet",
+        "account_box",
+        "account_circle",
+        "add_shopping_cart",
+        "add_task",
+        "addchart",
+        "admin_panel_settings",
+        "alarm",
+        "alarm_add",
+        "alarm_off",
+        "alarm_on",
+        "all_inbox",
+        "all_out",
+        "analytics",
+        "anchor",
+        "android",
+        "announcement",
+        "api",
+        "app_blocking",
+        "arrow_circle_down",
+        "arrow_circle_up",
+        "arrow_right_alt",
+        "article",
+        "aspect_ratio",
+        "assessment",
+        "assignment",
+        "assignment_ind",
+        "assignment_late",
+        "assignment_return",
+        "assignment_returned",
+        "assignment_turned_in",
+        "autorenew",
+        "backup",
+        "backup_table",
+        "batch_prediction",
+        "book",
+        "book_online",
+        "bookmark",
+        "bookmark_border",
+        "bookmarks",
+        "bug_report",
+        "build",
+        "build_circle",
+        "cached",
+        "calendar_today",
+        "calendar_view_day",
+        "camera_enhance",
+        "cancel_schedule_send",
+        "card_giftcard",
+        "card_membership",
+        "card_travel",
+        "change_history",
+        "check_circle",
+        "check_circle_outline",
+        "chrome_reader_mode",
+        "class",
+        "close_fullscreen",
+        "code",
+        "comment_bank",
+        "commute",
+        "compare_arrows",
+        "contact_page",
+        "contact_support",
+        "contactless",
+        "copyright",
+        "credit_card",
+        "dashboard",
+        "date_range",
+        "delete",
+        "delete_forever",
+        "delete_outline",
+        "description",
+        "disabled_by_default",
+        "dns",
+        "done",
+        "done_all",
+        "done_outline",
+        "donut_large",
+        "donut_small",
+        "drag_indicator",
+        "dynamic_form",
+        "eco",
+        "eject",
+        "euro_symbol",
+        "event",
+        "event_seat",
+        "exit_to_app",
+        "explore",
+        "explore_off",
+        "extension",
+        "face",
+        "fact_check",
+        "favorite",
+        "favorite_border",
+        "feedback",
+        "filter_alt",
+        "find_in_page",
+        "find_replace",
+        "fingerprint",
+        "flaky",
+        "flight_land",
+        "flight_takeoff",
+        "flip_to_back",
+        "flip_to_front",
+        "g_translate",
+        "gavel",
+        "get_app",
+        "gif",
+        "grade",
+        "grading",
+        "group_work",
+        "help",
+        "help_center",
+        "help_outline",
+        "highlight_alt",
+        "highlight_off",
+        "history",
+        "history_toggle_off",
+        "home",
+        "horizontal_split",
+        "hourglass_disabled",
+        "hourglass_empty",
+        "hourglass_full",
+        "http",
+        "https",
+        "important_devices",
+        "info",
+        "input",
+        "integration_instructions",
+        "invert_colors",
+        "label",
+        "label_important",
+        "label_off",
+        "language",
+        "launch",
+        "leaderboard",
+        "line_style",
+        "line_weight",
+        "list",
+        "lock",
+        "lock_open",
+        "login",
+        "loyalty",
+        "markunread_mailbox",
+        "maximize",
+        "mediation",
+        "minimize",
+        "model_training",
+        "next_plan",
+        "not_accessible",
+        "not_started",
+        "note_add",
+        "offline_bolt",
+        "offline_pin",
+        "online_prediction",
+        "opacity",
+        "open_in_browser",
+        "open_in_full",
+        "open_in_new",
+        "open_with",
+        "outbond",
+        "outlet",
+        "pageview",
+        "pan_tool",
+        "payment",
+        "pending",
+        "pending_actions",
+        "perm_camera_mic",
+        "perm_contact_calendar",
+        "perm_data_setting",
+        "perm_device_information",
+        "perm_identity",
+        "perm_media",
+        "perm_phone_msg",
+        "perm_scan_wifi",
+        "pets",
+        "picture_in_picture",
+        "picture_in_picture_alt",
+        "plagiarism",
+        "play_for_work",
+        "polymer",
+        "power_settings_new",
+        "pregnant_woman",
+        "preview",
+        "print",
+        "privacy_tip",
+        "published_with_changes",
+        "query_builder",
+        "question_answer",
+        "quickreply",
+        "receipt",
+        "record_voice_over",
+        "redeem",
+        "remove_shopping_cart",
+        "reorder",
+        "report_problem",
+        "request_page",
+        "restore",
+        "restore_from_trash",
+        "restore_page",
+        "room",
+        "rounded_corner",
+        "rowing",
+        "rule",
+        "schedule",
+        "search",
+        "search_off",
+        "settings",
+        "settings_applications",
+        "settings_backup_restore",
+        "settings_bluetooth",
+        "settings_brightness",
+        "settings_cell",
+        "settings_ethernet",
+        "settings_input_antenna",
+        "settings_input_component",
+        "settings_input_composite",
+        "settings_input_hdmi",
+        "settings_input_svideo",
+        "settings_overscan",
+        "settings_phone",
+        "settings_power",
+        "settings_remote",
+        "settings_voice",
+        "shop",
+        "shop_two",
+        "shopping_bag",
+        "shopping_basket",
+        "shopping_cart",
+        "smart_button",
+        "source",
+        "speaker_notes",
+        "speaker_notes_off",
+        "spellcheck",
+        "star_rate",
+        "stars",
+        "sticky_note_2",
+        "store",
+        "subject",
+        "subtitles_off",
+        "supervised_user_circle",
+        "supervisor_account",
+        "support",
+        "swap_horiz",
+        "swap_horizontal_circle",
+        "swap_vert",
+        "swap_vertical_circle",
+        "sync_alt",
+        "system_update_alt",
+        "tab",
+        "tab_unselected",
+        "table_view",
+        "text_rotate_up",
+        "text_rotate_vertical",
+        "text_rotation_angledown",
+        "text_rotation_angleup",
+        "text_rotation_down",
+        "text_rotation_none",
+        "theaters",
+        "thumb_down",
+        "thumb_up",
+        "thumbs_up_down",
+        "timeline",
+        "toc",
+        "today",
+        "toll",
+        "touch_app",
+        "tour",
+        "track_changes",
+        "translate",
+        "trending_down",
+        "trending_flat",
+        "trending_up",
+        "turned_in",
+        "turned_in_not",
+        "unpublished",
+        "update",
+        "upgrade",
+        "verified",
+        "verified_user",
+        "vertical_split",
+        "view_agenda",
+        "view_array",
+        "view_carousel",
+        "view_column",
+        "view_day",
+        "view_headline",
+        "view_list",
+        "view_module",
+        "view_quilt",
+        "view_sidebar",
+        "view_stream",
+        "view_week",
+        "visibility",
+        "visibility_off",
+        "voice_over_off",
+        "watch_later",
+        "wifi_protected_setup",
+        "work",
+        "work_off",
+        "work_outline",
+        "wysiwyg",
+        "youtube_searched_for",
+        "zoom_in",
+        "zoom_out"
+      ]
+    },
+    {
+      "title": "alert",
+      "icons": [
+        "add_alert",
+        "auto_delete",
+        "error",
+        "error_outline",
+        "notification_important",
+        "warning"
+      ]
+    },
+    {
+      "title": "av",
+      "icons": [
+        "4k",
+        "5g",
+        "add_to_queue",
+        "airplay",
+        "album",
+        "art_track",
+        "av_timer",
+        "branding_watermark",
+        "call_to_action",
+        "closed_caption",
+        "closed_caption_disabled",
+        "control_camera",
+        "equalizer",
+        "explicit",
+        "fast_forward",
+        "fast_rewind",
+        "featured_play_list",
+        "featured_video",
+        "fiber_dvr",
+        "fiber_manual_record",
+        "fiber_new",
+        "fiber_pin",
+        "fiber_smart_record",
+        "forward_10",
+        "forward_30",
+        "forward_5",
+        "games",
+        "hd",
+        "hearing",
+        "hearing_disabled",
+        "high_quality",
+        "library_add",
+        "library_add_check",
+        "library_books",
+        "library_music",
+        "loop",
+        "mic",
+        "mic_none",
+        "mic_off",
+        "missed_video_call",
+        "movie",
+        "music_video",
+        "new_releases",
+        "not_interested",
+        "note",
+        "pause",
+        "pause_circle_filled",
+        "pause_circle_outline",
+        "play_arrow",
+        "play_circle_filled",
+        "play_circle_outline",
+        "playlist_add",
+        "playlist_add_check",
+        "playlist_play",
+        "queue",
+        "queue_music",
+        "queue_play_next",
+        "radio",
+        "recent_actors",
+        "remove_from_queue",
+        "repeat",
+        "repeat_one",
+        "replay",
+        "replay_10",
+        "replay_30",
+        "replay_5",
+        "shuffle",
+        "skip_next",
+        "skip_previous",
+        "slow_motion_video",
+        "snooze",
+        "sort_by_alpha",
+        "speed",
+        "stop",
+        "stop_circle",
+        "subscriptions",
+        "subtitles",
+        "surround_sound",
+        "video_call",
+        "video_label",
+        "video_library",
+        "video_settings",
+        "videocam",
+        "videocam_off",
+        "volume_down",
+        "volume_mute",
+        "volume_off",
+        "volume_up",
+        "web",
+        "web_asset"
+      ]
+    },
+    {
+      "title": "communication",
+      "icons": [
+        "add_ic_call",
+        "alternate_email",
+        "business",
+        "call",
+        "call_end",
+        "call_made",
+        "call_merge",
+        "call_missed",
+        "call_missed_outgoing",
+        "call_received",
+        "call_split",
+        "cancel_presentation",
+        "chat",
+        "chat_bubble",
+        "chat_bubble_outline",
+        "clear_all",
+        "comment",
+        "contact_mail",
+        "contact_phone",
+        "contacts",
+        "desktop_access_disabled",
+        "dialer_sip",
+        "dialpad",
+        "domain_disabled",
+        "domain_verification",
+        "duo",
+        "email",
+        "forum",
+        "forward_to_inbox",
+        "hourglass_bottom",
+        "hourglass_top",
+        "import_contacts",
+        "import_export",
+        "invert_colors_off",
+        "list_alt",
+        "live_help",
+        "location_off",
+        "location_on",
+        "mail_outline",
+        "mark_chat_read",
+        "mark_chat_unread",
+        "mark_email_read",
+        "mark_email_unread",
+        "message",
+        "mobile_screen_share",
+        "more_time",
+        "nat",
+        "no_sim",
+        "pause_presentation",
+        "person_add_disabled",
+        "person_search",
+        "phone",
+        "phone_disabled",
+        "phone_enabled",
+        "phonelink_erase",
+        "phonelink_lock",
+        "phonelink_ring",
+        "phonelink_setup",
+        "portable_wifi_off",
+        "present_to_all",
+        "print_disabled",
+        "qr_code",
+        "qr_code_scanner",
+        "read_more",
+        "ring_volume",
+        "rss_feed",
+        "screen_share",
+        "sentiment_satisfied_alt",
+        "speaker_phone",
+        "stay_current_landscape",
+        "stay_current_portrait",
+        "stay_primary_landscape",
+        "stay_primary_portrait",
+        "stop_screen_share",
+        "swap_calls",
+        "textsms",
+        "unsubscribe",
+        "voicemail",
+        "vpn_key",
+        "wifi_calling"
+      ]
+    },
+    {
+      "title": "content",
+      "icons": [
+        "add",
+        "add_box",
+        "add_circle",
+        "add_circle_outline",
+        "amp_stories",
+        "archive",
+        "backspace",
+        "ballot",
+        "biotech",
+        "block",
+        "calculate",
+        "clear",
+        "content_copy",
+        "content_cut",
+        "content_paste",
+        "create",
+        "delete_sweep",
+        "drafts",
+        "dynamic_feed",
+        "file_copy",
+        "filter_list",
+        "flag",
+        "font_download",
+        "forward",
+        "gesture",
+        "how_to_reg",
+        "how_to_vote",
+        "inbox",
+        "insights",
+        "link",
+        "link_off",
+        "low_priority",
+        "mail",
+        "markunread",
+        "move_to_inbox",
+        "next_week",
+        "outlined_flag",
+        "policy",
+        "push_pin",
+        "redo",
+        "remove",
+        "remove_circle",
+        "remove_circle_outline",
+        "reply",
+        "reply_all",
+        "report",
+        "report_off",
+        "save",
+        "save_alt",
+        "select_all",
+        "send",
+        "sort",
+        "square_foot",
+        "text_format",
+        "unarchive",
+        "undo",
+        "waves",
+        "weekend",
+        "where_to_vote"
+      ]
+    },
+    {
+      "title": "device",
+      "icons": [
+        "access_alarm",
+        "access_alarms",
+        "access_time",
+        "ad_units",
+        "add_alarm",
+        "add_to_home_screen",
+        "airplanemode_active",
+        "airplanemode_inactive",
+        "battery_alert",
+        "battery_charging_full",
+        "battery_full",
+        "battery_std",
+        "battery_unknown",
+        "bluetooth",
+        "bluetooth_connected",
+        "bluetooth_disabled",
+        "bluetooth_searching",
+        "brightness_auto",
+        "brightness_high",
+        "brightness_low",
+        "brightness_medium",
+        "data_usage",
+        "developer_mode",
+        "devices",
+        "dvr",
+        "gps_fixed",
+        "gps_not_fixed",
+        "gps_off",
+        "graphic_eq",
+        "location_disabled",
+        "location_searching",
+        "mobile_friendly",
+        "mobile_off",
+        "nfc",
+        "screen_lock_landscape",
+        "screen_lock_portrait",
+        "screen_lock_rotation",
+        "screen_rotation",
+        "sd_storage",
+        "settings_system_daydream",
+        "signal_cellular_4_bar",
+        "signal_cellular_alt",
+        "signal_cellular_connected_no_internet_4_bar",
+        "signal_cellular_no_sim",
+        "signal_cellular_null",
+        "signal_cellular_off",
+        "signal_wifi_4_bar",
+        "signal_wifi_4_bar_lock",
+        "signal_wifi_off",
+        "storage",
+        "usb",
+        "wallpaper",
+        "widgets",
+        "wifi_lock",
+        "wifi_tethering"
+      ]
+    },
+    {
+      "title": "editor",
+      "icons": [
+        "add_comment",
+        "attach_file",
+        "attach_money",
+        "bar_chart",
+        "border_all",
+        "border_bottom",
+        "border_clear",
+        "border_horizontal",
+        "border_inner",
+        "border_left",
+        "border_outer",
+        "border_right",
+        "border_style",
+        "border_top",
+        "border_vertical",
+        "bubble_chart",
+        "drag_handle",
+        "format_align_center",
+        "format_align_justify",
+        "format_align_left",
+        "format_align_right",
+        "format_bold",
+        "format_clear",
+        "format_color_reset",
+        "format_indent_decrease",
+        "format_indent_increase",
+        "format_italic",
+        "format_line_spacing",
+        "format_list_bulleted",
+        "format_list_numbered",
+        "format_list_numbered_rtl",
+        "format_paint",
+        "format_quote",
+        "format_shapes",
+        "format_size",
+        "format_strikethrough",
+        "format_textdirection_l_to_r",
+        "format_textdirection_r_to_l",
+        "format_underlined",
+        "functions",
+        "height",
+        "highlight",
+        "horizontal_rule",
+        "insert_chart",
+        "insert_chart_outlined",
+        "insert_comment",
+        "insert_drive_file",
+        "insert_emoticon",
+        "insert_invitation",
+        "insert_link",
+        "insert_photo",
+        "linear_scale",
+        "merge_type",
+        "mode_comment",
+        "monetization_on",
+        "money_off",
+        "multiline_chart",
+        "notes",
+        "pie_chart",
+        "post_add",
+        "publish",
+        "scatter_plot",
+        "score",
+        "short_text",
+        "show_chart",
+        "space_bar",
+        "stacked_line_chart",
+        "strikethrough_s",
+        "subscript",
+        "superscript",
+        "table_chart",
+        "table_rows",
+        "text_fields",
+        "title",
+        "vertical_align_bottom",
+        "vertical_align_center",
+        "vertical_align_top",
+        "wrap_text"
+      ]
+    },
+    {
+      "title": "file",
+      "icons": [
+        "attach_email",
+        "attachment",
+        "cloud",
+        "cloud_circle",
+        "cloud_done",
+        "cloud_download",
+        "cloud_off",
+        "cloud_queue",
+        "cloud_upload",
+        "create_new_folder",
+        "folder",
+        "folder_open",
+        "folder_shared",
+        "request_quote",
+        "rule_folder",
+        "snippet_folder",
+        "text_snippet",
+        "topic"
+      ]
+    },
+    {
+      "title": "hardware",
+      "icons": [
+        "browser_not_supported",
+        "cast",
+        "cast_connected",
+        "cast_for_education",
+        "computer",
+        "desktop_mac",
+        "desktop_windows",
+        "developer_board",
+        "device_hub",
+        "device_unknown",
+        "devices_other",
+        "dock",
+        "gamepad",
+        "headset",
+        "headset_mic",
+        "keyboard",
+        "keyboard_arrow_down",
+        "keyboard_arrow_left",
+        "keyboard_arrow_right",
+        "keyboard_arrow_up",
+        "keyboard_backspace",
+        "keyboard_capslock",
+        "keyboard_hide",
+        "keyboard_return",
+        "keyboard_tab",
+        "keyboard_voice",
+        "laptop",
+        "laptop_chromebook",
+        "laptop_mac",
+        "laptop_windows",
+        "memory",
+        "mouse",
+        "phone_android",
+        "phone_iphone",
+        "phonelink",
+        "phonelink_off",
+        "point_of_sale",
+        "power_input",
+        "router",
+        "scanner",
+        "security",
+        "sim_card",
+        "smartphone",
+        "speaker",
+        "speaker_group",
+        "tablet",
+        "tablet_android",
+        "tablet_mac",
+        "toys",
+        "tv",
+        "videogame_asset",
+        "watch"
+      ]
+    },
+    {
+      "title": "home",
+      "icons": [
+        "sensor_door",
+        "sensor_window"
+      ]
+    },
+    {
+      "title": "image",
+      "icons": [
+        "add_a_photo",
+        "add_photo_alternate",
+        "add_to_photos",
+        "adjust",
+        "assistant",
+        "assistant_photo",
+        "audiotrack",
+        "bedtime",
+        "blur_circular",
+        "blur_linear",
+        "blur_off",
+        "blur_on",
+        "brightness_1",
+        "brightness_2",
+        "brightness_3",
+        "brightness_4",
+        "brightness_5",
+        "brightness_6",
+        "brightness_7",
+        "broken_image",
+        "brush",
+        "burst_mode",
+        "camera",
+        "camera_alt",
+        "camera_front",
+        "camera_rear",
+        "camera_roll",
+        "center_focus_strong",
+        "center_focus_weak",
+        "collections",
+        "collections_bookmark",
+        "color_lens",
+        "colorize",
+        "compare",
+        "control_point",
+        "control_point_duplicate",
+        "crop",
+        "crop_16_9",
+        "crop_3_2",
+        "crop_5_4",
+        "crop_7_5",
+        "crop_din",
+        "crop_free",
+        "crop_landscape",
+        "crop_original",
+        "crop_portrait",
+        "crop_rotate",
+        "crop_square",
+        "dehaze",
+        "details",
+        "edit",
+        "euro",
+        "exposure",
+        "exposure_neg_1",
+        "exposure_neg_2",
+        "exposure_plus_1",
+        "exposure_plus_2",
+        "exposure_zero",
+        "filter",
+        "filter_1",
+        "filter_2",
+        "filter_3",
+        "filter_4",
+        "filter_5",
+        "filter_6",
+        "filter_7",
+        "filter_8",
+        "filter_9",
+        "filter_9_plus",
+        "filter_b_and_w",
+        "filter_center_focus",
+        "filter_drama",
+        "filter_frames",
+        "filter_hdr",
+        "filter_none",
+        "filter_tilt_shift",
+        "filter_vintage",
+        "flare",
+        "flash_auto",
+        "flash_off",
+        "flash_on",
+        "flip",
+        "flip_camera_android",
+        "flip_camera_ios",
+        "gradient",
+        "grain",
+        "grid_off",
+        "grid_on",
+        "hdr_off",
+        "hdr_on",
+        "hdr_strong",
+        "hdr_weak",
+        "healing",
+        "image",
+        "image_aspect_ratio",
+        "image_not_supported",
+        "image_search",
+        "iso",
+        "landscape",
+        "leak_add",
+        "leak_remove",
+        "lens",
+        "linked_camera",
+        "looks",
+        "looks_3",
+        "looks_4",
+        "looks_5",
+        "looks_6",
+        "looks_one",
+        "looks_two",
+        "loupe",
+        "monochrome_photos",
+        "motion_photos_on",
+        "motion_photos_pause",
+        "motion_photos_paused",
+        "movie_creation",
+        "movie_filter",
+        "music_note",
+        "music_off",
+        "nature",
+        "nature_people",
+        "navigate_before",
+        "navigate_next",
+        "palette",
+        "panorama",
+        "panorama_fish_eye",
+        "panorama_horizontal",
+        "panorama_vertical",
+        "panorama_wide_angle",
+        "photo",
+        "photo_album",
+        "photo_camera",
+        "photo_filter",
+        "photo_library",
+        "photo_size_select_actual",
+        "photo_size_select_large",
+        "photo_size_select_small",
+        "picture_as_pdf",
+        "portrait",
+        "receipt_long",
+        "remove_red_eye",
+        "rotate_90_degrees_ccw",
+        "rotate_left",
+        "rotate_right",
+        "shutter_speed",
+        "slideshow",
+        "straighten",
+        "style",
+        "switch_camera",
+        "switch_video",
+        "tag_faces",
+        "texture",
+        "timelapse",
+        "timer",
+        "timer_10",
+        "timer_3",
+        "timer_off",
+        "tonality",
+        "transform",
+        "tune",
+        "view_comfy",
+        "view_compact",
+        "vignette",
+        "wb_auto",
+        "wb_cloudy",
+        "wb_incandescent",
+        "wb_iridescent",
+        "wb_sunny"
+      ]
+    },
+    {
+      "title": "maps",
+      "icons": [
+        "360",
+        "add_business",
+        "add_location",
+        "add_location_alt",
+        "add_road",
+        "agriculture",
+        "alt_route",
+        "atm",
+        "beenhere",
+        "bike_scooter",
+        "category",
+        "cleaning_services",
+        "compass_calibration",
+        "departure_board",
+        "design_services",
+        "directions",
+        "directions_bike",
+        "directions_boat",
+        "directions_bus",
+        "directions_car",
+        "directions_railway",
+        "directions_run",
+        "directions_subway",
+        "directions_transit",
+        "directions_walk",
+        "edit_attributes",
+        "edit_location",
+        "edit_road",
+        "electric_bike",
+        "electric_car",
+        "electric_moped",
+        "electric_scooter",
+        "electrical_services",
+        "ev_station",
+        "fastfood",
+        "flight",
+        "handyman",
+        "home_repair_service",
+        "hotel",
+        "hvac",
+        "layers",
+        "layers_clear",
+        "local_activity",
+        "local_airport",
+        "local_atm",
+        "local_bar",
+        "local_cafe",
+        "local_car_wash",
+        "local_convenience_store",
+        "local_dining",
+        "local_drink",
+        "local_fire_department",
+        "local_florist",
+        "local_gas_station",
+        "local_grocery_store",
+        "local_hospital",
+        "local_hotel",
+        "local_laundry_service",
+        "local_library",
+        "local_mall",
+        "local_movies",
+        "local_offer",
+        "local_parking",
+        "local_pharmacy",
+        "local_phone",
+        "local_pizza",
+        "local_play",
+        "local_police",
+        "local_post_office",
+        "local_printshop",
+        "local_see",
+        "local_shipping",
+        "local_taxi",
+        "map",
+        "maps_ugc",
+        "medical_services",
+        "menu_book",
+        "miscellaneous_services",
+        "money",
+        "moped",
+        "multiple_stop",
+        "museum",
+        "my_location",
+        "navigation",
+        "near_me",
+        "near_me_disabled",
+        "no_meals",
+        "no_transfer",
+        "not_listed_location",
+        "pedal_bike",
+        "person_pin",
+        "person_pin_circle",
+        "pest_control",
+        "pest_control_rodent",
+        "pin_drop",
+        "place",
+        "plumbing",
+        "rate_review",
+        "restaurant",
+        "restaurant_menu",
+        "run_circle",
+        "satellite",
+        "set_meal",
+        "store_mall_directory",
+        "streetview",
+        "subway",
+        "terrain",
+        "traffic",
+        "train",
+        "tram",
+        "transfer_within_a_station",
+        "transit_enterexit",
+        "trip_origin",
+        "two_wheeler",
+        "wine_bar",
+        "wrong_location",
+        "zoom_out_map"
+      ]
+    },
+    {
+      "title": "navigation",
+      "icons": [
+        "app_settings_alt",
+        "apps",
+        "arrow_back",
+        "arrow_back_ios",
+        "arrow_downward",
+        "arrow_drop_down",
+        "arrow_drop_down_circle",
+        "arrow_drop_up",
+        "arrow_forward",
+        "arrow_forward_ios",
+        "arrow_left",
+        "arrow_right",
+        "arrow_upward",
+        "campaign",
+        "cancel",
+        "check",
+        "chevron_left",
+        "chevron_right",
+        "close",
+        "double_arrow",
+        "east",
+        "expand_less",
+        "expand_more",
+        "first_page",
+        "fullscreen",
+        "fullscreen_exit",
+        "home_work",
+        "last_page",
+        "legend_toggle",
+        "menu",
+        "menu_open",
+        "more_horiz",
+        "more_vert",
+        "north",
+        "north_east",
+        "north_west",
+        "payments",
+        "refresh",
+        "south",
+        "south_east",
+        "south_west",
+        "subdirectory_arrow_left",
+        "subdirectory_arrow_right",
+        "switch_left",
+        "switch_right",
+        "unfold_less",
+        "unfold_more",
+        "west"
+      ]
+    },
+    {
+      "title": "notification",
+      "icons": [
+        "account_tree",
+        "adb",
+        "airline_seat_flat",
+        "airline_seat_flat_angled",
+        "airline_seat_individual_suite",
+        "airline_seat_legroom_extra",
+        "airline_seat_legroom_normal",
+        "airline_seat_legroom_reduced",
+        "airline_seat_recline_extra",
+        "airline_seat_recline_normal",
+        "bluetooth_audio",
+        "confirmation_number",
+        "directions_off",
+        "disc_full",
+        "drive_eta",
+        "enhanced_encryption",
+        "event_available",
+        "event_busy",
+        "event_note",
+        "folder_special",
+        "live_tv",
+        "mms",
+        "more",
+        "network_check",
+        "network_locked",
+        "no_encryption",
+        "ondemand_video",
+        "personal_video",
+        "phone_bluetooth_speaker",
+        "phone_callback",
+        "phone_forwarded",
+        "phone_in_talk",
+        "phone_locked",
+        "phone_missed",
+        "phone_paused",
+        "power",
+        "power_off",
+        "priority_high",
+        "sd_card",
+        "sms",
+        "sms_failed",
+        "support_agent",
+        "sync",
+        "sync_disabled",
+        "sync_problem",
+        "system_update",
+        "tap_and_play",
+        "time_to_leave",
+        "tv_off",
+        "vibration",
+        "voice_chat",
+        "vpn_lock",
+        "wc",
+        "wifi",
+        "wifi_off"
+      ]
+    },
+    {
+      "title": "places",
+      "icons": [
+        "ac_unit",
+        "airport_shuttle",
+        "all_inclusive",
+        "apartment",
+        "baby_changing_station",
+        "backpack",
+        "bathtub",
+        "beach_access",
+        "bento",
+        "business_center",
+        "carpenter",
+        "casino",
+        "charging_station",
+        "checkroom",
+        "child_care",
+        "child_friendly",
+        "corporate_fare",
+        "countertops",
+        "do_not_step",
+        "do_not_touch",
+        "dry",
+        "elevator",
+        "escalator",
+        "escalator_warning",
+        "family_restroom",
+        "fence",
+        "fire_extinguisher",
+        "fitness_center",
+        "food_bank",
+        "foundation",
+        "free_breakfast",
+        "golf_course",
+        "grass",
+        "hot_tub",
+        "house",
+        "house_siding",
+        "kitchen",
+        "meeting_room",
+        "microwave",
+        "night_shelter",
+        "no_backpack",
+        "no_cell",
+        "no_drinks",
+        "no_flash",
+        "no_food",
+        "no_meeting_room",
+        "no_photography",
+        "no_stroller",
+        "pool",
+        "rice_bowl",
+        "roofing",
+        "room_preferences",
+        "room_service",
+        "rv_hookup",
+        "smoke_free",
+        "smoking_rooms",
+        "soap",
+        "spa",
+        "sports_bar",
+        "stairs",
+        "storefront",
+        "stroller",
+        "tapas",
+        "tty",
+        "umbrella",
+        "wash",
+        "water_damage",
+        "wheelchair_pickup"
+      ]
+    },
+    {
+      "title": "social",
+      "icons": [
+        "6_ft_apart",
+        "architecture",
+        "cake",
+        "clean_hands",
+        "connect_without_contact",
+        "construction",
+        "coronavirus",
+        "deck",
+        "domain",
+        "elderly",
+        "emoji_emotions",
+        "emoji_events",
+        "emoji_flags",
+        "emoji_food_beverage",
+        "emoji_nature",
+        "emoji_objects",
+        "emoji_people",
+        "emoji_symbols",
+        "emoji_transportation",
+        "engineering",
+        "facebook",
+        "fireplace",
+        "follow_the_signs",
+        "group",
+        "group_add",
+        "groups",
+        "history_edu",
+        "king_bed",
+        "location_city",
+        "luggage",
+        "masks",
+        "military_tech",
+        "mood",
+        "mood_bad",
+        "nights_stay",
+        "no_luggage",
+        "notifications",
+        "notifications_active",
+        "notifications_none",
+        "notifications_off",
+        "notifications_paused",
+        "outdoor_grill",
+        "pages",
+        "party_mode",
+        "people",
+        "people_alt",
+        "people_outline",
+        "person",
+        "person_add",
+        "person_add_alt_1",
+        "person_outline",
+        "person_remove",
+        "person_remove_alt_1",
+        "plus_one",
+        "poll",
+        "psychology",
+        "public",
+        "public_off",
+        "reduce_capacity",
+        "sanitizer",
+        "school",
+        "science",
+        "self_improvement",
+        "sentiment_dissatisfied",
+        "sentiment_satisfied",
+        "sentiment_very_dissatisfied",
+        "sentiment_very_satisfied",
+        "share",
+        "sick",
+        "single_bed",
+        "sports",
+        "sports_baseball",
+        "sports_basketball",
+        "sports_cricket",
+        "sports_esports",
+        "sports_football",
+        "sports_golf",
+        "sports_handball",
+        "sports_hockey",
+        "sports_kabaddi",
+        "sports_mma",
+        "sports_motorsports",
+        "sports_rugby",
+        "sports_soccer",
+        "sports_tennis",
+        "sports_volleyball",
+        "thumb_down_alt",
+        "thumb_up_alt",
+        "whatshot"
+      ]
+    },
+    {
+      "title": "toggle",
+      "icons": [
+        "check_box",
+        "check_box_outline_blank",
+        "indeterminate_check_box",
+        "radio_button_checked",
+        "radio_button_unchecked",
+        "star",
+        "star_border",
+        "star_half",
+        "star_outline",
+        "toggle_off",
+        "toggle_on"
+      ]
+    }
+  ]
+
+  categories.each do |category|
+    scroll.h3 text: category[:title]
+    scroll.spacer height: 6
+
+    icon_names = category[:icons]
+    icon_names.each do |icon_name|
+      scroll.panels_column lg: { cols: 4 }, childViews: ->(column) do
+        column.panels_horizontal align: 'middle', childViews: ->(horizontal) do
+          horizontal.icon spec: icon_name
+          horizontal.spacer width: 6
+          horizontal.label text: icon_name
+
+          # horizontal.button icon: icon_name, text: icon_name
+        end
+      end
+    end
+
+    scroll.spacer height: 20
+  end
+end