diff --git a/NEWS b/NEWS
index 037720bfa..350d12a30 100644
--- a/NEWS
+++ b/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)
diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
index 8657aa4f2..60a6e1af2 100644
--- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
+++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox
@@ -294,6 +294,7 @@
{{currentMessage.subject}}
+
diff --git a/UI/WebServerResources/scss/components/list/list.scss b/UI/WebServerResources/scss/components/list/list.scss
index c89a4d823..311ed53bd 100644
--- a/UI/WebServerResources/scss/components/list/list.scss
+++ b/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
diff --git a/UI/WebServerResources/scss/views/MailerUI.scss b/UI/WebServerResources/scss/views/MailerUI.scss
index 28554c378..5ddde9528 100644
--- a/UI/WebServerResources/scss/views/MailerUI.scss
+++ b/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;