From 6ce1e7facfff4f7fc558946056741649924d871c Mon Sep 17 00:00:00 2001
From: Martin Edenhofer <me@edenhofer.de>
Date: Tue, 26 Aug 2014 01:34:22 +0200
Subject: [PATCH] Improved markup, QA need to be done by felix.

---
 .../app/controllers/ticket_zoom.js.coffee     |  22 +--
 .../views/ticket_zoom/article_view.jst.eco    | 132 +++++++++---------
 app/assets/stylesheets/zzz.css.erb            |   8 ++
 3 files changed, 85 insertions(+), 77 deletions(-)

diff --git a/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee b/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee
index 37017c26b..530eb5b6b 100644
--- a/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee
+++ b/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee
@@ -629,9 +629,9 @@ class ArticleView extends App.Controller
 
     # runntime update
     if internal
-      $(e.target).closest('.article-content').find('.text-bubble').addClass('internal')
+      $(e.target).closest('.ticket-article-item').find('.text-bubble').addClass('internal')
     else
-      $(e.target).closest('.article-content').find('.text-bubble').removeClass('internal')
+      $(e.target).closest('.ticket-article-item').find('.text-bubble').removeClass('internal')
 
   show_toogle: (e) ->
     e.preventDefault()
@@ -646,16 +646,16 @@ class ArticleView extends App.Controller
 
   more_toogle: (e) ->
     e.preventDefault()
-    if !$(e.target).closest('.article-content').find('.article-meta.top').hasClass('hide')
-      $(e.target).closest('.article-content').find('.more').removeClass('hide')
-      $(e.target).closest('.article-content').find('.close-details').addClass('hide')
-      $(e.target).closest('.article-content').find('.article-meta.top').addClass('hide')
-      $(e.target).closest('.article-content').find('.article-meta.bottom').addClass('hide')
+    if !$(e.target).closest('.ticket-article-item').find('.article-meta.top').hasClass('hide')
+      $(e.target).closest('.ticket-article-item').find('.more').removeClass('hide')
+      $(e.target).closest('.ticket-article-item').find('.close-details').addClass('hide')
+      $(e.target).closest('.ticket-article-item').find('.article-meta.top').addClass('hide')
+      $(e.target).closest('.ticket-article-item').find('.article-meta.bottom').addClass('hide')
     else
-      $(e.target).closest('.article-content').find('.more').addClass('hide')
-      $(e.target).closest('.article-content').find('.close-details').removeClass('hide')
-      $(e.target).closest('.article-content').find('.article-meta.top').removeClass('hide')
-      $(e.target).closest('.article-content').find('.article-meta.bottom').removeClass('hide')
+      $(e.target).closest('.ticket-article-item').find('.more').addClass('hide')
+      $(e.target).closest('.ticket-article-item').find('.close-details').removeClass('hide')
+      $(e.target).closest('.ticket-article-item').find('.article-meta.top').removeClass('hide')
+      $(e.target).closest('.ticket-article-item').find('.article-meta.bottom').removeClass('hide')
 
   checkIfSignatureIsNeeded: (type) =>
 
diff --git a/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco b/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco
index fea49a315..f3e0747c1 100644
--- a/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco
+++ b/app/assets/javascripts/app/views/ticket_zoom/article_view.jst.eco
@@ -1,75 +1,75 @@
 <% for article in @articles: %>
 <div class="ticket-article-item bubble-grid <%= article.sender.name.toLowerCase() %> <%= article.type.name %>" data-id="<%= article.id %>" id="article-<%= article.id %>">
