add organisationList to recipientList

with fade animation and back button

app/assets/javascripts/app/controllers/agent_ticket_create.js.coffee

@@ -1,6 +1,6 @@
 class App.TicketCreate extends App.Controller
   elements:
-    '.tabsSidebar'  : 'sidebar'
+    '.tabsSidebar'      : 'sidebar'
 
   events:
     'click .type-tabs .tab':  'changeFormType'
@@ -8,6 +8,8 @@ class App.TicketCreate extends App.Controller
     'submit form':            'submit'
     'click .submit':          'submit'
     'click .cancel':          'cancel'
+    'click .js-organisation': 'showOrganisationMembers'
+    'click .js-back':         'hideOrganisationMembers'
 
   constructor: (params) ->
     super
@@ -37,6 +39,58 @@ class App.TicketCreate extends App.Controller
       @log 'notice', 'error', defaults
       @render(defaults)
 
+  showOrganisationMembers: (e) =>
+    e.stopPropagation()
+
+    list = @$('.recipientList')
+    organisationList = @$('.recipientList-organisationMembers')
+
+    # move organisation-list to the right and slide it in
+
+    $.Velocity.hook(organisationList, 'translateX', '100%')
+    organisationList.removeClass('hide')
+
+    organisationList.velocity
+      properties:
+        translateX: 0
+      options:
+        speed: 300
+
+    # fade out list
+
+    list.velocity
+      properties:
+        translateX: '-100%'
+      options:
+        speed: 300
+        complete: -> list.height(organisationList.height())
+
+  hideOrganisationMembers: (e) =>
+    e && e.stopPropagation()
+    list = @$('.recipientList')
+    organisationList = @$('.recipientList-organisationMembers')
+
+    # fade list back in
+
+    list.velocity
+      properties:
+        translateX: 0
+      options:
+        speed: 300
+
+    # reset list height
+
+    list.height('')
+
+    # slide out organisation-list and hide it
+
+    organisationList.velocity
+      properties:
+        translateX: '100%'
+      options:
+        speed: 300
+        complete: -> organisationList.addClass('hide')
+
   changeFormType: (e) =>
     type = $(e.target).data('type')
     if !type

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

@@ -27,129 +27,154 @@
         <input type="hidden" name="formSenderType"/>
         <div class="form-group">
           <label for="customer_id">Customer</label>
-          <div class="recipientList dropdown">
+          <div class="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">
+              <ul class="recipientList zIndex-1" role="menu">
+                <li class="recipientList-entry u-clickable horizontal center js-organisation">
+                  <div class="recipientList-iconSpacer 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 right arrow icon"></div>
+
+                <li class="recipientList-entry u-clickable horizontal center js-organisation">
+                  <div class="recipientList-iconSpacer 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>
+                  <div class="white right arrow icon"></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="recipientList-iconSpacer 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="recipientList-iconSpacer 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="recipientList-iconSpacer 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="recipientList-iconSpacer 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">
+
+                <li class="recipientList-entry u-clickable horizontal center js-organisation">
+                  <div class="recipientList-iconSpacer 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 right arrow icon"></div>
+
+                <li class="recipientList-entry u-clickable horizontal center js-organisation">
+                  <div class="recipientList-iconSpacer 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 right arrow icon"></div>
+
+                <li class="recipientList-entry u-clickable horizontal center js-organisation">
+                  <div class="recipientList-iconSpacer 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>
+                  <div class="white right arrow icon"></div>
+
                 <li class="recipientList-entry recipientList-new u-clickable horizontal center">
-                  <div class="recipientList-icon centered">
+                  <div class="recipientList-iconSpacer centered">
                     <div class="white plus icon"></div>
                   </div>
                   <div class="recipientList-name flex u-textTruncat">
                     <%- @T('Create new Customer') %>
                   </div>
               </ul>
