self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2025-02-01 19:14:35 +02:00
Code Issues Releases Activity

Board descriptions

Browse Source
This commit is contained in:
Chen-I Lim 2020-11-18 11:11:51 -08:00
parent 4f84ecb741
commit 4a7811836a
5 changed files with 96 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webapp/i18n/en.json
View File

@ -85,9 +85,11 @@
"ViewHeader.test-distribute-cards": "TEST: Distribute cards",
"ViewHeader.test-randomize-icons": "TEST: Randomize icons",
"ViewHeader.untitled": "Untitled",
"ViewTitle.hide-description": "hide description",
"ViewTitle.pick-icon": "Pick Icon",
"ViewTitle.random-icon": "Random",
"ViewTitle.remove-icon": "Remove Icon",
"ViewTitle.show-description": "show description",
"ViewTitle.untitled-board": "Untitled Board",
"WorkspaceComponent.editing-board-template": "You're editing a board template"
}

17
webapp/src/blocks/board.ts
View File

@ -37,6 +37,8 @@ interface IMutablePropertyTemplate extends IPropertyTemplate {
interface Board extends IBlock {
readonly icon: string
readonly description: string
readonly showDescription: boolean
readonly isTemplate: boolean
readonly cardProperties: readonly IPropertyTemplate[]
duplicate(): MutableBoard
@ -50,6 +52,20 @@ class MutableBoard extends MutableBlock {
this.fields.icon = value
}
get description(): string {
return this.fields.description as string
}
set description(value: string) {
this.fields.description = value
}
get showDescription(): boolean {
return Boolean(this.fields.showDescription)
}
set showDescription(value: boolean) {
this.fields.showDescription = value
}
get isTemplate(): boolean {
return Boolean(this.fields.isTemplate)
}
@ -69,6 +85,7 @@ class MutableBoard extends MutableBlock {
this.type = 'board'
this.icon = block.fields?.icon || ''
this.description = block.fields?.description || ''
if (block.fields?.cardProperties) {
// Deep clone of card properties and their options
this.cardProperties = block.fields.cardProperties.map((o: IPropertyTemplate) => {

6
webapp/src/components/viewTitle.scss
View File

@ -5,7 +5,7 @@
align-items: center;
&.add-buttons {
flex-direction: column;
flex-direction: row;
min-height: 30px;
color:rgba(var(--main-fg), 0.4);
width: 100%;
@ -28,4 +28,8 @@
margin-bottom: 0px;
flex-grow: 1;
}
&.description > * {
flex-grow: 1;
}
}

69
webapp/src/components/viewTitle.tsx
View File

@ -9,8 +9,11 @@ import mutator from '../mutator'
import Button from '../widgets/buttons/button'
import Editable from '../widgets/editable'
import EmojiIcon from '../widgets/icons/emoji'
import HideIcon from '../widgets/icons/hide'
import ShowIcon from '../widgets/icons/show'
import BlockIconSelector from './blockIconSelector'
import {MarkdownEditor} from './markdownEditor'
import './viewTitle.scss'
type Props = {
@ -38,19 +41,47 @@ class ViewTitle extends React.Component<Props, State> {
return (
<>
<div className={'ViewTitle add-buttons ' + (board.icon ? '' : 'add-visible')}>
<Button
onClick={() => {
const newIcon = BlockIcons.shared.randomIcon()
mutator.changeIcon(board, newIcon)
}}
icon={<EmojiIcon/>}
>
<FormattedMessage
id='TableComponent.add-icon'
defaultMessage='Add Icon'
/>
</Button>
<div className='ViewTitle add-buttons add-visible'>
{!board.icon &&
<Button
onClick={() => {
const newIcon = BlockIcons.shared.randomIcon()
mutator.changeIcon(board, newIcon)
}}
icon={<EmojiIcon/>}
>
<FormattedMessage
id='TableComponent.add-icon'
defaultMessage='Add Icon'
/>
</Button>
}
{board.showDescription &&
<Button
onClick={() => {
mutator.showDescription(board, false)
}}
icon={<HideIcon/>}
>
<FormattedMessage
id='ViewTitle.hide-description'
defaultMessage='hide description'
/>
</Button>
}
{!board.showDescription &&
<Button
onClick={() => {
mutator.showDescription(board, true)
}}
icon={<ShowIcon/>}
>
<FormattedMessage
id='ViewTitle.show-description'
defaultMessage='show description'
/>
</Button>
}
</div>
<div className='ViewTitle'>
@ -66,6 +97,18 @@ class ViewTitle extends React.Component<Props, State> {
onCancel={() => this.setState({title: this.props.board.title})}
/>
</div>
{board.showDescription &&
<div className='ViewTitle description'>
<MarkdownEditor
text={board.description}
placeholderText='Add a description...'
onBlur={(text) => {
mutator.changeDescription(board, text)
}}
/>
</div>
}
</>
)
}

16
webapp/src/mutator.ts
View File

@ -156,6 +156,22 @@ class Mutator {
await this.updateBlock(newBlock, block, description)
}
async changeDescription(block: IBlock, boardDescription: string, description = 'change description') {
const newBoard = new MutableBoard(block)
newBoard.description = boardDescription
await this.updateBlock(newBoard, block, description)
}
async showDescription(board: Board, showDescription = true, description?: string) {
const newBoard = new MutableBoard(board)
newBoard.showDescription = showDescription
let actionDescription = description
if (!actionDescription) {
actionDescription = showDescription ? 'show description' : 'hide description'
}
await this.updateBlock(newBoard, board, actionDescription)
}
async changeOrder(block: IOrderedBlock, order: number, description = 'change order') {
const newBlock = new MutableOrderedBlock(block)
newBlock.order = order