first ticket-edit steps

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

@@ -1,4 +1,4 @@
-<div class="main flex">
+<div class="main flex no-padding">
 
   <div class="page-header ticket-zoom horizontal">
     <div class="flex vertical center">

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

@@ -1,9 +1,9 @@
 <% for article in @articles: %>
-<div class="ticket-article-item <%= article.sender.name.toLowerCase() %> <%= article.type.name %><%= ' internal' if article.internal is true %>" data-id="<%= article.id %>" id="article-<%= article.id %>">
+<div class="ticket-article-item bubble-grid <%= article.sender.name.toLowerCase() %> <%= article.type.name %><%= ' internal' if article.internal is true %>" data-id="<%= article.id %>" id="article-<%= article.id %>">
   <div class="horizontal<%= ' reverse' if article.sender.name is 'Customer' %>">
     <div class="avatar" style="background-image: url(<%= article.created_by.image %>)"></div>
     <div class="flex">
-      <div class="article-message"><div class="article-message-arrow"></div><%- article.html %></div>
+      <div class="text-bubble"><div class="bubble-arrow"></div><%- article.html %></div>
     </div>
   </div>
   <time class="task-meta humanTimeFromNow" datetime="<%- article.created_at %>" data-time="<%- article.created_at %>">?</time>

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

@@ -1,21 +1,57 @@
-<div class="horizontal well edit <% if @formChanged: %>form-changed<% end %>">
-  <div class="avatar">
-    <img class="thumbnail user-popover" data-id="<%= @S('id') %>" src="<%- @S('image') %>" alt="">
-  </div>
-  <div class="ticket-article-message flex">
-    <div class="edit-title">
-      <h4><%- @T('Edit') %>
-      <small class="reset-message<% if !@formChanged: %> hide<% end %>">
-        <a href="#" data-type="reset"><%- @T('Discard your unsaved changes.') %></a> <href="#" class="glyphicon glyphicon-repeat" data-type="reset"></a>
-      </small>
-      </h4>
-    </div>
-    <div class="edit-content">
-      <form class="form-stacked ticket-update">
-        <div class="form-ticket-update"></div>
-        <div class="form-article-update"></div>
-        <button type="submit" class="btn btn-primary submit"><%- @T( 'Submit' ) %></button>
-      </form>
-    <div>
+<div class="horizontal bubble-grid edit <% if @formChanged: %>form-changed<% end %>">
+  <div class="avatar user-popover" data-id="<%= @S('id') %>" style="background-image: url(<%- @S('image') %>)"></div>
+  <div class="flex text-bubble">
+    <div class="bubble-arrow"></div>
+    <textarea class="fit"></textarea>
+    <span class="bubble-placeholder">Antwort eingeben oder <span class="highlight">Dateien wählen</span></span>
   </div>
 </div>
+
+<form class="edit-ticket-properties form-inline" role="form">
+  <div class="horizontal">
+    <div class="form-group">
+      <div class="input-group">
+        <label for="update_ticket_1_state_id" class="input-group-addon">State</label>
+        <select id="update_ticket_1_state_id" class="form-control" name="state_id">
+          <option value="4">closed</option>
+          <option value="1" selected="">new</option>
+          <option value="2">open</option>
+          <option value="3">pending</option>
+        </select>
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="input-group">
+        <label for="update_ticket_1_priority_id" class="input-group-addon">Priority</label>
+        <select id="update_ticket_1_priority_id" class="form-control" name="priority_id">
+          <option value="1">1 low</option>
+          <option value="2" selected="">2 normal</option>
+          <option value="3">3 high</option>
+        </select>
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="input-group">
+        <label for="update_ticket_1_group_id" class="input-group-addon">Group</label>
+        <select id="update_ticket_1_group_id" class="form-control" name="group_id">
+          <option value="4">FillGroup::450863</option>
+          <option value="3">FillGroup::918672</option>
+          <option value="2">Twitter</option>
+          <option value="1" selected="">Users</option>
+        </select>
+      </div>
+    </div>
+    <div class="form-group">
+      <div class="input-group">
+        <label for="update_ticket_1_owner_id" class="input-group-addon">Owner</label>
+        <select id="update_ticket_1_owner_id" class="form-control" name="owner_id">
+          <option value="">-</option>
+          <option value="3">Felix Niklas</option>
+        </select>
+      </div>
+    </div>
+    <div class="form-group">
+      <input type="submit" class="btn primary submit" value="update">
+    </div>
+  </div>
+</form>

