diff --git a/public/app/features/styleguide/styleguide.html b/public/app/features/styleguide/styleguide.html
index 2f42ca7e671..573d720831e 100644
--- a/public/app/features/styleguide/styleguide.html
+++ b/public/app/features/styleguide/styleguide.html
@@ -9,10 +9,6 @@
Switch theme
-
-
- Reload
-
+
+
+
+
From grafana 3.0 it's very easy to develop your own plugins and share them with other grafana users.
+
More information about plugin development can be found at docs.grafana.org
+
+
forms
diff --git a/public/app/features/styleguide/styleguide.ts b/public/app/features/styleguide/styleguide.ts
index c297f12ab4c..de9da6aafd7 100644
--- a/public/app/features/styleguide/styleguide.ts
+++ b/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;
});
}
diff --git a/public/sass/icons.json b/public/sass/icons.json
new file mode 100644
index 00000000000..4c87042fe02
--- /dev/null
+++ b/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"
+]
\ No newline at end of file
diff --git a/public/sass/pages/_styleguide.scss b/public/sass/pages/_styleguide.scss
index 55aabb01f01..66543847574 100644
--- a/public/sass/pages/_styleguide.scss
+++ b/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) {