Merge pull request #8274 from sliceratwork/master

Update style guide

public/app/features/styleguide/styleguide.html

@@ -9,10 +9,6 @@
 			<i class="fa fa-random"></i>
 			Switch theme
 		</a>
-		<a class="btn btn-inverse" ng-click="ctrl.switchTheme()">
-			<i class="fa fa-refresh"></i>
-			Reload
-		</a>
 
 		<div class="page-header-tabs">
 			<ul class="gf-tabs">
@@ -43,6 +39,19 @@
 		</div>
 	</div>
 
+	<div class="tab-pane style-guide-icon-list" ng-if="ctrl.page.icons">
+		<div class="row">
+			<div ng-repeat="icon in ctrl.icons" class="col-md-2 col-sm-3 col-xs-4">
+				<i class="icon-gf icon-gf-{{icon}}" bs-tooltip="'icon-gf icon-gf-{{icon}}'"></i>
+			</div>
+		</div>
+	</div>
+
+	<div class="tab-pane style-guide-plugin-authoring" ng-if="ctrl.page.plugins">
+		<p>From grafana 3.0 it's very easy to develop your own plugins and share them with other grafana users.</p>
+		<p>More information about plugin development can be found at <a href="http://docs.grafana.org/plugins/developing/development/" target="_blank">docs.grafana.org</a></p>
+	</div>
+
 	<div class="tab-pane" ng-if="ctrl.page.forms">
 		forms
 	</div>

public/app/features/styleguide/styleguide.ts

@@ -9,11 +9,12 @@ class StyleGuideCtrl {
   buttonNames = ['primary', 'secondary', 'inverse', 'success', 'warning', 'danger'];
   buttonSizes = ['btn-small', '', 'btn-large'];
   buttonVariants = ['-', '-outline-'];
+  icons: any = [];
   page: any;
-  pages = ['colors', 'buttons'];
+  pages = ['colors', 'buttons', 'icons', 'plugins'];
 
   /** @ngInject **/
-  constructor(private $http, private $routeParams, private $location) {
+  constructor(private $http, private $routeParams, private $location, private backendSrv) {
     this.theme = config.bootData.user.lightTheme ? 'light': 'dark';
     this.page = {};
 
@@ -26,6 +27,10 @@ class StyleGuideCtrl {
     if (this.page.colors) {
       this.loadColors();
     }
+
+    if (this.page.icons) {
+      this.loadIcons();
+    }
    }
 
   loadColors() {
@@ -36,10 +41,20 @@ class StyleGuideCtrl {
     });
   }
 
+  loadIcons() {
+   this.$http.get('public/sass/icons.json').then(res => {
+      this.icons = res.data;
+    });
+  }
+
   switchTheme() {
     this.$routeParams.theme = this.theme === 'dark' ? 'light' : 'dark';
-    this.$location.search(this.$routeParams);
+
-    setTimeout(() => {
+    var cmd = {
+      theme: this.$routeParams.theme
+    };
+
+    this.backendSrv.put('/api/user/preferences', cmd).then(() => {
       window.location.href = window.location.href;
     });
   }

public/sass/icons.json

@@ -0,0 +1,52 @@
+[
+      "grafana_wordmark",
+      "worldping",
+      "raintank_wordmark",
+      "raintank_r-icn",
+      "check-alt",
+      "check",
+      "collector",
+      "dashboard",
+      "panel",
+      "datasources",
+      "endpoint-tiny",
+      "endpoint",
+      "page",
+      "filter",
+      "status",
+      "monitoring",
+      "monitoring-tiny",
+      "jump-to-dashboard",
+      "warning",
+      "nodata",
+      "critical",
+      "crit",
+      "online",
+      "event-error",
+      "event",
+      "sadface",
+      "private-collector",
+      "alert-disabled",
+      "refresh",
+      "save",
+      "share",
+      "star",
+      "search",
+      "remove",
+      "video",
+      "bulk_action",
+      "grabber",
+      "users",
+      "globe",
+      "snapshot",
+      "play-grafana-icon",
+      "grafana-icon",
+      "email",
+      "stopwatch",
+      "skull",
+      "probe",
+      "apps",
+      "scale",
+      "pending",
+      "verified"
+]

public/sass/pages/_styleguide.scss

@@ -21,6 +21,11 @@
   }
 }
 
+.style-guide-icon-list {
+  font-size: 1.8em;
+  text-align: center;
+}
+
 // define("areas/styleguide/static/script/app/colors", [], function() {
 //    "use strict";
 //    var a = function(a) {