Docker/planka
Docker/planka
1
0
Fork 0
mirror of https://github.com/plankanban/planka.git synced 2025-07-18 12:49:43 +02:00
Code Issues Releases Activity

fix: Add icons to popup menu items

Browse source
This commit is contained in:
Maksim Eltyshev 2025-07-17 15:23:53 +02:00
parent adf60c0c74
commit e659ed4a2d
13 changed files with 81 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

3
client/src/components/attachments/AddAttachmentStep/AddAttachmentStep.jsx
View file

@ -7,7 +7,7 @@ import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import { useDispatch } from 'react-redux';
import { useTranslation } from 'react-i18next';
import { Menu } from 'semantic-ui-react';
import { Icon, Menu } from 'semantic-ui-react';
import { FilePicker, Popup } from '../../../lib/custom-ui';
import entryActions from '../../../entry-actions';
@ -47,6 +47,7 @@ const AddAttachmentStep = React.memo(({ onClose }) => {
<Menu secondary vertical className={styles.menu}>
<FilePicker multiple onSelect={handleFilesSelect}>
<Menu.Item className={styles.menuItem}>
<Icon name="computer" className={styles.menuItemIcon} />
{t('common.fromComputer', {
context: 'title',
})}

5
client/src/components/attachments/AddAttachmentStep/AddAttachmentStep.module.scss
View file

@ -21,6 +21,11 @@
padding-left: 14px;
}
.menuItemIcon {
float: left;
margin: 0 0.5em 0 0;
}
.tip {
opacity: 0.5;
}

2
client/src/components/boards/BoardActions/RightSide/ActionsStep.module.scss
View file

@ -23,6 +23,6 @@
.menuItemIcon {
float: left;
margin-right: 0.5em;
margin: 0 0.5em 0 0;
}
}

14
client/src/components/cards/Card/ActionsStep.jsx
View file

