From 08a76aef973c11d565fac53c4b9c9d3c0b2cfb3d Mon Sep 17 00:00:00 2001
From: iRouge <bfavreault@inverse.ca>
Date: Tue, 3 Feb 2015 13:34:44 -0500
Subject: [PATCH] Adapt markup to typographic styles - Mail Messages List

---
 .../MailerUI/UIxMailFolderTemplate.wox        |  8 +-
 UI/WebServerResources/scss/_devtools.scss     |  5 +
 .../scss/components/list/_extends.scss        |  8 ++
 .../scss/components/list/list.scss            | 92 ++++---------------
 4 files changed, 33 insertions(+), 80 deletions(-)
 create mode 100644 UI/WebServerResources/scss/components/list/_extends.scss

diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
index ef2086fe5..6f2c3f5df 100644
--- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
@@ -2,15 +2,16 @@
 <container
     xmlns = "http://www.w3.org/1999/xhtml"
     >
-  <md-content flex = "40" style = "min-width: 300px;" id = "messagesList">
-    <!--dirty fix for vs-repeat-->
+  <md-content flex = "40" style = "min-width: 300px; position: relative;" id = "messagesList">
     <style>
       .vs-repeat-repeated-element {
       width: 100%;
       }
     </style>
+
     <md-list data-vs-repeat = "72"
         data-vs-scroll-parent = "#messagesList">
+      <!--<md-subheader class="md-default-theme md-primary md-hue-3">Unread Messages</md-subheader>-->
       <md-item ng-repeat = "currentMessage in mailbox.$messages track by currentMessage.id"
           data-ng-class = "{unread: !currentMessage.isread}">
         <md-item-content>
@@ -22,15 +23,14 @@
                 data-ui-sref-active = "_selected">
               <div class = "sg-md-subhead-multi">
                 {{currentMessage.$shortAddress('from')}}
-                <span class = "right" data-ng-bind-html = "currentMessage.relativedate"><!-- date --></span>
               </div>
+              <span class = "right" data-ng-bind-html = "currentMessage.relativedate"><!-- date --></span>
               <div class = "sg-md-body-multi">{{currentMessage.subject}}</div>
               <i class = "icon-ion-refresh"
                   data-ng-hide = "mailbox.$loadMessage(currentMessage.uid)"><!-- loading --></i>
             </a>
           </div>
         </md-item-content>
-        <md-divider md-inset = "true" ng-if = "!$last"><!--divider--></md-divider>
       </md-item>
     </md-list>
   </md-content>
diff --git a/UI/WebServerResources/scss/_devtools.scss b/UI/WebServerResources/scss/_devtools.scss
index 8a06720b8..470eb9ee1 100644
--- a/UI/WebServerResources/scss/_devtools.scss
+++ b/UI/WebServerResources/scss/_devtools.scss
@@ -21,4 +21,9 @@ html.dev {
     content: " ";
     z-index: 1000;
   }
+}
+// for visibility while devopping
+// ____________________________________________________________________________
+.md-tile-left {
+  background-color: rgba(224, 255, 255, 0.5);
 }
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/list/_extends.scss b/UI/WebServerResources/scss/components/list/_extends.scss
new file mode 100644
index 000000000..ad6d077f0
--- /dev/null
+++ b/UI/WebServerResources/scss/components/list/_extends.scss
@@ -0,0 +1,8 @@
+/*! _extends.scss - */
+////
+/// SOGo
+/// Version: #{$Version}
+/// Module: list
+/// Extends for list from angular-material sources
+////
+@import '../../../angular-material/src/components/list/list.scss';
\ No newline at end of file
diff --git a/UI/WebServerResources/scss/components/list/list.scss b/UI/WebServerResources/scss/components/list/list.scss
index f21198250..c1da56e37 100644
--- a/UI/WebServerResources/scss/components/list/list.scss
+++ b/UI/WebServerResources/scss/components/list/list.scss
@@ -1,76 +1,10 @@
-$list-h3-font-size: 1.1em !default;
-$list-h3-margin: 0 0 3px 0 !default;
-$list-h3-font-weight: 400 !default;
-$list-h4-font-size: 0.9em !default;
-$list-h4-font-weight: 400 !default;
-$list-h4-margin: 0 0 3px 0 !default;
-$list-p-font-size: 0.75em !default;
-$list-p-margin: 0 0 3px 0 !default;
-
-$list-padding-top: $baseline-grid !default;
-$list-padding-right: 0px !default;
-$list-padding-left: 0px !default;
-$list-padding-bottom: $baseline-grid !default;
-
-$item-padding-top: 0px !default;
-$item-padding-right: 0px !default;
-$item-padding-left: 0px !default;
-$item-padding-bottom: 0px !default;
-
-md-list {
-  padding: $list-padding-top $list-padding-right $list-padding-bottom $list-padding-left;
-}
-
-md-item {
-
-}
-
-md-item-content {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  box-sizing: border-box;
-
-  position: relative;
-
-  padding: $item-padding-top $item-padding-right $item-padding-bottom $item-padding-left;
-}
-
-/**
- * The left tile for a list item.
- */
-.md-tile-left {
-  min-width: 56px;
-  margin-right: -16px;
-  // for dev only
-  height: 56px;
-  background-color: grey;
-}
-
-/**
- * The center content tile for a list item.
- */
-.md-tile-content {
-  flex: 1;
-
-  padding: $baseline-grid * 2;
-  text-overflow: ellipsis;
-
-  h3  {
-    margin: $list-h3-margin;
-    font-weight: $list-h3-font-weight;
-    font-size: $list-h3-font-size;
-  }
-  h4 {
-    margin: $list-h4-margin;
-    font-weight: $list-h4-font-weight;
-    font-size: $list-h4-font-size;
-  }
-  p {
-    margin: $list-p-margin;
-    font-size: $list-p-font-size;
-  }
-}
+////
+/// SOGo
+/// Version: #{$Version}
+/// Module: List
+/// Main definitions for List
+////
+@import 'extends';
 .sg {
   &-tile-content {
     @extend .md-tile-content;
@@ -95,9 +29,15 @@ md-item-content {
     }
   }
 }
-/**
- * The right tile for a list item.
- */
+
+// The right tile for a list item.
+// ----------------------------------------------------------------------------
 .md-tile-right {
   padding-right: $item-padding-right;
 }
+// The right tile for a list item (avatar container)
+// ----------------------------------------------------------------------------
+.md-tile-left {
+  border-radius: 100%;
+  min-height: 56px;
+}