glib-web 0.10.9 → 0.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fe8d532c23d4899cd370e1bab0d81e40e17d1657bcbf93d6b36daf6719ed1a74
-  data.tar.gz: 0f74dc19e224307673b38b5ea654e3061924eff3e6e62703a7c05890a11b1f95
+  metadata.gz: b752fcae7cc608d5890e82e1d8684ef0c00bcb825d4048384c39a8436b1a0960
+  data.tar.gz: 27b120d2754f94a98733ade53e81208631fd30d0ee78c8122c295fe5fb171e55
 SHA512:
-  metadata.gz: e1c78c76754a98115c0f4bd34285f8c7ab1f38d2bcdfd2b5bd9e0b2ca8879e54fba84a7b5a68aa9aaa3e78cec9e6fa774803ec6729d1d3036035cd656c023aa9
-  data.tar.gz: 10127bed4a1f5aa6bcc9424812a5e80bbd8cb5c7d5724ad68d9dfa09a53ebd39a7d03356d813ebf092931ec0434f2298ac84004840bac6ce0f2890445af2854c
+  metadata.gz: 4d1970741807a9de81b871d4d88c3d7ffd20de6cf1a52f54e8e8d8c9de3fb121bf039c55b319218d08735b747f415bde933ec36fb9201f51d2bc6d075f5acec1
+  data.tar.gz: bf8e5cb1620b44914a692ea142733ce1eab9eab8207f1392e10ee37b9efe616cc88cef5b854a771c7654363ee94d88225a61602784ff4cde902756a1b24858e4

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

@@ -144,6 +144,16 @@ class Glib::JsonUi::ViewBuilder
       end
     end
 
+    class Timeline < View
+      color :completedColor
+      color :uncompletedColor
+      singleton_array :styleClass, :styleClasses
+      string :uncompletedIcon
+      string :completedIcon
+      array :items
+      views :childViews
+    end
+
     class Table < View
       hash :nextPage
       hash :export

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

@@ -0,0 +1,24 @@
+progress = params[:progress]&.to_i&.between?(0, 5) ? params[:progress].to_i : 0
+
+tview.panels_responsive \
+  width: 400,
+  childViews: ->(res) do
+    res.panels_column sm: { cols: 11 }, childViews: ->(subcolumn) do
+      subcolumn.panels_column sm: { cols: 2, padding: { right: 10 } }, childViews: ->(inner_column) do
+        inner_column.spacer height: 10
+        inner_column.progressBar value: progress/5.to_f, height: 5, styleClass: 'no-text'
+        inner_column.spacer height: 10
+      end
+      subcolumn.panels_column sm: { cols: 9 }, childViews: ->(inner_column) do
+        inner_column.h4 \
+          text: "Progress #{progress}/5"
+      end
+      subcolumn.p text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
+    end
+    res.panels_column sm: { cols: 1 }, childViews: ->(subcolumn) do
+      subcolumn.icon name: 'add', size: 50
+    end
+  end, onClick: ->(action) do
+    action.windows_reload url: json_ui_garage_url(path: 'panels/timeline', progress: progress + 1)
+  end
+tview.spacer height: 12

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

@@ -30,6 +30,9 @@ json_ui_page json do |page|
         template.thumbnail title: 'Unordered List', subtitle: 'Bullet points similar to HTML\'s <ul> tag', onClick: ->(action) do
           action.windows_open url: json_ui_garage_url(path: 'panels/ul')
         end
+        template.thumbnail title: 'Timeline', subtitle: 'Timeline component with responsive panel as the childviews', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'panels/timeline')
+        end
       end
     end, ->(section) do
       section.header padding: glib_json_padding_list, childViews: ->(header) do

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

@@ -0,0 +1,70 @@
+json.title 'Timeline Panels'
+
+page = json_ui_page json
+render "#{@path_prefix}/nav_menu", json: json, page: page
+
+page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
+  scroll.h2 text: 'Basic timeline'
+  scroll.spacer height: 8
+
+  timeline_items = [
+      { name: :submitted, label: 'Order submitted' },
+      { name: :finding, label: 'Finding you a driver' },
+      { name: :driver_assigned, label: 'Driver found, picking you up..' },
+      { name: :otw, label: 'On the way' },
+      { name: :arrived, label: 'Arrived' }
+    ]
+
+  # Defining active or completed item
+  active_name = :driver_assigned
+  timeline_items.each_with_index do |h, i|
+    if h[:name] == active_name
+      h[:active] = true
+      break
+    else
+      h[:completed] = true
+    end
+  end
+
+  scroll.panels_timeline items: timeline_items
+  scroll.spacer height: 32
+
+  custom_completed_item = {
+    name: :custom,
+    label: 'Completed item with a custom icon',
+    completed: true,
+    uncompletedIcon: 'place',
+    completedIcon: 'place'
+  }
+  custom_uncompleted_item = {
+    name: :custom,
+    label: 'Uncompleted item with a custom icon',
+    uncompletedIcon: 'flag',
+    completedIcon: 'flag'
+  }
+  scroll.h2 text: 'Timeline with outlined dots, custom icons and custom colors'
+  scroll.spacer height: 8
+  scroll.panels_timeline \
+    items: [custom_completed_item] + timeline_items + [custom_uncompleted_item],
+    completedColor: '#4BB543',
+    uncompletedColor: '#FFA500',
+    styleClasses: ['outlined'],
+    completedIcon: 'check',
+    uncompletedIcon: 'hourglass_empty'
+  scroll.spacer height: 32
+
+  scroll.h2 text: 'Timeline with childViews'
+  scroll.panels_timeline \
+    items: timeline_items,
+    childViews: ->(tview) do
+      tview.spacer height: 16
+      render 'json_ui/garage/panels/timeline_content', tview: tview
+      tview.spacer height: 16
+
+      tview.button text: 'Reset', onClick: ->(action) do
+        action.windows_reload url: json_ui_garage_url(path: 'panels/timeline')
+      end
+      tview.spacer height: 16
+    end
+  scroll.spacer height: 32
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: glib-web
 version: !ruby/object:Gem::Version
-  version: 0.10.9
+  version: 0.11.0
 platform: ruby
 authors:
 - ''
@@ -201,6 +201,7 @@ files:
 - app/views/json_ui/garage/pages/tab_bar.json.jbuilder
 - app/views/json_ui/garage/panels/_hover_views_content.json.jbuilder
 - app/views/json_ui/garage/panels/_styled.json.jbuilder
+- app/views/json_ui/garage/panels/_timeline_content.json.jbuilder
 - app/views/json_ui/garage/panels/card.json.jbuilder
 - app/views/json_ui/garage/panels/carousel.json.jbuilder
 - app/views/json_ui/garage/panels/custom.json.jbuilder
@@ -212,6 +213,7 @@ files:
 - app/views/json_ui/garage/panels/outlined.json.jbuilder
 - app/views/json_ui/garage/panels/responsive.json.jbuilder
 - app/views/json_ui/garage/panels/split.json.jbuilder
+- app/views/json_ui/garage/panels/timeline.json.jbuilder
 - app/views/json_ui/garage/panels/ul.json.jbuilder
 - app/views/json_ui/garage/panels/vertical.json.jbuilder
 - app/views/json_ui/garage/panels/web.json.jbuilder