create ticket sidebar: customer info & templates

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

@@ -185,10 +185,10 @@ class App.TicketCreate extends App.Controller
     )
 
     # show template UI
-    new App.WidgetTemplate(
+    # new App.WidgetTemplate(
-      el:          @el.find('.ticket_template')
+    #   el:          @el.find('.ticket_template')
-      template_id: template['id']
+    #   template_id: template['id']
-    )
+    # )
 
     @formDefault = @formParam( @el.find('.ticket-create') )
 

app/assets/javascripts/app/controllers/widget/template.js.coffee

@@ -23,7 +23,7 @@ class App.WidgetTemplate extends App.ControllerDrox
     # insert data
     @html @template(
       file:   'widget/template'
-      header: 'Templates'
+      header: 'Select Template:'
       params:
         template: template
     )

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

@@ -1,3 +1,4 @@
+<div class="create-new horizontal flex">
   <div class="create-new main flex">
     <div class="box">
       <div class="page-header">
@@ -89,8 +90,122 @@
 
   <div class="sidebar">
     <div class="widgets">
-    <div class="customer_info"></div>
+      <div class="customer_info">
-    <div class="ticket_template"></div>
+        <div class="drox"><!-- Customer Info -->
+          <div class="drox-header">
+            <h2>Customer Info</h2>
+          </div>
+          <div class="drox-body">
+            <p>
+              <span class="customer-name">Benjamin Wahlers</span>
+              <span class="customer-email u-highlight">benjamin@wahlers.de</span>
+            </p>
+            <div class="form-group">
+              <label for="customer-info-note"><%- @T('Note') %></label>
+              <textarea class="form-control" id="customer-info-note" rows="5">Not assigned</textarea>
+            </div>
+            <label><%- @T('Tickets') %></label>
+            <ol class="tasks tasks-standalone"> <!-- vaguely based on task_widget_tasks.jst.eco -->
+              <li class="task level-1 horizontal">
+                <div class="icon-holder">
+                  <div class="priority icon"></div>
+                </div>
+                <div class="flex">
+                  <div class="u-highlight name u-textTruncate">Micro-SIM doesn't work</div>
+                  <div class="time">23 minutes ago</div>
+                </div>
+              <li class="task level-3 horizontal">
+                <div class="icon-holder">
+                  <div class="priority icon"></div>
+                </div>
+                <div class="flex">
+                  <div class="u-highlight name u-textTruncate">Superb Service!</div>
+                  <div class="time">43 minutes ago</div>
+                </div>
+              <li class="task level-2 horizontal">
+                <div class="icon-holder">
+                  <div class="priority icon"></div>
+                </div>
+                <div class="flex">
+                  <div class="u-highlight name u-textTruncate">Print sheets strip off</div>
+                  <div class="time">1 hour ago</div>
+                </div>
+              <li class="task level-3 horizontal">
+                <div class="icon-holder">
+                  <div class="priority icon"></div>
+                </div>
+                <div class="flex">
+                  <div class="u-highlight name u-textTruncate">Block not properly wrought</div>
+                  <div class="time">2 hour ago</div>
+                </div>
+            </ol>
+          </div>
+        </div>
+      </div>
+      <div class="ticket_template">
+        <div class="drox hide"><!-- Template Wizard Step One -->
+          <div class="drox-header">
+            <h2>Choose Template:</h2>
+          </div>
+          <div class="drox-body">
+            <p>No template created yet.</p>
+            <p>With templates you can pre-fill ticket attributes.</p>
+            <p>Choose attributes and then save them as a new template.</p>
+            <p><a class="create u-clickable">Save new template</a></p>
+          </div>
+        </div>
+        <div class="drox hide"><!-- Template Wizard Step Two -->
+          <div class="drox-header">
+            <h2>Create Template:</h2>
+          </div>
+          <div class="drox-body">
+            <form>
+              <div class="form-group">
+                <label for="template-title"><%- @T('Template Title') %>:</label>
+                <input class="form-control" id="template-title" placeholder="<%- @T('Enter Template Name') %>">
+              </div>
+              <p>This template saves the following attributes:</p>
+              <ul class="template-attributes">
+                <li class="template-attribute horizontal">
+                  <div class="key">Owner</div> | <div class="value flex u-textTruncate">Web-Dev</div>
+                  <div class="delete u-clickable">&times;</div>
+                <li class="template-attribute horizontal">
+                  <div class="key">Type</div> | <div class="value flex u-textTruncate">Question</div>
+                  <div class="delete u-clickable">&times;</div>
+                <li class="template-attribute horizontal">
+                  <div class="key">Status</div> | <div class="value flex u-textTruncate">open</div>
+                  <div class="delete u-clickable">&times;</div>
+                <li class="template-attribute horizontal">
+                  <div class="key">Priority</div> | <div class="value flex u-textTruncate">high</div>
+                  <div class="delete u-clickable">&times;</div>
+                <li class="template-attribute horizontal">
+                  <div class="key">Tag</div> | <div class="value flex u-textTruncate">New Website</div>
+                  <div class="delete u-clickable">&times;</div>
+                <li class="template-attribute horizontal">
+                  <div class="key">Tag</div> | <div class="value flex u-textTruncate">Feedback</div>
+                  <div class="delete u-clickable">&times;</div>
+              </ul>
+              <div class="horizontal">
+                <button class="btn btn-primary" type="submit"><%- @T('Save Template') %></button>
+                <a class="subtle-link standalone cancel align-right u-clickable"><%- @T('Cancel') %></a>
+              </div>
+            </form>
+          </div>
+        </div>
+        <div class="drox hide"><!-- Template Chooser, shown instead of Template Wizard Step One when there are templates there -->
+          <div class="drox-header">
+            <h2>Choose Template:</h2>
+          </div>
+          <div class="drox-body">
+            <ul class="templates">
+              <li class="u-clickable u-highlight">Feedback New Website
+            </ul>
+            <p>Choose attributes and then save them as a new template.</p>
+            <p><a class="create u-clickable">Save new template</a></p>
+          </div>
+        </div>
+      </div>
       <div class="text_module"></div>
     </div>
   </div>
