Merge pull request #4128 from PaulAdamDavis/fix-tags-input

Rewrite publish bar markup

core/client/assets/sass/layouts/editor.scss

@@ -433,14 +433,6 @@ body.zen {
     }
 
     .post-settings {
-        @include icon($i-settings, 14px);
-        display: inline-block;
-        padding: 0 10px;
-        color: $midgrey;
-        transition: all 0.15s ease-out 0s;
-        position: relative;
-        top: 1px;
-
         &:hover,
         &.active {
             color: $lightgrey;
@@ -454,7 +446,7 @@ body.zen {
     }
 
     .splitbtn {
-        margin-top: 5px;
+        margin-top: -2px;
 
         .btn {
             border-top: rgba(255,255,255,0.3) 1px solid;
@@ -495,69 +487,6 @@ body.zen {
 }
 
 #entry-tags {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    text-transform: none;
-    padding: 10px 0 0 0;
-
-    &:after {
-        content: "";
-        position: fixed;
-        top: 10px;
-        right: 220px;
-        width: 20px;
-        height: 26px;
-        background: linear-gradient(left, rgba(26, 28, 29, 0.00), rgba(26, 28, 29, 1.00));
-        z-index: 9999;
-        pointer-events: none;
-
-        @media (max-width: 400px) {
-            right: 200px;
-        }
-    }
-
-    .tags {
-        position: relative;
-        display: inline-block;
-        vertical-align: middle;
-        width: auto;
-        max-width: 80%;
-        max-width: calc(100% - 250px);
-        height: 22px;
-        padding-left: 5px;
-        padding-bottom: 20px;
-        overflow-x: auto;
-        overflow-y: hidden;
-        -webkit-overflow-scrolling: touch;
-        white-space: nowrap;
-        transition: width 0.2s linear;
-
-        @media (max-width: 400px) {
-            display: block;
-            max-width: calc(100% - 230px);
-            padding-bottom: 0;
-        }
-    }
-
-    .tag-label {
-        display: block;
-        float: left;
-        @include icon($i-tag);
-        padding: 1px 8px 0 8px;
-        transition: all 0.15s ease-out 0s;
-
-        &:hover {
-            cursor: pointer;
-            color: $lightgrey;
-        }
-
-        &.touch {
-            color: inherit;
-        }
-    }
 
     input[type="text"].tag-input {
         display: inline-block;
@@ -567,18 +496,10 @@ body.zen {
         background: transparent;
         border: none;
 
-        width: 150px;
+        width: 100%;
-        margin-top: -8px;
         line-height: 1;
         padding: 9px;
 
-        @media (max-width: 400px) {
-            position: absolute;
-            top: 11px;
-            right: 170px;
-            width: 20px;
-        }
-
         &:focus {
             outline: none;
         }
@@ -615,21 +536,24 @@ body.zen {
 }
 
 .suggestions {
-    //@extend .dropdown-menu;
+    
-    bottom: 100%;
+    top: auto;
+    bottom: calc(100% + 15px);
 
-    li.selected{
+    li.selected {
-        background: $blue;
+        &, a {
-        box-shadow: rgba(255,255,255,0.2) 0 1px 0 inset, rgba(0,0,0,0.5) 0 1px 5px;
+            text-decoration: none;
+            color: #fff;
+            background: $blue;
+        }
+        mark {
+            color: #fff;
+        }
     }
 
-    li a {
+    mark {
-        padding-left: 25px;
-    }
-
-    mark{
         background: none;
-        color: white;
+        color: #000;
         font-weight: bold;
     }
 
@@ -652,23 +576,19 @@ body.zen {
 }
 
 #entry-actions {
-    position: relative;
     margin-right: 6px;
-
+    position: relative;
     .dropdown {
         position: absolute;
-        right: 0;
         bottom: 49px;
-
+        right: 0;
         .dropdown-menu {
             top: auto;
+            left: auto;
             right: 100%;
             bottom: 100%;
-            left: auto;
         }
-
     }
-
 }
 
 #entry-actions-menu {
@@ -677,17 +597,101 @@ body.zen {
     right: -5px;
 }
 
+.tags-wrapper {
+    white-space: nowrap;
+    span {
+        display: inline-block;
+        margin-right: 10px;
+    }
+}
+
+.tag-label {
+    display: block;
+    width: 40px;
+    height: 40px;
+    position: relative;
+    &:before {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translateX(-50%) translateY(-50%);
+        font-size: 1.3rem;
+        color: #7D878A;
+        transition: color 0.15s linear;
+    }
+    &:hover:before {
+        color: #fff;
+    }
+}//.tag-label
+
+.publish-bar-inner {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-content: space-between;
+
+    align-items: center;
+    justify-content: center;
+
+    height: 100%;
+    width: 100%;
+}
+
+.publish-bar-tags-icon {
+    flex: 0 1 auto;
+    align-self: auto;
+    min-width: 40px;
+    max-width: 40px;
+}
+
+.publish-bar-tags {
+    flex: 0 1 auto;
+    align-self: auto;
+    margin-right: 10px;
+    position: relative;
+
+    .tags-wrapper {
+        white-space: nowrap;
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+        padding-top: 8px;
+        padding-bottom: 9px;
+    }
+
+    &:after {
+        content: "";
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 30px;
+        background: linear-gradient(to right, transparent 0%, darken($darkgrey, 4%) 100%);
+        pointer-events: none;
+    }
+
+}//.publish-bar-2
+
+.publish-bar-tags-input {
+    flex: 1 1 auto;
+    align-self: auto;
+    position: relative;
+}
+
+.publish-bar-actions {
+    flex: 0 1 auto;
+    align-self: auto;
+    min-width: 174px;
+    max-width: 174px;
+    text-align: right;
+}
+
+
 //
 // Post Settings Menu
 // --------------------------------------------------
 
  body.right-outlet-expanded {
 
-     // Keep settings cog highlighted when menu is open
-     .post-settings:before {
-         color: $lightgrey;
-     }
-
     .editor-cover {
         position: absolute;
         top: 0;
@@ -697,9 +701,34 @@ body.zen {
         z-index: 600;
         transition: transform $side-outlet-transition-duration cubic-bezier(0.1, 0.7, 0.1, 1);
         transform: translate3d(-350px, 0px, 0px); // Not off the screen, to give a parallax effect
+    }//.editor-cover
+}//body.right-outlet-expanded
+
+.post-settings {
+    @include icon($i-settings, 14px);
+    display: inline-block;
+    padding: 10px;
+    color: $midgrey;
+    transition: all 0.15s ease-out 0s;
+    position: relative;
+    top: 1px;
+
+    &:hover,
+    &.active {
+        color: $darkgrey;
+    }
+} // .post-settings
+
+.post-settings-menu {
+
+    .dropdown-menu {
+        top: auto;
+        bottom: 100%;
+        left: auto;
+        right: 100%;
     }
 
-}
+} // .post-settings-menu
 
 
 //
@@ -721,4 +750,4 @@ body.zen {
     th {
         text-align: left;
     }
-}
+}

core/client/templates/-publish-bar.hbs

@@ -1,9 +1,13 @@
 <footer id="publish-bar">
-    {{render 'post-tags-input'}}
 
-    <div class="right">
+    <div class="publish-bar-inner">
-        <button type="button" class='post-settings' {{action "toggleRightOutlet"}}></button>
 
-        {{view "editor-save-button" id="entry-actions"}}
+        {{render 'post-tags-input'}}
+
+        <div class="publish-bar-actions">
+            <button type="button" class='post-settings' {{action "toggleRightOutlet"}}></button>
+            {{view "editor-save-button" id="entry-actions"}}
+        </div>
     </div>
+
 </footer>

core/client/templates/post-tags-input.hbs

@@ -1,17 +1,25 @@
-<label class="tag-label" for="tags" title="Tags"><span class="hidden">Tags</span></label>
+<div class="publish-bar-tags-icon">
-<div class="tags">
+    <label class="tag-label icon-tag" for="tags" title="Tags">
-{{#each controller.tags}}
+        <span class="hidden">Tags</span>
-    {{#view view.tagView tag=this}}
+    </label>
-        {{view.tag.name}}
-    {{/view}}
-{{/each}}
 </div>
-<input type="hidden" class="tags-holder" id="tags-holder">
+<div class="publish-bar-tags">
-{{view view.tagInputView class="tag-input" id="tags" value=newTagText}}
+    <div class="tags-wrapper tags">
-<ul class="suggestions overlay" {{bind-attr style=view.overlayStyles}}>
+        {{#each controller.tags}}
-  {{#each suggestions}}
+            {{#view view.tagView tag=this}}
-    {{#view view.suggestionView suggestion=this}}
+                {{view.tag.name}}
-        <a href="javascript:void(0);">{{view.suggestion.highlightedName}}</a>
+            {{/view}}
-    {{/view}}
+        {{/each}}
-  {{/each}}
+    </div>
-</ul>
+</div>
+<div class="publish-bar-tags-input">
+    <input type="hidden" class="tags-holder" id="tags-holder">
+    {{view view.tagInputView class="tag-input" id="tags" value=newTagText}}
+    <ul class="suggestions dropdown-menu dropdown-triangle-bottom" {{bind-attr style=view.overlayStyles}}>
+        {{#each suggestions}}
+            {{#view view.suggestionView suggestion=this}}
+                <a href="javascript:void(0);">{{view.suggestion.highlightedName}}</a>
+            {{/view}}
+        {{/each}}
+    </ul>
+</div>

core/client/views/post-tags-input.js

@@ -1,7 +1,7 @@
 var PostTagsInputView = Ember.View.extend({
     tagName: 'section',
     elementId: 'entry-tags',
-    classNames: 'left',
+    classNames: 'publish-bar-inner',
 
     templateName: 'post-tags-input',