moparisthebest/mail
1
0
Fork 0
mirror of https://github.com/moparisthebest/mail synced 2024-11-26 10:52:17 -05:00
Code Issues Releases Wiki Activity

Merge pull request #177 from whiteout-io/dev/WO-728

Browse Source 
Display text body preview in desktop mode
This commit is contained in:
Tankred Hase 2014-11-12 19:52:33 +01:00
commit 996730f160
4 changed files with 32 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/sass/base/_config.scss
View File

@ -25,7 +25,7 @@ $color-grey-dark: #333;
$color-grey-medium: #999; $color-grey-medium: #999;
$color-grey-light: #ccc; $color-grey-light: #ccc;
$color-grey-lighter: #ddd; $color-grey-lighter: #ddd;
$color-grey-lighterer: #f0eff5; $color-grey-lighterer: #f4f4f4;
$color-grey-lightest: #f9f9f9; $color-grey-lightest: #f9f9f9;
$color-grey-dark-alpha: rgba(0, 0, 0, 0.80); $color-grey-dark-alpha: rgba(0, 0, 0, 0.80);
@ -33,6 +33,7 @@ $color-grey-dark-alpha: rgba(0, 0, 0, 0.80);
// ------------------------------------------- // -------------------------------------------
$color-bg: $color-white; $color-bg: $color-white;
$color-bg-dark: $color-grey-lighterer;
$color-text: $color-grey-dark; $color-text: $color-grey-dark;
$color-text-light: $color-grey-medium; $color-text-light: $color-grey-medium;
$color-main: $color-blue; $color-main: $color-blue;

2
src/sass/blocks/layout/_page.scss
View File

@ -14,7 +14,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 10px 20px; padding: 10px 20px;
background: $color-grey-lighterer; background: $color-bg-dark;
color: $color-text; color: $color-text;
} }

25
src/sass/blocks/views/_mail-list.scss
View File

@ -109,7 +109,7 @@
@include respond-to(lg) { @include respond-to(lg) {
height: 100%; height: 100%;
background: $color-border-light; background: $color-bg-dark;
& > header { & > header {
display: none; display: none;
@ -265,6 +265,9 @@
font-weight: bold; font-weight: bold;
padding-right: 90px; // to make room for time padding-right: 90px; // to make room for time
padding-bottom: 8px; padding-bottom: 8px;
& > span {
display: none;
}
} }
&__time { &__time {
@include scut-truncate; @include scut-truncate;
@ -326,7 +329,7 @@
$cell-padding-horizontal: 10px; $cell-padding-horizontal: 10px;
display: table-row; display: table-row;
background: mix($color-bg, $color-border-light, 70%); background: $color-bg-dark;
color: $color-grey; color: $color-grey;
cursor: pointer; cursor: pointer;
@ -406,12 +409,24 @@
display: table-cell; display: table-cell;
border-bottom: 1px solid $color-border-light; border-bottom: 1px solid $color-border-light;
padding: $cell-padding-vertical $cell-padding-horizontal; padding: $cell-padding-vertical $cell-padding-horizontal;
width: 16em;
} }
&__subject { &__subject {
@include scut-truncate; @include scut-truncate;
display: table-cell; display: table-cell;
border-bottom: 1px solid $color-border-light; border-bottom: 1px solid $color-border-light;
padding: $cell-padding-vertical $cell-padding-horizontal; padding: $cell-padding-vertical $cell-padding-horizontal;
& > strong {
font-weight: normal;
}
& > span {
margin-left: 0.2em;
color: $color-text-light;
&:before {
content: '-';
margin-right: 0.2em;
}
}
} }
&__time { &__time {
display: table-cell; display: table-cell;
@ -439,6 +454,12 @@
.mail-list-entry__name { .mail-list-entry__name {
font-weight: bold; font-weight: bold;
} }
.mail-list-entry__subject {
font-weight: normal;
& > strong {
font-weight: bold;
}
}
} }
&--attachment { &--attachment {
.mail-list-entry__attachment > svg { .mail-list-entry__attachment > svg {

7
src/tpl/mail-list.html
View File

@ -52,7 +52,12 @@
</li> </li>
</ul> </ul>
<h3 class="mail-list-entry__name">{{email.from[0].name || email.from[0].address}}</h3> <h3 class="mail-list-entry__name">{{email.from[0].name || email.from[0].address}}</h3>
<div class="mail-list-entry__subject">{{email.subject || 'No subject'}}</div> <div class="mail-list-entry__subject">
<strong>{{email.subject || 'No subject'}}</strong>
<span>
{{email.body ? email.body.substr(0, 200) : ''}}
</span>
</div>
<div class="mail-list-entry__attachment"> <div class="mail-list-entry__attachment">
<svg><use xlink:href="#icon-attachment" /><title>Attachments</title></svg> <svg><use xlink:href="#icon-attachment" /><title>Attachments</title></svg>
</div> </div>