tao_ui 0.2.4 → 0.2.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: '09da3087edd93d1ba400dde3fc7717a546b4e201'
-  data.tar.gz: d35a7c16a1e6512ce4a2363a2256f58f4cab896b
+  metadata.gz: bb8a02f1c7f7b6522ea02c956475b444076f4c22
+  data.tar.gz: e70c4aa00d59f75c309c6dffa99cd77c03822676
 SHA512:
-  metadata.gz: 2c7ec7003d126d9620024ccf0c78dd174d6967141603db952780a4f5a64492ab494ccfc3683eb8f29f4ac2a3fc226b29a54ff0e3fa36ba34531dee65c4330ed2
-  data.tar.gz: bf7b2acc10963c59ac8808a10d9bab30d5a05b34cfa9a1e538cfb15252bc10a1ddf9d4276a9ac489442d825cb13eaf8dfa1a150ab6c7b5438543d3289b7cfe75
+  metadata.gz: f1def1930ba3cc284b08eec3e707f647b33c4e3293951a3d1c43146871ba3e059cde031aef6216deb638dc99cd2f4a79350fef381829a278d89464429236392b
+  data.tar.gz: b6f1c33e518f9b645564ceffd4b5b5b784c1ec9b2bdc5ae8b75653ba70385be4731a895b01bbbc540612526152d5040466a945bc6b3d6ad7ddb50f6d21305a1f

data/config/locales/tao_ui/components/dialog/en.yml

@@ -3,3 +3,5 @@ en:
     components:
       dialog:
         close: Close
+        confirm: OK
+        cancel: Cancel

data/config/locales/tao_ui/components/dialog/zh-CN.yml

@@ -3,3 +3,5 @@ zh-CN:
     components:
       dialog:
         close: 关闭
+        confirm: 确定
+        cancel: 取消

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

@@ -0,0 +1,13 @@
+class Tao.Dialog.Confirm extends Tao.Dialog.Message
+
+  @tag 'tao-confirm-dialog'
+
+  _bind: ->
+    super
+
+    @on 'click', '.button-cancel', (e) =>
+      @trigger 'tao:cancel'
+      @active = false
+      null
+
+TaoComponent.register Tao.Dialog.Confirm

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

@@ -1,4 +1,6 @@
 #= require_self
 #= require ./element
+#= require ./message
+#= require ./confirm
 
 window.TaoDialog = Tao.Dialog = {}

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

@@ -0,0 +1,13 @@
+class Tao.Dialog.Message extends Tao.Dialog.Element
+
+  @tag 'tao-message-dialog'
+
+  _bind: ->
+    super
+
+    @on 'click', '.button-confirm', (e) =>
+      @trigger 'tao:confirm'
+      @active = false
+      null
+
+TaoComponent.register Tao.Dialog.Message

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

@@ -0,0 +1,23 @@
+class Tao.Popover.Confirm extends Tao.Popover.Element
+
+  @tag 'tao-confirm-popover'
+
+  _connected: ->
+    super
+
+    @on 'click', '.button-confirm', (e) =>
+      @trigger 'tao:confirm'
+      @active = false
+      null
+
+    @on 'click', '.button-cancel', (e) =>
+      @trigger 'tao:cancel'
+      @active = false
+      null
+
+  setContent: (content) ->
+    @jq.find('.tao-popover-content .message').empty()
+      .append content
+    @
+
+TaoComponent.register Tao.Popover.Confirm

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

@@ -9,7 +9,9 @@ class Tao.Popover.Element extends TaoComponent
 
   @attribute 'active', type: 'boolean', observe: true
 
-  @attribute 'targetSelector', 'targetTraversal', 'triggerSelector', 'triggerTraversal'
+  @attribute 'targetSelector', 'targetTraversal'
+
+  @attribute 'triggerSelector', 'triggerTraversal'
 
   @attribute 'triggerAction', default: 'click'
 
