fleetio_spark 1.1.2 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e004d6de667f1feec14d7d0a19be03067c5568b568490f27a6dc9882bc351be8
-  data.tar.gz: c66e87d404474a0894f66676e85def933ff094679175c087cc33afc72a524942
+  metadata.gz: ac3ce4d5887911648b62eca73dac54a5bc03a9315ff2878b6b587494237c60a9
+  data.tar.gz: a3ce38b4893c54df7e9a9f89f587b215015efe0acf18501b42cea30aeb4e39a6
 SHA512:
-  metadata.gz: c3bfbd6f25492a9068ed858fa4383019f5e44ac7ba71ffb8e5de201629a7e7d56f2ca88be38e33f70749b732943ab3651d0b121f31919fd777b574dce9e45a24
-  data.tar.gz: b604ba201842568d014b2b1732d58c43b97706067cab5721d0269b1173dd54d6146197e067e93610fb980dee8317a58800b633bdd6aed9fd5c6ce56ebf4f0e9e
+  metadata.gz: 1df661bb4274f5aa84c584fb5c68b5ef04b786d98e9a02d5bca02f56af5eb35741f5110821eede45cb64dfddee6a69a7ef76fb18e31c8743293d47021afad779
+  data.tar.gz: a5f113d846cb00d52294d99b08221b45ef93ba4bd28d109a521621ffc70fd6e709d194621add18779b5aa30e137d62d6f6ac6f68bc0a57fcd4e3218082e6cb7e

data/app/assets/stylesheets/spark/components/_index.scss

@@ -25,6 +25,7 @@
 @import "structure/sticky_panel";
 @import "structure/card";
 @import "structure/widget_card";
+@import "structure/table";
 
 @import "nav/item";
 @import "nav/tabs";

data/app/assets/stylesheets/spark/components/app/_header.scss

@@ -6,11 +6,7 @@
   line-height: $base-line-height;
   height: $app-header-height;
   position: absolute;
-  padding: 0 $pad-base;
-
-  @include at-least($width-base) {
-    padding: 0 $pad-lg;
-  }
+  @include layout-padded($vpad: 0);
 
   // When sidebar is present and visible
   // header should be the full width minus the sidebar width

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

