autocomplete: also indicate inactive organizations

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

@@ -90,7 +90,6 @@ 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()

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

@@ -1,5 +1,10 @@
 class App.UserOrganizationAutocompletion extends App.ObjectOrganizationAutocompletion
+  objectSingle: 'User'
+  objectIcon: 'user'
+  inactiveObjectIcon: 'inactive-user'
+  objectSingels: 'People'
   objectCreate: 'Create new Customer'
+  referenceAttribute: 'member_ids'
 
   newObject: (e) =>
     if e

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

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

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

@@ -1,10 +1,17 @@
 <li class="recipientList-entry js-organization" data-organization-id="<%- @organization.id %>">
   <div class="recipientList-iconSpacer">
+    <% if @organization.active is false: %>
+    <%- @Icon('inactive-organization', 'recipientList-icon') %>
+    <% else: %>
     <%- @Icon('organization', 'recipientList-icon') %>
+    <% end %>
   </div>
   <div class="recipientList-name">
     <%= @organization.displayName() %>
     <span class="recipientList-detail">- <%= @objectCount %> <%- @T(@objectSingels) %></span>
   </div>
+  <% if @organization.active is false: %>
+    <div class="recipientList-status"><%= @Ti('inactive') %></div>
+  <% end %>
   <%- @Icon('arrow-right', 'recipientList-arrow') %>
 </li>

app/assets/stylesheets/svg-dimensions.css

@@ -42,6 +42,7 @@
 .icon-horizontal-rule { width: 12px; height: 12px; }
 .icon-important { width: 16px; height: 16px; }
 .icon-in-process { width: 64px; height: 64px; }
+.icon-inactive-organization { width: 16px; height: 16px; }
 .icon-inactive-user { width: 16px; height: 16px; }
 .icon-info { width: 5px; height: 11px; }
 .icon-italic { width: 12px; height: 12px; }

app/assets/stylesheets/zammad.scss

@@ -6592,10 +6592,6 @@ footer {
   .dropdown li.is-active {
     background: hsl(205,90%,60%);
 
-    &.is-inactive {
-      background: none !important;
-    }
-
     + li {
       box-shadow: none;
     }
@@ -6742,21 +6738,6 @@ footer {
   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 {
@@ -6765,6 +6746,7 @@ footer {
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-shrink: 0;
   }
 
   .recipientList-icon {
@@ -6790,8 +6772,13 @@ footer {
   }
 
   .recipientList-status {
-    color: hsl(238,2%,56%);
     opacity: 0.5;
+    margin: 0 10px;
+    flex-shrink: 1;
+
+    &:last-child {
+      margin-right: 0;
+    }
   }
 
   .recipientList-arrow {

public/assets/images/icons.svg

@@ -311,6 +311,14 @@
         <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-organization" viewBox="0 0 16 16">
+    <title>
+        inactive-organization
+    </title>
+    <g fill-rule="evenodd">
+        <path d="M1 12.533V1h7v4h.533L7 6.533V6H6v1h.533L5 8.533V8H4v1h.533L3 10.533V10H2v1h.533L1 12.533zM3.73 15L6 12.73V13h1v-1h-.27l3-3H10v-.27L11.73 7H12v-.27L13.73 5H15v10H3.73zM2 9h1V8H2v1zm0-2h1V6H2v1zm0-2h1V4H2v1zm0-2h1V2H2v1zm2 4h1V6H4v1zm0-2h1V4H4v1zm0-2h1V2H4v1zm2 2h1V4H6v1zm0-2h1V2H6v1zm3 9v1h1v-1H9zm0-1h1v-1H9v1zm2 2h1v-1h-1v1zm0-2h1v-1h-1v1zm0-2h1V8h-1v1zm2 4h1v-1h-1v1zm0-2h1v-1h-1v1zm0-2h1V8h-1v1zm0-2h1V6h-1v1z"/>
+        <path fill-rule="nonzero" d="M13.786 1.453l.707.707L2.138 14.596l-.707-.707z"/>
+    </g>
 </symbol><symbol id="icon-inactive-user" viewBox="0 0 16 16">
     <title>
         inactive-user

public/assets/images/icons/inactive-organization.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-organization</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="inactive-organization" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M1,12.5328082 L1,1 L8,1 L8,5 L8.53280816,5 L7,6.53280816 L7,6 L6,6 L6,7 L6.53280816,7 L5,8.53280816 L5,8 L4,8 L4,9 L4.53280816,9 L3,10.5328082 L3,10 L2,10 L2,11 L2.53280816,11 L1,12.5328082 Z M3.72982965,15 L6,12.7298296 L6,13 L7,13 L7,12 L6.72982965,12 L9.72982965,9 L10,9 L10,8.72982965 L11.7298296,7 L12,7 L12,6.72982965 L13.7298296,5 L15,5 L15,15 L8,15 L3.72982965,15 Z M2,9 L3,9 L3,8 L2,8 L2,9 Z M2,7 L3,7 L3,6 L2,6 L2,7 Z M2,5 L3,5 L3,4 L2,4 L2,5 Z M2,3 L3,3 L3,2 L2,2 L2,3 Z M4,7 L5,7 L5,6 L4,6 L4,7 Z M4,5 L5,5 L5,4 L4,4 L4,5 Z M4,3 L5,3 L5,2 L4,2 L4,3 Z M6,5 L7,5 L7,4 L6,4 L6,5 Z M6,3 L7,3 L7,2 L6,2 L6,3 Z M9,12 L9,13 L10,13 L10,12 L9,12 Z M9,11 L10,11 L10,10 L9,10 L9,11 Z M11,13 L12,13 L12,12 L11,12 L11,13 Z M11,11 L12,11 L12,10 L11,10 L11,11 Z M11,9 L12,9 L12,8 L11,8 L11,9 Z M13,13 L14,13 L14,12 L13,12 L13,13 Z M13,11 L14,11 L14,10 L13,10 L13,11 Z M13,9 L14,9 L14,8 L13,8 L13,9 Z M13,7 L14,7 L14,6 L13,6 L13,7 Z" id="organization-tab-dark" 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>