Added custom changes, improved zoom view.

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

@@ -110,20 +110,20 @@ class Index extends App.Controller
     
     @configure_attributes_ticket = [
       { name: 'ticket_state_id',    display: 'State',    tag: 'select',   multiple: false, null: true, relation: 'TicketState', default: 'new', class: 'span2', item_class: 'keepleft' },
-      { name: 'ticket_priority_id', display: 'Priority', tag: 'select',   multiple: false, null: true, relation: 'TicketPriority', default: '2 normal', class: 'span1', item_class: 'keepleft' },
+      { name: 'ticket_priority_id', display: 'Priority', tag: 'select',   multiple: false, null: true, relation: 'TicketPriority', default: '2 normal', class: 'span2', item_class: 'keepleft' },
       { name: 'group_id',           display: 'Group',    tag: 'select',   multiple: false, null: true, relation: 'Group', class: 'span2', item_class: 'keepleft'  },
       { name: 'owner_id',           display: 'Owner',    tag: 'select',   multiple: false, null: true, relation: 'User', filter: @edit_form, nulloption: true, class: 'span2', item_class: 'keepleft' },
     ]
     form_ticket = @formGen( model: { configure_attributes: @configure_attributes_ticket, className: 'create' }, params: @ticket )
     @configure_attributes_article = [
 #      { name: 'from',                     display: 'From',     tag: 'input',    type: 'text', limit: 100, null: false, class: 'span8',  },
+      { name: 'ticket_article_type_id',   display: 'Type',        tag: 'select',   multiple: false, null: true, relation: 'TicketArticleType', default: '9', class: 'medium', item_class: '' },
       { name: 'to',                       display: 'To',          tag: 'input',    type: 'text', limit: 100, null: true, class: 'span7', item_class: 'hide' },
       { name: 'cc',                       display: 'Cc',          tag: 'input',    type: 'text', limit: 100, null: true, class: 'span7', item_class: 'hide' },
       { name: 'subject',                  display: 'Subject',     tag: 'input',    type: 'text', limit: 100, null: true, class: 'span7', item_class: 'hide' },
       { name: 'in_reply_to',              display: 'In Reply to', tag: 'input',    type: 'text', limit: 100, null: true, class: 'span7', item_class: 'hide' },
-      { name: 'body',                     display: 'Text',        tag: 'textarea', rows: 5,  limit: 100, null: true, class: 'span7',  },
+      { name: 'body',                     display: 'Text',        tag: 'textarea', rows: 5,  limit: 100, null: true, class: 'span7', item_class: ''  },
-      { name: 'ticket_article_type_id',   display: 'Type',        tag: 'select',   multiple: false, null: true, relation: 'TicketArticleType', default: '9', class: 'medium', item_class: 'keepleft' },
+      { name: 'internal',                 display: 'Visability',  tag: 'select',   default: false,  null: true, options: { true: 'internal', false: 'public' }, class: 'medium', item_class: '' },
-      { name: 'internal',                 display: 'Visability',  tag: 'radio',  default: false,  null: true, options: { true: 'internal', false: 'public' }, class: 'medium', item_class: 'keepleft' },
 #      { name: 'ticket_article_sender_id', display: 'Sender',   tag: 'select',   multiple: false, null: true, relation: 'TicketArticleSender', default: '', class: 'medium' },
     ]
     form_article = @formGen( model: { configure_attributes: @configure_attributes_article } )

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

@@ -6,10 +6,10 @@
   <div class="span9">
 
     <div class="row well">
-      <div class="avatar span1 media-grid">
+      <div class="avatar span1 thumbnails">
         <img class="thumbnail user-data" data-id="<%= window.Session['id'] %>"" src="<%- window.Session['image'] %>" alt="">
       </div>
-      
+
       <div class="span8">
         <div class="row">
 
@@ -26,16 +26,16 @@
           </form>
         </div>
       </div>
-      
+
     </div>
-  
+
 <% for article in @articles: %>
-    <div class="row article<% if article.internal is true: %> internal<% end %>" data-id="<%= article.id %>">
+    <div class="row well article" data-id="<%= article.id %>">
-      <div class="span1">
+      <div class="avatar span1 thumbnails">
         <img class="thumbnail user-data" data-id="<%= article.created_by_id %>" src="<%= article.created_by.image %>" alt="">
       </div>
       
-      <div class="span7 article-message">
+      <div class="span8 well-muted article-message <% if article.internal is true: %> internal<% end %>">
         <% if article.from: %>
           <strong title="From: <%= article.from %>"><%= article.from %></strong>
           <% if article.actions: %>
@@ -84,7 +84,7 @@
         </ul>
       </div>
     </div>
-
+<!--
     <div class="row">
       <div class="well">
         <h3>Linked Objects</h3>
@@ -94,7 +94,7 @@
         </ul>
       </div>
     </div>
-
+-->
   </div>
 
 </div>

app/assets/stylesheets/zzz.css

@@ -13,6 +13,20 @@ body {
   background-image: url("../assets/glyphicons-halflings.png");
 }
 
+/*
+ * bootstrap changes
+ */
+/* improve pagination if only one page is shown */
+.pagination li:only-child a {
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
+/* replace music icon with attachment */
+.icon-attachment {
+  background-position: -24px 0;
+}
+ 
 /*
  * 
  */
@@ -22,6 +36,10 @@ body {
   color: #999999;
 }
 
+.update-box .controls .span2 {
+  width: 132px;
+}
+
 /*
  * removed margin of forms to not break the layout with submit buttons within <form></form> area e. g. for modal dialogs
  */
@@ -93,23 +111,49 @@ footer {
 .ticket-answer .avatar {
     margin-left: 0;
 }
-.ticket-answer .span8 { width: 560px; }
+.ticket-answer .span8 { width: 558px; }
 
 .article {
+  border: none;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
   margin-left: 0;
-  padding-top: 4px;
+  margin-top: 0px;
-  padding-bottom: 4px;
+  margin-bottom: 10px;
-  margin-top: 5px;
+
-  margin-bottom: 5px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-right: 0px;
   
-  border: 1px solid #ffffff;
+  background-color: #ffffff;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
 }
 
 .article-message {
-  padding-left: 4px;
+  
+  margin: 0 0 0 0;
+  margin-left: 10px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-left: 8px;
+  
+  width: 580px;
+}
+
+.article .span8 {
+  width: 578px;
+}
+
+.well-muted {
+  background-color: #fff;
+  border: 1px solid #eee;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); 
 }
 
 .internal {