diff --git a/src/components/context-menu/context-menu.css b/src/components/context-menu/context-menu.css index 5a02ce797d9498990738f75f497a299acf441608..32fc00f226f7e65b52649e1be6ab693d15e2b28a 100644 --- a/src/components/context-menu/context-menu.css +++ b/src/components/context-menu/context-menu.css @@ -17,14 +17,25 @@ z-index: $z-index-context-menu; } -.menu-item { +.menu-item, .menu-item-bordered { padding: 8px 12px; white-space: nowrap; cursor: pointer; transition: 0.1s ease; } +.menu-item-bordered { + border-top: 3px solid $text-primary; +} + +.menu-item:hover, .menu-item-bordered:hover { + color: white; +} + .menu-item:hover { background: $motion-primary; - color: white; +} + +.menu-item-bordered:hover { + background: $red-primary; } diff --git a/src/components/context-menu/context-menu.jsx b/src/components/context-menu/context-menu.jsx index 7d33fe641ef436415298bc43c1caa77bad9ad649..445ac222eb62557d1539c238e15ceae573cb0bd8 100644 --- a/src/components/context-menu/context-menu.jsx +++ b/src/components/context-menu/context-menu.jsx @@ -17,7 +17,16 @@ const StyledMenuItem = props => ( /> ); +const BorderedMenuItem = props => ( + <MenuItem + {...props} + attributes={{className: styles.menuItemBordered}} + /> +); + + export { + BorderedMenuItem, StyledContextMenu as ContextMenu, StyledMenuItem as MenuItem }; diff --git a/src/components/sprite-selector-item/sprite-selector-item.jsx b/src/components/sprite-selector-item/sprite-selector-item.jsx index ef5b85f1932ff0906dd050e796e336ec1c72408f..c1f86de49a9fc05893838ac5a208fdd0630d0308 100644 --- a/src/components/sprite-selector-item/sprite-selector-item.jsx +++ b/src/components/sprite-selector-item/sprite-selector-item.jsx @@ -5,7 +5,7 @@ import React from 'react'; import CloseButton from '../close-button/close-button.jsx'; import styles from './sprite-selector-item.css'; import {ContextMenuTrigger} from 'react-contextmenu'; -import {ContextMenu, MenuItem} from '../context-menu/context-menu.jsx'; +import {BorderedMenuItem, ContextMenu, MenuItem} from '../context-menu/context-menu.jsx'; import {FormattedMessage} from 'react-intl'; // react-contextmenu requires unique id to match trigger and context menu @@ -60,15 +60,6 @@ const SpriteSelectorItem = props => ( /> </MenuItem> ) : null} - {props.onDeleteButtonClick ? ( - <MenuItem onClick={props.onDeleteButtonClick}> - <FormattedMessage - defaultMessage="delete" - description="Menu item to delete in the right click menu" - id="gui.spriteSelectorItem.contextMenuDelete" - /> - </MenuItem> - ) : null } {props.onExportButtonClick ? ( <MenuItem onClick={props.onExportButtonClick}> <FormattedMessage @@ -78,6 +69,15 @@ const SpriteSelectorItem = props => ( /> </MenuItem> ) : null } + {props.onDeleteButtonClick ? ( + <BorderedMenuItem onClick={props.onDeleteButtonClick}> + <FormattedMessage + defaultMessage="delete" + description="Menu item to delete in the right click menu" + id="gui.spriteSelectorItem.contextMenuDelete" + /> + </BorderedMenuItem> + ) : null } </ContextMenu> ) : null} </ContextMenuTrigger>