From 772746a7100cb0499c0572bfa4635bdbc504d4ec Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Mon, 8 Feb 2016 17:24:48 +0100
Subject: [PATCH] style notification settings

---
 .../controllers/_profile/notification.coffee  |  2 +-
 .../app/views/profile/notification.jst.eco    | 81 +++++++++++++------
 app/assets/stylesheets/zammad.scss            | 14 ++++
 3 files changed, 71 insertions(+), 26 deletions(-)

diff --git a/app/assets/javascripts/app/controllers/_profile/notification.coffee b/app/assets/javascripts/app/controllers/_profile/notification.coffee
index d3cfd56f8..d63c79618 100644
--- a/app/assets/javascripts/app/controllers/_profile/notification.coffee
+++ b/app/assets/javascripts/app/controllers/_profile/notification.coffee
@@ -15,7 +15,7 @@ class Index extends App.Controller
       group_ids: []
       matrix:
         create:
-          name: 'new Ticket'
+          name: 'New Ticket'
         update:
           name: 'Ticket update'
         reminder_reached:
diff --git a/app/assets/javascripts/app/views/profile/notification.jst.eco b/app/assets/javascripts/app/views/profile/notification.jst.eco
index c0f5e363c..9b50578a7 100644
--- a/app/assets/javascripts/app/views/profile/notification.jst.eco
+++ b/app/assets/javascripts/app/views/profile/notification.jst.eco
@@ -4,45 +4,76 @@
 
 <form div class="page-content">
 
-  <h3><%- @T( 'Matrix' ) %></h3>
-
   <div class="settings-entry">
-    <table class="table">
-      <tr>
-        <td><%- @T('On') %></td><td colspan="3"><%- @T('Criteria') %></td><td colspan="2"><%- @T('Notify via') %></td>
-      </tr>
-      <tr>
-        <td></td><td><%- @T('Owned by me') %></td><td><%- @T('Owned by nobody') %></td><td><%- @T('no criteria') %></td><td><%- @T('Email & Online') %></td><td><%- @T('Online') %></td>
-      </tr>
+    <table class="settings-list">
+      <thead>
+        <tr>
+          <th>
+          <th><%- @T('My Tickets') %>
+          <th><%- @T('Not Assigned') %>
+          <th><%- @T('All Tickets') %>
+          <th class="settings-list-separator"><%- @T('Email Notification') %>
+      </thead>
+      <tbody>
       <% if @config.matrix: %>
         <% for key, value of @config.matrix: %>
         <tr>
-          <td><%= value.name %></td>
-          <td><input type="checkbox" name="matrix.<%= key %>.criteria.owned_by_me" value="true" <% if value.criteria.owned_by_me: %>checked<% end %>/></td>
-          <td><input type="checkbox" name="matrix.<%= key %>.criteria.owned_by_nobody" value="true"  <% if value.criteria.owned_by_nobody: %>checked<% end %>/></td>
-          <td><input type="checkbox" name="matrix.<%= key %>.criteria.no" value="true"  <% if value.criteria.no: %>checked<% end %>/></td>
-          <td><input type="radio" name="matrix.<%= key %>.channel" value="email" <% if value.channel.email: %>checked<% end %>/></td>
-          <td><input type="radio" name="matrix.<%= key %>.channel" value="online" <% if !value.channel.email && value.channel.online: %>checked<% end %>/></td>
-        </tr>
+          <td>
+            <%= value.name %>
+          <td class="u-positionOrigin">
+            <label class="checkbox-replacement checkbox-replacement--fullscreen">
+              <input type="checkbox" name="matrix.<%= key %>.criteria.owned_by_me" value="true" <% if value.criteria.owned_by_me: %>checked<% end %>/>
+              <%- @Icon('checkbox', 'icon-unchecked') %>
+              <%- @Icon('checkbox-checked', 'icon-checked') %>
+            </label>
+          <td class="u-positionOrigin">
+            <label class="checkbox-replacement checkbox-replacement--fullscreen">
+              <input type="checkbox" name="matrix.<%= key %>.criteria.owned_by_nobody" value="true"  <% if value.criteria.owned_by_nobody: %>checked<% end %>/>
+              <%- @Icon('checkbox', 'icon-unchecked') %>
+              <%- @Icon('checkbox-checked', 'icon-checked') %>
+            </label>
+          <td class="u-positionOrigin">
+            <label class="checkbox-replacement checkbox-replacement--fullscreen">
+              <input type="checkbox" name="matrix.<%= key %>.criteria.no" value="true"  <% if value.criteria.no: %>checked<% end %>/>
+              <%- @Icon('checkbox', 'icon-unchecked') %>
+              <%- @Icon('checkbox-checked', 'icon-checked') %>
+            </label>
+          <td class="u-positionOrigin settings-list-separator">
+            <label class="checkbox-replacement checkbox-replacement--fullscreen">
+              <input type="checkbox" name="matrix.<%= key %>.channel" value="email" <% if value.channel.email: %>checked<% end %>/>
+              <%- @Icon('checkbox', 'icon-unchecked') %>
+              <%- @Icon('checkbox-checked', 'icon-checked') %>
+            </label>
         <% end %>
       <% end %>
+      </tbody>
     </table>
   </div>
 
-
-  <h3><%- @T( 'Groups' ) %></h3>
-  <%- @T('For "owned by nobody" and "no criteria" only notify about tickets in theres groups.') %>
+  <% if @groups: %>
+  <h2><%- @T( 'Limit Groups' ) %></h2>
   <div class="settings-entry">
-    <table class="table">
-    <% if @groups: %>
+    <table class="settings-list">
+      <thead>
+        <tr>
+          <th><%- @T('Group') %>
+          <th><%- @T('Not Assigned & All Tickets') %>
+      </thead>
+      <tbody>
       <% for group in @groups: %>
-      <tr>
-        <td><%= group.displayName() %></td><td><input type="checkbox" name="group_ids" value="<%= group.id %>" <% if _.include(@config.group_ids, group.id.toString()): %>checked<% end %>/></td>
-      </tr>
+        <tr>
+          <td><%= group.displayName() %>
+          <td class="u-positionOrigin">
+            <label class="checkbox-replacement checkbox-replacement--fullscreen">
+              <input type="checkbox" name="group_ids" value="<%= group.id %>" <% if _.include(@config.group_ids, group.id.toString()): %>checked<% end %>/>
+              <%- @Icon('checkbox', 'icon-unchecked') %>
+              <%- @Icon('checkbox-checked', 'icon-checked') %>
+            </label>
       <% end %>
-    <% end %>
+      </tbody>
     </table>
   </div>
+  <% end %>
 
   <button type="submit" class="btn btn--primary"><%- @T( 'Submit' ) %></button>
 </form>
\ No newline at end of file
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index 48c036d46..426a98ee7 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/app/assets/stylesheets/zammad.scss
@@ -936,6 +936,16 @@ th.align-right {
   justify-content: center;
 }
 
+.checkbox-replacement.checkbox-replacement--fullscreen,
+.radio-replacement.radio-replacement--fullscreen {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+
 .checkbox-replacement.checkbox-replacement--inline,
 .radio-replacement.radio-replacement--inline {
   display: inline-flex;
@@ -6816,6 +6826,10 @@ output {
   td.empty-cell {
     border-top: none;
   }
+  
+  .settings-list-separator {
+    border-left-width: 2px;
+  }
 
   .text-muted {
     text-transform: none;