Issue #649: Refactor Tags

12 files changed, 147 insertions, 170 deletions

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}}
     </div>
-    <div class="subject-and-tags">
+    <div class="subject">
       <i class="fa fa-pencil"></i>
       {{#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 @@
 
         <nav id="mail-actions" class="mail-read-view__header-actions"></nav>
 
-        <div class="mail-read-view__header-tags">
-            <ul class="tags">
-                <i class="tags-label fa fa-tags"></i>
-                {{#each tags }}
-                <li class="tag" data-tag="{{this}}">{{ this }}</li>
-                {{/each }}
+        <ul class="mail-read-view__header-tags">
+            <li class="mail-read-view__header-tags-label">
+                <i class="fa fa-tags"></i>
+            </li>
 
-                <li class="new-tag">
-                    <input type="text" id="new-tag-input" placeholder="{{t 'Press Enter to add tag'}}"
-                    />
-                </li>
+            {{#each tags }}
+                <li class="mail-read-view__header-tags-tag" data-tag="{{this}}">{{ this }}</li>
+            {{/each }}
 
-                <li class="add-new">
-                    <button id="new-tag-button" class="no-style"><i class="fa fa-plus"></i>
-                    </button>
-                </li>
-            </ul>
-        </div>
+            <li class="mail-read-view__header-tags-name-input">
+                <input type="text" id="new-tag-input" placeholder="{{t 'Press Enter to add tag'}}"
+                />
+            </li>
+
+            <li class="mail-read-view__header-tags-new-button">
+                <button id="new-tag-button" class="no-style"><i class="fa fa-plus"></i></button>
+            </li>
+        </ul>
     </header>
 
     <iframe class="mail-read-view__body" id="read-sandbox" sandbox="allow-popups allow-scripts" src="sandbox/sandbox.html" scrolling="no"></iframe>
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}}
       </div>
-      <div class="subject-and-tags">
+      <div class="subject">
           {{#if header.subject }}
               {{header.subject}}
           {{else}}
               {{t 'no_subject'}}
           {{/if}}
       </div>
-      <div class="subject-and-tags">
-          <ul class="tags">
-              {{#each tagsForListView }}
-                  <li class="tag" data-tag="{{this}}">{{ this }}</li>
-              {{/each }}
-          </ul>
-      </div>
+      <ul class="tags">
+          {{#each tagsForListView }}
+              <li class="tags-tag" data-tag="{{this}}">{{ this }}</li>
+          {{/each }}
+      </ul>
   </a>
 </span>
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}}
     </span>
     <div class="from">{{#if header.from }}{{ header.from }}{{else}}{{t "you"}}{{/if}}</div>
-    <div class="subject-and-tags">
+    <div class="subject">
       {{ header.subject }}
     </div>
-    <div class="subject-and-tags">
-      <ul class="tags">
-        {{#each tagsForListView }}
-            <li class="tag" data-tag="{{this}}">{{ this }}</li>
-        {{/each }}
-      </ul>
-    </div>
+    <ul class="tags">
+      {{#each tagsForListView }}
+          <li class="tags-tag" data-tag="{{this}}">{{ this }}</li>
+      {{/each }}
+    </ul>
   </a>
 </span>
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}}
     </span>
     <div class="from">{{#if header.from }}{{ header.from }}{{else}}{{t "you"}}{{/if}}</div>
-    <div class="subject-and-tags">
+    <div class="subject">
       <i class="fa fa-trash-o"></i>
       {{ header.subject }}
     </div>
-    <div class="subject-and-tags">
-      <ul class="tags">
-        {{#each tagsForListView }}
-            <li class="tag" data-tag="{{this}}">{{ this }}</li>
-        {{/each }}
-      </ul>
-    </div>
+    <ul class="tags">
+      {{#each tagsForListView }}
+          <li class="tags-tag" data-tag="{{this}}">{{ this }}</li>
+      {{/each }}
+    </ul>
   </a>
 </span>
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('<em class="search-highlight">' + inboxTag.text() + '</em>');
-
     this.component.$node.find('.search-highlight').click();
 
     expect(updateSpy).toHaveBeenTriggeredOn(document);