From ff5f9fa0c74138548ee3d8b7ac42d37d93fa4f78 Mon Sep 17 00:00:00 2001
From: Robert Schroll <rschroll@gmail.com>
Date: Mon, 28 Jan 2013 17:29:38 -0800
Subject: [PATCH] Style unread messages differently than read messages: Closes
 #6260

Adds a darker border and shadow to unread messages that animates to
the same intensity of read messages after 3 seconds.
---
 src/client/views/conversation-viewer.vala | 12 +++++++++++-
 theming/message-viewer.css                | 12 ++++++++++--
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/client/views/conversation-viewer.vala b/src/client/views/conversation-viewer.vala
index fcc1acd7..9df20037 100644
--- a/src/client/views/conversation-viewer.vala
+++ b/src/client/views/conversation-viewer.vala
@@ -314,7 +314,17 @@ public class ConversationViewer : Gtk.Box {
 
         // Add classes according to the state of the email.
         update_flags(email);
-
+        
+        // Add animation class after other classes set, to avoid initial animation.
+        Idle.add(() => {
+            try {
+                div_message.get_class_list().add("animate");
+            } catch (Error error) {
+                debug("Could not enable animation class: %s", error.message);
+            }
+            return false;
+        });
+        
         // Attach to the click events for hiding/showing quotes, opening the menu, and so forth.
         bind_event(web_view, ".email", "contextmenu", (Callback) on_context_menu, this);
         bind_event(web_view, ".quote_container > .hider", "click", (Callback) on_hide_quote_clicked);
diff --git a/theming/message-viewer.css b/theming/message-viewer.css
index 7093fbc7..79af18c1 100644
--- a/theming/message-viewer.css
+++ b/theming/message-viewer.css
@@ -74,11 +74,11 @@ pre {
 }
 
 .email {
-    border: 1px rgba(0,0,0,0.4) solid;
+    border: 1px rgba(0,0,0,1) solid;
     background-color: white;
     color: black;
     font-size: small;
-    box-shadow: 0 3px 11px rgba(0,0,0,0.21);
+    box-shadow: 0 3px 11px rgba(0,0,0,1);
     display: inline-block;
     word-wrap: break-word;
     width: 100%;
@@ -98,6 +98,14 @@ pre {
 .email.starred .unstarred {
     display: none;
 }
+.email.read {
+    border-color: rgba(0,0,0,0.4);
+    box-shadow: 0 3px 11px rgba(0,0,0,0.21);
+}
+.email.animate {
+    -webkit-transition: border-color 3s ease;
+    -webkit-transition: box-shadow 3s ease;
+}
 .email_box {
     box-sizing: border-box;
     -webkit-box-sizing: border-box;