self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2024-11-24 08:22:29 +02:00
Code Issues Releases Activity

Migrate content menu to new menus

Browse Source
This commit is contained in:
Jesús Espino 2020-10-26 07:39:20 +01:00
parent d840f46d4e
commit 4aa5a6a79b
3 changed files with 76 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
webapp/src/components/cardDetail.scss
View File

@ -35,5 +35,8 @@
width: 150px;
margin-right: 5px;
color: #909090;
&.add-property {
color: rgba(55, 53, 37, 0.4);
}
}
}

10
webapp/src/components/cardDetail.tsx
View File

@ -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 */}

152
webapp/src/components/contentBlock.tsx
View File

@ -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