MODULE-TYPO

- Sass set-up
- md-list
- md-theming (install)

UI/Templates/MailerUI/UIxMailFolderTemplate.wox

@@ -6,25 +6,39 @@
    xmlns:rsrc="OGo:url"
    xmlns:label="OGo:label"
    xmlns:uix="OGo:uix">
-    <md-content md-scroll-y="md-scroll-y" class="md-padding" flex="flex" id="messagesList">
-      <md-list data-vs-repeat="56"
+    <md-content md-scroll-y="md-scroll-y" flex="flex" style="min-width: 300px;" id="messagesList">
+        <!--dirty fix for vs-repeat-->
+        <style>
+            .vs-repeat-repeated-element {
+                width: 100%;
+            }
+        </style>
+      <md-list data-vs-repeat="72"
                data-vs-scroll-parent="#messagesList">
         <md-item ng-repeat="currentMessage in mailbox.$messages track by currentMessage.id"
                  data-ng-class="{unread: !currentMessage.isread}">
-          <a data-ui-sref="mail.account.mailbox.message({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: currentMessage.uid})"
-             data-ui-sref-active="_selected">
-            <div class="name">
-              {{currentMessage.$shortAddress('from')}}
-              <span class="right" data-ng-bind-html="currentMessage.relativedate"><!-- date --></span>
-            </div>
-            <div class="subject">{{currentMessage.subject}}</div>
-            <i class="icon-ion-refresh"
-               data-ng-hide="mailbox.$loadMessage(currentMessage.uid)"><!-- loading --></i>
-          </a>
+            <md-item-content>
+                <div class="md-tile-left">
+                    <!--avatar-->
+                </div>
+                <div class="sg-tile-content">
+                    <a data-ui-sref="mail.account.mailbox.message({accountId: account.id, mailboxId: (mailbox.path | encodeUri), messageId: currentMessage.uid})"
+                       data-ui-sref-active="_selected">
+                        <div class="name">
+                            {{currentMessage.$shortAddress('from')}}
+                            <span class="right" data-ng-bind-html="currentMessage.relativedate"><!-- date --></span>
+                        </div>
+                        <div class="subject">{{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>
 
-    <md-content class="md-padding" flex="66" data-ui-view="message"><!-- message view --></md-content>
+    <md-content class="md-padding" flex="flex" data-ui-view="message"><!-- message view --></md-content>
 
 </container>

UI/Templates/MailerUI/UIxMailMainFrame.wox

@@ -268,7 +268,7 @@
         </div>-->
 
     <main layout="column" layout-fill="layout-fill">
-      <md-toolbar layout="row" layout-align="space-between start" class="md-tall md-warn">
+      <md-toolbar layout="row" layout-align="space-between start" class="md-tall md-grey">
         <!--fixme : md-toolbar-tools height is inconsistently defined, in former version it was 64px (basic toolbar height), here it's 100% -->
         <div class="md-toolbar-tools">
           <span flex="flex">

UI/Templates/UIxPageFrame.wox

@@ -25,6 +25,8 @@
 	<link rel="shortcut icon" var:href="siteFavicon" type="image/x-icon" />
 	<link type="text/css" rel="stylesheet" rsrc:href="css/icons.css"/>
 	<link type="text/css" rel="stylesheet" rsrc:href="css/angular-material.css"/>
+	  <link type="text/css" rel="stylesheet" rsrc:href="css/themes/grey-theme.css"/>
+	  <link type="text/css" rel="stylesheet" rsrc:href="css/components.css"/>
 	<var:if condition="hasPageSpecificCSS"
 	  ><link type="text/css" rel="stylesheet" var:href="pageCSSURL"
 	    /></var:if>