update highlight layoutref

app/assets/javascripts/app/controllers/layout_ref.js.coffee

@@ -793,6 +793,7 @@ App.Config.set( 'layout_ref/error', errorRef, 'Routes' )
 class highlightRef extends App.ControllerContent
   elements:
     '.article-text': 'articles'
+    '.js-highlight-icon': 'highlightIcon'
 
   events:
     'click .js-highlight': 'toggleHighlight'
@@ -871,7 +872,7 @@ class highlightRef extends App.ControllerContent
 
   toggleHighlight: (e) =>
     if @isActive
-      $(e.currentTarget).removeClass('active')
+      @highlightIcon.css('fill', '')
       @isActive = false
       @articles.off('mouseup', @onMouseUp)
       @articles.removeAttr('data-highlightcolor')
@@ -883,8 +884,8 @@ class highlightRef extends App.ControllerContent
       if !selection.isCollapsed
         @toggleHighlightAtSelection $(selection.anchorNode).closest @articles.selector
       else
-        # toggle ui
-        $(e.currentTarget).addClass('active')
+        # show color
+        @highlightIcon.css('fill', @colors[@activeColorIndex].color)
 
         # activate selection background
         @articles.attr('data-highlightcolor', @colors[@activeColorIndex].name)
@@ -893,9 +894,13 @@ class highlightRef extends App.ControllerContent
         @articles.on('mouseup', @onMouseUp) #future: touchend
 
   pickColor: (e) =>
-    @$('.js-highlightColor .visibility-change.active').removeClass('active')
-    $(e.currentTarget).find('.visibility-change').addClass('active')
+    @$('.js-highlightColor .visibility-change.is-active').removeClass('is-active')
+    $(e.currentTarget).find('.visibility-change').addClass('is-active')
     @activeColorIndex =  $(e.currentTarget).attr('data-key')
+
+    if @isActive
+      @highlightIcon.css('fill', @colors[@activeColorIndex].color)
+
     @setColor() 
 
   onMouseUp: (e) =>

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

@@ -2,11 +2,11 @@
 
   <div class="ticketZoom">
     <div class="ticketZoom-controls">
-      <div class="btn btn--action btn--split--first js-highlight centered">
-        <svg class="marker-icon"><use xlink:href="#icon-marker" /></svg>
+      <div class="btn btn--action btn--split--first js-highlight">
+        <svg class="icon icon-marker js-highlight-icon"><use xlink:href="#icon-marker" /></svg>
       </div>
       <div class="dropdown dropdown--actions">
-        <div class="btn btn--action btn--split--last btn--slim centered" id="highlight" data-toggle="dropdown" aria-expanded="true">
+        <div class="btn btn--action btn--split--last btn--slim" id="highlight" data-toggle="dropdown" aria-expanded="true">
           <svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down" /></svg>
         </div>
         <ul class="dropdown-menu dropdown-menu-right" role="menu">
@@ -17,8 +17,8 @@
                 <span class="color-swatch icon" style="background: <%= entry.color %>"></span>
               </span>
               <%= entry.name %>
-              <span class="dropdown-activeSpacer visibility-change<%= ' active' if i is @activeColorIndex %>">
-                <span class="white checkmark icon" data-visible="active"></span>
+              <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>
             </a>
           <% end %>

app/assets/stylesheets/zammad.css.scss

@@ -415,8 +415,7 @@ span[data-tooltip]:hover:before {
   Interactive Visibility Change Classes:
   
     <div class="visibility-change">
-      <div class="icon marker active" data-visible="active"></div>
-      <div class="icon marker" data-visible="hover"></div>
+      <svg class="icon-marker" data-visible="active"><use xlink:href="#icon-marker" /></svg>
     </div>
     
     Important: HTML Order active > hover > normal
@@ -428,7 +427,7 @@ span[data-tooltip]:hover:before {
     display: none;
   }
 
-  &.active [data-visible=active] {
+  &.is-active [data-visible=active] {
     display: block;
     
     & ~ [data-visible=normal] {
@@ -2743,9 +2742,8 @@ footer {
   align-items: center;
 }
 
-.marker-icon {
-  fill: black;
-  opacity: .39;
+.icon-marker {
+  fill: hsl(0,0%,61%);
   width: 17px;
   height: 19px;
 }
@@ -4924,24 +4922,19 @@ label + .wizard-buttonList {
   }
 }
 
-[data-highlightcolor=Yellow]::selection {      background: #f7e7b2; }
-[data-highlightcolor=Yellow]::-moz-selection { background: #f7e7b2; }
+[data-highlightcolor=Yellow]::selection { background: #f7e7b2; }
 .highlight-Yellow { background: #f7e7b2; }
 
-[data-highlightcolor=Green]::selection {      background: #bce7b6; }
-[data-highlightcolor=Green]::-moz-selection { background: #bce7b6; }
+[data-highlightcolor=Green]::selection { background: #bce7b6; }
 .highlight-Green { background: #bce7b6; }
 
-[data-highlightcolor=Blue]::selection {      background: #b3ddf9; }
-[data-highlightcolor=Blue]::-moz-selection { background: #b3ddf9; }
+[data-highlightcolor=Blue]::selection { background: #b3ddf9; }
 .highlight-Blue { background: #b3ddf9; }
 
-[data-highlightcolor=Pink]::selection {      background: #fea9c5; }
-[data-highlightcolor=Pink]::-moz-selection { background: #fea9c5; }
+[data-highlightcolor=Pink]::selection { background: #fea9c5; }
 .highlight-Pink { background: #fea9c5; }
 
-[data-highlightcolor=Purple]::selection {      background: #eac5ee; }
-[data-highlightcolor=Purple]::-moz-selection { background: #eac5ee; }
+[data-highlightcolor=Purple]::selection { background: #eac5ee; }
 .highlight-Purple { background: #eac5ee; }