tao_ui 0.2.2 → 0.2.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 300a2729406c1d92157678719538766a5f7b7cc5
-  data.tar.gz: 99088de88f430922d6dfc49f4c95344b02707015
+  metadata.gz: 774dffff2f6c9311d1dc13a395ba1692f407f9a6
+  data.tar.gz: 81063c9187b1e3dfcc583ee7f508c995e29ea89b
 SHA512:
-  metadata.gz: decfcf6c271b1ac07452210eb336d946996229eac7791e3e2c480c8faffc4d0e2e58e82c6174123a9b548182458632ea8b20b420ecf22f87df0f9038cd58275a
-  data.tar.gz: df673b7b715030331a7e120cb0aeb2a2469a8f290037e93038938191c4277569dc7a322cee2fb748c423745615a08966beda9b3d5884d0a0ce12ade7e602224a
+  metadata.gz: e555610f157280eda838f8e0b11766b6e9e6a5b9127a9c162a365c17b59d5463e3d38ca60cd8e48fe1731def301a155589e696f315ba6f8e1f437b3f91e6c115
+  data.tar.gz: 36433bd6f0245693aed541d4e84a987b2714fd974c3290a54e1dca8ea423cd42f34c88e398de5efab50b0ff3f86cc170bcf6d723bda0b39a8fc21f82e9a2cd03

data/config/autoprefixer.yml

@@ -0,0 +1,7 @@
+browsers:
+  - 'last 5 Chrome versions'
+  - 'last 5 Firefox versions'
+  - 'last 5 Edge versions'
+  - 'last 3 Safari versions'
+  - 'last 5 iOS versions'
+  - 'last 5 Android versions'

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

@@ -4,7 +4,9 @@ class Tao.Dialog.Element extends TaoComponent
 
   @attribute 'active', type: 'boolean', observe: true
 
-  @attribute 'modal', 'withCloseButton', 'autoDestroy', type: 'boolean'
+  @attribute 'modal', 'withCloseButton', 'autoDestroy', 'autoActivate', type: 'boolean'
+
+  @attribute 'closeSelector', default: '.remove-dialog'
 
   @attribute 'triggerSelector', 'triggerTraversal', 'size'
 
@@ -14,18 +16,29 @@ class Tao.Dialog.Element extends TaoComponent
     else if @triggerSelector
       $ @triggerSelector
 
+    @_initSize()
     @_bind()
-    @_activeChanged() if @active
+
+    if @autoActivate
+      @reflow()
+      @active = true
+    else if @active
+      @_activeChanged()
 
   _disconnected: ->
     @triggerEl?.off ".tao-slide-box-#{@taoId}"
     @off()
 
+  _initSize: ->
+    size = parseFloat @size
+    if _.isNumber size
+      @jq.find('.tao-dialog-wrapper').width size
+
   _bind: ->
     @on 'click', (e) =>
       @active = false if e.target == @
 
-    @on 'click', '.tao-dialog-wrapper > .link-close', =>
+    @on 'click', ".tao-dialog-wrapper > .link-close, #{@closeSelector}", =>
       @active = false
 
     if @triggerEl && @triggerEl.length > 0
@@ -37,25 +50,38 @@ class Tao.Dialog.Element extends TaoComponent
       @jq.find('.tao-dialog-content').css
         maxHeight: $(window).height() - 40
       @jq.show()
-      @_reflow()
+      @reflow()
     else
-      @one 'transitionend', =>
-        if @autoDestroy
-          @jq.remove()
-        else
-          @jq.hide()
+      if @jq.is(':visible')
+        @one 'transitionend', =>
+          if @autoDestroy
+            @remove()
+          else
+            @jq.hide()
     null
 
   _activeChanged: ->
     if @active
       $('body').addClass('dialog-active')
-      @trigger 'show'
+      @trigger 'tao:show'
     else
       $('body').removeClass('dialog-active')
-      @trigger 'hide'
+      @trigger 'tao:hide'
 
   setContent: (content) ->
     @jq.find('.tao-dialog-content').empty()
       .append content
 
+  remove: ->
+    @trigger 'tao:beforeRemove'
+    @jq.remove()
+    @trigger 'tao:remove'
+
+  beforeCache: ->
+    if @autoDestroy
+      @remove()
+    else
+      @jq.hide()
+      active = false
+
 TaoComponent.register Tao.Dialog.Element

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

@@ -53,10 +53,10 @@ class Tao.Popover.Element extends TaoComponent
     if @active
       @refresh()
       @_enableAutoHide() if @autoHide
