Adding divider content blocks

webapp/src/blocks/dividerBlock.tsx

@@ -0,0 +1,15 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import {IOrderedBlock, MutableOrderedBlock} from './orderedBlock'
+
+type DividerBlock = IOrderedBlock
+
+class MutableDividerBlock extends MutableOrderedBlock {
+    constructor(block: any = {}) {
+        super(block)
+        this.type = 'divider'
+    }
+}
+
+export {DividerBlock, MutableDividerBlock}
+

webapp/src/components/contentBlock.scss

@@ -7,4 +7,10 @@
             display: flex;
         }
     }
+    .divider {
+        padding-top: 16px;
+        border-bottom: 1px solid rgba(var(--main-fg), 0.09);
+        margin-bottom: 17px;
+        flex-grow: 1;
+    }
 }

webapp/src/components/contentBlock.tsx

@@ -9,6 +9,7 @@ import {OctoUtils} from '../octoUtils'
 import mutator from '../mutator'
 import {Utils} from '../utils'
 import {MutableTextBlock} from '../blocks/textBlock'
+import {MutableDividerBlock} from '../blocks/dividerBlock'
 
 import Menu from '../widgets/menu'
 import MenuWrapper from '../widgets/menuWrapper'
@@ -19,6 +20,7 @@ import DeleteIcon from '../widgets/icons/delete'
 import AddIcon from '../widgets/icons/add'
 import TextIcon from '../widgets/icons/text'
 import ImageIcon from '../widgets/icons/image'
+import DividerIcon from '../widgets/icons/divider'
 
 import {MarkdownEditor} from './markdownEditor'
 
@@ -37,7 +39,7 @@ class ContentBlock extends React.Component<Props> {
 
     public render(): JSX.Element {
         const {cardId, cardTree, block} = this.props
-        if (block.type !== 'text' && block.type !== 'image') {
+        if (block.type !== 'text' && block.type !== 'image' && block.type !== 'divider') {
             return null
         }
         const index = cardTree.contents.indexOf(block)
@@ -102,6 +104,20 @@ class ContentBlock extends React.Component<Props> {
                                             '.jpg,.jpeg,.png')
                                     }}
                                 />
+                                <Menu.Text
+                                    id='divider'
+                                    name='Divider'
+                                    icon={<DividerIcon/>}
+                                    onClick={() => {
+                                        const newBlock = new MutableDividerBlock()
+                                        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.SubMenu>
                             <Menu.Text
                                 icon={<DeleteIcon/>}
@@ -121,6 +137,7 @@ class ContentBlock extends React.Component<Props> {
                             mutator.changeTitle(block, text, 'edit card text')
                         }}
                     />}
+                {block.type === 'divider' && <div className='divider'/>}
                 {block.type === 'image' &&
                     <img
                         src={block.fields.url}

webapp/src/octoUtils.tsx

@@ -8,6 +8,7 @@ import {MutableBoardView} from './blocks/boardView'
 import {MutableCard} from './blocks/card'
 import {MutableCommentBlock} from './blocks/commentBlock'
 import {MutableImageBlock} from './blocks/imageBlock'
+import {MutableDividerBlock} from './blocks/dividerBlock'
 import {IOrderedBlock} from './blocks/orderedBlock'
 import {MutableTextBlock} from './blocks/textBlock'
 import {Utils} from './utils'
@@ -67,6 +68,7 @@ class OctoUtils {
         case 'card': { return new MutableCard(block) }
         case 'text': { return new MutableTextBlock(block) }
         case 'image': { return new MutableImageBlock(block) }
+        case 'divider': { return new MutableDividerBlock(block) }
         case 'comment': { return new MutableCommentBlock(block) }
         default: {
             Utils.assertFailure(`Can't hydrate unknown block type: ${block.type}`)

webapp/src/viewModel/cardTree.ts

@@ -32,7 +32,7 @@ class MutableCardTree implements CardTree {
             filter((block) => block.type === 'comment').
             sort((a, b) => a.createAt - b.createAt)
 
-        const contentBlocks = blocks.filter((block) => block.type === 'text' || block.type === 'image') as IOrderedBlock[]
+        const contentBlocks = blocks.filter((block) => block.type === 'text' || block.type === 'image' || block.type === 'divider') as IOrderedBlock[]
         this.contents = contentBlocks.sort((a, b) => a.order - b.order)
     }
 }

webapp/src/widgets/icons/divider.scss

@@ -0,0 +1,6 @@
+.DividerIcon {
+    fill: rgba(var(--main-fg), 0.7);
+    stroke: none;
+	width: 24px;
+	height: 24px;
+}

webapp/src/widgets/icons/divider.tsx

@@ -0,0 +1,20 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react'
+
+import './divider.scss'
+
+export default function DividerIcon(): JSX.Element {
+    return (
+        <svg
+            xmlns='http://www.w3.org/2000/svg'
+            className='DividerIcon Icon'
+            viewBox='0 0 448 512'
+        >
+            <path
+                d='M 432,224 H 16 c -8.836556,0 -16,7.16344 -16,16 v 32 c 0,8.83656 7.163444,16 16,16 h 416 c 8.83656,0 16,-7.16344 16,-16 v -32 c 0,-8.83656 -7.16344,-16 -16,-16 z'
+            />
+        </svg>
+    )
+}