Skip to content

N
nexpie-grafana-theme
Commit 4bd00491 by Lukas Siatka Committed by GitHub
Options

Explore: updates clear all button to responsive button (#19719) 

* Explore: updates clear all button to responsive button

* Explore: update toolbar icons alignment

* Explore: adds responsive styles for explore icon alignment
parent 7349a6b9
Showing with 60 additions and 18 deletions
public/app/features/explore/ExploreToolbar.tsx
...@@ -251,7 +251,7 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> { ...@@ -251,7 +251,7 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
)} )}
{exploreId === 'left' && !splitted ? ( {exploreId === 'left' && !splitted ? (
<div className="explore-toolbar-content-item"> <div className="explore-toolbar-content-item explore-icon-align">
<ResponsiveButton <ResponsiveButton
splitted={splitted} splitted={splitted}
title="Split" title="Split"
...@@ -275,10 +275,14 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> { ...@@ -275,10 +275,14 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
</div> </div>
)} )}
<div className="explore-toolbar-content-item"> <div className="explore-toolbar-content-item explore-icon-align">
<button className="btn navbar-button" onClick={this.onClearAll}> <ResponsiveButton
Clear All splitted={splitted}
</button> title="Clear All"
onClick={this.onClearAll}
iconClassName="fa fa-fw fa-trash icon-margin-right"
disabled={isLive}
/>
</div> </div>
<div className="explore-toolbar-content-item"> <div className="explore-toolbar-content-item">
<RunButton <RunButton
......
public/app/features/explore/ResponsiveButton.tsx
...@@ -15,6 +15,10 @@ type Props = { ...@@ -15,6 +15,10 @@ type Props = {
disabled?: boolean; disabled?: boolean;
}; };
function formatBtnTitle(title: string, iconSide?: string): string {
return iconSide === IconSide.left ? '\xA0' + title : iconSide === IconSide.right ? title + '\xA0' : title;
}
export const ResponsiveButton = (props: Props) => { export const ResponsiveButton = (props: Props) => {
const defaultProps = { const defaultProps = {
iconSide: IconSide.left, iconSide: IconSide.left,
...@@ -28,19 +32,9 @@ export const ResponsiveButton = (props: Props) => { ...@@ -28,19 +32,9 @@ export const ResponsiveButton = (props: Props) => {
onClick={onClick} onClick={onClick}
disabled={disabled || false} disabled={disabled || false}
> >
{iconClassName && iconSide === IconSide.left ? ( {iconClassName && iconSide === IconSide.left ? <i className={`${iconClassName}`} /> : null}
<> <span className="btn-title">{!splitted ? formatBtnTitle(title, iconSide) : ''}</span>
<i className={`${iconClassName}`} /> {iconClassName && iconSide === IconSide.right ? <i className={`${iconClassName}`} /> : null}
&nbsp;
</>
) : null}
<span className="btn-title">{!splitted ? title : ''}</span>
{iconClassName && iconSide === IconSide.right ? (
<>
&nbsp;
<i className={`${iconClassName}`} />
</>
) : null}
</button> </button>
); );
}; };
public/sass/pages/_explore.scss
.icon-margin-right { .icon-margin-right {
margin-right: 0.25em; margin-right: 0.25em;
@media only screen and (max-width: 1320px) {
margin-right: 0;
}
} }
.icon-margin-left { .icon-margin-left {
margin-left: 0.25em; margin-left: 0.25em;
@media only screen and (max-width: 1320px) {
margin-left: 0;
}
} }
.datasource-picker { .datasource-picker {
...@@ -126,6 +134,29 @@ ...@@ -126,6 +134,29 @@
} }
} }
.explore-icon-align {
.navbar-button {
i {
position: relative;
top: -1px;
@media only screen and (max-width: 1320px) {
margin: 0 -3px;
}
}
}
}
.explore-toolbar.splitted {
.explore-icon-align {
.navbar-button {
i {
margin: 0 -3px;
}
}
}
}
.explore { .explore {
display: flex; display: flex;
flex: 1 1 auto; flex: 1 1 auto;
...@@ -221,6 +252,7 @@ ...@@ -221,6 +252,7 @@
from { from {
color: $text-color-faint; color: $text-color-faint;
} }
to { to {
color: $blue; color: $blue;
} }
...@@ -266,51 +298,63 @@ ...@@ -266,51 +298,63 @@
border-bottom: 2px solid $body-bg; border-bottom: 2px solid $body-bg;
height: 2em; height: 2em;
} }
.ReactTable .rt-thead.-header .rt-th { .ReactTable .rt-thead.-header .rt-th {
text-align: left; text-align: left;
color: $blue; color: $blue;
font-weight: $font-weight-semi-bold; font-weight: $font-weight-semi-bold;
} }
.ReactTable .rt-thead .rt-td, .ReactTable .rt-thead .rt-td,
.ReactTable .rt-thead .rt-th { .ReactTable .rt-thead .rt-th {
padding: 0.45em 0 0.45em 1.1em; padding: 0.45em 0 0.45em 1.1em;
border-right: none; border-right: none;
box-shadow: none; box-shadow: none;
} }
.ReactTable .rt-tbody .rt-td { .ReactTable .rt-tbody .rt-td {
padding: 0.45em 0 0.45em 1.1em; padding: 0.45em 0 0.45em 1.1em;
border-bottom: 2px solid $body-bg; border-bottom: 2px solid $body-bg;
border-right: 2px solid $body-bg; border-right: 2px solid $body-bg;
} }
.ReactTable .rt-tbody .rt-td:last-child { .ReactTable .rt-tbody .rt-td:last-child {
border-right: none; border-right: none;
} }
.ReactTable .-pagination { .ReactTable .-pagination {
border-top: none; border-top: none;
box-shadow: none; box-shadow: none;
margin-top: $space-sm; margin-top: $space-sm;
} }
.ReactTable .-pagination .-btn { .ReactTable .-pagination .-btn {
color: $blue; color: $blue;
background: $list-item-bg; background: $list-item-bg;
} }
.ReactTable .-pagination input, .ReactTable .-pagination input,
.ReactTable .-pagination select { .ReactTable .-pagination select {
color: $input-color; color: $input-color;
background-color: $input-bg; background-color: $input-bg;
} }
.ReactTable .-loading { .ReactTable .-loading {
background: $input-bg; background: $input-bg;
} }
.ReactTable .-loading.-active { .ReactTable .-loading.-active {
opacity: 0.8; opacity: 0.8;
} }
.ReactTable .-loading > div { .ReactTable .-loading > div {
color: $input-color; color: $input-color;
} }
.ReactTable .rt-tr .rt-td:last-child { .ReactTable .rt-tr .rt-td:last-child {
text-align: right; text-align: right;
} }
.ReactTable .rt-noData { .ReactTable .rt-noData {
top: 60px; top: 60px;
z-index: inherit; z-index: inherit;
......
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