diff --git a/src/components/context-menu/context-menu.css b/src/components/context-menu/context-menu.css index 5a02ce797d9498990738f75f497a299acf441608..84e2699f0a1424fba8276cdb35bd61c630598d9d 100644 --- a/src/components/context-menu/context-menu.css +++ b/src/components/context-menu/context-menu.css @@ -28,3 +28,11 @@ background: $motion-primary; color: white; } + +.menu-item-bordered { + border-top: 1px solid $ui-black-transparent; +} + +.menu-item-bordered:hover { + background: $error-primary; +} diff --git a/src/components/context-menu/context-menu.jsx b/src/components/context-menu/context-menu.jsx index 7d33fe641ef436415298bc43c1caa77bad9ad649..677f8944190d3b4c0b208a56f2243b418bbfcddd 100644 --- a/src/components/context-menu/context-menu.jsx +++ b/src/components/context-menu/context-menu.jsx @@ -1,5 +1,6 @@ import React from 'react'; import {ContextMenu, MenuItem} from 'react-contextmenu'; +import classNames from 'classnames'; import styles from './context-menu.css'; @@ -17,7 +18,16 @@ const StyledMenuItem = props => ( /> ); +const BorderedMenuItem = props => ( + <MenuItem + {...props} + attributes={{className: classNames(styles.menuItem, 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 fd43da31231f5cd0652199b2d41fccbcd919c2e9..26fd3f2584080f84a0536cdfbf4ff10b05d8f146 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 @@ -64,15 +64,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 @@ -82,6 +73,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>