From fb564d21b8262f4ea990dbc8d9ad79144f188f01 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mail@felixniklas.de>
Date: Wed, 23 Jul 2014 22:56:59 +0200
Subject: [PATCH] table: add checkbox and checkbox

---
 app/assets/images/sprite.svg                  |  9 ++-
 .../app/views/dashboard/ticket.jst.eco        |  8 +--
 .../app/views/generic/table.jst.eco           | 20 +++++-
 app/assets/stylesheets/zzz.css.erb            | 65 ++++++++++++++++---
 4 files changed, 83 insertions(+), 19 deletions(-)

diff --git a/app/assets/images/sprite.svg b/app/assets/images/sprite.svg
index 9398a578c..bc11d7f99 100644
--- a/app/assets/images/sprite.svg
+++ b/app/assets/images/sprite.svg
@@ -93,7 +93,12 @@
             <path d="M85.5,10 L48,10 L58,3 L95.5,3 L85.5,10 Z" id="Shape-copy" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
             <path d="M85.5,8 L48,8 L58,0 L95.5,0 L85.5,8 Z" id="Shape-copy" fill="#38AE6A" sketch:type="MSShapeGroup"></path>
         </g>
-        <path d="M6.9,309.9 L2,305 L6.9,300" id="Shape" stroke="#000000" stroke-width="2" sketch:type="MSShapeGroup"></path>
-        <path d="M9,300 L13.9,304.9 L9,309.9" id="Shape" stroke="#000000" stroke-width="2" sketch:type="MSShapeGroup"></path>
+        <path d="M6.9,309.9 L2,305 L6.9,300" id="left-arrow" stroke="#000000" stroke-width="2" sketch:type="MSShapeGroup"></path>
+        <path d="M9,300 L13.9,304.9 L9,309.9" id="right-arrow" stroke="#000000" stroke-width="2" sketch:type="MSShapeGroup"></path>
+        <path d="M16.5,299.5 L25.5,299.5 L25.5,308.5 L16.5,308.5 L16.5,299.5 Z" id="checkbox" stroke="#CBCBCB" sketch:type="MSShapeGroup"></path>
+        <g id="checkbox-checked" sketch:type="MSLayerGroup" transform="translate(26.000000, 300.000000)">
+            <path d="M0.5,-0.5 L9.5,-0.5 L9.5,8.5 L0.5,8.5 L0.5,-0.5 Z" id="checkbox" stroke="#000000" sketch:type="MSShapeGroup"></path>
+            <path d="M3.79999999,4.89999999 L2.09999999,3.39999999 L1.39999999,4.09999999 L4.29999999,7.59999999 C4.79999999,6.09999999 6.39999999,3.19999999 8.29999999,1.09999999 L8.09999999,0.499999993 C5.99999999,1.99999999 4.39999999,3.89999999 3.79999999,4.89999999 Z" id="Shape" fill="#1A1A1A" sketch:type="MSShapeGroup"></path>
+        </g>
     </g>
 </svg>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/dashboard/ticket.jst.eco b/app/assets/javascripts/app/views/dashboard/ticket.jst.eco
index 1ead3df53..0930cb443 100644
--- a/app/assets/javascripts/app/views/dashboard/ticket.jst.eco
+++ b/app/assets/javascripts/app/views/dashboard/ticket.jst.eco
@@ -13,8 +13,8 @@
           <span class="left arrow icon"></span>
         </a>
       <% else: %>
-        <a class="inactive centered" href="#" data-id="<%= @start_page %>" data-type="page">
-          <span class="inactive left arrow icon"></span>
+        <a class="disabled centered" href="#" data-id="<%= @start_page %>" data-type="page">
+          <span class="disabled left arrow icon"></span>
         </a>
       <% end %>
       </li>
@@ -26,8 +26,8 @@
           <span class="right arrow icon"></span>
         </a>
       <% else: %>
-        <a class="centered" href="#" data-id="<%= @start_page %>" data-type="page">
-          <span class="right arrow icon"></span>
+        <a class="disabled centered" href="#" data-id="<%= @start_page %>" data-type="page">
+          <span class="disabled right arrow icon"></span>
         </a>
       </li>
       <% end %>
diff --git a/app/assets/javascripts/app/views/generic/table.jst.eco b/app/assets/javascripts/app/views/generic/table.jst.eco
index a12fef6b7..dbbb1007b 100644
--- a/app/assets/javascripts/app/views/generic/table.jst.eco
+++ b/app/assets/javascripts/app/views/generic/table.jst.eco
@@ -2,11 +2,17 @@
   <thead>
     <tr>
     <% if @checkbox: %>
