From 626aae40b9407a1b044c33784dfd42dff784ad9c Mon Sep 17 00:00:00 2001 From: Felix Hammerl Date: Mon, 21 Mar 2016 12:09:54 +0100 Subject: Issue #649: Refactor Tags --- web-ui/app/js/mail_view/ui/mail_view.js | 4 +- web-ui/app/scss/_mixins.scss | 25 ---- web-ui/app/scss/_styles.scss | 31 ++--- web-ui/app/scss/mixins/_tags.scss | 156 ++++++++++++++---------- web-ui/app/scss/views/_read-view.scss | 18 +-- web-ui/app/templates/mails/draft.hbs | 2 +- web-ui/app/templates/mails/full_view.hbs | 32 ++--- web-ui/app/templates/mails/sent.hbs | 14 +-- web-ui/app/templates/mails/single.hbs | 14 +-- web-ui/app/templates/mails/trash.hbs | 14 +-- web-ui/test/custom_matchers.js | 4 +- web-ui/test/spec/mail_view/ui/mail_view.spec.js | 3 +- 12 files changed, 147 insertions(+), 170 deletions(-) (limited to 'web-ui') diff --git a/web-ui/app/js/mail_view/ui/mail_view.js b/web-ui/app/js/mail_view/ui/mail_view.js index d952fed7..8295d66d 100644 --- a/web-ui/app/js/mail_view/ui/mail_view.js +++ b/web-ui/app/js/mail_view/ui/mail_view.js @@ -34,10 +34,10 @@ define( function mailView() { this.defaultAttrs({ - tags: '.tag', + tags: '.mail-read-view__header-tags-tag', newTagInput: '#new-tag-input', newTagButton: '#new-tag-button', - addNew: '.add-new', + addNew: '.mail-read-view__header-tags-new-button', trashButton: '#trash-button', archiveButton: '#archive-button', closeMailButton: '.close-mail-button' diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss index b752e8a5..099a216c 100644 --- a/web-ui/app/scss/_mixins.scss +++ b/web-ui/app/scss/_mixins.scss @@ -20,30 +20,6 @@ @include border-radius(2px); } -@mixin tt-hint { - .tt-hint { - color: $medium_light_grey - } - .tt-dropdown-menu { - width: 400px; - margin-top: 6px; - padding: 8px 0; - background-color: $contrast; - border: 1px solid darken($contrast, 5%); - } - .tt-suggestion { - padding: 3px 10px; - font-size: 18px; - line-height: 24px; - &.tt-cursor { - background-color: $white; - } - p { - margin: 0; - } - } -} - // FORM MIXINS @mixin check-box { background-color: $white; @@ -277,5 +253,4 @@ } } -@include tt-hint; @include logo; diff --git a/web-ui/app/scss/_styles.scss b/web-ui/app/scss/_styles.scss index 98c70c68..b4ffbd75 100644 --- a/web-ui/app/scss/_styles.scss +++ b/web-ui/app/scss/_styles.scss @@ -132,7 +132,6 @@ ul#mail-list { clear: both; li { - height: 66px; position: relative; padding: 8px 10px 10px 10px; background: $contrast; @@ -159,36 +158,28 @@ width: 106%; } } - .subject-and-tags { + + .subject { display: block; width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - @include tags; - ul.tags { - display: block; - line-height: 1.2; - margin: -3px 0 0 0; - li { - font-size: 0.6rem; - background-color: lighten($action_buttons, 12); - color: white; - display: inline-block; - height: auto; - font-weight: 400; - border: none; - &.tag:hover { - text-decoration: none; - } - } - } 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; diff --git a/web-ui/app/scss/mixins/_tags.scss b/web-ui/app/scss/mixins/_tags.scss index c018156a..fcb4a280 100644 --- a/web-ui/app/scss/mixins/_tags.scss +++ b/web-ui/app/scss/mixins/_tags.scss @@ -1,78 +1,110 @@ +$tags-font-size: 0.6rem; + @mixin tags { - i.tags-label { + & > * { + display: inline; + } + + &-tag { + font-size: $tags-font-size; + font-weight: normal; + background-color: lighten($action_buttons, 12); + color: white; + padding: 2px 3px; + margin: 0 1px; + border-radius: 2px; + } +} + +@mixin tags-editable { + @include tags; + + &-tag:hover { + text-decoration: line-through; + cursor: pointer; + position: relative; + + &:before { + @include tooltip(130%, 25%); + + content: "click to remove"; + text-transform: lowercase; + } + } + + &-label { vertical-align: bottom; - font-size: medium; color: $light_gray; } - ul.tags { - margin-bottom: 0; + &-new-button { + font-size: $tags-font-size; + padding: 0; + background: transparent; + border-radius: 2px; + padding: 2px; - li { - font-size: 0.6rem; - background-color: lighten($action_buttons, 12); - color: white; - display: inline; - padding: 2px 3px; - margin: 0 1px; - position: relative; + &:hover { + opacity: 1; + background: $lighter_gray; + } + } - @include border-radius(2px); + &-name-input { + opacity: 0.6; + transition: background-color 150ms ease-out; - &[data-tag="drafts"] { - color: $attention; - background: $contrast; - } + &:hover { + opacity: 1; + } - &.tag:hover { - text-decoration: line-through; - cursor: pointer; - } + // twitter typeahead classes. those are set via JS, with relatively high specificity, + // hence box-model-related properties are repeated + // https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#class-names + + $suggestion-border: 1px solid darken($contrast, 5%); + $input-field-padding: 1px 5px; + $input-field-margin: 2px; - &.add-new { - opacity: 0.6; - transition: background-color 150ms ease-out; - background: transparent; - border: 1px solid $lighter_gray; - line-height: 0; - padding: 1px 2px; - margin-left: -5px; - - @include border-radius(2px); - - &:hover { - opacity: 1; - background: $lighter_gray; - } - - i { - &:before { - vertical-align: middle; - font-size: smaller; - } - } + & * .tt-input { + border-radius: $input-field-margin; + padding: $input-field-padding; + margin-top: 2px; + font-size: $tags-font-size; + } + + & * .tt-hint { + color: $medium_light_grey; + padding: $input-field-padding; + margin-top: $input-field-margin; + font-size: $tags-font-size; + background: transparent; + } + + & * .tt-dropdown-menu { + min-width: 250px; + padding: 0; + font-size: $tags-font-size; + background-color: $contrast; + border: $suggestion-border; + } + + & * .tt-suggestion { + padding: 5px 10px; + font-size: $tags-font-size; + border-bottom: $suggestion-border; + + &:last-child { + border-bottom: none; } - &.new-tag { - font-size: 0.7em; - display: inline-block; - padding: 0; - background: transparent; - - input { - display: inline; - font-size: 1em; - padding: 1px 5px; - width: 120px; - margin: 0; - } - - @include tt-hint; - - .tt-dropdown-menu { - width: 250px; - } + p { + margin: 0; } } + + & * .tt-cursor { + background-color: $white; + } } } diff --git a/web-ui/app/scss/views/_read-view.scss b/web-ui/app/scss/views/_read-view.scss index 7a797909..25aaf92e 100644 --- a/web-ui/app/scss/views/_read-view.scss +++ b/web-ui/app/scss/views/_read-view.scss @@ -113,24 +113,10 @@ } &-tags { + @include tags-editable; + 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); - } - } - } } } diff --git a/web-ui/app/templates/mails/draft.hbs b/web-ui/app/templates/mails/draft.hbs index 82533ac4..675f1481 100644 --- a/web-ui/app/templates/mails/draft.hbs +++ b/web-ui/app/templates/mails/draft.hbs @@ -19,7 +19,7 @@ {{t 'no_recipient'}} {{/if}} -
+
{{#if header.subject }} {{header.subject}} diff --git a/web-ui/app/templates/mails/full_view.hbs b/web-ui/app/templates/mails/full_view.hbs index 0bc9d999..4c0863de 100644 --- a/web-ui/app/templates/mails/full_view.hbs +++ b/web-ui/app/templates/mails/full_view.hbs @@ -42,24 +42,24 @@ -
-
    - - {{#each tags }} -
  • {{ this }}
    • - {{/each }} +
      +
    • + +
      • -
    • - -
      • + {{#each tags }} +
    • {{ this }}
      • + {{/each }} -
    • - -
      • -
    -
+
  • + +
    • + +
  • + +
    • + diff --git a/web-ui/app/templates/mails/sent.hbs b/web-ui/app/templates/mails/sent.hbs index b3cf110f..86b6e607 100644 --- a/web-ui/app/templates/mails/sent.hbs +++ b/web-ui/app/templates/mails/sent.hbs @@ -19,19 +19,17 @@ {{t 'no_recipient'}} {{/if}}
    -
    +
    {{#if header.subject }} {{header.subject}} {{else}} {{t 'no_subject'}} {{/if}}
    -
    -
      - {{#each tagsForListView }} -
    • {{ this }}
      • - {{/each }} -
    -
    +
      + {{#each tagsForListView }} +
    • {{ this }}
      • + {{/each }} +
    diff --git a/web-ui/app/templates/mails/single.hbs b/web-ui/app/templates/mails/single.hbs index 47d600fb..95f9adb7 100644 --- a/web-ui/app/templates/mails/single.hbs +++ b/web-ui/app/templates/mails/single.hbs @@ -11,15 +11,13 @@ {{/if}}
    {{#if header.from }}{{ header.from }}{{else}}{{t "you"}}{{/if}}
    -
    +
    {{ header.subject }}
    -
    -
      - {{#each tagsForListView }} -
    • {{ this }}
      • - {{/each }} -
    -
    +
      + {{#each tagsForListView }} +
    • {{ this }}
      • + {{/each }} +
    diff --git a/web-ui/app/templates/mails/trash.hbs b/web-ui/app/templates/mails/trash.hbs index 4475aeb0..ea8fe07f 100644 --- a/web-ui/app/templates/mails/trash.hbs +++ b/web-ui/app/templates/mails/trash.hbs @@ -11,16 +11,14 @@ {{/if}}
    {{#if header.from }}{{ header.from }}{{else}}{{t "you"}}{{/if}}
    -
    +
    {{ header.subject }}
    -
    -
      - {{#each tagsForListView }} -
    • {{ this }}
      • - {{/each }} -
    -
    +
      + {{#each tagsForListView }} +
    • {{ this }}
      • + {{/each }} +
    diff --git a/web-ui/test/custom_matchers.js b/web-ui/test/custom_matchers.js index b1e06d1f..d68d21a8 100644 --- a/web-ui/test/custom_matchers.js +++ b/web-ui/test/custom_matchers.js @@ -5,8 +5,8 @@ define([], function() { compare: function (mail, node) { var result = {}, equals = {}, subject, tags, from, date, messages = [], notMessages = []; - subject = node.find('#mail-' + mail.ident + ' .subject-and-tags')[0]; - tags = _.map(node.find('#mail-' + mail.ident + ' .subject-and-tags .tag'), function (tag) { return tag.textContent; }); + 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'); 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 29be6c2d..093eddb8 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 @@ -58,9 +58,8 @@ describeComponent('mail_view/ui/mail_view', function () { testData.mail.tags = ['tag', 'other']; this.component.displayMail({}, testData); - var inboxTag = this.component.$node.find('.tag[data-tag="tag"]'); + var inboxTag = this.component.$node.find('.mail-read-view__header-tags-tag[data-tag="tag"]'); inboxTag.html('' + inboxTag.text() + ''); - this.component.$node.find('.search-highlight').click(); expect(updateSpy).toHaveBeenTriggeredOn(document); -- cgit v1.2.3