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) {