add click catchers

they are visible right now for testing purposes

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

@@ -0,0 +1,20 @@
+class App.clickCatcher extends Spine.Controller
+  # clickCatcher has no template because it's a plain <div>
+  className: 'clickCatcher'
+
+  constructor: (holder, callback, zIndexScale) ->
+    super
+    @render() if @callback and @holder
+
+  triggerCallback: (event) =>
+    event.stopPropagation()
+    @callback()
+    @remove()
+  
+  render: ->
+    @el.addClass("zIndex-#{ @zIndexScale }") if @zIndexScale
+    @el.on('click', @triggerCallback)
+    @el.appendTo(@holder)
+
+  remove: ->
+    @el.remove()

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

@@ -317,15 +317,18 @@ class Sidebar extends App.Controller
 
 
 class Edit extends App.Controller
+  elements:
+    'textarea' : 'textarea'
+
   events:
     'click .submit':             'update'
     'click [data-type="reset"]': 'reset'
-    'click .visibility.toggle':  'toggle_visibility'
+    'click .visibility-toggle':  'toggle_visibility'
     'click .pop-selectable':     'select_type'
     'click .pop-selected':       'show_selectable_types'
     'focus textarea':            'show_controls'
-    'blur textarea':             'hide_controls'
+    'input textarea':            'detect_empty_textarea'
-    'click .recipient-picker':   'toggle_recipients'
+    'click .recipient-picker':   'show_recipients'
     'click .recipient-list':     'stopPropagation'
     'click .list-entry-type div':  'change_recipient_type'
     'submit .recipient-list form': 'add_recipient'
@@ -446,7 +449,7 @@ class Edit extends App.Controller
     # show text module UI
     if !@isRole('Customer')
       textModule = new App.WidgetTextModule(
-        el:   @el.find('textarea')
+        el:   @textarea
         data:
           ticket: ticket
       )
@@ -456,24 +459,13 @@ class Edit extends App.Controller
         )
       @subscribeIdTextModule = ticket.subscribe( callback )
 
-  toggle_recipients: =>
+  show_recipients: =>
     padding = 15
     toggle = @el.find('.recipient-picker')
     list = @el.find('.recipient-list')
     arrow = list.find('.list-arrow')
 
-    if toggle.hasClass('state--open')
+    toggle.addClass('is-open')
-      toggle.removeClass('state--open')
-      list.velocity
-        properties:
-          scale: [ 0, 1 ]
-          opacity: [ 0, 1 ]
-        options:
-          speed: 300
-          easing: [ 500, 20 ]
-          complete: -> list.addClass('hide')
-    else
-      toggle.addClass('state--open')
     list.removeClass('hide')
 
     toggleDimensions = toggle.get(0).getBoundingClientRect()
@@ -501,6 +493,25 @@ class Edit extends App.Controller
         speed: 300
         easing: [ 0.34, 1.61, 0.7, 1 ]
 
+    @selectTypeCatcher = new App.clickCatcher
+      holder: @el.offsetParent()
+      callback: @hide_recipients
+      zIndexScale: 6
+
+  hide_recipients: =>
+    list = @el.find('.recipient-list')
+
+    @el.find('.recipient-picker').removeClass('is-open')
+
+    list.velocity
+      properties:
+        scale: [ 0, 1 ]
+        opacity: [ 0, 1 ]
+      options:
+        speed: 300
+        easing: [ 500, 20 ]
+        complete: -> list.addClass('hide')
+
   change_recipient_type: (e) ->
     $(e.target).addClass('active').siblings('.active').removeClass('active')
     # store $(this).data('value')
@@ -512,18 +523,27 @@ class Edit extends App.Controller
     # store recipient 
 
   toggle_visibility: ->
-    if @el.hasClass('state--public')
+    if @el.hasClass('is-public')
-      @el.removeClass('state--public')
+      @el.removeClass('is-public')
-      @el.addClass('state--internal')
+      @el.addClass('is-internal')
     else
