From 97f224163555e560cef4661d8e3d20e77d6aa540 Mon Sep 17 00:00:00 2001
From: apple502j <apple502j@yahoo.co.jp>
Date: Wed, 16 Jan 2019 12:26:42 +0900
Subject: [PATCH] Adds BorderedMenuItem and use it for delete menu
---
src/components/context-menu/context-menu.css | 15 ++++++++++++--
src/components/context-menu/context-menu.jsx | 9 +++++++++
.../sprite-selector-item.jsx | 20 +++++++++----------
3 files changed, 32 insertions(+), 12 deletions(-)
diff --git a/src/components/context-menu/context-menu.css b/src/components/context-menu/context-menu.css
index 5a02ce797..32fc00f22 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 7d33fe641..445ac222e 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 ef5b85f19..c1f86de49 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>
--
GitLab