app/assets/stylesheets/zzz.css.erb

@@ -5,6 +5,10 @@ body {
   background: #2c2d36;
 }
 
+.highlight {
+  color: hsl(202,68%,54%);
+}
+
 #app > nav {
   position: relative;
   z-index: 1;
@@ -1265,25 +1269,6 @@ form.form-inline input[type="password"] {
 }
 
 
-.edit {
-}
-.edit .form-group {
-  margin-bottom: 2px;
-}
-.edit select, .edit input {
-  height: 30px;
-}
-.edit:focus {
-  color: #000000;
-  outline: 0;
-}
-.edit-title {
-}
-.edit-title small {
-  font-size: 12px;
-}
-
-
 .delete {
   background:url("../assets/close.png") no-repeat;
   text-indent: -9999em;
@@ -2056,6 +2041,10 @@ footer {
   position: relative;
 }
 
+  .main.no-padding {
+    padding: 0;
+  }
+
 .popover {
   width: 372px;
   max-width: 9999px;
@@ -2284,6 +2273,11 @@ footer {
   .form-inline .form-group {
     padding: 10px;
     overflow: hidden;
+    flex-grow: 1;
+  }
+
+  .form-inline .form-group .btn {
+    width: 100%;
   }
 
   .form-inline .form-group:not(:last-child) {
@@ -2313,7 +2307,7 @@ footer {
   }
 
 .ticket-zoom {
-  margin-top: 52px;
+  margin-top: 62px;
   margin-bottom: 46px;
   border-bottom: none;
 }
@@ -2333,16 +2327,21 @@ footer {
     font-size: 12px;
   }
 
-.ticket-article-item {
+.bubble-grid {
   max-width: 800px;
-  margin: 33px auto;
+  margin: 0 auto;
 }
 
-  .ticket-article-item .avatar {
+  .bubble-grid .avatar {
     margin: 0 15px;
   }
 
-  .article-message {
+  .ticket-article-item {
+    margin-top: 33px;
+    margin-bottom: 33px;
+  }
+
+  .text-bubble {
     padding: 10px 20px;
     margin-right: 70px;
     white-space: pre-wrap;
@@ -2353,7 +2352,7 @@ footer {
     position: relative;
   }
 
-  .customer.ticket-article-item .article-message {
+  .customer.ticket-article-item .text-bubble {
     background: #e5f0f5;
     margin-right: 0;
     margin-left: 70px;
@@ -2361,7 +2360,38 @@ footer {
     box-shadow: none;
   }
 
-    .article-message-arrow {
+  .edit .text-bubble {
+    padding: 0;
+    border-color: #b3b3b3;
+    white-space: normal;
+  }
+
+    .edit textarea {
+      border: none;
+      background: none;
+      padding: 10px 20px;
+      outline: none;
+      height: 38px;
+    }
+
+    .edit textarea:focus + .bubble-placeholder {
+      display: none;
+    }
+
+    .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;
       height: 9px;
@@ -2370,7 +2400,7 @@ footer {
       overflow: hidden;
     }
     
-    .article-message-arrow:after {
+    .bubble-arrow:after {
       content: "";
       position: absolute;
       top: -1px;
@@ -2383,12 +2413,12 @@ footer {
       transform: rotate(-45deg);
     }
 
-    .customer.ticket-article-item .article-message-arrow {
+    .customer.ticket-article-item .bubble-arrow {
       left: auto;
       right: -6px;
     }
 
-    .customer.ticket-article-item .article-message-arrow:after {
+    .customer.ticket-article-item .bubble-arrow:after {
       background: #e5f0f5;
       left: auto;
       right: 2px;
@@ -2402,7 +2432,12 @@ footer {
     display: block;
   }
 
-.ticket-edit {
+.edit-ticket-properties {
+  margin-top: 36px;
+  background: white;
+}
+
+.sidebar {
   display: none;
 }