From 9b8d8c46326a6d381f0440c37f7e8a91deec49c6 Mon Sep 17 00:00:00 2001 From: Felix Hammerl Date: Wed, 23 Mar 2016 13:55:25 +0100 Subject: Issue #648: Refactor mail-list --- web-ui/app/js/mail_list/ui/mail_items/mail_item.js | 1 + web-ui/app/scss/_styles.scss | 95 ---------------------- web-ui/app/scss/style.scss | 1 + web-ui/app/scss/views/_mail-list.scss | 91 +++++++++++++++++++++ web-ui/app/templates/mails/draft.hbs | 66 ++++++++------- web-ui/app/templates/mails/sent.hbs | 65 +++++++-------- web-ui/app/templates/mails/single.hbs | 49 ++++++----- web-ui/app/templates/mails/trash.hbs | 52 +++++++----- web-ui/test/custom_matchers.js | 8 +- 9 files changed, 225 insertions(+), 203 deletions(-) create mode 100644 web-ui/app/scss/views/_mail-list.scss (limited to 'web-ui') diff --git a/web-ui/app/js/mail_list/ui/mail_items/mail_item.js b/web-ui/app/js/mail_list/ui/mail_items/mail_item.js index c075b0b5..be664289 100644 --- a/web-ui/app/js/mail_list/ui/mail_items/mail_item.js +++ b/web-ui/app/js/mail_list/ui/mail_items/mail_item.js @@ -68,6 +68,7 @@ define( this.attr.mail.tagsForListView = _.without(this.attr.mail.tags, this.attr.tag); var mailItemHtml = templates.mails[this.attr.templateType](this.attr.mail); this.$node.html(mailItemHtml); + this.$node.addClass("mail-list-entry"); this.$node.addClass(viewHelper.formatStatusClasses(this.attr.mail.status)); if (this.attr.selected) { this.doSelect(); } this.on(this.$node.find('a'), 'click', this.triggerOpenMail); diff --git a/web-ui/app/scss/_styles.scss b/web-ui/app/scss/_styles.scss index b4ffbd75..510297ef 100644 --- a/web-ui/app/scss/_styles.scss +++ b/web-ui/app/scss/_styles.scss @@ -128,100 +128,6 @@ } } -@mixin email-list { - ul#mail-list { - clear: both; - li { - position: relative; - padding: 8px 10px 10px 10px; - background: $contrast; - border-bottom: 1px solid white; - cursor: pointer; - font-weight: bold; - transition: background-color 150ms ease-out; - span { - display: inline-block; - vertical-align: top; - &:last-child { - width: 92%; - } - input[type=checkbox] { - @include check-box; - margin-right: 2px; - } - a { - color: $dark_grey; - display: block; - height: 62px; - margin-top: -8px; - padding-top: 3px; - width: 106%; - } - } - - .subject { - display: block; - width: 90%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - i.fa-pencil, i.fa-trash-o { - color: $indicator_icon_color; - } - } - - .tags { - @include tags; - - // HACK: overwrite default from ul li property - &-tag { - border-bottom: none; - } - } - - .received-date, .sent-date { - position: absolute; - right: 10px; - font-size: 0.7em; - } - - .attachment-indicator { - margin: 2px 0 0 25px; - font-size: initial; - - i.fa-paperclip { - color: $indicator_icon_color; - } - } - .from { - white-space: nowrap; - font-size: 0.8em; - width: 80%; - overflow: hidden; - text-overflow: ellipsis; - } - - &.status-read { - a { - font-weight: normal; - color: $attachment_text; - } - } - &:hover { - background: darken($contrast, 5%); - } - &.selected { - background: $white; - z-index: 3; - a { - color: $dark_grey; - } - } - } - } -} - @mixin mail-count($bg_color) { background: $bg_color; color: $white; @@ -510,7 +416,6 @@ section { &#middle-pane { background: $contrast; - @include email-list; } &#right-pane { diff --git a/web-ui/app/scss/style.scss b/web-ui/app/scss/style.scss index 0fe0684b..db9486fa 100644 --- a/web-ui/app/scss/style.scss +++ b/web-ui/app/scss/style.scss @@ -28,6 +28,7 @@ @import "views/security-labels"; @import "views/compose-view"; @import "views/compose-button"; +@import "views/mail-list"; // misc stuff @import "others"; diff --git a/web-ui/app/scss/views/_mail-list.scss b/web-ui/app/scss/views/_mail-list.scss new file mode 100644 index 00000000..5b458fef --- /dev/null +++ b/web-ui/app/scss/views/_mail-list.scss @@ -0,0 +1,91 @@ +.mail-list-entry { + @include scut-clearfix; + + padding: 8px 10px 10px 10px; + border-bottom: 1px solid white; + transition: background-color 150ms ease-out; + cursor: pointer; + font-weight: bold; + height: 80px; + position: relative; + + // Workaround: + // Foundation is of the opinion that a 1.6 line height for all lists + // is a totally good idea. Please remove when Foundation is gone + line-height: normal; + + &.status-read { + font-weight: normal; + } + + &.selected { + background: $white; + z-index: 10; // overlay the box-shadow of the right page (z-index: 2) + } + + &:hover { + background: darken($contrast, 5%); + } + + &__checkbox { + margin-right: 5px; + display: block; + float: left; + min-height: 100%; + + & > input[type=checkbox] { + @include check-box; + } + } + + &__item { + display: block; + color: $dark_grey; + padding-left: 24px; + + &-from { + white-space: nowrap; + font-size: 0.8em; + overflow: hidden; + text-overflow: ellipsis; + display: inline-block; + } + + &-date { + font-size: 0.7em; + float: right; + display: inline-block; + } + + &-subject { + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 85%; + } + + &-attachment { + width: 14px; + text-align: right; + display: inline-block; + float: right; + color: $indicator_icon_color; + } + + &-tags { + @include tags; + + // Workaround: + // Foundation is of the opinion that a 1.6 line height and a 0.6 rem margin-bottom + // for all lists is a totally good idea. Please remove when Foundation is gone + line-height: normal; + margin-bottom: 0; + } + + &:hover, &:focus, &:active { + color: $dark_grey; + } + } +} + diff --git a/web-ui/app/templates/mails/draft.hbs b/web-ui/app/templates/mails/draft.hbs index 675f1481..9f4192cc 100644 --- a/web-ui/app/templates/mails/draft.hbs +++ b/web-ui/app/templates/mails/draft.hbs @@ -1,31 +1,41 @@ - - - - - - {{ formatDate header.date }} - {{#if attachments}} -
- -
- {{/if}} - +
+ +
+ + +
+
+ {{t 'to:'}} + {{#if header.to }} + {{ header.to }} + {{else}} + {{t 'no_recipient'}} + {{/if}} +
-
- {{t 'to:'}} - {{#if header.to }} - {{ header.to }} - {{else}} - {{t 'no_recipient'}} - {{/if}} + {{ formatDate header.date }}
-
- - {{#if header.subject }} - {{header.subject}} - {{else}} - {{t 'no_subject'}} - {{/if}} +
+
+ + {{#if header.subject }} + {{header.subject}} + {{else}} + {{t 'no_subject'}} + {{/if}} +
+ + {{#if attachments}} +
+ {{/if}}
- - +
    + {{#each tagsForListView }} +
  • {{ this }}
    • + {{/each }} +
+ + + + + diff --git a/web-ui/app/templates/mails/sent.hbs b/web-ui/app/templates/mails/sent.hbs index 86b6e607..a637e3d2 100644 --- a/web-ui/app/templates/mails/sent.hbs +++ b/web-ui/app/templates/mails/sent.hbs @@ -1,35 +1,36 @@ - - - - - - {{ formatDate header.date }} +
+ +
+ +
+
+ {{t 'to:'}} + {{#if header.to }} + {{ header.to }} + {{else}} + {{t 'no_recipient'}} + {{/if}} +
+ + {{ formatDate header.date }} +
+
+
+ {{#if header.subject }} + {{header.subject}} + {{else}} + {{t 'no_subject'}} + {{/if}} +
+ {{#if attachments}} -
- -
+
{{/if}} - +
+
    + {{#each tagsForListView }} +
  • {{ this }}
    • + {{/each }} +
+ -
- {{t 'to:'}} - {{#if header.to }} - {{ header.to }} - {{else}} - {{t 'no_recipient'}} - {{/if}} -
-
- {{#if header.subject }} - {{header.subject}} - {{else}} - {{t 'no_subject'}} - {{/if}} -
-
    - {{#each tagsForListView }} -
  • {{ this }}
    • - {{/each }} -
- - diff --git a/web-ui/app/templates/mails/single.hbs b/web-ui/app/templates/mails/single.hbs index 95f9adb7..aaede844 100644 --- a/web-ui/app/templates/mails/single.hbs +++ b/web-ui/app/templates/mails/single.hbs @@ -1,23 +1,28 @@ - - - - - - {{ formatDate header.date }} - {{#if attachments}} -
- -
- {{/if}} - -
{{#if header.from }}{{ header.from }}{{else}}{{t "you"}}{{/if}}
-
- {{ header.subject }} +
+ +
+ +
+
+ {{#if header.from }} + {{ header.from }} + {{else}} + {{t "you"}} + {{/if}} +
+ + {{ formatDate header.date }}
-
    - {{#each tagsForListView }} -
  • {{ this }}
    • - {{/each }} -
- - +
+
{{ header.subject }}
+ + {{#if attachments}} +
+ {{/if}} +
+
    + {{#each tagsForListView }} +
  • {{ this }}
    • + {{/each }} +
+ diff --git a/web-ui/app/templates/mails/trash.hbs b/web-ui/app/templates/mails/trash.hbs index ea8fe07f..b822d12f 100644 --- a/web-ui/app/templates/mails/trash.hbs +++ b/web-ui/app/templates/mails/trash.hbs @@ -1,24 +1,32 @@ - - - - - - {{ header.formattedDate }} - {{#if attachments}} -
- +
+ +
+ +
+
+ {{#if header.from }} + {{ header.from }} + {{else}} + {{t "you"}} + {{/if}} +
+ + {{ formatDate header.date }} +
+
+
+ + {{ header.subject }}
- {{/if}} - -
{{#if header.from }}{{ header.from }}{{else}}{{t "you"}}{{/if}}
-
- - {{ header.subject }} + + {{#if attachments}} +
+ {{/if}}
-
    - {{#each tagsForListView }} -
  • {{ this }}
    • - {{/each }} -
- - +
    + {{#each tagsForListView }} +
  • {{ this }}
    • + {{/each }} +
+ + diff --git a/web-ui/test/custom_matchers.js b/web-ui/test/custom_matchers.js index d68d21a8..3de7fb5b 100644 --- a/web-ui/test/custom_matchers.js +++ b/web-ui/test/custom_matchers.js @@ -5,10 +5,10 @@ define([], function() { compare: function (mail, node) { var result = {}, equals = {}, subject, tags, from, date, messages = [], notMessages = []; - subject = node.find('#mail-' + mail.ident + ' .subject')[0]; - tags = _.map(node.find('#mail-' + mail.ident + ' .tags .tags-tag'), function (tag) { return tag.textContent; }); - date = node.find('#mail-' + mail.ident + ' .received-date'); - from = node.find('#mail-' + mail.ident + ' .from'); + subject = node.find('#mail-' + mail.ident + ' .mail-list-entry__item-subject')[0]; + tags = _.map(node.find('#mail-' + mail.ident + ' .mail-list-entry__item-tags .mail-list-entry__item-tags-tag'), function (tag) { return tag.textContent; }); + date = node.find('#mail-' + mail.ident + ' .mail-list-entry__item-date'); + from = node.find('#mail-' + mail.ident + ' .mail-list-entry__item-from'); if (subject && subject.textContent.trim() === mail.header.subject) { equals.subject = true; -- cgit v1.2.3