ux: new page header look wip

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

@@ -1,85 +1,107 @@
-<navbar model="ctrl.navModel"></navbar>
+<div class="page-header container">
+  <div class="page-header-inner">
+    <div class="page-breadcrumb">
+      <div class="page-breadcrumb__item">
+        <a class="pointer">
+          Configuration <i class="fa fa-caret-down"></i>
+        </a>
+      </div>
+      <!-- <div class="page&#45;breadcrumb__item">/</div> -->
+      <div class="page-breadcrumb__item">
+        <a class="pointer">
+          Data sources
+        </a>
+      </div>
+    </div>
 
-<div class="page-container">
+    <h1>
+      <i class="icon-gf icon-gf-datasources"></i>
+      <span ng-show="ctrl.isNew">Add data source</span>
+      <span ng-hide="ctrl.isNew">Settings</span>
+    </h1>
+
+    <a class="page-header__cta btn btn-success" href="datasources/new" ng-show="ctrl.isNew">
+      <i class="fa fa-plus"></i>
+      Add data source
+    </a>
 
-  <div class="page-header">
-		<h1 ng-show="ctrl.isNew">Add data source</h1>
-		<h1 ng-hide="ctrl.isNew">Edit data source</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>
+  </div>
+</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}">
-					  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>
-	</div>
+<div class="page-container">
 
   <div ng-if="ctrl.tabIndex === 0" class="tab-content">
 
     <form name="ctrl.editForm" ng-if="ctrl.current">
       <div class="gf-form-group">
         <div class="gf-form-inline">
-					<div class="gf-form max-width-30">
-						<span class="gf-form-label width-7">Name</span>
-						<input class="gf-form-input max-width-23" type="text" ng-model="ctrl.current.name" placeholder="name" required>
-						<info-popover offset="0px -135px" mode="right-absolute">
-							The name is used when you select the data source in panels.
-							The <em>Default</em> data source is preselected in new
-							panels.
-						</info-popover>
-					</div>
-					<gf-form-switch class="gf-form" label="Default" checked="ctrl.current.isDefault" switch-class="max-width-6"></gf-form-switch>
-				</div>
+          <div class="gf-form max-width-30">
+            <span class="gf-form-label width-7">Name</span>
+            <input class="gf-form-input max-width-23" type="text" ng-model="ctrl.current.name" placeholder="name" required>
+            <info-popover offset="0px -135px" mode="right-absolute">
+              The name is used when you select the data source in panels.
+              The <em>Default</em> data source is preselected in new
+              panels.
+            </info-popover>
+          </div>
+          <gf-form-switch class="gf-form" label="Default" checked="ctrl.current.isDefault" switch-class="max-width-6"></gf-form-switch>
+        </div>
 
-				<div class="gf-form">
-					<span class="gf-form-label width-7">Type</span>
-					<div class="gf-form-select-wrapper max-width-23">
-						<select class="gf-form-input" ng-model="ctrl.current.type" ng-options="v.id as v.name for v in ctrl.types" ng-change="ctrl.typeChanged()"></select>
-					</div>
-				</div>
-			</div>
+        <div class="gf-form">
+          <span class="gf-form-label width-7">Type</span>
+          <div class="gf-form-select-wrapper max-width-23">
+            <select class="gf-form-input" ng-model="ctrl.current.type" ng-options="v.id as v.name for v in ctrl.types" ng-change="ctrl.typeChanged()"></select>
+          </div>
+        </div>
+      </div>
 
-			<div class="alert alert-info gf-form-group" ng-if="ctrl.datasourceMeta.state === 'alpha'">
-				This plugin is marked as being in alpha state, which means it is in early development phase and
-				updates will include breaking changes.
-			</div>
+      <div class="alert alert-info gf-form-group" ng-if="ctrl.datasourceMeta.state === 'alpha'">
+        This plugin is marked as being in alpha state, which means it is in early development phase and
+        updates will include breaking changes.
+      </div>
 
