add recipient list

app/assets/images/sprite.svg

@@ -188,5 +188,6 @@
         <path d="M3,351 C3.00000025,347.658831 4.05916618,345.96066 6.66411898,343.827098 C6.61537225,343.867024 7.151972,343.429157 7.29335721,343.312088 C9.6234159,341.382774 10.5000001,339.771038 10.5,336 L10.5,336 L13.5,336 L13.5,336 C13.5000001,339.771037 14.3765843,341.382774 16.7066428,343.312088 C16.8480281,343.429157 17.3846279,343.867023 17.3358812,343.827098 C19.9408339,345.96066 20.9999998,347.658831 21,351 L21.0000001,351 L15,351 L19.5,356 L24,351 L21,351 L18,351 C17.9999999,348.710889 17.4108706,347.766332 15.4349741,346.147992 C15.4916405,346.194405 14.9444912,345.747929 14.7933572,345.622789 C13.4178353,344.483842 12.3966281,343.353786 11.6960735,342 L12.3039268,342 L12.3039268,342 C11.6033722,343.353786 10.5821649,344.483842 9.20664279,345.622789 C9.05550884,345.74793 8.50835957,346.194405 8.56502604,346.147993 C6.58912946,347.766332 6.00000015,348.710889 6,351 L3,351 L9,351 L4.5,356 L0,351 L2.99999991,351 Z" id="split" fill="#000000" sketch:type="MSShapeGroup"></path>
         <path d="M15.0068455,365 C14.4507801,365 14,365.455664 14,365.995398 L14,374.004602 C14,374.554345 14.4499488,375 15.0068455,375 L26.9931545,375 C27.5492199,375 28,374.544336 28,374.004602 L28,365.995398 C28,365.445655 27.5500512,365 26.9931545,365 L15.0068455,365 Z M18.0001535,363 L17.9923928,362.875658 C17.9933444,362.88493 17.9912732,362.863896 17.989468,362.83771 C17.9599587,362.409647 18.0185461,361.880411 18.2283326,361.40063 C18.6141117,360.518353 19.4239828,360 20.9994467,360 C22.5749814,360 23.3851297,360.518439 23.7712104,361.400844 C23.9812111,361.88081 24.0399125,362.410193 24.0104777,362.838202 C24.008685,362.864271 24.0066273,362.885215 24.0075787,362.875929 L23.9998521,363 L23.9998521,365 L25.9998521,365 L25.9998521,363 L25.9921254,363.124071 C25.9972115,363.081717 26.0013558,363.039534 26.0057649,362.975421 C26.055384,362.253913 25.9630045,361.420813 25.6035034,360.599156 C24.8957536,358.981562 23.3618963,358 20.9994469,358 C18.6369264,358 17.1032087,358.981647 16.3958525,360.59937 C16.0366701,361.42082 15.9444643,362.253739 15.9942034,362.975257 C15.9986365,363.039564 16.0028037,363.081883 16.0079141,363.124342 L16.0001535,363 L16.0001535,365 L18.0001535,365 L18.0001535,363 Z" id="internal" fill="#F58957" sketch:type="MSShapeGroup"></path>
         <path d="M4.00015347,365 L12.9931545,365 C13.5500512,365 14,365.445655 14,365.995398 L14,374.004602 C14,374.544336 13.5492199,375 12.9931545,375 L1.00684547,375 C0.449948758,375 0,374.554345 0,374.004602 L0,365.995398 C0,365.455664 0.450780073,365 1.00684547,365 L2.00015347,365 L2.00015346,361 L2.0079141,361.124342 C2.00280368,361.081883 1.99863651,361.039564 1.99420336,360.975257 C1.94446429,360.253739 2.03667013,359.42082 2.39585248,358.59937 C3.10320874,356.981647 4.63692643,356 6.99944694,356 C9.36189629,356 10.8957536,356.981562 11.6035034,358.599156 C11.9630045,359.420813 12.055384,360.253913 12.0057649,360.975421 C12.0013558,361.039534 11.9972115,361.081717 11.9921254,361.124071 L11.9998521,361 L11.9998521,363 L9.99985208,363 L9.99985208,361 L10.0075787,360.875929 C10.0066273,360.885215 10.008685,360.864271 10.0104777,360.838202 C10.0399125,360.410193 9.98121107,359.88081 9.77121041,359.400844 C9.38512974,358.518439 8.57498138,358 6.99944672,358 C5.42398278,358 4.61411166,358.518353 4.2283326,359.40063 C4.01854612,359.880411 3.95995868,360.409647 3.98946796,360.83771 C3.99127317,360.863896 3.99334435,360.88493 3.99239283,360.875658 L4.00015346,361 L4.00015347,365 Z" id="public" fill="#000000" sketch:type="MSShapeGroup"></path>
