From 5124c4ff0ae841c63bbad461db89d80bbbaf39f2 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mail@felixniklas.de>
Date: Fri, 5 Sep 2014 11:20:07 +0200
Subject: [PATCH] create ticket sidebar: customer info & templates

---
 .../controllers/agent_ticket_create.js.coffee |   8 +-
 .../app/controllers/widget/template.js.coffee |   2 +-
 .../app/views/agent_ticket_create.jst.eco     | 279 +++++++++++++-----
 .../app/views/generic/drox.jst.eco            |   4 +-
 .../javascripts/app/views/navigation.jst.eco  |   2 +-
 .../app/views/ticket_zoom/edit.jst.eco        |   2 +-
 .../app/views/widget/template.jst.eco         |  33 ++-
 app/assets/stylesheets/zzz.css.erb            | 215 +++++++++-----
 8 files changed, 372 insertions(+), 173 deletions(-)

diff --git a/app/assets/javascripts/app/controllers/agent_ticket_create.js.coffee b/app/assets/javascripts/app/controllers/agent_ticket_create.js.coffee
index 8abbd12f3..3447539ef 100644
--- a/app/assets/javascripts/app/controllers/agent_ticket_create.js.coffee
+++ b/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(
-      el:          @el.find('.ticket_template')
-      template_id: template['id']
-    )
+    # new App.WidgetTemplate(
+    #   el:          @el.find('.ticket_template')
+    #   template_id: template['id']
+    # )
 
     @formDefault = @formParam( @el.find('.ticket-create') )
 
diff --git a/app/assets/javascripts/app/controllers/widget/template.js.coffee b/app/assets/javascripts/app/controllers/widget/template.js.coffee
index 9367285ea..7c12c8109 100644
--- a/app/assets/javascripts/app/controllers/widget/template.js.coffee
+++ b/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
     )
diff --git a/app/assets/javascripts/app/views/agent_ticket_create.jst.eco b/app/assets/javascripts/app/views/agent_ticket_create.jst.eco
index 780377332..fd1c859e5 100644
--- a/app/assets/javascripts/app/views/agent_ticket_create.jst.eco
+++ b/app/assets/javascripts/app/views/agent_ticket_create.jst.eco
@@ -1,96 +1,211 @@
-<div class="create-new main flex">
-  <div class="box">
-    <div class="page-header">
-      <h1><%- @T( 'Create New Ticket' ) %></h1>
-    </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 class="create-new horizontal flex">
+  <div class="create-new main flex">
+    <div class="box">
+      <div class="page-header">
+        <h1><%- @T( 'Create New Ticket' ) %></h1>
       </div>
 
-      <div class="form-group">
-        <label for="subject"><%- @T('Subject') %></label>
-        <input class="form-control" id="subject">
-      </div>
+      <ul class="horizontal tabs type-tabs">
 
-      <div class="form-group">
-        <label for="text"><%- @T('Text') %></label>
-        <textarea class="form-control" id="text" rows="4"></textarea>
-      </div>
+        <li class="tab u-textTruncate active">
+          <div class="white email channel icon"></div>
+          <%- @T( 'E-Mail' ) %>
 
-      <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>
+        <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="tags"><%- @T('Tags') %></label>
-          <input class="form-control" id="tags" placeholder="<%- @T('Tag hinzufügen') %>" value="New Website, Feedback">
+          <label for="subject"><%- @T('Subject') %></label>
+          <input class="form-control" id="subject">
         </div>
 
-      </div>
+        <div class="form-group">
+          <label for="text"><%- @T('Text') %></label>
+          <textarea class="form-control" id="text" rows="4"></textarea>
+        </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 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>
 
-<div class="sidebar">
-  <div class="widgets">
-    <div class="customer_info"></div>
-    <div class="ticket_template"></div>
-    <div class="text_module"></div>
+  <div class="sidebar">
+    <div class="widgets">
+      <div class="customer_info">
+        <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>
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/generic/drox.jst.eco b/app/assets/javascripts/app/views/generic/drox.jst.eco
index cba06c21f..82d0b03c6 100644
--- a/app/assets/javascripts/app/views/generic/drox.jst.eco
+++ b/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>
diff --git a/app/assets/javascripts/app/views/navigation.jst.eco b/app/assets/javascripts/app/views/navigation.jst.eco
index 2fc7d29dc..6ea97d6ea 100644
--- a/app/assets/javascripts/app/views/navigation.jst.eco
+++ b/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>-->
diff --git a/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco b/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco
index 869493e7c..bf3f6fb48 100644
--- a/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco
+++ b/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>
diff --git a/app/assets/javascripts/app/views/widget/template.jst.eco b/app/assets/javascripts/app/views/widget/template.jst.eco
index 48af7cf79..3b3461bad 100644
--- a/app/assets/javascripts/app/views/widget/template.jst.eco
+++ b/app/assets/javascripts/app/views/widget/template.jst.eco
@@ -1,16 +1,17 @@
-<div class="">
-  <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>
-  <br>
-  <form>
-    <fieldset>
-      <label class="" for="template_name"><%- @T( 'Save as Template' ) %></label>
-      <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>
-</div>
+<!--<form>
+  <div id="form-template"></div>
+  <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>
+<br>
+<form>
+  <fieldset>
+    <label class="" for="template_name"><%- @T( 'Save as Template' ) %></label>
+    <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>-->
+<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>
\ No newline at end of file
diff --git a/app/assets/stylesheets/zzz.css.erb b/app/assets/stylesheets/zzz.css.erb
index 070ce4c81..a1eae33e4 100644
--- a/app/assets/stylesheets/zzz.css.erb
+++ b/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 {
-  color: hsl(202,68%,54%);
+.u-highlight {
+  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 {
-    color: #808080;
-  }
+    .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;
+}
+
 /* 
 
   ----------------