-			<rebuild-on-change property="ctrl.datasourceMeta.id">
-			<plugin-component type="datasource-config-ctrl">
-			</plugin-component>
-			</rebuild-on-change>
+      <rebuild-on-change property="ctrl.datasourceMeta.id">
+        <plugin-component type="datasource-config-ctrl">
+        </plugin-component>
+      </rebuild-on-change>
 
-			<div ng-if="ctrl.testing" class="gf-form-group">
-				<h5 ng-show="!ctrl.testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
-				<div class="alert-{{ctrl.testing.status}} alert">
-					<div class="alert-title">{{ctrl.testing.title}}</div>
-					<div ng-bind='ctrl.testing.message'></div>
-				</div>
-			</div>
+      <div ng-if="ctrl.testing" class="gf-form-group">
+        <h5 ng-show="!ctrl.testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
+        <div class="alert-{{ctrl.testing.status}} alert">
+          <div class="alert-title">{{ctrl.testing.title}}</div>
+          <div ng-bind='ctrl.testing.message'></div>
+        </div>
+      </div>
 
-			<div class="gf-form-button-row">
-				<button type="submit" class="btn btn-success" ng-show="ctrl.isNew" ng-click="ctrl.saveChanges()">Add</button>
-				<button type="submit" class="btn btn-success" ng-show="!ctrl.isNew" ng-click="ctrl.saveChanges()">Save &amp; Test</button>
-				<button type="submit" class="btn btn-danger" ng-show="!ctrl.isNew" ng-click="ctrl.delete()">
-					Delete
-				</button>
-				<a class="btn btn-link" href="datasources">Cancel</a>
-			</div>
+      <div class="gf-form-button-row">
+        <button type="submit" class="btn btn-success" ng-show="ctrl.isNew" ng-click="ctrl.saveChanges()">Add</button>
+        <button type="submit" class="btn btn-success" ng-show="!ctrl.isNew" ng-click="ctrl.saveChanges()">Save &amp; Test</button>
+        <button type="submit" class="btn btn-danger" ng-show="!ctrl.isNew" ng-click="ctrl.delete()">
+          Delete
+        </button>
+        <a class="btn btn-link" href="datasources">Cancel</a>
+      </div>
 
-		</form>
-	</div>
+    </form>
+  </div>
 
-	<div ng-if="ctrl.tabIndex === 1" class="tab-content">
-		<dashboard-import-list plugin="ctrl.datasourceMeta" datasource="ctrl.current"></dashboard-import-list>
-	</div>
+  <div ng-if="ctrl.tabIndex === 1" class="tab-content">
+    <dashboard-import-list plugin="ctrl.datasourceMeta" datasource="ctrl.current"></dashboard-import-list>
+  </div>
 
 </div>
 

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

@@ -1,45 +1,61 @@
-<div class="page-container">
-	<div class="page-header">
-		<h1>Data Sources</h1>
-		<a class="btn btn-success" href="datasources/new">
-			<i class="fa fa-plus"></i>
-			Add data source
-		</a>
-	</div>
+<div class="page-header container">
+  <div class="page-header-inner">
+    <div class="page-breadcrumb">
+      <div class="page-breadcrumb__item">
+        <a class="pointer">
+          Configuration <i class="fa fa-caret-down"></i>
+        </a>
+      </div>
+    </div>
 
-	<section class="card-section" layout-mode>
+    <h1>
+      <i class="icon-gf icon-gf-datasources"></i>
+      <span>Data Sources</span>
+    </h1>
+
+    <a class="page-header__cta btn btn-success" href="datasources/new">
+      <i class="fa fa-plus"></i>
+      Add data source
+    </a>
+
+  </div>
+</div>
+
+
+<div class="page-container container">
+  <section class="card-section" layout-mode>
     <layout-selector></layout-selector>
 
