From 2336aedf7db374b9af32c48713ccf2106e1f27b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jes=C3=BAs=20Espino?= Date: Sun, 25 Oct 2020 09:47:50 +0100 Subject: [PATCH] Migrate to new menu system the board card --- webapp/i18n/en.json | 13 +++- webapp/i18n/es.json | 11 ++++ webapp/src/components/boardCard.scss | 12 ++++ webapp/src/components/boardCard.tsx | 75 ++++++++---------------- webapp/src/components/boardComponent.tsx | 2 +- 5 files changed, 61 insertions(+), 52 deletions(-) create mode 100644 webapp/src/components/boardCard.scss diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index 7d2ef6221..c390e29e9 100644 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -1,4 +1,7 @@ { + "BoardCard.delete": "Delete", + "BoardCard.duplicate": "Duplicate", + "BoardCard.untitled": "Untitled", "BoardComponent.add-a-group": "+ Add a group", "BoardComponent.delete": "Delete", "BoardComponent.hidden-columns": "Hidden Columns", @@ -7,6 +10,7 @@ "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", + "Comment.delete": "Delete", "Sidebar.add-board": "+ Add Board", "Sidebar.delete-board": "Delete Board", "Sidebar.export-archive": "Export Archive", @@ -20,6 +24,13 @@ "TableComponent.loading": "Loading...", "TableComponent.name": "Name", "TableComponent.plus-new": "+ New", + "TableHeaderMenu.delete": "Delete", + "TableHeaderMenu.duplicate": "Duplicate", + "TableHeaderMenu.hide": "Hide", + "TableHeaderMenu.insert-left": "Insert left", + "TableHeaderMenu.insert-right": "Insert right", + "TableHeaderMenu.sort-ascending": "Sort ascending", + "TableHeaderMenu.sort-descending": "Sort descending", "ViewHeader.export-board-archive": "Export Board Archive", "ViewHeader.export-csv": "Export to CSV", "ViewHeader.filter": "Filter", @@ -35,4 +46,4 @@ "ViewTitle.random-icon": "Random", "ViewTitle.remove-icon": "Remove Icon", "ViewTitle.untitled-board": "Untitled Board" -} \ No newline at end of file +} diff --git a/webapp/i18n/es.json b/webapp/i18n/es.json index 40993b105..a14ae0cf5 100644 --- a/webapp/i18n/es.json +++ b/webapp/i18n/es.json @@ -1,4 +1,7 @@ { + "BoardCard.delete": "Borrar", + "BoardCard.duplicate": "Duplicar", + "BoardCard.untitled": "Sin título", "BoardComponent.add-a-group": "+ Añadir un grupo", "BoardComponent.delete": "Borrar", "BoardComponent.hidden-columns": "Columnas Ocultas", @@ -7,6 +10,7 @@ "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", + "Comment.delete": "Borrar", "Sidebar.add-board": "+ Añadir Panel", "Sidebar.delete-board": "Borrar Panel", "Sidebar.export-archive": "Exportar Archivo", @@ -20,6 +24,13 @@ "TableComponent.loading": "Cargando...", "TableComponent.name": "Nombre", "TableComponent.plus-new": "+ Nueva", + "TableHeaderMenu.delete": "Borrar", + "TableHeaderMenu.duplicate": "Duplicar", + "TableHeaderMenu.hide": "Ocultar", + "TableHeaderMenu.insert-left": "Insertar a la izquierda", + "TableHeaderMenu.insert-right": "Insertar a la derecha", + "TableHeaderMenu.sort-ascending": "Orden ascendente", + "TableHeaderMenu.sort-descending": "Orden descendente", "ViewHeader.export-board-archive": "Exportar Archivo del Panel", "ViewHeader.export-csv": "Exportar a CSV", "ViewHeader.filter": "Filtrar", diff --git a/webapp/src/components/boardCard.scss b/webapp/src/components/boardCard.scss new file mode 100644 index 000000000..106192e31 --- /dev/null +++ b/webapp/src/components/boardCard.scss @@ -0,0 +1,12 @@ +.BoardCard { + .MenuWrapper { + display: none; + position: absolute; + right: 0; + } + &:hover { + .MenuWrapper { + display: block; + } + } +} diff --git a/webapp/src/components/boardCard.tsx b/webapp/src/components/boardCard.tsx index 9de6f1d1b..479ef1879 100644 --- a/webapp/src/components/boardCard.tsx +++ b/webapp/src/components/boardCard.tsx @@ -1,15 +1,18 @@ // 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 {MutableBlock} from '../blocks/block' import {IPropertyTemplate} from '../blocks/board' import {Card} from '../blocks/card' -import {Menu} from '../menu' import mutator from '../mutator' import {OctoUtils} from '../octoUtils' -import {Utils} from '../utils' +import MenuWrapper from '../widgets/menuWrapper' +import Menu from '../widgets/menu' + +import './boardCard.scss' type BoardCardProps = { card: Card @@ -18,6 +21,7 @@ type BoardCardProps = { onClick?: (e: React.MouseEvent) => void onDragStart?: (e: React.DragEvent) => void onDragEnd?: (e: React.DragEvent) => void + intl: IntlShape } type BoardCardState = { @@ -35,10 +39,9 @@ class BoardCard extends React.Component { } render(): JSX.Element { - const {card} = this.props - const optionsButtonRef = React.createRef() + const {card, intl} = this.props const visiblePropertyTemplates = this.props.visiblePropertyTemplates || [] - const className = this.props.isSelected ? 'octo-board-card selected' : 'octo-board-card' + const className = this.props.isSelected ? 'BoardCard octo-board-card selected' : 'BoardCard octo-board-card' const element = (
{ this.setState({isDragged: false}) this.props.onDragEnd(e) }} - - onMouseOver={() => { - optionsButtonRef.current.style.display = null - }} - onMouseLeave={() => { - optionsButtonRef.current.style.display = 'none' - }} > -
{ - this.showOptionsMenu(e) - }} - >
+ +
+ + mutator.deleteBlock(card, 'delete card')} + /> + mutator.insertBlock(MutableBlock.duplicate(card), 'duplicate card')} + /> + +
{ card.icon ?
{card.icon}
: undefined } -
{card.title || 'Untitled'}
+
{card.title || intl.formatMessage({id: 'BoardCard.untitled', defaultMessage: 'Untitled'})}
{visiblePropertyTemplates.map((template) => { return OctoUtils.propertyValueReadonlyElement(card, template, '') @@ -83,34 +86,6 @@ class BoardCard extends React.Component { return element } - - private showOptionsMenu(e: React.MouseEvent) { - const {card} = this.props - - e.stopPropagation() - - Menu.shared.options = [ - {id: 'delete', name: 'Delete'}, - {id: 'duplicate', name: 'Duplicate'}, - ] - Menu.shared.onMenuClicked = (id) => { - switch (id) { - case 'delete': { - mutator.deleteBlock(card, 'delete card') - break - } - case 'duplicate': { - const newCard = MutableBlock.duplicate(card) - mutator.insertBlock(newCard, 'duplicate card') - break - } - default: { - Utils.assertFailure(`Unhandled menu id: ${id}`) - } - } - } - Menu.shared.showAtElement(e.target as HTMLElement) - } } -export {BoardCard} +export default injectIntl(BoardCard) diff --git a/webapp/src/components/boardComponent.tsx b/webapp/src/components/boardComponent.tsx index f71491450..17fc4485f 100644 --- a/webapp/src/components/boardComponent.tsx +++ b/webapp/src/components/boardComponent.tsx @@ -15,7 +15,7 @@ import {Utils} from '../utils' import Menu from '../widgets/menu' import MenuWrapper from '../widgets/menuWrapper' -import {BoardCard} from './boardCard' +import BoardCard from './boardCard' import {BoardColumn} from './boardColumn' import Button from './button' import {CardDialog} from './cardDialog'