diff --git a/client/src/components/boards/Board/ShortcutsProvider.jsx b/client/src/components/boards/Board/ShortcutsProvider.jsx
index 45f0bc0c..2821a38d 100644
--- a/client/src/components/boards/Board/ShortcutsProvider.jsx
+++ b/client/src/components/boards/Board/ShortcutsProvider.jsx
@@ -18,6 +18,7 @@ import { isModifierKeyPressed } from '../../../utils/event-helpers';
import { BoardShortcutsContext } from '../../../contexts';
import Paths from '../../../constants/Paths';
import { BoardMembershipRoles, ListTypes } from '../../../constants/Enums';
+import CardActionsStep from '../../cards/CardActionsStep';
const canEditCardName = (boardMembership, list) => {
if (isListArchiveOrTrash(list)) {
@@ -35,6 +36,14 @@ const canArchiveCard = (boardMembership, list) => {
return boardMembership && boardMembership.role === BoardMembershipRoles.EDITOR;
};
+const canUseCardMembers = (boardMembership, list) => {
+ if (isListArchiveOrTrash(list)) {
+ return false;
+ }
+
+ return boardMembership && boardMembership.role === BoardMembershipRoles.EDITOR;
+};
+
const canUseCardLabels = (boardMembership, list) => {
if (isListArchiveOrTrash(list)) {
return false;
@@ -50,11 +59,11 @@ const ShortcutsProvider = React.memo(({ children }) => {
const selectedCardRef = useRef(null);
- const handleCardMouseEnter = useCallback((id, editName, archive) => {
+ const handleCardMouseEnter = useCallback((id, editName, openActions) => {
selectedCardRef.current = {
id,
editName,
- archive,
+ openActions,
};
}, []);
@@ -128,7 +137,51 @@ const ShortcutsProvider = React.memo(({ children }) => {
return;
}
- selectedCardRef.current.archive();
+ selectedCardRef.current.openActions(CardActionsStep.StepTypes.ARCHIVE);
+ };
+
+ const handleCardMembers = () => {
+ if (!selectedCardRef.current) {
+ return;
+ }
+
+ const state = store.getState();
+ const card = selectors.selectCardById(state, selectedCardRef.current.id);
+
+ if (!card || !card.isPersisted) {
+ return;
+ }
+
+ const boardMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);
+ const list = selectors.selectListById(state, card.listId);
+
+ if (!canUseCardMembers(boardMembership, list)) {
+ return;
+ }
+
+ selectedCardRef.current.openActions(CardActionsStep.StepTypes.MEMBERS);
+ };
+
+ const handleCardLabels = () => {
+ if (!selectedCardRef.current) {
+ return;
+ }
+
+ const state = store.getState();
+ const card = selectors.selectCardById(state, selectedCardRef.current.id);
+
+ if (!card || !card.isPersisted) {
+ return;
+ }
+
+ const boardMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);
+ const list = selectors.selectListById(state, card.listId);
+
+ if (!canUseCardLabels(boardMembership, list)) {
+ return;
+ }
+
+ selectedCardRef.current.openActions(CardActionsStep.StepTypes.LABELS);
};
const handleLabelToCardAdd = (index) => {
@@ -179,6 +232,16 @@ const ShortcutsProvider = React.memo(({ children }) => {
case 'Enter':
handleCardOpen();
+ break;
+ case 'KeyL':
+ event.preventDefault();
+ handleCardLabels();
+
+ break;
+ case 'KeyM':
+ event.preventDefault();
+ handleCardMembers();
+
break;
case 'KeyT':
event.preventDefault();
diff --git a/client/src/components/cards/Card/Card.jsx b/client/src/components/cards/Card/Card.jsx
index cacdae9e..6ed22ddc 100755
--- a/client/src/components/cards/Card/Card.jsx
+++ b/client/src/components/cards/Card/Card.jsx
@@ -21,7 +21,7 @@ import ProjectContent from './ProjectContent';
import StoryContent from './StoryContent';
import InlineContent from './InlineContent';
import EditName from './EditName';
-import ActionsStep from './ActionsStep';
+import CardActionsStep from '../CardActionsStep';
import styles from './Card.module.scss';
import globalStyles from '../../../styles.module.scss';
@@ -69,11 +69,11 @@ const Card = React.memo(({ id, isInline }) => {
() => {
setIsEditNameOpened(true);
},
- () => {
+ (step) => {
closePopup();
actionsPopupRef.current.open({
- defaultStep: ActionsStep.StepTypes.ARCHIVE,
+ defaultStep: step,
});
},
);
@@ -98,7 +98,7 @@ const Card = React.memo(({ id, isInline }) => {
setIsEditNameOpened(false);
}, []);
- const ActionsPopup = usePopup(ActionsStep);
+ const CardActionsPopup = usePopup(CardActionsStep);
if (isEditNameOpened) {
return ;
@@ -149,11 +149,11 @@ const Card = React.memo(({ id, isInline }) => {
{colorLineNode}
{canUseActions && (
-
+
-
+
)}
>
) : (
diff --git a/client/src/components/cards/Card/ActionsStep.jsx b/client/src/components/cards/CardActionsStep/CardActionsStep.jsx
similarity index 96%
rename from client/src/components/cards/Card/ActionsStep.jsx
rename to client/src/components/cards/CardActionsStep/CardActionsStep.jsx
index 237610fa..918ad91b 100644
--- a/client/src/components/cards/Card/ActionsStep.jsx
+++ b/client/src/components/cards/CardActionsStep/CardActionsStep.jsx
@@ -23,12 +23,12 @@ import ConfirmationStep from '../../common/ConfirmationStep';
import BoardMembershipsStep from '../../board-memberships/BoardMembershipsStep';
import LabelsStep from '../../labels/LabelsStep';
-import styles from './ActionsStep.module.scss';
+import styles from './CardActionsStep.module.scss';
const StepTypes = {
- EDIT_TYPE: 'EDIT_TYPE',
- USERS: 'USERS',
+ MEMBERS: 'MEMBERS',
LABELS: 'LABELS',
+ EDIT_TYPE: 'EDIT_TYPE',
EDIT_DUE_DATE: 'EDIT_DUE_DATE',
EDIT_STOPWATCH: 'EDIT_STOPWATCH',
MOVE: 'MOVE',
@@ -36,7 +36,7 @@ const StepTypes = {
DELETE: 'DELETE',
};
-const ActionsStep = React.memo(({ cardId, defaultStep, onNameEdit, onClose }) => {
+const CardActionsStep = React.memo(({ cardId, defaultStep, onNameEdit, onClose }) => {
const selectCardById = useMemo(() => selectors.makeSelectCardById(), []);
const selectListById = useMemo(() => selectors.makeSelectListById(), []);
const selectPrevListById = useMemo(() => selectors.makeSelectListById(), []);
@@ -180,18 +180,18 @@ const ActionsStep = React.memo(({ cardId, defaultStep, onNameEdit, onClose }) =>
onClose();
}, [onNameEdit, onClose]);
- const handleEditTypeClick = useCallback(() => {
- openStep(StepTypes.EDIT_TYPE);
- }, [openStep]);
-
- const handleUsersClick = useCallback(() => {
- openStep(StepTypes.USERS);
+ const handleMembersClick = useCallback(() => {
+ openStep(StepTypes.MEMBERS);
}, [openStep]);
const handleLabelsClick = useCallback(() => {
openStep(StepTypes.LABELS);
}, [openStep]);
+ const handleEditTypeClick = useCallback(() => {
+ openStep(StepTypes.EDIT_TYPE);
+ }, [openStep]);
+
const handleEditDueDateClick = useCallback(() => {
openStep(StepTypes.EDIT_DUE_DATE);
}, [openStep]);
@@ -214,19 +214,7 @@ const ActionsStep = React.memo(({ cardId, defaultStep, onNameEdit, onClose }) =>
if (step) {
switch (step.type) {
- case StepTypes.EDIT_TYPE:
- return (
-
- );
- case StepTypes.USERS:
+ case StepTypes.MEMBERS:
return (
onBack={handleBack}
/>
);
+ case StepTypes.EDIT_TYPE:
+ return (
+
+ );
case StepTypes.EDIT_DUE_DATE:
return ;
case StepTypes.EDIT_STOPWATCH:
@@ -305,7 +305,7 @@ const ActionsStep = React.memo(({ cardId, defaultStep, onNameEdit, onClose }) =>
)}
{card.type === CardTypes.PROJECT && canUseMembers && (
-
+
{t('common.members', {
context: 'title',
@@ -321,7 +321,7 @@ const ActionsStep = React.memo(({ cardId, defaultStep, onNameEdit, onClose }) =>
)}
{card.type === CardTypes.STORY && canUseMembers && (
-
+
{t('common.members', {
context: 'title',
@@ -395,17 +395,17 @@ const ActionsStep = React.memo(({ cardId, defaultStep, onNameEdit, onClose }) =>
);
});
-ActionsStep.propTypes = {
+CardActionsStep.propTypes = {
cardId: PropTypes.string.isRequired,
defaultStep: PropTypes.string,
onNameEdit: PropTypes.func.isRequired,
onClose: PropTypes.func.isRequired,
};
-ActionsStep.defaultProps = {
+CardActionsStep.defaultProps = {
defaultStep: undefined,
};
-ActionsStep.StepTypes = StepTypes;
+CardActionsStep.StepTypes = StepTypes;
-export default ActionsStep;
+export default CardActionsStep;
diff --git a/client/src/components/cards/Card/ActionsStep.module.scss b/client/src/components/cards/CardActionsStep/CardActionsStep.module.scss
similarity index 100%
rename from client/src/components/cards/Card/ActionsStep.module.scss
rename to client/src/components/cards/CardActionsStep/CardActionsStep.module.scss
diff --git a/client/src/components/cards/CardActionsStep/index.js b/client/src/components/cards/CardActionsStep/index.js
new file mode 100644
index 00000000..41cb4292
--- /dev/null
+++ b/client/src/components/cards/CardActionsStep/index.js
@@ -0,0 +1,3 @@
+import CardActionsStep from './CardActionsStep';
+
+export default CardActionsStep;