-      @el.addClass('state--public')
+      @el.addClass('is-public')
-      @el.removeClass('state--internal')
+      @el.removeClass('is-internal')
 
   show_selectable_types: =>
     @el.find('.pop-selector').removeClass('hide')
 
+    @selectTypeCatcher = new App.clickCatcher
+      holder: @el.offsetParent()
+      callback: @hide_type
+      zIndexScale: 6
+
   select_type: (e) =>
     @set_type $(e.target).data('value')
+    @hide_type()
+    @selectTypeCatcher.remove()
+
+  hide_type: =>
     @el.find('.pop-selector').addClass('hide')
 
   set_type: (type) ->
@@ -533,13 +553,33 @@ class Edit extends App.Controller
     @type = type
     typeIcon.addClass @type
 
+  detect_empty_textarea: =>
+    if !@textarea.val()
+      @add_textarea_catcher()
+    else 
+      @remove_textarea_catcher()
+
   show_controls: =>
+    if !@textareaCatcher and !@textarea.val()
       @el.addClass('mode--edit')
       # scroll to bottom
       @el.scrollParent().scrollTop(99999)
+      @add_textarea_catcher()
+
+  add_textarea_catcher: ->
+    @textareaCatcher = new App.clickCatcher
+      holder: @el.offsetParent()
+      callback: @hide_controls
+      zIndexScale: 4
+
+  remove_textarea_catcher: ->
+    return if !@textareaCatcher
+    @textareaCatcher.remove()
+    @textareaCatcher = null
 
   hide_controls: =>
-    if !@el.find('textarea').val()
+    @remove_textarea_catcher()
+    if !@textarea.val()
       @el.removeClass('mode--edit')
 
   autosaveStop: =>

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

@@ -1,7 +1,7 @@
 <div class="fit ticket-zoom vertical">
-  <div class="flex relative">
+  <div class="flex u-positionOrigin">
     <div class="main no-padding">
-      <div class="flex-overflow sidebar-tabs--spacing">
+      <div class="flex-overflow u-positionOrigin sidebar-tabs--spacing">
         <div class="page-header horizontal">
           <div class="flex vertical center">
             <div class="big avatar user-popover" data-id="<%- @ticket.customer.id %>" style="background-image: url(<%- @ticket.customer.imageUrl %>)"></div>
@@ -23,9 +23,9 @@
 
         <div class="ticket-article"></div>
 
-      </div>
+        <div class="ticket-edit is-public"></div>
 
-      <div class="ticket-edit state--public sidebar-tabs--spacing"></div>
+      </div>
 
     </div>
 

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

@@ -33,7 +33,7 @@
     </div>
   </div>
 
-  <div class="article-content horizontal<%= ' reverse' if article.sender.name isnt 'Agent' %>">
+  <div class="article-content zIndex-1 horizontal<%= ' reverse' if article.sender.name isnt 'Agent' %>">
     <div class="avatar user-popover" data-placement="<% if article.sender.name isnt 'Agent': %>left<% else: %>right<% end %>" data-id="<%= article.created_by_id %>" style="background-image: url(<%= article.created_by.imageUrl %>)"></div>
     <div class="flex bubble-gap text-bubble <%= ' internal' if article.internal is true %>"><div class="bubble-arrow"></div><%- article.html %></div>
   </div>

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

@@ -1,9 +1,9 @@
 <form class="ticket-update <% if @formChanged: %>form-changed<% end %>">
   <div class="bubble-grid horizontal">
     <div class="vertical center">
-      <div class="avatar user-popover" data-id="<%= @S('id') %>" style="background-image: url(<%- @S('image') %>)"></div>
+      <div class="avatar user-popover zIndex-5" data-id="<%= @S('id') %>" style="background-image: url(<%- @S('image') %>)"></div>
       <div class="edit-controls">