+        <path d="M37.0409639,368 L37.0409639,365 C40.031302,365.196667 42.4129445,367.387778 42.0409639,370 C42.4129445,372.808889 40.031302,375 37.0409639,375 C41.4890315,375 45.0409639,371.732222 45.0409639,368 C45.0409639,363.628889 41.4890315,360.361111 37.0409639,360 L37.0409639,358 L33.0409639,360 L28.0409639,363 L33.0409639,365 L37.0409639,368 Z" id="recipients" fill="#000000" sketch:type="MSShapeGroup" transform="translate(36.500000, 366.500000) rotate(-180.000000) translate(-36.500000, -366.500000) "></path>
     </g>
 </svg>

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

@@ -325,11 +325,18 @@ class Edit extends App.Controller
     'click .pop-selected':       'show_selectable_types'
     'focus textarea':            'show_controls'
     'blur textarea':             'hide_controls'
+    'click .recipient-picker':   'toggle_recipients'
+    'click .recipient-list':     'stopPropagation'
+    'click .list-entry-type div':  'change_recipient_type'
+    'submit .recipient-list form': 'add_recipient'
 
   constructor: ->
     super
     @render()
 
+  stopPropagation: (e) ->
+    e.stopPropagation()
+
   release: =>
     @autosaveStop()
     if @subscribeIdTextModule
@@ -339,8 +346,6 @@ class Edit extends App.Controller
 
     ticket = App.Ticket.fullLocal( @ticket.id )
 
-    console.log ticket
-
     # gets referenced in @set_type
     @type = 'email'
 
@@ -451,6 +456,40 @@ class Edit extends App.Controller
         )
       @subscribeIdTextModule = ticket.subscribe( callback )
 
+  toggle_recipients: =>
+    padding = 15
+    toggle = @el.find('.recipient-picker')
+    list = @el.find('.recipient-list')
+    arrow = list.find('.list-arrow')
+
+    if toggle.hasClass('state--open')
+      toggle.removeClass('state--open')
+    else
+      toggle.addClass('state--open')
+
+      toggleDimensions = toggle.get(0).getBoundingClientRect()
+      listDimensions = list.get(0).getBoundingClientRect()
+      availableHeight = toggle.scrollParent().outerHeight()
+
+      top = toggleDimensions.height/2 - listDimensions.height/2
+      bottomDistance = availableHeight - padding - (toggleDimensions.top + top + listDimensions.height)
+
+      if bottomDistance < 0
+        top += bottomDistance
+
+      arrow.css('top', -top + toggleDimensions.height/2)
+      list.css('top', top)
+
+  change_recipient_type: (e) ->
+    $(e.target).addClass('active').siblings('.active').removeClass('active')
+    # store $(this).data('value')
+
+  add_recipient: (e) ->
+    e.stopPropagation()
+    e.preventDefault()
+    console.log "add recipient", e
+    # store recipient 
+
   toggle_visibility: ->
     if @el.hasClass('state--public')
       @el.removeClass('state--public')

app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco

@@ -25,9 +25,44 @@
           </div>
         </div>
         <hr>
-        <div class="visibility toggle clickable centered">
+        <div class="recipient-picker clickable horizontal centered">
-          <div class="public visibility icon"></div>
+          <div class="recipients icon"></div>
-          <div class="internal visibility icon"></div>
+          <div class="recipient-count">3</div>
+          <div class="recipient-list">
+            <div class="list-arrow"></div>
+            <div class="list-head horizontal">
+              <%- @T('Recipients') %>
+              <div class="align-right"><%- @T('type') %></div>
+            </div>
+            <div class="list-entry horizontal centered">
+              <div class="avatar"  style="background-image: url(http://berta9.express.ge/31/performer/Paul%20van%20Dyk/.photo/34_paul_van_dyk_01.jpg)"></div>
+              <div class="list-entry-name flex">Hans Peter Baxxter</div>
+              <div class="list-entry-type clickable horizontal">
+                <div class="active" data-value="to">To</div>
+                <div data-value="cc" title="<%- @T('carbon copy') %>">Cc</div>
+              </div>
+            </div>
+            <!-- <div class="list-entry horizontal centered">
+              <div class="avatar"  style="background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/48.jpg)"></div>
+              <div class="list-entry-name flex">Julia Maier</div>
+              <div class="list-entry-type clickable horizontal">
+                <div class="active" data-value="to">To</div>
+                <div data-value="cc" title="<%- @T('carbon copy') %>">Cc</div>
+              </div>
+            </div>
+            <div class="list-entry horizontal centered">
+              <div class="avatar"  style="background-image: url(https://s3.amazonaws.com/uifaces/faces/twitter/sindresorhus/48.jpg)"></div>
+              <div class="list-entry-name flex">Remo Batlogg</div>
+              <div class="list-entry-type clickable horizontal">
+                <div class="active" data-value="to">To</div>
+                <div data-value="cc" title="<%- @T('carbon copy') %>">Cc</div>
+              </div>
+            </div> -->
+            <form class="list-edit">
+              <input type="email" class="list-entry" placeholder="<%- @T('Add recipients..') %>"></input>
+              <input type="submit" tabindex="-1"></input>
+            </form>
+          </div>
         </div>
       </div>
     </div>
@@ -39,7 +74,21 @@
           <span class="bubble-placeholder">Antwort eingeben oder <span class="highlight">Dateien wählen</span></span>
         </div>
       </div>
-      <button type="submit" class="edit-controls btn btn-primary submit"><%- @T( 'Send' ) %></button>
+      <div class="edit-controls">
+        <div class="horizontal justify-end center">
+          <div class="visibility toggle clickable centered">
+            <div class="internal-visibility">
+              <div class="internal visibility icon"></div>
+              <div class="visibility-label">internal</div>
+            </div>
+            <div class="public-visibility">
+              <div class="public visibility icon"></div>
+              <div class="visibility-label">public</div>
+            </div>
+          </div>
+          <button type="submit" class="btn btn-primary submit"><%- @T( 'Send' ) %></button>
+        </div>
+      </div>
     </div>
   </div>
 </form>

app/assets/stylesheets/layout.css

