Clean up context menu toggle in view mode (#19558)
* Clean up context menu toggle in view mode - hide unless the menu is opened or the panel is being hovered over - use a down arrow in view mode, a gear in edit mode * Use a different icon * and the color='text' line * update jest snapshots
This commit is contained in:
parent
3dae391e89
commit
8318449120
|
@ -29,7 +29,7 @@ exports[`DashboardPanel matches snapshot 1`] = `
|
|||
>
|
||||
<button
|
||||
aria-label="Panel options"
|
||||
class="euiButtonIcon euiButtonIcon--primary"
|
||||
class="euiButtonIcon euiButtonIcon--text"
|
||||
data-test-subj="dashboardPanelToggleMenuIcon"
|
||||
type="button"
|
||||
>
|
||||
|
|
|
@ -26,10 +26,12 @@ import {
|
|||
EuiButtonIcon,
|
||||
} from '@elastic/eui';
|
||||
|
||||
export function PanelOptionsMenu({ toggleContextMenu, isPopoverOpen, closeContextMenu, panels }) {
|
||||
export function PanelOptionsMenu({ toggleContextMenu, isPopoverOpen, closeContextMenu, panels, isViewMode }) {
|
||||
const button = (
|
||||
<EuiButtonIcon
|
||||
iconType="gear"
|
||||
iconType={isViewMode ? 'boxesHorizontal' : 'gear'}
|
||||
color="text"
|
||||
className={isViewMode && !isPopoverOpen ? 'viewModeOpenContextMenuIcon' : ''}
|
||||
aria-label="Panel options"
|
||||
data-test-subj="dashboardPanelToggleMenuIcon"
|
||||
onClick={toggleContextMenu}
|
||||
|
@ -60,4 +62,5 @@ PanelOptionsMenu.propTypes = {
|
|||
toggleContextMenu: PropTypes.func,
|
||||
closeContextMenu: PropTypes.func,
|
||||
isPopoverOpen: PropTypes.bool,
|
||||
isViewMode: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
|
|
@ -47,8 +47,10 @@ import {
|
|||
getEmbeddableTitle,
|
||||
getContainerState,
|
||||
getVisibleContextMenuPanelId,
|
||||
getViewMode,
|
||||
} from '../../selectors';
|
||||
import { DashboardContextMenuPanel } from 'ui/dashboard_panel_actions';
|
||||
import { DashboardViewMode } from '../../dashboard_view_mode';
|
||||
|
||||
const mapStateToProps = ({ dashboard }, { panelId }) => {
|
||||
const embeddable = getEmbeddable(dashboard, panelId);
|
||||
|
@ -56,12 +58,14 @@ const mapStateToProps = ({ dashboard }, { panelId }) => {
|
|||
const embeddableTitle = getEmbeddableTitle(dashboard, panelId);
|
||||
const containerState = getContainerState(dashboard, panelId);
|
||||
const visibleContextMenuPanelId = getVisibleContextMenuPanelId(dashboard);
|
||||
const viewMode = getViewMode(dashboard);
|
||||
return {
|
||||
panelTitle: panel.title === undefined ? embeddableTitle : panel.title,
|
||||
editUrl: embeddable ? getEmbeddableEditUrl(dashboard, panelId) : null,
|
||||
isExpanded: getMaximizedPanelId(dashboard) === panelId,
|
||||
containerState,
|
||||
visibleContextMenuPanelId,
|
||||
isViewMode: viewMode === DashboardViewMode.VIEW,
|
||||
};
|
||||
};
|
||||
|
||||
|
@ -83,7 +87,7 @@ const mapDispatchToProps = (dispatch, { panelId }) => ({
|
|||
});
|
||||
|
||||
const mergeProps = (stateProps, dispatchProps, ownProps) => {
|
||||
const { isExpanded, panelTitle, containerState, visibleContextMenuPanelId } = stateProps;
|
||||
const { isExpanded, panelTitle, containerState, visibleContextMenuPanelId, isViewMode } = stateProps;
|
||||
const isPopoverOpen = visibleContextMenuPanelId === ownProps.panelId;
|
||||
const {
|
||||
onMaximizePanel,
|
||||
|
@ -139,6 +143,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
|
|||
toggleContextMenu,
|
||||
closeContextMenu: closeMyContextMenuPanel,
|
||||
isPopoverOpen,
|
||||
isViewMode,
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
@ -340,7 +340,7 @@ dashboard-viewport-provider {
|
|||
* 1. Use opacity to make this element accessible to screen readers and keyboard.
|
||||
* 2. Show on focus to enable keyboard accessibility.
|
||||
*/
|
||||
.viewModeExpandPanelToggle {
|
||||
.viewModeOpenContextMenuIcon {
|
||||
opacity: 0; /* 1 */
|
||||
&:focus {
|
||||
opacity: 1; /* 2 */
|
||||
|
@ -354,7 +354,7 @@ dashboard-viewport-provider {
|
|||
.visualize-show-spy {
|
||||
visibility: visible;
|
||||
}
|
||||
.viewModeExpandPanelToggle {
|
||||
.viewModeOpenContextMenuIcon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue