summaryrefslogtreecommitdiff
path: root/web-ui/app
diff options
context:
space:
mode:
authorFelix Hammerl <fhammerl@thoughtworks.com>2016-04-29 12:02:50 +0200
committerFelix Hammerl <fhammerl@thoughtworks.com>2016-04-29 13:02:48 +0200
commit5cf1451bf3512affb9d84bc9370e250de7793d3f (patch)
tree6b3fe31ceacaf78f3220ffceb18790a89b4ce89e /web-ui/app
parent373fbde99b66add1875426983238d5e4a9d46b08 (diff)
Issue #679: Fix CSS and markup for attachments
Diffstat (limited to 'web-ui/app')
-rw-r--r--web-ui/app/js/mail_view/ui/attachment_list.js4
-rw-r--r--web-ui/app/scss/views/_compose-view.scss176
-rw-r--r--web-ui/app/scss/views/_read-view.scss2
-rw-r--r--web-ui/app/templates/compose/attachment_item.hbs13
-rw-r--r--web-ui/app/templates/compose/attachment_upload_item.hbs7
-rw-r--r--web-ui/app/templates/compose/attachments_list.hbs24
-rw-r--r--web-ui/app/templates/compose/compose_box.hbs4
-rw-r--r--web-ui/app/templates/compose/inline_box.hbs4
-rw-r--r--web-ui/app/templates/compose/upload_attachment_failed.hbs8
9 files changed, 130 insertions, 112 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 ef2960f7..fc4c0544 100644
--- a/web-ui/app/js/mail_view/ui/attachment_list.js
+++ b/web-ui/app/js/mail_view/ui/attachment_list.js
@@ -35,7 +35,7 @@ define(
attachmentUploadItemAbort: '#attachment-upload-item-abort',
attachmentBaseUrl: '/attachment',
attachments: [],
- closeIcon: '.close-icon',
+ closeIcon: '#upload-error-close',
uploadError: '#upload-error',
dismissButton: '#dismiss-button',
uploadFileButton: '#upload-file-button'
@@ -171,8 +171,6 @@ define(
}
}).bind('fileuploadstart', function (e) {
self.trigger(document, events.mail.uploadingAttachment);
- }).bind('fileuploadadd', function (e) {
- $('.attachmentsAreaWrap').show();
});
};
diff --git a/web-ui/app/scss/views/_compose-view.scss b/web-ui/app/scss/views/_compose-view.scss
index 146aacf5..296a491a 100644
--- a/web-ui/app/scss/views/_compose-view.scss
+++ b/web-ui/app/scss/views/_compose-view.scss
@@ -1,5 +1,110 @@
.compose-view {
overflow: auto;
+
+ &__buttons {
+ &-attachment {
+ cursor: pointer;
+ outline: 0;
+ margin-left: 18px;
+ padding-top: 0px;
+ -ms-transform: rotate(224deg);
+ -webkit-transform: rotate(224deg);
+ transform: rotate(224deg);
+
+ i.fa-paperclip {
+ font-size: 1.7em;
+ }
+
+ &--busy {
+ color: lighten($recipients_font_color, 10%);
+ cursor: progress;
+ }
+ }
+ }
+
+ &__attachments {
+ &-wrapper {
+ padding: 0;
+ margin-top: 30px;
+ }
+
+ &-list {
+ &-item {
+ display: block;
+ position: relative;
+ margin-bottom: 8px;
+ padding: 5px;
+ border: 1px solid $border_light_grey;
+ border-radius: 2px;
+ background-color: $background_light_grey;
+
+ &-label {
+ color: $attachment_text;
+ text-decoration: none;
+
+ &:hover, &:focus {
+ color: $attachment_icon;
+ outline: none;
+ }
+ }
+
+ &-icon {
+ color: #a2a2a2;
+ float: right;
+ margin-top: 7px;
+ cursor: pointer;
+ }
+
+ &-progress {
+ width: 0%;
+ position: absolute;
+ right: 0;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ min-height: 100%;
+
+ &-bar {
+ height: 100%;
+ background-color: rgba($light_blue, 0.3);
+ }
+ }
+
+ }
+
+ &--upload {
+ display: none;
+ }
+
+ }
+
+ &-error {
+ background-color: $background_light_grey;
+ border-radius: 2px;
+ border: 1px solid $error;
+ display: block;
+ font-size: 0.9rem;
+ margin-bottom: 20px;
+ padding: 5px;
+ width: 100%;
+
+ &-close {
+ float: left;
+ margin: 5px 5px 0 0;
+ }
+
+ & > * {
+ color: $error;
+ }
+
+ & > a {
+ display: inline-block;
+ text-decoration: underline;
+ padding: 5px;
+ }
+ }
+ }
+
}
// COMPOSE PANE
@@ -116,77 +221,6 @@
.buttons-group {
margin-top: 0px;
-
- span#attachment-button {
- cursor: pointer;
- outline: 0;
- margin-left: 18px;
- padding-top: 0px;
- -ms-transform: rotate(224deg);
-
- /* IE 9 */
- -webkit-transform: rotate(224deg);
-
- /* Chrome, Safari, Opera */
- transform: rotate(224deg);
-
- i.fa-paperclip {
- font-size: 1.7em;
- }
-
- &.busy {
- color: lighten($recipients_font_color, 10%);
- cursor: progress;
- }
- }
- }
-
- #attachment-upload-item {
- display: none;
-
- .progress {
- width: 0%;
- position: absolute;
- right: 0;
- left: 0;
- top: 0;
- bottom: 0;
- min-height: 100%;
-
- .progress-bar {
- height: 100%;
- background-color: rgba($light_blue, 0.3);
- }
- }
- }
-
- .attachmentsAreaWrap {
- padding: 0;
-
- .attachmentsArea {
- padding: 0;
- border-top: 0;
-
- #upload-error {
- color: $error;
- margin-bottom: 20px;
-
- .close-icon {
- font-size: 1.0rem;
- cursor: pointer;
- }
-
- span, a {
- color: $error;
- font-size: 0.9rem;
- }
-
- a {
- text-decoration: underline;
- padding: 5px;
- }
- }
- }
}
.recipients-area {
diff --git a/web-ui/app/scss/views/_read-view.scss b/web-ui/app/scss/views/_read-view.scss
index 25aaf92e..f69d51a5 100644
--- a/web-ui/app/scss/views/_read-view.scss
+++ b/web-ui/app/scss/views/_read-view.scss
@@ -134,8 +134,6 @@
}
&-item {
- @include scut-clearfix;
-
display: block;
margin-bottom: 8px;
padding: 5px;
diff --git a/web-ui/app/templates/compose/attachment_item.hbs b/web-ui/app/templates/compose/attachment_item.hbs
index 6fefda2f..7a64f6f5 100644
--- a/web-ui/app/templates/compose/attachment_item.hbs
+++ b/web-ui/app/templates/compose/attachment_item.hbs
@@ -1,11 +1,4 @@
-<li data-ident="{{ this.ident }}">
- <a href="/attachment/{{ this.ident }}?encoding={{ this.encoding }}&filename={{ this.name }}">
- {{ this.name }} <span class="attachment-size">({{ formatSize this.size}})</span>
- {{#if received}}
- <i class="fa fa-arrow-down download-icon"></i>
- {{/if}}
- {{#if removable}}
- <i class="fa fa-close remove-icon"></i>
- {{/if}}
- </a>
+<li data-ident="{{ this.ident }}" class="compose-view__attachments-list-item">
+ <a class="compose-view__attachments-list-item-label" href="/attachment/{{ this.ident }}?encoding={{ this.encoding }}&filename={{ this.name }}">{{ this.name }} <span class="attachment-size">({{ formatSize this.size}})</span></a>
+ {{#if removable}}<i class="fa fa-close remove-icon compose-view__attachments-list-item-icon"></i>{{/if}}
</li>
diff --git a/web-ui/app/templates/compose/attachment_upload_item.hbs b/web-ui/app/templates/compose/attachment_upload_item.hbs
index ff783267..eb6c4ba6 100644
--- a/web-ui/app/templates/compose/attachment_upload_item.hbs
+++ b/web-ui/app/templates/compose/attachment_upload_item.hbs
@@ -1,4 +1,5 @@
-<li>
- <div id="attachment-upload-item-progress" class="progress"><div class="progress-bar progress-bar-success"></div></div>
- <a>{{ this.name }} <span class="attachment-size">({{ formatSize this.size}})</span><i id="attachment-upload-item-abort" class="fa fa-close remove-icon"></i></a>
+<li class="compose-view__attachments-list-item">
+ <div id="attachment-upload-item-progress" class="compose-view__attachments-list-item-progress"><div class="compose-view__attachments-list-item-progress-bar"></div></div>
+ <a class="compose-view__attachments-list-item-label">{{ this.name }} <span class="attachment-size">({{ formatSize this.size}})</span></a>
+ <i id="attachment-upload-item-abort" class="fa fa-close remove-icon compose-view__attachments-list-item-icon"></i>
</li>
diff --git a/web-ui/app/templates/compose/attachments_list.hbs b/web-ui/app/templates/compose/attachments_list.hbs
index 4d3f1cac..6f34df9e 100644
--- a/web-ui/app/templates/compose/attachments_list.hbs
+++ b/web-ui/app/templates/compose/attachments_list.hbs
@@ -1,20 +1,14 @@
-<div id="attachment-list" class="buttons-group columns">
- <span class="btn btn-success fileinput-button">
- <!-- The file input field used as target for the file upload widget -->
- <input id="fileupload" type="file" name="attachment">
- </span>
+<div id="attachment-list" class="buttons-group columns compose-view__attachments">
+ <input id="fileupload" type="file" name="attachment" hidden>
<!-- The container for the uploaded files -->
- <div class="attachmentsAreaWrap {{#unless attachments}}hide{{/unless}}">
- <div class="attachmentsArea column large-12">
- <ul id="attachment-list-item">
- {{#each attachments }}
- {{> attachment_item this }}
- {{/each }}
- </ul>
- <ul id="attachment-upload-item"></ul>
- </div>
+ <div class="compose-view__attachments-wrapper">
+ <ul id="attachment-list-item" class="compose-view__attachments-list">
+ {{#each attachments }}
+ {{> attachment_item this }}
+ {{/each }}
+ </ul>
+ <ul id="attachment-upload-item" class="compose-view__attachments-list compose-view__attachments-list--upload"></ul>
</div>
- <br>
</div>
diff --git a/web-ui/app/templates/compose/compose_box.hbs b/web-ui/app/templates/compose/compose_box.hbs
index b88138b5..f69cb542 100644
--- a/web-ui/app/templates/compose/compose_box.hbs
+++ b/web-ui/app/templates/compose/compose_box.hbs
@@ -22,9 +22,9 @@
{{> attachments_list }}
- <div class="buttons-group columns">
+ <div class="buttons-group columns compose-view__buttons">
<button id="send-button" tabindex="6"><i class="fa fa-send"></i></button>
- <span id="attachment-button" tabindex="6"></span>
+ <span id="attachment-button" class="compose-view__buttons-attachment" tabindex="6"></span>
<button id="trash-button" tabindex="7">{{t 'trash-button'}}<i class="fa fa-trash-o"></i></button>
<div id="draft-save-status"></div>
</div>
diff --git a/web-ui/app/templates/compose/inline_box.hbs b/web-ui/app/templates/compose/inline_box.hbs
index 59dc67bc..543e69de 100644
--- a/web-ui/app/templates/compose/inline_box.hbs
+++ b/web-ui/app/templates/compose/inline_box.hbs
@@ -12,9 +12,9 @@
{{> attachments_list }}
-<div class="buttons-group columns">
+<div class="buttons-group columns compose-view__buttons">
<button id="send-button" tabindex=6><i class="fa fa-send"></i></button>
- <span id="attachment-button" tabindex="6"></span>
+ <span id="attachment-button" class="compose-view__buttons-attachment" tabindex="6"></span>
<button id="trash-button" tabindex=7>{{t 'trash-button'}}<i class="fa fa-trash-o"></i></button>
<div id="draft-save-status"></div>
</div>
diff --git a/web-ui/app/templates/compose/upload_attachment_failed.hbs b/web-ui/app/templates/compose/upload_attachment_failed.hbs
index 33ac1aac..dbb1437b 100644
--- a/web-ui/app/templates/compose/upload_attachment_failed.hbs
+++ b/web-ui/app/templates/compose/upload_attachment_failed.hbs
@@ -1,6 +1,6 @@
-<div id="upload-error">
- <i class="fa fa-close close-icon"></i>
- <span id="upload-error-message">Upload failed. This file exceeds the 1MB limit.</span>
+<div id="upload-error" class="compose-view__attachments-error">
+ <i id="upload-error-close" class="fa fa-close compose-view__attachments-error-close"></i>
+ <span id="upload-error-message" class="compose-view__attachments-error-message">Upload failed. This file exceeds the 1MB limit.</span>
<a href="#" id="upload-file-button">Choose another file</a>
<a href="#" id="dismiss-button">Dismiss</a>
-</div>
+</div>