From ad3da0f47c43b90cc9d330c2b679de1ad4f6f310 Mon Sep 17 00:00:00 2001 From: Andrei Stefan Date: Tue, 2 May 2017 15:50:10 +0300 Subject: [PATCH 1/4] add icon guide --- .../app/features/styleguide/styleguide.html | 6 +++ public/app/features/styleguide/styleguide.ts | 13 ++++- public/sass/icons.json | 52 +++++++++++++++++++ public/sass/pages/_styleguide.scss | 5 ++ 4 files changed, 75 insertions(+), 1 deletion(-) create mode 100644 public/sass/icons.json 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) { From f43c749422f546580abe8317fa569cc95b65fe4a Mon Sep 17 00:00:00 2001 From: Andrei Stefan Date: Tue, 2 May 2017 16:15:28 +0300 Subject: [PATCH 2/4] add plugin authoring tab in style guide --- public/app/features/styleguide/styleguide.html | 5 +++++ public/app/features/styleguide/styleguide.ts | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/public/app/features/styleguide/styleguide.html b/public/app/features/styleguide/styleguide.html index 4bb0e8ac5a9..e573a0e3b09 100644 --- a/public/app/features/styleguide/styleguide.html +++ b/public/app/features/styleguide/styleguide.html @@ -49,6 +49,11 @@ +
+

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 dc5c5d94072..0397b7254a3 100644 --- a/public/app/features/styleguide/styleguide.ts +++ b/public/app/features/styleguide/styleguide.ts @@ -11,7 +11,7 @@ class StyleGuideCtrl { buttonVariants = ['-', '-outline-']; icons: any = []; page: any; - pages = ['colors', 'buttons', 'icons']; + pages = ['colors', 'buttons', 'icons', 'plugins']; /** @ngInject **/ constructor(private $http, private $routeParams, private $location) { From 53ccc6f48fe612879a2b414eacc406e655abff3a Mon Sep 17 00:00:00 2001 From: Andrei Stefan Date: Tue, 2 May 2017 16:45:34 +0300 Subject: [PATCH 3/4] fix theme switching in style guide --- public/app/features/styleguide/styleguide.html | 4 ---- public/app/features/styleguide/styleguide.ts | 10 +++++++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/public/app/features/styleguide/styleguide.html b/public/app/features/styleguide/styleguide.html index e573a0e3b09..e2a218bb763 100644 --- a/public/app/features/styleguide/styleguide.html +++ b/public/app/features/styleguide/styleguide.html @@ -9,10 +9,6 @@ Switch theme - - - Reload -
    diff --git a/public/app/features/styleguide/styleguide.ts b/public/app/features/styleguide/styleguide.ts index 0397b7254a3..de9da6aafd7 100644 --- a/public/app/features/styleguide/styleguide.ts +++ b/public/app/features/styleguide/styleguide.ts @@ -14,7 +14,7 @@ class StyleGuideCtrl { 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 = {}; @@ -49,8 +49,12 @@ class StyleGuideCtrl { 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; }); } From c57ec23a668dd2371181dfdf16b82c983a52425c Mon Sep 17 00:00:00 2001 From: Andrei Stefan Date: Wed, 3 May 2017 11:46:08 +0300 Subject: [PATCH 4/4] fix broken layout for styleguide icons tab --- public/app/features/styleguide/styleguide.html | 6 ++++-- public/sass/icons.json | 6 +++--- public/sass/pages/_styleguide.scss | 2 +- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/public/app/features/styleguide/styleguide.html b/public/app/features/styleguide/styleguide.html index e2a218bb763..573d720831e 100644 --- a/public/app/features/styleguide/styleguide.html +++ b/public/app/features/styleguide/styleguide.html @@ -40,8 +40,10 @@
-
- +
+
+ +
diff --git a/public/sass/icons.json b/public/sass/icons.json index 593c7bbfb55..4c87042fe02 100644 --- a/public/sass/icons.json +++ b/public/sass/icons.json @@ -1,4 +1,6 @@ [ + "grafana_wordmark", + "worldping", "raintank_wordmark", "raintank_r-icn", "check-alt", @@ -46,7 +48,5 @@ "apps", "scale", "pending", - "verified", - "worldping", - "grafana_wordmark" + "verified" ] \ No newline at end of file diff --git a/public/sass/pages/_styleguide.scss b/public/sass/pages/_styleguide.scss index 70a71cda1be..66543847574 100644 --- a/public/sass/pages/_styleguide.scss +++ b/public/sass/pages/_styleguide.scss @@ -22,7 +22,7 @@ } .style-guide-icon-list { - font-size: 2em; + font-size: 1.8em; text-align: center; }