Fix query page header

client/app/assets/less/redash/query.less

@@ -221,14 +221,20 @@ edit-in-place p.editable:hover {
 }
 
 .page-header--new {
-  .label-default {
-    margin-right: 3px;
+  .query-tags,
+  .query-tags__mobile {
+    .label-default,
+    .label-warning {
+      margin-right: 3px;
+    }
   }
 }
 
 .page-header--query {
   .page-title {
     display: block;
+    margin-left: 15px;
+    margin-right: 15px;
   }
 }
 
@@ -520,9 +526,41 @@ nav .rg-bottom {
   }
 }
 
+.query-tags {
+  display: inline-block;
+  vertical-align: middle;
+  margin-top: -3px; // padding-top of tags
+}
+
+.query-tags__mobile {
+  display: none;
+  margin: -5px 0 0 0;
+  padding: 0 0 0 23px;
+}
+
 // Smaller screens
 
 @media (max-width: 880px) {
+  .page-header--query {
+    .page-title {
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  .query-tags:not(.query-tags__empty) {
+    display: none;
+  }
+
+  .query-tags__mobile:not(.query-tags__empty) {
+    display: block;
+  }
+
+  .btn--showhide,
+  .query-actions-menu .dropdown-toggle {
+    margin-bottom: 5px;
+  }
+
   .btn-publish {
     display: none;
   }
@@ -562,6 +600,11 @@ nav .rg-bottom {
       }
     }
 
+    .query-visualizations-wrapper {
+      margin-left: -15px;
+      margin-right: -15px;
+    }
+
     main {
       flex-direction: column-reverse;
 
@@ -610,17 +653,6 @@ nav .rg-bottom {
   }
 }
 
-
-@media (max-width: 438px) {
-  .btn--showhide {
-    margin-bottom: 5px;
-  }
-
-  .btn-publish {
-    margin-bottom: 5px;
-  }
-}
-
 @media (max-width: 768px) {
   .editor__left__schema, .editor__left__data-source {
     display: none;

client/app/assets/less/redash/redash-newstyle.less

@@ -1,3 +1,5 @@
+@import (reference, less) '~bootstrap/less/labels.less';
+
 // Variables
 @redash-gray: rgba(102, 136, 153, 1);
 @redash-orange: rgba(255, 120, 100, 1);
@@ -449,15 +451,22 @@ page-header, .page-header--new {
   background: fade(@redash-gray, 85%);
 }
 
-.label-default-unpublished {
+.label-tag-unpublished {
   background: fade(@redash-gray, 85%);
-  display: inline-block;
-  overflow: hidden;
+}
+
+.label-tag-archived {
+  .label-warning();
 }
 
 .label-tag {
   background: fade(@redash-gray, 10%);
   color: fade(@redash-gray, 75%);
+}
+
+.label-tag-unpublished,
+.label-tag-archived,
+.label-tag {
   margin-right: 3px;
   display: inline-block;
   margin-top: 2px;

client/app/components/tags-control/control-template.html

@@ -1,3 +1,4 @@
+<ng-transclude-replace></ng-transclude-replace>
 <span class="label label-tag" ng-repeat="tag in $ctrl.item.tags" title="{{tag}}">{{ tag }}</span
 ><a ng-if="$ctrl.canEdit && $ctrl.item.tags.length == 0" class="label label-tag"
   ng-click="$ctrl.editTags()"><i class="zmdi zmdi-plus"></i> Add tag</a

client/app/components/tags-control/index.js

@@ -1,5 +1,6 @@
 import { isObject, isArray, isFunction, map } from 'lodash';
 
+import './tags-control.less';
 import controlTemplate from './control-template.html';
 import modalTemplate from './modal-template.html';
 
@@ -25,6 +26,7 @@ export default function init(ngModule) {
   });
 
   ngModule.component('tagsControl', {
+    transclude: true,
     template: controlTemplate,
     bindings: {
       item: '=',
@@ -65,4 +67,46 @@ export default function init(ngModule) {
       };
     },
   });
+
+  ngModule.component('queryTagsControl', {
+    template: `
+      <tags-control 
+        item="$ctrl.query" can-edit="$ctrl.canEdit" 
+        get-available-tags="$ctrl.getAvailableTags" on-edit="$ctrl.onEdit()"
+      >
+        <span class="label label-tag-unpublished" ng-if="$ctrl.query.is_draft && !$ctrl.query.is_archived">Unpublished</span
+        ><span class="label label-tag-archived" ng-if="$ctrl.query.is_archived" 
+          uib-popover="This query is archived and can't be used in dashboards, and won't appear in search results."
+          popover-placement="right" popover-trigger="'mouseenter'">Archived</span
+        >  
+      </tags-control>
+    `,
+    bindings: {
+      query: '=',
+      canEdit: '<',
+      getAvailableTags: '<',
+      onEdit: '&',
+    },
+  });
+
+  ngModule.component('dashboardTagsControl', {
+    template: `
+      <tags-control 
+        item="$ctrl.dashboard" can-edit="$ctrl.canEdit" 
+        get-available-tags="$ctrl.getAvailableTags" on-edit="$ctrl.onEdit()"
+      >
+        <span class="label label-tag-unpublished" ng-if="$ctrl.dashboard.is_draft && !$ctrl.dashboard.is_archived">Unpublished</span
+        ><span class="label label-tag-archived" ng-if="$ctrl.dashboard.is_archived" 
+          uib-popover="This dashboard is archived and and won't appear in the dashboards list or search results."
+          popover-placement="right" popover-trigger="'mouseenter'">Archived</span
+        >  
+      </tags-control>
+    `,
+    bindings: {
+      dashboard: '=',
+      canEdit: '<',
+      getAvailableTags: '<',
+      onEdit: '&',
+    },
+  });
 }

client/app/components/tags-control/tags-control.less

@@ -0,0 +1,7 @@
+tags-control {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: stretch;
+  justify-content: flex-start;
+}

client/app/components/transclude-replace.js

@@ -0,0 +1,23 @@
+export default function init(ngModule) {
+  ngModule.directive('ngTranscludeReplace', $log => ({
+    terminal: true,
+    restrict: 'EA',
+    link: ($scope, $element, $attr, ctrl, transclude) => {
+      if (!transclude) {
+        $log.error(
+          'orphan',
+          'Illegal use of ngTranscludeReplace directive in the template! ' +
+          'No parent directive that requires a transclusion found.',
+        );
+        return;
+      }
+      transclude((clone) => {
+        if (clone.length) {
+          $element.replaceWith(clone);
+        } else {
+          $element.remove();
+        }
+      });
+    },
+  }));
+}

client/app/pages/dashboards/dashboard-list.html

@@ -77,9 +77,7 @@
                 <a href="dashboard/{{ dashboard.slug }}">
                   {{ dashboard.name }}
                 </a>
-                <br>
-                <span class="label label-default" ng-if="dashboard.is_draft">Unpublished</span>
-                <tags-control item="dashboard"></tags-control>
+                <dashboard-tags-control class="d-block" dashboard="dashboard"></dashboard-tags-control>
               </td>
               <td class="p-r-0">
                 <img ng-src="{{ dashboard.user.profile_image_url }}" class="profile__image_thumb" title="Created by {{ dashboard.user.name }}"

client/app/pages/dashboards/dashboard.html

@@ -5,10 +5,8 @@
       <h3>
         <edit-in-place class="edit-in-place" is-editable="$ctrl.layoutEditing" on-done="$ctrl.saveName" ignore-blanks="true" value="$ctrl.dashboard.name" editor="'input'"></edit-in-place>
       </h3>
-      <span class="label label-default" ng-if="$ctrl.dashboard.is_draft && !$ctrl.dashboard.is_archived">Unpublished</span>
-      <span class="label label-warning" ng-if="$ctrl.dashboard.is_archived" uib-popover="This dashboard is archived and and won't appear in the dashboards list or search results." popover-placement="right" popover-trigger="'mouseenter'">Archived</span>
-      <tags-control class="hidden-xs" item="$ctrl.dashboard" can-edit="$ctrl.isDashboardOwner"
-        get-available-tags="$ctrl.loadTags" on-edit="$ctrl.saveTags()"></tags-control>
+      <dashboard-tags-control class="hidden-xs" dashboard="$ctrl.dashboard" can-edit="$ctrl.isDashboardOwner"
+        get-available-tags="$ctrl.loadTags" on-edit="$ctrl.saveTags()"></dashboard-tags-control>
     </div>
     <div class="col-xs-4 col-sm-5 col-lg-5 text-right dashboard__control p-r-0">
       <span ng-if="!$ctrl.dashboard.is_archived && !public" class="hidden-print">

client/app/pages/queries-list/queries-list.html

@@ -95,11 +95,7 @@
               </td>
               <td class="table-main-title">
                 <a href="queries/{{query.id}}">{{query.name}}</a>
-                <br>
-
-                <span>
-                  <span class="label label-default-unpublished" ng-if="query.is_draft">Unpublished</span> <tags-control item="query"></tags-control>
-                </span>
+                <query-tags-control class="d-block" query="query"></query-tags-control>
               </td>
               <td class="p-r-0">
                 <img ng-src="{{query.user.profile_image_url}}" class="profile__image_thumb" title="Created by {{query.user.name}}" />

client/app/pages/queries/query.html

@@ -23,7 +23,12 @@
         <div class="d-flex flex-nowrap align-items-center">
           <favorites-control ng-if="!query.isNew()" item="query"></favorites-control>
           <h3>
-            <edit-in-place is-editable="canEdit" on-done="saveName" ignore-blanks="true" value="query.name" editor="'input'"></edit-in-place>
+            <edit-in-place class="m-r-5" is-editable="canEdit" on-done="saveName"
+              ignore-blanks="true" value="query.name" editor="'input'"></edit-in-place>
+            <query-tags-control
+              class="query-tags" ng-class="{'query-tags__empty': query.tags.length == 0}"
+              query="query" can-edit="isQueryOwner"
+              get-available-tags="loadTags" on-edit="saveTags()"></query-tags-control>
           </h3>
 
           <span class="flex-fill">&nbsp;</span>
@@ -42,7 +47,7 @@ <h3>
               </a>
             </span>
 
-            <div ng-if="query.id != undefined" class="btn-group" role="group" uib-dropdown>
+            <div ng-if="query.id != undefined" class="btn-group query-actions-menu" role="group" uib-dropdown>
               <button class="btn btn-default dropdown-toggle hidden-xs" uib-dropdown-toggle>
                 <span class="zmdi zmdi-more"></span>
               </button>
@@ -68,12 +73,10 @@ <h3>
             </div>
           </div>
         </div>
-        <div style="padding-left: 23px; margin-top: -5px;">
-          <span class="label label-default" ng-if="query.is_draft && !query.is_archived">Unpublished</span>
-          <span class="label label-warning" ng-if="query.is_archived" uib-popover="This query is archived and can't be used in dashboards, and won't appear in search results."
-            popover-placement="right" popover-trigger="'mouseenter'">Archived</span>
-          <tags-control item="query" can-edit="isQueryOwner" get-available-tags="loadTags" on-edit="saveTags()"></tags-control>
-        </div>
+        <query-tags-control
+          class="query-tags__mobile" ng-class="{'query-tags__empty': query.tags.length == 0}"
+          query="query" can-edit="isQueryOwner"
+          get-available-tags="loadTags" on-edit="saveTags()"></query-tags-control>
       </div>
     </div>
   </div>
@@ -185,7 +188,7 @@ <h3>
             </div>
           </div>
 
-          <section class="flex-fill p-relative t-body">
+          <section class="flex-fill p-relative t-body query-visualizations-wrapper">
             <div class="d-flex flex-column p-b-15 p-absolute static-position__mobile" style="left: 0; top: 0; right: 0; bottom: 0;">
               <div class="p-t-15 p-b-5" ng-if="query.getParametersDefs().length > 0">
                 <parameters parameters="query.getParametersDefs()" sync-values="!query.isNew()" editable="sourceMode && canEdit"></parameters>