From eb9767278d16652cdeea7a66b19f869f3a51b84d Mon Sep 17 00:00:00 2001
From: Felix Niklas <mail@felixniklas.de>
Date: Mon, 25 Mar 2019 13:58:52 +0100
Subject: [PATCH] Common style for radios & checkboxes

---
 .../app/views/generic/checkbox.jst.eco        |  7 +-
 .../app/views/generic/permission.jst.eco      |  8 +-
 .../app/views/generic/radio.jst.eco           | 16 ++--
 .../app/views/generic/user_permission.jst.eco |  3 +-
 .../views/profile/token_access_create.jst.eco |  8 +-
 app/assets/stylesheets/zammad.scss            | 94 +++++++++++--------
 6 files changed, 82 insertions(+), 54 deletions(-)

diff --git a/app/assets/javascripts/app/views/generic/checkbox.jst.eco b/app/assets/javascripts/app/views/generic/checkbox.jst.eco
index 8d0412aad..825d860a3 100644
--- a/app/assets/javascripts/app/views/generic/checkbox.jst.eco
+++ b/app/assets/javascripts/app/views/generic/checkbox.jst.eco
@@ -1,10 +1,11 @@
 <div class="<%= @attribute.class %> checkbox">
 <% for row in @attribute.options: %>
-  <label class="inline-label checkbox-replacement">
-    <input type="checkbox" value="<%= row.value %>" name="<%= @attribute.name %>" <%= row.checked %>/>
+  <label class="checkbox-replacement<%= ' is-disabled' if row.disabled %>">
+    <input type="checkbox" value="<%= row.value %>" name="<%= @attribute.name %>" <%= row.checked %> <%= row.disabled %>>
     <%- @Icon('checkbox', 'icon-unchecked') %>
     <%- @Icon('checkbox-checked', 'icon-checked') %>
-    <span class="label-text"><%= row.name %> <% if row.note: %>- <span class="help-text"><%- @T(row.note) %></span><% end %></span>
+    <span class="label-text"><%= row.name %></span>
+    <% if row.note: %><span class="help-text"><%- @T(row.note) %></span><% end %>
   </label>
 <% end %>
 </div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/generic/permission.jst.eco b/app/assets/javascripts/app/views/generic/permission.jst.eco
index 55e00e7da..0a31283fb 100644
--- a/app/assets/javascripts/app/views/generic/permission.jst.eco
+++ b/app/assets/javascripts/app/views/generic/permission.jst.eco
@@ -5,15 +5,17 @@
     <input type="checkbox" value="<%= permission.id %>" name="permission_ids" <% if _.contains(@params.permission_ids, permission.id): %>checked<% end %> <% if permission.preferences.disabled: %>disabled<% end %> data-permission-name="<%= permission.name %>"/>
     <%- @Icon('checkbox', 'icon-unchecked') %>
     <%- @Icon('checkbox-checked', 'icon-checked') %>
-    <span class="label-text"><%= permission.displayName() %> - <span class="help-text"><%- @T.apply(@, [permission.note].concat(permission.preferences.translations)) %></span></span>
+    <span class="label-text"><%= permission.displayName() %></span>
+    <span class="help-text"><%- @T.apply(@, [permission.note].concat(permission.preferences.translations)) %></span>
   </label>
   <% else: %>
-    <div style="padding-left: 20px;" class="js-subPermissionList">
+    <div class="checkbox-child js-subPermissionList">
       <label class="inline-label checkbox-replacement">
         <input type="checkbox" value="<%= permission.id %>" name="permission_ids" <% if _.contains(@params.permission_ids, permission.id): %>checked<% end %> <% if permission.preferences.disabled: %>disabled<% end %> data-permission-name="<%= permission.name %>"/>
         <%- @Icon('checkbox', 'icon-unchecked') %>
         <%- @Icon('checkbox-checked', 'icon-checked') %>
