fleetio_spark 0.2.18 → 0.2.19

data/app/assets/stylesheets/spark/components/nav/_item.scss

@@ -3,7 +3,6 @@
   display: flex;
   align-items: center;
   position: relative;
-  padding: ($pad-base + 1) 20px;
   text-decoration: none;
   font-size: 14px;
   font-weight: 500;
@@ -12,10 +11,6 @@
 
   &-icon {
     flex-shrink: 0;
-
-    &:first-child {
-      margin-right: $pad-lg;
-    }
   }
 
   .expand-icon {

data/app/assets/stylesheets/spark/components/nav/_pills.scss

@@ -0,0 +1,45 @@
+.spark-nav-pills {
+  padding: 0 $pad-lg;
+  font-size: $base-size - 1;
+  font-weight: 500;
+
+  .nav-group {
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0;
+  }
+
+  .nav-pills-wrapper {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+
+  .nav-item {
+    font-size: $base-size - 1;
+    font-weight: 500;
+    border-radius: 15px;
+    padding: 3px $pad-md;
+    margin: $pad-xs $pad-xs;
+    font-weight: normal;
+    color: $fl-blue-700;
+
+    &:hover, &:focus {
+      background-color: $fl-white;
+    }
+
+    &.active {
+      color: $fl-white;
+      background-color: $fl-blue-600;
+    }
+
+    &-icon {
+      width: 1em;
+      height: 1em;
+      &:first-child {
+        margin-right: $pad-sm;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/spark/components/nav/_tabs.scss

@@ -0,0 +1,153 @@
+.nav-tabbed-panels {
+  width: 100%;
+}
+
+.spark-nav-tabs {
+  max-width: 100%;
+  overflow-x: auto;
+
+  .nav-tabs-wrapper {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 0 4px;
+    border-bottom: 1px solid $fl-gray-100;
+    max-height: 80px;
+    transition: max-height $duration cubic-bezier(0.47, 0, 0.745, 0.715);
+    position: relative;
+
+    .app-content-header & {
+      border-bottom-color: $fl-gray-50;
+    }
+  }
+
+  .nav-toggle {
+    display: none;
+    order: 100;
+    padding: { top: $pad-xs; right: $pad-sm; }
+  }
+
+  .nav-group { 
+    display: flex;
+    flex-grow: 1;
+    list-style: none;
+    margin: 0;
+  }
+
+  .nav-item {
+    font-size: $base-size - 1;
+    font-weight: 500;
+    color: $fl-gray-500;
+    border-bottom: 2px solid transparent;
+    padding: ($pad-base + 1) 0;
+    margin: { 
+      left: $pad-md;
+      right: $pad-md; 
+      bottom: -1px;
+    }
+
+    &:hover, &:focus {
+      border-color: $fl-gray-100;
+      color: $fl-gray-900;
+    }
+
+    &.active {
+      border-color: $fl-blue-700;
+      color: $fl-gray-900;
+    }
+
+    &-icon {
+      width: 1em;
+      height: 1em;
+
+      &:first-child {
+        margin-right: $pad-sm;
+      }
+    }
+  }
+  
+  // Triggered by javascript when parent width constrains tabs
+  &.collapse-tabs {
+    
+    // Show nav-toggle control
+    .nav-toggle {
+      display: block;
+      animation: fade-in $duration $timing;
+      cursor: pointer;
+      &:after {
+        content: "";
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+      }
+    }
+
+    .nav-tab-wrapper:not(.active) {
+      transition: $duration * 1.5 cubic-bezier(0.39, 0.575, 0.565, 1);
+      transition-property: opacity, max-height;
+    }
+
+    .nav-group {
+      display: block;
+    }
+
+    .nav-item:not(.active) {
+      transition: padding $duration cubic-bezier(0.47, 0, 0.745, 0.715);
+      padding: 0;
+    }
+
+    // Hide all nav elements but the active one.
+    .nav-tab-wrapper {
+      &:not(.active) {
+        opacity: 0;
+        max-height: 0px;
+        overflow-y: hidden;
+        .nav-item {
+          border-bottom: 1px solid $fl-gray-100;
+        }
+      }
+      // Don't permit click on active tab
+      // It is probably unintentional, expecting to open the menu
+      &.active {
+        pointer-events: none;
+        z-index: 0;
+        position: relative;
+      }
+    }
+
+    // Triggered by clicking nav-toggle
+    &.nav-expanded {
+
+      // Expand panel containing tabs
+      .nav-tabs-wrapper {
+        overflow-y: auto;
+        max-height: 50vh;
+      }
+
+      // Show all tabs and expand their height
+      .nav-tab-wrapper {
+        opacity: 1;
+        max-height: 80px;
+        overflow: visible;
+      }
+
+      .nav-item {
+        padding: ($pad-base + 1) 0;
+        margin-bottom: 0;
+        &:hover, &:focus {
+          background-color: $fl-gray-50;
+        }
+      }
+    }
+  }
+  .main-body & {
+    .nav-tabs-wrapper {
+      padding: 0;
+    }
+    .nav-item:first-child {
+      margin-left: 0;
+    }
+  }
+}

data/app/assets/stylesheets/spark/components/nav/_toggle.scss

@@ -0,0 +1,60 @@
+.nav-toggle {
+  flex-shrink: 0;
+  cursor: default;
+  display: block;
+  border: none;
+  background: transparent;
+
+  .icon-wrapper {
+    cursor: pointer;
+    position: relative;
+    z-index: 101;
+    @include circular-button(32px);
+    transition: all $duration $timing;
+    &:hover {
+      background-color: $fl-gray-50;
+    }
+  }
+}
+
+.nav-toggle-icon {
+  width: 18px;
+  color: $fl-gray-500;
+
+  &:hover {
+    color: $fl-gray-700;
+  }
+
+  &, &:before, &:after {
+    position: relative;
+    display: block;
+    height: 2px;
+    background: currentColor;
+    transform: translate3d(0,0,0);
+    transform-origin: center middle;
+    transition: $duration $timing;
+    transition-property: transform, background-color;
+  }
+
+  &:before, &:after {
+    width: 100%;
+    content: "";
+  }
+
+  &:before { top: -5px; }
+  &:after { top: 3px; }
+
+  .active & {
+    color: $fl-gray-1000;
+    background: transparent;
+
+    &:before {
+      transform: rotate(-45deg) translate3d(0,0,0);
+      top: 0px;
+    }
+    &:after {
+      transform: rotate(45deg) translate3d(0,0,0);
+      top: -2px;
+    }
+  }
+}  

data/app/assets/stylesheets/spark/components/ui/_checklist_trigger.scss

@@ -0,0 +1,46 @@
+.checklist-trigger {
+  $checklist-trigger-bg: lighten(mix($fl-purple-600, $app-sidebar-bg, 40%), 5%);
+  cursor: pointer;
+  display: flex;
+  flex: 1 0 auto;
+  padding: $pad-base;
+  background: $checklist-trigger-bg;
+  align-items: center;
+  margin: $pad-base;
+  border-radius: $radius-md;
+  color: $fl-white;
+  text-decoration: none;
+  border: none;
+  text-align: left;
+  -webkit-appearance: none;
+  font-size: $base-size;
+
+  &:hover {
+    background: lighten($checklist-trigger-bg, 3%);
+  }
+
+  &-icon {
+    fill: $fl-white;
+  }
+
+  &-icon-wrapper {
+    background: rgba($fl-white, .15);
+    padding: $pad-base;
+    display: flex;
+    border-radius: 50%;
+  }
+
+  &-content {
+    padding: 0 $pad-base;
+    line-height: 1.4em;
+  }
+
+  &-title {
+    font-weight: 800;
+  }
+  &-subtitle {
+    font-weight: normal;
+    opacity: .5;
+    font-size: $base-size - 1;
+  }
+}

data/app/assets/stylesheets/spark/components_old/_nav-menu.scss

@@ -64,7 +64,6 @@
 
     &:hover, &:focus {
       background-color: $focus-color;
-      outline: none;
       position: relative;
       z-index: 1;
       box-shadow: 0 0 0 1px $focus-color;
@@ -72,10 +71,9 @@
       .nav-menu-item-content {
         border-color: transparent;
       }
-
     }
-
   }
+
   &-more {
     color: $link-color;
     font-size: 12px;

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

@@ -161,3 +161,12 @@
     background-position: 1200px 1200px;
   }
 }
+
+@keyframes slide-sidebar-in {
+  0% {
+    transform: translateX(-$app-sidebar-width);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}

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

@@ -46,6 +46,7 @@ $z-ui-sticky-panel: 50;
 $z-app-header: 100;
 $z-app-search: 200;
 $z-app-sidebar-header: 300;
+$z-app-banner: 400;
 
 // Transition timing & durations
 $duration-short: .1s;

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

@@ -0,0 +1 @@
+<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><clipPath id="a"><path d="M0 0H14V14H0z"/></clipPath><g clip-path="url(#a)"><path d="M12.542 0H1.458C.658 0 0 .658 0 1.458v11.084C0 13.342.658 14 1.458 14h11.084c.8 0 1.458-.658 1.458-1.458V1.458C14 .658 13.342 0 12.542 0zm-1.75 5.542H8.167a.586.586 0 0 1-.583-.583c0-.321.263-.584.583-.584h2.625c.32 0 .583.263.583.583a.586.586 0 0 1-.583.584zm.583 4.666v.001c0 .32-.263.583-.583.583H8.167a.586.586 0 0 1-.583-.583c0-.321.263-.584.583-.584h2.625c.32 0 .583.263.583.583zM6.592 3.267L4.842 5.6a.582.582 0 0 1-.426.233h-.041a.584.584 0 0 1-.412-.17l-.875-.876a.585.585 0 0 1 .412-.996c.154 0 .303.062.412.171l.4.4 1.346-1.795a.583.583 0 1 1 .934.7zm0 5.833l-1.75 2.333a.59.59 0 0 1-.88.063l-.874-.875a.585.585 0 0 1 .824-.825l.4.4L5.658 8.4a.583.583 0 1 1 .934.7z" fill-rule="nonzero"/></g></svg>

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

@@ -1,15 +1,15 @@
 class App::BannerComponent < SparkComponents::Component
-  attribute type: "default", action_text: "Learn more"
+  attribute action_text: "Learn more"
   attribute :message, :href, :icon
+  add_theme default: "text", alert: "alert", admin: "admin"
+  tag_attr role: "banner"
 
   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 @view.use_svg(theme_icon, class: join_class('icon'), size: "icon_m")
         concat content_tag(:div, message || self, class: join_class("message"))
       }
       if href
@@ -20,16 +20,13 @@ class App::BannerComponent < SparkComponents::Component
     end
   end
 
-  def theme_defaults
-    add_class "theme-#{type}"
-    tag_attr role: "banner"
-
-    @icon ||= case type
-    when "default"
+  def theme_icon
+    @icon || case theme
+    when :default
       "message-text"
-    when "alert"
+    when :alert
       "message-alert"
-    when "admin"
+    when :admin
       "admin-user"
     end
   end

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

@@ -9,7 +9,7 @@ class App::HeaderComponent < SparkComponents::Component
 
   def render
     content_tag(:header, class: "app-header", role: "banner") do
-      concat component("app/sidebar/toggle")
+      concat component("nav/toggle", target: "body", toggle_class: "show-sidebar", class: 'app-sidebar-toggle')
       concat logo
       concat search
       if trial || actions

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

@@ -6,12 +6,28 @@ class App::LayoutComponent < SparkComponents::Component
 
     def render
       data_attr scroll: true
-      content_tag(:div, @yield, attrs)
+      content_tag(:div, attrs) do
+        concat header
+        concat nav
+        concat @yield
+      end
+    end
+
+    element :header do
+      def render
+        content_tag(:div, @yield, class: 'app-content-header') unless @yield.nil?
+      end
+    end
+
+    element :nav do
+      def render
+        content_tag(:div, @yield, class: 'app-content-nav') unless @yield.nil?
+      end
     end
   end
 
   def render
-    add_class "with-sidebar" if @sidebar
+    add_class @sidebar ? "with-sidebar" : "without-sidebar"
     @view.capture do
       @banner.each { |item| concat(item) } if @banner
       concat content_tag(:div, attrs) {