Display messages sizes in list of Mail module

NEWS

@@ -6,6 +6,7 @@ Enhancements
  - [web] Gravatar service can now be disabled (#3600)
  - [web] collapsable mail accounts (#3493)
  - [web] show progress indicator when loading messages and cards
+ - [web] display messages sizes in list of Mail module
 
 Bug fixes
  - [web] fixed creation of chip on blur (sgTransformOnBlur directive)

UI/Templates/MailerUI/UIxMailFolderTemplate.wox

@@ -294,6 +294,7 @@
               </div>
               <div class="sg-md-body">
                 <div>{{currentMessage.subject}}</div>
+                <div class="sg-tile-size" ng-bind="currentMessage.size"><!-- size --></div>
               </div>
             </div>
             <div class="sg-tile-icons">

UI/WebServerResources/scss/components/list/list.scss

@@ -158,23 +158,27 @@ div.md-tile-left {
 
 .sg {
   &-color-chip {
-    display: block;
-    border-radius: 50%;
-    margin: 0 $bl;
     border-color: white;
+    border-radius: 50%;
     border-style: solid;
-    width: $sg-color-chip-width;
+    display: block;
     height: $sg-color-chip-width;
+    margin: 0 $bl;
+    width: $sg-color-chip-width;
   }
 
   &-tile-content {
     flex: 1;
     overflow: hidden; // required in Firefox
-    .sg-tile-date {
+    .sg-tile-date, .sg-tile-size {
+      flex-shrink: 0;
       font-size: sg-size(body);
       font-weight: $sg-font-light;
       line-height: $sg-line-height-2;
-      flex-shrink: 0;
+      margin-left: 3px;
+    }
+    .sg-tile-size {
+      font-size: sg-size(caption);
     }
     .#{$md}-subhead {
       @extend .#{$md}-body-1;
@@ -195,13 +199,14 @@ div.md-tile-left {
       }
     }
   }
+
   // Small tile of vertically-aligned icons
   &-tile-icons {
     display: flex;
     flex-direction: column;
-    align-items: flex-end;
+    align-items: center;
     justify-content: center;
-    width: (2 * $mg);
+    width: (3 * $bl);
     height: (2 + $sg-font-size-1) * 4; // (vertical padding + icon size) * max number of icons
   }
 
@@ -271,18 +276,12 @@ div.md-tile-left {
   }
 }
 
-sg-avatar-image {
-  img {
-    border-radius: 50%;
-  }
-}
-
 // Avatar placeholder
 // ------------------------------------
 .md-avatar:before,
 .md-avatar md-icon,
 sg-avatar-image md-icon,
-sg-avatar-image md-icon.material-icons {
+sg-avatar-image .material-icons {
   color: rgba(0, 0, 0, 0.26);
   font-family: 'Material Icons';
   font-size: $sg-avatar-width;
@@ -298,6 +297,13 @@ sg-avatar-image md-icon.material-icons {
   }
 }
 
+/*------------------------------------*\
+    SG-AVATAR-IMAGE DIRECTIVE
+\*------------------------------------*/
+
+sg-avatar-image img {
+  border-radius: 50%;
+}
 
 /*------------------------------------*\
     SELECTABLE AVATARS

UI/WebServerResources/scss/views/MailerUI.scss

@@ -1,5 +1,12 @@
 /// MailerUI.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
 
+.view-list {
+  // Overwrite style from list.scss to make some place for .sg-tile-icons
+  md-list-item._md-button-wrap > div.md-button:first-child {
+    padding-right: 0;
+  }
+}
+
 // Container for the linear progress bar of the quota
 .sg-quota {
   padding-bottom: $baseline-grid;