-        <span class="label-text"><%= permission.displayName().replace(/^.+?\./, '') %> - <span class="help-text"><%- @T.apply(@, [permission.note].concat(permission.preferences.translations)) %></span></span>
+        <span class="label-text"><%= permission.displayName().replace(/^.+?\./, '') %></span>
+        <span class="help-text"><%- @T.apply(@, [permission.note].concat(permission.preferences.translations)) %></span>
       </label>
   <%     if _.contains(permission.preferences.plugin, 'groups'): %>
     <div style="padding-left: 18px; padding-top: 10px;" class="js-groupList <% if @hideGroups: %>js-groupListHide hidden<% end %>">
diff --git a/app/assets/javascripts/app/views/generic/radio.jst.eco b/app/assets/javascripts/app/views/generic/radio.jst.eco
index d6576004a..31bc0e9a0 100644
--- a/app/assets/javascripts/app/views/generic/radio.jst.eco
+++ b/app/assets/javascripts/app/views/generic/radio.jst.eco
@@ -1,9 +1,11 @@
-<div class="<%= @attribute.class %>">
+<div class="<%= @attribute.class %> radio radio--list">
 <% for row in @attribute.options: %>
-    <label>
-      <input type="radio" value="<%= row.value %>" name="<%= @attribute.name %>" <%= row.checked %>> <%= row.name %> <% if row.note: %>- <%- @T(row.note) %><% end %>
-      <%- @Icon('radio') %>
-      <%- @Icon('radio-checked') %>
-    </label>
+  <label class="inline-label radio-replacement<%= ' is-disabled' if row.disabled %>">
+    <input type="radio" value="<%= row.value %>" name="<%= @attribute.name %>" <%= row.checked %> <%= row.disabled %>>
+    <%- @Icon('radio', 'icon-unchecked') %>
+    <%- @Icon('radio-checked', 'icon-checked') %>
+    <span class="label-text"><%- @T(row.name) %></span>
+    <% if row.note: %><span class="help-text"><%- @T(row.note) %></span><% end %>
+  </label>
 <% end %>
-</div>
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/generic/user_permission.jst.eco b/app/assets/javascripts/app/views/generic/user_permission.jst.eco
index 0f769be2f..1a36aee11 100644
--- a/app/assets/javascripts/app/views/generic/user_permission.jst.eco
+++ b/app/assets/javascripts/app/views/generic/user_permission.jst.eco
@@ -4,7 +4,8 @@
     <input type="checkbox" value="<%= role.id %>" name="role_ids" <% if @rolesSelected[role.id]: %>checked<% end %>/>
     <%- @Icon('checkbox', 'icon-unchecked') %>
     <%- @Icon('checkbox-checked', 'icon-checked') %>
-    <span class="label-text"><%- @T(role.displayName()) %> <% if role.note: %>- <span class="help-text"><%- @T(role.note) %></span><% end %></span>
+    <span class="label-text"><%- @T(role.displayName()) %></span>
+    <% if role.note: %><span class="help-text"><%- @T(role.note) %></span><% end %>
   </label>
 <% end %>
   <div class="js-groups"></div>
diff --git a/app/assets/javascripts/app/views/profile/token_access_create.jst.eco b/app/assets/javascripts/app/views/profile/token_access_create.jst.eco
index 095abf0a7..827c269dd 100644
--- a/app/assets/javascripts/app/views/profile/token_access_create.jst.eco
+++ b/app/assets/javascripts/app/views/profile/token_access_create.jst.eco
@@ -20,15 +20,17 @@
       <input type="checkbox" value="<%= permission.name %>" name="permission" <% if @params && _.contains(@params.permissions, permission.id): %>checked<% end %> <% if permission.preferences.disabled: %>disabled<% end %>/>
       <%- @Icon('checkbox', 'icon-unchecked') %>
       <%- @Icon('checkbox-checked', 'icon-checked') %>
-      <span class="label-text"><%= permission.name %> - <span class="help-text"><%- @T.apply(@, [permission.note].concat(permission.preferences.translations)) %></span></span>
+      <span class="label-text"><%= permission.name %></span>
+      <span class="help-text"><%- @T.apply(@, [permission.note].concat(permission.preferences.translations)) %></span>
     </label>
     <% else: %>
