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

wip

Browse Source
This commit is contained in:
Torkel Ödegaard 2018-12-12 12:51:39 +01:00
parent 21e1d7b05b
commit b6a5375af1
4 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/app/features/dashboard/dashgrid/VisualizationTab.tsx
View File

@ -159,7 +159,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
placeholder="" placeholder=""
onChange={this.onSearchQueryChange} onChange={this.onSearchQueryChange}
value={searchQuery} value={searchQuery}
ref={elem => (this.searchInput = elem)} ref={elem => elem && elem.focus()}
/> />
<i className="gf-form-input-icon fa fa-search" /> <i className="gf-form-input-icon fa fa-search" />
</label> </label>
@ -192,8 +192,12 @@ export class VisualizationTab extends PureComponent<Props, State> {
return ( return (
<EditorTabBody heading="Visualization" renderToolbar={this.renderToolbar} toolbarItems={[panelHelp]}> <EditorTabBody heading="Visualization" renderToolbar={this.renderToolbar} toolbarItems={[panelHelp]}>
{isVizPickerOpen && <VizTypePicker current={plugin} onTypeChanged={this.onTypeChanged} searchQuery={searchQuery} />} <>
{this.renderPanelOptions()} {isVizPickerOpen && (
<VizTypePicker current={plugin} onTypeChanged={this.onTypeChanged} searchQuery={searchQuery} />
)}
{this.renderPanelOptions()}
</>
</EditorTabBody> </EditorTabBody>
); );
} }

1
public/app/features/dashboard/dashgrid/VizTypePicker.tsx
View File

@ -43,7 +43,6 @@ export class VizTypePicker extends PureComponent<Props> {
key={plugin.id} key={plugin.id}
isCurrent={isCurrent} isCurrent={isCurrent}
plugin={plugin} plugin={plugin}
isSelected={false}
onClick={() => onTypeChanged(plugin)} onClick={() => onTypeChanged(plugin)}
/> />
); );

11
public/app/features/dashboard/dashgrid/VizTypePickerPlugin.tsx
View File

@ -1,32 +1,29 @@
import React from 'react'; import React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { PanelPlugin } from 'app/types/plugins'; import { PanelPlugin } from 'app/types/plugins';
interface Props { interface Props {
isSelected: boolean;
isCurrent: boolean; isCurrent: boolean;
plugin: PanelPlugin; plugin: PanelPlugin;
onClick: () => void; onClick: () => void;
onMouseEnter: () => void;
} }
const VizTypePickerPlugin = React.memo( const VizTypePickerPlugin = React.memo(
({ isSelected, isCurrent, plugin, onClick, onMouseEnter }: Props) => { ({ isCurrent, plugin, onClick }: Props) => {
const cssClass = classNames({ const cssClass = classNames({
'viz-picker__item': true, 'viz-picker__item': true,
'viz-picker__item--selected': isSelected,
'viz-picker__item--current': isCurrent, 'viz-picker__item--current': isCurrent,
}); });
return ( return (
<div className={cssClass} onClick={onClick} title={plugin.name} onMouseEnter={onMouseEnter}> <div className={cssClass} onClick={onClick} title={plugin.name}>
<div className="viz-picker__item-name">{plugin.name}</div> <div className="viz-picker__item-name">{plugin.name}</div>
<img className="viz-picker__item-img" src={plugin.info.logos.small} /> <img className="viz-picker__item-img" src={plugin.info.logos.small} />
</div> </div>
); );
}, },
(prevProps, nextProps) => { (prevProps, nextProps) => {
if (prevProps.isSelected === nextProps.isSelected && prevProps.isCurrent === nextProps.isCurrent) { if (prevProps.isCurrent === nextProps.isCurrent) {
return true; return true;
} }
return false; return false;

2
public/sass/components/_panel_editor.scss
View File

@ -165,7 +165,7 @@
border: 1px solid $orange; border: 1px solid $orange;
} }
&--selected { &:hover {
box-shadow: $panel-editor-viz-item-shadow-hover; box-shadow: $panel-editor-viz-item-shadow-hover;
background: $panel-editor-viz-item-bg-hover; background: $panel-editor-viz-item-bg-hover;
border: $panel-editor-viz-item-border-hover; border: $panel-editor-viz-item-border-hover;