mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Simplified some styles and dom elements
This commit is contained in:
Hugo Häggmark
parent
9caaf25078
commit
032a82feed
@ -20,6 +20,41 @@ interface Props {
|
||||
onSplit: () => void;
|
||||
}
|
||||
|
||||
const createDatasourcePicker = (props: Props) => {
|
||||
const { exploreDatasources, selectedDatasource } = props;
|
||||
|
||||
return (
|
||||
<DataSourcePicker
|
||||
onChange={props.onChangeDatasource}
|
||||
datasources={exploreDatasources}
|
||||
current={selectedDatasource}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const createResponsiveButton = (options: {
|
||||
splitted: boolean;
|
||||
title: string;
|
||||
onClick: () => void;
|
||||
buttonClassName?: string;
|
||||
iconClassName?: string;
|
||||
}) => {
|
||||
const { title, onClick, buttonClassName, iconClassName, splitted } = options;
|
||||
|
||||
return (
|
||||
<button className={`btn navbar-button ${buttonClassName ? buttonClassName : ''}`} onClick={onClick}>
|
||||
<span className="btn-title">{!splitted ? title : ''}</span>
|
||||
{iconClassName ? <i className={iconClassName} /> : null}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
const createSplittedClassName = (options: { splitted: boolean; className: string }) => {
|
||||
const { className, splitted } = options;
|
||||
|
||||
return splitted ? `${className}-splitted` : className;
|
||||
};
|
||||
|
||||
export class ExploreToolbar extends PureComponent<Props, {}> {
|
||||
/**
|
||||
* Timepicker to control scanning
|
||||
@ -29,58 +64,14 @@ export class ExploreToolbar extends PureComponent<Props, {}> {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.timepickerRef = React.createRef();
|
||||
this.createResponsiveButton = this.createResponsiveButton.bind(this);
|
||||
this.createDatasourcePicker = this.createDatasourcePicker.bind(this);
|
||||
this.createSplittedClassName = this.createSplittedClassName.bind(this);
|
||||
}
|
||||
|
||||
createDatasourcePicker() {
|
||||
const { exploreDatasources, selectedDatasource } = this.props;
|
||||
|
||||
return (
|
||||
<DataSourcePicker
|
||||
onChange={this.props.onChangeDatasource}
|
||||
datasources={exploreDatasources}
|
||||
current={selectedDatasource}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
createResponsiveButton(options: {
|
||||
title: string;
|
||||
onClick: () => void;
|
||||
buttonClassName?: string;
|
||||
iconClassName?: string;
|
||||
}) {
|
||||
const { splitted } = this.props;
|
||||
const { title, onClick, buttonClassName, iconClassName } = options;
|
||||
|
||||
return (
|
||||
<>
|
||||
<button className={`btn navbar-button large-screens ${buttonClassName && buttonClassName}`} onClick={onClick}>
|
||||
{!splitted ? title : ''}
|
||||
{iconClassName && <i className={iconClassName} />}
|
||||
</button>
|
||||
<button className={`btn navbar-button small-screens ${buttonClassName && buttonClassName}`} onClick={onClick}>
|
||||
{iconClassName && <i className={iconClassName} />}
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
createSplittedClassName(className: string) {
|
||||
const { splitted } = this.props;
|
||||
|
||||
return splitted ? `${className}-splitted` : className;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { datasourceMissing, exploreId, loading, range, splitted } = this.props;
|
||||
const toolbar = this.createSplittedClassName('toolbar');
|
||||
const toolbarItem = this.createSplittedClassName('toolbar-item');
|
||||
const toolbarHeader = this.createSplittedClassName('toolbar-header');
|
||||
const timepickerLarge = this.createSplittedClassName('toolbar-content-item timepicker-large-screens');
|
||||
const timepickerSmall = this.createSplittedClassName('toolbar-content-item timepicker-small-screens');
|
||||
const toolbar = createSplittedClassName({ splitted, className: 'toolbar' });
|
||||
const toolbarItem = createSplittedClassName({ splitted, className: 'toolbar-item' });
|
||||
const toolbarHeader = createSplittedClassName({ splitted, className: 'toolbar-header' });
|
||||
const timepicker = createSplittedClassName({ splitted, className: 'toolbar-content-item timepicker' });
|
||||
|
||||
return (
|
||||
<div className={toolbar}>
|
||||
@ -88,7 +79,7 @@ export class ExploreToolbar extends PureComponent<Props, {}> {
|
||||
<div className={toolbarHeader}>
|
||||
<div className="toolbar-header-title">
|
||||
{exploreId === 'left' && (
|
||||
<a>
|
||||
<a className="navbar-page-btn">
|
||||
<i className="fa fa-rocket fa-fw" />
|
||||
Explore
|
||||
</a>
|
||||
@ -96,7 +87,7 @@ export class ExploreToolbar extends PureComponent<Props, {}> {
|
||||
</div>
|
||||
<div className="toolbar-header-datasource large-screens">
|
||||
<div className="datasource-picker">
|
||||
{!datasourceMissing && !splitted ? this.createDatasourcePicker() : null}
|
||||
{!datasourceMissing && !splitted ? createDatasourcePicker(this.props) : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className="toolbar-header-close">
|
||||
@ -110,40 +101,28 @@ export class ExploreToolbar extends PureComponent<Props, {}> {
|
||||
</div>
|
||||
<div className={toolbarItem}>
|
||||
{!datasourceMissing && splitted ? (
|
||||
<div className="datasource-picker">{this.createDatasourcePicker()}</div>
|
||||
<div className="datasource-picker">{createDatasourcePicker(this.props)}</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div className={toolbarItem}>
|
||||
<div className="toolbar-content">
|
||||
{!datasourceMissing && !splitted ? (
|
||||
<div className="toolbar-content-item small-screens">
|
||||
<div className="datasource-picker">{this.createDatasourcePicker()}</div>
|
||||
<div className="datasource-picker">{createDatasourcePicker(this.props)}</div>
|
||||
</div>
|
||||
) : null}
|
||||
{exploreId === 'left' && !splitted ? (
|
||||
<div className="toolbar-content-item">
|
||||
{this.createResponsiveButton({
|
||||
{createResponsiveButton({
|
||||
splitted,
|
||||
title: 'Split',
|
||||
onClick: this.props.onSplit,
|
||||
iconClassName: 'fa fa-fw fa-columns',
|
||||
})}
|
||||
</div>
|
||||
) : null}
|
||||
<div className={timepickerLarge}>
|
||||
<TimePicker
|
||||
ref={this.timepickerRef}
|
||||
range={range}
|
||||
onChangeTime={this.props.onChangeTime}
|
||||
iconOnly={false}
|
||||
/>
|
||||
</div>
|
||||
<div className={timepickerSmall}>
|
||||
<TimePicker
|
||||
ref={this.timepickerRef}
|
||||
range={range}
|
||||
onChangeTime={this.props.onChangeTime}
|
||||
iconOnly={true}
|
||||
/>
|
||||
<div className={timepicker}>
|
||||
<TimePicker ref={this.timepickerRef} range={range} onChangeTime={this.props.onChangeTime} />
|
||||
</div>
|
||||
<div className="toolbar-content-item">
|
||||
<button className="btn navbar-button navbar-button--no-icon" onClick={this.props.onClearAll}>
|
||||
@ -151,7 +130,8 @@ export class ExploreToolbar extends PureComponent<Props, {}> {
|
||||
</button>
|
||||
</div>
|
||||
<div className="toolbar-content-item">
|
||||
{this.createResponsiveButton({
|
||||
{createResponsiveButton({
|
||||
splitted,
|
||||
title: 'Run Query',
|
||||
onClick: this.props.onRunQuery,
|
||||
buttonClassName: 'navbar-button--primary',
|
||||
|
||||
@ -39,7 +39,6 @@ interface TimePickerProps {
|
||||
isUtc?: boolean;
|
||||
range?: RawTimeRange;
|
||||
onChangeTime?: (range: RawTimeRange, scanning?: boolean) => void;
|
||||
iconOnly?: boolean;
|
||||
}
|
||||
|
||||
interface TimePickerState {
|
||||
@ -293,7 +292,6 @@ export default class TimePicker extends PureComponent<TimePickerProps, TimePicke
|
||||
}
|
||||
|
||||
render() {
|
||||
const { iconOnly } = this.props;
|
||||
const { isUtc, rangeString, refreshInterval } = this.state;
|
||||
|
||||
return (
|
||||
@ -302,18 +300,12 @@ export default class TimePicker extends PureComponent<TimePickerProps, TimePicke
|
||||
<button className="btn navbar-button navbar-button--tight timepicker-left" onClick={this.handleClickLeft}>
|
||||
<i className="fa fa-chevron-left" />
|
||||
</button>
|
||||
{iconOnly ? (
|
||||
<button className="btn navbar-button gf-timepicker-nav-btn" onClick={this.handleClickPicker}>
|
||||
<i className="fa fa-clock-o" />
|
||||
</button>
|
||||
) : (
|
||||
<button className="btn navbar-button gf-timepicker-nav-btn" onClick={this.handleClickPicker}>
|
||||
<i className="fa fa-clock-o" />
|
||||
<span className="timepicker-rangestring">{rangeString}</span>
|
||||
{isUtc ? <span className="gf-timepicker-utc">UTC</span> : null}
|
||||
{refreshInterval ? <span className="text-warning"> Refresh every {refreshInterval}</span> : null}
|
||||
</button>
|
||||
)}
|
||||
<button className="btn navbar-button navbar-button--tight timepicker-right" onClick={this.handleClickRight}>
|
||||
<i className="fa fa-chevron-right" />
|
||||
</button>
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
.timepicker-small-screens,
|
||||
.timepicker-small-screens-splitted,
|
||||
.small-screens {
|
||||
display: none;
|
||||
}
|
||||
@ -13,8 +11,10 @@
|
||||
}
|
||||
|
||||
.datasource-picker {
|
||||
.ds-picker {
|
||||
min-width: 200px;
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidemenu-open {
|
||||
@ -69,6 +69,11 @@
|
||||
|
||||
.toolbar-header-title {
|
||||
color: darken($link-color, 5%);
|
||||
.fa {
|
||||
font-size: 100%;
|
||||
opacity: 0.75;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-header-datasource {
|
||||
@ -94,26 +99,22 @@
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1545px) {
|
||||
.timepicker-large-screens-splitted {
|
||||
.timepicker-splitted {
|
||||
.timepicker-rangestring {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.timepicker-small-screens-splitted {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1070px) {
|
||||
.timepicker-large-screens {
|
||||
.timepicker {
|
||||
.timepicker-rangestring {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.timepicker-small-screens {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
@media only screen and (max-width: 800px) {
|
||||
.large-screens {
|
||||
display: none;
|
||||
}
|
||||
@ -147,9 +148,10 @@
|
||||
padding: 5px 2px;
|
||||
}
|
||||
|
||||
.datasource-picker > div > .ds-picker {
|
||||
min-width: 160px;
|
||||
max-width: 160px;
|
||||
.btn.navbar-button {
|
||||
.btn-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -450,178 +452,3 @@
|
||||
margin: $panel-margin/2 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// .explore {
|
||||
// flex: 1 1 auto;
|
||||
|
||||
// &-container {
|
||||
// padding: $dashboard-padding;
|
||||
// }
|
||||
|
||||
// &-wrapper {
|
||||
// display: flex;
|
||||
|
||||
// > .explore-split {
|
||||
// width: 50%;
|
||||
// }
|
||||
// }
|
||||
|
||||
// // Push split button a bit
|
||||
// .explore-first-button {
|
||||
// margin-left: 15px;
|
||||
// }
|
||||
|
||||
// .explore-panel {
|
||||
// margin-top: $panel-margin;
|
||||
// }
|
||||
|
||||
// .explore-panel__body {
|
||||
// padding: $panel-padding;
|
||||
// }
|
||||
|
||||
// .explore-panel__header {
|
||||
// padding: $panel-padding;
|
||||
// padding-top: 5px;
|
||||
// padding-bottom: 0;
|
||||
// display: flex;
|
||||
// cursor: pointer;
|
||||
// margin-bottom: 5px;
|
||||
// transition: all 0.1s linear;
|
||||
// }
|
||||
|
||||
// .explore-panel__header-label {
|
||||
// font-weight: 500;
|
||||
// margin-right: $panel-margin;
|
||||
// font-size: $font-size-h6;
|
||||
// box-shadow: $text-shadow-faint;
|
||||
// }
|
||||
|
||||
// .explore-panel__header-buttons {
|
||||
// margin-right: $panel-margin;
|
||||
// font-size: $font-size-lg;
|
||||
// line-height: $font-size-h6;
|
||||
// }
|
||||
|
||||
// // Make sure wrap buttons around on small screens
|
||||
// .navbar {
|
||||
// flex-wrap: wrap;
|
||||
// height: auto;
|
||||
// }
|
||||
|
||||
// .navbar-page-btn {
|
||||
// margin-right: 1rem;
|
||||
|
||||
// // Explore icon in header
|
||||
// .fa {
|
||||
// font-size: 100%;
|
||||
// opacity: 0.75;
|
||||
// margin-right: 0.5em;
|
||||
// }
|
||||
// }
|
||||
|
||||
// // Toggle mode
|
||||
// .navbar-button.active {
|
||||
// color: $btn-active-text-color;
|
||||
// background-color: $btn-active-bg;
|
||||
// }
|
||||
|
||||
// .navbar-button--no-icon {
|
||||
// line-height: 18px;
|
||||
// }
|
||||
|
||||
// .result-options {
|
||||
// margin: 2 * $panel-margin 0;
|
||||
// }
|
||||
|
||||
// .time-series-disclaimer {
|
||||
// width: 300px;
|
||||
// margin: $panel-margin auto;
|
||||
// padding: 10px 0;
|
||||
// border-radius: $border-radius;
|
||||
// text-align: center;
|
||||
// background-color: $panel-bg;
|
||||
|
||||
// .disclaimer-icon {
|
||||
// color: $yellow;
|
||||
// margin-right: $panel-margin/2;
|
||||
// }
|
||||
|
||||
// .show-all-time-series {
|
||||
// cursor: pointer;
|
||||
// color: $external-link-color;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .navbar .elapsed-time {
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// right: 0;
|
||||
// top: 3.5rem;
|
||||
// text-align: center;
|
||||
// font-size: 0.8rem;
|
||||
// }
|
||||
|
||||
// .graph-legend {
|
||||
// flex-wrap: wrap;
|
||||
// }
|
||||
|
||||
// .explore-panel__loader {
|
||||
// height: 2px;
|
||||
// position: relative;
|
||||
// overflow: hidden;
|
||||
// background: none;
|
||||
// margin: $panel-margin / 2;
|
||||
// transition: background-color 1s ease;
|
||||
// }
|
||||
|
||||
// .explore-panel__loader--active {
|
||||
// background: $text-color-faint;
|
||||
// }
|
||||
|
||||
// .explore-panel__loader--active:after {
|
||||
// content: ' ';
|
||||
// display: block;
|
||||
// width: 25%;
|
||||
// top: 0;
|
||||
// top: -50%;
|
||||
// height: 250%;
|
||||
// position: absolute;
|
||||
// animation: loader 2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
|
||||
// animation-iteration-count: 100;
|
||||
// background: $blue;
|
||||
// }
|
||||
|
||||
// @keyframes loader {
|
||||
// from {
|
||||
// left: -25%;
|
||||
// }
|
||||
// to {
|
||||
// left: 100%;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .datasource-picker {
|
||||
// min-width: 200px;
|
||||
// }
|
||||
|
||||
// .timepicker {
|
||||
// display: flex;
|
||||
|
||||
// &-rangestring {
|
||||
// margin-left: 0.5em;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .run-icon {
|
||||
// margin-left: 0.25em;
|
||||
// transform: rotate(90deg);
|
||||
// }
|
||||
|
||||
// .relative {
|
||||
// position: relative;
|
||||
// }
|
||||
|
||||
// .link {
|
||||
// text-decoration: underline;
|
||||
// }
|
||||
// }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user