From 3000d06a2bb822935fd02c5983da9ba10418de94 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Wed, 25 Nov 2015 15:08:11 +0100
Subject: [PATCH] make color-swatch click area bigger

---
 .../app/views/channel/color_swatch.jst.eco    |  2 +-
 .../app/views/layout_ref/ticket_zoom.jst.eco  |  2 +-
 .../layout_ref/twitter_conversation.jst.eco   | 10 ++++-----
 .../app/views/ticket_zoom/highlighter.jst.eco |  2 +-
 app/assets/stylesheets/zammad.scss            | 21 ++++++++++++-------
 5 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/app/assets/javascripts/app/views/channel/color_swatch.jst.eco b/app/assets/javascripts/app/views/channel/color_swatch.jst.eco
index 8e93bddf4..c0e21ba13 100644
--- a/app/assets/javascripts/app/views/channel/color_swatch.jst.eco
+++ b/app/assets/javascripts/app/views/channel/color_swatch.jst.eco
@@ -1 +1 @@
-<div class="color-swatch js-swatch" style="background: <%= @color %>" data-color="<%= @color %>"></div>
\ No newline at end of file
+<div class="color-swatch js-swatch" style="color: <%= @color %>" data-color="<%= @color %>"></div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/layout_ref/ticket_zoom.jst.eco b/app/assets/javascripts/app/views/layout_ref/ticket_zoom.jst.eco
index 65f740ddc..ae514c7d1 100644
--- a/app/assets/javascripts/app/views/layout_ref/ticket_zoom.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/ticket_zoom.jst.eco
@@ -15,7 +15,7 @@
             <li role="presentation">
               <a role="menuitem" tabindex="-1" class="js-highlightColor" data-key="<%= i %>">
                 <span class="dropdown-iconSpacer">
-                  <span class="color-swatch icon" style="background: <%= entry.color %>"></span>
+                  <span class="color-swatch icon" style="color: <%= entry.color %>"></span>
                 </span>
                 <%- @Ti(entry.name) %>
                 <span class="dropdown-selectedSpacer<%= ' is-selected' if i is @activeColorIndex %>">
diff --git a/app/assets/javascripts/app/views/layout_ref/twitter_conversation.jst.eco b/app/assets/javascripts/app/views/layout_ref/twitter_conversation.jst.eco
index 9aaf6802c..c554c0883 100644
--- a/app/assets/javascripts/app/views/layout_ref/twitter_conversation.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/twitter_conversation.jst.eco
@@ -11,19 +11,19 @@
           </div>
           <ul class="dropdown-menu dropdown-menu-right" role="menu">
             <li role="presentation">
-              <a class="js-highlightColor" data-key="0" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #f7e7b2"></span></span> Yellow <span class="dropdown-selectedSpacer js-selectedIcon is-selected"><%- @Icon('checkmark', '') %></span></a>
+              <a class="js-highlightColor" data-key="0" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="color: #f7e7b2"></span></span> Yellow <span class="dropdown-selectedSpacer js-selectedIcon is-selected"><%- @Icon('checkmark', '') %></span></a>
             </li>
             <li role="presentation">
-              <a class="js-highlightColor" data-key="1" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #bce7b6"></span></span> Green <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a>
+              <a class="js-highlightColor" data-key="1" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="color: #bce7b6"></span></span> Green <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a>
             </li>
             <li role="presentation">
-              <a class="js-highlightColor" data-key="2" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #b3ddf9"></span></span> Blue <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a>
+              <a class="js-highlightColor" data-key="2" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="color: #b3ddf9"></span></span> Blue <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a>
             </li>
             <li role="presentation">
-              <a class="js-highlightColor" data-key="3" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #fea9c5"></span></span> Pink <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a>
+              <a class="js-highlightColor" data-key="3" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="color: #fea9c5"></span></span> Pink <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a>
             </li>
             <li role="presentation">
-              <a class="js-highlightColor" data-key="4" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="background: #eac5ee"></span></span> Purple <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a>
+              <a class="js-highlightColor" data-key="4" role="menuitem" tabindex="-1"><span class="dropdown-iconSpacer"><span class="color-swatch icon" style="color: #eac5ee"></span></span> Purple <span class="dropdown-selectedSpacer js-selectedIcon"><%- @Icon('checkmark', '') %></span></a>
             </li>
           </ul>
         </div>
diff --git a/app/assets/javascripts/app/views/ticket_zoom/highlighter.jst.eco b/app/assets/javascripts/app/views/ticket_zoom/highlighter.jst.eco
index 26e8283f3..65f42f1d0 100644
--- a/app/assets/javascripts/app/views/ticket_zoom/highlighter.jst.eco
+++ b/app/assets/javascripts/app/views/ticket_zoom/highlighter.jst.eco
@@ -10,7 +10,7 @@
     <li role="presentation">
       <a role="menuitem" tabindex="-1" class="js-highlightColor" data-key="<%= i %>">
         <span class="dropdown-iconSpacer">
-          <span class="color-swatch icon" style="background: <%= entry.color %>"></span>
+          <span class="color-swatch icon" style="color: <%= entry.color %>"></span>
         </span>
         <%- @Ti(entry.name) %>
         <span class="dropdown-selectedSpacer js-selectedIcon<%= ' is-selected' if i is @activeColorIndex %>">
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index 28dcdf1cc..4757e73b2 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/app/assets/stylesheets/zammad.scss
@@ -2332,13 +2332,18 @@ ol.tabs li {
 }
 
 .color-swatch {
-  border-radius: 100%;
-  width: 11px;
-  height: 11px;
+  padding: 2px;
+  margin: -2px 0;
   cursor: pointer;
   
-  & + .color-swatch {
-    margin-left: 4px;
+  /* :after technique for bigger click area */
+  &:after {
+    content: "";
+    display: inline-block;
+    height: 11px;
+    width: 11px;
+    border-radius: 100%;
+    background: currentColor;
   }
 }
 
@@ -7440,7 +7445,7 @@ output {
     position: relative;
     height: 100%;
     transform-origin: left top;
-    overflow: auto;
+    overflow: hidden;
     
     &[data-mode=screenshot] iframe,
     &[data-mode=iframe] img {
@@ -7466,13 +7471,13 @@ output {
 
 .browser-head {
   display: flex;
-  align-items: center;
   padding: 10px;
   border-bottom: 1px solid hsl(0,0%,90%);
   
   .browser-input {
-    flex: 1;
     position: relative;
+    flex: 1;
+    margin-right: 10px;
     
     input {
       min-width: 0;