fleetio_spark 0.1.30 → 0.2.0

data/app/assets/stylesheets/spark/core/_vars.scss

@@ -15,12 +15,11 @@ $link-color:                $fl-blue-600;
 $link-hover-color:          $fl-blue-700;
 
 // Sidebar & Navbar
-$sidebar-nav-width:         250px;
-$sidebar-nav-bg:            $fl-blue-900;
-$sidebar-nav-item-hover:    lighten($sidebar-nav-bg, 2%);
-$sidebar-nav-item-active:   darken($sidebar-nav-bg, 4%);
-$app-nav-header-height:     60px;
-$app-admin-header-height:   39px;
+$app-sidebar-width:         250px;
+$app-sidebar-bg:            $fl-blue-900;
+$app-sidebar-item-hover:    lighten($app-sidebar-bg, 2%);
+$app-sidebar-item-active:   darken($app-sidebar-bg, 4%);
+$app-header-height:         60px;
 
 // Search
 $search-width:              450px;
@@ -42,6 +41,11 @@ $width-md:                  1000px;
 $width-lg:                  1200px;
 $width-xl:                  1400px;
 
+// Z-index globals
+$z-ui-sticky-panel: 50;
+$z-app-header: 100;
+$z-app-search: 200;
+
 // Transition timing & durations
 $duration-short: .1s;
 $duration: .2s;

data/app/assets/svgs/spark/add.svg

@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="21" height="21" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M0 12C0 12.3978 0.158035 12.7794 0.43934 13.0607C0.720644 13.342 1.10218 13.5 1.5 13.5H10.25C10.3163 13.5 10.3799 13.5263 10.4268 13.5732C10.4737 13.6201 10.5 13.6837 10.5 13.75V22.5C10.5 22.8978 10.658 23.2794 10.9393 23.5607C11.2206 23.842 11.6022 24 12 24C12.3978 24 12.7794 23.842 13.0607 23.5607C13.342 23.2794 13.5 22.8978 13.5 22.5V13.75C13.5 13.6837 13.5263 13.6201 13.5732 13.5732C13.6201 13.5263 13.6837 13.5 13.75 13.5H22.5C22.8978 13.5 23.2794 13.342 23.5607 13.0607C23.842 12.7794 24 12.3978 24 12C24 11.6022 23.842 11.2206 23.5607 10.9393C23.2794 10.658 22.8978 10.5 22.5 10.5H13.75C13.6837 10.5 13.6201 10.4737 13.5732 10.4268C13.5263 10.3799 13.5 10.3163 13.5 10.25V1.5C13.5 1.10218 13.342 0.720644 13.0607 0.43934C12.7794 0.158035 12.3978 0 12 0C11.6022 0 11.2206 0.158035 10.9393 0.43934C10.658 0.720644 10.5 1.10218 10.5 1.5V10.25C10.5 10.3163 10.4737 10.3799 10.4268 10.4268C10.3799 10.4737 10.3163 10.5 10.25 10.5H1.5C1.10218 10.5 0.720644 10.658 0.43934 10.9393C0.158035 11.2206 0 11.6022 0 12H0Z" fill="black"/>
 </svg>

data/app/components/spark/app/banner_component.rb

@@ -0,0 +1,36 @@
+class App::BannerComponent < SparkComponents::Component
+  attribute type: "default", action_text: "Learn more"
+  attribute :message, :href, :icon
+
+  base_class "app-banner"
+
+  def render
+    theme_defaults
+
+    content_tag(:header, attrs) do
+      concat content_tag(:div, class: join_class('content')) {
+        concat @view.use_svg(icon, class: join_class('icon'), size: "icon_m")
+        concat content_tag(:div, message || self, class: join_class("message"))
+      }
+      if href
+        concat content_tag(:div, class: join_class("action")) {
+          @view.link_to( action_text, href, class: join_class("action-item"), target: "_blank" )
+        }
+      end
+    end
+  end
+
+  def theme_defaults
+    add_class "theme-#{type}"
+    tag_attr role: "banner"
+
+    @icon ||= case type
+    when "default"
+      "message-text"
+    when "alert"
+      "message-alert"
+    when "admin"
+      "admin-user"
+    end
+  end
+end

data/app/components/spark/app/header_component.rb