-  <div class="horizontal<%= ' reverse' if article.sender.name isnt 'Agent' %>">
-    <div class="avatar" style="background-image: url(<%= article.created_by.imageUrl %>)"></div>
-    <div class="article-content flex">
-      <div class="more"><%- @T('more') %></div>
-      <div class="close-details hide"><%- @T('close details') %></div>
-      <div class="article-meta top hide">
-      <% if article.from: %>
-        <div class="horizontal article-meta-row" title="<%- @Ti( 'From' ) %>: <%= article.from %>">
-          <div class="article-meta-key contain-text"><%- @T( 'From' ) %></div>
-          <div class="article-meta-value flex contain-text"><%= article.from %></div>
-        </div>
-      <% end %>
-      <% if article.to: %>
-        <div class="horizontal article-meta-row" title="<%- @Ti( 'To' ) %>: <%= article.to %>">
-          <div class="article-meta-key contain-text"><%- @T( 'To' ) %></div>
-          <div class="article-meta-value flex contain-text"><%= article.to %></div>
-        </div>
-      <% end %>
-      <% if article.cc: %>
-        <div class="horizontal article-meta-row" title="<%- @Ti( 'Kopie' ) %>: <%= article.cc %>">
-          <div class="article-meta-key contain-text"><%- @T( 'Kopie' ) %></div>
-          <div class="article-meta-value flex contain-text"><%= article.cc %></div>
-        </div>
-      <% end %>
-      <% if article.subject: %>
-        <div class="horizontal article-meta-row" title="<%- @Ti( 'Subject' ) %>: <%= article.subject %>">
-          <div class="article-meta-key contain-text"><%- @T( 'Subject' ) %></div>
-          <div class="article-meta-value flex contain-text"><%= article.subject %></div>
-        </div>
-      <% end %>
-      </div>
-      <div class="text-bubble <%= ' internal' if article.internal is true %>"><div class="bubble-arrow"></div><%- article.html %></div>
-      <div class="article-meta bottom hide">
-        <div class="horizontal article-meta-row">
-          <div class="article-meta-key"><%- @T( 'Kanal' ) %></div>
-          <div class="article-meta-value">
-            <span class="icon <%- article.type.name %> channel"></span>
-            <%- @T(article.type.name) %>
-            <% if article.type.name is 'email': %>
-            <a class="text-muted" href="<%= App.Config.get('api_path') %>/ticket_article_plain/<%= article.id %>"><%- @T( 'raw' ) %></a>
-            <% end %>
-          </div>
-        </div>
-      </div>
-      <% if article.attachments: %>
-        <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 %>
-      <% if article.actions: %>
-      <div class="article-actions horizontal stretch">
-        <% 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 %>
-      </div>
-      <% end %>
-<!--
-  <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 class="article-content-meta">
+    <div class="more"><%- @T('more') %></div>
+    <div class="close-details hide"><%- @T('close details') %></div>
+    <div class="article-meta top hide">
+    <% if article.from: %>
+      <div class="horizontal article-meta-row" title="<%- @Ti( 'From' ) %>: <%= article.from %>">
+        <div class="article-meta-key contain-text"><%- @T( 'From' ) %></div>
+        <div class="article-meta-value flex contain-text"><%= article.from %></div>
+      </div>
+    <% end %>
+    <% if article.to: %>
+      <div class="horizontal article-meta-row" title="<%- @Ti( 'To' ) %>: <%= article.to %>">
+        <div class="article-meta-key contain-text"><%- @T( 'To' ) %></div>
+        <div class="article-meta-value flex contain-text"><%= article.to %></div>
+      </div>
+    <% end %>
+    <% if article.cc: %>
+      <div class="horizontal article-meta-row" title="<%- @Ti( 'Kopie' ) %>: <%= article.cc %>">
+        <div class="article-meta-key contain-text"><%- @T( 'Kopie' ) %></div>
+        <div class="article-meta-value flex contain-text"><%= article.cc %></div>
+      </div>
+    <% end %>
+    <% if article.subject: %>
+      <div class="horizontal article-meta-row" title="<%- @Ti( 'Subject' ) %>: <%= article.subject %>">
+        <div class="article-meta-key contain-text"><%- @T( 'Subject' ) %></div>
+        <div class="article-meta-value flex contain-text"><%= article.subject %></div>
+      </div>
+    <% end %>
     </div>
   </div>
+
+
+  <div class="article-content horizontal<%= ' reverse' if article.sender.name isnt 'Agent' %>">
+    <div class="avatar" style="background-image: url(<%= article.created_by.imageUrl %>)"></div>
+    <div class="flex text-bubble <%= ' internal' if article.internal is true %>"><div class="bubble-arrow"></div><%- article.html %></div>
+  </div>
+
+  <div class="article-content-meta">
+    <div class="article-meta bottom hide">
+      <div class="horizontal article-meta-row">
+        <div class="article-meta-key"><%- @T( 'Kanal' ) %></div>
+        <div class="article-meta-value">
+          <span class="icon <%- article.type.name %> channel"></span>
+          <%- @T(article.type.name) %>
+          <% if article.type.name is 'email': %>
+          <a class="text-muted" href="<%= App.Config.get('api_path') %>/ticket_article_plain/<%= article.id %>"><%- @T( 'raw' ) %></a>
+          <% end %>
+        </div>
+      </div>
+    </div>
+
+    <% if article.attachments: %>
+      <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 %>
+
+    <% if article.actions: %>
+    <div class="article-actions horizontal stretch">
+      <% 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 %>
+    </div>
+    <% end %>
+  </div>
+
   <small class="task-subline"><time class="humanTimeFromNow" datetime="<%- article.created_at %>" data-time="<%- article.created_at %>">?</time></small>
 </div>
 <% end %>
diff --git a/app/assets/stylesheets/zzz.css.erb b/app/assets/stylesheets/zzz.css.erb
index e5c4553ea..c89ebc5f3 100644
--- a/app/assets/stylesheets/zzz.css.erb
+++ b/app/assets/stylesheets/zzz.css.erb
@@ -426,6 +426,10 @@ table {
   overflow-y: scroll;
 }
 
+.inactive {
+  color: #ddd !important;
+}
+
 /*
 #content > *:not(.active) {
   display: none !important;
@@ -2382,6 +2386,10 @@ footer {
     margin-bottom: 33px;
   }
 
+  .article-content-meta {
+    margin-left: 55px;
+    margin-right: 55px;
+  }
   .article-content {
     margin-right: 55px;
   }