diff options
Diffstat (limited to 'web-ui')
-rw-r--r-- | web-ui/app/js/helpers/view_helper.js | 7 | ||||
-rw-r--r-- | web-ui/app/js/mail_list/ui/mail_items/mail_item.js | 1 | ||||
-rw-r--r-- | web-ui/app/scss/_security.scss | 48 | ||||
-rw-r--r-- | web-ui/app/scss/_styles.scss | 110 | ||||
-rw-r--r-- | web-ui/app/scss/style.scss | 3 | ||||
-rw-r--r-- | web-ui/app/scss/views/_mail-list.scss | 96 | ||||
-rw-r--r-- | web-ui/app/templates/mails/draft.hbs | 66 | ||||
-rw-r--r-- | web-ui/app/templates/mails/sent.hbs | 65 | ||||
-rw-r--r-- | web-ui/app/templates/mails/single.hbs | 49 | ||||
-rw-r--r-- | web-ui/app/templates/mails/trash.hbs | 52 | ||||
-rw-r--r-- | web-ui/app/templates/page/user_settings_box.hbs | 3 | ||||
-rw-r--r-- | web-ui/app/templates/page/version.hbs | 3 | ||||
-rwxr-xr-x | web-ui/config/add_git_version.sh | 2 | ||||
-rw-r--r-- | web-ui/test/custom_matchers.js | 8 | ||||
-rw-r--r-- | web-ui/test/spec/helpers/view_helper.spec.js | 6 |
15 files changed, 266 insertions, 253 deletions
diff --git a/web-ui/app/js/helpers/view_helper.js b/web-ui/app/js/helpers/view_helper.js index e8d517a5..7e07df75 100644 --- a/web-ui/app/js/helpers/view_helper.js +++ b/web-ui/app/js/helpers/view_helper.js @@ -98,14 +98,21 @@ define( } + function formatFingerPrint(fingerprint) { + fingerprint = fingerprint || ''; + return fingerprint.replace(/(.{4})/g, '$1 ').trim(); + } + Handlebars.registerHelper('formatDate', formatDate); Handlebars.registerHelper('formatSize', formatSize); Handlebars.registerHelper('formatStatusClasses', formatStatusClasses); + Handlebars.registerHelper('formatFingerPrint', formatFingerPrint); return { formatStatusClasses: formatStatusClasses, formatSize: formatSize, formatMailBody: formatMailBody, + formatFingerPrint: formatFingerPrint, moveCaretToEndOfText: moveCaretToEndOfText, quoteMail: quoteMail, i18n: i18n 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/_security.scss b/web-ui/app/scss/_security.scss deleted file mode 100644 index ff36cb3e..00000000 --- a/web-ui/app/scss/_security.scss +++ /dev/null @@ -1,48 +0,0 @@ -.security-status { - margin: 0 0 5px; - clear: both; - span { - display: inline-block; - padding: 2px 6px; - white-space: nowrap; - background: $success; - color: $white; - border-radius: 12px; - &:before { - font-family: FontAwesome; - } - &.encrypted { - &:before { - content: "\f023"; - } - &.encryption-error { - background: $attention; - &:before { - content: "\f023 \f057"; - } - } - } - &.signed { - &:before { - content: "\f00c"; - } - &.signature-not-trusted { - background: $error; - &:before { - content: "\f05e"; - } - } - } - &[class^=not-], &.signature-expired, &.signature-revoked { - background: $attention; - &:before { - content: "\f05e" - } - } - &.not-encrypted { - &:before { - content: "\f13e "; - } - } - } -} diff --git a/web-ui/app/scss/_styles.scss b/web-ui/app/scss/_styles.scss index b4ffbd75..aacc5dd5 100644 --- a/web-ui/app/scss/_styles.scss +++ b/web-ui/app/scss/_styles.scss @@ -32,6 +32,11 @@ bottom: 33px } + header { + border-bottom: 1px solid white; + margin-bottom: 10px; + } + #user-settings-close { float: right; } @@ -42,6 +47,14 @@ line-height: 1.2em; } + h2 { + font-size: 1.1em; + color: white; + line-height: 1.1em; + display: inline; + margin-left: 5px; + } + i.fa-user { margin-right: 10px; float: left; @@ -54,7 +67,7 @@ } p { - font-size: 1.2em; + font-size: 1.1em; color: $light_orange; } } @@ -128,100 +141,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 +429,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 4dc79398..db9486fa 100644 --- a/web-ui/app/scss/style.scss +++ b/web-ui/app/scss/style.scss @@ -12,6 +12,8 @@ // mixins @import "mixins/position-helpers"; @import "mixins/tags"; + +// TODO @import "mixins"; // templates @@ -26,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..417fabc2 --- /dev/null +++ b/web-ui/app/scss/views/_mail-list.scss @@ -0,0 +1,96 @@ +.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; + color: $attachment_text; + } + + &.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%; + + &-icon { + color: $light_gray; + } + } + + &-attachment { + width: 14px; + text-align: right; + display: inline-block; + float: right; + color: $light_gray; + } + + &-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..d223c0a4 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="mail-list-entry__item-subject-icon 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..f8947b15 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="mail-list-entry__item-subject-icon 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/app/templates/page/user_settings_box.hbs b/web-ui/app/templates/page/user_settings_box.hbs index eb227dcf..761bfc16 100644 --- a/web-ui/app/templates/page/user_settings_box.hbs +++ b/web-ui/app/templates/page/user_settings_box.hbs @@ -4,4 +4,7 @@ <h1>User Settings</h1> <i class="shortcut-label"></i> </header> +<i class="fa fa-envelope-o"></i><h2>E-Mail address</h2> <p>{{ account_email }}</p> +<i class="fa fa-key"></i><h2>Public key fingerprint</h2> +<p>{{ formatFingerPrint fingerprint }}</p> diff --git a/web-ui/app/templates/page/version.hbs b/web-ui/app/templates/page/version.hbs index 40804ff3..181d2151 100644 --- a/web-ui/app/templates/page/version.hbs +++ b/web-ui/app/templates/page/version.hbs @@ -1 +1,2 @@ -version: UNKNOWN_VERSION
\ No newline at end of file +version: UNKNOWN_VERSION <br/> +COMMIT_DATE diff --git a/web-ui/config/add_git_version.sh b/web-ui/config/add_git_version.sh index 2732abed..b9cfba72 100755 --- a/web-ui/config/add_git_version.sh +++ b/web-ui/config/add_git_version.sh @@ -3,8 +3,10 @@ TEMPLATE_FILE="app/js/generated/hbs/templates.js" COMMITISH=$(git rev-parse --short HEAD) +COMMITDATE=$(git show -s --format=%cr) perl -pi -e "s/UNKNOWN_VERSION/$COMMITISH/" $TEMPLATE_FILE +perl -pi -e "s/COMMIT_DATE/$COMMITDATE/" $TEMPLATE_FILE if [ ! -f "$TEMPLATE_FILE" ] ; then echo "file $TEMPLATE_FILE not found" 1>&2 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; diff --git a/web-ui/test/spec/helpers/view_helper.spec.js b/web-ui/test/spec/helpers/view_helper.spec.js index b2f597c2..19bef15f 100644 --- a/web-ui/test/spec/helpers/view_helper.spec.js +++ b/web-ui/test/spec/helpers/view_helper.spec.js @@ -106,5 +106,11 @@ define(['helpers/view_helper'], function (viewHelper) { expect(window.setTimeout.calls.all()[0].args[1]).toEqual(1); }); + + describe('fingerprint helper', function () { + it('should format fingerprint', function () { + expect(viewHelper.formatFingerPrint('12345678')).toEqual('1234 5678'); + }); + }); }); }); |