tao_ui 0.2.5 → 0.2.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: bb8a02f1c7f7b6522ea02c956475b444076f4c22
-  data.tar.gz: e70c4aa00d59f75c309c6dffa99cd77c03822676
+  metadata.gz: 841fce6a55ee514e77c1ed90b33f6c61d24e45e3
+  data.tar.gz: 50243fe3e1cc627cc8aee3e790fb6ad5ff74f712
 SHA512:
-  metadata.gz: f1def1930ba3cc284b08eec3e707f647b33c4e3293951a3d1c43146871ba3e059cde031aef6216deb638dc99cd2f4a79350fef381829a278d89464429236392b
-  data.tar.gz: b6f1c33e518f9b645564ceffd4b5b5b784c1ec9b2bdc5ae8b75653ba70385be4731a895b01bbbc540612526152d5040466a945bc6b3d6ad7ddb50f6d21305a1f
+  metadata.gz: 64a759788b0e0926fb9aef4a0ffd76aa8ca556fbe750b6933369f7e5d735025df26dd0b54d2bdfe389b14d874af931388a856fac836c79d4de44956321a02ca0
+  data.tar.gz: 4feec975f323094c0d032a7a41a7592d4b55ce9dc1c06b8340acdfe087f86c21c3a8c73e6b995f125b6732810848c1aaeb0e188d4e3dffc0507c3401c5cc8c08

data/lib/assets/javascripts/tao/ui/dialog/element.coffee

@@ -51,12 +51,20 @@ class Tao.Dialog.Element extends TaoComponent
       @jq.show()
       @reflow()
     else
+      reset = =>
+        if @autoDestroy
+          @remove()
+        else
+          @jq.hide()
+
+      # in case the dialog is hidden too fast
       if @jq.is(':visible')
-        @one 'transitionend', =>
-          if @autoDestroy
-            @remove()
-          else
-            @jq.hide()
+        if @jq.css('opacity') * 1 == 0
+          reset()
+        else
+          @one 'transitionend', ->
+            reset()
+
     null
 
   _activeChanged: ->

data/lib/assets/javascripts/tao/ui/index.coffee

@@ -3,6 +3,7 @@
 #= require ./icons
 #= require ./slide_box
 #= require ./popover
+#= require ./tooltip
 #= require ./dialog
 
 window.Tao ||= {}

data/lib/assets/javascripts/tao/ui/popover/element.coffee

@@ -17,15 +17,9 @@ class Tao.Popover.Element extends TaoComponent
 
   @attribute 'boundarySelector', 'direction', 'size'
 
-  @attribute 'arrowAlign', default: 'center'
-
-  @attribute 'arrowVerticalAlign', default: 'middle'
-
   @attribute 'offset', type: 'number', default: 0
 
-  @attribute 'autoHide', type: 'boolean'
-
-  @attribute 'autoDestroy', type: 'boolean'
+  @attribute 'autoHide', 'autoDestroy', 'withArrow', 'disabled', type: 'boolean'
 
   _connected: ->
     @_initTarget()
@@ -52,18 +46,43 @@ class Tao.Popover.Element extends TaoComponent
     if @triggerAction == 'click'
       @triggerEl.on 'click.tao-popover', (e) =>
         @toggleActive()
+        null
     else if @triggerAction == 'hover'
       @triggerEl.on 'mouseenter.tao-popover', (e) =>
         @active = true
+        null
       .on 'mouseleave.tao-popover', (e) =>
         @active = false
+        null
 
   _initSize: ->
     @jq.width(@size) if @size
 
+  _beforeActiveChanged: (active) ->
+    return false if @disabled
+
+    if active
+      @jq.show()
+      @refresh()
+      @reflow()
+    else
+      reset = =>
+        if @autoDestroy
+          @remove()
+        else
+          @jq.hide()
+
+      # in case the popover is hidden too fast
+      if @jq.is(':visible')
+        if @jq.css('opacity') * 1 == 0
+          reset()
+        else
+          @one 'transitionend', ->
+            reset()
+    null
+
   _activeChanged: ->
     if @active
-      @refresh()
       @target.addClass 'tao-popover-active'
       @_enableAutoHide() if @autoHide
       @trigger 'tao:show'
@@ -71,7 +90,6 @@ class Tao.Popover.Element extends TaoComponent
       @target.removeClass 'tao-popover-active'
       @_disableAutoHide() if @autoHide
       @trigger 'tao:hide'
-      @jq.remove() if @autoDestroy
 
   _enableAutoHide: ->
     $(document).on "mousedown.tao-popover-#{@taoId}", (e) =>
@@ -96,8 +114,7 @@ class Tao.Popover.Element extends TaoComponent
       popover: @jq
       target: @target
       direction: @direction.split('-')
