Moving the title from board/table into an independent component
This commit is contained in:
Jesús Espino
parent
4be57d72b5
commit
52956c3587
3 changed files with 119 additions and 122 deletions
|
|
@ -21,6 +21,7 @@ import {CardDialog} from './cardDialog'
|
|||
import {Editable} from './editable'
|
||||
import RootPortal from './rootPortal'
|
||||
import ViewHeader from './viewHeader'
|
||||
import ViewTitle from './viewTitle'
|
||||
|
||||
type Props = {
|
||||
boardTree?: BoardTree
|
||||
|
|
@ -32,7 +33,6 @@ type State = {
|
|||
isSearching: boolean
|
||||
shownCard?: Card
|
||||
viewMenu: boolean
|
||||
isHoverOnCover: boolean
|
||||
selectedCards: Card[]
|
||||
showFilter: boolean
|
||||
}
|
||||
|
|
@ -67,7 +67,6 @@ class BoardComponent extends React.Component<Props, State> {
|
|||
constructor(props: Props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
isHoverOnCover: false,
|
||||
isSearching: Boolean(this.props.boardTree?.getSearchText()),
|
||||
viewMenu: false,
|
||||
selectedCards: [],
|
||||
|
|
@ -120,51 +119,7 @@ class BoardComponent extends React.Component<Props, State> {
|
|||
</RootPortal>}
|
||||
|
||||
<div className='octo-frame'>
|
||||
<div
|
||||
className='octo-hovercontrols'
|
||||
onMouseOver={() => {
|
||||
this.setState({...this.state, isHoverOnCover: true})
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
this.setState({...this.state, isHoverOnCover: false})
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
style={{display: (!board.icon && this.state.isHoverOnCover) ? null : 'none'}}
|
||||
onClick={() => {
|
||||
const newIcon = BlockIcons.shared.randomIcon()
|
||||
mutator.changeIcon(board, newIcon)
|
||||
}}
|
||||
>Add Icon</Button>
|
||||
</div>
|
||||
|
||||
<div className='octo-icontitle'>
|
||||
{board.icon ?
|
||||
<MenuWrapper>
|
||||
<div className='octo-button octo-icon'>{board.icon}</div>
|
||||
<Menu>
|
||||
<Menu.Text
|
||||
id='random'
|
||||
name='Random'
|
||||
onClick={() => mutator.changeIcon(board, BlockIcons.shared.randomIcon())}
|
||||
/>
|
||||
<Menu.Text
|
||||
id='remove'
|
||||
name='Remove Icon'
|
||||
onClick={() => mutator.changeIcon(board, undefined, 'remove icon')}
|
||||
/>
|
||||
</Menu>
|
||||
</MenuWrapper> :
|
||||
undefined}
|
||||
<Editable
|
||||
className='title'
|
||||
text={board.title}
|
||||
placeholderText='Untitled Board'
|
||||
onChanged={(text) => {
|
||||
mutator.changeTitle(board, text)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<ViewTitle board={board}/>
|
||||
|
||||
<div className='octo-board'>
|
||||
<ViewHeader
|
||||
|
|
|
|||
|
|
@ -10,15 +10,13 @@ import {BoardTree} from '../viewModel/boardTree'
|
|||
import {Menu as OldMenu} from '../menu'
|
||||
import mutator from '../mutator'
|
||||
import {Utils} from '../utils'
|
||||
import Menu from '../widgets/menu'
|
||||
import MenuWrapper from '../widgets/menuWrapper'
|
||||
|
||||
import Button from './button'
|
||||
import {CardDialog} from './cardDialog'
|
||||
import {Editable} from './editable'
|
||||
import RootPortal from './rootPortal'
|
||||
import {TableRow} from './tableRow'
|
||||
import ViewHeader from './viewHeader'
|
||||
import ViewTitle from './viewTitle'
|
||||
|
||||
type Props = {
|
||||
boardTree?: BoardTree
|
||||
|
|
@ -27,7 +25,6 @@ type Props = {
|
|||
}
|
||||
|
||||
type State = {
|
||||
isHoverOnCover: boolean
|
||||
isSearching: boolean
|
||||
shownCard?: Card
|
||||
viewMenu: boolean
|
||||
|
|
@ -42,7 +39,7 @@ class TableComponent extends React.Component<Props, State> {
|
|||
|
||||
constructor(props: Props) {
|
||||
super(props)
|
||||
this.state = {isHoverOnCover: false, isSearching: Boolean(this.props.boardTree?.getSearchText()), viewMenu: false, showFilter: false}
|
||||
this.state = {isSearching: Boolean(this.props.boardTree?.getSearchText()), viewMenu: false, showFilter: false}
|
||||
}
|
||||
|
||||
shouldComponentUpdate(): boolean {
|
||||
|
|
@ -84,76 +81,7 @@ class TableComponent extends React.Component<Props, State> {
|
|||
/>
|
||||
</RootPortal>}
|
||||
<div className='octo-frame'>
|
||||
<div
|
||||
className='octo-hovercontrols'
|
||||
onMouseOver={() => {
|
||||
this.setState({...this.state, isHoverOnCover: true})
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
this.setState({...this.state, isHoverOnCover: false})
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
style={{display: (!board.icon && this.state.isHoverOnCover) ? null : 'none'}}
|
||||
onClick={() => {
|
||||
const newIcon = BlockIcons.shared.randomIcon()
|
||||
mutator.changeIcon(board, newIcon)
|
||||
}}
|
||||
>
|
||||
<FormattedMessage
|
||||
id='TableComponent.add-icon'
|
||||
defaultMessage='Add Icon'
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className='octo-icontitle'>
|
||||
{board.icon &&
|
||||
<MenuWrapper>
|
||||
<div className='octo-button octo-icon'>{board.icon}</div>
|
||||
<Menu>
|
||||
<FormattedMessage
|
||||
id='TableComponent.random-icon'
|
||||
defaultMessage='Random'
|
||||
>
|
||||
{(text: string) => (
|
||||
<Menu.Text
|
||||
id='random'
|
||||
name={text}
|
||||
onClick={() => mutator.changeIcon(board, BlockIcons.shared.randomIcon())}
|
||||
/>
|
||||
)}
|
||||
</FormattedMessage>
|
||||
<FormattedMessage
|
||||
id='TableComponent.remove-icon'
|
||||
defaultMessage='Remove Icon'
|
||||
>
|
||||
{(text: string) => (
|
||||
<Menu.Text
|
||||
id='remove'
|
||||
name={text}
|
||||
onClick={() => mutator.changeIcon(board, undefined, 'remove icon')}
|
||||
/>
|
||||
)}
|
||||
</FormattedMessage>
|
||||
</Menu>
|
||||
</MenuWrapper>}
|
||||
<FormattedMessage
|
||||
id='TableComponent.remove-icon'
|
||||
defaultMessage='Remove Icon'
|
||||
>
|
||||
{(placeholder: string) => (
|
||||
<Editable
|
||||
className='title'
|
||||
text={board.title}
|
||||
placeholderText={placeholder}
|
||||
onChanged={(text) => {
|
||||
mutator.changeTitle(board, text)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</FormattedMessage>
|
||||
</div>
|
||||
<ViewTitle board={board}/>
|
||||
|
||||
<div className='octo-table'>
|
||||
<ViewHeader
|
||||
|
|
|
|||
114
webapp/src/components/viewTitle.tsx
Normal file
114
webapp/src/components/viewTitle.tsx
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
import React from 'react'
|
||||
import {injectIntl, IntlShape, FormattedMessage} from 'react-intl'
|
||||
|
||||
import {BlockIcons} from '../blockIcons'
|
||||
import {Board} from '../blocks/board'
|
||||
import mutator from '../mutator'
|
||||
import Menu from '../widgets/menu'
|
||||
import MenuWrapper from '../widgets/menuWrapper'
|
||||
|
||||
import {Editable} from './editable'
|
||||
import Button from './button'
|
||||
|
||||
type Props = {
|
||||
board: Board
|
||||
intl: IntlShape
|
||||
}
|
||||
|
||||
type State = {
|
||||
isHoverOnCover: boolean
|
||||
}
|
||||
|
||||
class ViewTitle extends React.Component<Props, State> {
|
||||
shouldComponentUpdate(): boolean {
|
||||
return true
|
||||
}
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props)
|
||||
this.state = {isHoverOnCover: false}
|
||||
}
|
||||
|
||||
render(): JSX.Element {
|
||||
const {board} = this.props
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className='octo-hovercontrols'
|
||||
onMouseOver={() => {
|
||||
this.setState({isHoverOnCover: true})
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
this.setState({isHoverOnCover: false})
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
style={{display: (!board.icon && this.state.isHoverOnCover) ? null : 'none'}}
|
||||
onClick={() => {
|
||||
const newIcon = BlockIcons.shared.randomIcon()
|
||||
mutator.changeIcon(board, newIcon)
|
||||
}}
|
||||
>
|
||||
<FormattedMessage
|
||||
id='TableComponent.add-icon'
|
||||
defaultMessage='Add Icon'
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className='octo-icontitle'>
|
||||
{board.icon &&
|
||||
<MenuWrapper>
|
||||
<div className='octo-button octo-icon'>{board.icon}</div>
|
||||
<Menu>
|
||||
<FormattedMessage
|
||||
id='TableComponent.random-icon'
|
||||
defaultMessage='Random'
|
||||
>
|
||||
{(text: string) => (
|
||||
<Menu.Text
|
||||
id='random'
|
||||
name={text}
|
||||
onClick={() => mutator.changeIcon(board, BlockIcons.shared.randomIcon())}
|
||||
/>
|
||||
)}
|
||||
</FormattedMessage>
|
||||
<FormattedMessage
|
||||
id='TableComponent.remove-icon'
|
||||
defaultMessage='Remove Icon'
|
||||
>
|
||||
{(text: string) => (
|
||||
<Menu.Text
|
||||
id='remove'
|
||||
name={text}
|
||||
onClick={() => mutator.changeIcon(board, undefined, 'remove icon')}
|
||||
/>
|
||||
)}
|
||||
</FormattedMessage>
|
||||
</Menu>
|
||||
</MenuWrapper>}
|
||||
<FormattedMessage
|
||||
id='TableComponent.remove-icon'
|
||||
defaultMessage='Remove Icon'
|
||||
>
|
||||
{(placeholder: string) => (
|
||||
<Editable
|
||||
className='title'
|
||||
text={board.title}
|
||||
placeholderText={placeholder}
|
||||
onChanged={(text) => {
|
||||
mutator.changeTitle(board, text)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</FormattedMessage>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default injectIntl(ViewTitle)
|
||||
Loading…
Reference in a new issue