From cef8fcf09efdfdd2462853532735285ccdbb012a Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Fri, 13 Mar 2015 14:34:35 +0100
Subject: [PATCH] add custom radio buttons

---
 .../javascripts/app/views/generic/table.jst.eco   | 11 ++++++++---
 app/assets/stylesheets/zammad.css.scss            | 15 +++++++++++++--
 public/assets/images/sprite.svg                   |  9 +++++++--
 3 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/app/views/generic/table.jst.eco b/app/assets/javascripts/app/views/generic/table.jst.eco
index 003c2318f..608b0872b 100644
--- a/app/assets/javascripts/app/views/generic/table.jst.eco
+++ b/app/assets/javascripts/app/views/generic/table.jst.eco
@@ -3,7 +3,7 @@
     <tr>
     <% if @checkbox: %>
       <th style="width: 40px" class="no-padding">
-        <label class="checkbox-replacement centered">
+        <label class="input-replacement centered">
           <input type="checkbox" value="" name="bulk_all"/>
           <span class="white checkbox icon"></span>
         </label>
@@ -39,14 +39,19 @@
   <tr class="item <% if object.active is false: %>not-active<% end %>" data-id="<%= object.id %>" data-position="<%= position %>" >
     <% if @checkbox: %>
       <td class="no-padding">
-        <label class="checkbox-replacement centered">
+        <label class="input-replacement">
           <input type="checkbox" value="<%= object.id %>" name="bulk"/>
           <span class="checkbox icon"></span>
         </label>
       </td>
     <% end %>
     <% if @radio: %>
-      <td><input type="radio" value="<%= object.id %>" name="radio"/></td>
+      <td class="no-padding">
+        <label class="input-replacement">
+          <input type="radio" value="<%= object.id %>" name="radio"/>
+          <span class="radio icon"></span>
+        </label>
+      </td>
     <% end %>
     <% for item in @header: %>
       <% value = @P( object, item.name ) %>
diff --git a/app/assets/stylesheets/zammad.css.scss b/app/assets/stylesheets/zammad.css.scss
index d1514fa9e..4b6830781 100644
--- a/app/assets/stylesheets/zammad.css.scss
+++ b/app/assets/stylesheets/zammad.css.scss
@@ -486,14 +486,15 @@ table {
   padding: 0;
 }
 
