tao_ui 0.2.6 → 0.2.7

data/lib/assets/javascripts/tao/ui/tree/item.coffee

@@ -0,0 +1,86 @@
+class Tao.Tree.Item extends TaoComponent
+
+  @tag 'tao-tree-item'
+
+  @attribute 'depth', type: 'number'
+
+  @attribute 'expandable', 'selectable', type: 'boolean'
+
+  @attribute 'expanded', 'selected', 'indeterminate', type: 'boolean', observe: true
+
+  @attribute 'remote', type: 'hash'
+
+  _connected: ->
+    @checkbox = @findComponent '> .tao-tree-item-content tao-check-box', =>
+      @_selectedChanged() if @selected
+    @_bind()
+
+  _disconnected: ->
+    @off()
+    @checkbox.off()
+    @checkbox = null
+
+  _bind: ->
+    @on 'click', '> .tao-tree-item-content > .link-toggle-item', (e) =>
+      @_toggleExpanded() if @expandable && !@jq.hasClass('expanding')
+      null
+
+    @checkbox.on 'tao:change', (e) =>
+      @selected = e.currentTarget.checked
+      @trigger 'tao-tree-item:selectedChange', [@selected]
+      null
+
+  _beforeExpandedChanged: (expanded) ->
+    $list = @jq.find('> .tao-tree-list')
+    @jq.addClass 'expanding'
+    $list.css 'display', 'block'
+    $list.css 'height',  if expanded then '0' else $list.get(0).scrollHeight
+    $list.one 'transitionend', => @_afterTransition()
+    @reflow()
+    null
+
+  _expandedChanged: ->
+    $list = @jq.find('> .tao-tree-list')
+    if @expanded
+      $list.css 'height',  $list.get(0).scrollHeight
+    else
+      $list.css 'height', '0'
+
+  _selectedChanged: ->
+    return unless @selectable
+    @checkbox.checked = @selected
+    null
+
+  _indeterminateChanged: ->
+    return unless @selectable
+    @checkbox.indeterminate = @indeterminate
+    null
+
+  _afterTransition: ->
+    $list = @jq.find('> .tao-tree-list')
+    @jq.removeClass 'expanding'
+    if @expanded
+      $list.css 'height', 'auto'
+      if @remote && $list.find('> .tao-tree-loading').length > 0
+        @_requestList()
+    else
+      $list.hide()
+
+  _toggleExpanded: ->
+    @expanded = !@expanded
+
+  _requestList: ->
+    $.ajax
+      url: @remote.url
+      type: 'get'
+      data: _.extend {}, @remote.params,
+        depth: @depth
+        selectable: @selectable || undefined
+        selected: @selected || undefined
+      dataType: 'script'
+
+  updateList: ($newList) ->
+    @_afterTransition() if @jq.hasClass('expanding')
+    @jq.find('> .tao-tree-list').replaceWith($newList)
+
+TaoComponent.register Tao.Tree.Item

data/lib/assets/stylesheets/tao/ui/index.scss

@@ -8,3 +8,5 @@
 //= require ./popover
 //= require ./tooltip
 //= require ./dialog
+//= require ./sortable
+//= require ./tree

data/lib/assets/stylesheets/tao/ui/mobile/buttons.scss

@@ -1,2 +1,8 @@
 @import 'tao/ui/mobile/globals';
 @import 'tao/ui/shared/buttons';
+
+.button {
+  &.text-with-icon {
+    padding-left: 1.125em;
+  }
+}

data/lib/assets/stylesheets/tao/ui/mobile/slide_box.scss

@@ -25,7 +25,7 @@ tao-slide-box {
     }
 
     .title {
-      flex: 1 1 auto;
+      flex: 0 0 auto;
       text-align: center;
     }
 

data/lib/assets/stylesheets/tao/ui/shared/_buttons.scss

