style create new ticket

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

@@ -197,6 +197,8 @@ class App.TicketCreate extends App.Controller
       el: @el.find('.ticket-create').find('textarea')
     )
 
+    $('#tags').tokenfield()
+
     # start auto save
     @autosave()
 

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

@@ -1,18 +1,90 @@
-<div class="main flex">
-
-  <div class="page-header">
-    <h1><%- @T( 'New Ticket' ) %> <small>(<%- @T( @title ) %>)<% if @admin: %> <a href="#" data-type="settings" class="glyphicon glyphicon-edit"></a><% end %></small></h1>
-  </div>
-
-  <form class="form-horizontal form-large ticket-create">
-    <input type="hidden" value="" name="article_type"/>
-    <div class="ticket_create"></div>
-    <div class="form-actions">
-      <button type="reset" class="btn cancel"><%- @T( 'Cancel' ) %></button>&nbsp;<button type="submit" class="btn btn-primary submit"><%- @T( 'Create' ) %></button>
+<div class="create-new main flex">
+  <div class="box">
+    <div class="page-header">
+      <h1><%- @T( 'Create New Ticket' ) %></h1>
     </div>
-  </form>
 
- </div>
+    <ul class="horizontal tabs type-tabs">
+
+      <li class="tab u-textTruncate active">
+        <div class="white email channel icon"></div>
+        <%- @T( 'E-Mail' ) %>
+
+      <li class="tab u-textTruncate">
+        <div class="gray received-calls channel icon"></div>
+        <%- @T( 'Received Call' ) %>
+
+      <li class="tab u-textTruncate">
+        <div class="gray outbound-calls channel icon"></div>
+        <%- @T( 'Outbound Call' ) %>
+
+    </ul>
+
+    <form role="form">
+
+      <div class="form-group">
+        <label for="customer"><%- @T('Customer') %></label>
+        <input class="form-control" id="customer" placeholder="<%- @T('Enter Person or Organisation/Company') %>">
+      </div>
+
+      <div class="form-group">
+        <label for="subject"><%- @T('Subject') %></label>
+        <input class="form-control" id="subject">
+      </div>
+
+      <div class="form-group">
+        <label for="text"><%- @T('Text') %></label>
+        <textarea class="form-control" id="text" rows="4"></textarea>
+      </div>
+
+      <div class="formset-inset">
+        <div class="horizontal two-columns">
+          <div class="form-group column">
+            <label for="owner"><%- @T('Owner') %></label>
+            <select class="form-control" id="owner">
+              <option>Support -> Oliver Ruhm</option>
+              <option>Engineering -> Web-Dev</option>
+            </select>
+          </div>
+          <div class="form-group column">
+            <label for="type"><%- @T('Type') %></label>
+            <select class="form-control" id="type">
+              <option>Inquiry</option>
+              <option>Support</option>
+              <option selected>Question</option>
+            </select>
+          </div>
+          <div class="form-group column">
+            <label for="status"><%- @T('Status') %></label>
+            <select class="form-control" id="status">
+              <option selected>open</option>
+              <option>closed</option>
+            </select>
+          </div>
+          <div class="form-group column">
+            <label for="proprity"><%- @T('Priority') %></label>
+            <select class="form-control" id="proprity">
+              <option>low</option>
+              <option selected>normal</option>
+              <option>high</option>
+            </select>
+          </div>
+        </div>
+
+        <div class="form-group">
+          <label for="tags"><%- @T('Tags') %></label>
+          <input class="form-control" id="tags" placeholder="<%- @T('Tag hinzufügen') %>" value="New Website, Feedback">
+        </div>
+
+      </div>
+
+      <input type="hidden" value="" name="article_type"/>
+      <div class="form-actions horizontal">
+        <a class="subtle-link standalone cancel" href="#/"><%- @T( 'Cancel & Go Back' ) %></a>
+        <button type="submit" class="btn btn-create submit align-right"><%- @T( 'Create Ticket' ) %></button>
+      </div>
+    </form>
+  </div>
 </div>
 
 <div class="sidebar">

app/assets/javascripts/app/views/popover/ticket.jst.eco

@@ -11,7 +11,7 @@
   <%- @P( @ticket.customer ) %>
 </div>
 <hr>
-<div class="horizontal two-columns wrap">
+<div class="horizontal two-columns">
   <div class="column">
     <h3>#</h3>
     <div class="u-textTruncate"><%- @P( @ticket.number ) %></div>

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

@@ -77,7 +77,7 @@
       <div class="internal-border">
         <div class="text-bubble">
           <div class="bubble-arrow"></div>
-          <textarea></textarea>
+          <textarea rows="1"></textarea>
           <!-- .text-bubble grows with textarea (and expanding clone) -->
           <div class="article-attachment js-attachment u-unclickable">
             <span class="bubble-placeholder-hint">Antwort eingeben oder</span>

