diff --git a/public/app/features/styleguide/styleguide.html b/public/app/features/styleguide/styleguide.html index 2f42ca7e671..4bb0e8ac5a9 100644 --- a/public/app/features/styleguide/styleguide.html +++ b/public/app/features/styleguide/styleguide.html @@ -43,6 +43,12 @@ +
+
+ +
+
+
forms
diff --git a/public/app/features/styleguide/styleguide.ts b/public/app/features/styleguide/styleguide.ts index c297f12ab4c..dc5c5d94072 100644 --- a/public/app/features/styleguide/styleguide.ts +++ b/public/app/features/styleguide/styleguide.ts @@ -9,8 +9,9 @@ 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']; /** @ngInject **/ constructor(private $http, private $routeParams, private $location) { @@ -26,6 +27,10 @@ class StyleGuideCtrl { if (this.page.colors) { this.loadColors(); } + + if (this.page.icons) { + this.loadIcons(); + } } loadColors() { @@ -36,6 +41,12 @@ 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); diff --git a/public/sass/icons.json b/public/sass/icons.json new file mode 100644 index 00000000000..593c7bbfb55 --- /dev/null +++ b/public/sass/icons.json @@ -0,0 +1,52 @@ +[ + "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", + "worldping", + "grafana_wordmark" +] \ No newline at end of file diff --git a/public/sass/pages/_styleguide.scss b/public/sass/pages/_styleguide.scss index 55aabb01f01..70a71cda1be 100644 --- a/public/sass/pages/_styleguide.scss +++ b/public/sass/pages/_styleguide.scss @@ -21,6 +21,11 @@ } } +.style-guide-icon-list { + font-size: 2em; + text-align: center; +} + // define("areas/styleguide/static/script/app/colors", [], function() { // "use strict"; // var a = function(a) {