-      arrowAlign: @arrowAlign
-      arrowVerticalAlign: @arrowVerticalAlign
+      withArrow: @withArrow
       offset: @offset
 
     @jq.css
@@ -128,6 +145,7 @@ class Tao.Popover.Element extends TaoComponent
     if @autoDestroy
       @remove()
     else
+      @jq.hide()
       @active = false
 
   remove: ->

data/lib/assets/javascripts/tao/ui/popover/position.coffee

@@ -3,20 +3,18 @@ class Tao.Popover.Position extends TaoModule
 
   @option 'direction', 'popover', 'target'
 
-  @option 'arrowAlign', default: 'center'
-
-  @option 'arrowVerticalAlign', default: 'middle'
+  @option 'withArrow', default: false
 
   @option 'offset', type: 'number', default: 0
 
-  ARROW_OFFSET: 16
+  @property 'arrowOffset', default: 16
 
   _init: ->
     @top = 0
     @left = 0
+    @arrowOffset = 0 unless @withArrow
 
     @_setPosition()
-    @_setArrowAlign()
     @_setOffset()
 
   _setPosition: ->
@@ -26,9 +24,14 @@ class Tao.Popover.Position extends TaoModule
     popoverWidth  = @popover.outerWidth()
     popoverHeight = @popover.outerHeight()
     parentOffset = @popover.offsetParent().offset()
-    $arrow = @popover.find('.tao-popover-arrow')
-    arrowWidth = $arrow.outerWidth()
-    arrowHeight = $arrow.outerHeight()
+
+    if @withArrow
+      $arrow = @popover.find('.tao-popover-arrow')
+      arrowWidth = $arrow.outerWidth()
+      arrowHeight = $arrow.outerHeight()
+    else
+      arrowWidth = 8
+      arrowHeight = 8
 
     switch @direction[0]
       when 'left'
@@ -42,33 +45,18 @@ class Tao.Popover.Position extends TaoModule
 
     switch @direction[1]
       when 'top'
-        @top = targetOffset.top - popoverHeight + targetHeight / 2 + arrowHeight / 2 + @ARROW_OFFSET - parentOffset.top
+        @top = targetOffset.top - popoverHeight + targetHeight - parentOffset.top
       when 'bottom'
-        @top = targetOffset.top + targetHeight / 2 - arrowHeight / 2 - @ARROW_OFFSET - parentOffset.top
+        @top = targetOffset.top - parentOffset.top
       when 'left'
-        @left = targetOffset.left - popoverWidth + targetWidth / 2 + arrowWidth / 2 + @ARROW_OFFSET - parentOffset.left
+        @left = targetOffset.left - popoverWidth + targetWidth - parentOffset.left
       when 'right'
-        @left = targetOffset.left + targetWidth / 2 - arrowWidth / 2 - @ARROW_OFFSET - parentOffset.left
+        @left = targetOffset.left - parentOffset.left
       when 'center'
         @left = targetOffset.left + targetWidth / 2  - popoverWidth / 2 - parentOffset.left
       when 'middle'
         @top = targetOffset.top + targetHeight / 2  - popoverHeight / 2 - parentOffset.top
 
-  _setArrowAlign: ->
-    if /top|bottom/.test @direction[0]
-      switch @arrowAlign
-        when 'left'
-          @left -= @target.width() / 2
-        when 'right'
-          @left += @target.width() / 2
-
-    if /left|right/.test @direction[0]
-      switch @arrowVerticalAlign
-        when 'top'
-          @top -= @target.height() / 2
-        when 'bottom'
-          @top += @target.height() / 2
-
   _setOffset: ->
     return unless @offset
 

data/lib/assets/javascripts/tao/ui/shared/slide_box/element/base.coffee

@@ -51,12 +51,19 @@ class Tao.SlideBox.ElementBase extends TaoComponent
       @jq.show()
       @reflow()
     else
+      reset = =>
+        if @autoDestroy
+          @remove()
+        else
+          @jq.hide()
+
+      # in case the slide box is hidden too fast
       if @jq.is(':visible')
-        @one 'transitionend', =>
-          if @autoDestroy
-            @remove()
-          else
-            @jq.hide()
+        if @jq.css('opacity') * 1 == 0
+          reset()
+        else
+          @one 'transitionend', ->
+            reset()
     null
 
   _activeChanged: ->

data/lib/assets/javascripts/tao/ui/tooltip.coffee

@@ -0,0 +1,5 @@
+class Tao.Tooltip extends Tao.Popover.Element
+
+  @tag 'tao-tooltip'
+
+TaoComponent.register Tao.Tooltip

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

