diff options
| -rw-r--r-- | web-ui/app/js/mail_view/ui/attachment_list.js | 6 | ||||
| -rw-r--r-- | web-ui/app/scss/_colors.scss | 3 | ||||
| -rw-r--r-- | web-ui/app/scss/_compose.scss | 16 | ||||
| -rw-r--r-- | web-ui/app/scss/_read.scss | 6 | ||||
| -rw-r--r-- | web-ui/app/templates/compose/compose_box.hbs | 3 | ||||
| -rw-r--r-- | web-ui/test/spec/mail_view/ui/attachment_list.spec.js | 2 |
6 files changed, 29 insertions, 7 deletions
diff --git a/web-ui/app/js/mail_view/ui/attachment_list.js b/web-ui/app/js/mail_view/ui/attachment_list.js index 72782c6b..786fcb1e 100644 --- a/web-ui/app/js/mail_view/ui/attachment_list.js +++ b/web-ui/app/js/mail_view/ui/attachment_list.js @@ -50,8 +50,8 @@ define( this.buildAttachmentListItem = function (attachment) { return '<a href="' + this.attr.attachmentBaseUrl + '/' + attachment.ident + '?filename=' + - attachment.name + '&encoding=' + attachment.encoding + '">' + attachment.name + ' (' + viewHelper.formatSize(attachment.size) + ')' + - '</a>'; + attachment.name + '&encoding=' + attachment.encoding + '">' + attachment.name + ' <span class="attachment-size"> (' + viewHelper.formatSize(attachment.size) + ')' + + '</span></a>'; }; this.addJqueryFileUploadConfig = function() { @@ -88,4 +88,4 @@ define( } return attachmentList; - });
\ No newline at end of file + }); diff --git a/web-ui/app/scss/_colors.scss b/web-ui/app/scss/_colors.scss index 33b4f4e8..f4b7f21d 100644 --- a/web-ui/app/scss/_colors.scss +++ b/web-ui/app/scss/_colors.scss @@ -43,5 +43,6 @@ $wont_be_encrypted: $attention; $recipients_font_color: #AAA; /* Attachments */ -$attachment_text: #333; +$attachment_text: #555; $attachment_icon: lighten($attachment_text, 30); +$attachment_size: lighten($attachment_text, 30); diff --git a/web-ui/app/scss/_compose.scss b/web-ui/app/scss/_compose.scss index bd064015..3e81a06b 100644 --- a/web-ui/app/scss/_compose.scss +++ b/web-ui/app/scss/_compose.scss @@ -45,7 +45,13 @@ span { padding: 3px; + + &.attachment-size { + color: $attachment_size; + cursor: pointer; + } } + label.floatlabel { padding: 0.4rem !important; position: absolute; @@ -117,6 +123,16 @@ margin: 1px; } + + .attachmentsAreaWrap { + padding: 0; + + .attachmentsArea { + padding: 0; + border-top: 0; + } + } + @include recipients; } diff --git a/web-ui/app/scss/_read.scss b/web-ui/app/scss/_read.scss index 3d657ec7..ed462d38 100644 --- a/web-ui/app/scss/_read.scss +++ b/web-ui/app/scss/_read.scss @@ -68,6 +68,10 @@ padding: 15px 30px 0 30px; } +#attachment-list { + margin-top: 6px; +} + .attachmentsAreaWrap { padding: 0 30px; @@ -80,6 +84,7 @@ border: 1px solid #D9D9D9; border-radius: 2px; background-color: #F5F5F5; + margin-bottom: 7px; a { color: $attachment_text; @@ -92,6 +97,7 @@ i.download-icon { color: lighten($attachment_icon, 15); } + color: $attachment_icon; outline: none; } diff --git a/web-ui/app/templates/compose/compose_box.hbs b/web-ui/app/templates/compose/compose_box.hbs index eb204501..06cc099a 100644 --- a/web-ui/app/templates/compose/compose_box.hbs +++ b/web-ui/app/templates/compose/compose_box.hbs @@ -32,11 +32,10 @@ <!-- The container for the uploaded files --> <div class="attachmentsAreaWrap {{#unless attachments}}hide{{/unless}}"> <div class="attachmentsArea column large-12"> - <p><strong><i class="fa fa-paperclip"></i> Attachment(s):</strong></p> <ul id="attachment-list-item"> {{#each attachments }} <li> - <a href="/attachment/{{ this.ident }}?encoding={{ this.encoding }}&filename={{ this.name }}">{{ this.name }} ({{ formatSize this.size}}) + <a href="/attachment/{{ this.ident }}?encoding={{ this.encoding }}&filename={{ this.name }}">{{ this.name }} <span class="attachment-size">({{ formatSize this.size}})</span> <i class="fa fa-arrow-down download-icon"></i></a> </li> {{/each }} diff --git a/web-ui/test/spec/mail_view/ui/attachment_list.spec.js b/web-ui/test/spec/mail_view/ui/attachment_list.spec.js index ccede0d9..86a9297f 100644 --- a/web-ui/test/spec/mail_view/ui/attachment_list.spec.js +++ b/web-ui/test/spec/mail_view/ui/attachment_list.spec.js @@ -32,7 +32,7 @@ describeMixin('mail_view/ui/attachment_list', function () { $(document).trigger(Pixelated.events.mail.uploadedAttachment, stubAttachment); - var expected_li = '<li><a href="/attachment/faked?filename=haha.txt&encoding=base64">haha.txt (4.39 Kb)</a></li>'; + var expected_li = '<li><a href="/attachment/faked?filename=haha.txt&encoding=base64">haha.txt <span class="attachment-size"> (4.39 Kb)</span></a></li>'; expect(this.component.select('attachmentListItem').html()).toEqual(expected_li); }); |