luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Splitting the ViewHeaderProperties Menu

Browse source
This commit is contained in:
Jesús Espino 2021-03-28 13:15:37 +02:00
parent f95189984d
commit e7d93ef941
4 changed files with 68 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
webapp/src/components/newCardButton.tsx → webapp/src/components/viewHeader/newCardButton.tsx
View file

@ -4,10 +4,10 @@
import React from 'react' import React from 'react'
import {FormattedMessage, injectIntl, IntlShape} from 'react-intl' import {FormattedMessage, injectIntl, IntlShape} from 'react-intl'
import {BoardTree} from '../viewModel/boardTree' import {BoardTree} from '../../viewModel/boardTree'
import ButtonWithMenu from '../widgets/buttons/buttonWithMenu' import ButtonWithMenu from '../../widgets/buttons/buttonWithMenu'
import CardIcon from '../widgets/icons/card' import CardIcon from '../../widgets/icons/card'
import Menu from '../widgets/menu' import Menu from '../../widgets/menu'
import NewCardButtonTemplateItem from './newCardButtonTemplateItem' import NewCardButtonTemplateItem from './newCardButtonTemplateItem'

14
webapp/src/components/newCardButtonTemplateItem.tsx → webapp/src/components/viewHeader/newCardButtonTemplateItem.tsx
View file

@ -4,13 +4,13 @@
import React from 'react' import React from 'react'
import {injectIntl, IntlShape} from 'react-intl' import {injectIntl, IntlShape} from 'react-intl'
import mutator from '../mutator' import mutator from '../../mutator'
import {Card} from '../blocks/card' import {Card} from '../../blocks/card'
import IconButton from '../widgets/buttons/iconButton' import IconButton from '../../widgets/buttons/iconButton'
import DeleteIcon from '../widgets/icons/delete' import DeleteIcon from '../../widgets/icons/delete'
import OptionsIcon from '../widgets/icons/options' import OptionsIcon from '../../widgets/icons/options'
import Menu from '../widgets/menu' import Menu from '../../widgets/menu'
import MenuWrapper from '../widgets/menuWrapper' import MenuWrapper from '../../widgets/menuWrapper'
type Props = { type Props = {
cardTemplate: Card cardTemplate: Card

35
webapp/src/components/viewHeader/viewHeader.tsx
View file

@ -27,10 +27,12 @@ import MenuWrapper from '../../widgets/menuWrapper'
import Editable from '../editable' import Editable from '../editable'
import FilterComponent from '../filterComponent' import FilterComponent from '../filterComponent'
import ModalWrapper from '../modalWrapper' import ModalWrapper from '../modalWrapper'
import NewCardButton from '../newCardButton'
import ShareBoardComponent from '../shareBoardComponent' import ShareBoardComponent from '../shareBoardComponent'
import {sendFlashMessage} from '../flashMessages' import {sendFlashMessage} from '../flashMessages'
import NewCardButton from './newCardButton'
import ViewHeaderPropertiesMenu from './viewHeaderPropertiesMenu'
import './viewHeader.scss' import './viewHeader.scss'
type Props = { type Props = {
@ -121,33 +123,10 @@ class ViewHeader extends React.Component<Props, State> {
<> <>
{/* Card properties */} {/* Card properties */}
<MenuWrapper> <ViewHeaderPropertiesMenu
<Button> properties={boardTree.board.cardProperties}
<FormattedMessage activeView={boardTree.activeView}
id='ViewHeader.properties' />
defaultMessage='Properties'
/>
</Button>
<Menu>
{boardTree.board.cardProperties.map((option: IPropertyTemplate) => (
<Menu.Switch
key={option.id}
id={option.id}
name={option.name}
isOn={activeView.visiblePropertyIds.includes(option.id)}
onClick={(propertyId: string) => {
let newVisiblePropertyIds = []
if (activeView.visiblePropertyIds.includes(propertyId)) {
newVisiblePropertyIds = activeView.visiblePropertyIds.filter((o: string) => o !== propertyId)
} else {
newVisiblePropertyIds = [...activeView.visiblePropertyIds, propertyId]
}
mutator.changeViewVisibleProperties(activeView, newVisiblePropertyIds)
}}
/>
))}
</Menu>
</MenuWrapper>
{/* Group by */} {/* Group by */}

50
webapp/src/components/viewHeader/viewHeaderPropertiesMenu.tsx Normal file
View file

@ -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 (
<MenuWrapper>
<Button>
<FormattedMessage
id='ViewHeader.properties'
defaultMessage='Properties'
/>
</Button>
<Menu>
{properties.map((option: IPropertyTemplate) => (
<Menu.Switch
key={option.id}
id={option.id}
name={option.name}
isOn={activeView.visiblePropertyIds.includes(option.id)}
onClick={(propertyId: string) => {
let newVisiblePropertyIds = []
if (activeView.visiblePropertyIds.includes(propertyId)) {
newVisiblePropertyIds = activeView.visiblePropertyIds.filter((o: string) => o !== propertyId)
} else {
newVisiblePropertyIds = [...activeView.visiblePropertyIds, propertyId]
}
mutator.changeViewVisibleProperties(activeView, newVisiblePropertyIds)
}}
/>
))}
</Menu>
</MenuWrapper>
)
})
export default ViewHeaderPropertiesMenu