self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2025-09-16 08:56:19 +02:00
Code Issues Releases Activity

Migrate a couple of menus using MenuWrapper

Browse Source
This commit is contained in:
Jesús Espino
2020-10-15 01:49:31 +02:00
parent 962c035eab
commit fb9c237ba0
4 changed files with 62 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/client/components/boardComponent.tsx
View File

@@ -7,6 +7,7 @@ import { BoardTree } from "../boardTree"
import { CardFilter } from "../cardFilter" import { CardFilter } from "../cardFilter"
import ViewMenu from "../components/viewMenu" import ViewMenu from "../components/viewMenu"
import MenuWrapper from "../widgets/menuWrapper" import MenuWrapper from "../widgets/menuWrapper"
import Menu from "../widgets/menu"
import { Constants } from "../constants" import { Constants } from "../constants"
import { Menu as OldMenu } from "../menu" import { Menu as OldMenu } from "../menu"
import { Mutator } from "../mutator" import { Mutator } from "../mutator"
@@ -85,7 +86,13 @@ class BoardComponent extends React.Component<Props, State> {
<div className="octo-icontitle"> <div className="octo-icontitle">
{board.icon ? {board.icon ?
<div className="octo-button octo-icon" onClick={(e) => { this.iconClicked(e) }}>{board.icon}</div> <MenuWrapper>
<div className="octo-button octo-icon">{board.icon}</div>
<Menu>
<Menu.Text id='random' name='Random' onClick={() => mutator.changeIcon(board, undefined, "remove icon")}/>
<Menu.Text id='remove' name='Remove Icon' onClick={() => mutator.changeIcon(board, BlockIcons.shared.randomIcon())}/>
</Menu>
</MenuWrapper>
: undefined} : undefined}
<Editable className="title" text={board.title} placeholderText="Untitled Board" onChanged={(text) => { mutator.changeTitle(board, text) }} /> <Editable className="title" text={board.title} placeholderText="Untitled Board" onChanged={(text) => { mutator.changeTitle(board, text) }} />
</div> </div>
@@ -93,20 +100,20 @@ class BoardComponent extends React.Component<Props, State> {
<div className="octo-board"> <div className="octo-board">
<div className="octo-controls"> <div className="octo-controls">
<Editable style={{ color: "#000000", fontWeight: 600 }} text={activeView.title} placeholderText="Untitled View" onChanged={(text) => { mutator.changeTitle(activeView, text) }} /> <Editable style={{ color: "#000000", fontWeight: 600 }} text={activeView.title} placeholderText="Untitled View" onChanged={(text) => { mutator.changeTitle(activeView, text) }} />
<MenuWrapper> <MenuWrapper>
<div <div
className="octo-button" className="octo-button"
style={{ color: "#000000", fontWeight: 600 }} style={{ color: "#000000", fontWeight: 600 }}
> >
<div className="imageDropdown"></div> <div className="imageDropdown"></div>
</div> </div>
<ViewMenu <ViewMenu
board={board} board={board}
mutator={mutator} mutator={mutator}
boardTree={boardTree} boardTree={boardTree}
showView={showView} showView={showView}
/> />
</MenuWrapper> </MenuWrapper>
<div className="octo-spacer"></div> <div className="octo-spacer"></div>
<div className="octo-button" onClick={(e) => { this.propertiesClicked(e) }}>Properties</div> <div className="octo-button" onClick={(e) => { this.propertiesClicked(e) }}>Properties</div>
<div className="octo-button" id="groupByButton" onClick={(e) => { this.groupByClicked(e) }}> <div className="octo-button" id="groupByButton" onClick={(e) => { this.groupByClicked(e) }}>
@@ -162,7 +169,16 @@ class BoardComponent extends React.Component<Props, State> {
onChanged={(text) => { this.propertyNameChanged(group.option, text) }} /> onChanged={(text) => { this.propertyNameChanged(group.option, text) }} />
<Button text={`${group.cards.length}`} /> <Button text={`${group.cards.length}`} />
<div className="octo-spacer" /> <div className="octo-spacer" />
<Button onClick={(e) => { this.valueOptionClicked(e, group.option) }}><div className="imageOptions" /></Button> <MenuWrapper>
<Button><div className="imageOptions" /></Button>
<Menu>
<Menu.Text id='delete' name='Delete' onClick={() => mutator.deletePropertyOption(boardTree, boardTree.groupByProperty, group.option)}/>
<Menu.Separator/>
{Constants.menuColors.map((color) =>
<Menu.Color key={color.id} id={color.id} name={color.name} onClick={() => mutator.changePropertyOptionColor(boardTree.board, group.option, color.id)} />
)}
</Menu>
</MenuWrapper>
<Button onClick={() => { this.addCard(group.option.value) }}><div className="imageAdd" /></Button> <Button onClick={() => { this.addCard(group.option.value) }}><div className="imageAdd" /></Button>
</div> </div>
)} )}
@@ -216,28 +232,6 @@ class BoardComponent extends React.Component<Props, State> {
) )
} }
private iconClicked(e: React.MouseEvent) {
const { mutator, boardTree } = this.props
const { board } = boardTree
OldMenu.shared.options = [
{ id: "random", name: "Random" },
{ id: "remove", name: "Remove Icon" },
]
OldMenu.shared.onMenuClicked = (optionId: string, type?: string) => {
switch (optionId) {
case "remove":
mutator.changeIcon(board, undefined, "remove icon")
break
case "random":
const newIcon = BlockIcons.shared.randomIcon()
mutator.changeIcon(board, newIcon)
break
}
}
OldMenu.shared.showAtElement(e.target as HTMLElement)
}
async showCard(card?: IBlock) { async showCard(card?: IBlock) {
console.log(`showCard: ${card?.title}`) console.log(`showCard: ${card?.title}`)
@@ -262,31 +256,6 @@ class BoardComponent extends React.Component<Props, State> {
await mutator.changePropertyOptionValue(boardTree, boardTree.groupByProperty, option, text) await mutator.changePropertyOptionValue(boardTree, boardTree.groupByProperty, option, text)
} }
async valueOptionClicked(e: React.MouseEvent<HTMLElement>, option: IPropertyOption) {
const { mutator, boardTree } = this.props
OldMenu.shared.options = [
{ id: "delete", name: "Delete" },
{ id: "", name: "", type: "separator" },
...Constants.menuColors
]
OldMenu.shared.onMenuClicked = async (optionId: string, type?: string) => {
switch (optionId) {
case "delete":
console.log(`Delete property value: ${option.value}`)
await mutator.deletePropertyOption(boardTree, boardTree.groupByProperty, option)
break
default:
if (type === "color") {
// id is the color
await mutator.changePropertyOptionColor(boardTree.board, option, optionId)
break
}
}
}
OldMenu.shared.showAtElement(e.target as HTMLElement)
}
private filterClicked(e: React.MouseEvent) { private filterClicked(e: React.MouseEvent) {
this.props.showFilter(e.target as HTMLElement) this.props.showFilter(e.target as HTMLElement)
} }

59
src/client/components/tableComponent.tsx
View File

@@ -7,6 +7,7 @@ import { BoardTree } from "../boardTree"
import { CsvExporter } from "../csvExporter" import { CsvExporter } from "../csvExporter"
import ViewMenu from "../components/viewMenu" import ViewMenu from "../components/viewMenu"
import MenuWrapper from "../widgets/menuWrapper" import MenuWrapper from "../widgets/menuWrapper"
import Menu from "../widgets/menu"
import { Menu as OldMenu } from "../menu" import { Menu as OldMenu } from "../menu"
import { Mutator } from "../mutator" import { Mutator } from "../mutator"
import { IBlock } from "../octoTypes" import { IBlock } from "../octoTypes"
@@ -83,7 +84,13 @@ class TableComponent extends React.Component<Props, State> {
<div className="octo-icontitle"> <div className="octo-icontitle">
{board.icon ? {board.icon ?
<div className="octo-button octo-icon" onClick={(e) => { this.iconClicked(e) }}>{board.icon}</div> <MenuWrapper>
<div className="octo-button octo-icon">{board.icon}</div>
<Menu>
<Menu.Text id='random' name='Random' onClick={() => mutator.changeIcon(board, undefined, "remove icon")}/>
<Menu.Text id='remove' name='Remove Icon' onClick={() => mutator.changeIcon(board, BlockIcons.shared.randomIcon())}/>
</Menu>
</MenuWrapper>
: undefined} : undefined}
<Editable className="title" text={board.title} placeholderText="Untitled Board" onChanged={(text) => { mutator.changeTitle(board, text) }} /> <Editable className="title" text={board.title} placeholderText="Untitled Board" onChanged={(text) => { mutator.changeTitle(board, text) }} />
</div> </div>
@@ -91,20 +98,20 @@ class TableComponent extends React.Component<Props, State> {
<div className="octo-table"> <div className="octo-table">
<div className="octo-controls"> <div className="octo-controls">
<Editable style={{ color: "#000000", fontWeight: 600 }} text={activeView.title} placeholderText="Untitled View" onChanged={(text) => { mutator.changeTitle(activeView, text) }} /> <Editable style={{ color: "#000000", fontWeight: 600 }} text={activeView.title} placeholderText="Untitled View" onChanged={(text) => { mutator.changeTitle(activeView, text) }} />
<MenuWrapper> <MenuWrapper>
<div <div
className="octo-button" className="octo-button"
style={{ color: "#000000", fontWeight: 600 }} style={{ color: "#000000", fontWeight: 600 }}
> >
<div className="imageDropdown"></div> <div className="imageDropdown"></div>
</div> </div>
<ViewMenu <ViewMenu
board={board} board={board}
mutator={mutator} mutator={mutator}
boardTree={boardTree} boardTree={boardTree}
showView={showView} showView={showView}
/> />
</MenuWrapper> </MenuWrapper>
<div className="octo-spacer"></div> <div className="octo-spacer"></div>
<div className="octo-button" onClick={(e) => { this.propertiesClicked(e) }}>Properties</div> <div className="octo-button" onClick={(e) => { this.propertiesClicked(e) }}>Properties</div>
<div className={hasFilter ? "octo-button active" : "octo-button"} onClick={(e) => { this.filterClicked(e) }}>Filter</div> <div className={hasFilter ? "octo-button active" : "octo-button"} onClick={(e) => { this.filterClicked(e) }}>Filter</div>
@@ -213,28 +220,6 @@ class TableComponent extends React.Component<Props, State> {
) )
} }
private iconClicked(e: React.MouseEvent) {
const { mutator, boardTree } = this.props
const { board } = boardTree
OldMenu.shared.options = [
{ id: "random", name: "Random" },
{ id: "remove", name: "Remove Icon" },
]
OldMenu.shared.onMenuClicked = (optionId: string, type?: string) => {
switch (optionId) {
case "remove":
mutator.changeIcon(board, undefined, "remove icon")
break
case "random":
const newIcon = BlockIcons.shared.randomIcon()
mutator.changeIcon(board, newIcon)
break
}
}
OldMenu.shared.showAtElement(e.target as HTMLElement)
}
private async propertiesClicked(e: React.MouseEvent) { private async propertiesClicked(e: React.MouseEvent) {
const { mutator, boardTree } = this.props const { mutator, boardTree } = this.props
const { activeView } = boardTree const { activeView } = boardTree

10
src/client/widgets/menu.tsx
View File

@@ -54,13 +54,17 @@ type ColorOptionProps = MenuOptionProps & {
} }
class ColorOption extends React.Component<ColorOptionProps> { class ColorOption extends React.Component<ColorOptionProps> {
handleOnClick = () => {
this.props.onClick(this.props.id)
}
render() { render() {
const {name, icon} = this.props; const {id, name, icon} = this.props;
return ( return (
<div className='MenuOption ColorOption menu-option'> <div className='MenuOption ColorOption menu-option' onClick={this.handleOnClick}>
<div className='name'>{name}</div> <div className='name'>{name}</div>
{icon && <div className={'icon ' + icon}></div>} {icon && <div className={'icon ' + icon}></div>}
<div className='menu-colorbox'></div> <div className={`menu-colorbox ${id}`}></div>
</div> </div>
) )
} }

2
src/client/widgets/menuWrapper.tsx
View File

@@ -86,7 +86,7 @@ export default class MenuWrapper extends React.PureComponent<Props, State> {
onClick={this.toggle} onClick={this.toggle}
ref={this.node} ref={this.node}
> >
{children && !this.state.open ? Object.values(children)[0] : null} {children ? Object.values(children)[0] : null}
{children && this.state.open ? Object.values(children)[1] : null} {children && this.state.open ? Object.values(children)[1] : null}
</div> </div>
); );