@@ -18,7 +18,7 @@
   }
 
   &.text-with-icon {
-    padding-left: 1.125em;
+    padding-left: 1.5em;
 
     .icon {
       margin-right: 0.5em

data/lib/assets/stylesheets/tao/ui/shared/_tables.scss

@@ -2,11 +2,12 @@ table.table {
   width: 100%;
   max-width: 100%;
   border-collapse: collapse;
+  table-layout: fixed;
 
   th {
     border-top: 1px solid $table-line-color;
     border-bottom: 1px solid $table-line-color;
-    padding: 0.875rem 0.625rem;
+    padding: $table-th-padding;
     font-size: $font-size-xs;
     font-weight: normal;
     line-height: 1.125;
@@ -16,7 +17,7 @@ table.table {
 
   td {
     border-bottom: 1px solid $table-line-color;
-    padding: 1.125rem 0.625rem;
+    padding: $table-td-padding;
     line-height: 1.125;
     text-align: left;
   }

data/lib/assets/stylesheets/tao/ui/shared/variables/_base.scss

@@ -8,6 +8,7 @@ $red-color: #ff7755 !default;
 $orange-color: #ffaa00 !default;
 $green-color: #55bb33 !default;
 $blue-color: #22bbff !default;
+$grey-blue-color: #7AA4D4 !default;
 
 $light-grey-color: #666666 !default;
 $lighter-grey-color: #9b9b9b !default;

data/lib/assets/stylesheets/tao/ui/shared/variables/_buttons.scss

@@ -7,7 +7,7 @@ $button-warn-active-color: #EE6633 !default;
 $button-font-size: 1rem !default;
 $button-line-height: 1.5 !default;
 $button-padding-v: 0.4375em !default;
-$button-padding-h: 1.25em !default;
+$button-padding-h: 1.875em !default;
 $button-padding: $button-padding-v $button-padding-h !default;
 
 $small-button-font-size: 0.75rem !default;

data/lib/assets/stylesheets/tao/ui/shared/variables/_tables.scss

@@ -1,2 +1,4 @@
 $table-line-color: $light-line-color !default;
 $table-row-hover-color: $grey-bg-color !default;
+$table-th-padding: 0.875rem 0.625rem !default;
+$table-td-padding: 1.125rem 0.625rem !default;

data/lib/assets/stylesheets/tao/ui/sortable.scss

@@ -0,0 +1,16 @@
+@import 'tao/ui/globals';
+
+.tao-sortable {
+
+  [draggable='true'] {
+    cursor: move;
+    user-select: none;
+    /* Required to make elements draggable in old WebKit */
+    -khtml-user-drag: element;
+    -webkit-user-drag: element;
+  }
+
+  .tao-sortable-sorting {
+    visibility: hidden !important;
+  }
+}

data/lib/assets/stylesheets/tao/ui/tables.scss

@@ -6,3 +6,80 @@ table.table {
     background-color: $table-row-hover-color;
   }
 }
+
+.tao-table {
+  .th-checkbox,
+  .td-checkbox {
+    display: none;
+    width: 2.5rem;
+    padding: 0;
+    text-align: center;
+  }
+
+  &[selectable] {
+    .th-checkbox,
+    .td-checkbox {
+      display: table-cell;
+    }
+  }
+
+  .th-expand-icon,
+  .td-expand-icon {
+    display: none;
+    width: 2.5rem;
+    padding: 0;
+    text-align: center;
+  }
+
+  &[expandable] {
+
+    .th-expand-icon,
+    .td-expand-icon {
+      display: table-cell;
+
+      .icon {
+        width: 1rem;
+        height: 1rem;
+        transition: transform 200ms;
+      }
+    }
+
+    tr.expandable {
+      .td-expand-icon .icon {
+        fill: $lighter-grey-color;
+      }
+
+      &:hover .td-expand-icon .icon {
+        fill: $grey-color;
+      }
+    }
+
+    tr.expanded {
+      border-bottom-color: transparent;
+
+      .th-expand-icon,
+      .td-expand-icon {
+        .icon {
+          transform: rotate(90deg);
+        }
+      }
+    }
+
+    tr.expandable-panel {
+      display: none;
+      background: $grey-bg-color;
+
+      & > td  {
+        padding: 0;
+        box-shadow: inset 0 8px 10px -8px rgba(184, 184, 184, 0.8);
+
+        & > div:first-child {
+          padding: 1.5rem 2rem;
+          height: 0;
+          transition: height 200ms linear;
+          overflow-y: hidden;
+        }
+      }
+    }
+  }
+}

data/lib/assets/stylesheets/tao/ui/tree.scss

@@ -0,0 +1,126 @@
+@import 'tao/ui/globals';
+
+$tree-item-height: 2rem !default;
+$tree-item-font-size: 0.875rem !default;
+
+.tao-tree {
+
+  .tao-tree-item {
+    display: block;
+
+    .tao-tree-item-padding {
+      height: 100%;
+      display: flex;
+
+      .padding-item {
+        position: relative;
+        height: 100%;
+        width: 2rem;
+
+        &:before {
+          content: '';
+          display: block;
+          border-left: 1px solid $light-border-color;
+          position: absolute;
+          left: 0.625rem;
+          top: 0;
+          right: 0;
+          bottom: 0;
+        }
+
+        &:last-child:after {
+          content: '';
+          display: block;
+          border-bottom: 1px solid $light-border-color;
+          position: absolute;
+          left: 0.625rem;
+          top: 0;
+          right: 0.5rem;
+          bottom: 50%;
+        }
+      }
+    }
+
+    &:last-child > .tao-tree-item-content .tao-tree-item-padding .padding-item:last-child:before {
+      bottom: 50%;
+    }
+
+    & > .tao-tree-item-content {
+      display: flex;
+      align-items: center;
+      height: $tree-item-height;
+      line-height: $tree-item-height;
+      font-size: $tree-item-font-size;
+
+      .link-toggle-item {
+        display: block;
+        background: $white-color;
+        width: 1.375rem;
+        height: 1.375rem;
+        padding: 0.25rem;
+        transition: transform 200ms;
+        border: 1px solid $border-color;
+        border-radius: 50%;
+        margin: 0 0.75rem 0 0;
+        cursor: pointer;
+        visibility: hidden;
+
+        .icon {
+          display: block;
+          width: 0.75rem;
+          height: 0.75rem;
+          fill: $lighter-grey-color;
+        }
+
+        &:hover {
+          background: $grey-bg-color;
+
+          .icon {
+            fill: $grey-color;
+          }
+        }
+      }
+
+      tao-check-box {
+        margin: 0 0.75rem 0 0;
+      }
+    }
+
+    & > .tao-tree-list {
+      display: none;
+      transition: height 200ms;
+      overflow: hidden;
+
+      & > .tao-tree-loading {
+        display: flex;
+        align-items: center;
+        height: $tree-item-height;
+        line-height: $tree-item-height;
+        font-size: $tree-item-font-size;
+        color: $lighter-grey-color;
+
+        .icon {
+          margin: 0 0.75rem 0 0;
+        }
+      }
+    }
+
+    &[expandable] {
+      & > .tao-tree-item-content .link-toggle-item {
+        visibility: visible;
+      }
+    }
+
+    &[expanded] {
+      & > .tao-tree-item-content .link-toggle-item {
+        transform: rotate(90deg);
+      }
+
+      & > .tao-tree-list {
+        display: block;
+        height: auto;
+      }
+    }
+  }
+
+}

data/lib/tao_ui/action_view/helpers.rb

@@ -0,0 +1,23 @@
+module TaoUi
+  module ActionView
+    module Helpers
+
+      def tao_table_builder options = {}
+        TaoUi::Components::Table::TableBuilder.new self, options
+      end
+
+      def tao_table_head_builder options = {}
+        TaoUi::Components::Table::HeadBuilder.new self, options
+      end
+
+      def tao_table_body_builder options = {}
+        TaoUi::Components::Table::BodyBuilder.new self, options
+      end
+
+      def tao_table_row_builder options = {}
+        TaoUi::Components::Table::RowBuilder.new self, options
+      end
+
+    end
+  end
+end

data/lib/tao_ui/components.rb

@@ -1,4 +1,5 @@
 require 'tao_ui/components/icon_component'
+require 'tao_ui/components/table_component'
 require 'tao_ui/components/slide_box_component'
 require 'tao_ui/components/popover_component'
 require 'tao_ui/components/tooltip_component'
@@ -6,3 +7,5 @@ require 'tao_ui/components/confirm_popover_component'
 require 'tao_ui/components/dialog_component'
 require 'tao_ui/components/message_dialog_component'
 require 'tao_ui/components/confirm_dialog_component'
+require 'tao_ui/components/sortable_component'
+require 'tao_ui/components/tree_component'

data/lib/tao_ui/components/icon_component.rb

@@ -1,5 +1,3 @@
-require 'tao_on_rails/components/base'
-
 module TaoUi
   module Components
     class IconComponent < TaoOnRails::Components::Base

data/lib/tao_ui/components/slide_box_component.rb

@@ -1,5 +1,3 @@
-require 'tao_on_rails/components/base'
-
 module TaoUi
   module Components
     class SlideBoxComponent < TaoOnRails::Components::Base