+</div>

app/assets/javascripts/app/views/generic/drox.jst.eco

@@ -1,11 +1,11 @@
 <div class="drox">
   <div class="drox-header">
-    <h3>
+    <h2>
       <%- @T( @header ) %>
       <% if @edit: %>
       <a href="" data-type="edit" class="pull-right glyphicon glyphicon-edit" title="<%- @Ti( 'edit' ) %>"></a>
       <% end %>
-    </h3>
+    </h2>
   </div>
   <div class="drox-body">
   </div>

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

@@ -11,7 +11,7 @@
 
 <ul class="nav navbar-nav navbar-items-menu"></ul>
 
-<div class="tasks flex"></div>
+<div class="tasks tasks-navigation flex"></div>
 
 <% if !_.isEmpty(@user): %>
   <!--<a href="#bell" class="glyphicon glyphicon-bell"></a>-->

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

@@ -81,7 +81,7 @@
           <!-- .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>
-            <span class="highlight u-clickable edit-upload-button js-attachment-text">
+            <span class="u-highlight u-clickable edit-upload-button js-attachment-text">
               Dateien wählen..
               <input multiple="multiple" type="file" name="file" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;">
             </span>

app/assets/javascripts/app/views/widget/template.jst.eco

@@ -1,7 +1,5 @@
-<div class="">
+<!--<form>
-  <form>
   <div id="form-template"></div>
-    <!--<button type="submit" class="btn btn-default" data-type="template_edit"><%- @T( 'Edit' ) %></button>-->
   <button type="submit" class="btn btn-default" data-type="template_delete"><%- @T( 'Delete' ) %></button>
   <button type="submit" class="btn btn-default" data-type="template_select"><%- @T( 'Apply' ) %></button>
 </form>
@@ -12,5 +10,8 @@
     <input type="text" name="template_name" id="template_name" class="form-control" value="<%= @template.name %>"/>
   </fieldset>
   <button type="submit" class="btn btn-default" data-type="template_save"><%- @T( 'Save' ) %></button>
-  </form>
+</form>-->
-</div>
+<p>No template created yet.</p>
+<p>With templates you can pre-fill ticket attributes.</p>
+<p>Choose attributes and then save them as a new template.</p>
+<p><a class="create u-clickable">Save new template</a></p>

app/assets/stylesheets/zzz.css.erb

@@ -5,13 +5,24 @@ body {
   background: #2c2d36;
 }
 
+ol,
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+a.create {
+  color: hsl(145,51%,45%);
+  text-decoration: underline;
+}
+
 small {
   color: #c6c6c5;
   font-size: 12px;
 }
 
