Skip to content

N
nexpie-grafana-theme
Commit 032a82fe by Hugo Häggmark
Options

Simplified some styles and dom elements

parent 9caaf250
Showing with 77 additions and 278 deletions
public/app/features/explore/ExploreToolbar.tsx
......@@ -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',
......
public/app/features/explore/TimePicker.tsx
......@@ -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">&nbsp; Refresh every {refreshInterval}</span> : null}
</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">&nbsp; 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>
......
public/sass/pages/_explore.scss
.timepicker-small-screens,
.timepicker-small-screens-splitted,
.small-screens {
display: none;
}
......@@ -13,8 +11,10 @@
}
.datasource-picker {
min-width: 200px;
max-width: 200px;
.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 {
display: none;
}
.timepicker-small-screens-splitted {
display: inline-block;
.timepicker-splitted {
.timepicker-rangestring {
display: none;
}
}
}
@media only screen and (max-width: 1070px) {
.timepicker-large-screens {
display: none;
}
.timepicker-small-screens {
display: inline-block;
.timepicker {
.timepicker-rangestring {
display: none;
}
}
}
@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;
// }
// }
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