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

Add icon to ContentRegistry

Browse Source
This commit is contained in:
Chen-I Lim 2021-03-09 13:01:16 -08:00
parent 9b6eb3357d
commit 6c80a681e2
2 changed files with 26 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
webapp/src/components/content/contentRegistry.tsx
View File

@ -11,6 +11,9 @@ import {MutableDividerBlock} from '../../blocks/dividerBlock'
import {MutableImageBlock} from '../../blocks/imageBlock'
import {MutableTextBlock} from '../../blocks/textBlock'
import {Utils} from '../../utils'
import DividerIcon from '../../widgets/icons/divider'
import ImageIcon from '../../widgets/icons/image'
import TextIcon from '../../widgets/icons/text'
import DividerElement from './dividerElement'
import ImageElement from './imageElement'
@ -20,6 +23,7 @@ type RegistryEntry = {
type: BlockTypes,
createBlock: () => MutableContentBlock,
getDisplayText: (intl: IntlShape) => string,
getIcon: () => JSX.Element,
createComponent: (block: IContentBlock, readonly: boolean) => JSX.Element,
}
@ -38,6 +42,7 @@ class ContentRegistry {
return new MutableTextBlock()
},
getDisplayText: (intl) => intl.formatMessage({id: 'ContentBlock.text', defaultMessage: 'text'}),
getIcon: () => <TextIcon/>,
createComponent: (block, readonly) => (
<TextElement
block={block}
@ -47,17 +52,6 @@ class ContentRegistry {
},
)
this.registerContentType(
{
type: 'divider',
createBlock: () => {
return new MutableDividerBlock()
},
getDisplayText: (intl) => intl.formatMessage({id: 'ContentBlock.divider', defaultMessage: 'divider'}),
createComponent: () => <DividerElement/>,
},
)
this.registerContentType(
{
type: 'image',
@ -65,9 +59,22 @@ class ContentRegistry {
return new MutableImageBlock()
},
getDisplayText: (intl) => intl.formatMessage({id: 'ContentBlock.image', defaultMessage: 'image'}),
getIcon: () => <ImageIcon/>,
createComponent: (block) => <ImageElement block={block}/>,
},
)
this.registerContentType(
{
type: 'divider',
createBlock: () => {
return new MutableDividerBlock()
},
getDisplayText: (intl) => intl.formatMessage({id: 'ContentBlock.divider', defaultMessage: 'divider'}),
getIcon: () => <DividerIcon/>,
createComponent: () => <DividerElement/>,
},
)
}
private registerContentType(entry: RegistryEntry) {
@ -97,6 +104,11 @@ class ContentRegistry {
return entry.getDisplayText(intl)
}
getIcon(type: BlockTypes): JSX.Element | undefined {
const entry = this.registry.get(type)
return entry?.getIcon()
}
}
const contentRegistry = new ContentRegistry()

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

@ -12,17 +12,15 @@ import {Utils} from '../utils'
import IconButton from '../widgets/buttons/iconButton'
import AddIcon from '../widgets/icons/add'
import DeleteIcon from '../widgets/icons/delete'
import ImageIcon from '../widgets/icons/image'
import OptionsIcon from '../widgets/icons/options'
import SortDownIcon from '../widgets/icons/sortDown'
import SortUpIcon from '../widgets/icons/sortUp'
import TextIcon from '../widgets/icons/text'
import Menu from '../widgets/menu'
import MenuWrapper from '../widgets/menuWrapper'
import ContentElement from './content/contentElement'
import './contentBlock.scss'
import contentRegistry from './content/contentRegistry'
import './contentBlock.scss'
type Props = {
block: IContentBlock
@ -108,7 +106,7 @@ class ContentBlock extends React.PureComponent<Props> {
ref={type}
id={type}
name={contentRegistry.typeDisplayText(intl, type)}
icon={<ImageIcon/>}
icon={contentRegistry.getIcon(type)}
onClick={() => {
Utils.selectLocalFile((file) => {
mutator.performAsUndoGroup(async () => {
@ -130,7 +128,7 @@ class ContentBlock extends React.PureComponent<Props> {
ref={type}
id={type}
name={contentRegistry.typeDisplayText(intl, type)}
icon={<TextIcon/>}
icon={contentRegistry.getIcon(type)}
onClick={() => {
const newBlock = contentRegistry.createBlock(type)!
newBlock.parentId = card.id