@ -7,7 +7,7 @@ import React, { useCallback, useMemo } from 'react';
import PropTypes from 'prop-types';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { useTranslation } from 'react-i18next';
import { Menu } from 'semantic-ui-react';
import { Icon, Menu } from 'semantic-ui-react';
import { Popup } from '../../../lib/custom-ui';
import selectors from '../../../selectors';
@ -290,6 +290,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
<Menu secondary vertical className={styles.menu}>
{canEditName && (
<Menu.Item className={styles.menuItem} onClick={handleEditNameClick}>
<Icon name="edit outline" className={styles.menuItemIcon} />
{t('action.editTitle', {
context: 'title',
})}
@ -297,6 +298,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
)}
{!board.limitCardTypesToDefaultOne && canEditType && (
<Menu.Item className={styles.menuItem} onClick={handleEditTypeClick}>
<Icon name="map outline" className={styles.menuItemIcon} />
{t('action.editType', {
context: 'title',
})}
@ -304,6 +306,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
)}
{card.type === CardTypes.PROJECT && canUseMembers && (
<Menu.Item className={styles.menuItem} onClick={handleUsersClick}>
<Icon name="user outline" className={styles.menuItemIcon} />
{t('common.members', {
context: 'title',
})}
@ -311,6 +314,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
)}
{canUseLabels && (
<Menu.Item className={styles.menuItem} onClick={handleLabelsClick}>
<Icon name="bookmark outline" className={styles.menuItemIcon} />
{t('common.labels', {
context: 'title',
})}
@ -318,6 +322,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
)}
{card.type === CardTypes.STORY && canUseMembers && (
<Menu.Item className={styles.menuItem} onClick={handleUsersClick}>
<Icon name="user outline" className={styles.menuItemIcon} />
{t('common.members', {
context: 'title',
})}
@ -325,6 +330,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
)}
{card.type === CardTypes.PROJECT && canEditDueDate && (
<Menu.Item className={styles.menuItem} onClick={handleEditDueDateClick}>
<Icon name="calendar check outline" className={styles.menuItemIcon} />
{t('action.editDueDate', {
context: 'title',
})}
@ -332,6 +338,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
)}
{card.type === CardTypes.PROJECT && canEditStopwatch && (
<Menu.Item className={styles.menuItem} onClick={handleEditStopwatchClick}>
<Icon name="clock outline" className={styles.menuItemIcon} />
{t('action.editStopwatch', {
context: 'title',
})}
@ -339,6 +346,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
)}
{canDuplicate && (
<Menu.Item className={styles.menuItem} onClick={handleDuplicateClick}>
<Icon name="copy outline" className={styles.menuItemIcon} />
{t('action.duplicateCard', {
context: 'title',
})}
@ -346,6 +354,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
)}
{canMove && (
<Menu.Item className={styles.menuItem} onClick={handleMoveClick}>
<Icon name="share square outline" className={styles.menuItemIcon} />
{t('action.moveCard', {
context: 'title',
})}
@ -353,6 +362,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
)}
{prevList && canRestore && (
<Menu.Item className={styles.menuItem} onClick={handleRestoreClick}>
<Icon name="undo alternate" className={styles.menuItemIcon} />
{t('action.restoreToList', {
context: 'title',
list: prevList.name || t(`common.${prevList.type}`),
@ -361,6 +371,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
)}
{list.type !== ListTypes.ARCHIVE && canArchive && (
<Menu.Item className={styles.menuItem} onClick={handleArchiveClick}>
<Icon name="folder open outline" className={styles.menuItemIcon} />
{t('action.archiveCard', {
context: 'title',
})}
@ -368,6 +379,7 @@ const ActionsStep = React.memo(({ cardId, onNameEdit, onClose }) => {
)}
{canDelete && (
<Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
<Icon name="trash alternate outline" className={styles.menuItemIcon} />
{isInTrashList
? t('action.deleteForever', {
context: 'title',

5
client/src/components/cards/Card/ActionsStep.module.scss
View file

@ -13,4 +13,9 @@
margin: 0;
padding-left: 14px;
}
.menuItemIcon {
float: left;
margin: 0 0.5em 0 0;
}
}

9
client/src/components/common/AdministrationModal/UsersPane/ActionsStep.jsx
View file

@ -7,7 +7,7 @@ import React, { useCallback, useMemo } from 'react';
import PropTypes from 'prop-types';
import { useDispatch, useSelector } from 'react-redux';
import { useTranslation } from 'react-i18next';
import { Menu } from 'semantic-ui-react';
import { Icon, Menu } from 'semantic-ui-react';
import { Popup } from '../../../../lib/custom-ui';
import selectors from '../../../../selectors';
@ -180,12 +180,14 @@ const ActionsStep = React.memo(({ userId, onClose }) => {
<Popup.Content>
<Menu secondary vertical className={styles.menu}>
<Menu.Item className={styles.menuItem} onClick={handleEditInformationClick}>
<Icon name="info" className={styles.menuItemIcon} />
{t('action.editInformation', {
context: 'title',
})}
</Menu.Item>
{!user.lockedFieldNames.includes('username') && (
<Menu.Item className={styles.menuItem} onClick={handleEditUsernameClick}>
<Icon name="at" className={styles.menuItemIcon} />
{t('action.editUsername', {
context: 'title',
})}
@ -193,6 +195,7 @@ const ActionsStep = React.memo(({ userId, onClose }) => {
)}
{!user.lockedFieldNames.includes('email') && (
<Menu.Item className={styles.menuItem} onClick={handleEditEmailClick}>
<Icon name="mail outline" className={styles.menuItemIcon} />
{t('action.editEmail', {
context: 'title',
})}
@ -200,6 +203,7 @@ const ActionsStep = React.memo(({ userId, onClose }) => {
)}
{!user.lockedFieldNames.includes('password') && (
<Menu.Item className={styles.menuItem} onClick={handleEditPasswordClick}>
<Icon name="keyboard outline" className={styles.menuItemIcon} />
{t('action.editPassword', {
context: 'title',
})}
@ -207,6 +211,7 @@ const ActionsStep = React.memo(({ userId, onClose }) => {
)}
{!user.lockedFieldNames.includes('role') && (
<Menu.Item className={styles.menuItem} onClick={handleEditRoleClick}>
<Icon name="sun outline" className={styles.menuItemIcon} />
{t('action.editRole', {
context: 'title',
})}
@ -221,6 +226,7 @@ const ActionsStep = React.memo(({ userId, onClose }) => {
className={styles.menuItem}
onClick={user.isDeactivated ? handleActivateClick : handleDeactivateClick}
>
<Icon name={user.isDeactivated ? 'plus' : 'close'} className={styles.menuItemIcon} />
{user.isDeactivated
? t('action.activateUser', {
context: 'title',
@ -231,6 +237,7 @@ const ActionsStep = React.memo(({ userId, onClose }) => {
</Menu.Item>
{user.isDeactivated && !user.isDefaultAdmin && (
<Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
<Icon name="trash alternate outline" className={styles.menuItemIcon} />
{t('action.deleteUser', {
context: 'title',
})}

5
client/src/components/common/AdministrationModal/UsersPane/ActionsStep.module.scss
View file

@ -13,4 +13,9 @@
margin: 0;
padding-left: 14px;
}
.menuItemIcon {
float: left;
margin: 0 0.5em 0 0;
}
}

9
client/src/components/lists/List/ActionsStep.jsx
View file

@ -7,7 +7,7 @@ import React, { useCallback, useMemo } from 'react';
import PropTypes from 'prop-types';
import { useDispatch, useSelector } from 'react-redux';
import { useTranslation } from 'react-i18next';
import { Menu } from 'semantic-ui-react';
import { Icon, Menu } from 'semantic-ui-react';
import { Popup } from '../../../lib/custom-ui';
import selectors from '../../../selectors';
@ -128,38 +128,45 @@ const ActionsStep = React.memo(({ listId, onNameEdit, onCardAdd, onClose }) => {
<Popup.Content>
<Menu secondary vertical className={styles.menu}>
<Menu.Item className={styles.menuItem} onClick={handleEditNameClick}>
<Icon name="edit outline" className={styles.menuItemIcon} />
{t('action.editTitle', {
context: 'title',
})}
</Menu.Item>
<Menu.Item className={styles.menuItem} onClick={handleEditTypeClick}>
<Icon name="map outline" className={styles.menuItemIcon} />
{t('action.editType', {
context: 'title',
})}
</Menu.Item>
<Menu.Item className={styles.menuItem} onClick={handleEditColorClick}>
<Icon name="dot circle outline" className={styles.menuItemIcon} />
{t('action.editColor', {
context: 'title',
})}
</Menu.Item>
<Menu.Item className={styles.menuItem} onClick={handleAddCardClick}>
<Icon name="list alternate outline" className={styles.menuItemIcon} />
{t('action.addCard', {
context: 'title',
})}
</Menu.Item>
<Menu.Item className={styles.menuItem} onClick={handleSortClick}>
<Icon name="sort amount down" className={styles.menuItemIcon} />
{t('action.sortList', {
context: 'title',
})}
</Menu.Item>
{list.type === ListTypes.CLOSED && (
<Menu.Item className={styles.menuItem} onClick={handleArchiveCardsClick}>
<Icon name="folder open outline" className={styles.menuItemIcon} />
{t('action.archiveCards', {
context: 'title',
})}
</Menu.Item>
)}
<Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
<Icon name="trash alternate outline" className={styles.menuItemIcon} />
{t('action.deleteList', {
context: 'title',
})}

5
client/src/components/lists/List/ActionsStep.module.scss
View file

@ -13,4 +13,9 @@
margin: 0;
padding-left: 14px;
}
.menuItemIcon {
float: left;
margin: 0 0.5em 0 0;
}
}

4
client/src/components/task-lists/TaskList/Task/ActionsStep.jsx
View file

@ -7,7 +7,7 @@ import React, { useCallback, useMemo } from 'react';
import PropTypes from 'prop-types';
import { useDispatch, useSelector } from 'react-redux';
import { useTranslation } from 'react-i18next';
import { Menu } from 'semantic-ui-react';
import { Icon, Menu } from 'semantic-ui-react';
import { Popup } from '../../../../lib/custom-ui';
import selectors from '../../../../selectors';
@ -66,12 +66,14 @@ const ActionsStep = React.memo(({ taskId, onNameEdit, onClose }) => {
<Menu secondary vertical className={styles.menu}>
{!task.linkedCardId && (
<Menu.Item className={styles.menuItem} onClick={handleEditNameClick}>
<Icon name="align left" className={styles.menuItemIcon} />
{t('action.editDescription', {
context: 'title',
})}
</Menu.Item>
)}
<Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
<Icon name="trash alternate outline" className={styles.menuItemIcon} />
{t('action.deleteTask', {
context: 'title',
})}

5
client/src/components/task-lists/TaskList/Task/ActionsStep.module.scss
View file

@ -13,4 +13,9 @@
margin: 0;
padding-left: 14px;
}
.menuItemIcon {
float: left;
margin: 0 0.5em 0 0;
}
}

31
client/src/components/users/UserStep/UserStep.jsx
View file

@ -7,7 +7,7 @@ import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import { useDispatch, useSelector } from 'react-redux';
import { useTranslation } from 'react-i18next';
import { Button, Menu } from 'semantic-ui-react';
import { Button, Icon, Menu } from 'semantic-ui-react';
import { Popup } from '../../../lib/custom-ui';
import selectors from '../../../selectors';
@ -31,15 +31,15 @@ const UserStep = React.memo(({ onClose }) => {
onClose();
}, [onClose, dispatch]);
const handleLogoutClick = useCallback(() => {
dispatch(entryActions.logout());
}, [dispatch]);
const handleAdministrationClick = useCallback(() => {
dispatch(entryActions.openAdministrationModal());
onClose();
}, [onClose, dispatch]);
const handleLogoutClick = useCallback(() => {
dispatch(entryActions.logout());
}, [dispatch]);
let logoutMenuItemProps;
if (isLogouting) {
logoutMenuItemProps = {
@ -61,29 +61,30 @@ const UserStep = React.memo(({ onClose }) => {
<Popup.Content>
<Menu secondary vertical className={styles.menu}>
<Menu.Item className={styles.menuItem} onClick={handleSettingsClick}>
<Icon name="user" className={styles.menuItemIcon} />
{t('common.settings', {
context: 'title',
})}
</Menu.Item>
{withAdministration && (
<Menu.Item className={styles.menuItem} onClick={handleAdministrationClick}>
<Icon name="setting" className={styles.menuItemIcon} />
{t('common.administration', {
context: 'title',
})}
</Menu.Item>
)}
<hr className={styles.divider} />
<Menu.Item
{...logoutMenuItemProps} // eslint-disable-line react/jsx-props-no-spreading
className={styles.menuItem}
onClick={handleLogoutClick}
>
<Icon name="log out" className={styles.menuItemIcon} />
{t('action.logOut', {
context: 'title',
})}
</Menu.Item>
{withAdministration && (
<>
<hr className={styles.divider} />
<Menu.Item className={styles.menuItem} onClick={handleAdministrationClick}>
{t('common.administration', {
context: 'title',
})}
</Menu.Item>
</>
)}
</Menu>
</Popup.Content>
</>

5
client/src/components/users/UserStep/UserStep.module.scss
View file

@ -20,4 +20,9 @@
margin: 0;
padding-left: 14px;
}
.menuItemIcon {
float: left;
margin: 0 0.5em 0 0;
}
}