-      <th style="width: 22px"><input type="checkbox" value="" name="bulk_all"/></th>
+      <th style="width: 40px" class="no-padding">
+        <label class="checkbox-replacement centered">
+          <input type="checkbox" value="" name="bulk_all"/>
+          <span class="white checkbox icon"></span>
+        </label>
+      </th>
     <% end %>
     <% if @radio: %>
       <th style="width: 22px"></th>
     <% end %>
+      <th style="width: 28px"></th>
 <% for item in @header: %>
       <th <% if item.style: %>style="<%= item.style %>"<% end %>><%- @T( item.display ) %></th>
 <% end %>
@@ -38,10 +44,18 @@
   <%   end %>
   <% end %>
   <% position++ %>
-  <tr class="item <% if object.active is false: %>not-active<% end %>" data-id="<%= object.id %>" data-position="<%= position %>" >
+  <tr class="item <% if object.active is false: %>not-active<% end %> level-1" data-id="<%= object.id %>" data-position="<%= position %>" >
     <% if @checkbox: %>
-      <td><input type="checkbox" value="<%= object.id %>" name="bulk"/></td>
+      <td class="no-padding">
+        <label class="checkbox-replacement centered">
+          <input type="checkbox" value="<%= object.id %>" name="bulk"/>
+          <span class="checkbox icon"></span>
+        </label>
+      </td>
     <% end %>
+      <td class="status">
+        <span class="priority icon"></span>
+      </td>
     <% if @radio: %>
       <td><input type="radio" value="<%= object.id %>" name="radio"/></td>
     <% end %>
diff --git a/app/assets/stylesheets/zzz.css.erb b/app/assets/stylesheets/zzz.css.erb
index aa9698de6..7de1e4eb9 100644
--- a/app/assets/stylesheets/zzz.css.erb
+++ b/app/assets/stylesheets/zzz.css.erb
@@ -44,8 +44,9 @@ table {
   white-space: nowrap;
 }
 
+.table > thead:first-child > tr:first-child > th,
 .table > thead > tr > th {
-  padding: 12px 9px 9px;
+  padding: 12px 9px 10px;
   border-bottom: none;
   border-top: 1px solid #ececec;
   background: #f0f1f2;
@@ -54,12 +55,40 @@ table {
   font-size: 12px;
   text-transform: uppercase;
 }
- 
-.table > thead > tr > td, 
-.table > tbody > tr > td, 
-.table > tfoot > tr > td {
-  padding: 9px;
-  border-top-color: #f2f2f2;
+
+.table > tbody > tr > td {
+  padding: 10px 9px 9px;
+  border: none;
+  box-shadow: 0 1px rgba(0,0,0,.02) inset;
+}
+
+.table > tbody > tr:first-child > td {
+  box-shadow: none;
+}
+
+.table-hover > tbody > tr:hover > td, 
+.table-hover > tbody > tr:hover > th {
+  background: rgba(0,8,14,.015);
+}
+
+.table > thead:first-child > tr:first-child > th.no-padding,
+.table > thead > tr > th.no-padding,
+.table > tbody > tr > td.no-padding {
+  padding: 0;
+}
+
+.table .checkbox-replacement {
+  padding: 0;
+  margin: 0;
+  height: 38px;
+}
+
+.table .checkbox-replacement input[type=checkbox] {
+  display: none;
+}
+
+.table .priority.icon:after {
+  background: #f8f9fa;
 }
 
 .table .table-cell {
@@ -540,7 +569,7 @@ label {
 }
 
 .page-header-title {
-  margin-bottom: 20px;
+  margin-bottom: 15px;
 }
 
 .page-header-meta {
@@ -1053,8 +1082,8 @@ ol.tabs li {
     opacity: .39;
   }
 
-  .inactive.left.arrow.icon,
-  .inactive.right.arrow.icon {
+  .disabled.left.arrow.icon,
+  .disabled.right.arrow.icon {
     opacity: .23;
   }
 
@@ -1066,6 +1095,22 @@ ol.tabs li {
     background-position: -8px -299px;
   }
 
+  .checkbox.icon {
+    min-height: 0; /* overwriting bootstrap */
+    margin: 0; /* overwriting bootstrap */
+    width: 10px;
+    height: 10px;
+    background-position: -16px -299px;
+  }
+
+  .white.checkbox.icon {
+    background-color: white;
+  }
+
+  :checked + .checkbox.icon {
+    background-position: -26px -299px;
+  }
+
 
 /*
  * removed margin of forms to not break the layout with submit buttons within <form></form> area e. g. for modal dialogs