@@ -32,13 +32,10 @@
   .nav-toggle {
     width: 100%;
     background: $fl-white;
-    padding: $pad-xs $pad-base;
     display: none;
     margin: -1px 0 0;
 
-    @include at-least($width-base) {
-      padding: $pad-xs $pad-lg;
-    }
+    @include layout-padded($vpad: $pad-xs);
 
     &-icon {
       margin-right: -$pad-base;
@@ -95,12 +92,9 @@
     }
 
     .nav-item {
-      padding: 0 $pad-base;
       transition: padding $duration cubic-bezier(0.47, 0, 0.745, 0.715);
       border-bottom: 1px solid $fl-gray-100;
-      @include at-least($width-base) {
-        padding: 0 $pad-lg;
-      }
+      @include layout-padded($vpad: 0);
     }
 
     // Hide all nav elements but the active one.
@@ -134,11 +128,7 @@
       }
 
       .nav-item {
-        padding: ($pad-base + 1) $pad-base;
-
-        @include at-least($width-base) {
-          padding: ($pad-base + 1) $pad-lg;
-        }
+        @include layout-padded($vpad: $pad-base + 1);
 
         &:hover, &:focus {
           background-color: $fl-gray-50;

data/app/assets/stylesheets/spark/components/structure/_block.scss

@@ -9,11 +9,7 @@
   }
 
   &.layout-padded {
-    padding: 8px 8px;
-
-    @include at-least($width-base) {
-      padding: 8px 16px;
-    }
+    @include layout-padded;
   }
 
   @each $label, $size in $gutter-sizes {

data/app/assets/stylesheets/spark/components/structure/_card.scss

@@ -6,21 +6,24 @@
   background: $fl-white;
   border-radius: $radius-md;
   border-color: $fl-gray-100;
-  padding-bottom: $pad-lg;
   box-shadow: $card-shadow;
+  width: 100%;
 
   &-content {
     font-size: $base-size;
-    padding: $pad-md $pad-lg;
+
+    &.layout-padded {
+      @include layout-padded($pad-md);
+    }
   }
 }
 
 .spark-card-header {
-  padding: $pad-md $pad-lg;
   font-size: 14px;
   font-weight: 600;
   display: flex;
   justify-content: space-between;
+  border-bottom: 1px solid $fl-gray-50;
 
   &-title {
     display: flex;

data/app/assets/stylesheets/spark/components/structure/_table.scss

@@ -0,0 +1,165 @@
+$cell-sizes: (
+  xs: 1%,
+  small: 10%,
+  base: 20%,
+  medium: 30%,
+  large: 40%,
+  xl: 50%,
+  max: 100%
+);
+
+.spark-table {
+  border-spacing: 0;
+  border-collapse: collapse;
+  font-size: 13px;
+  max-width: 100%;
+  width: 100%;
+
+  thead {
+    border-bottom: 1px solid $fl-gray-50;
+  }
+
+  &-subhead {
+    background: $fl-gray-25;
+  }
+
+  th,
+  td {
+    border: none;
+    border-top: 1px solid $fl-gray-50;
+    text-align: left;
+    vertical-align: top;
+    @include layout-padded($vpad: $pad-md);
+
+    &:not(:first-child) {
+      padding-left: $pad-base;
+    }
+    &:not(:last-child) {
+      padding-right: $pad-base;
+    }
+
+    @each $value in $align {
+      &[data-align="#{$value}"] {
+        text-align: $value;
+      }
+    }
+
+    @each $value in $v-align {
+      &[data-v-align="#{$value}"] {
+        vertical-align: $value;
+      }
+    }
+
+    &.nowrap {
+      white-space: nowrap;
+    }
+
+    @each $size-name, $size in $cell-sizes {
+      &[data-size="#{$size-name}"] {
+        width: $size;
+      }
+    }
+  }
+
+  th {
+    font-weight: 500;
+  }
+
+  thead,
+  tbody {
+    tr:first-child {
+      th,
+      td {
+        border-top: none;
+      }
+    }
+  }
+
+  tbody[data-link="row"] {
+    tr {
+      &:hover {
+        background-color: $fl-gray-25;
+        cursor: pointer;
+      }
+
+      &:first-child {
+        td:first-child {
+          border-top-left-radius: $radius-md;
+        }
+        &:last-child {
+          border-top-right-radius: $radius-md;
+        }
+      }
+
+      &:last-child {
+        td:first-child {
+          border-bottom-left-radius: $radius-md;
+        }
+        td:last-child {
+          border-bottom-right-radius: $radius-md;
+        }
+      }
+    }
+  }
+
+  thead ~ tbody[data-link="row"] {
+    tr:first-child {
+      td:first-child {
+        border-top-left-radius: 0;
+      }
+      td:last-child {
+        border-top-right-radius: 0;
+      }
+    }
+  }
+
+  // Need to revisit, supporting bootstrap attachment class
+  tbody {
+    .attachments {
+      span {
+        background-color: $fl-white;
+        display: inline-block;
+        border: 1px solid $fl-gray-100;
+        border-radius: $radius-base;
+        padding: 0 $pad-sm;
+        margin-top: 3px;
+        color: $fl-gray-600;
+        min-width: 30px;
+        text-align: center;
+
+        > i {
+          font-size: 12px;
+        }
+
+        + span {
+          margin-left: $pad-xs;
+        }
+      }
+    }
+  }
+
+  &-detail {
+    tbody {
+      tr {
+        th {
+          text-align: right;
+          width: 37%;
+        }
+      }
+    }
+  }
+}
+
+@include until($width-base) {
+  .spark-table-wrapper {
+    width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+
+    tbody {
+      td {
+        white-space: nowrap;
+      }
+    }
+  }
+}

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

@@ -102,3 +102,17 @@
     margin-bottom: 0;
   }
 }
+
+@mixin layout-padded($vpad: $pad-base) {
+  padding: $vpad;
+
+  @include responsive-padding;
+}
+
+@mixin responsive-padding {
+  padding: { left: $pad-base; right: $pad-base; }
+
+  @include at-least($width-base) {
+    padding: { left: $pad-lg; right: $pad-lg; }
+  }
+}

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

@@ -2,3 +2,11 @@ body {
   font-family: $base-font;
   color: $base-text-color;
 }
+
+a {
+  color: $link-color;
+  
+  &:hover {
+    color: $link-hover-color;
+  }
+}

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

@@ -99,3 +99,9 @@ $card-shadow: 0px 1px 2px -2px rgba(0,0,0,0.1),
 
 // Gutters
 $gutter-sizes : ['base', $pad-base], ['small', $pad-sm], ['medium', $pad-md], ['large', $pad-lg], ['xl', $pad-xl];
+
+// Vertical Alignment
+$v-align : top, middle, bottom;
+
+// Text Alignment
+$align : left, center, right;

data/app/components/spark/card.html.slim

@@ -2,6 +2,7 @@ div *tag_attrs
   - if header
     - header.classname.add("spark-card-header")
     = header.yield
-  - if body
-    .spark-card-content
-      = body.yield
+  - if body.present?
+    - bodies.each do |body|
+      .spark-card-content *body.tag_attrs
+        = body.yield

data/app/components/spark/card.rb

@@ -1,9 +1,20 @@
 module Spark
   class Card < Spark::Component::Base
+    LAYOUT = %i[flush padded].freeze
 
-    element :header, component: Spark::Block
+    element :header, component: Spark::Block do
+      attribute layout: :padded
+    end
+
+    element :body, multiple: true do
+      attribute layout: :padded
+      validates_attr :layout, choices: LAYOUT
 
-    element :body
+      def initialize(*)
+        super
+        classname.add("layout-#{@layout}")
+      end
+    end
 
     def initialize(*)
       super

data/app/components/spark/checklist/item.rb

@@ -4,7 +4,6 @@ module Spark
       attribute :href, :target, :icon, :action_text, :text, completed: false
 
       validates_attr :href, presence: true
-      validates_attr :icon, presence: true
       validates_attr :action_text, presence: true
       validates_attr :text, presence: true
       validates_attr :completed, inclusion: [true, false]

data/app/components/spark/grid/column.rb

@@ -5,18 +5,14 @@ module Spark
       SPAN      = [*(1..12), *SPAN_NAME.keys].freeze
       OFFSET    = [*(1..11), *SPAN_NAME.keys].freeze
 
-      attribute :span, :offset
+      data_attribute :span, :offset
 
       validates_attr :span, choices: SPAN, allow_nil: true
       validates_attr :offset, choices: OFFSET, allow_nil: true
 
       def initialize(*)
         super
-        data.add span: span_name(@span) || 0
-        data.add offset: span_name(@offset) if @offset
-
         classname.base = "spark-grid-column"
-
       end
 
       def span_name(size)

data/app/components/spark/table/cell.html.slim

@@ -0,0 +1 @@
+= content_tag(_name, content, tag_attrs)

data/app/components/spark/table/cell.rb

@@ -0,0 +1,30 @@
+module Spark
+  class Table
+    class Cell < Spark::Component::Base
+      SCOPE  = %i[col row colgroup rowgroup]
+      SIZES  = %i[xs small base medium large xl max]
+
+      attribute :rowlink_skip, :nowrap, :fit
+      tag_attribute :scope
+      data_attribute :align, :v_align, :size
+
+      attribute_default_group(fit: {
+        true: {
+          nowrap: true,
+          size: :xs
+        }
+      })
+
+      validates_attr :scope, choices: SCOPE, allow_nil: true
+      validates_attr :align, choices: Spark::Table::Row::ALIGN, allow_nil: true
+      validates_attr :v_align, choices: Spark::Table::Row::VALIGN, allow_nil: true
+      validates_attr :size, choices: SIZES, allow_nil: true
+
+      def initialize(*)
+        super
+        classname.add("nowrap") if @nowrap
+        classname.add("rowlink-skip") if @rowlink_skip
+      end
+    end
+  end
+end

data/app/components/spark/table/detail.rb

@@ -0,0 +1,19 @@
+module Spark
+  class Table
+    class Detail < Spark::Table
+      inherit_template
+      tag_attribute class: "spark-table-detail"
+
+      element :object, multiple: true, component: Spark::Table::Object do
+        def initialize(*)
+          super
+          _parent.rows << self
+        end
+      end
+
+      def initialize(*)
+        super
+      end
+    end
+  end
+end

data/app/components/spark/table/object.html.slim

@@ -0,0 +1,5 @@
+tr *tag_attrs
+  th *title_attrs
+    = @title || title.yield
+  td *value_attrs
+    = value.present? ? value.yield : @content

data/app/components/spark/table/object.rb

@@ -0,0 +1,29 @@
+module Spark
+  class Table
+    class Object < Spark::Component::Base
+      attribute :title
+
+      # Require attribute title unless title element was passed
+      validates_attr :title, presence: true, unless: -> { title.present? }
+
+      element :title
+      element :value
+
+      def initialize(*)
+        super
+      end
+
+      def title_attrs
+        obj = title.present? ? title.tag_attrs : TagAttr.new
+        obj.add scope: :row
+        obj.classname.add "spark-table-detail-title"
+      end
+
+      def value_attrs
+        obj = value.present? ? value.tag_attrs : TagAttr.new
+        obj.classname.add "spark-table-detail-value"
+        obj
+      end
+    end
+  end
+end

data/app/components/spark/table/row.html.slim

@@ -0,0 +1,4 @@
+tr *tag_attrs
+  - tds.each do |td|
+    - td.tag_attrs.classname.add("rowlink-skip") if @rowlink_skip
+    = td.yield

data/app/components/spark/table/row.rb

@@ -0,0 +1,32 @@
+module Spark
+  class Table
+    class Row < Spark::Component::Base
+      ALIGN  = %i[left center right]
+      VALIGN = %i[top middle bottom]
+
+      attribute :align, :v_align, :nowrap
+
+      validates_attr :align, choices: ALIGN, allow_nil: true
+      validates_attr :v_align, choices: VALIGN, allow_nil: true
+
+      element :td, multiple: true, component: Spark::Table::Cell do
+        def initialize(*)
+          super
+        end
+      end
+
+      element :th, multiple: true, component: Spark::Table::Cell do
+        def initialize(*)
+          super
+          _parent.tds << self
+        end
+      end
+
+      def initialize(*)
+        super
+        set_element_attribute_default(:td, align: @align, v_align: @v_align, nowrap: @nowrap)
+        set_element_attribute_default(:th, align: @align, v_align: @v_align, nowrap: @nowrap)
+      end
+    end
+  end
+end

data/app/components/spark/table.html.slim

@@ -0,0 +1,15 @@
+.spark-table-wrapper
+  table *tag_attrs
+    - if header
+      thead
+        = header.yield
+    - if rows.present?
+      - rowlink_data = @rowlink ? { data: { link: "row" }} : {}
+      tbody *rowlink_data
+        - rows.each do |row|
+          - if row._name == :row_partial
+            = row.yield
+          - elsif row._name == :subhead
+            td *row.tag_attrs colspan="100" = row.yield
+          - else
+            = row.yield

data/app/components/spark/table.rb

@@ -0,0 +1,23 @@
+module Spark
+  class Table < Spark::Component::Base
+    THEME = %i[default detail].freeze
+    attribute :rowlink
+
+    element :header, component: Spark::Table::Row
+    element :row, multiple: true, component: Spark::Table::Row
+    element :subhead, multiple: true do
+      tag_attribute scope: :colgroup
+      def initialize(*)
+        super
+        _parent.rows << self
+        classname.add("spark-table-subhead")
+      end
+    end
+
+    def initialize(*)
+      super
+
+      classname.add("spark-table")
+    end
+  end
+end

data/lib/fleetio_spark/version.rb

@@ -1,3 +1,3 @@
 module FleetioSpark
-  VERSION = "1.1.2"
+  VERSION = "1.2.0"
 end