Merge branch 'interface' of github.com:martini/zammad into interface

app/assets/images/sprite.svg

@@ -103,15 +103,15 @@
             <path d="M85.5,10 L48,10 L58,3 L95.5,3 L85.5,10 L85.5,10 Z" id="Shape-copy" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
             <path d="M85.5,8 L48,8 L58,0 L95.5,0 L85.5,8 L85.5,8 Z" id="Shape-copy" fill="#38AE6A" sketch:type="MSShapeGroup"></path>
         </g>
-        <path d="M6.9,309.9 L2,305 L6.9,300" id="left-arrow" stroke="#000000" stroke-width="2" sketch:type="MSShapeGroup"></path>
-        <path d="M9,300 L13.9,304.9 L9,309.9" id="right-arrow" stroke="#000000" stroke-width="2" sketch:type="MSShapeGroup"></path>
-        <path d="M16.5,299.5 L25.5,299.5 L25.5,308.5 L16.5,308.5 L16.5,299.5 L16.5,299.5 Z" id="checkbox" stroke="#CBCBCB" sketch:type="MSShapeGroup"></path>
-        <g id="checkbox-checked" sketch:type="MSLayerGroup" transform="translate(27.000000, 299.000000)">
+        <path d="M18.7071068,304.292893 L18.7142128,305.699929 L23.6142128,300.699929 L22.1857872,299.300071 L17.2857872,304.300071 L16.5928929,305.007106 L17.2928932,305.707107 L22.1928932,310.607107 L23.6071068,309.192893 L18.7071068,304.292893 Z" id="left-arrow-white" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
+        <path d="M29.1928932,305.607107 L29.1857872,304.200071 L24.2857872,309.200071 L25.7142128,310.599929 L30.6142128,305.599929 L31.3071071,304.892894 L30.6071068,304.192893 L25.7071068,299.292893 L24.2928932,300.707107 L29.1928932,305.607107 Z" id="right-arrow-white" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
+        <path d="M32.5,299.5 L41.5,299.5 L41.5,308.5 L32.5,308.5 L32.5,299.5 L32.5,299.5 Z" id="checkbox" stroke="#CBCBCB" sketch:type="MSShapeGroup"></path>
+        <g id="checkbox-checked" sketch:type="MSLayerGroup" transform="translate(43.000000, 299.000000)">
             <path d="M-0.5,0.5 L8.5,0.5 L8.5,9.5 L-0.5,9.5 L-0.5,0.5 L-0.5,0.5 Z" id="checkbox" stroke="#000000" sketch:type="MSShapeGroup"></path>
             <path d="M2.79999999,5.89999999 L1.09999999,4.39999999 L0.39999999,5.09999999 L3.29999999,8.59999999 C3.79999999,7.09999999 5.39999999,4.19999999 7.29999999,2.09999999 L7.09999999,1.49999999 C4.99999999,2.99999999 3.39999999,4.89999999 2.79999999,5.89999999 L2.79999999,5.89999999 L2.79999999,5.89999999 Z" id="Shape" fill="#1A1A1A" sketch:type="MSShapeGroup"></path>
         </g>
-        <path d="M45.044,305.135991 L45.06,305.183991 C44.74,305.423991 44.42,305.759991 44.068,306.143991 L41.828,308.575991 L42.9,309.487991 L47.38,304.495991 L42.9,299.503991 L41.828,300.415991 L43.956,302.719991 C44.372,303.183991 44.708,303.551991 45.06,303.807991 L45.044,303.855991 L36.724,303.855991 L36.724,305.135991 L45.044,305.135991 Z" id="→" fill="#000000" sketch:type="MSShapeGroup"></path>
-        <g id="delete" sketch:type="MSLayerGroup" transform="translate(48.000000, 300.000000)" fill="#000000">
+        <path d="M61.044,305.135991 L61.06,305.183991 C60.74,305.423991 60.42,305.759991 60.068,306.143991 L57.828,308.575991 L58.9,309.487991 L63.38,304.495991 L58.9,299.503991 L57.828,300.415991 L59.956,302.719991 C60.372,303.183991 60.708,303.551991 61.06,303.807991 L61.044,303.855991 L52.724,303.855991 L52.724,305.135991 L61.044,305.135991 Z" id="→" fill="#000000" sketch:type="MSShapeGroup"></path>
+        <g id="delete" sketch:type="MSLayerGroup" transform="translate(64.000000, 300.000000)" fill="#000000">
             <path d="M8.14644661,8.85355339 C8.34170876,9.04881554 8.65829124,9.04881554 8.85355339,8.85355339 C9.04881554,8.65829124 9.04881554,8.34170876 8.85355339,8.14644661 L0.853553391,0.146446609 C0.658291245,-0.0488155365 0.341708755,-0.0488155365 0.146446609,0.146446609 C-0.0488155365,0.341708755 -0.0488155365,0.658291245 0.146446609,0.853553391 L8.14644661,8.85355339 Z" id="Path-1" sketch:type="MSShapeGroup"></path>
             <path d="M0.146446609,8.14644661 C-0.0488155365,8.34170876 -0.0488155365,8.65829124 0.146446609,8.85355339 C0.341708755,9.04881554 0.658291245,9.04881554 0.853553391,8.85355339 L8.85355339,0.853553391 C9.04881554,0.658291245 9.04881554,0.341708755 8.85355339,0.146446609 C8.65829124,-0.0488155365 8.34170876,-0.0488155365 8.14644661,0.146446609 L0.146446609,8.14644661 Z" id="Path-1-copy" sketch:type="MSShapeGroup"></path>
         </g>