@@ -0,0 +1,59 @@
+class App::HeaderComponent < SparkComponents::Component
+
+  element :search
+  element :actions do
+    aria_attr label: "site actions"
+    tag_attr role: "navigation"
+    base_class "app-header-actions"
+  end
+
+  def render
+    content_tag(:header, class: "app-header", role: "banner") do
+      concat component("app/sidebar/toggle")
+      concat logo
+      concat search
+      if trial || actions
+        concat content_tag(:nav, actions.attrs) {
+          concat trial
+          concat actions
+        }
+      end
+      concat self
+    end
+  end
+
+  element :logo do
+    attribute :image, :href
+
+    def render
+      link_to href, class: 'app-header-logo' do
+        image || @view.use_svg('logo', height: '30')
+      end
+    end
+  end
+
+  element :trial do
+    attribute :end_date, :href
+    base_class "trial-status"
+
+    def render
+      add_class "trial-ended" if days < 1
+      add_class "trial-ending-soon" if 1 <= days && days < 5
+
+      content_tag( :div, attrs ) do
+        concat content_tag( :span, class: 'trial-status-text' ) { text }
+        concat " "
+        concat link_to "Manage", href, class: 'trial-status-link'
+      end
+    end
+
+    def days
+      [0, (end_date.to_date - Time.zone.now.to_date).to_i].max
+    end
+
+    def text
+      %(#{@view.pluralize(days, 'day')} left in trial)
+    end
+  end
+
+end

data/app/components/spark/app/layout_component.rb

@@ -0,0 +1,59 @@
+class App::LayoutComponent < SparkComponents::Component
+  base_class "app-wrapper"
+
+  element :content do
+    base_class "app-content"
+
+    def render
+      data_attr scroll: true
+      content_tag(:div, @yield, attrs)
+    end
+  end
+
+  def render
+    add_class "with-sidebar" if @sidebar
+    @view.capture do
+      @banner.each { |item| concat(item) } if @banner
+      concat content_tag(:div, attrs) {
+        concat ie_fix
+        concat @sidebar
+        concat content_tag(:div, class: "app-main") {
+          concat @header
+          concat content
+        }
+      }
+    end
+  end
+
+  def sidebar(options, &block)
+    @sidebar = compose('app/sidebar', options, &block)
+  end
+
+  def header(options, &block)
+    @header = compose('app/header', options, &block)
+  end
+
+  def banner(options, &block)
+    @banner ||= []
+    @banner.push compose('app/banner', options, &block)
+  end
+
+  def compose(name, options, &block)
+    if options[:render]
+      @view.render(options[:render])
+    else
+      component(name, options, &block)
+    end
+  end
+
+  def ie_fix
+    content_tag(:script) do
+%((function(){
+  if (!!(navigator.userAgent.match(/Trident/) && navigator.userAgent.match(/rv[ :]11/))) {
+    var wrapper = document.querySelector('.app-wrapper')
+    wrapper.style.flexBasis = "calc(100vh - "+wrapper.offsetTop+"px)";
+  }
+})()).html_safe
+    end
+  end
+end

data/app/components/spark/app/sidebar/header/_header.js

@@ -0,0 +1,11 @@
+(function(){
+  window.requestAnimationFrame(function(){
+    var header = document.querySelector('.app-sidebar-header')
+    var sidebar = document.querySelector('.nav-tree')
+
+    if (sidebar && header) {
+      header.style.width = sidebar.clientWidth + 'px';
+    }
+  })
+})()
+

data/app/components/spark/app/sidebar/header_component.rb

@@ -0,0 +1,40 @@
+class App::Sidebar::HeaderComponent < SparkComponents::Component
+  attribute :account, :contact, :avatar
+  base_class "app-sidebar-header"
+  add_class "dropdown"
+
+  def render
+    @view.capture {
+      concat content_tag(:script, render_partial("app/sidebar/header/header.js"))
+      concat content_tag(:header, attrs) {
+        concat content_tag(:a, class: "dropdown-toggle", href: "javascript:void(0)", "data-toggle" => "dropdown") {
+          concat content_tag(:div, class: "details") {
+            concat account_tag
+            concat icon
+            concat user_tag
+          }
+          concat avatar_tag
+        }
+        concat self
+      }
+    }
+  end
+
+  def account_tag
+    content_tag(:div, account, class: "account-name")
+  end
+
+  def user_tag
+    content_tag(:div, contact, class: "user-name")
+  end
+
+  def avatar_tag
+    content_tag(:div, class: "user-avatar") {
+      @view.image_tag(avatar, alt: "User Photo")
+    }
+  end
+
+  def icon
+    @view.use_svg('chevron-down', width: '9', class: 'dropdown-icon')
+  end
+end

data/app/components/spark/app/sidebar/toggle_component.rb

@@ -0,0 +1,12 @@
+class App::Sidebar::ToggleComponent < SparkComponents::Component
+  data_attr toggle_sidebar: 'true'
+  base_class "app-sidebar-toggle"
+  tag_attr href: "#"
+  def render
+    content_tag(:a, attrs) do
+      content_tag(:span, class: "icon-wrapper") {
+        content_tag(:span, nil, class: "close-sidebar-icon", "aria-label" => "toggle sidebar")
+      }
+    end
+  end
+end

data/app/components/spark/app/sidebar_component.rb

@@ -0,0 +1,9 @@
+class App::SidebarComponent < Nav::SidebarComponent
+  aria_attr label: "primary navigation"
+  base_class "app-sidebar"
+
+  element :header, component: "app/sidebar/header"
+  element :nav, component: "nav/tree" do
+    attribute id: "app-sidebar-nav"
+  end
+end

data/app/components/spark/nav/breadcrumbs_component.rb

@@ -0,0 +1,2 @@
+class Nav::BreadcrumbsComponent < SparkComponents::Component
+end

data/app/components/spark/nav/group_component.rb

@@ -0,0 +1,30 @@
+class Nav::GroupComponent < SparkComponents::Component
+  element :item, multiple: true, component: "nav/item"
+  attribute item_role: 'menuitem'
+
+  def pre_render
+    add_class "active" if active?
+  end
+
+  def render
+    unless items.empty?
+      content_tag(:ul, class: "nav-group", role: "group") do
+        items.each { |item| 
+          concat content_tag(:li, item, class: "nav-item-wrapper", role: item_role)
+        }
+      end
+    end
+  end
+
+  def new?
+    items.any?(&:new?)
+  end
+
+  def beta?
+    items.any?(&:beta?)
+  end
+
+  def active?
+    items.any?(&:active)
+  end
+end

data/app/components/spark/nav/item_component.rb

@@ -0,0 +1,38 @@
+class Nav::ItemComponent < SparkComponents::Component
+  attribute :text, :icon, :detail, :active, :beta, :new, :href
+  attribute icon_size: '18px'
+  base_class "nav-item"
+
+  def pre_render
+    add_class "active" if active
+    tag_attr(href: href || "#")
+  end
+
+  def render
+    content_tag(:a, attrs) do
+      concat @view.use_svg(icon, width: icon_size, class: join_class("icon")) if icon
+      concat content_tag(:span, class: join_class("content")) {
+        concat content_tag(:span, text || self, class: join_class("text"))
+        concat content_tag(:span, label.upcase, class: [join_class("label"), label]) if label
+      }
+      concat content_tag(:span, detail, class: join_class("detail")) if detail
+      concat self if text
+    end
+  end
+
+  def label
+    if is_new?
+      "new"
+    elsif beta
+      "beta"
+    end
+  end
+
+  def is_new?
+    if new.is_a?(String)
+      30.days.ago <= Time.zone.parse( new )
+    else
+      new
+    end
+  end
+end

data/app/components/spark/nav/sidebar_component.rb

@@ -0,0 +1,16 @@
+class Nav::SidebarComponent < SparkComponents::Component
+  aria_attr :label
+  base_class "sidebar-nav"
+
+  element :header
+  element :nav, component: "nav/group"
+  element :footer
+
+  def render
+    content_tag(:nav, attrs) do
+      concat header
+      concat nav
+      concat footer
+    end
+  end
+end

data/app/components/spark/nav/tree/group_component.rb

@@ -0,0 +1,34 @@
+class Nav::Tree::GroupComponent < Nav::GroupComponent
+  attribute :icon, :text, expanded: false
+  tag_attr role: "treeitem"
+  base_class "nav-item-wrapper"
+
+  def pre_render
+    super
+    add_class "tree-node"
+    data_attr(node: node)
+    aria_attr(expanded: expanded?)
+    @item_role = item.respond_to?(:href) ? "none" : "treeitem"
+  end
+
+  def render
+    unless items.empty?
+      content_tag(:li, attrs) do
+        concat @view.component("nav/item", text: text, icon: icon, class: "tree-trigger") { expand_icon }
+        concat super
+      end
+    end
+  end
+
+  def expand_icon
+    @view.use_svg( 'chevron-down', class: "expand-icon", width: "9px" )
+  end
+
+  def node
+    @node ||= text.strip.downcase.gsub(/[\W,-]+/, '_')
+  end
+
+  def expanded?
+    @expanded || active?
+  end
+end

data/app/components/spark/nav/tree_component.rb

@@ -0,0 +1,43 @@
+class Nav::TreeComponent < SparkComponents::Component
+  base_class "nav-tree"
+  tag_attr :id, role: "tree"
+  aria_attr :label
+
+  def pre_render
+    data_attr tree: id
+  end
+
+  element :item, multiple: true, component: "nav/item" do
+    add_class "tree-node"
+  end
+
+  element :group, component: "nav/tree/group" do
+    def render
+      parent.items << super unless items.empty?
+    end
+
+    def expanded?
+      parent.group_expanded?(node) || active? || expanded
+    end
+  end
+
+  def render
+    content_tag(:ul, attrs) do
+      items.each { |item|
+        # Wrap links in `<li>`s if it's a link
+        item = content_tag(:li, item, class: "nav-item-wrapper", role: "none") if item.respond_to?(:href)
+        concat item
+      }
+    end
+  end
+
+  def group_expanded?(node)
+    @_cookie ||= begin
+      @view.parse_cookie( id )
+    rescue
+      nil
+    end
+
+    @_cookie && !!@_cookie[ node ]
+  end
+end