Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Icon: support rtl {helpers} in icon names

Browse source 
Some arrows have to change their direction in an right-to-left layout. Based on the idea in css that start means left in ltr and right in rtl for now the icon method supports the {start} and {end} helpers that get turned into left and right depending on the directionality.
This commit is contained in:
Felix Niklas 2018-04-12 16:05:00 +02:00
parent cdf0dd9d11
commit d8faaebbc7
2 changed files with 21 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
app/assets/javascripts/app/lib/app_post/utils.coffee
View file

@ -829,6 +829,21 @@ class App.Utils
num
@icon: (name, className = '') ->
# rtl support
# ===========
#
# translates @Icon('arrow-{start}') to @Icon('arrow-left') on ltr and @Icon('arrow-right') on rtl
dictionary =
ltr:
start: 'left'
end: 'right'
rtl:
start: 'right'
end: 'left'
if name.indexOf('{') > 0 # only run through the dictionary when there is a {helper}
for key, value of dictionary[App.i18n.dir()]
name = name.replace("{#{key}}", value)
#
# reverse regex
# =============

12
app/assets/javascripts/app/views/generic/datepicker.jst.eco
View file

@ -6,9 +6,9 @@
<th colspan="7" class="datepicker-title"></th>
</tr>
<tr>
<th class="prev"><%- @Icon('arrow-left') %></th>
<th class="prev"><%- @Icon('arrow-{start}') %></th>
<th colspan="5" class="datepicker-switch"></th>
<th class="next"><%- @Icon('arrow-right') %></th>
<th class="next"><%- @Icon('arrow-{end}') %></th>
</tr>
</thead>
<tbody></tbody>
@ -29,9 +29,9 @@
<th colspan="7" class="datepicker-title"></th>
</tr>
<tr>
<th class="prev"><%- @Icon('arrow-left') %></th>
<th class="prev"><%- @Icon('arrow-{start}') %></th>
<th colspan="5" class="datepicker-switch"></th>
<th class="next"><%- @Icon('arrow-right') %></th>
<th class="next"><%- @Icon('arrow-{end}') %></th>
</tr>
</thead>
<tbody><tr><td colspan="7"></td></tr></tbody>
@ -52,9 +52,9 @@
<th colspan="7" class="datepicker-title"></th>
</tr>
<tr>
<th class="prev"><%- @Icon('arrow-left') %></th>
<th class="prev"><%- @Icon('arrow-{start}') %></th>
<th colspan="5" class="datepicker-switch"></th>
<th class="next"><%- @Icon('arrow-right') %></th>
<th class="next"><%- @Icon('arrow-{end}') %></th>
</tr>
</thead>
<tbody><tr><td colspan="7"></td></tr></tbody>