apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Quick refactoring of time picker styles, needs a much bigger redesign

Browse Source
pull/14603/head
Torkel Ödegaard 7 years ago
parent 1260301099 2d296715ec
commit d0f8d034df
6 changed files with 149 additions and 108 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 95
      public/app/features/dashboard/timepicker/timepicker.html
  2. 96
      public/app/features/explore/TimePicker.tsx
  3. 1
      public/sass/_grafana.scss
  4. 31
      public/sass/components/_popover-box.scss
  5. 3
      public/sass/components/_thresholds.scss
  6. 31
      public/sass/components/_timepicker.scss

95
public/app/features/dashboard/timepicker/timepicker.html
Unescape View File

@ -24,60 +24,67 @@
</div>
<div ng-if="ctrl.isOpen" class="gf-timepicker-dropdown">
<form name="timeForm" class="gf-timepicker-absolute-section">
<h3 class="section-heading">Custom range</h3>
<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 class="popover-box">
<div class="popover-box__header">
<span class="popover-box__title">Quick ranges</span>
</div>
<div ng-if="openFromPicker">
<datepicker ng-model="ctrl.absolute.fromJs" class="gf-timepicker-component" show-weeks="false" starting-day="ctrl.firstDayOfWeek" ng-change="ctrl.absoluteFromChanged()"></datepicker>
<div class="popover-box__body gf-timepicker-relative-section">
<ul ng-repeat="group in ctrl.timeOptions">
<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>
<label class="small">To:</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.to" input-datetime>
<div class="popover-box">
<div class="popover-box__header">
<span class="popover-box__title">Custom range</span>
</div>
<form name="timeForm" class="popover-box__body gf-timepicker-absolute-section">
<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 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 ng-if="openFromPicker">
<datepicker ng-model="ctrl.absolute.fromJs" class="gf-timepicker-component" show-weeks="false" starting-day="ctrl.firstDayOfWeek" ng-change="ctrl.absoluteFromChanged()"></datepicker>
</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>
<label class="small">To:</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.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 class="gf-form">
<button type="submit" class="btn gf-form-btn btn-secondary" ng-click="ctrl.applyCustom();" ng-disabled="!timeForm.$valid">Apply</button>
<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>
</div>
</form>
<div class="gf-timepicker-relative-section">
<h3 class="section-heading">Quick ranges</h3>
<ul ng-repeat="group in ctrl.timeOptions">
<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>
<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>

96
public/app/features/explore/TimePicker.tsx
Unescape View File

@ -232,61 +232,61 @@ export default class TimePicker extends PureComponent<TimePickerProps, TimePicke
const timeOptions = this.getTimeOptions();
return (
<div ref={this.dropdownRef} className="gf-timepicker-dropdown">
<div className="gf-timepicker-absolute-section">
<h3 className="section-heading">Custom range</h3>
<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 className="popover-box">
<div className="popover-box__header">
<span className="popover-box__title">Quick ranges</span>
</div>
<div className="popover-box__body gf-timepicker-relative-section">
{Object.keys(timeOptions).map(section => {
const group = timeOptions[section];
return (
<ul key={section}>
{group.map(option => (
<li className={option.active ? 'active' : ''} key={option.display}>
<a onClick={() => this.handleClickRelativeOption(option)}>{option.display}</a>
</li>
))}
</ul>
);
})}
</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 className="popover-box">
<div className="popover-box__header">
<span className="popover-box__title">Custom range</span>
</div>
<div className="popover-box__body gf-timepicker-absolute-section">
<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>
{/* <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>
<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 className="gf-form">
<button className="btn gf-form-btn btn-secondary" onClick={this.handleClickApply}>
Apply
</button>
</div>
</div>
<div className="gf-timepicker-relative-section">
<h3 className="section-heading">Quick ranges</h3>
{Object.keys(timeOptions).map(section => {
const group = timeOptions[section];
return (
<ul key={section}>
{group.map(option => (
<li className={option.active ? 'active' : ''} key={option.display}>
<a onClick={() => this.handleClickRelativeOption(option)}>{option.display}</a>
</li>
))}
</ul>
);
})}
</div>
</div>
);
}

1
public/sass/_grafana.scss
Unescape View File

@ -104,6 +104,7 @@
@import 'components/thresholds';
@import 'components/toggle_button_group';
@import 'components/value-mappings';
@import 'components/popover-box';
// PAGES
@import 'pages/login';

31
public/sass/components/_popover-box.scss
Unescape View 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;
}

3
public/sass/components/_thresholds.scss
Unescape View File

@ -66,9 +66,6 @@
padding: 5px 8px;
}
.threshold-row-base {
}
.threshold-row-remove {
display: flex;
align-items: center;

31
public/sass/components/_timepicker.scss
Unescape View File

@ -13,23 +13,28 @@
}
.gf-timepicker-dropdown {
position: absolute;
top: $navbarHeight;
right: 0;
padding: 10px 20px;
background-color: $page-bg;
border-radius: 0 0 0 4px;
box-shadow: $search-shadow;
z-index: $zindex-dropdown;
}
display: flex;
flex-direction: column;
position: absolute;
right: 20px;
top: $navbarHeight;
width: 550px;
.gf-timepicker-absolute-section {
width: 290px;
float: left;
padding: 0 10px;
select {
width: 183px;
margin-bottom: 0;
.popover-box {
max-width: 100%;
&:first-child {
border-radius: $border-radius $border-radius 0 0;
border-bottom: 0;
}
&:last-child {
border-radius: 0 0 $border-radius $border-radius;
}
}
}
@ -48,9 +53,9 @@
}
.gf-timepicker-relative-section {
padding: 0 20px 0 30px;
min-height: 237px;
float: left;
ul {
list-style: none;
float: left;

Write Preview
Loading…
Cancel
Save