app/assets/stylesheets/zzz.css.erb

@@ -157,6 +157,13 @@ span[data-tooltip]:hover:before {
   transition: transform 300ms 1.5s cubic-bezier(0.34,1.6,0.71,1), opacity 300ms 1.5s;
 }
 
+.form-control::-webkit-input-placeholder,
+.token-input::-webkit-input-placeholder {    color: hsl(0,0%,80%); }
+.form-control::-moz-placeholder,
+.token-input::-moz-placeholder { opacity: 1; color: hsl(0,0%,80%); }
+.form-control:-ms-input-placeholder,
+.token-input:-ms-input-placeholder {         color: hsl(0,0%,80%); }
+
 .glyphicon {
   font-size: 13px;
 }
@@ -630,13 +637,15 @@ label {
 
 .form-control {
   height: 41px;
+  line-height: 22px;
   font-weight: normal;
   box-shadow: none;
   border-radius: 3px;
   transition: none;
 }
 
-  .form-control:focus {
+  .form-control:focus,
+  .tokenfield.focus {
     box-shadow: none;
     border-color: #419ed7;
   }
@@ -663,25 +672,6 @@ label {
     z-index: 1;
   }
 
-.form-large {
-  width: 85%;
-  max-width: 700px;
-}
-.form-normal {
-  width: 70%;
-  max-width: 400px;
-}
-.form-small {
-  width: 50%;
-  max-width: 250px;
-}
-.form-normal fieldset {
-  margin-bottom: 10px;
-}
-.sidebar fieldset {
-  margin-bottom: 10px;
-}
-
 .form-horizontal label {
   text-align: right;
   float: left;
@@ -832,6 +822,11 @@ label {
     color: rgba(0,0,0,.5);
   }
 
+ul.tabs {
+  padding: 0;
+  list-style: none;
+}
+
 ol.tabs {
   padding: 0;
   list-style: decimal inside;
@@ -1716,13 +1711,18 @@ footer {
   padding: 9px 24px 8px;
 }
 
-.btn.primary,
 .btn-primary {
   color: white;
   background: #419ed7;
   border-color: #419ed7;
 }
 
+.btn-create,
+.btn-create:hover {
+  color: white;
+  background: hsl(145,51%,45%);
+}
+
 .navigation {
   width: 260px;
   background: #26272e;
@@ -3166,6 +3166,108 @@ footer {
       opacity: 0.5;
     }
 
+.create-new {
+  padding: 34px;
+}
+
+.box {
+  background: white;
+  margin: 0 auto;
+  border: 1px solid #e6e6e6;
+  padding: 12px 24px 20px;
+}
+
+  .box .page-header {
+    text-align: center;
+    border-bottom: none;
+    margin: 0;
+    padding-bottom: 12px;
+  }
+
+  .box h1 {
+    color: hsl(60,1%,34%);
+  }
+
+  .box .subtle-link {
+    color: hsl(0,0%,89%);
+  }
+
+  .box .form-control:not(:focus):not(.focus) {
+    border-color: hsl(0,0%,90%);
+  }
+
+  .box .two-columns {
+    margin-left: -4px;
+    margin-right: -4px;
+  }
+
+  .box .two-columns .column {
+    margin-left: 4px;
+    margin-right: 4px;
+    width: calc(50% - 8px);
+  }
+
+.formset-inset {
+  margin: 31px -24px 24px;
+  padding: 19px 24px 4px;
+  background: hsl(197,20%,93%);
+  border-top: 1px solid hsl(0,0%,90%);
+  border-bottom: 1px solid hsl(0,0%,90%);
+}
+
+.type-tabs .tab {
+  line-height: 40px;
+  padding: 0;
+}
+
+.type-tabs .icon {
+  vertical-align: top;
+  margin-right: 9px;
+  margin-top: 10px;
+  transform: scale(1.2);
+}
+
+.tokenfield .token {
+  padding: 0 0 0 10px;
+  margin: -1px 5px 0 0;
+  height: 26px;
+  line-height: 27px;
+  color: white;
+  background: hsl(198,19%,72%);
+  border: none;
+  float: none;
+}
+
+  .tokenfield .token-input {
+    vertical-align: top;
+    margin: 2px 0 0 5px;
+  }
+
+  .tokenfield .token .token-label {
+    padding: 0; 
+  }
+
+  .tokenfield.form-control {
+    padding-top: 8px;
+  }
+
+  .tokenfield .token .close {
+    margin: 0;
+    padding: 0 10px 0 5px;
+    font-family: inherit;
+    font-weight: 100;
+    font-size: 30px;
+    line-height: 1;
+    color: white;
+    text-shadow: none;
+    opacity: .3;
+    outline: none;
+  }
+
+  .tokenfield .token .close:hover {
+    opacity: .5;
+  }
+
 /* 
 
   ----------------