-.highlight {
+.u-highlight {
-  color: hsl(202,68%,54%);
+  color: hsl(194,90%,45%);
 }
 
 .u-unclickable {
@@ -622,7 +633,7 @@ label {
   font-weight: normal;
   letter-spacing: 0.1em;
   padding: 0 2px;
-  margin-bottom: 4px;
+  margin-bottom: 6px;
 }
 
 .form-group + .form-group {
@@ -822,13 +833,7 @@ label {
     color: rgba(0,0,0,.5);
   }
 
-ul.tabs {
-  padding: 0;
-  list-style: none;
-}
-
 ol.tabs {
-  padding: 0;
   list-style: decimal inside;
 }
 
@@ -1488,6 +1493,10 @@ form a.standalone {
   margin: 0 5px;
 }
 
+  form a.standalone.align-right {
+    margin-left: auto;
+  }
+
 .modal-header {
   padding: 10px 15px;
 }
@@ -1505,36 +1514,6 @@ form a.standalone {
   padding: 14px 20px 20px;
 }
 
-.drox {
-  margin-bottom: 6px;
-}
-
-.drox-header {
-  padding: 8px 13px;
-  background-color: #f5f5f5;
-  color: #333333;
-  border-radius: 5px;
-}
-
-.drox-header .glyphicon {
-  display: none;
-}
-.drox-header:hover .glyphicon, .drox-header:focus .glyphicon {
-  display: inline-block;
-  color: #005580;
-  text-decoration: none;
-}
-.drox-header h3 {
-  font-size: 13px;
-  font-weight: 200;
-  margin-top: 2px;
-  margin-bottom: 2px;
-}
-
-.drox-body {
-  padding: 8px 13px;  
-}
-
 footer {
   clear: both;
   padding-top: 10px;
@@ -1773,39 +1752,68 @@ footer {
   overflow: auto;
 }
 
+  .tasks.tasks-standalone {
+    background: none;
+    margin-top: 8px;
+  }
+
+    .tasks-standalone .task {
+      padding: 0;
+      margin-bottom: 9px;
+    }
+
+    .tasks-standalone .icon-holder {
+      width: 20px;
+    }
+
+    .tasks-standalone .icon-holder .icon {
+      margin-top: 4px;
+    }
+
+    .tasks-standalone .time {
+      color: hsl(198,19%,72%);
+    }
+
+    .tasks-standalone .task .priority.icon:after {
+      background: white;
+    }
+
   .task {
-    height: 38px;
     padding: 10px 15px 7px 0;
-    border-bottom: 1px solid #33363e;
     cursor: pointer;
     position: relative;
   }
 
-  .task .name {
+    .tasks-navigation .task {
+      height: 38px;
+      border-bottom: 1px solid #33363e;
+    }
+
+    .tasks-navigation .task:hover {
+      background: #26272e;
+    }
+
+    .tasks-navigation .name {
       color: #808080;
     }
 
+    .tasks-navigation .icon-holder {
+      width: 30px;
+    }
+
+    .tasks-navigation .icon-holder .icon {
+      margin-right: 3px;
+      margin-top: -3px;
+    }
+
   .task:hover {
     text-decoration: none;
   }
 
-  .task .icon-holder {
-    width: 30px;
-  }
-
-  .task .icon-holder .icon {
-    margin-right: 3px;
-    margin-top: -3px;
-  }
-
   .task .modified.priority.icon {
     margin-right: 8px;
   }
 
-  .task:hover {
-    background: #26272e;
-  }
-
   .task.active {
     background: #389ed9;
   }
@@ -3166,15 +3174,26 @@ footer {
       opacity: 0.5;
     }
 
-.create-new {
+.create-new .main {
   padding: 34px;
 }
 
+  .create-new .sidebar {
+    width: 290px;
+  }
+  .create-new .form-control:not(:focus):not(.focus) {
+    border-color: hsl(0,0%,90%);
+  }
+  .create-new .subtle-link {
+    color: hsl(0,0%,89%);
+  }
+
 .box {
   background: white;
   margin: 0 auto;
   border: 1px solid #e6e6e6;
   padding: 12px 24px 20px;
+  max-width: 658px;
 }
 
   .box .page-header {
@@ -3188,14 +3207,6 @@ footer {
     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;
@@ -3268,6 +3279,78 @@ footer {
     opacity: .5;
   }
 
+.drox {
+  color: hsl(60,1%,74%);
+}
+
+  .drox .drox-header {
+    padding-bottom: 2px;
+    margin-bottom: 16px;
+    border-bottom: 1px solid hsl(240,4%,95%);
+  }
+
+  .drox a.create {
+    margin-top: 2px;
+    display: inline-block;
+  }
+
+  .drox .form-group {
+    margin-bottom: 22px;
+  }
+
+  .drox .drox-body p:first-child {
+    margin-top: 20px;
+  }
+
+.create-new .templates {
+  border-bottom: 1px solid hsl(240,4%,95%);
+  padding-bottom: 14px;
+}
+
+.template-attributes {
+  margin: 17px 0 19px;
+}
+
+  .template-attribute {
+    height: 24px;
+    line-height: 25px;
+    padding-left: 10px;
+    margin-bottom: 2px;
+    font-size: 13px;
+    color: hsl(198,11%,59%);
+    background: hsl(197,20%,93%);
+    border: 1px solid hsl(0,0%,90%);
+    border-radius: 3px;
+  }
+
+    .template-attribute .key {
+      text-transform: uppercase;
+      margin-right: 3px;
+    }
+
+    .template-attribute .value {
+      margin-left: 3px;
+    }
+
+    .template-attribute .delete {
+      padding: 0 7px;
+      margin-top: 4px;
+      line-height: 19px;
+      font-size: 28px;
+      font-weight: lighter;
+      opacity: .4;
+    }
+
+.customer-name {
+  color: hsl(60,1%,34%);
+}
+
+.customer-email {
+  margin-top: 5px;
+  margin-bottom: 20px;
+  display: block;
+}
+
 /* 
 
   ----------------