show edit controls on click

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

@@ -318,6 +318,8 @@ class Edit extends App.Controller
     'click .visibility.toggle':  'toggle_visibility'
     'click .pop-selectable':     'select_type'
     'click .pop-selected':       'show_selectable_types'
+    'focus textarea':            'show_controls'
+    'blur textarea':             'hide_controls'
 
   constructor: ->
     super
@@ -466,6 +468,15 @@ class Edit extends App.Controller
     @type = type
     typeIcon.addClass @type
 
+  show_controls: =>
+    @el.addClass('mode--edit')
+    # scroll to bottom
+    @el.scrollParent().scrollTop(99999)
+
+  hide_controls: =>
+    if !@el.find('textarea').val()
+      @el.removeClass('mode--edit')
+
   autosaveStop: =>
     @clearInterval( 'autosave' )
 

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

@@ -2,31 +2,33 @@
   <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="dark pop-select">
+      <div class="edit-controls">
-        <div class="pop-selected clickable centered">
+        <div class="dark pop-select">
-          <div class="gray <%- @type %> channel icon"></div>
+          <div class="pop-selected clickable centered">
-        </div>
+            <div class="gray <%- @type %> channel icon"></div>
-        <div class="pop-selector hide">
+          </div>
-          <div class="horizontal">
+          <div class="pop-selector hide">
-            <div class="pop-selectable clickable centered" data-value="email">
+            <div class="horizontal">
-              <div class="white email channel icon"></div>
+              <div class="pop-selectable clickable centered" data-value="email">
-            </div>
+                <div class="white email channel icon"></div>
-            <div class="pop-selectable clickable centered" data-value="facebook">
+              </div>
-              <div class="white facebook channel icon"></div>
+              <div class="pop-selectable clickable centered" data-value="facebook">
-            </div>
+                <div class="white facebook channel icon"></div>
-            <div class="pop-selectable clickable centered" data-value="twitter">
+              </div>
-              <div class="white twitter channel icon"></div>
+              <div class="pop-selectable clickable centered" data-value="twitter">
-            </div>
+                <div class="white twitter channel icon"></div>
-            <div class="pop-selectable clickable centered" data-value="phone">
+              </div>
-              <div class="white phone channel icon"></div>
+              <div class="pop-selectable clickable centered" data-value="phone">
+                <div class="white phone channel icon"></div>
+              </div>
             </div>
           </div>
         </div>
-      </div>
+        <hr>
-      <hr>
+        <div class="visibility toggle clickable centered">
-      <div class="visibility toggle clickable centered">
+          <div class="public visibility icon"></div>
-        <div class="public visibility icon"></div>
+          <div class="internal visibility icon"></div>
-        <div class="internal visibility icon"></div>
+        </div>
       </div>
     </div>
     <div class="flex article-content bubble-gap">
@@ -37,7 +39,7 @@
           <span class="bubble-placeholder">Antwort eingeben oder <span class="highlight">Dateien wählen</span></span>
         </div>
       </div>
-      <button type="submit" class="btn btn-primary submit"><%- @T( 'Send' ) %></button>
+      <button type="submit" class="edit-controls btn btn-primary submit"><%- @T( 'Send' ) %></button>
     </div>
   </div>
 </form>

app/assets/stylesheets/zzz.css.erb

@@ -1593,7 +1593,7 @@ footer {
 
 .btn {
   font-size: 14px;
-  padding: 9px 14px;
+  padding: 9px 24px 8px;
 }
 
 .btn.primary,
@@ -2536,45 +2536,6 @@ footer {
       border-color: hsl(300,43%,84%);
     }
 
-  .ticket-edit .text-bubble {
-    padding: 0;
-    border-color: #b3b3b3;
-    white-space: normal;
-    border-radius: 5px;
-  }
-
-    .ticket-edit textarea {
-      width: 100%;
-      height: 38px;
-      padding: 10px 20px;
-      vertical-align: bottom;
-      border: none;
-      background: none;
-      outline: none;
-      transition: 500ms;
-    }
-
-    .ticket-edit textarea:focus {
-      height: 105px;
-    }
-
-    .ticket-edit textarea:focus + .bubble-placeholder {
-      display: none;
-    }
-
-    .ticket-edit .bubble-arrow:after {
-      border-color: #b3b3b3;
-      box-shadow: none;
-    }
-
-    .bubble-placeholder {
-      position: absolute;
-      color: #b3b3b3;
-      left: 20px;
-      top: 10px;
-      pointer-events: none;
-    }
-
     .bubble-arrow {
       position: absolute;
       width: 7px;
@@ -2648,6 +2609,10 @@ footer {
   margin-bottom: 37px;
 }
 
+  .ticket-edit.mode--edit {
+    margin-bottom: 12px;
+  }
+
   .bottom-form {
     background: white;
   }
@@ -2667,6 +2632,14 @@ footer {
     margin-bottom: 3px;
   }
 
+  .ticket-edit .edit-controls {
+    display: none;
+  }
+
+  .ticket-edit.mode--edit .edit-controls {
+    display: block;
+  }
+
   .ticket-edit .pop-selectable .icon {
     opacity: 0.3;
     pointer-events: none;
@@ -2705,6 +2678,44 @@ footer {
     display: none;
   }
 
+  .ticket-edit .text-bubble {
+    padding: 0;
+    border-color: #b3b3b3;
+    white-space: normal;
+    border-radius: 5px;
+  }
+
+    .ticket-edit textarea {
+      width: 100%;
+      height: 38px;
+      padding: 10px 20px;
+      vertical-align: bottom;
+      border: none;
+      background: none;
+      outline: none;
+    }
+
+    .ticket-edit.mode--edit textarea {
+      height: 115px;
+    }
+
+    .ticket-edit.mode--edit .bubble-placeholder {
+      display: none;
+    }
+
+    .ticket-edit .bubble-arrow:after {
+      border-color: #b3b3b3;
+      box-shadow: none;
+    }
+
+    .bubble-placeholder {
+      position: absolute;
+      color: #b3b3b3;
+      left: 20px;
+      top: 10px;
+      pointer-events: none;
+    }
+
 .pop-select {
   position: relative;
   z-index: 2;
@@ -2718,7 +2729,7 @@ footer {
 
   .pop-selected,
   .pop-selectable {
-    width: 36px;
+    width: 38px;
     height: 36px;
   }