diff --git a/client/src/components/boards/BoardActions/BoardActions.jsx b/client/src/components/boards/BoardActions/BoardActions.jsx index df0991f1..34622d70 100644 --- a/client/src/components/boards/BoardActions/BoardActions.jsx +++ b/client/src/components/boards/BoardActions/BoardActions.jsx @@ -6,8 +6,12 @@ import React from 'react'; import classNames from 'classnames'; import { useSelector } from 'react-redux'; +import { useTranslation } from 'react-i18next'; +import { Icon } from 'semantic-ui-react'; import selectors from '../../../selectors'; +import { BoardContexts } from '../../../constants/Enums'; +import { BoardContextIcons } from '../../../constants/Icons'; import Filters from './Filters'; import RightSide from './RightSide'; import BoardMemberships from '../../board-memberships/BoardMemberships'; @@ -15,7 +19,15 @@ import BoardMemberships from '../../board-memberships/BoardMemberships'; import styles from './BoardActions.module.scss'; const BoardActions = React.memo(() => { + const boardContext = useSelector((state) => selectors.selectCurrentBoard(state).context); + + const withContextTitle = boardContext !== BoardContexts.BOARD; + const withMemberships = useSelector((state) => { + if (withContextTitle) { + return false; + } + const boardMemberships = selectors.selectMembershipsForCurrentBoard(state); if (boardMemberships.length > 0) { @@ -25,9 +37,19 @@ const BoardActions = React.memo(() => { return selectors.selectIsCurrentUserManagerForCurrentProject(state); }); + const [t] = useTranslation(); + return (
+ {withContextTitle && ( +
+
+ + {t(`common.${boardContext}`)} +
+
+ )} {withMemberships && (
diff --git a/client/src/components/boards/BoardActions/BoardActions.module.scss b/client/src/components/boards/BoardActions/BoardActions.module.scss index 818d577d..ca71d6a0 100644 --- a/client/src/components/boards/BoardActions/BoardActions.module.scss +++ b/client/src/components/boards/BoardActions/BoardActions.module.scss @@ -31,6 +31,18 @@ height: 46px; } + .contextTitle { + background: rgba(0, 0, 0, 0.08); + border-radius: 3px; + color: #fff; + line-height: 34px; + padding: 2px 14px; + } + + .contextTitleIcon { + margin-right: 8px; + } + .wrapper { overflow-x: auto; overflow-y: hidden; diff --git a/client/src/components/boards/BoardActions/RightSide/RightSide.jsx b/client/src/components/boards/BoardActions/RightSide/RightSide.jsx index 73da71b2..8eb5b936 100644 --- a/client/src/components/boards/BoardActions/RightSide/RightSide.jsx +++ b/client/src/components/boards/BoardActions/RightSide/RightSide.jsx @@ -11,7 +11,7 @@ import { usePopup } from '../../../../lib/popup'; import selectors from '../../../../selectors'; import entryActions from '../../../../entry-actions'; import { BoardContexts, BoardViews } from '../../../../constants/Enums'; -import { BoardContextIcons, BoardViewIcons } from '../../../../constants/Icons'; +import { BoardViewIcons } from '../../../../constants/Icons'; import ActionsStep from './ActionsStep'; import styles from './RightSide.module.scss'; @@ -56,7 +56,7 @@ const RightSide = React.memo(() => {