-      <div style="padding-left: 20px;" class="js-subPermissionList">
+      <div class="checkbox-child js-subPermissionList">
         <label class="inline-label checkbox-replacement">
           <input type="checkbox" value="<%= permission.name %>" name="permission" <% if @params && _.contains(@params.permissions, permission.id): %>checked<% end %> <% if permission.preferences.disabled: %>disabled<% end %>/>
           <%- @Icon('checkbox', 'icon-unchecked') %>
           <%- @Icon('checkbox-checked', 'icon-checked') %>
-          <span class="label-text"><%= permission.name.replace(/^.+?\./, '') %> - <span class="help-text"><%- @T.apply(@, [permission.note].concat(permission.preferences.translations)) %></span></span></span>
+          <span class="label-text"><%= permission.name.replace(/^.+?\./, '') %></span>
+          <span class="help-text"><%- @T.apply(@, [permission.note].concat(permission.preferences.translations)) %></span>
         </label>
       </div>
     <% end %>
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index 80785e223..2278dbb65 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/app/assets/stylesheets/zammad.scss
@@ -1080,27 +1080,15 @@ th.align-right {
   vertical-align: middle;
 }
 
-.checkbox-list {
-  list-style: none;
-  margin-bottom: 15px;
-  padding: 3px 12px;
-  font-size: 14px;
-  line-height: 25px;
-  color: hsl(60,1%,34%);
-  background: white;
-  border: 1px solid hsl(0, 0%, 90%);
-  border-radius: 3px;
-}
-
 .checkbox-replacement,
 .radio-replacement {
   padding: 0;
   margin: 0;
-  @extend .u-clickable;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
+  @extend %clickable;
 
   .icon-checked {
     color: black;
@@ -1327,7 +1315,6 @@ h5 {
 }
 
 label,
-.checkbox.form-group label,
 .label {
   text-transform: uppercase;
   color: hsl(198,19%,72%);
@@ -1372,7 +1359,6 @@ table {
 
 .label-text {
   @include bidi-style(margin-left, 3px, margin-right, 0);
-  @extend %clickable;
 }
 
 .label-success,
@@ -1657,7 +1643,8 @@ input[type=date],
 input[type=url],
 textarea,
 .form-control,
-.checkbox.form-group .checkbox {
+.form-group .checkbox,
+.form-group .radio {
   display: block;
   padding: 7px 12px;
   width: 100%;
@@ -6931,31 +6918,64 @@ footer {
   }
 }
 
-.checkbox.form-group .checkbox {
-  margin-top: 0;
-  margin-bottom: 15px;
-  height: auto;
-  padding-top: 3px;
-  padding-bottom: 3px;
-  background: hsl(210,17%,98%);
-}
-
-.checkbox.form-group label {
-  padding: 0 2px;
-  cursor: default;
-}
-
 .checkbox,
 .radio {
-  &.form-group .controls label {
-    padding: 2px 0;
-    font: inherit;
-    font-size: 13px;
-    margin-bottom: 0;
+  font-size: 14px;
+  padding: 0 6px;
+  
+  .form-group & {
+    padding: 0 6px;
+    list-style: none;
+    height: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    border: none;
+  }
+
+  .checkbox-replacement {
+    display: inline-block;
+  }
+
+  label {
+    padding-left: 0;
+    min-height: 0;
+  }
+  
+  > label,
+  &-child {
+    margin-top: 5px;
+    font-family: inherit;
+    font-size: 14px;
     color: inherit;
     text-transform: inherit;
     letter-spacing: 0;
-    @extend .u-clickable;
+    line-height: 1.2;
+    
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &.is-disabled {
+      cursor: default;
+      touch-action: default;
+      
+      span {
+        opacity: .33;
+      }
+    }
+  }
+  
+  &-child {
+    padding-left: 20px;
+  }
+
+  .help-text {
+    display: table;
+    color: hsl(0,0%,60%);
+    margin-left: 18px;
+    font-size: .92em;
+    margin-bottom: 3px;
   }
 }
 
@@ -7965,7 +7985,7 @@ output {
   background: white;
   table-layout: auto;
   margin-bottom: 20px;
-  word-break: break-all;
+  word-break: break-word;
   word-wrap: break-word;
 
   &.is-invalid {