rewrite dropdown-selected

app/assets/javascripts/app/controllers/ticket_zoom/higlighter.coffee

@@ -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')
+    @$('.js-highlightColor .is-selected').removeClass('is-selected')
-    $(e.currentTarget).find('.visibility-change').addClass('is-active')
+    $(e.currentTarget).find('.js-selectedIcon').addClass('is-selected')
 
     @activeColorIndex = $(e.currentTarget).attr('data-key')
     @setColor()

app/assets/javascripts/app/views/layout_ref/merge_customer_view.jst.eco

@@ -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>
 

app/assets/javascripts/app/views/layout_ref/ticket_zoom.jst.eco

@@ -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 %>">
+                <span class="dropdown-selectedSpacer<%= ' is-selected' if i is @activeColorIndex %>">
-                  <svg class="icon-checkmark" data-visible="active"><use xlink:href="#icon-checkmark" fill="white" /></svg>
+                  <%- @Icon('checkmark') %>
                 </span>
               </a>
             <% end %>

app/assets/javascripts/app/views/ticket_zoom/highlighter.jst.eco

@@ -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 %>">
+        <span class="dropdown-selectedSpacer js-selectedIcon<%= ' is-selected' if i is @activeColorIndex %>">
-          <svg class="icon-checkmark" data-visible="active"><use xlink:href="#icon-checkmark" fill="white" /></svg>
+          <%- @Icon('checkmark') %>
         </span>
       </a>
     <% end %>

app/assets/stylesheets/zammad.scss

@@ -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 {