IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* Explore: updates clear all button to responsive button

* Explore: update toolbar icons alignment

* Explore: adds responsive styles for explore icon alignment
This commit is contained in:
Lukas Siatka
2019-10-10 21:53:02 +02:00
committed by GitHub
parent 7349a6b96c
commit 4bd00491bd
3 changed files with 60 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
public/app/features/explore/ExploreToolbar.tsx
View File

@@ -251,7 +251,7 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
)}
{exploreId === 'left' && !splitted ? (
<div className="explore-toolbar-content-item">
<div className="explore-toolbar-content-item explore-icon-align">
<ResponsiveButton
splitted={splitted}
title="Split"
@@ -275,10 +275,14 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
</div>
)}
<div className="explore-toolbar-content-item">
<button className="btn navbar-button" onClick={this.onClearAll}>
Clear All
</button>
<div className="explore-toolbar-content-item explore-icon-align">
<ResponsiveButton
splitted={splitted}
title="Clear All"
onClick={this.onClearAll}
iconClassName="fa fa-fw fa-trash icon-margin-right"
disabled={isLive}
/>
</div>
<div className="explore-toolbar-content-item">
<RunButton

20
public/app/features/explore/ResponsiveButton.tsx
View File

@@ -15,6 +15,10 @@ type Props = {
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) => {
const defaultProps = {
iconSide: IconSide.left,
@@ -28,19 +32,9 @@ export const ResponsiveButton = (props: Props) => {
onClick={onClick}
disabled={disabled || false}
>
{iconClassName && iconSide === IconSide.left ? (
<>
<i className={`${iconClassName}`} />
&nbsp;
</>
) : null}
<span className="btn-title">{!splitted ? title : ''}</span>
{iconClassName && iconSide === IconSide.right ? (
<>
&nbsp;
<i className={`${iconClassName}`} />
</>
) : null}
{iconClassName && iconSide === IconSide.left ? <i className={`${iconClassName}`} /> : null}
<span className="btn-title">{!splitted ? formatBtnTitle(title, iconSide) : ''}</span>
{iconClassName && iconSide === IconSide.right ? <i className={`${iconClassName}`} /> : null}
</button>
);
};