Added functionality to new design.

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

@@ -209,6 +209,9 @@ class App.TicketZoom extends App.Controller
         ui:      @
       )
 
+    # enable user popups
+    @userPopups()
+
 class TicketTitle extends App.Controller
   events:
     'blur .ticket-title-update': 'update'

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

@@ -4,9 +4,8 @@
       <div class="flex-overflow sidebar-tabs--spacing">
         <div class="page-header horizontal">
           <div class="flex vertical center">
-            <div class="big avatar" style="background-image: url(http://berta9.express.ge/31/performer/Paul%20van%20Dyk/.photo/34_paul_van_dyk_01.jpg)"></div>
+            <div class="big avatar user-popover" data-id="<%- @ticket.customer.id %>" style="background-image: url(<%- @ticket.customer.imageUrl %>)"></div>
             <div class="ticket-title"></div>
-            <div class="task-meta">ID #10098 - Dienstag, <time datetime="2014-01-07T15:26:31">07. Januar 2014 um 15:26</time></div>
           </div>
           <div class="page-header-meta">
             <% if @C( 'LastOverview' ) && @nav: %>

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

@@ -1,49 +1,57 @@
 <% for article in @articles: %>
-<!--
 <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="horizontal<%= ' reverse' if article.sender.name isnt 'Agent' %>">
-    <div class="avatar" style="background-image: url(<%= article.created_by.image %>)"></div>
+    <div class="avatar" style="background-image: url(<%= article.created_by.imageUrl %>)">
-    <div class="flex">
+
-      <div class="text-bubble"><div class="bubble-arrow"></div><%- article.html %></div>
--->
-  <div class="ticket-article ticket-article-item <% if article.internal is true: %> internal<% end %>" data-id="<%= article.id %>" id="article-<%= article.id %>">
-    <div class="avatar">
-      <img class="thumbnail user-popover" data-id="<%= article.created_by_id %>" src="<%= article.created_by.imageUrl %>" alt="">
       <ul>
         <li style="font-size: 10px;"><%- @T(article.type.name) %></li>
         <% if article.type.name is 'email': %><li style="font-size: 10px;"><a href="<%= App.Config.get('api_path') %>/ticket_article_plain/<%= article.id %>"><%- @T( 'raw' ) %></a></li><% end %>
       </ul>
-    </div>
+
-    <div class="ticket-article-message">
-      <div class="ticket-article-meta">
-        <% if article.from: %>
-          <strong title="<%- @Ti( 'From' ) %>: <%= article.from %>"><%= article.from %></strong>
       <% if article.actions: %>
         <% for action in article.actions: %>
           -
           <a href="<%= action.href %>" data-type="<%= action.type %>" class="<% if action.class: %><%= action.class %><% end %>"><%- @T( action.name ) %></a>
         <% end %>
       <% end %>
-         - <span class="humanTimeFromNow" data-time="<%- article.created_at %>">?</span>
+    </div>
+    <div class="flex">
+
+
+      <div class="show-on-text-bubble-hover">
+        <% if article.from: %>
+          <div title="<%- @Ti( 'From' ) %>: <%= article.from %>"><%- @T( 'From' ) %>: <%= article.from %></div>
         <% end %>
         <% if article.to: %>
-          <div title="<%- @Ti( 'To' ) %>: <%= article.to %>"><%= article.to %></div>
+          <div title="<%- @Ti( 'To' ) %>: <%= article.to %>"><%- @T( 'To' ) %>: <%= article.to %></div>
         <% end %>
         <% if article.cc: %>
-          <div title="<%- @Ti( 'Cc' ) %>: <%= article.cc %>"><%= article.cc %></div>
+          <div title="<%- @Ti( 'Cc' ) %>: <%= article.cc %>"><%- @T( 'Cc' ) %>: <%= article.cc %></div>
         <% end %>
         <% if article.subject: %>
-          <div title="<%- @Ti( 'Subject' ) %>: <%= article.subject %>"><%= article.subject %></div>
+          <div title="<%- @Ti( 'Subject' ) %>: <%= article.subject %>"><%- @T( 'Subject' ) %>: <%= article.subject %></div>
         <% end %>
+      </div>
+
       <% if article.attachments: %>
-          <div>
+        <div class="always-shown">
         <% for attachment in article.attachments: %>
           <a href="<%= App.Config.get('api_path') %>/ticket_attachment/<%= article.ticket_id %>/<%= article.id %>/<%= attachment.id %>" target="_blank" data-type="attachment" class="attachment" title="<%= attachment.size %>"><%= attachment.filename %></a>
         <% end %>
         </div>
       <% end %>
+
+      <div class="text-bubble"><div class="bubble-arrow"></div><%- article.html %></div>
+<!--
+  <div class="ticket-article ticket-article-item <% if article.internal is true: %> internal<% end %>" data-id="<%= article.id %>" id="article-<%= article.id %>">
+    <div class="avatar">
+      <img class="thumbnail user-popover" data-id="<%= article.created_by_id %>" src="<%= article.created_by.imageUrl %>" alt="">
+
     </div>
+    <div class="ticket-article-message">
+
       <div style="white-space:pre-wrap;" class="message"><%- 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/title.jst.eco

@@ -1 +1,5 @@
 <h1><span contenteditable="true" class="ticket-title-update inline-edit"><%= @P( @ticket.title ) %></span></h1>
+
+<div class="task-meta">
+  <%- @C('ticket_hook') %> <%- @ticket.number %> - <span class="humanTimeFromNow" data-time="<%- @ticket.created_at %>">?</span> <% if !@isCustomer && @ticket.escalation_time: %><%- @T('Escalation') %> <span class="humanTimeFromNow escalation" data-time="<%- @ticket.escalation_time %>">?</span><% end %>
+</div>

app/assets/stylesheets/zzz.css.erb

@@ -2343,7 +2343,7 @@ footer {
 }
 
   .ticket-title {
-    max-width: 400px;
+    max-width: 90%;
   }
 
     .ticket-title h1 {
@@ -2355,6 +2355,7 @@ footer {
   .task-meta {
     color: #c6c6c5;
     font-size: 12px;
+    text-align: center;
   }
 
 .bubble-grid {