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

rewrite dropdown-selected

Browse source
This commit is contained in:
Felix Niklas 2015-10-19 15:22:32 +02:00
parent 53e3a1f379
commit fcc6999425
5 changed files with 17 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/javascripts/app/controllers/ticket_zoom/higlighter.coffee
View file

@ -165,8 +165,8 @@ class App.TicketZoomHighlighter extends App.Controller
#@articles.attr('data-highlightcolor', @colors[@activeColorIndex].name)
pickColor: (e) =>
@$('.js-highlightColor .visibility-change.is-active').removeClass('is-active')
$(e.currentTarget).find('.visibility-change').addClass('is-active')
@$('.js-highlightColor .is-selected').removeClass('is-selected')
$(e.currentTarget).find('.js-selectedIcon').addClass('is-selected')
@activeColorIndex = $(e.currentTarget).attr('data-key')
@setColor()

44
app/assets/javascripts/app/views/layout_ref/merge_customer_view.jst.eco
View file

@ -13,28 +13,6 @@
<div class="dropdown dropdown--actions">
<div class="btn btn--action btn--split--last btn--slim centered" data-toggle="dropdown"></div>
<ul class="dropdown-menu dropdown-menu-right">
<li>
<a class="js-highlightColor" data-key="0" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #f7e7b2"></span></span> Yellow <span class="dropdown-activeSpacer visibility-change is-active"></span></a>
</li>
<li>
<a class="js-highlightColor" data-key="1" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #bce7b6"></span></span> Green <span class="dropdown-activeSpacer visibility-change"></span></a>
</li>
<li>
<a class="js-highlightColor" data-key="2" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #b3ddf9"></span></span> Blue <span class="dropdown-activeSpacer visibility-change"></span></a>
</li>
<li>
<a class="js-highlightColor" data-key="3" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #fea9c5"></span></span> Pink <span class="dropdown-activeSpacer visibility-change"></span></a>
</li>
<li>
<a class="js-highlightColor" data-key="4" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #eac5ee"></span></span> Purple <span class="dropdown-activeSpacer visibility-change"></span></a>
</li>
</ul>
</div>
</div>
@ -49,28 +27,6 @@
<div class="dropdown dropdown--actions">
<div class="btn btn--action btn--split--last btn--slim centered" data-toggle="dropdown"></div>
<ul class="dropdown-menu dropdown-menu-right">
<li>
<a class="js-highlightColor" data-key="0" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #f7e7b2"></span></span> Yellow <span class="dropdown-activeSpacer visibility-change is-active"></span></a>
</li>
<li>
<a class="js-highlightColor" data-key="1" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #bce7b6"></span></span> Green <span class="dropdown-activeSpacer visibility-change"></span></a>
</li>
<li>
<a class="js-highlightColor" data-key="2" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #b3ddf9"></span></span> Blue <span class="dropdown-activeSpacer visibility-change"></span></a>
</li>
<li>
<a class="js-highlightColor" data-key="3" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #fea9c5"></span></span> Pink <span class="dropdown-activeSpacer visibility-change"></span></a>
</li>
<li>
<a class="js-highlightColor" data-key="4" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #eac5ee"></span></span> Purple <span class="dropdown-activeSpacer visibility-change"></span></a>
</li>
</ul>
</div>
</div>

4
app/assets/javascripts/app/views/layout_ref/ticket_zoom.jst.eco
View file

@ -18,8 +18,8 @@
<span class="color-swatch icon" style="background: <%= entry.color %>"></span>
</span>
<%- @Ti(entry.name) %>
<span class="dropdown-activeSpacer visibility-change<%= ' is-active' if i is @activeColorIndex %>">
<svg class="icon-checkmark" data-visible="active"><use xlink:href="#icon-checkmark" fill="white" /></svg>
<span class="dropdown-selectedSpacer<%= ' is-selected' if i is @activeColorIndex %>">
<%- @Icon('checkmark') %>
</span>
</a>
<% end %>

4
app/assets/javascripts/app/views/ticket_zoom/highlighter.jst.eco
View file

@ -13,8 +13,8 @@
<span class="color-swatch icon" style="background: <%= entry.color %>"></span>
</span>
<%- @Ti(entry.name) %>
<span class="dropdown-activeSpacer visibility-change<%= ' is-active' if i is @activeColorIndex %>">
<svg class="icon-checkmark" data-visible="active"><use xlink:href="#icon-checkmark" fill="white" /></svg>
<span class="dropdown-selectedSpacer js-selectedIcon<%= ' is-selected' if i is @activeColorIndex %>">
<%- @Icon('checkmark') %>
</span>
</a>
<% end %>

13
app/assets/stylesheets/zammad.scss
View file

@ -5032,7 +5032,7 @@ footer {
}
.dropdown-iconSpacer,
.dropdown-activeSpacer {
.dropdown-selectedSpacer {
display: flex;
align-items: center;
}
@ -5041,10 +5041,19 @@ footer {
width: 25px;
}
.dropdown-activeSpacer {
.dropdown-selectedSpacer {
width: 34px;
margin-left: auto;
justify-content: flex-end;
opacity: 0;
.icon {
fill: white;
}
&.is-selected {
opacity: 1;
}
}
a {