-      @trigger 'show'
+      @trigger 'tao:show'
     else
       @_disableAutoHide() if @autoHide
-      @trigger 'hide'
+      @trigger 'tao:hide'
       @jq.remove() if @autoDestroy
 
   _enableAutoHide: ->
@@ -92,6 +92,17 @@ class Tao.Popover.Element extends TaoComponent
   toggleActive: ->
     @active = !@active
 
+  beforeCache: ->
+    if @autoDestroy
+      @remove()
+    else
+      @active = false
+
+  remove: ->
+    @trigger 'tao:beforeRemove'
+    @jq.remove()
+    @trigger 'tao:remove'
+
   _disconnected: ->
     @triggerEl.off '.tao-popover'
     $(document).off ".tao-popover-#{@taoId}"

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

@@ -45,13 +45,14 @@ class Tao.SlideBox.ElementBase extends TaoComponent
   _beforeActiveChanged: (active) ->
     if active
       @jq.show()
-      @_reflow()
+      @reflow()
     else
-      @one 'transitionend', =>
-        if @autoDestroy
-          @jq.remove()
-        else
-          @jq.hide()
+      if @jq.is(':visible')
+        @one 'transitionend', =>
+          if @autoDestroy
+            @remove()
+          else
+            @jq.hide()
     null
 
   _activeChanged: ->
@@ -59,10 +60,10 @@ class Tao.SlideBox.ElementBase extends TaoComponent
     if @active
       @_bindAutoHideEvent() if @autoHide
       $('body').addClass('slide-box-active')
-      @trigger 'show'
+      @trigger 'tao:show'
     else
       $('body').removeClass('slide-box-active')
-      @trigger 'hide'
+      @trigger 'tao:hide'
 
   _autoHideEvent: ''
 
@@ -74,3 +75,15 @@ class Tao.SlideBox.ElementBase extends TaoComponent
       return if e.target == @ || $.contains(@, e.target) || @triggerEl?.is(e.target)
       @active = false
       @_unbindAutoHideEvent()
+
+  remove: ->
+    @trigger 'tao:beforeRemove'
+    @jq.remove()
+    @trigger 'tao:remove'
+
+  beforeCache: ->
+    if @autoDestroy
+      @remove()
+    else
+      @jq.hide()
+      active = false

data/lib/assets/javascripts/tao/ui/shared/ujs.coffee

@@ -1,8 +1,10 @@
 # hack ujs for adding loading icon on disabled buttons/links
 
 prependLoadingIcon = (element) ->
-  $(element).addClass('text-with-icon')
-    .prepend Tao.iconTag('loading', class: 'spin')
+  $element = $ element
+  if $element.is('button') && $element.data('loading')
+    $element.addClass('text-with-icon')
+      .prepend Tao.iconTag('loading', class: 'spin')
 
 # jquery-ujs
 if $.rails?

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

@@ -43,6 +43,24 @@ body.tao-dialog-active {
 
     .tao-dialog-content {
       overflow-y: auto;
+
+      h3:first-child,
+      .title:first-child {
+        margin-bottom: 2rem;
+      }
+
+      .buttons,
+      .form-buttons {
+        margin-left: 0;
+        margin-bottom: 1rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .button, a {
+          margin: 0 0.75rem;
+        }
+      }
     }
   }
 