@@ -166,5 +166,7 @@
         </g>
         <path d="M76.4767712,343.142686 L81.2904338,338.295361 C81.679595,337.903479 82.3127561,337.901273 82.7046388,338.290434 C83.0965214,338.679595 83.0987275,339.312756 82.7095663,339.704639 L77.8909934,344.556908 L82.7039017,349.369816 C83.094426,349.760341 83.094426,350.393506 82.7039017,350.78403 C82.3133774,351.174554 81.6802124,351.174554 81.2896881,350.78403 L76.4817074,345.976049 L71.7095663,350.781562 C71.3204051,351.173444 70.6872439,351.175651 70.2953613,350.786489 C69.9034787,350.397328 69.9012726,349.764167 70.2904338,349.372284 L75.0674852,344.561827 L70.2127651,339.707107 C69.8222408,339.316583 69.8222408,338.683418 70.2127651,338.292893 C70.6032893,337.902369 71.2364543,337.902369 71.6269786,338.292893 L76.4767712,343.142686 Z" id="white-close" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
         <path d="M89.4767712,343.142686 L94.2904338,338.295361 C94.679595,337.903479 95.3127561,337.901273 95.7046388,338.290434 C96.0965214,338.679595 96.0987275,339.312756 95.7095663,339.704639 L90.8909934,344.556908 L95.7039017,349.369816 C96.094426,349.760341 96.094426,350.393506 95.7039017,350.78403 C95.3133774,351.174554 94.6802124,351.174554 94.2896881,350.78403 L89.4817074,345.976049 L84.7095663,350.781562 C84.3204051,351.173444 83.6872439,351.175651 83.2953613,350.786489 C82.9034787,350.397328 82.9012726,349.764167 83.2904338,349.372284 L88.0674852,344.561827 L83.2127651,339.707107 C82.8222408,339.316583 82.8222408,338.683418 83.2127651,338.292893 C83.6032893,337.902369 84.2364543,337.902369 84.6269786,338.292893 L89.4767712,343.142686 Z" id="dark-close" fill="#000000" sketch:type="MSShapeGroup"></path>
+        <path d="M2.70710678,304.292893 L2.71421284,305.699929 L7.61421284,300.699929 L6.18578716,299.300071 L1.28578716,304.300071 L0.592892858,305.007106 L1.29289322,305.707107 L6.19289322,310.607107 L7.60710678,309.192893 L2.70710678,304.292893 Z" id="left-arrow" fill="#000000" sketch:type="MSShapeGroup"></path>
+        <path d="M13.1928932,305.607107 L13.1857872,304.200071 L8.28578716,309.200071 L9.71421284,310.599929 L14.6142128,305.599929 L15.3071071,304.892894 L14.6071068,304.192893 L9.70710678,299.292893 L8.29289322,300.707107 L13.1928932,305.607107 Z" id="right-arrow" fill="#000000" sketch:type="MSShapeGroup"></path>
     </g>
 </svg>

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,9 @@ class App.TicketCreate extends App.Controller
     'submit form':            'submit'
     'click .submit':          'submit'
     'click .cancel':          'cancel'
+    'hide.bs.dropdown .js-recipientDropdown': 'hideOrganisationMembers'
+    'click .js-organisation': 'showOrganisationMembers'
+    'click .js-back':         'hideOrganisationMembers'
 
   constructor: (params) ->
     super
@@ -37,6 +40,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 js-recipientDropdown">
             <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

@@ -1132,12 +1132,20 @@ ol.tabs li {
     background-position: -8px -299px;
   }
 
+  .white.left.arrow.icon {
+    background-position: -16px -299px;
+  }
+
+  .white.right.arrow.icon {
+    background-position: -24px -299px;
+  }
+
   .checkbox.icon {
     min-height: 0; /* overwriting bootstrap */
     margin: 0; /* overwriting bootstrap */
     width: 10px;
     height: 10px;
-    background-position: -16px -299px;
+    background-position: -32px -299px;
   }
 
   .white.checkbox.icon {
@@ -1145,19 +1153,19 @@ ol.tabs li {
   }
 
   :checked + .checkbox.icon {
-    background-position: -26px -299px;
+    background-position: -42px -299px;
   }
 
   .arrow-right.icon {
     width: 12px;
     height: 11px;
-    background-position: -36px -299px;
+    background-position: -52px -299px;
   }
 
   .delete.icon {
     width: 9px;
     height: 9px;
-    background-position: -48px -300px;
+    background-position: -64px -300px;
   }
 
   .dark.group.icon {
@@ -3128,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;
+}
 
 /*