recipientList WIP

app/assets/javascripts/app/views/agent_ticket_create.jst.eco

@@ -25,6 +25,134 @@
 
       <form role="form" class="ticket-create">
         <input type="hidden" name="formSenderType"/>
+        <div class="form-group">
+          <label for="customer_id">Customer</label>
+          <div class="recipientList dropdown">
+            <div class="dropdown-toggle u-positionOrigin" data-toggle="dropdown">
+              <input id="customer_id" name="customer_id_autocompletion" class="ui-autocomplete-input form-control" autocapitalize="off" placeholder="Enter Person or Organisation/Company" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
+              <span class="caret"></span>
+            </div>
+            <div class="dropdown-menu" aria-labelledby="customer_id">
+              <ul role="menu">
+                <li class="recipientList-entry u-clickable horizontal center">
+                  <label class="checkbox-replacement centered">
+                    <input type="checkbox" value="" name="select"/>
+                    <span class="checkbox icon"></span>
+                  </label>
+                  <div class="recipientList-icon centered">
+                    <div class="white organisation icon"></div>
+                  </div>
+                  <div class="recipientList-name flex u-textTruncat">
+                    Albrecht &amp; Bertschler GmbH
+                    <span class="recipientList-detail">- 4 Personen</span>
+                  </div>
+                <li class="recipientList-entry u-clickable horizontal center">
+                  <label class="checkbox-replacement centered">
+                    <input type="checkbox" value="" name="select"/>
+                    <span class="checkbox icon"></span>
+                  </label>
+                  <div class="recipientList-icon centered">
+                    <div class="white organisation icon"></div>
+                  </div>
+                  <div class="recipientList-name flex u-textTruncat">
+                    BENCHMARK human resources
+                    <span class="recipientList-detail">- 2 Personen</span>
+                  </div>
+                <li class="recipientList-entry u-clickable horizontal center">
+                  <label class="checkbox-replacement centered">
+                    <input type="checkbox" value="" name="select"/>
+                    <span class="checkbox icon"></span>
+                  </label>
+                  <div class="recipientList-icon centered">
+                    <div class="white user icon"></div>
+                  </div>
+                  <div class="recipientList-name flex u-textTruncat">
+                    Belinda Matt
+                    <span class="recipientList-detail">- Albrecht &amp; Bertschler GmbG</span>
+                  </div>
+                <li class="recipientList-entry u-clickable horizontal center">
+                  <label class="checkbox-replacement centered">
+                    <input type="checkbox" value="" name="select"/>
+                    <span class="checkbox icon"></span>
+                  </label>
+                  <div class="recipientList-icon centered">
+                    <div class="white user icon"></div>
+                  </div>
+                  <div class="recipientList-name flex u-textTruncat">
+                    Benjamin Wahlers
+                    <span class="recipientList-detail">- Wahlers Würste GmbH</span>
+                  </div>
+                <li class="recipientList-entry u-clickable horizontal center">
+                  <label class="checkbox-replacement centered">
+                    <input type="checkbox" value="" name="select"/>
+                    <span class="checkbox icon"></span>
+                  </label>
+                  <div class="recipientList-icon centered">
+                    <div class="white user icon"></div>
+                  </div>
+                  <div class="recipientList-name flex u-textTruncat ">
+                    Benjamin Weiß
+                    <span class="recipientList-detail">- Zeughaus Werbeagentur GmbH</span>
+                  </div>
+                <li class="recipientList-entry u-clickable horizontal center">
+                  <label class="checkbox-replacement centered">
+                    <input type="checkbox" value="" name="select"/>
+                    <span class="checkbox icon"></span>
+                  </label>
+                  <div class="recipientList-icon centered">
+                    <div class="white organisation icon"></div>
+                  </div>
+                  <div class="recipientList-name flex u-textTruncat">
+                    Benteler SGL Composite Technology GmbH
+                    <span class="recipientList-detail"></span>
+                  </div>
+                <li class="recipientList-entry u-clickable horizontal center">
+                  <label class="checkbox-replacement centered">
+                    <input type="checkbox" value="" name="select"/>
+                    <span class="checkbox icon"></span>
+                  </label>
+                  <div class="recipientList-icon centered">
+                    <div class="white team icon"></div>
+                  </div>
+                  <div class="recipientList-name flex u-textTruncat">
+                    Support Team Berlin
+                    <span class="recipientList-detail">- 5 Personen</span>
+                  </div>
+                <li class="recipientList-entry u-clickable horizontal center">
+                  <label class="checkbox-replacement centered">
+                    <input type="checkbox" value="" name="select"/>
+                    <span class="checkbox icon"></span>
+                  </label>
+                  <div class="recipientList-icon centered">
+                    <div class="white organisation icon"></div>
+                  </div>
+                  <div class="recipientList-name flex u-textTruncat">
+                    Bernecker + Rainer Industrie-Elektronik Ges.m.b.H.
+                    <span class="recipientList-detail">- 3 Personen</span>
+                  </div>
+                <li class="recipientList-entry u-clickable horizontal center">
+                  <label class="checkbox-replacement centered">
+                    <input type="checkbox" value="" name="select"/>
+                    <span class="checkbox icon"></span>
+                  </label>
+                  <div class="recipientList-icon centered">
+                    <div class="white organisation icon"></div>
+                  </div>
+                  <div class="recipientList-name flex u-textTruncat">
+                    Bertsch Ecopower GmbH
+                    <span class="recipientList-detail">- 1 Person</span>
+                  </div>
+                <li class="recipientList-entry recipientList-new u-clickable horizontal center">
+                  <div class="recipientList-icon centered">
+                    <div class="white plus icon"></div>
+                  </div>
+                  <div class="recipientList-name flex u-textTruncat">
+                    <%- @T('Create new Customer') %>
+                  </div>
+              </ul>
+            </div>
+          </div>
+        </div>
         <div class="ticket-form-top"></div>
         <div class="article-form-top"></div>
 

