ux: new page header design

public/app/core/components/navbar/navbar.html

@@ -1,13 +1,11 @@
 <div class="page-nav">
-  <div class="container">
-    <div class="page-breadcrumbs">
-      <a class="breadcrumb-item active" href="/">
-        <i class="fa fa-home"></i>
-      </a>
-      <a class="breadcrumb-item" ng-href="{{::item.url}}" ng-repeat="item in ctrl.model.breadcrumbs">
-        {{::item.text}}
-      </a>
-    </div>
+  <div class="page-breadcrumbs">
+    <a class="breadcrumb-item active" href="/">
+      <i class="fa fa-home"></i>
+    </a>
+    <a class="breadcrumb-item" ng-href="{{::item.url}}" ng-repeat="item in ctrl.model.breadcrumbs">
+      {{::item.text}}
+    </a>
   </div>
 </div>
 

public/app/core/components/navbar/navbar.ts

@@ -39,10 +39,10 @@ export function pageH1() {
   return {
     restrict: 'E',
     template: `
-    <h1>
-    <i class="{{::model.node.icon}}" ng-if="::model.node.icon"></i>
-    <img ng-src="{{::model.node.img}}" ng-if="::model.node.img"></i>
-    {{model.node.text}}
+    <h1 class="page-header__title">
+      <i class="page-header__icon {{::model.node.icon}}" ng-if="::model.node.icon"></i>
+      <img class="page-header__img" ng-src="{{::model.node.img}}" ng-if="::model.node.img"></i>
+      {{model.node.text}}
     </h1>
     `,
     scope: {

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

@@ -1,28 +1,34 @@
-<navbar model="ctrl.navModel"></navbar>
-<div class="page-container">
-	<div class="page-header">
-		<page-h1 model="ctrl.navModel"></page-h1>
+<div class="page-header-canvas">
+	<div class="page-container">
+		<navbar model="ctrl.navModel"></navbar>
 
-		<div ng-if="ctrl.current.readOnly" class="grafana-info-box span8">Disclaimer. This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.</div>
+		<div class="page-header">
+			<page-h1 model="ctrl.navModel"></page-h1>
 
-		<div class="page-header-tabs" ng-show="ctrl.hasDashboards">
-			<ul class="gf-tabs">
-				<li class="gf-tabs-item">
-					<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 0" ng-class="{active: ctrl.tabIndex === 0}">
-						Config
-					</a>
-				</li>
-				<li class="gf-tabs-item">
-					<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 1" ng-class="{active: ctrl.tabIndex === 1}">
-						Dashboards
-					</a>
-				</li>
-			</ul>
+			<div ng-if="ctrl.current.readOnly" class="grafana-info-box span8">Disclaimer. This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.</div>
+
+			<div class="page-header-tabs" ng-show="ctrl.hasDashboards">
+				<ul class="gf-tabs">
+					<li class="gf-tabs-item">
+						<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 0" ng-class="{active: ctrl.tabIndex === 0}">
+							<i class="fa fa-sliders"></i>
+							Config
+						</a>
+					</li>
+					<li class="gf-tabs-item">
+						<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 1" ng-class="{active: ctrl.tabIndex === 1}">
+							<i class="fa fa-th-large"></i>
+							Dashboards
+						</a>
+					</li>
+				</ul>
+			</div>
 		</div>
 	</div>
+</div>
 
-	<div ng-if="ctrl.tabIndex === 0" class="tab-content">
-
+<div class="page-container page-body">
+	<div ng-if="ctrl.tabIndex === 0">
 		<form name="ctrl.editForm" ng-if="ctrl.current">
 			<div class="gf-form-group">
 				<div class="gf-form-inline">
@@ -83,7 +89,7 @@
 
 		</form>
 	</div>
-	<div ng-if="ctrl.tabIndex === 1" class="tab-content">
+	<div ng-if="ctrl.tabIndex === 1">
 		<dashboard-import-list plugin="ctrl.datasourceMeta" datasource="ctrl.current"></dashboard-import-list>
 	</div>
 </div>

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

@@ -28,7 +28,7 @@
 
   </div>
 
-  <div class="page-body">
+  <div class="page-body page-body--with-sidebar">
     <div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Readme'">
       <div ng-bind-html="ctrl.readmeHtml" class="markdown-html">
       </div>

public/sass/_old_responsive.scss

@@ -29,8 +29,9 @@
   .dashnav-action-icons {
     display: none;
   }
+
   .page-container {
-    padding: ($spacer * 1) ($spacer * 2);
+    padding: 0 $spacer * 2;
   }
 
   .dash-row-menu-container {

public/sass/_variables.scss

@@ -227,7 +227,5 @@ $dashboard-padding: $panel-margin * 2;
 $panel-padding: 0px 10px 5px 10px;
 
 // tabs
-$tabs-padding-top: 0.6rem;
-$tabs-padding-bottom: 0.4rem;
-$tabs-top-margin: 0.5rem;
+$tabs-padding: 8px 15px 11px;
 

public/sass/components/_tabbed_view.scss

@@ -34,7 +34,7 @@
   margin: 0;
   background-color: transparent;
   border: none;
-  padding: ($tabs-padding-top + $tabs-top-margin) $spacer $tabs-padding-bottom;
+  padding: $tabs-padding;
   color: $text-color;
   i {
     font-size: 120%;

public/sass/components/_tabs.scss

@@ -1,41 +1,6 @@
-.nav-tabs-alt {
-	& > li > a {
-	  color: darken($link-color, 20%);
-	}
-
-	li > a:hover {
-    border-bottom: none;
-	}
-
-	li.active > a,
-	li.active > a:focus,
-	li.active > a:hover {
-    @include border-radius(3px);
-	  border: 1px solid $divider-border-color;
-	  background-color: transparent;
-	  border-bottom: 1px solid $page-bg;
-	  color: $link-color;
-	}
-
-	li.disabled > a {
-		color: $text-color;
-	}
-
-	.open .dropdown-toggle {
-		background-color: #060606;
-		border-color: transparent;
-	}
-
-  .tab-content {
-    padding: 10px;
-    background-color: $panel-bg;
-  }
-}
-
 .gf-tabs {
   @include clearfix();
   float: left;
-  margin: $tabs-top-margin 0 0 0;
 }
 
 .gf-tabs-item {
@@ -44,13 +9,17 @@
 }
 
 .gf-tabs-link {
-  padding: $tabs-padding-top $spacer $tabs-padding-bottom $spacer;
+  padding: $tabs-padding;
   margin-right: $spacer/2;
-  border: 1px solid transparent;
   position: relative;
   display: block;
+  border: solid transparent;
+  border-width: 2px 1px 1px;
+  border-radius: 3px 3px 0 0;
 
-  @include border-radius(2px 2px 0 0);
+  i {
+    padding-right: 5px;
+  }
 
   &:hover,
   &:focus {
@@ -60,20 +29,11 @@
   &.active,
   &.active:hover,
   &.active:focus {
-    @include border-radius(3px);
-    border-color: rgba(216, 131, 40, 0.77);
-    border-bottom: 1px solid $page-bg;
+    border-color: $orange $dark-4 transparent;
+    background: $page-bg;
     color: $link-color;
     position: relative;
     top: 1px;
   }
 }
 
-.form-tabs-wrapper {
-  @include brand-bottom-border();
-  @include clearfix();
-}
-
-.form-tabs-content {
-  padding: $spacer*2 $spacer;
-}

public/sass/layout/_page.scss

@@ -16,7 +16,7 @@
 
 .page-container {
   @extend .container;
-  padding: $spacer $spacer $spacer $spacer*3;
+  padding: 0 $spacer * 2;
 }
 
 .scroll-canvas {
@@ -31,10 +31,14 @@
 }
 
 .page-body {
-  @include media-breakpoint-up(md) {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
+  padding-top: $spacer*2;
+
+  &--with-sidebar {
+    @include media-breakpoint-up(md) {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
   }
 }
 
@@ -49,31 +53,18 @@
   }
 }
 
+.page-header-canvas {
+  background: linear-gradient(90deg, #292a2d, black);
+  box-shadow: inset 0px -4px 14px #2d2d2d;
+  bottom-border: 1px solid $dark-4;
+}
+
 .page-header {
   padding: 2rem 0 0 0;
-  margin-bottom: 2rem;
-  @include brand-bottom-border();
-  @include clearfix();
-
-  h1 {
-    font-size: $font-size-h2;
-    flex-grow: 1;
-    display: inline-block;
-    margin-bottom: 1rem;
-
-    img {
-      width: 30px;
-      height: 30px;
-      border-radius: 50%;
-      margin-right: 0.5rem;
-      position: relative;
-      top: -3px;
-    }
-  }
 
-  a, button {
+  .btn {
     float: right;
-    margin-left: $spacer;
+    margin-left: 1rem;
 
     // better align icons
     .fa {
@@ -83,7 +74,26 @@
   }
 }
 
+.page-header__title {
+  font-size: $font-size-h2;
+  flex-grow: 1;
+  display: inline-block;
+  margin-bottom: 2.5rem;
+}
+
+.page-header__img {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  margin-right: 1rem;
+  position: relative;
+  top: -3px;
+}
 
+.page-header__icon {
+  font-size: 150%;
+  margin-right: 1rem;
+}
 
 .page-heading {
   font-size: 1.25rem;
@@ -123,7 +133,7 @@
 
 .page-breadcrumbs {
   display: flex;
-  padding: 10px 25px;
+  padding: 10px 0;
   line-height: 0.5;
 }
 
@@ -136,6 +146,8 @@
 }
 
 .breadcrumb-item {
+  @include gradientBar($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
+
   text-decoration: none;
   outline: none;
   display: block;
@@ -143,7 +155,6 @@
   font-size: 12px;
   line-height: 30px;
   padding: 0 7px 0 37px;
-  @include gradientBar($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
   position: relative;
   box-shadow: $card-shadow;
 
@@ -196,13 +207,13 @@
 
     // 5px - for rounded arrows and
     // 50px - to prevent hover glitches on the border created using shadows*/
-    border-radius: 0 5px 0 50px;
-  }
+  border-radius: 0 5px 0 50px;
+}
 
-  // we dont need an arrow after the last link
-  &:last-child:after {
-    content: none;
-  }
+// we dont need an arrow after the last link
+&:last-child:after {
+  content: none;
+}
 }