-        <div class="dark pop-select">
+        <div class="dark pop-select zIndex-7">
           <div class="pop-selected u-clickable centered">
             <div class="gray <%- @type %> channel icon"></div>
           </div>
@@ -25,10 +25,12 @@
           </div>
         </div>
         <hr>
-        <div class="recipient-picker u-clickable horizontal centered">
+        <div class="u-positionOrigin">
+          <div class="recipient-picker zIndex-5 u-clickable horizontal centered">
             <div class="recipients icon"></div>
             <div class="recipient-count">3</div>
-          <div class="recipient-list hide">
+          </div>
+          <div class="recipient-list zIndex-7 hide">
             <div class="list-arrow"></div>
             <div class="list-head horizontal">
               <%- @T('Recipients') %>
@@ -42,7 +44,7 @@
                 <div data-value="cc" title="<%- @T('carbon copy') %>">Cc</div>
               </div>
             </div>
-            <!-- <div class="list-entry horizontal centered">
+            <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 u-clickable horizontal">
@@ -57,41 +59,35 @@
                 <div class="active" data-value="to">To</div>
                 <div data-value="cc" title="<%- @T('carbon copy') %>">Cc</div>
               </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>
+        <hr>
+        <div class="visibility-toggle zIndex-7 u-clickable centered">
+          <div class="internal-visibility" title="<%- @T("unset internal") %>">
+            <div class="internal visibility icon"></div>
+          </div>
+          <div class="public-visibility" title="<%- @T("set internal") %>">
+            <div class="public visibility icon"></div>
           </div>
         </div>
-    <div class="flex article-content bubble-gap">
+      </div>
+    </div>
+    <div class="flex article-content zIndex-5 bubble-gap">
       <div class="internal-border">
         <div class="text-bubble">
           <div class="bubble-arrow"></div>
           <textarea></textarea>
-          <div class="bubble-placeholder">
+          <div class="bubble-placeholder u-unclickable">
-            <span class="u-unclickable">Antwort eingeben oder </span>
+            Antwort eingeben oder
             <span class="highlight u-clickable js-upload">Dateien wählen</span>
           </div>
         </div>
       </div>
-      <div class="edit-controls">
-        <div class="horizontal justify-end center">
-          <div class="visibility toggle u-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/zzz.css.erb

@@ -19,11 +19,78 @@ small {
 }
 
 .u-clickable {
+  pointer-events: auto;
   cursor: pointer;
   -webkit-user-select: none;
           user-select: none;
 }
 
+.u-positionOrigin {
+  position: relative;
+}
+
+.zIndex-1,
+.zIndex-2,
+.zIndex-3,
+.zIndex-4,
+.zIndex-5,
+.zIndex-6,
+.zIndex-7,
+.zIndex-8,
+.zIndex-9,
+.zIndex-10 {
+  position: relative;
+}
+
+.zIndex-1 {
+  z-index: 100;
+}
+.zIndex-2 {
+  z-index: 200;
+}
+.zIndex-3 {
+  z-index: 300;
+}
+.zIndex-4 {
+  z-index: 400;
+}
+.zIndex-5 {
+  z-index: 500;
+}
+.zIndex-6 {
+  z-index: 600;
+}
+.zIndex-7 {
+  z-index: 700;
+}
+.zIndex-8 {
+  z-index: 800;
+}
+.zIndex-9 {
+  z-index: 900;
+}
+.zIndex-10 {
+  z-index: 1000;
+}
+
+.clickCatcher {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  cursor: default;
+  background: rgba(255,255,0,.13);
+}
+
+.clickCatcher + .clickCatcher {
+  background: rgba(255,0,255,.13);
+}
+
+.clickCatcher + .clickCatcher + .clickCatcher {
+  background: rgba(0,255,128,.21);
+}
+
 #app > nav {
   position: relative;
   z-index: 1;
