From b2c71ceae93a3629def688166dce1d0cd22b0406 Mon Sep 17 00:00:00 2001
From: iRouge <bfavreault@inverse.ca>
Date: Thu, 19 Feb 2015 23:17:50 -0500
Subject: [PATCH] Add box-shadow to Mail editor

---
 .../ContactsUI/UIxContactViewTemplate.wox     | 81 +++++++++++--------
 .../scss/views/MessageEditorUI.scss           |  4 +
 2 files changed, 53 insertions(+), 32 deletions(-)

diff --git a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
index b90a4a5ee..91be19f73 100644
--- a/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactViewTemplate.wox
@@ -8,84 +8,101 @@
   <md-card class="viewer">
     <md-card-content>
       <header>
-        <h1 class="sg-md-display-1" data-ng-bind-html="card.$fullname()"><!-- fullname --></h1>
-        <h6 class="sg-md-subheader-1">{{card.$description()}}
-          <span class="label radius" data-ng-repeat="category in card.categories">{{category.value}}</span>
-        </h6>
+        <div class="msg-header-content">
+          <h1 class="sg-md-display-1" data-ng-bind-html="card.$fullname()"><!-- fullname --></h1>
+          <h6 class="sg-md-subheader-1">{{card.$description()}}
+            <span class="label radius" data-ng-repeat="category in card.categories">{{category.value}}</span>
+          </h6>
+        </div>
+
+        <div class="sg-icon-bar">
+          <span data-ng-show="addressbook.isEditable">
+            <a class="button tiny radius" data-ui-sref="addressbook.card.editor({addressbookId: addressbook.id, cardId: card.id})">
+              <i class="md-icon-create"><!-- edit --></i>
+            </a>
+            <span class="button tiny radius alert" data-ng-click="confirmDelete(card)">
+              <i class="md-icon-delete"><!-- delete --></i>
+            </span>
+          </span>
+        </div>
       </header>
 
-      <div class="buttonsToolbar">
-        <span data-ng-show="addressbook.isEditable">
-          <a class="button tiny radius" data-ui-sref="addressbook.card.editor({addressbookId: addressbook.id, cardId: card.id})">
-            <i class="md-icon-create"><!-- edit --></i>
-          </a>
-          <span class="button tiny radius alert" data-ng-click="confirmDelete(card)">
-            <i class="md-icon-delete"><!-- delete --></i>
-          </span>
-        </span>
-      </div>
 
       <section class="content" data-ui-sref="addressbook.card.editor({addressbookId: addressbook.id, cardId: card.id})">
+
         <div class="attr" data-ng-show="card.birthday">
           <div class="key">
-            <label class="right">
-              <var:string label:value="Birthday" />
+            <label class="PseudoField-label">
+              <var:string label:value="Birthday"/>
             </label>
           </div>
           <div class="value">
             <span>{{card.$birthday() | date}}</span>
           </div>
         </div>
+
         <div class="section" data-ng-repeat="ref in card.refs track by ref.reference">
           <!-- list members -->
+
           <div class="attr">
             <div class="value single">
-              <a data-ui-sref="addressbook.card.view({addressbookId: addressbook.id, cardId: ref.reference})">{{ref.$fullname()}}</a>
+              <a data-ui-sref="addressbook.card.view({addressbookId: addressbook.id, cardId: ref.reference})">
+                {{ref.$fullname()}}
+              </a>
               <div data-ng-show="ref.email">
                 <a data-ui-sref="mailto:{{ref.email}}" ng-class="ng-scope">
-                  <i class="icon-ion-ios7-email-outline"><!-- email --></i>
+                  <i class="md-icon-mail"><!-- email --></i>
                   {{ref.email}}
                 </a>
               </div>
             </div>
           </div>
-        </div>
-        <div class="section" data-ng-show="card.emails.length > 0">
-          <div class="attr" data-ng-repeat="email in card.emails">
-            <div class="key">
-              <label class="right"><var:entity const:name="nbsp" />{{email.type}}
-              </label>
-            </div>
-            <div class="value">
-              <a href="mailto:{{email.value}}">{{email.value}}</a>
+
+          <div class="section">
+            <div class="attr" data-ng-repeat="email in card.emails">
+              <div class="key">
+                <label class="PseudoField-label"><var:entity const:name="nbsp"/>{{email.type}}
+                </label>
+              </div>
+
+              <div class="value">
+                <a href="mailto:{{email.value}}">{{email.value}}</a>
+              </div>
+
             </div>
           </div>
         </div>
+
+
         <div class="section" data-ng-show="card.phones.length > 0">
           <div class="attr" data-ng-repeat="phone in card.phones">
             <div class="key">
-              <label class="right">{{phone.type}}</label>
+              <label class="PseudoField-label">{{phone.type}}</label>
             </div>
+
             <div class="value">
               <a href="tel:{{phone.value}}">{{phone.value}}</a>
             </div>
+
           </div>
         </div>
         <div class="section" data-ng-show="card.urls">
           <div class="attr" data-ng-repeat="url in card.urls">
             <div class="key">
-              <label class="right"><var:entity const:name="nbsp" />{{url.type}}
+              <label class="PseudoField-label"><var:entity const:name="nbsp"/>{{url.type}}
               </label>
             </div>
+
             <div class="value">
               <a href="#" data-ng-href="{{url.value}}">{{url.value}}</a>
             </div>
+
           </div>
         </div>
         <div class="section" data-ng-show="card.addresses">
           <div class="attr" data-ng-repeat="address in card.addresses">
             <div class="key">
-              <label class="right">{{address.type}}</label>
+              <label class="PseudoField-label">{{address.type}}</label>
             </div>
             <div class="value">
               <div data-sg-address="address"><!-- address --></div>
@@ -94,8 +111,8 @@
         </div>
         <div class="attr" data-ng-show="card.note">
           <div class="key">
-            <label class="right">
-              <var:string label:value="Note" />
+            <label class="PseudoField-label">
+              <var:string label:value="Note"/>
             </label>
           </div>
           <div class="value">
diff --git a/UI/WebServerResources/scss/views/MessageEditorUI.scss b/UI/WebServerResources/scss/views/MessageEditorUI.scss
index ddeca3bd7..b0558399b 100644
--- a/UI/WebServerResources/scss/views/MessageEditorUI.scss
+++ b/UI/WebServerResources/scss/views/MessageEditorUI.scss
@@ -9,7 +9,11 @@
   width: (13 * $pitch + $mg); // 13 cols + 1margin for scrollbar
   margin: 0 auto;
   overflow: auto;
+  height: 100%;
   background-color: sg-color($sogoPaper, 100);
+  transform: translateY(-1 * $pitch);
+  z-index: 40;
+  box-shadow: $whiteframe-shadow-z1;
 }
 .buttonsToolbar {
   padding: $mg 0;