tao_ui 0.2.3 → 0.2.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 774dffff2f6c9311d1dc13a395ba1692f407f9a6
-  data.tar.gz: 81063c9187b1e3dfcc583ee7f508c995e29ea89b
+  metadata.gz: '09da3087edd93d1ba400dde3fc7717a546b4e201'
+  data.tar.gz: d35a7c16a1e6512ce4a2363a2256f58f4cab896b
 SHA512:
-  metadata.gz: e555610f157280eda838f8e0b11766b6e9e6a5b9127a9c162a365c17b59d5463e3d38ca60cd8e48fe1731def301a155589e696f315ba6f8e1f437b3f91e6c115
-  data.tar.gz: 36433bd6f0245693aed541d4e84a987b2714fd974c3290a54e1dca8ea423cd42f34c88e398de5efab50b0ff3f86cc170bcf6d723bda0b39a8fc21f82e9a2cd03
+  metadata.gz: 2c7ec7003d126d9620024ccf0c78dd174d6967141603db952780a4f5a64492ab494ccfc3683eb8f29f4ac2a3fc226b29a54ff0e3fa36ba34531dee65c4330ed2
+  data.tar.gz: bf7b2acc10963c59ac8808a10d9bab30d5a05b34cfa9a1e538cfb15252bc10a1ddf9d4276a9ac489442d825cb13eaf8dfa1a150ab6c7b5438543d3289b7cfe75

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

@@ -30,8 +30,7 @@ class Tao.Dialog.Element extends TaoComponent
     @off()
 
   _initSize: ->
-    size = parseFloat @size
-    if _.isNumber size
+    if _.isNumber(size = parseFloat @size)
       @jq.find('.tao-dialog-wrapper').width size
 
   _bind: ->
@@ -71,11 +70,13 @@ class Tao.Dialog.Element extends TaoComponent
   setContent: (content) ->
     @jq.find('.tao-dialog-content').empty()
       .append content
+    @
 
   remove: ->
     @trigger 'tao:beforeRemove'
     @jq.remove()
     @trigger 'tao:remove'
+    @
 
   beforeCache: ->
     if @autoDestroy

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

@@ -13,7 +13,11 @@ class Tao.Popover.Element extends TaoComponent
 
   @attribute 'triggerAction', default: 'click'
 
-  @attribute 'boundarySelector', 'direction', 'arrowAlign', 'arrowVerticalAlign'
+  @attribute 'boundarySelector', 'direction', 'size'
+
+  @attribute 'arrowAlign', default: 'center'
+
+  @attribute 'arrowVerticalAlign', default: 'middle'
 
   @attribute 'offset', type: 'number', default: 0
 
@@ -24,6 +28,7 @@ class Tao.Popover.Element extends TaoComponent
   _connected: ->
     @_initTarget()
     @_initTrigger()
+    @_initSize()
     @_activeChanged() if @active
 
   _initTarget: ->
@@ -49,6 +54,9 @@ class Tao.Popover.Element extends TaoComponent
       .on 'mouseleave.tao-popover', (e) =>
         @active = false
 
+  _initSize: ->
+    @jq.width(@size) if @size
+
   _activeChanged: ->
     if @active
       @refresh()
@@ -65,6 +73,7 @@ class Tao.Popover.Element extends TaoComponent
       target = $ e.target
       return if target.is(@target) or @jq.has(target).length or target.is(@)
       @active = false
+      null
 
   _disableAutoHide: ->
     $(document).off "mousedown.tao-popover-#{@taoId}"
@@ -88,9 +97,11 @@ class Tao.Popover.Element extends TaoComponent
     @jq.css
       top: @position.top
       left: @position.left
+    @
 
   toggleActive: ->
     @active = !@active
+    @
 
   beforeCache: ->
     if @autoDestroy
@@ -102,6 +113,7 @@ class Tao.Popover.Element extends TaoComponent
     @trigger 'tao:beforeRemove'
     @jq.remove()
     @trigger 'tao:remove'
+    @
 
   _disconnected: ->
     @triggerEl.off '.tao-popover'

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

@@ -7,7 +7,7 @@ class Tao.Popover.Position extends TaoModule
 
   @option 'arrowVerticalAlign', default: 'middle'
 
-  @option 'offset', default: 0
+  @option 'offset', type: 'number', default: 0
 
   ARROW_OFFSET: 16
 

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

