From 195322b6489bc497deb1fa266414218cc0423c26 Mon Sep 17 00:00:00 2001 From: Felix Hammerl Date: Thu, 10 Mar 2016 20:23:52 +0100 Subject: Issue #620: Refactor read view --- web-ui/app/scss/_read.scss | 188 ------------------------ web-ui/app/scss/_reply.scss | 2 +- web-ui/app/scss/_styles.scss | 28 +--- web-ui/app/scss/style.scss | 4 +- web-ui/app/scss/views/_close-button.scss | 21 +++ web-ui/app/scss/views/_read-view.scss | 181 +++++++++++++++++++++++ web-ui/app/templates/mails/full_view.hbs | 101 +++++++------ web-ui/app/templates/mails/mail_actions.hbs | 10 +- web-ui/test/spec/mail_view/ui/mail_view.spec.js | 2 +- 9 files changed, 266 insertions(+), 271 deletions(-) delete mode 100644 web-ui/app/scss/_read.scss create mode 100644 web-ui/app/scss/views/_close-button.scss create mode 100644 web-ui/app/scss/views/_read-view.scss (limited to 'web-ui') diff --git a/web-ui/app/scss/_read.scss b/web-ui/app/scss/_read.scss deleted file mode 100644 index 9ae64a57..00000000 --- a/web-ui/app/scss/_read.scss +++ /dev/null @@ -1,188 +0,0 @@ -/* MAIL PANE */ - -#mail-view { - .msg-header { - display: flex; - flex-wrap: nowrap; - top: 0; - z-index: 10; - background-color: white; - font-size: 0.9em; - padding: 0px 0; - margin: 1px 0 0 0; - - .recipients { - padding-bottom: 5px; - line-height: 1.5em; - - i { - padding: 0 5px; - } - - .from { - font-weight: 700; - } - } - - .close-mail-button { - position: relative; - float: none; - flex-shrink: 0; - display: inline-block; - vertical-align: top; - height: 27px; - margin-right: 3px; - } - - .full-view-header { - display: inline-block; - padding-top: 5px; - width: 95%; - flex-shrink: 1; - } - - .headline-area { - clear: both; - border-top: 1px solid $lighter_gray; - } - } - - h3 { - margin-bottom: 0; - } - - .tagsArea { - clear: both; - margin: 0 0 10px; - - @include tags; - - ul li { - &.tag:hover { - &:before { - content: "click to remove"; - text-transform: lowercase; - font-size: 0.5rem; - - @include tooltip(18px, 8px); - } - } - } - } -} - -.bodyArea { - padding: 10px 30px 0 30px; - box-sizing: border-box; - - iframe { - box-sizing: inherit; - border: none; - width: 100%; - } -} - -.attachmentsAreaWrap { - padding: 0 30px; - - .attachmentsArea { - border-top: 1px solid $lighter_gray; - padding: 10px 0 0; - - li { - position: relative; - display: block; - border: 1px solid $border_light_grey; - border-radius: 2px; - background-color: $background_light_grey; - margin-bottom: 8px; - - a { - color: $attachment_text; - display: block; - text-decoration: none; - line-height: inherit; - padding: 4px 5px; - - &:hover, &:focus { - i.download-icon { - color: lighten($attachment_icon, 15); - } - - color: $attachment_icon; - outline: none; - } - - i.download-icon { - position: absolute; - color: $attachment_icon; - right: 0; - padding: 7px 10px; - } - - i.remove-icon { - float: right; - padding-right: 5px; - padding-top: 7px; - color: $medium_light_grey; - } - } - } - } -} - -#mail-actions { - text-align: right; - padding: 10px 0; - - button { - display: inline-block; - display: inline; - line-height: 2em; - border: 1px solid $lighter_gray; - - #reply-button-top { - @include border-right-radius(0); - - padding: 0 20px; - } - - #view-more-actions { - @include border-left-radius(0); - - padding: 0 5px; - margin-left: -4px; - } - - &:hover { - @include btn-transition; - - background: darken($contrast, 5%); - } - } - - ul#more-actions { - padding: 5px 0; - width: 170px; - text-align: left; - display: block; - position: absolute; - background: $white; - border: 1px solid $lighter_gray; - right: 0; - top: 40px; - z-index: 10; - - li { - span, a { - padding: 5px 10px; - display: block; - - &:hover { - cursor: pointer; - background: $contrast; - } - } - } - } -} diff --git a/web-ui/app/scss/_reply.scss b/web-ui/app/scss/_reply.scss index 76689d16..622bdd5a 100644 --- a/web-ui/app/scss/_reply.scss +++ b/web-ui/app/scss/_reply.scss @@ -1,6 +1,6 @@ #reply-section { - padding: 0 30px; + padding-left: 30px; .reply-container { margin: 10px 0; padding: 10px; diff --git a/web-ui/app/scss/_styles.scss b/web-ui/app/scss/_styles.scss index 1ff588d7..98c70c68 100644 --- a/web-ui/app/scss/_styles.scss +++ b/web-ui/app/scss/_styles.scss @@ -574,9 +574,11 @@ section { button { border: 1px solid transparent; + i { margin-left: 5px; } + &#trash-button { background: $white; border: 1px solid $medium_light_grey; @@ -587,30 +589,8 @@ button { background: $contrast; } } - &.close-mail-button { - background: transparent; - color: $medium_light_grey; - float: right; - &:hover { - color: darken($medium_light_grey, 10%); - } - } - &.close-mail-button { - position: absolute; - left: 0; - top: 0; - margin: 0; - padding: 3px 6px 5px; - background: $lighter_gray; - opacity: 0.7; - @include border-radius(0); - &:hover { - opacity: 1; - } - i { - margin: 0; - } - } + + &.no-style { background: transparent; color: $medium_light_grey; diff --git a/web-ui/app/scss/style.scss b/web-ui/app/scss/style.scss index d27b3031..2ed81556 100644 --- a/web-ui/app/scss/style.scss +++ b/web-ui/app/scss/style.scss @@ -1,5 +1,6 @@ // vendor stylesheets and resets @import "vendor/reset"; +@import "vendor/scut"; @import "compass/css3"; @import "vendor/foundation"; @@ -20,15 +21,16 @@ // views @import "views/message-panel"; +@import "views/close-button"; @import "views/no-message-selected"; @import "views/no-mails-available"; +@import "views/read-view"; // misc stuff @import "others"; // TODO @import "compose"; -@import "read"; @import "reply"; @import "security"; @import "styles"; diff --git a/web-ui/app/scss/views/_close-button.scss b/web-ui/app/scss/views/_close-button.scss new file mode 100644 index 00000000..9285a145 --- /dev/null +++ b/web-ui/app/scss/views/_close-button.scss @@ -0,0 +1,21 @@ +.close-mail-button { + $button-size: 27px; + + margin-right: 3px; + float: left; + background: $lighter_gray; + color: $medium_light_grey; + width: $button-size; + height: $button-size; + padding: 0; + border-radius: 0; + + &:hover { + color: darken($medium_light_grey, 10%); + } + + i { + padding: 0; + margin: 0; + } +} diff --git a/web-ui/app/scss/views/_read-view.scss b/web-ui/app/scss/views/_read-view.scss new file mode 100644 index 00000000..6c229f9b --- /dev/null +++ b/web-ui/app/scss/views/_read-view.scss @@ -0,0 +1,181 @@ +.mail-read-view { + $component-vertical-spacing: 10px; + $view-top-spacing: 3px; + + // NB! Setting overflow: hidden on an element causes + // a new float context to be created, so elements that + // are floated inside an element that has overflow: hidden + // applied are cleared. + overflow-x: hidden; + + hr { + margin: 0; + } + + &__header { + @include scut-clearfix; + + font-size: 0.9em; + margin: 0; + margin: $view-top-spacing 0 $component-vertical-spacing 0; + + &-recipients { + display: inline; + margin-bottom: 5px; + line-height: 1.5em; + + &-separator { + margin: 0 10px; + } + + &--highlight-sender { + font-weight: bold; + } + } + + &-date { + display: inline; + float: right; + } + + &-subject { + display: inline; + float: left; + max-width: 80%; + } + + &-actions { + display: inline; + float: right; + max-width: 20%; + background: $white; + white-space: nowrap; + margin-top: $component-vertical-spacing; + + &-button { + color: $medium_light_grey; + background-color: inherit; + display: inline; + border: 1px solid $lighter_gray; + line-height: 2em; + + margin-bottom: 0; + + i { + // workaround: remove padding and margin inserted by font-awesome + margin: 0; + padding: 0; + } + + &:hover, &:active, &:focus { + @include btn-transition; + + background: darken($contrast, 5%); + color: inherit; + } + + &--reply { + padding: 0 20px; + margin-right: -4px; // force buttons together + + } + + &--more { + padding: 0 5px; + } + } + + &-dropdown { + $container-right-padding: 10px; + + background: inherit; + position: absolute; + border: 1px solid $lighter_gray; + right: $container-right-padding; + + &-entry { + box-sizing: border-box; + background: inherit; + padding: 5px 10px; + display: block; + border-bottom: 1px solid $lighter_gray; + + &:last-child { + border-bottom: none; + } + + &:hover { + cursor: pointer; + background: $contrast; + } + } + } + } + + &-tags { + clear: both; + margin: 0 0 10px; + + // TODO refactor + + @include tags; + + ul li { + &.tag:hover { + &:before { + content: "click to remove"; + text-transform: lowercase; + font-size: 0.5rem; + + @include tooltip(18px, 8px); + } + } + } + } + } + + &__body { + margin: $component-vertical-spacing 0; + width: 100%; + border: none; + } + + &__attachments { + margin: $component-vertical-spacing 0; + + &-header { + font-weight: bold; + } + + &-item { + @include scut-clearfix; + + display: block; + 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 { + i.download-icon { + color: lighten($attachment_icon, 15); + } + + color: $attachment_icon; + outline: none; + } + } + + &-download { + color: #a2a2a2; + float: right; + margin-top: 5px; + } + } + } +} diff --git a/web-ui/app/templates/mails/full_view.hbs b/web-ui/app/templates/mails/full_view.hbs index 3ff109e9..0bc9d999 100644 --- a/web-ui/app/templates/mails/full_view.hbs +++ b/web-ui/app/templates/mails/full_view.hbs @@ -1,29 +1,25 @@ + -
- -
- - - - -
+
+
+
{{#if signatureStatus}} {{t signatureStatus }} - {{/if}} - {{#if encryptionStatus}} + {{/if}} {{#if encryptionStatus}} {{t encryptionStatus }} {{/if}}
-
- + +
+ {{#if header.from }} {{ header.from }} {{else}} @@ -33,52 +29,55 @@ {{{formatRecipients header}}}
-
- {{ formatDate header.date }} + +
+ {{ formatDate header.date }}
-
-

- {{ header.subject }} -
-
    - - {{#each tags }} -
  • {{ this }}
    • - {{/each }} +
    -
  • - -
    • -
  • - -
    • -
-
-

- +
+

{{ header.subject }}

-
+ + +
+
    + + {{#each tags }} +
  • {{ this }}
    • + {{/each }} + +
  • + +
    • + +
  • + +
    • +
+
-
- -
+ {{#if attachments}} -
-
-

{{ attachments.length }} attachment(s):

- +
+ +
+

{{ attachments.length }} attachment(s):

+
-
{{/if}}
+ diff --git a/web-ui/app/templates/mails/mail_actions.hbs b/web-ui/app/templates/mails/mail_actions.hbs index 94b79ab9..0b717373 100644 --- a/web-ui/app/templates/mails/mail_actions.hbs +++ b/web-ui/app/templates/mails/mail_actions.hbs @@ -1,6 +1,6 @@ - - -
    -
  • {{t 'Reply to All'}}
    • -
  • {{t 'Delete this message'}}
    • + + +
      +
    • {{t 'Reply to All'}}
      • +
    • {{t 'Delete this message'}}
    diff --git a/web-ui/test/spec/mail_view/ui/mail_view.spec.js b/web-ui/test/spec/mail_view/ui/mail_view.spec.js index 9f1114a7..29be6c2d 100644 --- a/web-ui/test/spec/mail_view/ui/mail_view.spec.js +++ b/web-ui/test/spec/mail_view/ui/mail_view.spec.js @@ -281,7 +281,7 @@ describeComponent('mail_view/ui/mail_view', function () { this.component.displayMail({}, withAttachments); - var attachmentLink = $(this.component.$node.find('.attachmentsArea li').html()); + var attachmentLink = $(this.component.$node.find('.mail-read-view__attachments-item').html()); var expectedLink = '/attachment/912ec803b2ce49e4a541068d495ab570?content_type=text/plain&encoding=base64&filename=filename.txt'; expect(attachmentLink.attr('href')) .toBe(expectedLink); }); -- cgit v1.2.3