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

Fix styling for vizPicker keyboard nav and change so only arrow up/down is OK to use

Browse Source
This commit is contained in:
Johannes Schill 2018-12-10 15:19:14 +01:00
parent ae5bc366c2
commit 856c0ee052
3 changed files with 21 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -50,10 +50,12 @@ export class VizTypePicker extends PureComponent<Props, State> {
};
onKeydown = (evt: KeyboardEvent) => {
if (evt.key === 'ArrowRight' || evt.key === 'ArrowDown') {
if (evt.key === 'ArrowDown') {
evt.preventDefault();
this.goRight();
}
if (evt.key === 'ArrowLeft' || evt.key === 'ArrowUp') {
if (evt.key === 'ArrowUp') {
evt.preventDefault();
this.goLeft();
}
if (evt.key === 'Enter') {
@ -84,6 +86,12 @@ export class VizTypePicker extends PureComponent<Props, State> {
return _.sortBy(panels, 'sort');
}
onMouseEnter = (mouseEnterIndex: number) => {
this.setState({
selected: mouseEnterIndex,
});
};
renderVizPlugin = (plugin: PanelPlugin, index: number) => {
const isSelected = this.state.selected === index;
const isCurrent = plugin.id === this.props.current.id;
@ -93,6 +101,9 @@ export class VizTypePicker extends PureComponent<Props, State> {
isSelected={isSelected}
isCurrent={isCurrent}
plugin={plugin}
onMouseEnter={() => {
this.onMouseEnter(index);
}}
onClick={() => this.props.onTypeChanged(plugin)}
/>
);

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

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

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

@ -157,32 +157,15 @@
padding-bottom: 6px;
transition: transform 1 ease;
&:hover {
box-shadow: $panel-editor-viz-item-shadow-hover;
background: $panel-editor-viz-item-bg-hover;
border: $panel-editor-viz-item-border-hover;
}
&--current {
box-shadow: 0 0 6px $orange;
border: 1px solid $orange;
&:hover {
box-shadow: 0 0 6px $orange;
border: 1px solid $orange;
background: $panel-editor-viz-item-bg-hover-active;
}
}
&--selected {
box-shadow: 0 0 6px $purple;
border: 1px solid $purple;
&:hover {
box-shadow: 0 0 6px $purple;
border: 1px solid $purple;
background: $panel-editor-viz-item-bg-hover-active;
}
box-shadow: $panel-editor-viz-item-shadow-hover;
background: $panel-editor-viz-item-bg-hover;
border: $panel-editor-viz-item-border-hover;
}
}