@@ -45,6 +47,8 @@ class Tao.Popover.Element extends TaoComponent
     else
       @target
 
+    return unless @triggerEl && @triggerEl.length > 0
+
     if @triggerAction == 'click'
       @triggerEl.on 'click.tao-popover', (e) =>
         @toggleActive()
@@ -60,9 +64,11 @@ class Tao.Popover.Element extends TaoComponent
   _activeChanged: ->
     if @active
       @refresh()
+      @target.addClass 'tao-popover-active'
       @_enableAutoHide() if @autoHide
       @trigger 'tao:show'
     else
+      @target.removeClass 'tao-popover-active'
       @_disableAutoHide() if @autoHide
       @trigger 'tao:hide'
       @jq.remove() if @autoDestroy
@@ -99,6 +105,21 @@ class Tao.Popover.Element extends TaoComponent
       left: @position.left
     @
 
+  resetAttributes: ->
+    @active = false
+    @triggerEl?.off '.tao-popover'
+    @target = null
+    @triggerEl = null
+
+    for attr in _.toArray(@attributes)
+      unless attr.name in ['class', 'tao-id']
+        @jq.removeAttr attr.name
+
+  setContent: (content) ->
+    @jq.find('.tao-popover-content').empty()
+      .append content
+    @
+
   toggleActive: ->
     @active = !@active
     @
@@ -111,12 +132,13 @@ class Tao.Popover.Element extends TaoComponent
 
   remove: ->
     @trigger 'tao:beforeRemove'
+    @target.removeClass 'tao-popover-active'
     @jq.remove()
     @trigger 'tao:remove'
     @
 
   _disconnected: ->
-    @triggerEl.off '.tao-popover'
+    @triggerEl?.off '.tao-popover'
     $(document).off ".tao-popover-#{@taoId}"
 
 TaoComponent.register Tao.Popover.Element

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

@@ -1,5 +1,6 @@
 #= require_self
 #= require ./element
+#= require ./confirm
 #= require ./create
 
 window.TaoPopover = Tao.Popover = {}

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