+
+
+              <ul class="recipientList-organisationMembers zIndex-3 hide">
+                <li class="recipientList-controls u-clickable js-back">
+                  <div class="recipientList-backClickArea centered">
+                    <div class="recipientList-backButton">
+                      <div class="white arrow left icon"></div>
+                      <%- @T('Back') %>
+                    </div>
+                  </div>
+
+                <li class="recipientList-entry u-clickable horizontal center">
+                  <div class="recipientList-iconSpacer centered">
+                    <div class="white user icon"></div>
+                  </div>
+                  <div class="recipientList-name flex u-textTruncat ">
+                    Andreas Kramer
+                    <span class="recipientList-detail">- Albrecht &amp; Bertschler GmbG</span>
+                  </div>
+
+                <li class="recipientList-entry u-clickable horizontal center">
+                  <div class="recipientList-iconSpacer 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">
+                  <div class="recipientList-iconSpacer centered">
+                    <div class="white user icon"></div>
+                  </div>
+                  <div class="recipientList-name flex u-textTruncat ">
+                    Damian Sprengler
+                    <span class="recipientList-detail">- Albrecht &amp; Bertschler GmbG</span>
+                  </div>
+
+                <li class="recipientList-entry u-clickable horizontal center">
+                  <div class="recipientList-iconSpacer centered">
+                    <div class="white user icon"></div>
+                  </div>
+                  <div class="recipientList-name flex u-textTruncat ">
+                    Katharina Nussman
+                    <span class="recipientList-detail">- Albrecht &amp; Bertschler GmbG</span>
+                  </div>
+              </ul>
             </div>
           </div>
         </div>

app/assets/stylesheets/zzz.css.erb

@@ -3136,74 +3136,112 @@ footer {
   right: 10px;
 }
 
-.recipientList .dropdown-menu {
+.dropdown-menu {
   margin: 0;
   padding: 0;
   width: 100%;
   color: white;
-  background: hsl(234,10%,19%);
+  background: none;
   border-radius: 0;
   border: none;
   box-shadow: none;
+  overflow-x: hidden;
 }
-  .recipientList .dropdown-menu ul {
+
+  .dropdown ul {
     margin: 0;
+    background: hsl(234,10%,19%);
   }
 
-  .recipientList-entry {
+  .dropdown li {
     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;
+    padding: 0 15px;
   }
 
-  .recipientList-entry:not(:last-child):not(:first-child) {
+  .dropdown li:not(:first-child) {
     box-shadow: 0 1px rgba(255,255,255,.13) inset;
   }
 
-  .recipientList-entry:hover {
+  .dropdown li:hover,
+  .dropdown li.is-active {
     background: hsl(205,90%,60%);
   }
 
-    .recipientList-entry:hover + :not(:last-child):not(:first-child) {
+    .dropdown li:not(.recipientList-controls):hover + li,
+    .dropdown li.is-active + li {
       box-shadow: none;
     }
 
-    .recipientList-entry:hover .recipientList-icon {
-      opacity: 1;
-    }
+.recipientList-entry .recipientList-iconSpacer {
+  width: 20px;
+  margin-left: -5px;
+}
 
-  .recipientList-detail {
-    opacity: 0.5;
-  }
+.recipientList-entry .icon:not(.plus) {
+  opacity: 0.2;
+}
 
-  .recipientList-icon.plus {
-    margin-left: 13px;
-  }
+.recipientList-entry:hover .icon {
+  opacity: 1;
+}
 
-  .recipientList-new {
-    background: hsl(145,51%,45%);
-  }
+.recipientList-name {
+  margin-left: 10px;
+  margin-top: 2px;
+}
 
-  .recipientList-new:hover {
-    background: hsl(147,52%,43%);
-  }
+.recipientList-detail {
+  opacity: 0.5;
+}
+
+.recipientList-icon.plus {
+  margin-left: 13px;
+}
+
+.recipientList-new {
+  background: hsl(145,51%,45%);
+}
+
+.dropdown .recipientList-new:hover {
+  background: hsl(147,52%,43%);
+}
+
+li.recipientList-controls,
+li.recipientList-controls:hover {
+  padding: 0;
+  background: hsl(206,7%,28%);
+}
+
+.recipientList-backClickArea {
+  height: 100%;
+  float: left;
+  padding: 0 10px;
+}
+
+.recipientList-backButton {
+  padding: 5px 10px;
+  font-size: 12px;
+  color: white;
+  border-radius: 3px;
+  border: 1px solid hsl(234,10%,10%);
+  box-shadow: 0 1px rgba(255,255,255,.03) inset;
+}
+
+.recipientList-backClickArea:active .recipientList-backButton {
+  background: hsl(206,7%,25%);
+  box-shadow: 0 1px rgba(0,0,0,.1) inset;
+}
+
+.recipientList-backButton .icon {
+  margin-bottom: -2px;
+}
+
+.recipientList-organisationMembers {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
 
 /*