Issue #649: Refactor Tags

1 files changed, 94 insertions, 62 deletions

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;
+        }
     }
 }