@@ -205,3 +205,7 @@ body.fit {
 .three-columns > .column {
   width: 33.33%;
 }
+
+.align-right {
+  margin-left: auto;
+}

app/assets/stylesheets/zzz.css.erb

@@ -1371,6 +1371,12 @@ ol.tabs li {
     background-position: -14px -356px;
   }
 
+  .recipients.icon {
+    width: 17px;
+    height: 17px;
+    background-position: -28px -358px;
+  }
+
 
 /*
  * removed margin of forms to not break the layout with submit buttons within <form></form> area e. g. for modal dialogs
@@ -2654,7 +2660,7 @@ footer {
 }
 
   .ticket-edit.mode--edit {
-    margin-bottom: 12px;
+    margin-bottom: 8px;
   }
 
   .bottom-form {
@@ -2694,7 +2700,7 @@ footer {
   }
 
   .ticket-edit button[type=submit] {
-    margin-top: 5px;
+    margin: 5px 0;
     float: right;
   }
 
@@ -2705,12 +2711,23 @@ footer {
   }
 
   .visibility.toggle {
-    width: 38px;
+    margin-right: 10px;
-    height: 34px;
+  }
+
+  .visibility.toggle,
+  .recipient-picker {
     opacity: 0.2;
   }
 
-  .state--public .internal.icon {
+  .visibility-label {
+    margin-left: 5px;
+    min-width: 53px;
+    line-height: 19px;
+    display: inline-block;
+    vertical-align: text-top;
+  }
+
+  .state--public .internal-visibility {
     display: none;
   }
 
@@ -2718,10 +2735,125 @@ footer {
     opacity: 1;
   }
 
-  .state--internal .public.icon {
+  .state--internal .public-visibility {
     display: none;
   }
 
+  .ticket-edit .recipient-picker {
+    height: 38px;
+    position: relative;
+    z-index: 3;
+  }
+
+  .ticket-edit .recipient-picker.state--open {
+    opacity: 1;
+  }
+
+    .recipient-picker .icon {
+      margin-top: -8px;
+    }
+
+    .recipient-count {
+      margin-left: 3px;
+      margin-top: 2px;
+      line-height: 1;
+    }
+
+    .recipient-list {
+      position: absolute;
+      background: hsl(234,10%,19%);
+      left: 48px;
+      color: white;
+      display: none;
+    }
+
+      .recipient-picker.state--open .recipient-list {
+        display: block;
+      }
+
+    .list-arrow {
+      position: absolute;
+      top: 210px;
+      left: -6px;
+      margin-top: -6px;
+      border-right: 6px solid #2c2d36;
+      border-top: 6px solid transparent;
+      border-bottom: 6px solid transparent;
+    }
+
+    .list-head {
+      height: 38px;
+      line-height: 38px;
+      padding: 1px 19px 0;
+      text-transform: uppercase;
+    }
+
+      .list-head div {
+        position: relative;
+        left: -20px;
+      }
+
+    .list-entry {
+      width: 340px;
+      height: 60px;
+      padding: 0 16px;
+      border-top: 1px solid hsl(240,6%,27%);
+    }
+
+    .list-entry-name {
+      margin-left: 18px;
+    }
+
+    .list-entry-type {
+      font-size: 12px;
+    }
+
+    .list-entry-type div {
+      padding: 3px 7px;
+      border: 1px solid hsl(234,10%,10%);
+      color: hsl(0,0%,40%);
+      background: hsl(234,10%,14%);
+    }
+
+    .list-entry-type .active {
+      color: white;
+      background: inherit;
+      box-shadow: 0 1px rgba(255,255,255,.03) inset;
+    }
+
+    .list-entry-type div:not(:last-child) {
+      border-right: none;
+    }
+
+    .list-entry-type div:first-child {
+      border-radius: 3px 0 0 3px;
+    }
+
+    .list-entry-type div:last-child {
+      border-left: none;
+      border-radius: 0 3px 3px 0;
+    }
+
+    .recipient-list input {
+      padding-top: 2px;
+      background: hsl(232,10%,16%);
+      color: white;
+      border: none;
+      outline: none;
+    }
+
+    .recipient-list input[type=submit] {
+      height: 0;
+      width: 0;
+      padding: 0;
+      position: absolute;
+      visibility: hidden;
+    }
+
+    .recipient-list input::-webkit-input-placeholder {    color: #666; }
+    .recipient-list input::-moz-placeholder { opacity: 1; color: #666;  }
+    .recipient-list input:-ms-input-placeholder {         color: #666; }
+
   .ticket-edit .text-bubble {
     padding: 0;
     border-color: #b3b3b3;