summaryrefslogtreecommitdiff
path: root/web-ui
diff options
context:
space:
mode:
Diffstat (limited to 'web-ui')
-rw-r--r--web-ui/app/js/helpers/view_helper.js7
-rw-r--r--web-ui/app/js/mail_list/ui/mail_items/mail_item.js1
-rw-r--r--web-ui/app/scss/_security.scss48
-rw-r--r--web-ui/app/scss/_styles.scss110
-rw-r--r--web-ui/app/scss/style.scss3
-rw-r--r--web-ui/app/scss/views/_mail-list.scss96
-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/app/templates/page/user_settings_box.hbs3
-rw-r--r--web-ui/app/templates/page/version.hbs3
-rwxr-xr-xweb-ui/config/add_git_version.sh2
-rw-r--r--web-ui/test/custom_matchers.js8
-rw-r--r--web-ui/test/spec/helpers/view_helper.spec.js6
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');
+ });
+ });
});
});