@@ -4,7 +4,7 @@ class Tao.SlideBox.ElementBase extends TaoComponent
 
   @attribute 'active', type: 'boolean', observe: true
 
-  @attribute 'withCloseButton', 'autoHide', 'autoDestroy', type: 'boolean'
+  @attribute 'autoHide', 'autoDestroy', 'modal', 'withoutPadding', type: 'boolean'
 
   @attribute 'triggerSelector', 'triggerTraversal'
 
@@ -29,13 +29,17 @@ class Tao.SlideBox.ElementBase extends TaoComponent
 
   _initSize: ->
     sizeProperty = if @direction in ['btt', 'ttb'] then 'height' else 'width'
-    @jq[sizeProperty] if (size = parseFloat(@size)) < 0
-       $(window)[sizeProperty]() + size
+    size = if (size = parseFloat(@size)) < 0
+      "#{$(window)[sizeProperty]() + size}px"
     else
       @size
+    @jq.find('.slide-box-wrapper').css sizeProperty, size
 
   _bind: ->
-    @on 'click', '> .link-close', =>
+    @on 'click', (e) =>
+      @active = false if e.target == @
+
+    @on 'click', '.slide-box-wrapper > .link-close', =>
       @active = false
 
     if @triggerEl && @triggerEl.length > 0
@@ -80,6 +84,7 @@ class Tao.SlideBox.ElementBase extends TaoComponent
     @trigger 'tao:beforeRemove'
     @jq.remove()
     @trigger 'tao:remove'
+    @
 
   beforeCache: ->
     if @autoDestroy

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

@@ -2,6 +2,8 @@
 
 class Tao.SlideBox.Element extends Tao.SlideBox.ElementBase
 
+  @attribute 'withCloseButton', type: 'boolean'
+
   _autoHideEvent: 'mousedown'
 
 TaoComponent.register Tao.SlideBox.Element

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

