ux(): new dashboard tabs view

public/app/core/directives/dash_edit_link.js

@@ -45,6 +45,7 @@ function ($, coreModule) {
           if (editview) {
             scope.contextSrv.editview = editViewMap[editview];
             payload.src = scope.contextSrv.editview.src;
+            payload.cssClass = "tabbed-view";
           }
 
           if (lastEditor === payload.src) {

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

@@ -1,20 +1,22 @@
-<div class="gf-box-header">
-	<div class="gf-box-title">
-		<i class="fa fa-cogs"></i>
+<div class="tabbed-view-header">
+	<h2 class="tabbed-view-title">
 		Settings
-	</div>
+	</h2>
 
-	<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
-		<div ng-repeat="tab in ['General', 'Rows', 'Links', 'Time picker', 'Metadata']" data-title="{{tab}}">
-		</div>
-	</div>
+	<ul class="gf-tabs">
+		<li class="gf-tabs-item" ng-repeat="tab in ::['General', 'Rows', 'Links', 'Time picker', 'Metadata']">
+			<a class="gf-tabs-link" ng-click="editor.index = $index" ng-class="{active: editor.index === $index}">
+				{{::tab}}
+			</a>
+		</li>
+	</ul>
 
-	<button class="gf-box-header-close-btn" ng-click="dismiss();">
+	<button class="tabbed-view-close-btn" ng-click="dismiss();">
 		<i class="fa fa-remove"></i>
 	</button>
 </div>
 
-<div class="gf-box-body" style="padding-bottom: 50px;">
+<div class="tabbed-view-body" style="padding-bottom: 50px;">
 	<div ng-if="editor.index == 0">
 		<div class="editor-row">
 			<div class="tight-form-section">
@@ -139,7 +141,7 @@
             </li>
           </ul>
           <div class="clearfix"></div>
-        </div> 
+        </div>
         <div class="tight-form">
           <ul class="tight-form-list">
             <li class="tight-form-item" style="width: 120px">

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

@@ -1,17 +1,6 @@
 <div class="editor-row">
 	<div class="section">
 		<div>
-			<!-- <div class="tight&#45;form"> -->
-			<!-- 	<ul class="tight&#45;form&#45;list"> -->
-			<!-- 		<li class="tight&#45;form&#45;item" style="width: 118px"> -->
-			<!-- 			Relative times -->
-			<!-- 		</li> -->
-			<!-- 		<li> -->
-			<!-- 			<input type="text" class="input&#45;xlarge tight&#45;form&#45;input last" style="width: 450px" ng&#45;model="ctrl.panel.time_options" array&#45;join> -->
-			<!-- 		</li> -->
-			<!-- 	</ul> -->
-			<!-- 	<div class="clearfix"></div> -->
-			<!-- </div> -->
 			<div class="tight-form">
 				<ul class="tight-form-list">
 					<li class="tight-form-item" style="width: 118px">

public/app/partials/bootstrap/tabset.html

@@ -1,5 +1,6 @@
 <div>
-  <ul class="nav nav-{{type || 'tabs'}} nav-tabs-alt" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude></ul>
+	<ul class="nav nav-tabs" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude>
+	</ul>
   <div class="tab-content">
     <div class="tab-pane"
          ng-repeat="tab in tabs"

public/sass/_grafana.scss

@@ -65,6 +65,7 @@
 @import "components/shortcuts";
 @import "components/drop";
 @import "components/query_editor";
+@import "components/tabbed_view";
 
 // PAGES
 @import "pages/login";

public/sass/components/_tabbed_view.scss

@@ -0,0 +1,38 @@
+.tabbed-view {
+  background-color: $page-bg;
+  background-image: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%);
+  margin: -($spacer/2);
+  padding: $spacer*2;
+}
+
+.tabbed-view-header {
+  @include clearfix();
+  border-image: linear-gradient(to right, rgba(255,213,0,1) 0%, rgba(255,68,0,1) 99%, rgba(255,68,0,1) 100%);
+  border-image-slice: 1;
+  border-top: 0;
+  border-right: 0;
+  border-left: 0;
+  border-bottom: 1px solid transparent;
+}
+
+.tabbed-view-close-btn {
+  float: right;
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+  border: none;
+  padding: 8px;
+  i {
+    font-size: 120%;
+  }
+  color: $text-color;
+  &:hover {
+    color: $white;
+  }
+}
+
+.tabbed-view-body {
+  padding: 20px;
+  min-height: 150px;
+}
+

public/sass/components/_tabs.scss

@@ -1,6 +1,4 @@
-
 .nav-tabs-alt {
-
 	& > li > a {
 	  color: darken($link-color, 20%);
 	}
@@ -34,4 +32,39 @@
   }
 }
 
+.gf-tabs {
+  @include clearfix();
+  float: left;
+  margin: 0.5rem 0 0 2rem;
+}
+
+.gf-tabs-item {
+  float: left;
+  list-style: none;
+}
+
+.gf-tabs-link {
+  padding: ($spacer * 0.75) $spacer;
+  margin-right: $spacer/2;
+  line-height: $line-height-base;
+  border: 1px solid transparent;
+  @include border-radius(4px 4px 0 0);
 
+  &:hover,
+  &:focus {
+    border-color: $divider-border-color;
+    color: $link-color;
+  }
+
+  &.active,
+  &.active:hover,
+  &.active:focus {
+    @include border-radius(3px);
+    border: 1px solid $divider-border-color;
+    background-color: transparent;
+    border-bottom: 1px solid $panel-bg;
+    color: $link-color;
+    position: relative;
+    top: 1px;
+  }
+}