Skip to content

N
nexpie-grafana-theme
Commit d0f8d034 by Torkel Ödegaard
Options

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

parents 12603010 2d296715
Showing with 149 additions and 108 deletions
public/app/features/dashboard/timepicker/timepicker.html
...@@ -24,60 +24,67 @@ ...@@ -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"> </div>
<input type="text" class="gf-form-input input-large" ng-model="ctrl.editTimeRaw.to" input-datetime> <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>
<div class="gf-form">
<button class="btn gf-form-btn btn-primary" type="button" ng-click="openToPicker=!openToPicker"> <div ng-if="openFromPicker">
<i class="fa fa-calendar"></i> <datepicker ng-model="ctrl.absolute.fromJs" class="gf-timepicker-component" show-weeks="false" starting-day="ctrl.firstDayOfWeek" ng-change="ctrl.absoluteFromChanged()"></datepicker>
</button>
</div> </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> <label class="small">To:</label>
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form max-width-28"> <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> <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>
<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>
</div>
</form>
<div class="gf-timepicker-relative-section"> <label class="small">Refreshing every:</label>
<h3 class="section-heading">Quick ranges</h3> <div class="gf-form-inline">
<ul ng-repeat="group in ctrl.timeOptions"> <div class="gf-form max-width-28">
<li bindonce ng-repeat='option in group' ng-class="{active: option.active}"> <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>
<a ng-click="ctrl.setRelativeFilter(option)" bo-text="option.display"></a> </div>
</li> <div class="gf-form">
</ul> <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>
public/app/features/explore/TimePicker.tsx
...@@ -232,61 +232,61 @@ export default class TimePicker extends PureComponent<TimePickerProps, TimePicke ...@@ -232,61 +232,61 @@ 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>
<div className="gf-form-inline"> <div className="popover-box__body gf-timepicker-relative-section">
<div className="gf-form max-width-28"> {Object.keys(timeOptions).map(section => {
<input const group = timeOptions[section];
type="text" return (
className="gf-form-input input-large timepicker-from" <ul key={section}>
value={fromRaw} {group.map(option => (
onChange={this.handleChangeFrom} <li className={option.active ? 'active' : ''} key={option.display}>
/> <a onClick={() => this.handleClickRelativeOption(option)}>{option.display}</a>
</div> </li>
))}
</ul>
);
})}
</div> </div>
</div>
<label className="small">To:</label> <div className="popover-box">
<div className="gf-form-inline"> <div className="popover-box__header">
<div className="gf-form max-width-28"> <span className="popover-box__title">Custom range</span>
<input
type="text"
className="gf-form-input input-large timepicker-to"
value={toRaw}
onChange={this.handleChangeTo}
/>
</div>
</div> </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> <label className="small">To:</label>
<div className="gf-form-inline"> <div className="gf-form-inline">
<div className="gf-form max-width-28"> <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> <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 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">
<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> </div>
); );
} }
......
public/sass/_grafana.scss
...@@ -104,6 +104,7 @@ ...@@ -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';
......
public/sass/components/_popover-box.scss 0 → 100644
.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;
}
public/sass/components/_thresholds.scss
...@@ -66,9 +66,6 @@ ...@@ -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;
......
public/sass/components/_timepicker.scss
...@@ -13,23 +13,28 @@ ...@@ -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 @@ ...@@ -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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment