self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2024-11-27 08:31:20 +02:00
Code Issues Releases Activity

Migrating card icon menu from card details into new menu system

Browse Source
This commit is contained in:
Jesús Espino 2020-10-25 13:09:15 +01:00
parent 122d94443c
commit 1c2cf03645
4 changed files with 65 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
webapp/i18n/en.json
View File

@ -10,6 +10,10 @@
"BoardComponent.no-property": "No {property}",
"BoardComponent.no-property-title": "Items with an empty {property} property will go here. This column cannot be removed.",
"BoardComponent.show": "Show",
"CardDetail.add-icon": "Add Icon",
"CardDetail.new-comment-placeholder": "Add a comment...",
"CardDetail.random-icon": "Random",
"CardDetail.remove-icon": "Remove Icon",
"Comment.delete": "Delete",
"Filter.includes": "includes",
"Filter.is-empty": "is empty",

4
webapp/i18n/es.json
View File

@ -10,6 +10,10 @@
"BoardComponent.no-property": "Sin {property}",
"BoardComponent.no-property-title": "Elementos sin la propiedad {property} irán aquí. Esta columna no se puede eliminar.",
"BoardComponent.show": "Mostrar",
"CardDetail.add-icon": "Añadir icono",
"CardDetail.new-comment-placeholder": "Añadir un comentario...",
"CardDetail.random-icon": "Aleatorio",
"CardDetail.remove-icon": "Quitar icono",
"Comment.delete": "Borrar",
"Filter.includes": "incluye",
"Filter.is-empty": "está vacío",

12
webapp/src/components/cardDetail.scss Normal file
View File

@ -0,0 +1,12 @@
.CardDetail {
.octo-hovercontrols {
.Button {
display: none;
}
&:hover {
.Button {
display: block;
}
}
}
}

103
webapp/src/components/cardDetail.tsx
View File

@ -1,6 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react'
import {FormattedMessage, IntlShape, injectIntl} from 'react-intl'
import {BlockIcons} from '../blockIcons'
import {MutableCommentBlock} from '../blocks/commentBlock'
@ -15,28 +16,33 @@ import {OctoUtils} from '../octoUtils'
import {PropertyMenu} from '../propertyMenu'
import {Utils} from '../utils'
import MenuWrapper from '../widgets/menuWrapper'
import Menu from '../widgets/menu'
import Button from './button'
import {Editable} from './editable'
import {MarkdownEditor} from './markdownEditor'
import Comment from './comment'
import './cardDetail.scss'
type Props = {
boardTree: BoardTree
cardId: string
intl: IntlShape
}
type State = {
isHoverOnCover: boolean
cardTree?: CardTree
}
export default class CardDetail extends React.Component<Props, State> {
class CardDetail extends React.Component<Props, State> {
private titleRef = React.createRef<Editable>()
private cardListener?: OctoListener
constructor(props: Props) {
super(props)
this.state = {isHoverOnCover: false}
this.state = {}
}
componentDidMount() {
@ -63,7 +69,7 @@ export default class CardDetail extends React.Component<Props, State> {
}
render() {
const {boardTree} = this.props
const {boardTree, intl} = this.props
const {cardTree} = this.state
const {board} = boardTree
if (!cardTree) {
@ -71,8 +77,6 @@ export default class CardDetail extends React.Component<Props, State> {
}
const {card, comments} = cardTree
const newCommentPlaceholderText = 'Add a comment...'
const newCommentRef = React.createRef<Editable>()
const sendCommentButtonRef = React.createRef<HTMLDivElement>()
let contentElements
@ -158,33 +162,36 @@ export default class CardDetail extends React.Component<Props, State> {
return (
<>
<div className='content'>
{icon ?
<div
className='octo-button octo-icon octo-card-icon'
onClick={(e) => {
this.iconClicked(e)
}}
>{icon}</div> :
undefined
}
<div
className='octo-hovercontrols'
onMouseOver={() => {
this.setState({...this.state, isHoverOnCover: true})
}}
onMouseLeave={() => {
this.setState({...this.state, isHoverOnCover: false})
}}
>
<Button
style={{display: (!icon && this.state.isHoverOnCover) ? null : 'none'}}
onClick={() => {
const newIcon = BlockIcons.shared.randomIcon()
mutator.changeIcon(card, newIcon)
}}
>Add Icon</Button>
</div>
<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.Text
id='remove'
name={intl.formatMessage({id: 'CardDetail.remove-icon', defaultMessage: 'Remove Icon'})}
onClick={() => mutator.changeIcon(card, undefined, 'remove icon')}
/>
</Menu>
</MenuWrapper>}
{!icon &&
<div className='octo-hovercontrols'>
<Button
onClick={() => {
const newIcon = BlockIcons.shared.randomIcon()
mutator.changeIcon(card, newIcon)
}}>
<FormattedMessage
id='CardDetail.add-icon'
defaultMessage='Add Icon'
/>
</Button>
</div>}
<Editable
ref={this.titleRef}
@ -280,7 +287,7 @@ export default class CardDetail extends React.Component<Props, State> {
<Editable
ref={newCommentRef}
className='newcomment'
placeholderText={newCommentPlaceholderText}
placeholderText={intl.formatMessage({id: 'CardDetail.new-comment-placeholder', defaultMessage: 'Add a comment...'})}
onChanged={(text) => { }}
onFocus={() => {
sendCommentButtonRef.current.style.display = null
@ -317,11 +324,11 @@ export default class CardDetail extends React.Component<Props, State> {
{/* Content blocks */}
<div className='content fullwidth'>
<div className='CardDetail content fullwidth'>
{contentElements}
</div>
<div className='content'>
<div className='CardDetail content'>
<div className='octo-hoverpanel octo-hover-container'>
<div
className='octo-button octo-hovercontrol octo-hover-item'
@ -438,30 +445,10 @@ export default class CardDetail extends React.Component<Props, State> {
OldMenu.shared.showAtElement(e.target as HTMLElement)
}
private iconClicked(e: React.MouseEvent) {
const {cardTree} = this.state
const {card} = cardTree
OldMenu.shared.options = [
{id: 'random', name: 'Random'},
{id: 'remove', name: 'Remove Icon'},
]
OldMenu.shared.onMenuClicked = (optionId: string, type?: string) => {
switch (optionId) {
case 'remove':
mutator.changeIcon(card, undefined, 'remove icon')
break
case 'random':
const newIcon = BlockIcons.shared.randomIcon()
mutator.changeIcon(card, newIcon)
break
}
}
OldMenu.shared.showAtElement(e.target as HTMLElement)
}
close() {
OldMenu.shared.hide()
PropertyMenu.shared.hide()
}
}
export default injectIntl(CardDetail)