@@ -16,7 +16,7 @@ body.tao-dialog-active {
 
   &[modal] {
     background-color: rgba(0, 0, 0, 0);
-    transition: background-color 200ms ease-in-out;
+    transition: background-color 200ms;
   }
 
   &[modal][active] {
@@ -35,9 +35,9 @@ body.tao-dialog-active {
     margin: 0 auto;
     border-radius: 0 0 $border-radius-s $border-radius-s;
     background-color: $white-color;
-    box-shadow: 0 0 5px rgba(0,0,0,0.2);
+    box-shadow: 0 0 4px 4px rgba(0,0,0,0.1);
     transform: translate(0, -30%);
-    transition: transform .3s ease-in-out, opacity .3s ease-in-out, width .2s ease-in-out;
+    transition: transform .3s, opacity .3s, width .2s;
     opacity: 0;
     padding: 1rem 2rem;
 
@@ -48,20 +48,33 @@ body.tao-dialog-active {
       .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;
-        }
+    .tao-dialog-buttons,
+    .tao-dialog-content .buttons,
+    .tao-dialog-content .form-buttons {
+      margin-left: 0;
+      margin-bottom: 1rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .button, a {
+        margin: 0 0.75rem;
       }
     }
+
+    .tao-dialog-buttons {
+      margin: 1.5rem 0 0 0;
+    }
+  }
+
+  &.tao-confirm-dialog,
+  &.tao-message-dialog {
+    .tao-dialog-wrapper {
+      width: 32.5rem;
+      padding: 1.5rem 2rem;
+    }
   }
 
   &[size='l'] .tao-dialog-wrapper {

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

@@ -22,6 +22,24 @@ tao-popover,
     box-shadow: 0 3px 15px rgba(0,0,0,0.1);
   }
 
+  &.tao-confirm-popover .tao-popover-content {
+    font-size: 0.875rem;
+    text-align: center;
+    white-space: nowrap;
+    padding: 1rem 1.5rem;
+  }
+
+  .tao-popover-buttons {
+    margin-top: 1rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .button, a {
+      margin: 0 0.5rem;
+    }
+  }
+
   .tao-popover-arrow {
     position: absolute;
     width: $arrowSize;

data/lib/tao_ui/components/confirm_dialog_component.rb

@@ -0,0 +1,24 @@
+module TaoUi
+  module Components
+    class ConfirmDialogComponent < MessageDialogComponent
+
+      attr_reader :cancel_text
+
+      def initialize view, options
+        super view, options
+        @cancel_text = @options[:cancel_text] || I18n.t('tao_ui.components.dialog.cancel')
+      end
+
+      def self.component_name
+        :confirm_dialog
+      end
+
+      private
+
+      def default_options
+        {class: 'tao-dialog tao-confirm-dialog', with_close_button: false}
+      end
+
+    end
+  end
+end

data/lib/tao_ui/components/confirm_popover_component.rb

@@ -0,0 +1,25 @@
+module TaoUi
+  module Components
+    class ConfirmPopoverComponent < PopoverComponent
+
+      attr_reader :confirm_text, :cancel_text
+
+      def initialize view, options
+        super view, options
+        @confirm_text = @options[:confirm_text] || I18n.t('tao_ui.components.dialog.confirm')
+        @cancel_text = @options[:cancel_text] || I18n.t('tao_ui.components.dialog.cancel')
+      end
+
+      def self.component_name
+        :confirm_popover
+      end
+
+      private
+
+      def default_options
+        merge_options super, {class: 'tao-confirm-popover'}
+      end
+
+    end
+  end
+end

data/lib/tao_ui/components/dialog_component.rb

@@ -3,7 +3,7 @@ module TaoUi
     class DialogComponent < TaoOnRails::Components::Base
 
       def initialize view, options
-        super
+        super view, options
 
         unless @options[:with_close_button].in? [true, false]
           @options[:with_close_button] = true

data/lib/tao_ui/components/message_dialog_component.rb

@@ -0,0 +1,25 @@
+module TaoUi
+  module Components
+    class MessageDialogComponent < DialogComponent
+
+      attr_reader :confirm_text
+
+      def initialize view, options
+        super view, options
+
+        @confirm_text = @options[:confirm_text] || I18n.t('tao_ui.components.dialog.confirm')
+      end
+
+      def self.component_name
+        :message_dialog
+      end
+
+      private
+
+      def default_options
+        {class: 'tao-dialog tao-message-dialog', with_close_button: false}
+      end
+
+    end
+  end
+end

data/lib/tao_ui/components/popover_component.rb

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

data/lib/tao_ui/components/slide_box_component.rb

@@ -5,7 +5,7 @@ module TaoUi
     class SlideBoxComponent < TaoOnRails::Components::Base
 
       def initialize view, options
-        super
+        super view, options
 
         unless @options[:with_close_button].in? [true, false]
           @options[:with_close_button] = true

data/lib/tao_ui/components.rb

@@ -1,4 +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/confirm_popover_component'
 require 'tao_ui/components/dialog_component'
+require 'tao_ui/components/message_dialog_component'
+require 'tao_ui/components/confirm_dialog_component'

data/lib/tao_ui/version.rb

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

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

@@ -0,0 +1,11 @@
+<%= content_tag component.tag_name, component.html_options do %>
+  <div class="tao-dialog-wrapper">
+    <div class="tao-dialog-content">
+      <%= yield if block_given? %>
+    </div>
+    <div class="tao-dialog-buttons">
+      <button class="button button-primary button-confirm"><%= component.confirm_text %></button>
+      <button class="button button-cancel"><%= component.cancel_text %></button>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,16 @@
+<%= content_tag component.tag_name, component.html_options do %>
+  <div class="tao-popover-content">
+    <div class="message">
+      <%= yield if block_given? %>
+    </div>
+    <div class="tao-popover-buttons">
+      <button class="button button-small button-primary button-confirm"><%= component.confirm_text %></button>
+      <button class="button button-small button-cancel"><%= component.cancel_text %></button>
+    </div>
+  </div>
+  <div class="tao-popover-arrow">
+    <i class="arrow arrow-shadow"></i>
+    <i class="arrow arrow-border"></i>
+    <i class="arrow arrow-basic"></i>
+  </div>
+<% end %>

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

@@ -1,7 +1,7 @@
 <%= content_tag component.tag_name, component.html_options do %>
   <div class="tao-dialog-wrapper">
     <div class="tao-dialog-content">
-      <%= yield %>
+      <%= yield if block_given? %>
     </div>
     <%= link_to 'javascripts:;', class: 'link-close', title: component.t(:close) do %>
       <%= tao_icon :close %>

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

@@ -0,0 +1,10 @@
+<%= content_tag component.tag_name, component.html_options do %>
+  <div class="tao-dialog-wrapper">
+    <div class="tao-dialog-content">
+      <%= yield if block_given? %>
+    </div>
+    <div class="tao-dialog-buttons">
+      <button class="button button-primary button-confirm"><%= component.confirm_text %></button>
+    </div>
+  </div>
+<% end %>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: tao_ui
 version: !ruby/object:Gem::Version
-  version: 0.2.4
+  version: 0.2.5
 platform: ruby
 authors:
 - farthinker
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-06-21 00:00:00.000000000 Z
+date: 2017-06-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: tao_on_rails
@@ -111,14 +111,17 @@ files:
 - config/locales/tao_ui/components/slide_box/zh-CN.yml
 - lib/assets/icons/close.svg
 - lib/assets/icons/loading.svg
+- lib/assets/javascripts/tao/ui/dialog/confirm.coffee
 - lib/assets/javascripts/tao/ui/dialog/element.coffee
 - lib/assets/javascripts/tao/ui/dialog/index.coffee
+- lib/assets/javascripts/tao/ui/dialog/message.coffee
 - lib/assets/javascripts/tao/ui/icons/base.coffee
 - lib/assets/javascripts/tao/ui/icons/index.coffee
 - lib/assets/javascripts/tao/ui/index.coffee
 - lib/assets/javascripts/tao/ui/mobile/index.coffee
 - lib/assets/javascripts/tao/ui/mobile/slide_box/element.coffee
 - lib/assets/javascripts/tao/ui/mobile/slide_box/index.coffee
+- lib/assets/javascripts/tao/ui/popover/confirm.coffee
 - lib/assets/javascripts/tao/ui/popover/create.coffee
 - lib/assets/javascripts/tao/ui/popover/direction.coffee
 - lib/assets/javascripts/tao/ui/popover/element.coffee
@@ -171,13 +174,19 @@ files:
 - lib/generators/tao/icons/templates/icons.coffee.erb
 - lib/tao_ui.rb
 - lib/tao_ui/components.rb
+- lib/tao_ui/components/confirm_dialog_component.rb
+- lib/tao_ui/components/confirm_popover_component.rb
 - lib/tao_ui/components/dialog_component.rb
 - lib/tao_ui/components/icon_component.rb
+- 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/engine.rb
 - lib/tao_ui/version.rb
+- lib/views/components/tao_ui/components/_confirm_dialog.html.erb
+- lib/views/components/tao_ui/components/_confirm_popover.html.erb
 - lib/views/components/tao_ui/components/_dialog.html.erb
+- lib/views/components/tao_ui/components/_message_dialog.html.erb
 - lib/views/components/tao_ui/components/_popover.html.erb
 - lib/views/components/tao_ui/components/_slide_box.html.erb
 - vendor/assets/stylesheets/normalize.css