Merge pull request #4385 from LLK/revert-4374-revert-4359-delete-select

Add BorderedMenuItem and use it for delete menu, with updated style

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;
+}

src/components/context-menu/context-menu.jsx

 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
 };

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>