From 7253631f54d9fc0d08163b7ffe220d816310df65 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Fri, 21 Jul 2017 15:06:07 +0200
Subject: [PATCH] Inputs: readonly and disabled state
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- inputs and textareas will get a dark background as an indicator when they’re set to readonly
- checkboxes and radios can’t be set to readonly (html limitation)
- added disabled support for the zammad-switch
---
 .../app/views/layout_ref/inputs.jst.eco       |  4 ++
 app/assets/stylesheets/zammad.scss            | 62 +++++++++++++------
 2 files changed, 48 insertions(+), 18 deletions(-)

diff --git a/app/assets/javascripts/app/views/layout_ref/inputs.jst.eco b/app/assets/javascripts/app/views/layout_ref/inputs.jst.eco
index 7fc1e34c6..50ff41cc4 100644
--- a/app/assets/javascripts/app/views/layout_ref/inputs.jst.eco
+++ b/app/assets/javascripts/app/views/layout_ref/inputs.jst.eco
@@ -51,6 +51,10 @@
       <label for="id1">Name</label>
       <input id="id1" class="form-control" type="text" placeholder="Text Input">
     </div>
+    <div class="input form-group">
+      <label for="id1">Name (readonly)</label>
+      <input id="id1" class="form-control" type="text" placeholder="Text Input" readonly value="Sandor Clegane">
+    </div>
     <div class="input form-group">
       <label for="id2">Password</label>
       <input id="id2" class="form-control" type="password" value="Password Input">
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index 3ab10f4d1..e4557822d 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/app/assets/stylesheets/zammad.scss
@@ -398,7 +398,8 @@ pre code.hljs {
   }
 
   &.is-disabled,
-  &[disabled] {
+  &[disabled],
+  &:disabled {
     pointer-events: none;
     cursor: not-allowed;
     opacity: .33;
@@ -1623,6 +1624,24 @@ textarea,
     border-color: hsl(200,71%,59%);
     box-shadow: 0 0 0 3px hsl(201,62%,90%);
   }
+
+  &.is-disabled, // .is-disabled should not be used - legacy support
+  &[disabled],
+  &[readonly] {
+    background: hsl(210,17%,93%);
+    border-color: hsl(210,10%,85%);
+    
+    &:focus,
+    &.focus {
+      border-color: hsl(200,71%,59%);
+    }
+  }
+
+  &.is-disabled, // .is-disabled should not be used
+  &[disabled] {
+    cursor: not-allowed;
+    opacity: 1;
+  }
 }
 
 input[type=url] {
@@ -1700,13 +1719,6 @@ select.form-control:not([multiple]) {
   display: none;
 }
 
-.form-control[disabled], .form-control.is-disabled {
-  cursor: not-allowed;
-  background-color: #fff;
-  color: #d5d5d5;
-  opacity: 1;
-}
-
 .form-control.form-control--borderless {
   border: none;
   padding: 0;
@@ -5487,8 +5499,13 @@ footer {
   .newTicket .sidebar {
     width: 290px;
   }
-  .newTicket .form-control:not(:focus):not(.focus) {
+  .newTicket .form-control {
     border-color: hsl(0,0%,90%);
+    
+    &:focus,
+    &.focus {
+      border-color: hsl(200,71%,59%);
+    }
   }
   .newTicket .article-form-top {
     margin-top: 15px;
@@ -6309,15 +6326,18 @@ footer {
   cursor: default;
 }
 
-.checkbox.form-group .controls label {
-  padding: 2px 0;
-  font: inherit;
-  font-size: 13px;
-  margin-bottom: 0;
-  color: inherit;
-  text-transform: inherit;
-  letter-spacing: 0;
-  @extend .u-clickable;
+.checkbox,
+.radio {
+  &.form-group .controls label {
+    padding: 2px 0;
+    font: inherit;
+    font-size: 13px;
+    margin-bottom: 0;
+    color: inherit;
+    text-transform: inherit;
+    letter-spacing: 0;
+    @extend .u-clickable;
+  }
 }
 
 .userSearch-label {
@@ -7191,6 +7211,12 @@ output {
 .zammad-switch input {
   display: none;
 
+  &[disabled] + label {
+    cursor: not-allowed;
+    background: hsl(210,17%,93%);
+    border-color: hsl(210,10%,85%);
+  }
+
   &:focus + label {
     transition: none;
     background: hsl(200,71%,59%);