tao_ui 0.2.4 → 0.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/config/locales/tao_ui/components/dialog/en.yml +2 -0
- data/config/locales/tao_ui/components/dialog/zh-CN.yml +2 -0
- data/lib/assets/javascripts/tao/ui/dialog/confirm.coffee +13 -0
- data/lib/assets/javascripts/tao/ui/dialog/index.coffee +2 -0
- data/lib/assets/javascripts/tao/ui/dialog/message.coffee +13 -0
- data/lib/assets/javascripts/tao/ui/popover/confirm.coffee +23 -0
- data/lib/assets/javascripts/tao/ui/popover/element.coffee +24 -2
- data/lib/assets/javascripts/tao/ui/popover/index.coffee +1 -0
- data/lib/assets/stylesheets/tao/ui/dialog.scss +27 -14
- data/lib/assets/stylesheets/tao/ui/popover.scss +18 -0
- data/lib/tao_ui/components/confirm_dialog_component.rb +24 -0
- data/lib/tao_ui/components/confirm_popover_component.rb +25 -0
- data/lib/tao_ui/components/dialog_component.rb +1 -1
- data/lib/tao_ui/components/message_dialog_component.rb +25 -0
- data/lib/tao_ui/components/popover_component.rb +1 -1
- data/lib/tao_ui/components/slide_box_component.rb +1 -1
- data/lib/tao_ui/components.rb +3 -0
- data/lib/tao_ui/version.rb +1 -1
- data/lib/views/components/tao_ui/components/_confirm_dialog.html.erb +11 -0
- data/lib/views/components/tao_ui/components/_confirm_popover.html.erb +16 -0
- data/lib/views/components/tao_ui/components/_dialog.html.erb +1 -1
- data/lib/views/components/tao_ui/components/_message_dialog.html.erb +10 -0
- metadata +11 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: bb8a02f1c7f7b6522ea02c956475b444076f4c22
|
|
4
|
+
data.tar.gz: e70c4aa00d59f75c309c6dffa99cd77c03822676
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: f1def1930ba3cc284b08eec3e707f647b33c4e3293951a3d1c43146871ba3e059cde031aef6216deb638dc99cd2f4a79350fef381829a278d89464429236392b
|
|
7
|
+
data.tar.gz: b6f1c33e518f9b645564ceffd4b5b5b784c1ec9b2bdc5ae8b75653ba70385be4731a895b01bbbc540612526152d5040466a945bc6b3d6ad7ddb50f6d21305a1f
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
class Tao.Popover.Confirm extends Tao.Popover.Element
|
|
2
|
+
|
|
3
|
+
@tag 'tao-confirm-popover'
|
|
4
|
+
|
|
5
|
+
_connected: ->
|
|
6
|
+
super
|
|
7
|
+
|
|
8
|
+
@on 'click', '.button-confirm', (e) =>
|
|
9
|
+
@trigger 'tao:confirm'
|
|
10
|
+
@active = false
|
|
11
|
+
null
|
|
12
|
+
|
|
13
|
+
@on 'click', '.button-cancel', (e) =>
|
|
14
|
+
@trigger 'tao:cancel'
|
|
15
|
+
@active = false
|
|
16
|
+
null
|
|
17
|
+
|
|
18
|
+
setContent: (content) ->
|
|
19
|
+
@jq.find('.tao-popover-content .message').empty()
|
|
20
|
+
.append content
|
|
21
|
+
@
|
|
22
|
+
|
|
23
|
+
TaoComponent.register Tao.Popover.Confirm
|
|
@@ -9,7 +9,9 @@ class Tao.Popover.Element extends TaoComponent
|
|
|
9
9
|
|
|
10
10
|
@attribute 'active', type: 'boolean', observe: true
|
|
11
11
|
|
|
12
|
-
@attribute 'targetSelector', 'targetTraversal'
|
|
12
|
+
@attribute 'targetSelector', 'targetTraversal'
|
|
13
|
+
|
|
14
|
+
@attribute 'triggerSelector', 'triggerTraversal'
|
|
13
15
|
|
|
14
16
|
@attribute 'triggerAction', default: 'click'
|
|
15
17
|
|
|
@@ -45,6 +47,8 @@ class Tao.Popover.Element extends TaoComponent
|
|
|
45
47
|
else
|
|
46
48
|
@target
|
|
47
49
|
|
|
50
|
+
return unless @triggerEl && @triggerEl.length > 0
|
|
51
|
+
|
|
48
52
|
if @triggerAction == 'click'
|
|
49
53
|
@triggerEl.on 'click.tao-popover', (e) =>
|
|
50
54
|
@toggleActive()
|
|
@@ -60,9 +64,11 @@ class Tao.Popover.Element extends TaoComponent
|
|
|
60
64
|
_activeChanged: ->
|
|
61
65
|
if @active
|
|
62
66
|
@refresh()
|
|
67
|
+
@target.addClass 'tao-popover-active'
|
|
63
68
|
@_enableAutoHide() if @autoHide
|
|
64
69
|
@trigger 'tao:show'
|
|
65
70
|
else
|
|
71
|
+
@target.removeClass 'tao-popover-active'
|
|
66
72
|
@_disableAutoHide() if @autoHide
|
|
67
73
|
@trigger 'tao:hide'
|
|
68
74
|
@jq.remove() if @autoDestroy
|
|
@@ -99,6 +105,21 @@ class Tao.Popover.Element extends TaoComponent
|
|
|
99
105
|
left: @position.left
|
|
100
106
|
@
|
|
101
107
|
|
|
108
|
+
resetAttributes: ->
|
|
109
|
+
@active = false
|
|
110
|
+
@triggerEl?.off '.tao-popover'
|
|
111
|
+
@target = null
|
|
112
|
+
@triggerEl = null
|
|
113
|
+
|
|
114
|
+
for attr in _.toArray(@attributes)
|
|
115
|
+
unless attr.name in ['class', 'tao-id']
|
|
116
|
+
@jq.removeAttr attr.name
|
|
117
|
+
|
|
118
|
+
setContent: (content) ->
|
|
119
|
+
@jq.find('.tao-popover-content').empty()
|
|
120
|
+
.append content
|
|
121
|
+
@
|
|
122
|
+
|
|
102
123
|
toggleActive: ->
|
|
103
124
|
@active = !@active
|
|
104
125
|
@
|
|
@@ -111,12 +132,13 @@ class Tao.Popover.Element extends TaoComponent
|
|
|
111
132
|
|
|
112
133
|
remove: ->
|
|
113
134
|
@trigger 'tao:beforeRemove'
|
|
135
|
+
@target.removeClass 'tao-popover-active'
|
|
114
136
|
@jq.remove()
|
|
115
137
|
@trigger 'tao:remove'
|
|
116
138
|
@
|
|
117
139
|
|
|
118
140
|
_disconnected: ->
|
|
119
|
-
@triggerEl
|
|
141
|
+
@triggerEl?.off '.tao-popover'
|
|
120
142
|
$(document).off ".tao-popover-#{@taoId}"
|
|
121
143
|
|
|
122
144
|
TaoComponent.register Tao.Popover.Element
|
|
@@ -16,7 +16,7 @@ body.tao-dialog-active {
|
|
|
16
16
|
|
|
17
17
|
&[modal] {
|
|
18
18
|
background-color: rgba(0, 0, 0, 0);
|
|
19
|
-
transition: background-color 200ms
|
|
19
|
+
transition: background-color 200ms;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
&[modal][active] {
|
|
@@ -35,9 +35,9 @@ body.tao-dialog-active {
|
|
|
35
35
|
margin: 0 auto;
|
|
36
36
|
border-radius: 0 0 $border-radius-s $border-radius-s;
|
|
37
37
|
background-color: $white-color;
|
|
38
|
-
box-shadow: 0 0
|
|
38
|
+
box-shadow: 0 0 4px 4px rgba(0,0,0,0.1);
|
|
39
39
|
transform: translate(0, -30%);
|
|
40
|
-
transition: transform .3s
|
|
40
|
+
transition: transform .3s, opacity .3s, width .2s;
|
|
41
41
|
opacity: 0;
|
|
42
42
|
padding: 1rem 2rem;
|
|
43
43
|
|
|
@@ -48,20 +48,33 @@ body.tao-dialog-active {
|
|
|
48
48
|
.title:first-child {
|
|
49
49
|
margin-bottom: 2rem;
|
|
50
50
|
}
|
|
51
|
+
}
|
|
51
52
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
53
|
+
.tao-dialog-buttons,
|
|
54
|
+
.tao-dialog-content .buttons,
|
|
55
|
+
.tao-dialog-content .form-buttons {
|
|
56
|
+
margin-left: 0;
|
|
57
|
+
margin-bottom: 1rem;
|
|
58
|
+
display: flex;
|
|
59
|
+
justify-content: center;
|
|
60
|
+
align-items: center;
|
|
61
|
+
|
|
62
|
+
.button, a {
|
|
63
|
+
margin: 0 0.75rem;
|
|
63
64
|
}
|
|
64
65
|
}
|
|
66
|
+
|
|
67
|
+
.tao-dialog-buttons {
|
|
68
|
+
margin: 1.5rem 0 0 0;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
&.tao-confirm-dialog,
|
|
73
|
+
&.tao-message-dialog {
|
|
74
|
+
.tao-dialog-wrapper {
|
|
75
|
+
width: 32.5rem;
|
|
76
|
+
padding: 1.5rem 2rem;
|
|
77
|
+
}
|
|
65
78
|
}
|
|
66
79
|
|
|
67
80
|
&[size='l'] .tao-dialog-wrapper {
|
|
@@ -22,6 +22,24 @@ tao-popover,
|
|
|
22
22
|
box-shadow: 0 3px 15px rgba(0,0,0,0.1);
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
+
&.tao-confirm-popover .tao-popover-content {
|
|
26
|
+
font-size: 0.875rem;
|
|
27
|
+
text-align: center;
|
|
28
|
+
white-space: nowrap;
|
|
29
|
+
padding: 1rem 1.5rem;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.tao-popover-buttons {
|
|
33
|
+
margin-top: 1rem;
|
|
34
|
+
display: flex;
|
|
35
|
+
justify-content: center;
|
|
36
|
+
align-items: center;
|
|
37
|
+
|
|
38
|
+
.button, a {
|
|
39
|
+
margin: 0 0.5rem;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
25
43
|
.tao-popover-arrow {
|
|
26
44
|
position: absolute;
|
|
27
45
|
width: $arrowSize;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
module TaoUi
|
|
2
|
+
module Components
|
|
3
|
+
class ConfirmDialogComponent < MessageDialogComponent
|
|
4
|
+
|
|
5
|
+
attr_reader :cancel_text
|
|
6
|
+
|
|
7
|
+
def initialize view, options
|
|
8
|
+
super view, options
|
|
9
|
+
@cancel_text = @options[:cancel_text] || I18n.t('tao_ui.components.dialog.cancel')
|
|
10
|
+
end
|
|
11
|
+
|
|
12
|
+
def self.component_name
|
|
13
|
+
:confirm_dialog
|
|
14
|
+
end
|
|
15
|
+
|
|
16
|
+
private
|
|
17
|
+
|
|
18
|
+
def default_options
|
|
19
|
+
{class: 'tao-dialog tao-confirm-dialog', with_close_button: false}
|
|
20
|
+
end
|
|
21
|
+
|
|
22
|
+
end
|
|
23
|
+
end
|
|
24
|
+
end
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
module TaoUi
|
|
2
|
+
module Components
|
|
3
|
+
class ConfirmPopoverComponent < PopoverComponent
|
|
4
|
+
|
|
5
|
+
attr_reader :confirm_text, :cancel_text
|
|
6
|
+
|
|
7
|
+
def initialize view, options
|
|
8
|
+
super view, options
|
|
9
|
+
@confirm_text = @options[:confirm_text] || I18n.t('tao_ui.components.dialog.confirm')
|
|
10
|
+
@cancel_text = @options[:cancel_text] || I18n.t('tao_ui.components.dialog.cancel')
|
|
11
|
+
end
|
|
12
|
+
|
|
13
|
+
def self.component_name
|
|
14
|
+
:confirm_popover
|
|
15
|
+
end
|
|
16
|
+
|
|
17
|
+
private
|
|
18
|
+
|
|
19
|
+
def default_options
|
|
20
|
+
merge_options super, {class: 'tao-confirm-popover'}
|
|
21
|
+
end
|
|
22
|
+
|
|
23
|
+
end
|
|
24
|
+
end
|
|
25
|
+
end
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
module TaoUi
|
|
2
|
+
module Components
|
|
3
|
+
class MessageDialogComponent < DialogComponent
|
|
4
|
+
|
|
5
|
+
attr_reader :confirm_text
|
|
6
|
+
|
|
7
|
+
def initialize view, options
|
|
8
|
+
super view, options
|
|
9
|
+
|
|
10
|
+
@confirm_text = @options[:confirm_text] || I18n.t('tao_ui.components.dialog.confirm')
|
|
11
|
+
end
|
|
12
|
+
|
|
13
|
+
def self.component_name
|
|
14
|
+
:message_dialog
|
|
15
|
+
end
|
|
16
|
+
|
|
17
|
+
private
|
|
18
|
+
|
|
19
|
+
def default_options
|
|
20
|
+
{class: 'tao-dialog tao-message-dialog', with_close_button: false}
|
|
21
|
+
end
|
|
22
|
+
|
|
23
|
+
end
|
|
24
|
+
end
|
|
25
|
+
end
|
data/lib/tao_ui/components.rb
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
require 'tao_ui/components/icon_component'
|
|
2
2
|
require 'tao_ui/components/slide_box_component'
|
|
3
3
|
require 'tao_ui/components/popover_component'
|
|
4
|
+
require 'tao_ui/components/confirm_popover_component'
|
|
4
5
|
require 'tao_ui/components/dialog_component'
|
|
6
|
+
require 'tao_ui/components/message_dialog_component'
|
|
7
|
+
require 'tao_ui/components/confirm_dialog_component'
|
data/lib/tao_ui/version.rb
CHANGED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<%= content_tag component.tag_name, component.html_options do %>
|
|
2
|
+
<div class="tao-dialog-wrapper">
|
|
3
|
+
<div class="tao-dialog-content">
|
|
4
|
+
<%= yield if block_given? %>
|
|
5
|
+
</div>
|
|
6
|
+
<div class="tao-dialog-buttons">
|
|
7
|
+
<button class="button button-primary button-confirm"><%= component.confirm_text %></button>
|
|
8
|
+
<button class="button button-cancel"><%= component.cancel_text %></button>
|
|
9
|
+
</div>
|
|
10
|
+
</div>
|
|
11
|
+
<% end %>
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<%= content_tag component.tag_name, component.html_options do %>
|
|
2
|
+
<div class="tao-popover-content">
|
|
3
|
+
<div class="message">
|
|
4
|
+
<%= yield if block_given? %>
|
|
5
|
+
</div>
|
|
6
|
+
<div class="tao-popover-buttons">
|
|
7
|
+
<button class="button button-small button-primary button-confirm"><%= component.confirm_text %></button>
|
|
8
|
+
<button class="button button-small button-cancel"><%= component.cancel_text %></button>
|
|
9
|
+
</div>
|
|
10
|
+
</div>
|
|
11
|
+
<div class="tao-popover-arrow">
|
|
12
|
+
<i class="arrow arrow-shadow"></i>
|
|
13
|
+
<i class="arrow arrow-border"></i>
|
|
14
|
+
<i class="arrow arrow-basic"></i>
|
|
15
|
+
</div>
|
|
16
|
+
<% end %>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<%= content_tag component.tag_name, component.html_options do %>
|
|
2
2
|
<div class="tao-dialog-wrapper">
|
|
3
3
|
<div class="tao-dialog-content">
|
|
4
|
-
<%= yield %>
|
|
4
|
+
<%= yield if block_given? %>
|
|
5
5
|
</div>
|
|
6
6
|
<%= link_to 'javascripts:;', class: 'link-close', title: component.t(:close) do %>
|
|
7
7
|
<%= tao_icon :close %>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
<%= content_tag component.tag_name, component.html_options do %>
|
|
2
|
+
<div class="tao-dialog-wrapper">
|
|
3
|
+
<div class="tao-dialog-content">
|
|
4
|
+
<%= yield if block_given? %>
|
|
5
|
+
</div>
|
|
6
|
+
<div class="tao-dialog-buttons">
|
|
7
|
+
<button class="button button-primary button-confirm"><%= component.confirm_text %></button>
|
|
8
|
+
</div>
|
|
9
|
+
</div>
|
|
10
|
+
<% end %>
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: tao_ui
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.2.
|
|
4
|
+
version: 0.2.5
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- farthinker
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2017-06-
|
|
11
|
+
date: 2017-06-22 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: tao_on_rails
|
|
@@ -111,14 +111,17 @@ files:
|
|
|
111
111
|
- config/locales/tao_ui/components/slide_box/zh-CN.yml
|
|
112
112
|
- lib/assets/icons/close.svg
|
|
113
113
|
- lib/assets/icons/loading.svg
|
|
114
|
+
- lib/assets/javascripts/tao/ui/dialog/confirm.coffee
|
|
114
115
|
- lib/assets/javascripts/tao/ui/dialog/element.coffee
|
|
115
116
|
- lib/assets/javascripts/tao/ui/dialog/index.coffee
|
|
117
|
+
- lib/assets/javascripts/tao/ui/dialog/message.coffee
|
|
116
118
|
- lib/assets/javascripts/tao/ui/icons/base.coffee
|
|
117
119
|
- lib/assets/javascripts/tao/ui/icons/index.coffee
|
|
118
120
|
- lib/assets/javascripts/tao/ui/index.coffee
|
|
119
121
|
- lib/assets/javascripts/tao/ui/mobile/index.coffee
|
|
120
122
|
- lib/assets/javascripts/tao/ui/mobile/slide_box/element.coffee
|
|
121
123
|
- lib/assets/javascripts/tao/ui/mobile/slide_box/index.coffee
|
|
124
|
+
- lib/assets/javascripts/tao/ui/popover/confirm.coffee
|
|
122
125
|
- lib/assets/javascripts/tao/ui/popover/create.coffee
|
|
123
126
|
- lib/assets/javascripts/tao/ui/popover/direction.coffee
|
|
124
127
|
- lib/assets/javascripts/tao/ui/popover/element.coffee
|
|
@@ -171,13 +174,19 @@ files:
|
|
|
171
174
|
- lib/generators/tao/icons/templates/icons.coffee.erb
|
|
172
175
|
- lib/tao_ui.rb
|
|
173
176
|
- lib/tao_ui/components.rb
|
|
177
|
+
- lib/tao_ui/components/confirm_dialog_component.rb
|
|
178
|
+
- lib/tao_ui/components/confirm_popover_component.rb
|
|
174
179
|
- lib/tao_ui/components/dialog_component.rb
|
|
175
180
|
- lib/tao_ui/components/icon_component.rb
|
|
181
|
+
- lib/tao_ui/components/message_dialog_component.rb
|
|
176
182
|
- lib/tao_ui/components/popover_component.rb
|
|
177
183
|
- lib/tao_ui/components/slide_box_component.rb
|
|
178
184
|
- lib/tao_ui/engine.rb
|
|
179
185
|
- lib/tao_ui/version.rb
|
|
186
|
+
- lib/views/components/tao_ui/components/_confirm_dialog.html.erb
|
|
187
|
+
- lib/views/components/tao_ui/components/_confirm_popover.html.erb
|
|
180
188
|
- lib/views/components/tao_ui/components/_dialog.html.erb
|
|
189
|
+
- lib/views/components/tao_ui/components/_message_dialog.html.erb
|
|
181
190
|
- lib/views/components/tao_ui/components/_popover.html.erb
|
|
182
191
|
- lib/views/components/tao_ui/components/_slide_box.html.erb
|
|
183
192
|
- vendor/assets/stylesheets/normalize.css
|