Close #1453: more minimal notification of draft status for query/dashboard

client/app/assets/css/redash.css

@@ -312,7 +312,7 @@ to add those CSS styles here. */
 }
 
 .rd-form-control {
-  width: 100%;
+  width: 90%;
 }
 
 pivot-table-renderer > table, grid-renderer > div, visualization-renderer > div {

client/app/pages/dashboards/dashboard.html

@@ -1,56 +1,59 @@
 <div class="container">
-  <page-header title="{{$ctrl.dashboard.name}}">
+  <div class="row bg-white p-10 p-l-15 p-r-15 m-b-10">
-    <span ng-if="!$ctrl.dashboard.is_archived && !public" class="hidden-print">
+    <div class="col-sm-9">
-        <div class="btn-group" uib-dropdown>
+      <h3>{{$ctrl.dashboard.name}} <span class="label label-warning" ng-if="$ctrl.dashboard.is_draft">Draft</span></h3>
-          <button id="split-button" type="button"
-          ng-class="{'btn-default': $ctrl.refreshRate === null,'btn-primary':$ctrl.refreshRate !== null}"
-          class="btn" ng-click="$ctrl.loadDashboard(true)">
-            {{$ctrl.refreshRate === null ? 'Refresh' : $ctrl.refreshRate.name}}
-          </button>
-          <button type="button" class="btn" uib-dropdown-toggle
-          ng-class="{'btn-default': $ctrl.refreshRate === null,'btn-primary':$ctrl.refreshRate !== null}">
-            <span class="caret"></span>
-            <span class="sr-only">Split button!</span>
-          </button>
-          <ul class="dropdown-menu" ng-model="$ctrl.refreshRate" uib-dropdown-menu role="menu" aria-labelledby="split-button">
-            <li role="menuitem" ng-repeat="refreshRate in $ctrl.refreshRates">
-              <a href="#" ng-click="$ctrl.setRefreshRate(refreshRate)">{{refreshRate.name}}</a>
-            </li>
-            <li role="menuitem" ng-if="$ctrl.refreshRate !== null">
-              <a href="#" ng-click="$ctrl.setRefreshRate(null)">Stop auto refresh</a>
-            </li>
-          </ul>
-        </div>
-        <button type="button" class="btn btn-sm" ng-class="{'btn-default': !$ctrl.isFullscreen, 'btn-primary': $ctrl.isFullscreen}" tooltip="Enable/Disable Fullscreen display" ng-click="$ctrl.toggleFullscreen()">
-          <span class="zmdi zmdi-fullscreen"></span>
-        </button>
-        <button type="button" class="btn btn-sm" ng-class="{'btn-default': !$ctrl.dashboard.publicAccessEnabled, 'btn-primary': $ctrl.dashboard.publicAccessEnabled}" tooltip="Enable/Disable Share URL" ng-click="$ctrl.openShareForm()" ng-if="$ctrl.dashboard.canEdit() || $ctrl.dashboard.publicAccessEnabled">
-          <span class="zmdi zmdi-share"></span>
-        </button>
-    </span>
-    <div class="btn-group hidden-print" role="group" ng-show="$ctrl.dashboard.canEdit()" uib-dropdown>
-      <button class="btn btn-default btn-sm dropdown-toggle" uib-dropdown-toggle>
-        <span class="zmdi zmdi-more"></span>
-      </button>
-      <ul class="dropdown-menu pull-right" uib-dropdown-menu>
-        <li ng-if="!$ctrl.dashboard.is_archived"><a ng-click="$ctrl.editDashboard()">Edit Dashboard</a></li>
-        <li ng-if="!$ctrl.dashboard.is_archived"><a ng-click="$ctrl.addWidget()">Add Widget</a></li>
-        <li ng-if="$ctrl.showPermissionsControl"><a ng-click="$ctrl.showManagePermissionsModal()">Manage Permissions</a></li>
-        <li ng-if="!$ctrl.dashboard.is_draft"><a ng-click="$ctrl.togglePublished()">Unpublish Dashboard</a></li>
-        <li ng-if="$ctrl.dashboard.is_draft"><a ng-click="$ctrl.togglePublished()">Publish Dashboard</a></li>
-        <li ng-if="!$ctrl.dashboard.is_archived"><a ng-click="$ctrl.archiveDashboard()">Archive Dashboard</a></li>
-      </ul>
     </div>
-  </page-header>
+    <div class="col-sm-3 text-right">
+      <h3>
+        <span ng-if="!$ctrl.dashboard.is_archived && !public" class="hidden-print">
+            <div class="btn-group" uib-dropdown>
+              <button id="split-button" type="button"
+                      ng-class="{'btn-default': $ctrl.refreshRate === null,'btn-primary':$ctrl.refreshRate !== null}"
+                      class="btn" ng-click="$ctrl.loadDashboard(true)">
+                {{$ctrl.refreshRate === null ? 'Refresh' : $ctrl.refreshRate.name}}
+              </button>
+              <button type="button" class="btn" uib-dropdown-toggle
+                      ng-class="{'btn-default': $ctrl.refreshRate === null,'btn-primary':$ctrl.refreshRate !== null}">
+                <span class="caret"></span>
+                <span class="sr-only">Split button!</span>
+              </button>
+              <ul class="dropdown-menu" ng-model="$ctrl.refreshRate" uib-dropdown-menu role="menu" aria-labelledby="split-button">
+                <li role="menuitem" ng-repeat="refreshRate in $ctrl.refreshRates">
+                  <a href="#" ng-click="$ctrl.setRefreshRate(refreshRate)">{{refreshRate.name}}</a>
+                </li>
+                <li role="menuitem" ng-if="$ctrl.refreshRate !== null">
+                  <a href="#" ng-click="$ctrl.setRefreshRate(null)">Stop auto refresh</a>
+                </li>
+              </ul>
+            </div>
+            <button type="button" class="btn btn-sm" ng-class="{'btn-default': !$ctrl.isFullscreen, 'btn-primary': $ctrl.isFullscreen}" tooltip="Enable/Disable Fullscreen display" ng-click="$ctrl.toggleFullscreen()">
+              <span class="zmdi zmdi-fullscreen"></span>
+            </button>
+            <button type="button" class="btn btn-sm" ng-class="{'btn-default': !$ctrl.dashboard.publicAccessEnabled, 'btn-primary': $ctrl.dashboard.publicAccessEnabled}" tooltip="Enable/Disable Share URL" ng-click="$ctrl.openShareForm()" ng-if="$ctrl.dashboard.canEdit() || $ctrl.dashboard.publicAccessEnabled">
+              <span class="zmdi zmdi-share"></span>
+            </button>
+        </span>
+            <div class="btn-group hidden-print" role="group" ng-show="$ctrl.dashboard.canEdit()" uib-dropdown>
+              <button class="btn btn-default btn-sm dropdown-toggle" uib-dropdown-toggle>
+                <span class="zmdi zmdi-more"></span>
+              </button>
+              <ul class="dropdown-menu pull-right" uib-dropdown-menu>
+                <li ng-if="!$ctrl.dashboard.is_archived"><a ng-click="$ctrl.editDashboard()">Edit Dashboard</a></li>
+                <li ng-if="!$ctrl.dashboard.is_archived"><a ng-click="$ctrl.addWidget()">Add Widget</a></li>
+                <li ng-if="$ctrl.showPermissionsControl"><a ng-click="$ctrl.showManagePermissionsModal()">Manage Permissions</a></li>
+                <li ng-if="!$ctrl.dashboard.is_draft"><a ng-click="$ctrl.togglePublished()">Unpublish Dashboard</a></li>
+                <li ng-if="$ctrl.dashboard.is_draft"><a ng-click="$ctrl.togglePublished()">Publish Dashboard</a></li>
+                <li ng-if="!$ctrl.dashboard.is_archived"><a ng-click="$ctrl.archiveDashboard()">Archive Dashboard</a></li>
+              </ul>
+            </div>
+      </h3>
+    </div>
+  </div>
 
   <div class="col-lg-12 p-5 m-b-10 bg-orange c-white" ng-if="$ctrl.dashboard.is_archived">
     This dashboard is archived and won't appear in the dashboards list or search results.
   </div>
 
-  <div class="col-lg-12 p-5 m-b-10 bg-orange c-white" ng-if="$ctrl.dashboard.is_draft">
-    This dashboard is a draft.
-  </div>
-
   <div class="m-b-5">
     <filters ng-if="$ctrl.dashboard.dashboard_filters_enabled"></filters>
   </div>

client/app/pages/queries/query.html

@@ -21,6 +21,7 @@
     <div class="col-sm-9">
       <h3>
         <edit-in-place editable="canEdit" done="saveName" ignore-blanks="true" value="query.name"></edit-in-place>
+        <span class="label label-warning" ng-if="query.is_draft">Draft</span>
       </h3>
       <p>
         <em>
@@ -77,9 +78,6 @@
     <div class="col-lg-12 p-5 bg-orange c-white" ng-if="query.is_archived">
       This query is archived and can't be used in dashboards, and won't appear in search results.
     </div>
-    <div class="col-lg-12 p-5 bg-orange c-white" ng-if="query.is_draft">
-      This query is a draft.
-    </div>
   </div>
 
   <!-- editor -->