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(): updated graph form styles

Browse Source
This commit is contained in:
Torkel Ödegaard
2016-02-17 13:46:18 +01:00
parent 45e232ef62
commit 8193d50da7
3 changed files with 39 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
public/app/partials/panelgeneral.html
View File

@@ -1,61 +1,42 @@
<div class="editor-row"> <div class="gf-form-group">
<div class="section"> <div class="gf-form-inline">
<h5>General options</h5> <div class="gf-form gf-size-max-xxl">
<div class="tight-form last"> <span class="gf-form-label gf-size-sm">Title</span>
<ul class="tight-form-list"> <input type="text" class="gf-form-input" ng-model='ctrl.panel.title'></input>
<li class="tight-form-item"> </div>
Title <div class="gf-form">
</li> <span class="gf-form-label gf-size-xs">Span</span>
<li> <select class="gf-form-input gf-size-auto" ng-model="ctrl.panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select>
<input type="text" class="input-xlarge tight-form-input" ng-model='ctrl.panel.title'></input> </div>
</li> <div class="gf-form gf-size-max-lg">
<li class="tight-form-item"> <span class="gf-form-label">Height</span>
Span <input type="text" class="gf-form-input" ng-model='ctrl.panel.height' placeholder="100px"></input>
</li> </div>
<li> <div class="gf-form">
<select class="input-mini tight-form-input" ng-model="ctrl.panel.span" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10,11,12]"></select> <editor-checkbox text="Transparent" model="ctrl.panel.transparent"></editor-checkbox>
</li>
<li class="tight-form-item">
Height
</li>
<li>
<input type="text" class="input-small tight-form-input" ng-model='ctrl.panel.height'></input>
</li>
<li class="tight-form-item">
<label class="checkbox-label" for="panel.transparent">Transparent</label>
<input class="cr1" id="panel.transparent" type="checkbox" ng-model="ctrl.panel.transparent" ng-checked="ctrl.panel.transparent">
<label for="panel.transparent" class="cr1"></label>
</li>
</ul>
<div class="clearfix"></div>
</div> </div>
</div> </div>
<div class="section">
<h5>Templating options</h5> <div class="gf-form-inline">
<div class="tight-form last"> <div class="gf-form gf-size-max-xxl">
<ul class="tight-form-list"> <span class="gf-form-label gf-size-sm">Repeat Panel</span>
<li class="tight-form-item"> <select class="gf-form-input" ng-model="ctrl.panel.repeat" ng-options="f.name as f.name for f in ctrl.dashboard.templating.list">
Repeat Panel <option value=""></option>
</li> </select>
<li> </div>
<select class="input-small tight-form-input last" ng-model="ctrl.panel.repeat" ng-options="f.name as f.name for f in ctrl.dashboard.templating.list"> <div class="gf-form">
<option value=""></option> <span class="gf-form-label gf-size-xs">Min span</span>
</select> <select class="gf-form-input" ng-model="ctrl.panel.minSpan" ng-options="f for f in [1,2,3,4,5,6,7,8,9,10,11,12]">
</li> <option value=""></option>
<li class="tight-form-item"> </select>
Min span
</li>
<li>
<select class="input-small tight-form-input last" ng-model="ctrl.panel.minSpan" ng-options="f for f in [1,2,3,4,5,6,7,8,9,10,11,12]">
<option value=""></option>
</select>
</li>
</ul>
<div class="clearfix"></div>
</div> </div>
</div> </div>
</div> </div>
<br>
<br>
<br>
<panel-links-editor panel="ctrl.panel"></panel-links-editor> <panel-links-editor panel="ctrl.panel"></panel-links-editor>

2
public/sass/_variables.scss
View File

@@ -127,7 +127,7 @@ $lead-font-size: 1.25rem !default;
$lead-font-weight: 300 !default; $lead-font-weight: 300 !default;
$headings-margin-bottom: ($spacer / 2) !default; $headings-margin-bottom: ($spacer / 2) !default;
$headings-font-family: "Open Sans" !default; $headings-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
$headings-font-weight: 400 !default; $headings-font-weight: 400 !default;
$headings-line-height: 1.1 !default; $headings-line-height: 1.1 !default;

9
public/sass/components/_gf-form.scss
View File

@@ -1,4 +1,4 @@
$gf-form-margin: 4px; $gf-form-margin: 0.4rem;
.gf-form { .gf-form {
margin-top: $gf-form-margin; margin-top: $gf-form-margin;
@@ -31,14 +31,14 @@ $gf-form-margin: 4px;
flex-wrap: wrap; flex-wrap: wrap;
align-content: flex-start; align-content: flex-start;
.gf-form { .gf-form-flex {
flex-grow: 1; flex-grow: 1;
} }
} }
.gf-form-button-row { .gf-form-button-row {
margin-top: 20px; margin-top: $spacer * 2;
margin-bottom: 10px; margin-bottom: $spacer;
} }
.gf-form-label { .gf-form-label {
@@ -61,6 +61,7 @@ $gf-form-margin: 4px;
.gf-size-#{$size} { width: $value; } .gf-size-#{$size} { width: $value; }
.gf-size-max-#{$size} { .gf-size-max-#{$size} {
flex-grow: 1;
max-width: $value; max-width: $value;
} }
} }