autocomplete: indicate inactive users and make them non-selectable

app/assets/javascripts/app/lib/app_post/_object_organization_autocompletion.coffee

@@ -27,6 +27,7 @@ class App.ObjectOrganizationAutocompletion extends App.Controller
 
   objectSingle: 'User'
   objectIcon: 'user'
+  inactiveObjectIcon: 'inactive-user'
   objectSingels: 'People'
   objectCreate: 'Create new object'
   referenceAttribute: 'member_ids'
@@ -89,6 +90,7 @@ class App.ObjectOrganizationAutocompletion extends App.Controller
     @objectId.val('').trigger('change')
 
   onObjectClick: (e) =>
+    return if e.currentTarget.classList.contains('is-inactive')
     objectId = $(e.currentTarget).data('object-id')
     @selectObject(objectId)
     @close()
@@ -257,9 +259,14 @@ class App.ObjectOrganizationAutocompletion extends App.Controller
         organizationMemebers.append(@buildObjectItem(object))
 
   buildObjectItem: (object) =>
+    icon = @objectIcon
+
+    if object.active is false and @inactiveObjectIcon
+      icon = @inactiveObjectIcon
+
     App.view(@templateObjectItem)(
       object: object
-      icon: @objectIcon
+      icon: icon
     )
 
   buildObjectNew: =>

app/assets/javascripts/app/lib/app_post/user_organization_autocompletion.coffee

@@ -1,9 +1,5 @@
 class App.UserOrganizationAutocompletion extends App.ObjectOrganizationAutocompletion
-  objectSingle: 'User'
-  objectIcon: 'user'
-  objectSingels: 'People'
   objectCreate: 'Create new Customer'
-  referenceAttribute: 'member_ids'
 
   newObject: (e) =>
     if e
@@ -18,10 +14,15 @@ class App.UserOrganizationAutocompletion extends App.ObjectOrganizationAutocompl
     if @Config.get('ui_user_organization_selector_with_email') && !_.isEmpty(object.email)
       realname += " <#{object.email}>"
 
+    icon = @objectIcon
+
+    if object.active is false and @inactiveObjectIcon
+      icon = @inactiveObjectIcon
+
     App.view(@templateObjectItem)(
       realname: realname
       object: object
-      icon: @objectIcon
+      icon: icon
     )
 
 class UserNew extends App.ControllerModal

app/assets/javascripts/app/views/generic/object_search/item_object.jst.eco

@@ -1,4 +1,4 @@
-<li class="recipientList-entry js-object" data-object-id="<%= @object.id %>">
+<li class="recipientList-entry js-object<% if @object.active is false: %> is-inactive<% end %>" data-object-id="<%= @object.id %>">
   <div class="recipientList-iconSpacer">
     <%- @Icon(@icon, 'recipientList-icon') %>
   </div>
@@ -12,4 +12,7 @@
       <span class="recipientList-detail">- <%= @object.organization.displayName() %></span>
     <% end %>
   </div>
+  <% if @object.active is false: %>
+    <div class="recipientList-status"><%= @Ti('inactive') %></div>
+  <% end %>
 </li>

app/assets/stylesheets/svg-dimensions.css

@@ -2,6 +2,7 @@
 .icon-arrow-left { width: 7px; height: 13px; }
 .icon-arrow-right { width: 7px; height: 13px; }
 .icon-arrow-up { width: 13px; height: 7px; }
+.icon-bold { width: 12px; height: 12px; }
 .icon-chat { width: 24px; height: 24px; }
 .icon-checkbox-checked { width: 11px; height: 11px; }
 .icon-checkbox-indeterminate { width: 11px; height: 11px; }
@@ -38,9 +39,12 @@
 .icon-google-button { width: 29px; height: 24px; }
 .icon-group { width: 24px; height: 24px; }
 .icon-help { width: 16px; height: 16px; }
+.icon-horizontal-rule { width: 12px; height: 12px; }
 .icon-important { width: 16px; height: 16px; }
 .icon-in-process { width: 64px; height: 64px; }
+.icon-inactive-user { width: 16px; height: 16px; }
 .icon-info { width: 5px; height: 11px; }
+.icon-italic { width: 12px; height: 12px; }
 .icon-line-left-arrow { width: 34px; height: 7px; }
 .icon-line-right-arrow { width: 34px; height: 7px; }
 .icon-linkedin-button { width: 29px; height: 24px; }
@@ -93,6 +97,7 @@
 .icon-status-modified-outer-circle { width: 16px; height: 16px; }
 .icon-status { width: 16px; height: 16px; }
 .icon-stopwatch { width: 77px; height: 83px; }
