mirror of
https://github.com/mattermost/focalboard.git
synced 2024-12-24 13:43:12 +02:00
Migrate content menu to new menus
This commit is contained in:
parent
d840f46d4e
commit
4aa5a6a79b
@ -35,5 +35,8 @@
|
||||
width: 150px;
|
||||
margin-right: 5px;
|
||||
color: #909090;
|
||||
&.add-property {
|
||||
color: rgba(55, 53, 37, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -211,13 +211,17 @@ class CardDetail extends React.Component<Props, State> {
|
||||
})}
|
||||
|
||||
<div
|
||||
className='octo-button octo-propertyname'
|
||||
style={{textAlign: 'left', width: '150px', color: 'rgba(55, 53, 37, 0.4)'}}
|
||||
className='octo-button octo-propertyname add-property'
|
||||
onClick={async () => {
|
||||
// TODO: Show UI
|
||||
await mutator.insertPropertyTemplate(boardTree)
|
||||
}}
|
||||
>+ Add a property</div>
|
||||
>
|
||||
<FormattedMessage
|
||||
id='CardDetail.add-property'
|
||||
defaultMessage='+ Add a property'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Comments */}
|
||||
|
@ -4,13 +4,15 @@
|
||||
import React from 'react'
|
||||
|
||||
import {IOrderedBlock} from '../blocks/orderedBlock'
|
||||
import {Menu as OldMenu, MenuOption} from '../menu'
|
||||
import {CardTree} from '../viewModel/cardTree'
|
||||
import {OctoUtils} from '../octoUtils'
|
||||
import mutator from '../mutator'
|
||||
import {Utils} from '../utils'
|
||||
import {MutableTextBlock} from '../blocks/textBlock'
|
||||
|
||||
import Menu from '../widgets/menu'
|
||||
import MenuWrapper from '../widgets/menuWrapper'
|
||||
|
||||
import {MarkdownEditor} from './markdownEditor'
|
||||
|
||||
type Props = {
|
||||
@ -24,98 +26,76 @@ class ContentBlock extends React.Component<Props> {
|
||||
return true
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
OldMenu.shared.hide()
|
||||
}
|
||||
|
||||
private showContentBlockMenu(e: React.MouseEvent) {
|
||||
const {cardId, cardTree, block} = this.props
|
||||
const index = cardTree.contents.indexOf(block)
|
||||
|
||||
const options: MenuOption[] = []
|
||||
if (index > 0) {
|
||||
options.push({id: 'moveUp', name: 'Move up'})
|
||||
}
|
||||
if (index < cardTree.contents.length - 1) {
|
||||
options.push({id: 'moveDown', name: 'Move down'})
|
||||
}
|
||||
|
||||
options.push(
|
||||
{id: 'insertAbove', name: 'Insert above', type: 'submenu'},
|
||||
{id: 'delete', name: 'Delete'},
|
||||
)
|
||||
|
||||
OldMenu.shared.options = options
|
||||
OldMenu.shared.subMenuOptions.set('insertAbove', [
|
||||
{id: 'text', name: 'Text'},
|
||||
{id: 'image', name: 'Image'},
|
||||
])
|
||||
OldMenu.shared.onMenuClicked = (optionId: string, type?: string) => {
|
||||
switch (optionId) {
|
||||
case 'moveUp': {
|
||||
if (index < 1) {
|
||||
Utils.logError(`Unexpected index ${index}`); return
|
||||
}
|
||||
const previousBlock = cardTree.contents[index - 1]
|
||||
const newOrder = OctoUtils.getOrderBefore(previousBlock, cardTree.contents)
|
||||
Utils.log(`moveUp ${newOrder}`)
|
||||
mutator.changeOrder(block, newOrder, 'move up')
|
||||
break
|
||||
}
|
||||
case 'moveDown': {
|
||||
if (index >= cardTree.contents.length - 1) {
|
||||
Utils.logError(`Unexpected index ${index}`); return
|
||||
}
|
||||
const nextBlock = cardTree.contents[index + 1]
|
||||
const newOrder = OctoUtils.getOrderAfter(nextBlock, cardTree.contents)
|
||||
Utils.log(`moveDown ${newOrder}`)
|
||||
mutator.changeOrder(block, newOrder, 'move down')
|
||||
break
|
||||
}
|
||||
case 'insertAbove-text': {
|
||||
const newBlock = new MutableTextBlock()
|
||||
newBlock.parentId = cardId
|
||||
|
||||
// TODO: Handle need to reorder all blocks
|
||||
newBlock.order = OctoUtils.getOrderBefore(block, cardTree.contents)
|
||||
Utils.log(`insert block ${block.id}, order: ${block.order}`)
|
||||
mutator.insertBlock(newBlock, 'insert card text')
|
||||
break
|
||||
}
|
||||
case 'insertAbove-image': {
|
||||
Utils.selectLocalFile(
|
||||
(file) => {
|
||||
mutator.createImageBlock(cardId, file, OctoUtils.getOrderBefore(block, cardTree.contents))
|
||||
},
|
||||
'.jpg,.jpeg,.png')
|
||||
|
||||
break
|
||||
}
|
||||
case 'delete': {
|
||||
mutator.deleteBlock(block)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
OldMenu.shared.showAtElement(e.target as HTMLElement)
|
||||
}
|
||||
|
||||
public render(): JSX.Element {
|
||||
const {block} = this.props
|
||||
const {cardId, cardTree, block} = this.props
|
||||
if (block.type !== 'text' && block.type !== 'image') {
|
||||
return null
|
||||
}
|
||||
const index = cardTree.contents.indexOf(block)
|
||||
return (
|
||||
<div className='octo-block octo-hover-container'>
|
||||
<div className='octo-block-margin'>
|
||||
<div
|
||||
className='octo-button octo-hovercontrol square octo-hover-item'
|
||||
onClick={(e) => {
|
||||
this.showContentBlockMenu(e)
|
||||
}}
|
||||
>
|
||||
<div className='imageOptions'/>
|
||||
</div>
|
||||
<MenuWrapper>
|
||||
<div className='octo-button octo-hovercontrol square octo-hover-item'><div className='imageOptions'/></div>
|
||||
<Menu>
|
||||
{index > 0 &&
|
||||
<Menu.Text
|
||||
id='moveUp'
|
||||
name='Move up'
|
||||
onClick={() => {
|
||||
const previousBlock = cardTree.contents[index - 1]
|
||||
const newOrder = OctoUtils.getOrderBefore(previousBlock, cardTree.contents)
|
||||
Utils.log(`moveUp ${newOrder}`)
|
||||
mutator.changeOrder(block, newOrder, 'move up')
|
||||
}}
|
||||
/>}
|
||||
{index < (cardTree.contents.length - 1) &&
|
||||
<Menu.Text
|
||||
id='moveDown'
|
||||
name='Move down'
|
||||
onClick={() => {
|
||||
const nextBlock = cardTree.contents[index + 1]
|
||||
const newOrder = OctoUtils.getOrderAfter(nextBlock, cardTree.contents)
|
||||
Utils.log(`moveDown ${newOrder}`)
|
||||
mutator.changeOrder(block, newOrder, 'move down')
|
||||
}}
|
||||
/>}
|
||||
<Menu.SubMenu
|
||||
id='insertAbove'
|
||||
name='Insert above'
|
||||
>
|
||||
<Menu.Text
|
||||
id='text'
|
||||
name='Text'
|
||||
onClick={() => {
|
||||
const newBlock = new MutableTextBlock()
|
||||
newBlock.parentId = cardId
|
||||
|
||||
// TODO: Handle need to reorder all blocks
|
||||
newBlock.order = OctoUtils.getOrderBefore(block, cardTree.contents)
|
||||
Utils.log(`insert block ${block.id}, order: ${block.order}`)
|
||||
mutator.insertBlock(newBlock, 'insert card text')
|
||||
}}
|
||||
/>
|
||||
<Menu.Text
|
||||
id='image'
|
||||
name='Image'
|
||||
onClick={() => {
|
||||
Utils.selectLocalFile(
|
||||
(file) => {
|
||||
mutator.createImageBlock(cardId, file, OctoUtils.getOrderBefore(block, cardTree.contents))
|
||||
},
|
||||
'.jpg,.jpeg,.png')
|
||||
}}
|
||||
/>
|
||||
</Menu.SubMenu>
|
||||
<Menu.Text
|
||||
id='delete'
|
||||
name='Delete'
|
||||
onClick={() => mutator.deleteBlock(block)}
|
||||
/>
|
||||
</Menu>
|
||||
</MenuWrapper>
|
||||
</div>
|
||||
{block.type === 'text' &&
|
||||
<MarkdownEditor
|
||||
|
Loading…
Reference in New Issue
Block a user