@@ -4,6 +4,7 @@
 a {
   &:hover {
     color: $link-hover-color;
+    fill: $link-hover-color;
   }
 
   &.warn {

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

@@ -6,4 +6,5 @@
 //= require ./tables
 //= require ./slide_box
 //= require ./popover
+//= require ./tooltip
 //= require ./dialog

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

@@ -2,15 +2,17 @@
 
 $arrowSize: 1rem;
 
-tao-popover,
 .tao-popover {
   display: none;
   position: absolute;
   left: -9999px;
   top: -9999px;
   z-index: $z-index-popover;
+  opacity: 0;
+  transition: opacity 200ms;
 
   &[active] {
+    opacity: 1;
     display: block;
   }
 
@@ -41,6 +43,7 @@ tao-popover,
   }
 
   .tao-popover-arrow {
+    display: none;
     position: absolute;
     width: $arrowSize;
     height: $arrowSize;
@@ -57,6 +60,10 @@ tao-popover,
     }
   }
 
+  &[with-arrow] .tao-popover-arrow {
+    display: block;
+  }
+
   &[direction='right-top'],
   &[direction='right-bottom'],
   &[direction='right-middle'] {

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

@@ -1,7 +1,7 @@
 @import 'tao/ui/globals';
 @import 'tao/ui/shared/slide_box';
 
-tao-slide-box {
+.tao-slide-box {
   & > .slide-box-wrapper > .link-close {
     display: none;
     justify-content: center;
@@ -25,4 +25,5 @@ tao-slide-box {
   &[with-close-button] > .slide-box-wrapper > .link-close {
     display: flex;
   }
+
 }

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

@@ -0,0 +1,147 @@
+@import 'tao/ui/globals';
+
+$arrowSize: 0.75rem;
+
+.tao-tooltip {
+  display: none;
+  position: absolute;
+  left: -9999px;
+  top: -9999px;
+  z-index: $z-index-popover;
+  opacity: 0;
+  transition: opacity 200ms;
+
+  &[active] {
+    opacity: 1;
+    display: block;
+  }
+
+  .tao-popover-content {
+    padding: 0.5rem 0.75rem;
+    background: $grey-color;
+    color: $white-color;
+    border-radius: $border-radius;
+    white-space: nowrap;
+    font-size: 0.875rem;
+  }
+
+  .tao-popover-arrow {
+    display: none;
+    position: absolute;
+    width: $arrowSize;
+    height: $arrowSize;
+
+    .arrow {
+      font-size: 0;
+      height: 0;
+      width: 0;
+      border-style: solid;
+      border-width: $arrowSize / 2;
+      border-color: $grey-color;
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+
+    .arrow-border,
+    .arrow-shadow {
+      display: none;
+    }
+  }
+
+  &[with-arrow] .tao-popover-arrow {
+    display: block;
+  }
+
+  &[direction='right-top'],
+  &[direction='right-bottom'],
+  &[direction='right-middle'] {
+    .tao-popover-arrow {
+      left: -$arrowSize;
+    }
+
+    .arrow-basic {
+      border-color: transparent $grey-color transparent transparent;
+    }
+  }
+
+  &[direction='left-top'],
+  &[direction='left-bottom'],
+  &[direction='left-middle'] {
+    .tao-popover-arrow {
+      right: -$arrowSize;
+    }
+
+    .arrow-basic {
+      border-color: transparent transparent transparent $grey-color;
+    }
+  }
+
+  &[direction='left-top'],
+  &[direction='right-top'] {
+    .tao-popover-arrow {
+      bottom: $arrowSize;
+    }
+  }
+
+  &[direction='left-bottom'],
+  &[direction='right-bottom'] {
+    .tao-popover-arrow {
+      top: $arrowSize;
+    }
+  }
+
+  &[direction='left-middle'],
+  &[direction='right-middle'] {
+    .tao-popover-arrow {
+      top: 50%;
+      margin-top: -$arrowSize / 2;
+    }
+  }
+
+  &[direction='top-left'],
+  &[direction='top-right'],
+  &[direction='top-center'] {
+    .tao-popover-arrow {
+      bottom: -$arrowSize;
+    }
+
+    .arrow-basic {
+      border-color: $grey-color transparent transparent transparent;
+    }
+  }
+
+  &[direction='bottom-left'],
+  &[direction='bottom-right'],
+  &[direction='bottom-center'] {
+    .tao-popover-arrow {
+      top: -$arrowSize;
+    }
+
+    .arrow-basic {
+      border-color: transparent transparent $grey-color transparent;
+    }
+  }
+
+  &[direction='top-left'],
+  &[direction='bottom-left'] {
+    .tao-popover-arrow {
+      right: $arrowSize;
+    }
+  }
+
+  &[direction='top-right'],
+  &[direction='bottom-right'] {
+    .tao-popover-arrow {
+      left: $arrowSize;
+    }
+  }
+
+  &[direction='top-center'],
+  &[direction='bottom-center'] {
+    .tao-popover-arrow {
+      left: 50%;
+      margin-left: -$arrowSize / 2;
+    }
+  }
+}

data/lib/generators/tao/icons/icons_generator.rb

@@ -5,6 +5,8 @@ module Tao
 
       class_option :paths, type: :array, default: ['app/assets/icons', 'lib/assets/icons'], desc: 'Find svg files in specified paths.'
 
+      class_option :remove_color, type: :boolean, default: false, desc: 'Remove all fill attributes in svg.'
+
       attr_reader :icons_html
 
       def create_icons_file
@@ -23,7 +25,14 @@ module Tao
       def symbol(path)
         name = File.basename(path, ".*").underscore().dasherize()
         document = Nokogiri::XML(File.read(path))
-        document.css('[id="Main"], [id="Main"] [fill], [fill="none"]').each {|n| n.delete 'fill' }
+
+        if options[:remove_color] && !name.include?('with-color')
+          document.css('[fill]').each {|n| n.delete 'fill' }
+        else
+          document.css('[id="Main"], [id="main"], [fill="none"]')
+            .each {|n| n.delete 'fill' }
+        end
+
         content = document.to_s
         content.gsub(/<?.+\?>/,'')
           .gsub(/<!.+?>/,'')

data/lib/tao_ui/components/popover_component.rb

@@ -9,7 +9,7 @@ module TaoUi
       private
 
       def default_options
-        {class: 'tao-popover', auto_hide: true}
+        {class: 'tao-popover', auto_hide: true, with_arrow: true}
       end
 
     end

data/lib/tao_ui/components/tooltip_component.rb

@@ -0,0 +1,21 @@
+module TaoUi
+  module Components
+    class TooltipComponent < TaoOnRails::Components::Base
+
+      def self.component_name
+        :tooltip
+      end
+
+      def self.template_name
+        @template_name ||= :popover
+      end
+
+      private
+
+      def default_options
+        {class: 'tao-tooltip', auto_hide: true, with_arrow: true, trigger_action: :hover}
+      end
+
+    end
+  end
+end

data/lib/tao_ui/components.rb

@@ -1,6 +1,7 @@
 require 'tao_ui/components/icon_component'
 require 'tao_ui/components/slide_box_component'
 require 'tao_ui/components/popover_component'
+require 'tao_ui/components/tooltip_component'
 require 'tao_ui/components/confirm_popover_component'
 require 'tao_ui/components/dialog_component'
 require 'tao_ui/components/message_dialog_component'

data/lib/tao_ui/version.rb

@@ -1,3 +1,3 @@
 module TaoUi
-  VERSION = '0.2.5'
+  VERSION = '0.2.6'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: tao_ui
 version: !ruby/object:Gem::Version
-  version: 0.2.5
+  version: 0.2.6
 platform: ruby
 authors:
 - farthinker
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-06-22 00:00:00.000000000 Z
+date: 2017-06-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: tao_on_rails
@@ -131,6 +131,7 @@ files:
 - lib/assets/javascripts/tao/ui/shared/ujs.coffee
 - lib/assets/javascripts/tao/ui/slide_box/element.coffee
 - lib/assets/javascripts/tao/ui/slide_box/index.coffee
+- lib/assets/javascripts/tao/ui/tooltip.coffee
 - lib/assets/stylesheets/tao/ui/_custom.scss
 - lib/assets/stylesheets/tao/ui/_globals.scss
 - lib/assets/stylesheets/tao/ui/_mixins.scss
@@ -168,6 +169,7 @@ files:
 - lib/assets/stylesheets/tao/ui/shared/variables/_tables.scss
 - lib/assets/stylesheets/tao/ui/slide_box.scss
 - lib/assets/stylesheets/tao/ui/tables.scss
+- lib/assets/stylesheets/tao/ui/tooltip.scss
 - lib/assets/stylesheets/tao/ui/variables/_base.scss
 - lib/generators/tao/icons/USAGE
 - lib/generators/tao/icons/icons_generator.rb
@@ -181,6 +183,7 @@ files:
 - lib/tao_ui/components/message_dialog_component.rb
 - lib/tao_ui/components/popover_component.rb
 - lib/tao_ui/components/slide_box_component.rb
+- lib/tao_ui/components/tooltip_component.rb
 - lib/tao_ui/engine.rb
 - lib/tao_ui/version.rb
 - lib/views/components/tao_ui/components/_confirm_dialog.html.erb