IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux(): more work on style guide

Browse Source
This commit is contained in:
Torkel Ödegaard
2016-02-20 11:32:50 +01:00
parent a685e46fb6
commit 57e6e0092d
4 changed files with 45 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
public/app/features/styleguide/styleguide.html
View File

@@ -15,29 +15,34 @@
</a>
</div>
<tabset>
<tab heading="Colors">
<ul>
<li class="style-guide-color-card" ng-repeat="color in ctrl.colors" style="background-color: {{color.value}}">
<strong>${{color.name}}</strong>
<em>{{color.value}}</em>
</li>
</ul>
</tab>
<tab heading="Buttons">
<ul class="nav nav-tabs">
<li ng-repeat="page in ctrl.pages" ng-class="{active: ctrl.page[page]}" class="tab">
<a href="styleguide/{{page}}">{{page}}</a>
</li>
</ul>
<div ng-repeat="variant in ctrl.buttonVariants" class="row">
<div ng-repeat="btnSize in ctrl.buttonSizes" class="style-guide-button-list p-a-2 col-md-4">
<button ng-repeat="buttonName in ctrl.buttonNames" class="btn btn{{variant}}{{buttonName}} {{btnSize}}">
btn{{variant}}{{buttonName}} {{btnSize}}
</button>
</div>
<div class="tab-pane" ng-if="ctrl.page.colors">
<ul>
<li class="style-guide-color-card" ng-repeat="color in ctrl.colors" style="background-color: {{color.value}}">
<strong>${{color.name}}</strong>
<em>{{color.value}}</em>
</li>
</ul>
</div>
<div class="tab-pane" ng-if="ctrl.page.buttons">
<div ng-repeat="variant in ctrl.buttonVariants" class="row">
<div ng-repeat="btnSize in ctrl.buttonSizes" class="style-guide-button-list p-a-2 col-md-4">
<button ng-repeat="buttonName in ctrl.buttonNames" class="btn btn{{variant}}{{buttonName}} {{btnSize}}">
btn{{variant}}{{buttonName}}
</button>
</div>
</div>
</div>
</tab>
<tab heading="Forms">
</tab>
</tabset>
<div class="tab-pane" ng-if="ctrl.page.forms">
forms
</div>
</div>

21
public/app/features/styleguide/styleguide.ts
View File

@@ -9,12 +9,27 @@ class StyleGuideCtrl {
buttonNames = ['primary', 'secondary', 'inverse', 'success', 'warning', 'danger'];
buttonSizes = ['btn-small', '', 'btn-large'];
buttonVariants = ['-', '-outline-'];
page: any;
pages = ['colors', 'buttons', 'forms', 'dashboard', 'query-editors'];
/** @ngInject **/
constructor($http) {
constructor(private $http, $routeParams) {
this.theme = config.bootData.user.lightTheme ? 'light': 'dark';
this.page = {};
$http.get('public/sass/styleguide.json').then(res => {
if ($routeParams.page) {
this.page[$routeParams.page] = 1;
} else {
this.page.colors = true;
}
if (this.page.colors) {
this.loadColors();
}
}
loadColors() {
this.$http.get('public/sass/styleguide.json').then(res => {
this.colors = _.map(res.data[this.theme], (value, key) => {
return {name: key, value: value};
});
@@ -23,7 +38,7 @@ class StyleGuideCtrl {
switchTheme() {
var other = this.theme === 'dark' ? 'light' : 'dark';
window.location.href = config.appSubUrl + '/styleguide?theme=' + other;
window.location.href = window.location.href + '?theme=' + other;
}
}