@@ -2,14 +2,6 @@
 @import 'tao/ui/shared/slide_box';
 
 tao-slide-box {
-  & > .link-close {
-    left: 0.5rem;
-
-    &:active {
-      fill: $grey-color;
-    }
-  }
-
   .header {
     height: 3rem;
     background: $white-color;

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

@@ -1,4 +1,4 @@
-$button-font-size: 1.125rem !default;
+$button-font-size: 1rem !default;
 $button-line-height: 1.5rem !default;
 $button-padding-v: 0.625rem !default;
 $button-padding-h: 1.25rem !default;

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

@@ -20,7 +20,6 @@ tao-popover,
     border: 1px solid $border-color;
     border-radius: $border-radius-s;
     box-shadow: 0 3px 15px rgba(0,0,0,0.1);
-    white-space: nowrap;
   }
 
   .tao-popover-arrow {

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

@@ -41,7 +41,6 @@ pre {
   background-color: $grey-bg-color;
   overflow: auto;
   border-radius: $border-radius;
-  white-space: pre-wrap;
 
   code {
     padding: 0;
@@ -50,5 +49,6 @@ pre {
     background-color: transparent;
     border-radius: 0;
     word-wrap: normal;
+    white-space: inherit;
   }
 }

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

@@ -4,40 +4,43 @@ body.slide-box-active {
 }
 
 tao-slide-box {
-  display: none;
   position: fixed;
-  background: $white-color;
-  opacity: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   z-index: $z-index-float;
-  border: 0px solid $light-border-color;
-  transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
+  display: none;
   overflow: hidden;
 
-  & > .link-close {
-    display: none;
-    justify-content: center;
-    align-items: center;
-    width: 2rem;
-    height: 2rem;
-    position: absolute;
-    top: 0.5rem;
-    fill: $lighter-grey-color;
+  &[modal] {
+    background-color: rgba(0, 0, 0, 0);
+    transition: background-color 200ms ease-in-out;
+  }
 
-    &:hover {
-      fill: $grey-color;
-    }
+  &[modal][active] {
+    background-color: rgba(0, 0, 0, 0.55);
   }
 
-  &[with-close-button] > .link-close {
-    display: flex;
+  & > .slide-box-wrapper {
+    background: $white-color;
+    opacity: 0;
+    padding: 1.5rem;
+    border: 0px solid $light-border-color;
+    transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;
+    position: absolute;
+
+    .slide-box-content {
+      max-height: 100%;
+      overflow: auto;
+    }
   }
 
-  .slide-box-content {
-    max-height: 100%;
-    overflow: auto;
+  &[without-padding] > .slide-box-wrapper {
+    padding: 0;
   }
 
-  &[direction='rtl'] {
+  &[direction='rtl'] > .slide-box-wrapper {
     top: 0;
     right: 0;
     bottom: 0;
@@ -46,7 +49,7 @@ tao-slide-box {
     box-shadow: -2px 0 5px 0 rgba(0,0,0,0.05);
   }
 
-  &[direction='ltr'] {
+  &[direction='ltr'] > .slide-box-wrapper {
     top: 0;
     left: 0;
     bottom: 0;
@@ -55,7 +58,7 @@ tao-slide-box {
     box-shadow: 2px 0 5px 0 rgba(0,0,0,0.05);
   }
 
-  &[direction='ttb'] {
+  &[direction='ttb'] > .slide-box-wrapper {
     left: 0;
     top: 0;
     right: 0;
@@ -64,7 +67,7 @@ tao-slide-box {
     box-shadow: 0 2px 5px 0 rgba(0,0,0,0.05);
   }
 
-  &[direction='btt'] {
+  &[direction='btt'] > .slide-box-wrapper {
     left: 0;
     right: 0;
     bottom: 0;
@@ -73,7 +76,7 @@ tao-slide-box {
     box-shadow: 0 -2px 5px 0 rgba(0,0,0,0.05);
   }
 
-  &[active] {
+  &[active] > .slide-box-wrapper {
     opacity: 1;
     transform: translateX(0) translateY(0);
   }

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

@@ -2,15 +2,27 @@
 @import 'tao/ui/shared/slide_box';
 
 tao-slide-box {
-  & > .link-close {
+  & > .slide-box-wrapper > .link-close {
+    display: none;
+    justify-content: center;
+    align-items: center;
+    width: 2rem;
+    height: 2rem;
+    position: absolute;
+    top: 0.5rem;
     right: 0.5rem;
+    fill: $lighter-grey-color;
+
+    &:hover {
+      fill: $grey-color;
+    }
 
     &:hover {
       fill: $grey-color;
     }
   }
 
-  .slide-box-content {
-    padding: 1.875rem;
+  &[with-close-button] > .slide-box-wrapper > .link-close {
+    display: flex;
   }
 }

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

@@ -3,6 +3,8 @@ module Tao
     class IconsGenerator < Rails::Generators::NamedBase
       source_root File.expand_path('../templates', __FILE__)
 
+      class_option :paths, type: :array, default: ['app/assets/icons', 'lib/assets/icons'], desc: 'Find svg files in specified paths.'
+
       attr_reader :icons_html
 
       def create_icons_file
@@ -13,10 +15,9 @@ module Tao
       private
 
       def svg_files
-        Dir.glob([
-          File.expand_path('app/assets/icons/*.svg', destination_root),
-          File.expand_path('lib/assets/icons/*.svg', destination_root)
-        ]).uniq
+        Dir.glob(options[:paths].map { |p|
+          File.expand_path(File.join(p, '*.svg'), destination_root)
+        }).uniq
       end
 
       def symbol(path)

data/lib/tao_ui/components/slide_box_component.rb

@@ -16,6 +16,12 @@ module TaoUi
         :slide_box
       end
 
+      private
+
+      def default_options
+        {class: 'tao-slide-box'}
+      end
+
     end
   end
 end

data/lib/tao_ui/version.rb

@@ -1,3 +1,3 @@
 module TaoUi
-  VERSION = '0.2.3'
+  VERSION = '0.2.4'
 end

data/lib/views/components/tao_ui/components/_slide_box.html.erb

@@ -1,8 +1,12 @@
 <%= content_tag component.tag_name, component.html_options do %>
-  <div class="slide-box-content">
-    <%= yield %>
+  <div class="slide-box-wrapper">
+    <div class="slide-box-content">
+      <%= yield %>
+    </div>
+    <% unless request.variant.mobile? %>
+      <%= link_to 'javascript:;', class: 'link-close', title: component.t(:close) do %>
+        <%= tao_icon :close %>
+      <% end %>
+    <% end %>
   </div>
-  <%= link_to 'javascript:;', class: 'link-close', title: component.t(:close) do %>
-    <%= tao_icon :close %>
-  <% end %>
 <% end %>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: tao_ui
 version: !ruby/object:Gem::Version
-  version: 0.2.3
+  version: 0.2.4
 platform: ruby
 authors:
 - farthinker
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-06-15 00:00:00.000000000 Z
+date: 2017-06-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: tao_on_rails