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(timepicker): fix css for the timepicker

Browse Source
This commit is contained in:
bergquist 2016-02-18 18:59:50 +01:00
parent ed58474c37
commit d769f6c084
4 changed files with 67 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
public/app/features/dashboard/timepicker/dropdown.html
View File

@ -1,37 +1,52 @@
<div class="row pull-right">
<form name="timeForm" class="gf-timepicker-absolute-section">
<h3>Time range</h3>
<label class="small">From:</label>
<div class="input-prepend">
<input type="text" class="input-large" ng-model="ctrl.timeRaw.from" input-datetime>
<button class="btn btn-primary" type="button" ng-click="openFromPicker=!openFromPicker">
<i class="fa fa-calendar"></i>
</button>
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl">
<input type="text" class="gf-form-input input-large" ng-model="ctrl.timeRaw.from" input-datetime>
</div>
<div class="gf-form">
<button class="btn gf-form-btn btn-primary" type="button" ng-click="openFromPicker=!openFromPicker">
<i class="fa fa-calendar"></i>
</button>
</div>
</div>
<div ng-if="openFromPicker">
<datepicker ng-model="ctrl.absolute.fromJs" class="gf-timepicker-component" show-weeks="false" ng-change="ctrl.absoluteFromChanged()"></datepicker>
</div>
<label class="small">To:</label>
<div class="input-prepend">
<input type="text" class="input-large" ng-model="ctrl.timeRaw.to" input-datetime>
<button class="btn btn-primary" type="button" ng-click="openToPicker=!openToPicker">
<i class="fa fa-calendar"></i>
</button>
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl">
<input type="text" class="gf-form-input input-large" ng-model="ctrl.timeRaw.to" input-datetime>
</div>
<div class="gf-form">
<button class="btn gf-form-btn btn-primary" type="button" ng-click="openToPicker=!openToPicker">
<i class="fa fa-calendar"></i>
</button>
</div>
</div>
<div ng-if="openToPicker">
<datepicker ng-model="ctrl.absolute.toJs" class="gf-timepicker-component" show-weeks="false" ng-change="ctrl.absoluteToChanged()"></datepicker>
</div>
<label class="small">Refreshing every:</label>
<select ng-model="ctrl.refresh.value" class='input-medium' ng-options="f.value as f.text for f in ctrl.refresh.options">
</select>
<button type="submit" class="btn btn-primary" ng-click="ctrl.applyCustom();" ng-disabled="!timeForm.$valid">
Apply
</button>
<label class="small">Refreshing every:</label>
<div class="gf-form-inline">
<div class="gf-form gf-size-max-xxxl">
<select ng-model="ctrl.refresh.value" class="gf-form-input input-medium" ng-options="f.value as f.text for f in ctrl.refresh.options"></select>
</div>
<div class="gf-form">
<button type="submit" class="btn gf-form-btn btn-primary" ng-click="ctrl.applyCustom();" ng-disabled="!timeForm.$valid">Apply</button>
</div>
</div>
</form>
<div class="gf-timepicker-relative-section">

1
public/sass/_grafana.scss
View File

@ -15,6 +15,7 @@
@import "base/forms";
@import "base/fonts";
@import "base/grid";
@import "base/font_awesome";
// UTILS
@import "utils/utils";

0
public/vendor/css/font-awesome.min.css → public/sass/base/_font_awesome.scss
View File

39
public/sass/components/_timepicker.scss
View File

@ -21,10 +21,10 @@
}
.gf-timepicker-absolute-section {
width: 300px;
width: 290px;
float: left;
border-right: 1px solid $divider-border-color;
padding: 0 0 0 20px;
padding: 0 10px;
select {
width: 183px;
margin-bottom: 0;
@ -47,7 +47,7 @@
.gf-timepicker-relative-section {
padding: 0 20px 0 30px;
min-height: 258px;
min-height: 237px;
float: left;
ul {
list-style: none;
@ -66,11 +66,14 @@
.gf-timepicker-component {
margin-bottom: 10px;
td {
padding: 1px;
}
button.btn-sm {
@include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight);
background-image: none;
border: none;
padding: 6px 9px;
padding: 6px 10px;
color: $text-color;
&.active span {
color: $blue;
@ -86,3 +89,31 @@
.input-datetime-format {
color: $link-color-disabled
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-chevron-left:before {
content: "\f053";
}
.fa-chevron-right:before {
content: "\f054";
}
.glyphicon-chevron-right {
@extend .fa;
@extend .fa-chevron-right;
}
.glyphicon-chevron-left {
@extend .fa;
@extend .fa-chevron-left;
}