Improving a bit the icon selector moving it to a component
This commit is contained in:
Jesús Espino
parent
e93f95bf62
commit
9a7c613022
7 changed files with 132 additions and 81 deletions
32
webapp/src/components/blockIconSelector.scss
Normal file
32
webapp/src/components/blockIconSelector.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
.BlockIconSelector {
|
||||
.octo-icon {
|
||||
display: flex;
|
||||
line-height: 1.1;
|
||||
margin-left: 0;
|
||||
color: #000000;
|
||||
border-radius: 5px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&:hover {
|
||||
background-color: rgba(var(--main-fg), 0.1);
|
||||
}
|
||||
&.size-s {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
font-size: 20px;
|
||||
}
|
||||
&.size-m {
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
font-size: 36px;
|
||||
}
|
||||
&.size-l {
|
||||
height: 78px;
|
||||
width: 78px;
|
||||
font-size: 64px;
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
76
webapp/src/components/blockIconSelector.tsx
Normal file
76
webapp/src/components/blockIconSelector.tsx
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
import React from 'react'
|
||||
import {injectIntl, IntlShape} from 'react-intl'
|
||||
|
||||
import {BlockIcons} from '../blockIcons'
|
||||
import {Board} from '../blocks/board'
|
||||
import {Card} from '../blocks/card'
|
||||
import mutator from '../mutator'
|
||||
import Menu from '../widgets/menu'
|
||||
import MenuWrapper from '../widgets/menuWrapper'
|
||||
import EmojiPicker from '../widgets/emojiPicker'
|
||||
import EmojiIcon from '../widgets/icons/emoji'
|
||||
import DeleteIcon from '../widgets/icons/delete'
|
||||
|
||||
import './blockIconSelector.scss'
|
||||
|
||||
type Props = {
|
||||
block: Board|Card
|
||||
size?: 's' | 'm' | 'l'
|
||||
intl: IntlShape
|
||||
}
|
||||
|
||||
class BlockIconSelector extends React.Component<Props> {
|
||||
static defaultProps: Partial<Props> = {
|
||||
size: 'm',
|
||||
}
|
||||
|
||||
shouldComponentUpdate(): boolean {
|
||||
return true
|
||||
}
|
||||
|
||||
onSelectEmoji = (emoji: string) => {
|
||||
mutator.changeIcon(this.props.block, emoji)
|
||||
|
||||
// Close the menu
|
||||
document.body.click()
|
||||
}
|
||||
|
||||
render(): JSX.Element {
|
||||
const {block, intl, size} = this.props
|
||||
if (!block.icon) {
|
||||
return null
|
||||
}
|
||||
return (
|
||||
<div className='BlockIconSelector'>
|
||||
<MenuWrapper>
|
||||
<div className={`octo-icon size-${size}`}><span>{block.icon}</span></div>
|
||||
<Menu>
|
||||
<Menu.Text
|
||||
id='random'
|
||||
icon={<EmojiIcon/>}
|
||||
name={intl.formatMessage({id: 'ViewTitle.random-icon', defaultMessage: 'Random'})}
|
||||
onClick={() => mutator.changeIcon(block, BlockIcons.shared.randomIcon())}
|
||||
/>
|
||||
<Menu.SubMenu
|
||||
id='pick'
|
||||
icon={<EmojiIcon/>}
|
||||
name={intl.formatMessage({id: 'ViewTitle.pick-icon', defaultMessage: 'Pick Icon'})}
|
||||
>
|
||||
<EmojiPicker onSelect={this.onSelectEmoji}/>
|
||||
</Menu.SubMenu>
|
||||
<Menu.Text
|
||||
id='remove'
|
||||
icon={<DeleteIcon/>}
|
||||
name={intl.formatMessage({id: 'ViewTitle.remove-icon', defaultMessage: 'Remove Icon'})}
|
||||
onClick={() => mutator.changeIcon(block, undefined, 'remove icon')}
|
||||
/>
|
||||
</Menu>
|
||||
</MenuWrapper>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default injectIntl(BlockIconSelector)
|
||||
|
|
@ -14,15 +14,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.octo-card-icon {
|
||||
height: 78px;
|
||||
min-width: 78px;
|
||||
font-size: 78px;
|
||||
line-height: 1.1;
|
||||
margin-left: 0;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.octo-propertylist {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -14,13 +14,14 @@ import {Utils} from '../utils'
|
|||
import MenuWrapper from '../widgets/menuWrapper'
|
||||
import Menu from '../widgets/menu'
|
||||
import Editable from '../widgets/editable'
|
||||
import EmojiPicker from '../widgets/emojiPicker'
|
||||
import Button from '../widgets/buttons/button'
|
||||
import EmojiIcon from '../widgets/icons/emoji'
|
||||
|
||||
import {MarkdownEditor} from './markdownEditor'
|
||||
import ContentBlock from './contentBlock'
|
||||
import CommentsList from './commentsList'
|
||||
import PropertyMenu from './propertyMenu'
|
||||
import BlockIconSelector from './blockIconSelector'
|
||||
import PropertyValueElement from './propertyValueElement'
|
||||
|
||||
import './cardDetail.scss'
|
||||
|
|
@ -51,13 +52,6 @@ class CardDetail extends React.Component<Props, State> {
|
|||
}
|
||||
}
|
||||
|
||||
onSelectEmoji = (emoji: string) => {
|
||||
mutator.changeIcon(this.state.cardTree.card, emoji)
|
||||
|
||||
// Close the menu
|
||||
document.body.click()
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.cardListener = new OctoListener()
|
||||
this.cardListener.open([this.props.cardId], async (blockId) => {
|
||||
|
|
@ -127,28 +121,10 @@ class CardDetail extends React.Component<Props, State> {
|
|||
return (
|
||||
<>
|
||||
<div className='CardDetail content'>
|
||||
{icon &&
|
||||
<MenuWrapper>
|
||||
<div className='octo-button octo-icon octo-card-icon'>{icon}</div>
|
||||
<Menu>
|
||||
<Menu.Text
|
||||
id='random'
|
||||
name={intl.formatMessage({id: 'CardDetail.random-icon', defaultMessage: 'Random'})}
|
||||
onClick={() => mutator.changeIcon(card, BlockIcons.shared.randomIcon())}
|
||||
/>
|
||||
<Menu.SubMenu
|
||||
id='pick'
|
||||
name={intl.formatMessage({id: 'CardDetail.pick-icon', defaultMessage: 'Pick Icon'})}
|
||||
>
|
||||
<EmojiPicker onSelect={this.onSelectEmoji}/>
|
||||
</Menu.SubMenu>
|
||||
<Menu.Text
|
||||
id='remove'
|
||||
name={intl.formatMessage({id: 'CardDetail.remove-icon', defaultMessage: 'Remove Icon'})}
|
||||
onClick={() => mutator.changeIcon(card, undefined, 'remove icon')}
|
||||
/>
|
||||
</Menu>
|
||||
</MenuWrapper>}
|
||||
<BlockIconSelector
|
||||
block={card}
|
||||
size='l'
|
||||
/>
|
||||
{!icon &&
|
||||
<div className='octo-hovercontrols'>
|
||||
<Button
|
||||
|
|
@ -156,6 +132,7 @@ class CardDetail extends React.Component<Props, State> {
|
|||
const newIcon = BlockIcons.shared.randomIcon()
|
||||
mutator.changeIcon(card, newIcon)
|
||||
}}
|
||||
icon={<EmojiIcon/>}
|
||||
>
|
||||
<FormattedMessage
|
||||
id='CardDetail.add-icon'
|
||||
|
|
|
|||
|
|
@ -1,4 +1,9 @@
|
|||
.ViewTitle {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
&.octo-hovercontrols {
|
||||
.Button {
|
||||
display: none;
|
||||
|
|
@ -9,4 +14,12 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.BlockIconSelector {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.Editable {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,13 +6,11 @@ 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 '../widgets/editable'
|
||||
import EmojiPicker from '../widgets/emojiPicker'
|
||||
import Button from '../widgets/buttons/button'
|
||||
import EmojiIcon from '../widgets/icons/emoji'
|
||||
import DeleteIcon from '../widgets/icons/delete'
|
||||
|
||||
import BlockIconSelector from './blockIconSelector'
|
||||
|
||||
import './viewTitle.scss'
|
||||
|
||||
|
|
@ -36,13 +34,6 @@ class ViewTitle extends React.Component<Props, State> {
|
|||
this.state = {title: props.board.title}
|
||||
}
|
||||
|
||||
onSelectEmoji = (emoji: string) => {
|
||||
mutator.changeIcon(this.props.board, emoji)
|
||||
|
||||
// Close the menu
|
||||
document.body.click()
|
||||
}
|
||||
|
||||
render(): JSX.Element {
|
||||
const {board, intl} = this.props
|
||||
|
||||
|
|
@ -63,32 +54,8 @@ class ViewTitle extends React.Component<Props, State> {
|
|||
</Button>
|
||||
</div>
|
||||
|
||||
<div className='ViewTitle octo-icontitle'>
|
||||
{board.icon &&
|
||||
<MenuWrapper>
|
||||
<div className='octo-button octo-icon'>{board.icon}</div>
|
||||
<Menu>
|
||||
<Menu.Text
|
||||
id='random'
|
||||
icon={<EmojiIcon/>}
|
||||
name={intl.formatMessage({id: 'ViewTitle.random-icon', defaultMessage: 'Random'})}
|
||||
onClick={() => mutator.changeIcon(board, BlockIcons.shared.randomIcon())}
|
||||
/>
|
||||
<Menu.SubMenu
|
||||
id='pick'
|
||||
icon={<EmojiIcon/>}
|
||||
name={intl.formatMessage({id: 'ViewTitle.pick-icon', defaultMessage: 'Pick Icon'})}
|
||||
>
|
||||
<EmojiPicker onSelect={this.onSelectEmoji}/>
|
||||
</Menu.SubMenu>
|
||||
<Menu.Text
|
||||
id='remove'
|
||||
icon={<DeleteIcon/>}
|
||||
name={intl.formatMessage({id: 'ViewTitle.remove-icon', defaultMessage: 'Remove Icon'})}
|
||||
onClick={() => mutator.changeIcon(board, undefined, 'remove icon')}
|
||||
/>
|
||||
</Menu>
|
||||
</MenuWrapper>}
|
||||
<div className='ViewTitle'>
|
||||
<BlockIconSelector block={board}/>
|
||||
<Editable
|
||||
ref={this.titleEditor}
|
||||
className='title'
|
||||
|
|
|
|||
|
|
@ -173,11 +173,6 @@ hr {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.octo-frame > .octo-icontitle .octo-icon {
|
||||
font-size: 36px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
/*-- Property list --*/
|
||||
|
||||
.octo-propertyvalue {
|
||||
|
|
|
|||
Loading…
Reference in a new issue