@@ -34,7 +101,6 @@ a[data-tooltip],
 time[data-tooltip],
 span[data-tooltip] {
   position: relative;
-  z-index: 99000;
 }
 a[data-tooltip]:before,
 time[data-tooltip]:before,
@@ -2495,6 +2561,11 @@ footer {
   transition: 500ms;
 }
 
+.ticket-zoom .flex-overflow {
+  overflow: hidden;
+  min-height: 100%;
+}
+
   .ticket-zoom.state--sidebar-hidden .main {
     margin-right: 0;
   }
@@ -2552,6 +2623,7 @@ footer {
   }
 
   .article-content {
+    position: relative;
     margin-right: 55px;
   }
 
@@ -2565,10 +2637,6 @@ footer {
     position: absolute;
     width: 100%;
   }
-  .article-content {
-    position: relative;
-    z-index: 1;
-  }
 
   .article-meta {
     background: #2c2d36;
@@ -2708,13 +2776,9 @@ footer {
 
 .ticket-edit {
   margin-top: auto;
-  margin-bottom: 37px;
+  margin-bottom: 36px;
 }
 
-  .ticket-edit.mode--edit {
-    margin-bottom: 8px;
-  }
-
   .bottom-form {
     background: white;
   }
@@ -2722,10 +2786,10 @@ footer {
   .ticket-edit .internal-border {
     padding: 5px;
     border-radius: 8px;
-    margin: -5px -5px 0;
+    margin: -5px;
   }
 
-  .ticket-edit.state--internal .internal-border {
+  .ticket-edit.is-internal .internal-border {
     background: repeating-linear-gradient(45deg, hsl(18,79%,89%), hsl(18,79%,89%) 5px, transparent 5px, transparent 6px);
     background-size: 8px 8px;
   }
@@ -2762,53 +2826,45 @@ footer {
     margin: 0;
   }
 
-  .visibility.toggle {
+  .visibility-toggle {
-    margin-right: 10px;
+    height: 38px;
+    width: 38px;
   }
 
-  .visibility.toggle,
+  .visibility-toggle,
   .recipient-picker {
     opacity: 0.2;
   }
 
-  .visibility-label {
+  .ticket-edit.is-public .internal-visibility {
-    margin-left: 5px;
-    min-width: 53px;
-    line-height: 19px;
-    display: inline-block;
-    vertical-align: text-top;
-  }
-
-  .state--public .internal-visibility {
     display: none;
   }
 
-  .state--internal .visibility.toggle {
+  .ticket-edit.is-internal .visibility-toggle {
     opacity: 1;
   }
 
-  .state--internal .public-visibility {
+  .ticket-edit.is-internal .public-visibility {
     display: none;
   }
 
   .ticket-edit .recipient-picker {
-    height: 38px;
+    height: 36px;
     position: relative;
-    z-index: 3;
     transition: 300ms;
   }
 
-  .ticket-edit .recipient-picker.state--open {
+  .ticket-edit .recipient-picker.is-open {
     opacity: 1;
   }
 
     .recipient-picker .icon {
-      margin-top: -8px;
+      margin-top: -3px;
     }
 
     .recipient-count {
+      margin-top: 5px;
       margin-left: 3px;
-      margin-top: 2px;
       line-height: 1;
     }
 
@@ -2819,7 +2875,7 @@ footer {
       color: white;
     }
 
-      .recipient-picker.state--open .recipient-list {
+      .recipient-picker.is-open .recipient-list {
         display: block;
       }
 
@@ -2924,7 +2980,7 @@ footer {
     }
 
     .ticket-edit.mode--edit textarea {
-      height: 115px;
+      height: 155px;
     }
 
     .ticket-edit.mode--edit .bubble-placeholder {
@@ -2945,7 +3001,6 @@ footer {
 
 .pop-select {
   position: relative;
-  z-index: 2;
 }
 
   .pop-selector {