@@ -69,6 +87,11 @@ body.tao-dialog-active {
     &:hover {
       fill: $grey-color;
     }
+
+    .icon {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
   }
 
   &[with-close-button] .tao-dialog-wrapper > .link-close {

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

@@ -1,3 +1,3 @@
 @import 'tao/ui/mobile/variables/base';
-@import 'tao/ui/shared/variables/buttons';
+@import 'tao/ui/mobile/variables/buttons';
 @import 'tao/ui/shared/variables/tables';

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

@@ -0,0 +1,7 @@
+$button-font-size: 1.125rem !default;
+$button-line-height: 1.5rem !default;
+$button-padding-v: 0.625rem !default;
+$button-padding-h: 1.25rem !default;
+$button-padding: $button-padding-v $button-padding-h !default;
+
+@import 'tao/ui/shared/variables/buttons';

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

@@ -76,7 +76,7 @@ h1, h2, h3, h4, h5, h6,
   margin-top: 1.5em;
   margin-bottom: 1em;
   line-height: $default-line-height;
-  color: $black-color;
+  color: $text-color;
 
   &:first-child {
     margin-top: 0;

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

@@ -1,10 +1,16 @@
-$button-font-size: $font-size !default;
+$button-color: $green-color !default;
+$button-hover-color: #66cc33 !default;
+$button-active-color: #22AA11 !default;
+$button-warn-color: $red-color !default;
+$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: $button-padding-v $button-padding-h !default;
 
-$small-button-font-size: $font-size-xs !default;
+$small-button-font-size: 0.75rem !default;
 $small-button-line-height: 1.5 !default;
 $small-button-padding-v: 0.25em !default;
 $small-button-padding-h: 0.875em !default;
@@ -13,18 +19,18 @@ $small-button-padding: $small-button-padding-v $small-button-padding-h !default;
 $default-button-colors: (
   normal: (
     bg: $white-color,
-    text: $ui-color,
+    text: $button-color,
     border: $border-color
   ),
   hover: (
     bg: $white-color,
-    text: #66cc33,
-    border: #66cc33
+    text: $button-hover-color,
+    border: $button-hover-color
   ),
   active: (
     bg: $white-color,
-    text: #22AA11,
-    border: #22AA11
+    text: $button-active-color,
+    border: $button-active-color
   ),
   disable: (
     bg: $white-color,
@@ -35,19 +41,19 @@ $default-button-colors: (
 
 $primary-button-colors: (
   normal: (
-    bg: $ui-color,
+    bg: $button-color,
     text: $white-color,
-    border: $ui-color
+    border: $button-color
   ),
   hover: (
-    bg: #66cc33,
+    bg: $button-hover-color,
     text: $white-color,
-    border: #66cc33
+    border: $button-hover-color
   ),
   active: (
-    bg: #22AA11,
+    bg: $button-active-color,
     text: $white-color,
-    border: #22AA11
+    border: $button-active-color
   ),
   disable: (
     bg: $border-color,
@@ -59,18 +65,18 @@ $primary-button-colors: (
 $warning-button-colors: map-merge($default-button-colors, (
   normal: (
     bg: $white-color,
-    text: $red-color,
-    border: $red-color
+    text: $button-warn-color,
+    border: $button-warn-color
   ),
   hover: (
-    bg: $red-color,
+    bg: $button-warn-color,
     text: $white-color,
-    border: $red-color
+    border: $button-warn-color
   ),
   active: (
-    bg: #EE6633,
+    bg: $button-warn-active-color,
     text: $white-color,
-    border: #EE6633
+    border: $button-warn-active-color
   )
 )) !default;
 

data/lib/tao_ui/engine.rb

@@ -1,3 +1,4 @@
+require 'autoprefixer-rails'
 require 'tao_on_rails'
 require 'tao_ui/components'
 

data/lib/tao_ui/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: tao_ui
 version: !ruby/object:Gem::Version
-  version: 0.2.2
+  version: 0.2.3
 platform: ruby
 authors:
 - farthinker
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-06-10 00:00:00.000000000 Z
+date: 2017-06-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: tao_on_rails
@@ -24,6 +24,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 0.9.0
+- !ruby/object:Gem::Dependency
+  name: autoprefixer-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 7.1.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 7.1.1
 - !ruby/object:Gem::Dependency
   name: sqlite3
   requirement: !ruby/object:Gem::Requirement
@@ -90,12 +104,13 @@ files:
 - LICENSE
 - README.md
 - Rakefile
+- config/autoprefixer.yml
 - config/locales/tao_ui/components/dialog/en.yml
 - config/locales/tao_ui/components/dialog/zh-CN.yml
 - config/locales/tao_ui/components/slide_box/en.yml
 - config/locales/tao_ui/components/slide_box/zh-CN.yml
-- lib/assets/icons/Loading.svg
 - lib/assets/icons/close.svg
+- lib/assets/icons/loading.svg
 - lib/assets/javascripts/tao/ui/dialog/element.coffee
 - lib/assets/javascripts/tao/ui/dialog/index.coffee
 - lib/assets/javascripts/tao/ui/icons/base.coffee
@@ -135,6 +150,7 @@ files:
 - lib/assets/stylesheets/tao/ui/mobile/slide_box.scss
 - lib/assets/stylesheets/tao/ui/mobile/tables.scss
 - lib/assets/stylesheets/tao/ui/mobile/variables/_base.scss
+- lib/assets/stylesheets/tao/ui/mobile/variables/_buttons.scss
 - lib/assets/stylesheets/tao/ui/popover.scss
 - lib/assets/stylesheets/tao/ui/shared/_basic.scss
 - lib/assets/stylesheets/tao/ui/shared/_buttons.scss