app/assets/stylesheets/zzz.css.erb

@@ -248,17 +248,16 @@ table {
   padding: 0;
 }
 
-.table .checkbox-replacement {
+.checkbox-replacement {
   padding: 0;
   margin: 0;
   height: 38px;
   cursor: pointer;
   -webkit-user-select: none;
-     -moz-user-select: none;
           user-select: none;
 }
 
-.table .checkbox-replacement input[type=checkbox] {
+.checkbox-replacement input[type=checkbox] {
   display: none;
 }
 
@@ -433,7 +432,7 @@ label {
   .form-control:focus,
   .tokenfield.focus {
     box-shadow: none;
-    border-color: #419ed7 !important;
+    border-color: hsl(0,0%,90%);
   }
 
   .has-error .form-control,
@@ -3122,6 +3121,82 @@ footer {
     border: none;
   }
 
+.caret {
+  position: absolute;
+  top: 50%;
+  margin-top: -3px;
+  right: 10px;
+}
+
+.recipientList .dropdown-menu {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  color: white;
+  background: hsl(234,10%,19%);
+  border-radius: 0;
+  border: none;
+  box-shadow: none;
+}
+  .recipientList .dropdown-menu ul {
+    margin: 0;
+  }
+
+  .recipientList-entry {
+    height: 40px;
+    padding-left: 5px;
+  }
+
+  .recipientList-entry .checkbox-replacement {
+    width: 30px;
+    opacity: 0.7;
+  }
+
+  .recipientList-icon {
+    width: 30px;
+  }
+
+  .recipientList-entry:not(.recipientList-new) .recipientList-icon {
+    opacity: 0.2;
+  }
+
+  .recipientList-name {
+    margin-left: 5px;
+    margin-top: 2px;
+  }
+
+  .recipientList-entry:not(:last-child):not(:first-child) {
+    box-shadow: 0 1px rgba(255,255,255,.13) inset;
+  }
+
+  .recipientList-entry:hover {
+    background: hsl(205,90%,60%);
+  }
+
+    .recipientList-entry:hover + :not(:last-child):not(:first-child) {
+      box-shadow: none;
+    }
+
+    .recipientList-entry:hover .recipientList-icon {
+      opacity: 1;
+    }
+
+  .recipientList-detail {
+    opacity: 0.5;
+  }
+
+  .recipientList-icon.plus {
+    margin-left: 13px;
+  }
+
+  .recipientList-new {
+    background: hsl(145,51%,45%);
+  }
+
+  .recipientList-new:hover {
+    background: hsl(147,52%,43%);
+  }
+
 /*
 
   ----------------