ux: add new panel and dash nav improvements

public/app/core/components/PageHeader.tsx

@@ -6,27 +6,6 @@ export interface IProps {
   model: NavModel;
 }
 
-// function BreadcrumbItem(item: NavModelItem) {
-//   return (
-//     <a className="breadcrumb-item" href={item.url} key={item.id}>
-//       {item.text}
-//     </a>
-//   );
-// }
-//
-// function Breadcrumb(model: NavModel) {
-//   return (
-//     <div className="page-nav">
-//       <div className="page-breadcrumbs">
-//         <a className="breadcrumb-item active" href="/">
-//           <i className="fa fa-home" />
-//         </a>
-//         {model.breadcrumbs.map(BreadcrumbItem)}
-//       </div>
-//     </div>
-//   );
-// }
-
 function TabItem(tab: NavModelItem) {
   if (tab.hideFromTabs) {
     return (null);
@@ -84,7 +63,6 @@ export default class PageHeader extends React.Component<IProps, any> {
         <div className="page-container">
           <div className="page-header">
             {this.renderHeaderTitle(this.props.model.main)}
-
             {this.props.model.main.children && <Tabs main={this.props.model.main} />}
           </div>
         </div>

public/app/core/routes/dashboard_loaders.ts

@@ -36,12 +36,11 @@ export class NewDashboardCtrl {
       meta: { canStar: false, canShare: false, isNew: true },
       dashboard: {
         title: "New dashboard",
-        rows: [
+        panels: [
           {
-            title: 'Dashboard Row',
+            type: 'add-panel',
-            height: '350px',
+            gridPos: {x: 0, y: 0, w: 12, h: 9},
-            panels: [],
+            title: 'Panel Title',
-            isNew: true,
           }
         ]
       },

public/app/features/dashboard/dashgrid/AddPanelPanel.tsx

@@ -72,8 +72,18 @@ export class AddPanelPanel extends React.Component<AddPanelPanelProps, AddPanelP
   render() {
     return (
       <div className="panel-container">
-        <div className="add-panel">{this.state.panelPlugins.map(this.renderPanelItem.bind(this))}</div>
+        <div className="add-panel">
+          <div className="add-panel__header">
+            <i className="gicon gicon-add-panel"></i>
+            <span className="add-panel__title">New Panel</span>
+            <span className="add-panel__sub-title">Select a visualization</span>
+          </div>
+          <div className="add-panel__items">
+            {this.state.panelPlugins.map(this.renderPanelItem.bind(this))}
+          </div>
+        </div>
       </div>
     );
   }
 }
+

public/app/features/dashboard/dashnav/dashnav.html

@@ -20,7 +20,7 @@
 
 	<div class="navbar__spacer"></div>
 
-	<div class="navbar-buttons">
+	<div class="navbar-buttons navbar-buttons--actions">
 		<button class="btn navbar-button navbar-button--add-panel" ng-show="::ctrl.dashboard.meta.canSave" bs-tooltip="'Add panel'" data-placement="bottom" ng-click="ctrl.addPanel()">
 			<i class="gicon gicon-add-panel"></i>
 		</button>
@@ -42,7 +42,7 @@
 		</button>
 
 		<div class="dropdown">
-			<button class="btn navbar-button" data-toggle="dropdown">
+			<button class="btn navbar-button" data-toggle="dropdown" bs-tooltip="'Settings'" data-placement="bottom">
 				<i class="fa fa-cog"></i>
 			</button>
 

public/app/features/dashboard/dashnav/dashnav.ts

@@ -150,7 +150,7 @@ export class DashNavCtrl {
       this.dashboard.addPanel({
         type: 'add-panel',
         gridPos: {x: 0, y: 0, w: 12, h: 9},
-        title: 'New Graph',
+        title: 'Panel Title',
       });
     }
 

public/app/features/dashboard/partials/dashboardList.html

@@ -2,7 +2,7 @@
 
 <div class="page-container page-body">
   <div class="page-action-bar">
-    <div class="gf-form">
+    <div class="gf-form gf-form--grow">
       <label class="gf-form-label">Search</label>
       <input type="text" class="gf-form-input max-width-30" placeholder="Find Dashboard by name" tabindex="1" give-focus="true" ng-model="ctrl.query.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.onQueryChange()" />
     </div>

public/app/features/dashboard/timepicker/timepicker.html

@@ -1,13 +1,13 @@
-<div class="navbar-buttons">
+<div class="navbar-buttons navbar-buttons--zoom">
-	<button class="btn navbar-button navbar-button--tight gf-timepicker-time-control" bs-tooltip="'Shift time backward <br> (left arrow key)'" data-placement="bottom" ng-click='ctrl.move(-1)'>
+	<button class="btn navbar-button navbar-button--tight" ng-click='ctrl.move(-1)'>
 		<i class="fa fa-chevron-left"></i>
 	</button>
 
-	<button class="btn navbar-button dashnav-zoom-out gf-timepicker-time-control" bs-tooltip="'Time range zoom out <br> CTRL+Z'" data-placement="bottom" ng-click='ctrl.zoom(2)'>
+	<button class="btn navbar-button" bs-tooltip="'Time range zoom out <br> CTRL+Z'" data-placement="bottom" ng-click='ctrl.zoom(2)'>
 		<i class="fa fa-search-minus"></i>
 	</button>
 
-	<button class="btn navbar-button navbar-button--tight gf-timepicker-time-control" bs-tooltip="'Shift time forward <br> (right arrow key)'" data-placement="bottom" ng-click='ctrl.move(1)'>
+	<button class="btn navbar-button navbar-button--tight" ng-click='ctrl.move(1)'>
 		<i class="fa fa-chevron-right"></i>
 	</button>
 </div>
@@ -20,7 +20,7 @@
 		<span ng-show="ctrl.dashboard.refresh" class="text-warning">&nbsp; Refresh every {{ctrl.dashboard.refresh}}</span>
 	</button>
 
-	<button class="btn navbar-button dashnav-refresh-action" ng-click="ctrl.timeSrv.refreshDashboard()">
+	<button class="btn navbar-button navbar-button--refresh" ng-click="ctrl.timeSrv.refreshDashboard()">
 		<i class="fa fa-refresh"></i>
 	</button>
 </div>

public/app/features/org/partials/change_password.html

@@ -7,9 +7,6 @@
 
 	<div ng-if="ldapEnabled || authProxyEnabled">
 		You cannot change password when ldap or auth proxy authentication is enabled.
-		<br>
-		<br>
-		<a class="btn-text" href="profile">Back to profile</a>
 	</div>
 
 	<form name="userForm" class="gf-form-group" ng-hide="ldapEnabled || authProxyEnabled">

public/app/features/org/partials/user_groups.html

@@ -3,9 +3,9 @@
 <div class="page-container page-body">
 	<div class="page-action-bar">
 
-    <div class="gf-form width-15">
+    <div class="gf-form gf-form--grow">
       <label class="gf-form-label">Search</label>
-      <input type="text" class="gf-form-input" placeholder="Find User Group by name" tabindex="1" give-focus="true"
+      <input type="text" class="gf-form-input max-width-20" placeholder="Find User Group by name" tabindex="1" give-focus="true"
           ng-model="ctrl.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.get()" />
     </div>
 
@@ -13,7 +13,7 @@
 
     <a class="btn btn-success" ng-click="ctrl.openUserGroupModal()">
       <i class="fa fa-plus"></i>
-      Create User Group
+			Add Team
     </a>
   </div>
 

public/app/features/plugins/partials/ds_http_settings.html

@@ -1,7 +1,7 @@
 
 
 <div class="gf-form-group">
-  <h3 class="section-heading">HTTP</h3>
+  <h3 class="page-heading">HTTP</h3>
   <div class="gf-form-group">
     <div class="gf-form-inline">
       <div class="gf-form max-width-30">
@@ -38,7 +38,7 @@
     </div>
   </div>
 
-  <h3 class="section-heading">Auth</h3>
+  <h3 class="page-heading">Auth</h3>
   <div class="gf-form-group">
     <div class="gf-form-inline">
       <gf-form-switch class="gf-form" label="Basic Auth" checked="current.basicAuth" label-class="width-8" switch-class="max-width-6"></gf-form-switch>

public/app/plugins/datasource/graphite/partials/config.html

@@ -3,7 +3,7 @@
 	suggest-url="http://localhost:8080">
 </datasource-http-settings>
 
-<h3 class="section-heading">Graphite details</h3>
+<h3 class="page-heading">Graphite details</h3>
 
 <div class="gf-form-group">
 	<div class="gf-form">

public/sass/_old_responsive.scss

@@ -6,15 +6,22 @@
 // Media queries
 // ---------------------
 
+@include media-breakpoint-down(lg) {
+  .navbar-page-btn {
+    max-width: 290px;
+  }
+  .gf-timepicker-nav-btn {
+    max-width: 240px;
+  }
+}
+
+@include media-breakpoint-down(md) {
+  .navbar-buttons--zoom {
+    display: none;
+  }
+}
+
 @include media-breakpoint-down(sm) {
-  // div.panel {
-  //   width: 100% !important;
-  //   padding: 0px !important;
-  // }
-  // .panel-margin {
-  //   margin-right: 0;
-  //   margin-left: 0;
-  // }
   body {
     padding: 0;
   }
@@ -24,17 +31,7 @@
   .gf-timepicker-nav-btn {
     max-width: 120px;
   }
-  .dashnav-zoom-out,
+  .navbar-buttons--actions {
-  .dashnav-move-timeframe,
-  .dashnav-action-icons {
-    display: none;
-  }
-
-  .page-container {
-    padding: 0 $spacer * 2;
-  }
-
-  .dash-row-menu-container {
     display: none;
   }
 }
@@ -50,50 +47,8 @@
   .page-dashboard .navbar-page-btn {
     max-width: 280px;
   }
+
   .gf-timepicker-nav-btn {
     max-width: 120px;
   }
-
-  .dashnav-move-timeframe {
-    display: none;
-  }
-
-  .panel-in-fullscreen {
-    .dashnav-action-icons {
-      display: none;
-    }
-    .dashnav-back-to-dashboard  {
-      display: block;
-    }
-  }
-}
-
-@include media-breakpoint-up(lg) {
-  .page-dashboard .navbar-page-btn {
-    max-width: 290px;
-  }
-  .gf-timepicker-nav-btn {
-    max-width: 240px;
-  }
-  .dashnav-zoom-out {
-    display: block;
-  }
-  .dashnav-move-timeframe {
-    display: block;
-  }
-}
-
-@include media-breakpoint-up(xl) {
-  .panel-in-fullscreen {
-    .dashnav-action-icons {
-      display: block;
-    }
-  }
-
-  .page-dashboard .navbar-page-btn {
-    max-width: none;
-  }
-  .gf-timepicker-nav-btn {
-    max-width: none;
-  }
 }

public/sass/_variables.dark.scss

@@ -15,7 +15,7 @@ $dark-3:           #262628;
 $dark-4:           #333333;
 $dark-5:           #444444;
 $gray-1:           #555555;
-$gray-2:           #7B7B7B;
+$gray-2:           #8e8e8e;
 $gray-3:           #b3b3b3;
 $gray-4:           #D8D9DA;
 $gray-5:           #ECECEC;

public/sass/_variables.scss

@@ -89,6 +89,7 @@ $font-size-root: 14px !default;
 $font-size-base: 13px !default;
 
 $font-size-lg:   18px !default;
+$font-size-md:   15px !default;
 $font-size-sm:   11px !default;
 $font-size-xs:   9px !default;
 
@@ -197,8 +198,8 @@ $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www
 // Used for a bird's eye view of components dependent on the z-axis
 // Try to avoid customizing these :)
 $zindex-dropdown:          1000;
-$zindex-tooltip:           1020;
+$zindex-navbar-fixed:      1020;
-$zindex-navbar-fixed:      1030;
+$zindex-tooltip:           1030;
 $zindex-modal-backdrop:    1040;
 $zindex-modal:             1050;
 $zindex-typeahead:         1060;

public/sass/components/_dashboard_grid.scss

@@ -21,7 +21,7 @@
   }
 }
 
-@include media-breakpoint-down(md) {
+@include media-breakpoint-down(sm) {
   .react-grid-layout {
     height: 100% !important;
   }

public/sass/components/_navbar.scss

@@ -82,6 +82,7 @@
   color: $text-muted;
   border: 1px solid #151515;
   margin-right: 1px;
+  white-space: nowrap;
 
   .gicon {
     font-size: 16px;

public/sass/components/_page_header.scss

@@ -1,7 +1,7 @@
 
 .page-header-canvas {
   background: linear-gradient(90deg, #292a2d, black);
-  box-shadow: inset 0px -4px 14px #2d2d2d;
+  box-shadow: inset 0px -4px 14px $dark-2;
   border-bottom: 1px solid $dark-4;
 }
 
@@ -35,7 +35,7 @@
 .page-header__img {
   border-radius: 50%;
   position: relative;
-  top: -3px;
+  top: 10px;
   width: 50px;
   height: 50px;
 }

public/sass/components/_panel_add_panel.scss

@@ -1,13 +1,40 @@
 
 .add-panel {
+  height: 100%;
+}
+
+.add-panel__header {
+  padding: 5px 15px;
+  display: flex;
+  align-items: center;
+
+  i {
+    font-size: 30px;
+    margin-right: $spacer;
+  }
+}
+
+.add-panel__title {
+  font-size: $font-size-md;
+  margin-right: $spacer/2;
+}
+
+.add-panel__sub-title {
+  font-style: italic;
+  color: $text-muted;
+  position: relative;
+  top: 1px;
+}
+
+.add-panel__items {
+  padding: 3px 0;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   overflow: auto;
-  height: 100%;
+  height: calc(100% - 43px);
   align-content: flex-start;
   justify-content: space-around;
-  padding: 3px 0;
 }
 
 .add-panel__item {

public/sass/components/_timepicker.scss

@@ -7,6 +7,11 @@
   display: flex;
 }
 
+.gf-timepicker-nav-btn {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
 .gf-timepicker-dropdown {
   margin: -8px -10px 10px 5px;
   padding: 10px 20px;

public/sass/components/_view_states.scss

@@ -21,33 +21,22 @@
 
 .playlist-active,
 .user-activity-low {
+  .react-resizable-handle
   .add-row-panel-hint,
   .dash-row-menu-container,
-  .panel-drop-zone
+  .navbar-button--refresh,
-  .dashnav-refresh-action,
+  .navbar-buttons--zoom,
-  .dashnav-zoom-out,
+  .navbar-buttons--actions,
   .panel-menu-container,
-  .dashnav-action-icons,
   .panel-info-corner--info,
-  .panel-info-corner--links,
+  .panel-info-corner--links {
-  .dashnav-move-timeframe  {
     opacity: 0;
     transition: all 1.5s ease-in-out 1s;
   }
 
-  // navbar buttons
-  .navbar {
-    border-color: transparent;
-    background: transparent;
-    transition: all 1.5s ease-in-out 1s;
-    .fa {
-      opacity: 0;
-      transition: all 1.5s ease-in-out 1s;
-    }
-  }
-
   .navbar {
     box-shadow: none;
+    background: transparent;
   }
 
   .navbar-page-btn {