ux(): more work on style guide

public/app/core/routes/routes.ts

@@ -186,7 +186,7 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
   .when('/global-alerts', {
     templateUrl: 'public/app/features/dashboard/partials/globalAlerts.html',
   })
-  .when('/styleguide', {
+  .when('/styleguide/:page?', {
     controller: 'StyleGuideCtrl',
     controllerAs: 'ctrl',
     templateUrl: 'public/app/features/styleguide/styleguide.html',

public/app/features/styleguide/styleguide.html

@@ -15,29 +15,34 @@
 		</a>
 	</div>
 
-	<tabset>
-		<tab heading="Colors">
-			<ul>
-				<li class="style-guide-color-card" ng-repeat="color in ctrl.colors" style="background-color: {{color.value}}">
-					<strong>${{color.name}}</strong>
-					<em>{{color.value}}</em>
-				</li>
-			</ul>
-		</tab>
-		<tab heading="Buttons">
-
-			<div ng-repeat="variant in ctrl.buttonVariants" class="row">
-				<div ng-repeat="btnSize in ctrl.buttonSizes" class="style-guide-button-list p-a-2 col-md-4">
-					<button ng-repeat="buttonName in ctrl.buttonNames" class="btn btn{{variant}}{{buttonName}} {{btnSize}}">
-						btn{{variant}}{{buttonName}} {{btnSize}}
-					</button>
-				</div>
+	<ul class="nav nav-tabs">
+		<li ng-repeat="page in ctrl.pages" ng-class="{active: ctrl.page[page]}" class="tab">
+			<a href="styleguide/{{page}}">{{page}}</a>
+		</li>
+	</ul>
+
+	<div class="tab-pane" ng-if="ctrl.page.colors">
+		<ul>
+			<li class="style-guide-color-card" ng-repeat="color in ctrl.colors" style="background-color: {{color.value}}">
+				<strong>${{color.name}}</strong>
+				<em>{{color.value}}</em>
+			</li>
+		</ul>
+	</div>
+
+	<div class="tab-pane" ng-if="ctrl.page.buttons">
+		<div ng-repeat="variant in ctrl.buttonVariants" class="row">
+			<div ng-repeat="btnSize in ctrl.buttonSizes" class="style-guide-button-list p-a-2 col-md-4">
+				<button ng-repeat="buttonName in ctrl.buttonNames" class="btn btn{{variant}}{{buttonName}} {{btnSize}}">
+					btn{{variant}}{{buttonName}}
+				</button>
 			</div>
+		</div>
+	</div>
 
-		</tab>
-		<tab heading="Forms">
-		</tab>
-	</tabset>
+	<div class="tab-pane" ng-if="ctrl.page.forms">
+		forms
+	</div>
 
 </div>
 

public/app/features/styleguide/styleguide.ts

@@ -9,12 +9,27 @@ class StyleGuideCtrl {
   buttonNames = ['primary', 'secondary', 'inverse', 'success', 'warning', 'danger'];
   buttonSizes = ['btn-small', '', 'btn-large'];
   buttonVariants = ['-', '-outline-'];
+  page: any;
+  pages = ['colors', 'buttons', 'forms', 'dashboard', 'query-editors'];
 
   /** @ngInject **/
-  constructor($http) {
+  constructor(private $http, $routeParams) {
     this.theme = config.bootData.user.lightTheme ? 'light': 'dark';
+    this.page = {};
 
-    $http.get('public/sass/styleguide.json').then(res => {
+    if ($routeParams.page) {
+      this.page[$routeParams.page] = 1;
+    } else {
+      this.page.colors = true;
+    }
+
+    if (this.page.colors) {
+      this.loadColors();
+    }
+   }
+
+  loadColors() {
+   this.$http.get('public/sass/styleguide.json').then(res => {
       this.colors = _.map(res.data[this.theme], (value, key) => {
         return {name: key, value: value};
       });
@@ -23,7 +38,7 @@ class StyleGuideCtrl {
 
   switchTheme() {
     var other = this.theme === 'dark' ? 'light' : 'dark';
-    window.location.href = config.appSubUrl + '/styleguide?theme=' + other;
+    window.location.href = window.location.href + '?theme=' + other;
   }
 
 }

public/sass/components/_gf-form.scss

@@ -1,4 +1,4 @@
-$gf-form-margin: 0.4rem;
+$gf-form-margin: 0.2rem;
 
 .gf-form {
   margin-bottom: $gf-form-margin;