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

Moving properties menu into the new menu system

Browse source
This commit is contained in:
Jesús Espino 2020-10-24 08:21:45 +02:00
parent 4d2c884512
commit 2275c6b72e
3 changed files with 64 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
webapp/src/components/boardComponent.tsx
View file

@ -196,12 +196,36 @@ class BoardComponent extends React.Component<Props, State> {
/>
</MenuWrapper>
<div className='octo-spacer'/>
<div
className='octo-button'
onClick={(e) => {
this.propertiesClicked(e)
}}
>Properties</div>
<MenuWrapper>
<div className={'octo-button'}>
<FormattedMessage
id='TableComponent.properties'
defaultMessage='Properties'
/>
</div>
<Menu>
{boardTree.board.cardProperties.map((option) => (
<Menu.Switch
id={option.id}
name={option.name}
isOn={activeView.visiblePropertyIds.includes(option.id)}
onClick={(propertyId: string) => {
const property = boardTree.board.cardProperties.find((o) => o.id === propertyId)
Utils.assertValue(property)
Utils.log(`Toggle property ${property.name}`)
let newVisiblePropertyIds = []
if (activeView.visiblePropertyIds.includes(propertyId)) {
newVisiblePropertyIds = activeView.visiblePropertyIds.filter((o) => o !== propertyId)
} else {
newVisiblePropertyIds = [...activeView.visiblePropertyIds, propertyId]
}
mutator.changeViewVisibleProperties(activeView, newVisiblePropertyIds)
}}
/>
))}
</Menu>
</MenuWrapper>
<div
className='octo-button'
id='groupByButton'

67
webapp/src/components/tableComponent.tsx
View file

@ -185,17 +185,36 @@ class TableComponent extends React.Component<Props, State> {
/>
</MenuWrapper>
<div className='octo-spacer'/>
<div
className='octo-button'
onClick={(e) => {
this.propertiesClicked(e)
}}
>
<FormattedMessage
id='TableComponent.properties'
defaultMessage='Properties'
/>
</div>
<MenuWrapper>
<div className={'octo-button'}>
<FormattedMessage
id='TableComponent.properties'
defaultMessage='Properties'
/>
</div>
<Menu>
{boardTree.board.cardProperties.map((option) => (
<Menu.Switch
id={option.id}
name={option.name}
isOn={activeView.visiblePropertyIds.includes(option.id)}
onClick={(propertyId: string) => {
const property = boardTree.board.cardProperties.find((o) => o.id === propertyId)
Utils.assertValue(property)
Utils.log(`Toggle property ${property.name}`)
let newVisiblePropertyIds = []
if (activeView.visiblePropertyIds.includes(propertyId)) {
newVisiblePropertyIds = activeView.visiblePropertyIds.filter((o) => o !== propertyId)
} else {
newVisiblePropertyIds = [...activeView.visiblePropertyIds, propertyId]
}
mutator.changeViewVisibleProperties(activeView, newVisiblePropertyIds)
}}
/>
))}
</Menu>
</MenuWrapper>
<div
className={hasFilter ? 'octo-button active' : 'octo-button'}
onClick={(e) => {
@ -409,32 +428,6 @@ class TableComponent extends React.Component<Props, State> {
)
}
private async propertiesClicked(e: React.MouseEvent) {
const {boardTree} = this.props
const {activeView} = boardTree
const selectProperties = boardTree.board.cardProperties
OldMenu.shared.options = selectProperties.map((o) => {
const isVisible = activeView.visiblePropertyIds.includes(o.id)
return {id: o.id, name: o.name, type: 'switch', isOn: isVisible}
})
OldMenu.shared.onMenuToggled = async (id: string, isOn: boolean) => {
const property = selectProperties.find((o) => o.id === id)
Utils.assertValue(property)
Utils.log(`Toggle property ${property.name} ${isOn}`)
let newVisiblePropertyIds = []
if (activeView.visiblePropertyIds.includes(id)) {
newVisiblePropertyIds = activeView.visiblePropertyIds.filter((o) => o !== id)
} else {
newVisiblePropertyIds = [...activeView.visiblePropertyIds, id]
}
await mutator.changeViewVisibleProperties(activeView, newVisiblePropertyIds)
}
OldMenu.shared.showAtElement(e.target as HTMLElement)
}
private filterClicked(e: React.MouseEvent) {
this.props.showFilter(e.target as HTMLElement)
}

6
webapp/src/widgets/menu.tsx
View file

@ -90,13 +90,15 @@ class SwitchOption extends React.Component<SwitchOptionProps> {
render() {
const {name, icon, isOn} = this.props
return (
<div className='MenuOption SwitchOption menu-option'>
<div
className='MenuOption SwitchOption menu-option'
onClick={this.handleOnClick}
>
<div className='menu-name'>{name}</div>
{icon && <div className={`icon ${icon}`}/>}
<div className={isOn ? 'octo-switch on' : 'octo-switch'}>
<div
className='octo-switch-inner'
onClick={this.handleOnClick}
/>
</div>
</div>