From 5cf1451bf3512affb9d84bc9370e250de7793d3f Mon Sep 17 00:00:00 2001 From: Felix Hammerl Date: Fri, 29 Apr 2016 12:02:50 +0200 Subject: Issue #679: Fix CSS and markup for attachments --- web-ui/app/js/mail_view/ui/attachment_list.js | 4 +- web-ui/app/scss/views/_compose-view.scss | 176 ++++++++++++--------- web-ui/app/scss/views/_read-view.scss | 2 - web-ui/app/templates/compose/attachment_item.hbs | 13 +- .../templates/compose/attachment_upload_item.hbs | 7 +- web-ui/app/templates/compose/attachments_list.hbs | 24 ++- web-ui/app/templates/compose/compose_box.hbs | 4 +- web-ui/app/templates/compose/inline_box.hbs | 4 +- .../templates/compose/upload_attachment_failed.hbs | 8 +- 9 files changed, 130 insertions(+), 112 deletions(-) (limited to 'web-ui') 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 @@ -
  • - - {{ this.name }} ({{ formatSize this.size}}) - {{#if received}} - - {{/if}} - {{#if removable}} - - {{/if}} - +
  • + {{ this.name }} ({{ formatSize this.size}}) + {{#if removable}}{{/if}}
    • 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 @@ -
  • -
    - {{ this.name }} ({{ formatSize this.size}}) +
  • +
    + {{ this.name }} ({{ formatSize this.size}}) +
    • 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 @@ -
    - - - - +
    + -
    -
    -
      - {{#each attachments }} - {{> attachment_item this }} - {{/each }} -
    -
      -
      +
      +
        + {{#each attachments }} + {{> attachment_item this }} + {{/each }} +
      +
        -
        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 }} -
        +
        - +
        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 }} -
        +
        - +
        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 @@ -
        - - Upload failed. This file exceeds the 1MB limit. +
        + + Upload failed. This file exceeds the 1MB limit. Choose another file Dismiss -
        +
        -- cgit v1.2.3