-.checkbox-replacement {
+.input-replacement {
   padding: 0;
   margin: 0;
   height: 38px;
   @extend .u-clickable;
+  @extend .centered;
 }
 
-.checkbox-replacement input[type=checkbox] {
+.input-replacement input {
   display: none;
 }
 
@@ -1796,6 +1797,16 @@ ol.tabs li {
     background-position: -47px -307px;
   }
 
+  .radio.icon {
+    width: 12px;
+    height: 12px;
+    background-position: -171px -307px;
+  }
+
+  :checked + .radio.icon {
+    background-position: -184px -307px;
+  }
+
   .arrow-right.icon {
     width: 12px;
     height: 11px;
diff --git a/public/assets/images/sprite.svg b/public/assets/images/sprite.svg
index c45c6694e..2c432e869 100644
--- a/public/assets/images/sprite.svg
+++ b/public/assets/images/sprite.svg
@@ -9,6 +9,7 @@
         <rect id="path-5" x="0" y="0" width="97" height="96"></rect>
     </defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <path d="M36.5,307.5 L45.5,307.5 L45.5,316.5 L36.5,316.5 L36.5,307.5 L36.5,307.5 Z" id="checkbox-2" stroke="#CBCBCB" sketch:type="MSShapeGroup"></path>
         <g id="avatar-haze" sketch:type="MSLayerGroup" transform="translate(236.000000, 0.000000)">
             <g id="mask-2" fill="#FFFFFF" sketch:type="MSShapeGroup">
                 <rect id="path-1" x="0" y="0" width="97" height="96"></rect>
@@ -172,7 +173,11 @@
         <path d="M13.5000001,312.892894 L9.28578716,317.200071 L10.7142128,318.599929 L15.6142128,313.599929 L16.3071071,312.892894 L15.6071068,312.192893 L10.7071068,307.292893 L9.29289322,308.707107 L13.5000001,312.892894 Z" id="arrow.right" fill="#000000" sketch:type="MSShapeGroup"></path>
         <path d="M25.6142128,308.699929 L24.1857872,307.300071 L19.2857872,312.300071 L18.5928929,313.007106 L19.2928932,313.707107 L24.1928932,318.607107 L25.6071068,317.192893 L21.5,313.007106 L25.6142128,308.699929 Z" id="white.arrow.left" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
         <path d="M31.5000001,312.892894 L27.2857872,317.200071 L28.7142128,318.599929 L33.6142128,313.599929 L34.3071071,312.892894 L33.6071068,312.192893 L28.7071068,307.292893 L27.2928932,308.707107 L31.5000001,312.892894 Z" id="white.arrow.right" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
-        <path d="M36.5,307.5 L45.5,307.5 L45.5,316.5 L36.5,316.5 L36.5,307.5 L36.5,307.5 Z" id="checkbox" stroke="#CBCBCB" sketch:type="MSShapeGroup"></path>
+        <path d="M182.991143,312.999929 C182.991143,309.68622 180.304851,306.999929 176.991143,306.999929 C173.677434,306.999929 170.991143,309.68622 170.991143,312.999929 C170.991143,316.313637 173.677434,318.999929 176.991143,318.999929 C180.304851,318.999929 182.991143,316.313637 182.991143,312.999929 Z M172.008643,313.017429 C172.008643,310.256005 174.247219,308.017429 177.008643,308.017429 C179.770067,308.017429 182.008643,310.256005 182.008643,313.017429 C182.008643,315.778853 179.770067,318.017429 177.008643,318.017429 C174.247219,318.017429 172.008643,315.778853 172.008643,313.017429 Z" id="radio" fill="#CBCBCB" sketch:type="MSShapeGroup"></path>
+        <g id="radio:checked" sketch:type="MSLayerGroup" transform="translate(184.000000, 307.000000)" fill="#000000">
+            <path d="M5.99114287,8 C7.09571237,8 7.99114287,7.1045695 7.99114287,6 C7.99114287,4.8954305 7.09571237,4 5.99114287,4 C4.88657338,4 3.99114287,4.8954305 3.99114287,6 C3.99114287,7.1045695 4.88657338,8 5.99114287,8 Z" id="inner" sketch:type="MSShapeGroup"></path>
+            <path d="M12,6 C12,2.6862915 9.3137085,0 6,0 C2.6862915,0 0,2.6862915 0,6 C0,9.3137085 2.6862915,12 6,12 C9.3137085,12 12,9.3137085 12,6 Z M1.01750022,6.01750022 C1.01750022,3.25607647 3.25607647,1.01750022 6.01750022,1.01750022 C8.77892397,1.01750022 11.0175002,3.25607647 11.0175002,6.01750022 C11.0175002,8.77892397 8.77892397,11.0175002 6.01750022,11.0175002 C3.25607647,11.0175002 1.01750022,8.77892397 1.01750022,6.01750022 Z" id="outer" sketch:type="MSShapeGroup"></path>
+        </g>
         <g id="checkox:checked" sketch:type="MSLayerGroup" transform="translate(47.000000, 307.000000)">
             <path d="M0.5,0.5 L9.5,0.5 L9.5,9.5 L0.5,9.5 L0.5,0.5 L0.5,0.5 Z" id="checkbox" stroke="#000000" sketch:type="MSShapeGroup"></path>
             <path d="M3.79999999,5.89999999 L2.09999999,4.39999999 L1.39999999,5.09999999 L4.29999999,8.59999999 C4.79999999,7.09999999 6.39999999,4.19999999 8.29999999,2.09999999 L8.09999999,1.49999999 C5.99999999,2.99999999 4.39999999,4.89999999 3.79999999,5.89999999 L3.79999999,5.89999999 L3.79999999,5.89999999 Z" id="Shape" fill="#1A1A1A" sketch:type="MSShapeGroup"></path>
@@ -187,7 +192,7 @@
         <path d="M137.407036,310.707035 L141.521249,306.399858 L140.092823,305 L135.192823,310 L134.499929,310.707035 L135.199929,311.407036 L140.099929,316.307036 L141.514143,314.892822 L137.407036,310.707035 Z" id="white.arrow.up" fill="#FFFFFF" sketch:type="MSShapeGroup" transform="translate(138.010589, 310.653518) rotate(-270.000000) translate(-138.010589, -310.653518) "></path>
         <path d="M124.407036,310.707035 L128.521249,306.399858 L127.092823,305 L122.192823,310 L121.499929,310.707035 L122.199929,311.407036 L127.099929,316.307036 L128.514143,314.892822 L124.407036,310.707035 Z" id="arrow.up" fill="#000000" sketch:type="MSShapeGroup" transform="translate(125.010589, 310.653518) rotate(-270.000000) translate(-125.010589, -310.653518) "></path>
         <path d="M151.641178,311.057143 L147.426965,315.36432 L148.855391,316.764178 L153.755391,311.764178 L154.448285,311.057143 L153.748285,310.357142 L148.848285,305.457142 L147.434071,306.871356 L151.641178,311.057143 Z" id="arrow.down" fill="#000000" sketch:type="MSShapeGroup" transform="translate(150.937625, 311.110660) rotate(-270.000000) translate(-150.937625, -311.110660) "></path>
-        <path d="M164.641178,311.057143 L160.426965,315.36432 L161.855391,316.764178 L166.755391,311.764178 L167.448285,311.057143 L166.748285,310.357142 L161.848285,305.457142 L160.434071,306.871356 L164.641178,311.057143 Z" id="white.arrow.down" fill="#FFFFFF" sketch:type="MSShapeGroup" transform="translate(163.937625, 311.110660) rotate(-270.000000) translate(-163.937625, -311.110660) "></path>
+        <path d="M164.641178,311.057143 L160.426965,315.36432 L161.855391,316.764178 L166.755391,311.764178 L167.448285,311.057143 L166.748285,310.357142 L161.848285,305.457142 L160.434071,306.871356 L164.641178,311.057143 Z" id="white.arrow.down" fill="#FF0000" sketch:type="MSShapeGroup" transform="translate(163.937625, 311.110660) rotate(-270.000000) translate(-163.937625, -311.110660) "></path>
         <path d="M99.792894,307.720062 L101.292894,311.131794 L104.792894,311.682073 L102.292894,314.43347 L102.892894,318.175369 L99.792894,316.414475 L96.692894,318.175369 L97.292894,314.43347 L94.792894,311.682073 L98.292894,311.131794 L99.792894,307.720062 L99.792894,307.720062 Z" id="bookmark-empty" stroke="#808080" opacity="0.3" sketch:type="MSShapeGroup"></path>
         <path d="M4.63842857,325.446435 C6.0955925,325.446435 7.27685714,324.227209 7.27685714,322.723217 C7.27685714,321.219226 6.0955925,320 4.63842857,320 C3.18126464,320 2,321.219226 2,322.723217 C2,324.227209 3.18126464,325.446435 4.63842857,325.446435 L4.63842857,325.446435 L4.63842857,325.446435 Z M11.6386813,325.446957 C13.0959848,325.446957 14.2773626,324.227614 14.2773626,322.723478 C14.2773626,321.219343 13.0959848,320 11.6386813,320 C10.1813778,320 9,321.219343 9,322.723478 C9,324.227614 10.1813778,325.446957 11.6386813,325.446957 L11.6386813,325.446957 L11.6386813,325.446957 Z M17.6386813,325.446957 C19.0959848,325.446957 20.2773626,324.227614 20.2773626,322.723478 C20.2773626,321.219343 19.0959848,320 17.6386813,320 C16.1813778,320 15,321.219343 15,322.723478 C15,324.227614 16.1813778,325.446957 17.6386813,325.446957 L17.6386813,325.446957 L17.6386813,325.446957 Z M15.2232198,326.311217 L7.69893407,326.311217 C7.05594505,326.311217 6.53478022,326.84913 6.53478022,327.512261 L6.53478022,334.378348 C6.53478022,335.042261 7.05594505,335.579391 7.69893407,335.579391 L8.05707692,335.579391 L8.05707692,344.070696 L14.7278352,344.070696 L14.7278352,335.579391 L15.2232198,335.579391 C15.8662088,335.579391 16.3868681,335.042 16.3868681,334.378348 L16.3868681,327.512261 C16.3866154,326.849391 15.8662088,326.311217 15.2232198,326.311217 L15.2232198,326.311217 L15.2232198,326.311217 Z M4.89343956,334.378609 L4.89343956,327.512522 C4.89343956,327.083131 4.99024176,326.678783 5.15326374,326.311479 L1.26752747,326.311479 C0.625043956,326.311479 0.103879121,326.849392 0.103879121,327.512522 L0.103879121,334.378609 C0.103879121,335.042522 0.625043956,335.579653 1.26752747,335.579653 L1.62592308,335.579653 L1.62592308,344.070957 L6.41523077,344.070957 L6.41523077,336.953392 C5.51216484,336.472348 4.89343956,335.498522 4.89343956,334.378609 L4.89343956,334.378609 L4.89343956,334.378609 Z M21.7572418,326.311218 L17.7691429,326.311218 C17.9321648,326.678522 18.0292198,327.083131 18.0292198,327.512261 L18.0292198,334.378348 C18.0292198,335.554348 17.3468022,336.567566 16.3696813,337.020957 L16.3696813,344.070696 L21.2623626,344.070696 L21.2623626,335.579392 L21.756989,335.579392 C22.3997253,335.579392 22.9211429,335.042 22.9211429,334.378348 L22.9211429,327.512261 C22.9213956,326.849392 22.3997253,326.311218 21.7572418,326.311218 L21.7572418,326.311218 L21.7572418,326.311218 Z" id="dark-group" fill="#586066" sketch:type="MSShapeGroup"></path>
         <path d="M42.9411437,320.857905 C42.8674423,320.340726 42.6070309,320.090217 42.0980002,320.034661 C41.9142382,320.015469 41.7285108,320.001327 41.5437661,320.001327 C36.1851864,319.999307 30.8266068,319.999307 25.4670445,320.003347 C25.219408,320.003347 24.969806,320.034661 24.7241349,320.077086 C24.3408878,320.139713 24.1237145,320.395272 24.0618054,320.781136 C24.0244634,321.013463 24.0028443,321.25286 24.0028443,321.489227 C23.9989136,325.132713 23.9998963,328.77721 24.0008789,332.420696 C24.0008789,332.524738 24.0028443,332.62979 24.0087404,332.733832 C24.0559093,333.546975 24.3389225,333.842939 25.1329317,333.858091 C26.1873524,333.877283 27.1995176,333.874252 28.2539383,333.880313 C28.476025,333.882333 28.9133197,333.880313 28.9133197,333.880313 L28.9133197,334.233854 C28.9133197,335.575287 28.9545925,336.91571 28.9585232,338.259164 C28.9595059,338.515733 28.9044755,338.830889 29.2061598,338.964224 C29.5009652,339.094529 29.694554,338.83998 29.8812641,338.66422 C31.5174341,337.133895 33.1565522,335.60559 34.7858434,334.068195 C34.9352115,333.927789 35.0855623,333.877283 35.2830819,333.878293 C37.2828452,333.882333 39.2826086,333.882333 41.2804066,333.880313 C41.5309911,333.880313 41.7825584,333.870212 42.0311777,333.846979 C42.6237365,333.794453 42.8733384,333.553036 42.958832,332.951007 C42.9843818,332.764136 42.9981394,332.572214 42.9981394,332.383322 C43.0001048,328.797412 43.0010874,325.210492 42.9981394,321.622562 C42.996174,321.369023 42.9765203,321.110434 42.9411437,320.857905 L42.9411437,320.857905 L42.9411437,320.857905 Z M27.9975446,324 C27.446616,324 27,324.443865 27,325 C27,325.552285 27.4463114,326 27.9975446,326 L35.0024554,326 C35.553384,326 36,325.556135 36,325 C36,324.447715 35.5536886,324 35.0024554,324 L27.9975446,324 L27.9975446,324 Z M28.0006529,328 C27.4480076,328 27,328.443865 27,329 C27,329.552285 27.4484532,330 28.0006529,330 L39.027347,330 C39.5799924,330 40.028,329.556135 40.028,329 C40.028,328.447715 39.5795467,328 39.027347,328 L28.0006529,328 L28.0006529,328 Z" id="dark-message" fill="#586066" sketch:type="MSShapeGroup"></path>