summaryrefslogtreecommitdiff
path: root/web-ui
diff options
context:
space:
mode:
Diffstat (limited to 'web-ui')
-rw-r--r--web-ui/app/js/mail_list/ui/mail_items/mail_item.js1
-rw-r--r--web-ui/app/scss/_styles.scss95
-rw-r--r--web-ui/app/scss/style.scss1
-rw-r--r--web-ui/app/scss/views/_mail-list.scss91
-rw-r--r--web-ui/app/templates/mails/draft.hbs66
-rw-r--r--web-ui/app/templates/mails/sent.hbs65
-rw-r--r--web-ui/app/templates/mails/single.hbs49
-rw-r--r--web-ui/app/templates/mails/trash.hbs52
-rw-r--r--web-ui/test/custom_matchers.js8
9 files changed, 225 insertions, 203 deletions
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 @@
-<span>
- <input type="checkbox"/>
-</span>
-<span>
- <a href="/#/{{ currentTag }}/mail/{{ ident }}">
- <span class="sent-date">{{ formatDate header.date }}
- {{#if attachments}}
- <div class="attachment-indicator">
- <i class="fa fa-paperclip"></i>
- </div>
- {{/if}}
- </span>
+<div class="mail-list-entry__checkbox">
+ <input type="checkbox" {{#if isChecked }}checked="true"{{/if}} />
+</div>
+
+<a class="mail-list-entry__item" href="/#/{{ currentTag }}/mail/{{ ident }}">
+ <div>
+ <div class="mail-list-entry__item-from">
+ {{t 'to:'}}
+ {{#if header.to }}
+ {{ header.to }}
+ {{else}}
+ {{t 'no_recipient'}}
+ {{/if}}
+ </div> <!-- /.mail-list-entry__item-from -->
- <div class="from">
- {{t 'to:'}}
- {{#if header.to }}
- {{ header.to }}
- {{else}}
- {{t 'no_recipient'}}
- {{/if}}
+ <span class="mail-list-entry__item-date">{{ formatDate header.date }}</span> <!-- /.mail-list-entry__item-date -->
</div>
- <div class="subject">
- <i class="fa fa-pencil"></i>
- {{#if header.subject }}
- {{header.subject}}
- {{else}}
- {{t 'no_subject'}}
- {{/if}}
+ <div>
+ <div class="mail-list-entry__item-subject">
+ <i class="fa fa-pencil"></i>
+ {{#if header.subject }}
+ {{header.subject}}
+ {{else}}
+ {{t 'no_subject'}}
+ {{/if}}
+ </div>
+
+ {{#if attachments}}
+ <div class="mail-list-entry__item-attachment"><i class="fa fa-paperclip"></i></div>
+ {{/if}}
</div>
- </a>
-</span>
+ <ul class="mail-list-entry__item-tags">
+ {{#each tagsForListView }}
+ <li class="mail-list-entry__item-tags-tag" data-tag="{{this}}">{{ this }}</li>
+ {{/each }}
+ </ul> <!-- /.mail-list-entry__item-tags -->
+</a>
+
+
+
+
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 @@
-<span>
- <input type="checkbox"/>
-</span>
-<span>
- <a href="/#/{{ currentTag }}/mail/{{ ident }}">
- <span class="sent-date">{{ formatDate header.date }}
+<div class="mail-list-entry__checkbox">
+ <input type="checkbox" {{#if isChecked }}checked="true"{{/if}} />
+</div>
+<a class="mail-list-entry__item" href="/#/{{ currentTag }}/mail/{{ ident }}">
+ <div>
+ <div class="mail-list-entry__item-from">
+ {{t 'to:'}}
+ {{#if header.to }}
+ {{ header.to }}
+ {{else}}
+ {{t 'no_recipient'}}
+ {{/if}}
+ </div> <!-- /.mail-list-entry__item-from -->
+
+ <span class="mail-list-entry__item-date">{{ formatDate header.date }}</span> <!-- /.mail-list-entry__item-date -->
+ </div>
+ <div>
+ <div class="mail-list-entry__item-subject">
+ {{#if header.subject }}
+ {{header.subject}}
+ {{else}}
+ {{t 'no_subject'}}
+ {{/if}}
+ </div>
+
{{#if attachments}}
- <div class="attachment-indicator">
- <i class="fa fa-paperclip"></i>
- </div>
+ <div class="mail-list-entry__item-attachment"><i class="fa fa-paperclip"></i></div>
{{/if}}
- </span>
+ </div>
+ <ul class="mail-list-entry__item-tags">
+ {{#each tagsForListView }}
+ <li class="mail-list-entry__item-tags-tag" data-tag="{{this}}">{{ this }}</li>
+ {{/each }}
+ </ul> <!-- /.mail-list-entry__item-tags -->
+</a>
- <div class="from">
- {{t 'to:'}}
- {{#if header.to }}
- {{ header.to }}
- {{else}}
- {{t 'no_recipient'}}
- {{/if}}
- </div>
- <div class="subject">
- {{#if header.subject }}
- {{header.subject}}
- {{else}}
- {{t 'no_subject'}}
- {{/if}}
- </div>
- <ul class="tags">
- {{#each tagsForListView }}
- <li class="tags-tag" data-tag="{{this}}">{{ this }}</li>
- {{/each }}
- </ul>
- </a>
-</span>
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 @@
-<span>
- <input type="checkbox" {{#if isChecked }}checked="true"{{/if}} />
-</span>
-<span>
- <a href="/#/{{ currentTag }}/mail/{{ ident }}">
- <span class="received-date">{{ formatDate header.date }}
- {{#if attachments}}
- <div class="attachment-indicator">
- <i class="fa fa-paperclip"></i>
- </div>
- {{/if}}
- </span>
- <div class="from">{{#if header.from }}{{ header.from }}{{else}}{{t "you"}}{{/if}}</div>
- <div class="subject">
- {{ header.subject }}
+<div class="mail-list-entry__checkbox">
+ <input type="checkbox" {{#if isChecked }}checked="true"{{/if}} />
+</div>
+<a class="mail-list-entry__item" href="/#/{{ currentTag }}/mail/{{ ident }}">
+ <div>
+ <div class="mail-list-entry__item-from">
+ {{#if header.from }}
+ {{ header.from }}
+ {{else}}
+ {{t "you"}}
+ {{/if}}
+ </div> <!-- /.mail-list-entry__item-from -->
+
+ <span class="mail-list-entry__item-date">{{ formatDate header.date }}</span> <!-- /.mail-list-entry__item-date -->
</div>
- <ul class="tags">
- {{#each tagsForListView }}
- <li class="tags-tag" data-tag="{{this}}">{{ this }}</li>
- {{/each }}
- </ul>
- </a>
-</span>
+ <div>
+ <div class="mail-list-entry__item-subject">{{ header.subject }}</div>
+
+ {{#if attachments}}
+ <div class="mail-list-entry__item-attachment"><i class="fa fa-paperclip"></i></div>
+ {{/if}}
+ </div>
+ <ul class="mail-list-entry__item-tags">
+ {{#each tagsForListView }}
+ <li class="mail-list-entry__item-tags-tag" data-tag="{{this}}">{{ this }}</li>
+ {{/each }}
+ </ul> <!-- /.mail-list-entry__item-tags -->
+</a>
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 @@
-<span>
- <input type="checkbox" {{#if isChecked }}checked="true"{{/if}} />
-</span>
-<span>
- <a href="/#/{{ currentTag }}/mail/{{ ident }}">
- <span class="received-date">{{ header.formattedDate }}
- {{#if attachments}}
- <div class="attachment-indicator">
- <i class="fa fa-paperclip"></i>
+<div class="mail-list-entry__checkbox">
+ <input type="checkbox" {{#if isChecked }}checked="true"{{/if}} />
+</div>
+<a class="mail-list-entry__item" href="/#/{{ currentTag }}/mail/{{ ident }}">
+ <div>
+ <div class="mail-list-entry__item-from">
+ {{#if header.from }}
+ {{ header.from }}
+ {{else}}
+ {{t "you"}}
+ {{/if}}
+ </div> <!-- /.mail-list-entry__item-from -->
+
+ <span class="mail-list-entry__item-date">{{ formatDate header.date }}</span> <!-- /.mail-list-entry__item-date -->
+ </div>
+ <div>
+ <div class="mail-list-entry__item-subject">
+ <i class="fa fa-trash-o"></i>
+ {{ header.subject }}
</div>
- {{/if}}
- </span>
- <div class="from">{{#if header.from }}{{ header.from }}{{else}}{{t "you"}}{{/if}}</div>
- <div class="subject">
- <i class="fa fa-trash-o"></i>
- {{ header.subject }}
+
+ {{#if attachments}}
+ <div class="mail-list-entry__item-attachment"><i class="fa fa-paperclip"></i></div>
+ {{/if}}
</div>
- <ul class="tags">
- {{#each tagsForListView }}
- <li class="tags-tag" data-tag="{{this}}">{{ this }}</li>
- {{/each }}
- </ul>
- </a>
-</span>
+ <ul class="mail-list-entry__item-tags">
+ {{#each tagsForListView }}
+ <li class="mail-list-entry__item-tags-tag" data-tag="{{this}}">{{ this }}</li>
+ {{/each }}
+ </ul> <!-- /.mail-list-entry__item-tags -->
+</a>
+
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;
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-13 19:33:54 +0000