autocomplete: also indicate inactive organizations

This commit is contained in:
Felix Niklas 2018-07-03 11:49:40 +02:00
parent f4c50ae0fa
commit 3186d5e4d7
8 changed files with 40 additions and 22 deletions

View file

@ -90,7 +90,6 @@ class App.ObjectOrganizationAutocompletion extends App.Controller
@objectId.val('').trigger('change') @objectId.val('').trigger('change')
onObjectClick: (e) => onObjectClick: (e) =>
return if e.currentTarget.classList.contains('is-inactive')
objectId = $(e.currentTarget).data('object-id') objectId = $(e.currentTarget).data('object-id')
@selectObject(objectId) @selectObject(objectId)
@close() @close()

View file

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

View file

@ -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"> <div class="recipientList-iconSpacer">
<%- @Icon(@icon, 'recipientList-icon') %> <%- @Icon(@icon, 'recipientList-icon') %>
</div> </div>

View file

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

View file

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

View file

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

View file

@ -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="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"/> <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> </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"> </symbol><symbol id="icon-inactive-user" viewBox="0 0 16 16">
<title> <title>
inactive-user inactive-user

Before

Width:  |  Height:  |  Size: 74 KiB

After

Width:  |  Height:  |  Size: 74 KiB

View file

@ -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>

After

Width:  |  Height:  |  Size: 1.6 KiB