+.icon-strikethrough { width: 12px; height: 12px; }
 .icon-switchView { width: 19px; height: 18px; }
 .icon-task-state { width: 16px; height: 16px; }
 .icon-team { width: 16px; height: 16px; }
@@ -103,7 +108,9 @@
 .icon-trash { width: 16px; height: 16px; }
 .icon-twitter-button { width: 29px; height: 24px; }
 .icon-twitter { width: 17px; height: 17px; }
+.icon-underline { width: 12px; height: 12px; }
 .icon-unmute { width: 16px; height: 16px; }
+.icon-unordered-list { width: 12px; height: 12px; }
 .icon-user { width: 16px; height: 16px; }
 .icon-web { width: 17px; height: 17px; }
 .icon-weibo-button { width: 29px; height: 24px; }

app/assets/stylesheets/zammad.scss

@@ -6591,12 +6591,15 @@ footer {
   .dropdown li:hover,
   .dropdown li.is-active {
     background: hsl(205,90%,60%);
-  }
 
-    .dropdown li:hover + li,
-    .dropdown li.is-active + li {
+    &.is-inactive {
+      background: none !important;
+    }
+
+    + li {
       box-shadow: none;
     }
+  }
 
   .dropdown-menu > li.danger:hover,
   .dropdown-menu > li.danger.is-active {
@@ -6736,9 +6739,24 @@ footer {
 }
 
 .recipientList-entry {
-  @extend .u-clickable;
   display: flex;
   align-items: center;
+  @extend .u-clickable;
+
+  &.is-inactive {
+    cursor: not-allowed;
+
+    &:hover,
+    &.is-active {
+      .recipientList-icon {
+        opacity: 0.2;
+      }
+    }
+
+    .recipientList-name {
+      color: hsl(238,2%,56%);
+    }
+  }
 }
 
   .recipientList-entry .recipientList-iconSpacer {
@@ -6756,13 +6774,12 @@ footer {
     opacity: 0.2;
   }
 
-  .recipientList--new .recipientList-icon {
-    opacity: 1;
-  }
-
-  .recipientList-entry:hover .recipientList-icon,
-  .recipientList-entry.is-active .recipientList-icon {
-    opacity: 1;
+  .recipientList--new,
+  .recipientList-entry:hover,
+  .recipientList-entry.is-active {
+    .recipientList-icon {
+      opacity: 1;
+    }
   }
 
   .recipientList-name {
@@ -6772,6 +6789,11 @@ footer {
     @extend .u-textTruncate;
   }
 
+  .recipientList-status {
+    color: hsl(238,2%,56%);
+    opacity: 0.5;
+  }
+
   .recipientList-arrow {
     fill: white;
     opacity: 0.39;

public/assets/images/icons.svg

@@ -20,6 +20,11 @@
         arrow-up
     </title>
     <path d="M10.727 7l1.396-1.424L6.433 0 .85 5.583l1.41 1.41 4.173-4.095z" fill-rule="evenodd"/>
+</symbol><symbol id="icon-bold" viewBox="0 0 12 12">
+    <title>
+        bold
+    </title>
+    <path d="M7.406 5.703c1.143.217 2.286.753 2.286 2.417 0 2.2-1.75 2.88-4.182 2.88H2.5V1h2.62c2.575 0 4.138.724 4.138 2.547 0 1.245-.897 1.954-1.852 2.156zm-2.102-3.3h-.897V5.11H5.58c1.042 0 1.722-.463 1.722-1.404 0-1.013-.694-1.302-1.997-1.302zm.22 7.164c1.26 0 2.171-.26 2.171-1.52 0-1.2-.853-1.606-1.968-1.606H4.41v3.126h1.115z" fill-rule="evenodd"/>
 </symbol><symbol id="icon-chat" viewBox="0 0 24 24">
     <title>
         chat
@@ -285,6 +290,14 @@
         help
     </title>
     <path d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0zm-1 0A7 7 0 1 0 1 8a7 7 0 0 0 14 0zm-4.328-1.97c0-.995-.805-1.877-2.503-1.877-1.106 0-1.933.458-2.581 1.206l1.14.883c.402-.458.849-.682 1.296-.682.491 0 .782.224.782.626 0 .916-1.766.85-1.766 2.771v.28h1.62v-.224c0-1.296 2.012-1.173 2.012-2.983zm-1.788 5.073c0-.559-.447-1.017-1.017-1.017-.57 0-1.017.458-1.017 1.017 0 .558.447 1.017 1.017 1.017.57 0 1.017-.459 1.017-1.017z" fill="#000" fill-rule="evenodd"/>
+</symbol><symbol id="icon-horizontal-rule" viewBox="0 0 12 12">
+    <title>
+        horizontal-rule
+    </title>
+    <g fill-rule="evenodd">
+        <path d="M0 5h12v1H0z"/>
+        <path fill-opacity=".3" d="M1 0h10v3H1zM1 8h10v3H1z"/>
+    </g>
 </symbol><symbol id="icon-important" viewBox="0 0 16 16">
     <title>
         important
@@ -298,11 +311,27 @@
         <path d="M7.997 43.981a644.16 644.16 0 0 0 0-11.995c-2.244.046-4.129-.852-5.998-2.998C.793 27.84 0 25.945 0 23.99V7.997C0 3.792 3.77 0 7.997 0h30.988c5.153 0 8.922 3.592 8.996 7.997.025 5.474.025 10.563 0 15.993-.173 4.45-3.942 8.042-8.996 7.996-5.857.046-11.907.046-17.993 0-.56.046-1.353.345-2 1-3.519 3.436-6.99 7.228-10.995 10.995.335.025.235.025 0 0z"/>
         <path d="M52 20c3.609-.172 7.144-.172 10 3 1.185 1.404 1.993 3.195 2 5-.007 5.358-.209 10.432 0 15 .195 4.983-4.148 8.863-8 9 .316.062.114.161 0 0a272.316 272.316 0 0 0 0 12c-.593-.497-.997-.696-1-1-3.634-3.278-6.967-6.561-10-10-1.11-.64-1.917-1.038-3-1-6.09.062-12.15-.038-18 0-5.565-.038-9.707-4.813-9-10 .202-.385.404-.683 1-1 1.222-1.474 2.637-2.966 4-4 .657-.757 1.364-.956 2-1a1091.5 1091.5 0 0 0 17 0c6.002.044 11.356-4.134 13-10-.028-1.795-.23-3.785 0-6z" fill="#A9BCC4" opacity=".4"/>
     </g>
+</symbol><symbol id="icon-inactive-user" viewBox="0 0 16 16">
+    <title>
+        inactive-user
+    </title>
+    <g fill-rule="evenodd">
+        <path d="M3.765 14.964l5.762-5.761.01 1.04s.321.185 1.679.75c1.357.565.931.142 2.037.695C15 12.562 15 14.964 15 14.964H3.765zm2.1-7.296a4.628 4.628 0 0 1-.055-.33c-.318.093-.423-.375-.442-.672-.017-.288-.184-1.186.204-1.105-.08-.6-.136-1.14-.108-1.427C5.56 3.128 6.525 2.077 8.01 2c1.225.054 1.931.586 2.277 1.245L5.864 7.668z"/>
+        <path fill-rule="nonzero" d="M13.786 1.453l.707.707L2.138 14.596l-.707-.707z"/>
+    </g>
 </symbol><symbol id="icon-info" viewBox="0 0 5 11">
     <title>
         info
     </title>
     <path d="M2.321 4h1.17c.281 0 .45.127.45.408 0 .226-.028.465-.07.69l-.465 2.55c-.056.282-.113.563-.14.845-.015.14 0 .282.041.408.043.184.183.282.367.254.155-.014.295-.07.45-.127.113-.042.226-.127.338-.169.17-.07.324.056.268.226a.584.584 0 0 1-.17.281c-.436.437-.957.704-1.577.704-.295 0-.577 0-.873-.042-.479-.07-1.084-.662-1-1.282.057-.436.127-.859.197-1.281.127-.747.254-1.493.395-2.24.014-.042.014-.098.014-.14 0-.31-.099-.423-.409-.465-.126-.014-.267-.028-.394-.07-.155-.057-.225-.17-.211-.296.014-.127.098-.212.267-.24C1.054 4 1.152 4 1.237 4h1.084zm1.874-1.989c0 .662-.535 1.197-1.183 1.197-.662 0-1.198-.549-1.198-1.21C1.814 1.334 2.35.8 3.012.8c.662 0 1.183.535 1.183 1.211z" fill-rule="evenodd"/>
+</symbol><symbol id="icon-italic" viewBox="0 0 12 12">
+    <title>
+        italic
+    </title>
+    <g fill-rule="evenodd">
+        <path d="M6.667 1H8.5L5.333 11H3.5z"/>
+        <path d="M5 1h5v1H5zM2 10h5v1H2z"/>
+    </g>
 </symbol><symbol id="icon-line-left-arrow" viewBox="0 0 34 7">
     <title>
         line-left-arrow
@@ -620,6 +649,14 @@
         <path d="M10.5 24.8c-1-.9-2.1-1.9-3-2.8l6.2-6.2c.8.9 1.7 1.9 2.6 2.9.8-.6 1.4-1.1 2-1.5 3.9-2.9 8.2-4.9 12.9-6 .7-.2.9-.4.9-1.1-.1-1.7 0-3.4 0-5.2h15.4v6C60.3 14.2 69.4 21.8 74 34.1c3.6 9.6 3 19.2-1.4 28.4-8.9 18.6-31.4 25.9-49.9 16.2-19-9.9-25.9-35.4-12.2-53.9zM40.048 75c15.134 0 27.644-12.107 27.947-27.442.302-16.143-12.712-28.25-27.442-28.552C25.318 18.703 12.203 30.91 12 46.549 11.9 62.489 24.309 75 40.048 75zM14.9 12.4c-.3.5-.4 1.1-.8 1.5-2.9 2.9-5.8 5.8-8.6 8.7-.7.7-1.5.8-2.4.5-1.3-.4-2.1-1.3-2.5-2.5-.3-.9-.2-1.7.5-2.5l8.6-8.6c.6-.6 1.4-.8 2.2-.6 1.5.3 2.8 1.9 3 3.5zm18.8-8.5c-.2-1.4.3-2.6 1.6-3.1 2.9-1.1 5.9-1.1 8.9 0 1.2.4 1.8 1.6 1.7 3.1H33.7z" fill="#A9BCC4"/>
         <circle opacity=".3" cx="39.902" cy="46.902" r="24.902"/>
     </g>
+</symbol><symbol id="icon-strikethrough" viewBox="0 0 12 12">
+    <title>
+        strikethrough
+    </title>
+    <g fill-rule="evenodd">
+        <path d="M1 6h10v1H1z"/>
+        <path d="M6.075 1c1.32 0 2.149.393 2.935 1.11l-.66.744c-.73-.59-1.404-.843-2.219-.843-1.025 0-1.798.492-1.798 1.433 0 .857.408 1.264 2.15 1.798 1.586.477 2.836 1.095 2.836 2.907C9.32 9.834 8.055 11 5.934 11c-1.376 0-2.443-.463-3.244-1.236l.688-.772c.716.618 1.475.997 2.542.997 1.18 0 2.135-.604 2.135-1.798 0-.997-.477-1.433-2.135-1.938-1.896-.576-2.837-1.292-2.837-2.767C3.083 2.039 4.32 1 6.075 1z"/>
+    </g>
 </symbol><symbol id="icon-switchView" viewBox="0 0 19 18">
     <title>
         switchView
@@ -706,6 +743,13 @@
         twitter
     </title>
     <path d="M14.176 4.983a3.895 3.895 0 0 0 1.419-1.685c-.609.396-1.318.595-2.027.694-.609-.595-1.42-.992-2.23-.992-1.723 0-3.142 1.388-3.142 3.074 0 .199 0 .496.101.695-2.635-.1-4.865-1.389-6.385-3.174a2.752 2.752 0 0 0-.405 1.488c0 1.09.507 1.983 1.419 2.578-.507 0-1.014-.198-1.42-.397 0 1.488 1.116 2.678 2.535 2.976-.305.099-.507.099-.811.099-.203 0-.406 0-.608-.1a3.068 3.068 0 0 0 2.939 2.083c-1.115.794-2.433 1.29-3.852 1.29H1A8.888 8.888 0 0 0 5.764 15c5.777 0 8.817-4.661 8.817-8.628v-.397A6.735 6.735 0 0 0 16 4.488c-.608.198-1.115.396-1.824.495z" fill-rule="evenodd"/>
+</symbol><symbol id="icon-underline" viewBox="0 0 12 12">
+    <title>
+        underline
+    </title>
+    <g fill-rule="evenodd">
+        <path d="M9 1v5.12C9 7.803 7.98 9 6 9 3.994 9 3 7.803 3 6.12V1h1.125v4.727c0 1.347.564 2.182 1.875 2.182 1.324 0 1.875-.835 1.875-2.182V1H9zM3 10h6v1H3z"/>
+    </g>
 </symbol><symbol id="icon-unmute" viewBox="0 0 16 16">
     <title>
         unmute
@@ -713,6 +757,13 @@
     <g fill-rule="evenodd">
         <path d="M1 6v4h3l4 3V3L4 6zM10.327 5.115c2.231 1.455 2.231 4.315 0 5.77a.5.5 0 1 0 .546.838c2.837-1.85 2.837-5.596 0-7.446a.5.5 0 0 0-.546.838zm1.2-1.422c3.322 2.166 3.322 6.448 0 8.614a.5.5 0 1 0 .546.838c3.928-2.56 3.928-7.73 0-10.29a.5.5 0 0 0-.546.838zm-2.3 2.988c1.03.671 1.03 1.967 0 2.638a.5.5 0 1 0 .546.838c1.636-1.066 1.636-3.248 0-4.314a.5.5 0 1 0-.546.838z"/>
     </g>
+</symbol><symbol id="icon-unordered-list" viewBox="0 0 12 12">
+    <title>
+        unordered-list
+    </title>
+    <g fill-rule="evenodd">
+        <path d="M4 1h7v1H4zM2.5 2.1a.6.6 0 1 0 0-1.2.6.6 0 0 0 0 1.2zM4 4h7v1H4zM2.5 5.1a.6.6 0 1 0 0-1.2.6.6 0 0 0 0 1.2zM4 7h7v1H4zM2.5 8.1a.6.6 0 1 0 0-1.2.6.6 0 0 0 0 1.2zM4 10h7v1H4zM2.5 11.1a.6.6 0 1 0 0-1.2.6.6 0 0 0 0 1.2z"/>
+    </g>
 </symbol><symbol id="icon-user" viewBox="0 0 16 16">
     <title>
         user

public/assets/images/icons/bold.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>bold</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="bold" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M7.40593343,5.70332851 C8.54920405,5.92040521 9.69247467,6.45586107 9.69247467,8.12011577 C9.69247467,10.3198263 7.94138929,11 5.51013025,11 L2.5,11 L2.5,1 L5.11939219,1 C7.69536903,1 9.25832127,1.723589 9.25832127,3.54703329 C9.25832127,4.79160637 8.36107091,5.50072359 7.40593343,5.70332851 Z M5.30439327,2.40376266 L4.40714291,2.40376266 L4.40714291,5.10998553 L5.57935709,5.10998553 C6.62132526,5.10998553 7.30149892,4.64688857 7.30149892,3.70622287 C7.30149892,2.69319826 6.60685348,2.40376266 5.30439327,2.40376266 Z M5.52460203,9.56729378 C6.78364689,9.56729378 7.69536903,9.30680174 7.69536903,8.04775687 C7.69536903,6.84659913 6.84153401,6.44138929 5.72720695,6.44138929 L4.41027496,6.44138929 L4.41027496,9.56729378 L5.52460203,9.56729378 Z" id="B" fill="#50E3C2"></path>
+    </g>
+</svg>

public/assets/images/icons/horizontal-rule.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>horizontal-rule</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="horizontal-rule" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle-11" fill="#50E3C2" x="0" y="5" width="12" height="1"></rect>
+        <rect id="Rectangle-12" fill-opacity="0.3" fill="#50E3C2" x="1" y="0" width="10" height="3"></rect>
+        <rect id="Rectangle-12-Copy" fill-opacity="0.3" fill="#50E3C2" x="1" y="8" width="10" height="3"></rect>
+    </g>
+</svg>

public/assets/images/icons/inactive-user.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>inactive-user</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="inactive-user" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M3.76545098,14.9643787 L9.52706541,9.20276424 L9.53662527,10.2434744 C9.53662527,10.2434744 9.85818398,10.4279021 11.2155128,10.9927865 C12.5728415,11.5584145 12.1470216,11.1354205 13.2528445,11.6881089 C15,12.561761 15,14.9643787 15,14.9643787 L8.01018815,14.9643787 L3.76545098,14.9643787 Z M5.864355,7.66845316 C5.8435167,7.5659126 5.82514408,7.4560882 5.80999479,7.33858853 C5.49185692,7.43095114 5.38685209,6.96333755 5.36811185,6.66557596 C5.35100766,6.37807689 5.18398156,5.47973526 5.5720235,5.56079423 C5.49260058,4.96095783 5.4356362,4.42016807 5.46359783,4.13356139 C5.5608686,3.12768647 6.52509853,2.07674574 8.01033688,2 C9.23475762,2.05368438 9.94096723,2.58568938 10.287343,3.24546519 L5.864355,7.66845316 Z" id="Combined-Shape" fill="#50E3C2"></path>
+        <polygon id="Line" fill="#50E3C2" fill-rule="nonzero" points="13.7859092 1.45319036 14.493016 2.16029714 2.13799065 14.5961654 1.43088387 13.8890586"></polygon>
+    </g>
+</svg>