-		<ol class="card-list" >
-			<li class="card-item-wrapper" ng-repeat="ds in ctrl.datasources">
-				<a class="card-item" href="datasources/edit/{{ds.id}}/">
-					<div class="card-item-header">
-						<div class="card-item-type">
-							{{ds.type}}
-						</div>
-					</div>
-					<div class="card-item-body">
-						<figure class="card-item-figure">
-							<img ng-src="{{ds.typeLogoUrl}}">
-						</figure>
-						<div class="card-item-details">
-							<div class="card-item-name">
-								{{ds.name}}
-								<span ng-if="ds.isDefault">
-									<span class="btn btn-secondary btn-mini">default</span>
-								</span>
-							</div>
-							<div class="card-item-sub-name">
-								{{ds.url}}
-							</div>
-						</div>
-					</div>
-				</a>
-			</li>
-		</ol>
-	</section>
+    <ol class="card-list" >
+      <li class="card-item-wrapper" ng-repeat="ds in ctrl.datasources">
+        <a class="card-item" href="datasources/edit/{{ds.id}}/">
+          <div class="card-item-header">
+            <div class="card-item-type">
+              {{ds.type}}
+            </div>
+          </div>
+          <div class="card-item-body">
+            <figure class="card-item-figure">
+              <img ng-src="{{ds.typeLogoUrl}}">
+            </figure>
+            <div class="card-item-details">
+              <div class="card-item-name">
+                {{ds.name}}
+                <span ng-if="ds.isDefault">
+                  <span class="btn btn-secondary btn-mini">default</span>
+                </span>
+              </div>
+              <div class="card-item-sub-name">
+                {{ds.url}}
+              </div>
+            </div>
+          </div>
+        </a>
+      </li>
+    </ol>
+  </section>
 
-	<div ng-if="ctrl.datasources.length === 0">
-		<em>No data sources defined</em>
-	</div>
+  <div ng-if="ctrl.datasources.length === 0">
+    <em>No data sources defined</em>
+  </div>
 </div>

public/sass/_variables.dark.scss

@@ -48,7 +48,7 @@ $critical:              #ed2e18;
 
 // Scaffolding
 // -------------------------
-$body-bg:  			   	    rgb(20,20,20);
+$body-bg:  			   	    rgb(24,20,20);
 $page-bg:  			   	    $dark-2;
 $body-color:   		 	    $gray-4;
 $text-color:   	   		  $gray-4;

public/sass/layout/_page.scss

@@ -7,15 +7,20 @@
 
 .main-view {
   flex-grow: 1;
+  background: linear-gradient(180deg,#282020 0,#1e0f05);
 }
 
 .page-container {
   @extend .container;
-  background-color: $page-bg;
-  padding: ($spacer * 2) ($spacer * 4);
+
+  padding: $spacer;
   min-height: calc(100% - 54px);
   padding-bottom: $spacer * 5;
-  background-image: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%)
+}
+
+.page-header-inner {
+  @include brand-bottom-border();
+  @include clearfix();
 }
 
 .page-body {
@@ -38,21 +43,20 @@
 }
 
 .page-header {
-  padding: $spacer 0 0 0;
-  margin-bottom: 2rem;
-  @include brand-bottom-border();
-  @include clearfix();
+  padding: 2rem 0 1rem 0;
 
   h1 {
+    font-size: $font-size-h2;
     flex-grow: 1;
     display: inline-block;
     margin-bottom: $spacer*1.5;
   }
 
-  button, a {
-    float: right;
-    margin-left: $spacer;
-  }
+}
+
+.page-header__cta {
+  float: right;
+  margin-left: $spacer;
 }
 
 .page-heading {
@@ -90,3 +94,16 @@
 .page-sidebar-section {
   margin-bottom: $spacer*2;
 }
+
+.page-breadcrumb {
+  display: flex;
+  margin-bottom: $spacer;
+}
+
+.page-breadcrumb__item {
+  a {
+    color: $text-color-weak;
+  }
+  padding-right: $spacer;
+}
+