mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Quick refactoring of time picker styles, needs a much bigger redesign
This commit is contained in:
Torkel Ödegaard
commit
d0f8d034df
@ -24,60 +24,67 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div ng-if="ctrl.isOpen" class="gf-timepicker-dropdown">
|
<div ng-if="ctrl.isOpen" class="gf-timepicker-dropdown">
|
||||||
<form name="timeForm" class="gf-timepicker-absolute-section">
|
<div class="popover-box">
|
||||||
<h3 class="section-heading">Custom range</h3>
|
<div class="popover-box__header">
|
||||||
|
<span class="popover-box__title">Quick ranges</span>
|
||||||
<label class="small">From:</label>
|
|
||||||
<div class="gf-form-inline">
|
|
||||||
<div class="gf-form max-width-28">
|
|
||||||
<input type="text" class="gf-form-input input-large" ng-model="ctrl.editTimeRaw.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>
|
||||||
|
<div class="popover-box__body gf-timepicker-relative-section">
|
||||||
<div ng-if="openFromPicker">
|
<ul ng-repeat="group in ctrl.timeOptions">
|
||||||
<datepicker ng-model="ctrl.absolute.fromJs" class="gf-timepicker-component" show-weeks="false" starting-day="ctrl.firstDayOfWeek" ng-change="ctrl.absoluteFromChanged()"></datepicker>
|
<li bindonce ng-repeat='option in group' ng-class="{active: option.active}">
|
||||||
|
<a ng-click="ctrl.setRelativeFilter(option)" bo-text="option.display"></a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="popover-box">
|
||||||
<label class="small">To:</label>
|
<div class="popover-box__header">
|
||||||
<div class="gf-form-inline">
|
<span class="popover-box__title">Custom range</span>
|
||||||
<div class="gf-form max-width-28">
|
|
||||||
<input type="text" class="gf-form-input input-large" ng-model="ctrl.editTimeRaw.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>
|
||||||
|
<form name="timeForm" class="popover-box__body gf-timepicker-absolute-section">
|
||||||
<div ng-if="openToPicker">
|
<label class="small">From:</label>
|
||||||
<datepicker ng-model="ctrl.absolute.toJs" class="gf-timepicker-component" show-weeks="false" starting-day="ctrl.firstDayOfWeek" ng-change="ctrl.absoluteToChanged()"></datepicker>
|
<div class="gf-form-inline">
|
||||||
</div>
|
<div class="gf-form max-width-28">
|
||||||
|
<input type="text" class="gf-form-input input-large" ng-model="ctrl.editTimeRaw.from" input-datetime>
|
||||||
<label class="small">Refreshing every:</label>
|
</div>
|
||||||
<div class="gf-form-inline">
|
<div class="gf-form">
|
||||||
<div class="gf-form max-width-28">
|
<button class="btn gf-form-btn btn-primary" type="button" ng-click="openFromPicker=!openFromPicker">
|
||||||
<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>
|
<i class="fa fa-calendar"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="gf-form">
|
|
||||||
<button type="submit" class="btn gf-form-btn btn-secondary" ng-click="ctrl.applyCustom();" ng-disabled="!timeForm.$valid">Apply</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div class="gf-timepicker-relative-section">
|
<div ng-if="openFromPicker">
|
||||||
<h3 class="section-heading">Quick ranges</h3>
|
<datepicker ng-model="ctrl.absolute.fromJs" class="gf-timepicker-component" show-weeks="false" starting-day="ctrl.firstDayOfWeek" ng-change="ctrl.absoluteFromChanged()"></datepicker>
|
||||||
<ul ng-repeat="group in ctrl.timeOptions">
|
</div>
|
||||||
<li bindonce ng-repeat='option in group' ng-class="{active: option.active}">
|
|
||||||
<a ng-click="ctrl.setRelativeFilter(option)" bo-text="option.display"></a>
|
|
||||||
</li>
|
<label class="small">To:</label>
|
||||||
</ul>
|
<div class="gf-form-inline">
|
||||||
|
<div class="gf-form max-width-28">
|
||||||
|
<input type="text" class="gf-form-input input-large" ng-model="ctrl.editTimeRaw.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" starting-day="ctrl.firstDayOfWeek" ng-change="ctrl.absoluteToChanged()"></datepicker>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label class="small">Refreshing every:</label>
|
||||||
|
<div class="gf-form-inline">
|
||||||
|
<div class="gf-form max-width-28">
|
||||||
|
<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-secondary" ng-click="ctrl.applyCustom();" ng-disabled="!timeForm.$valid">Apply</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -232,60 +232,60 @@ export default class TimePicker extends PureComponent<TimePickerProps, TimePicke
|
|||||||
const timeOptions = this.getTimeOptions();
|
const timeOptions = this.getTimeOptions();
|
||||||
return (
|
return (
|
||||||
<div ref={this.dropdownRef} className="gf-timepicker-dropdown">
|
<div ref={this.dropdownRef} className="gf-timepicker-dropdown">
|
||||||
<div className="gf-timepicker-absolute-section">
|
<div className="popover-box">
|
||||||
<h3 className="section-heading">Custom range</h3>
|
<div className="popover-box__header">
|
||||||
|
<span className="popover-box__title">Quick ranges</span>
|
||||||
<label className="small">From:</label>
|
|
||||||
<div className="gf-form-inline">
|
|
||||||
<div className="gf-form max-width-28">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
className="gf-form-input input-large timepicker-from"
|
|
||||||
value={fromRaw}
|
|
||||||
onChange={this.handleChangeFrom}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className="popover-box__body gf-timepicker-relative-section">
|
||||||
<label className="small">To:</label>
|
{Object.keys(timeOptions).map(section => {
|
||||||
<div className="gf-form-inline">
|
const group = timeOptions[section];
|
||||||
<div className="gf-form max-width-28">
|
return (
|
||||||
<input
|
<ul key={section}>
|
||||||
type="text"
|
{group.map(option => (
|
||||||
className="gf-form-input input-large timepicker-to"
|
<li className={option.active ? 'active' : ''} key={option.display}>
|
||||||
value={toRaw}
|
<a onClick={() => this.handleClickRelativeOption(option)}>{option.display}</a>
|
||||||
onChange={this.handleChangeTo}
|
</li>
|
||||||
/>
|
))}
|
||||||
</div>
|
</ul>
|
||||||
</div>
|
);
|
||||||
|
})}
|
||||||
{/* <label className="small">Refreshing every:</label>
|
|
||||||
<div className="gf-form-inline">
|
|
||||||
<div className="gf-form max-width-28">
|
|
||||||
<select className="gf-form-input input-medium" ng-options="f.value as f.text for f in ctrl.refresh.options"></select>
|
|
||||||
</div>
|
|
||||||
</div> */}
|
|
||||||
<div className="gf-form">
|
|
||||||
<button className="btn gf-form-btn btn-secondary" onClick={this.handleClickApply}>
|
|
||||||
Apply
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="gf-timepicker-relative-section">
|
<div className="popover-box">
|
||||||
<h3 className="section-heading">Quick ranges</h3>
|
<div className="popover-box__header">
|
||||||
{Object.keys(timeOptions).map(section => {
|
<span className="popover-box__title">Custom range</span>
|
||||||
const group = timeOptions[section];
|
</div>
|
||||||
return (
|
<div className="popover-box__body gf-timepicker-absolute-section">
|
||||||
<ul key={section}>
|
<label className="small">From:</label>
|
||||||
{group.map(option => (
|
<div className="gf-form-inline">
|
||||||
<li className={option.active ? 'active' : ''} key={option.display}>
|
<div className="gf-form max-width-28">
|
||||||
<a onClick={() => this.handleClickRelativeOption(option)}>{option.display}</a>
|
<input
|
||||||
</li>
|
type="text"
|
||||||
))}
|
className="gf-form-input input-large timepicker-from"
|
||||||
</ul>
|
value={fromRaw}
|
||||||
);
|
onChange={this.handleChangeFrom}
|
||||||
})}
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label className="small">To:</label>
|
||||||
|
<div className="gf-form-inline">
|
||||||
|
<div className="gf-form max-width-28">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
className="gf-form-input input-large timepicker-to"
|
||||||
|
value={toRaw}
|
||||||
|
onChange={this.handleChangeTo}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="gf-form">
|
||||||
|
<button className="btn gf-form-btn btn-secondary" onClick={this.handleClickApply}>
|
||||||
|
Apply
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -104,6 +104,7 @@
|
|||||||
@import 'components/thresholds';
|
@import 'components/thresholds';
|
||||||
@import 'components/toggle_button_group';
|
@import 'components/toggle_button_group';
|
||||||
@import 'components/value-mappings';
|
@import 'components/value-mappings';
|
||||||
|
@import 'components/popover-box';
|
||||||
|
|
||||||
// PAGES
|
// PAGES
|
||||||
@import 'pages/login';
|
@import 'pages/login';
|
||||||
|
|||||||
31
public/sass/components/_popover-box.scss
Normal file
31
public/sass/components/_popover-box.scss
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
.popover-box {
|
||||||
|
background-color: $popover-bg;
|
||||||
|
color: $popover-color;
|
||||||
|
border: 1px solid $popover-border-color;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popover-box__header {
|
||||||
|
background-color: $popover-border-color;
|
||||||
|
padding: 6px 10px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popover-box__title {
|
||||||
|
font-weight: $font-weight-semi-bold;
|
||||||
|
padding-right: $spacer;
|
||||||
|
overflow: hidden;
|
||||||
|
display: inline-block;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popover-box__body {
|
||||||
|
padding: 20px 10px 10px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popover-box__close {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
@ -66,9 +66,6 @@
|
|||||||
padding: 5px 8px;
|
padding: 5px 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.threshold-row-base {
|
|
||||||
}
|
|
||||||
|
|
||||||
.threshold-row-remove {
|
.threshold-row-remove {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
@ -13,23 +13,28 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.gf-timepicker-dropdown {
|
.gf-timepicker-dropdown {
|
||||||
position: absolute;
|
|
||||||
top: $navbarHeight;
|
|
||||||
right: 0;
|
|
||||||
padding: 10px 20px;
|
|
||||||
background-color: $page-bg;
|
background-color: $page-bg;
|
||||||
border-radius: 0 0 0 4px;
|
border-radius: 0 0 0 4px;
|
||||||
box-shadow: $search-shadow;
|
box-shadow: $search-shadow;
|
||||||
z-index: $zindex-dropdown;
|
z-index: $zindex-dropdown;
|
||||||
}
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: absolute;
|
||||||
|
right: 20px;
|
||||||
|
top: $navbarHeight;
|
||||||
|
width: 550px;
|
||||||
|
|
||||||
.gf-timepicker-absolute-section {
|
.popover-box {
|
||||||
width: 290px;
|
max-width: 100%;
|
||||||
float: left;
|
|
||||||
padding: 0 10px;
|
&:first-child {
|
||||||
select {
|
border-radius: $border-radius $border-radius 0 0;
|
||||||
width: 183px;
|
border-bottom: 0;
|
||||||
margin-bottom: 0;
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-radius: 0 0 $border-radius $border-radius;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -48,9 +53,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.gf-timepicker-relative-section {
|
.gf-timepicker-relative-section {
|
||||||
padding: 0 20px 0 30px;
|
|
||||||
min-height: 237px;
|
min-height: 237px;
|
||||||
float: left;
|
float: left;
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
float: left;
|
float: left;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user