IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-26 19:00:54 -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
Show Stats 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="section">
<h5>General options</h5>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item">
Title
</li>
<li>
<input type="text" class="input-xlarge tight-form-input" ng-model='ctrl.panel.title'></input>
</li>
<li class="tight-form-item">
Span
</li>
<li>
<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>
</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 class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxl">
<span class="gf-form-label gf-size-sm">Title</span>
<input type="text" class="gf-form-input" ng-model='ctrl.panel.title'></input>
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-xs">Span</span>
<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>
</div>
<div class="gf-form gf-size-max-lg">
<span class="gf-form-label">Height</span>
<input type="text" class="gf-form-input" ng-model='ctrl.panel.height' placeholder="100px"></input>
</div>
<div class="gf-form">
<editor-checkbox text="Transparent" model="ctrl.panel.transparent"></editor-checkbox>
</div>
</div>
<div class="section">
<h5>Templating options</h5>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item">
Repeat Panel
</li>
<li>
<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">
<option value=""></option>
</select>
</li>
<li class="tight-form-item">
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 class="gf-form-inline">
<div class="gf-form gf-size-max-xxl">
<span class="gf-form-label gf-size-sm">Repeat Panel</span>
<select class="gf-form-input" ng-model="ctrl.panel.repeat" ng-options="f.name as f.name for f in ctrl.dashboard.templating.list">
<option value=""></option>
</select>
</div>
<div class="gf-form">
<span class="gf-form-label gf-size-xs">Min span</span>
<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]">
<option value=""></option>
</select>
</div>
</div>
</div>
<br>
<br>
<br>
<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;
$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-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 {
margin-top: $gf-form-margin;
@ -31,14 +31,14 @@ $gf-form-margin: 4px;
flex-wrap: wrap;
align-content: flex-start;
.gf-form {
.gf-form-flex {
flex-grow: 1;
}
}
.gf-form-button-row {
margin-top: 20px;
margin-bottom: 10px;
margin-top: $spacer * 2;
margin-bottom: $spacer;
}
.gf-form-label {
@ -61,6 +61,7 @@ $gf-form-margin: 4px;
.gf-size-#{$size} { width: $value; }
.gf-size-max-#{$size} {
flex-grow: 1;
max-width: $value;
}
}