From e7d93ef941cb3a65f7b9620668d797f5b7c79ae7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Espino?= Date: Sun, 28 Mar 2021 13:15:37 +0200 Subject: [PATCH] Splitting the ViewHeaderProperties Menu --- .../{ => viewHeader}/newCardButton.tsx | 8 +-- .../newCardButtonTemplateItem.tsx | 14 +++--- .../src/components/viewHeader/viewHeader.tsx | 35 +++---------- .../viewHeader/viewHeaderPropertiesMenu.tsx | 50 +++++++++++++++++++ 4 files changed, 68 insertions(+), 39 deletions(-) rename webapp/src/components/{ => viewHeader}/newCardButton.tsx (92%) rename webapp/src/components/{ => viewHeader}/newCardButtonTemplateItem.tsx (86%) create mode 100644 webapp/src/components/viewHeader/viewHeaderPropertiesMenu.tsx diff --git a/webapp/src/components/newCardButton.tsx b/webapp/src/components/viewHeader/newCardButton.tsx similarity index 92% rename from webapp/src/components/newCardButton.tsx rename to webapp/src/components/viewHeader/newCardButton.tsx index 74e8a5d1d..c9521cf36 100644 --- a/webapp/src/components/newCardButton.tsx +++ b/webapp/src/components/viewHeader/newCardButton.tsx @@ -4,10 +4,10 @@ import React from 'react' import {FormattedMessage, injectIntl, IntlShape} from 'react-intl' -import {BoardTree} from '../viewModel/boardTree' -import ButtonWithMenu from '../widgets/buttons/buttonWithMenu' -import CardIcon from '../widgets/icons/card' -import Menu from '../widgets/menu' +import {BoardTree} from '../../viewModel/boardTree' +import ButtonWithMenu from '../../widgets/buttons/buttonWithMenu' +import CardIcon from '../../widgets/icons/card' +import Menu from '../../widgets/menu' import NewCardButtonTemplateItem from './newCardButtonTemplateItem' diff --git a/webapp/src/components/newCardButtonTemplateItem.tsx b/webapp/src/components/viewHeader/newCardButtonTemplateItem.tsx similarity index 86% rename from webapp/src/components/newCardButtonTemplateItem.tsx rename to webapp/src/components/viewHeader/newCardButtonTemplateItem.tsx index 0ae83a10e..db0f9cbd5 100644 --- a/webapp/src/components/newCardButtonTemplateItem.tsx +++ b/webapp/src/components/viewHeader/newCardButtonTemplateItem.tsx @@ -4,13 +4,13 @@ import React from 'react' import {injectIntl, IntlShape} from 'react-intl' -import mutator from '../mutator' -import {Card} from '../blocks/card' -import IconButton from '../widgets/buttons/iconButton' -import DeleteIcon from '../widgets/icons/delete' -import OptionsIcon from '../widgets/icons/options' -import Menu from '../widgets/menu' -import MenuWrapper from '../widgets/menuWrapper' +import mutator from '../../mutator' +import {Card} from '../../blocks/card' +import IconButton from '../../widgets/buttons/iconButton' +import DeleteIcon from '../../widgets/icons/delete' +import OptionsIcon from '../../widgets/icons/options' +import Menu from '../../widgets/menu' +import MenuWrapper from '../../widgets/menuWrapper' type Props = { cardTemplate: Card diff --git a/webapp/src/components/viewHeader/viewHeader.tsx b/webapp/src/components/viewHeader/viewHeader.tsx index 24635f9ad..e41d870be 100644 --- a/webapp/src/components/viewHeader/viewHeader.tsx +++ b/webapp/src/components/viewHeader/viewHeader.tsx @@ -27,10 +27,12 @@ import MenuWrapper from '../../widgets/menuWrapper' import Editable from '../editable' import FilterComponent from '../filterComponent' import ModalWrapper from '../modalWrapper' -import NewCardButton from '../newCardButton' import ShareBoardComponent from '../shareBoardComponent' import {sendFlashMessage} from '../flashMessages' +import NewCardButton from './newCardButton' +import ViewHeaderPropertiesMenu from './viewHeaderPropertiesMenu' + import './viewHeader.scss' type Props = { @@ -121,33 +123,10 @@ class ViewHeader extends React.Component { <> {/* Card properties */} - - - - {boardTree.board.cardProperties.map((option: IPropertyTemplate) => ( - { - let newVisiblePropertyIds = [] - if (activeView.visiblePropertyIds.includes(propertyId)) { - newVisiblePropertyIds = activeView.visiblePropertyIds.filter((o: string) => o !== propertyId) - } else { - newVisiblePropertyIds = [...activeView.visiblePropertyIds, propertyId] - } - mutator.changeViewVisibleProperties(activeView, newVisiblePropertyIds) - }} - /> - ))} - - + {/* Group by */} diff --git a/webapp/src/components/viewHeader/viewHeaderPropertiesMenu.tsx b/webapp/src/components/viewHeader/viewHeaderPropertiesMenu.tsx new file mode 100644 index 000000000..0d997980f --- /dev/null +++ b/webapp/src/components/viewHeader/viewHeaderPropertiesMenu.tsx @@ -0,0 +1,50 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. +import React from 'react' +import {FormattedMessage} from 'react-intl' + +import {IPropertyTemplate} from '../../blocks/board' +import {BoardView} from '../../blocks/boardView' +import mutator from '../../mutator' +import Button from '../../widgets/buttons/button' +import Menu from '../../widgets/menu' +import MenuWrapper from '../../widgets/menuWrapper' + +type Props = { + properties: readonly IPropertyTemplate[] + activeView: BoardView +} +const ViewHeaderPropertiesMenu = React.memo((props: Props) => { + const {properties, activeView} = props + return ( + + + + {properties.map((option: IPropertyTemplate) => ( + { + let newVisiblePropertyIds = [] + if (activeView.visiblePropertyIds.includes(propertyId)) { + newVisiblePropertyIds = activeView.visiblePropertyIds.filter((o: string) => o !== propertyId) + } else { + newVisiblePropertyIds = [...activeView.visiblePropertyIds, propertyId] + } + mutator.changeViewVisibleProperties(activeView, newVisiblePropertyIds) + }} + /> + ))} + + + ) +}) + +export default ViewHeaderPropertiesMenu