diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index a826a1b46..6adf4c0fc 100644 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -158,5 +158,6 @@ "ViewTitle.remove-icon": "Remove icon", "ViewTitle.show-description": "show description", "ViewTitle.untitled-board": "Untitled board", - "Workspace.editing-board-template": "You're editing a board template" + "Workspace.editing-board-template": "You're editing a board template", + "default-properties.title": "Title" } \ No newline at end of file diff --git a/webapp/src/components/gallery/gallery.tsx b/webapp/src/components/gallery/gallery.tsx index 4d26fc9b2..212994c80 100644 --- a/webapp/src/components/gallery/gallery.tsx +++ b/webapp/src/components/gallery/gallery.tsx @@ -3,6 +3,7 @@ import React, {useState, useEffect} from 'react' import {FormattedMessage} from 'react-intl' +import {Constants} from '../../constants' import {Card} from '../../blocks/card' import {BoardTree} from '../../viewModel/boardTree' import {CardTree, MutableCardTree} from '../../viewModel/cardTree' @@ -24,6 +25,7 @@ const Gallery = (props: Props): JSX.Element => { const {cards} = boardTree const visiblePropertyTemplates = boardTree.board.cardProperties.filter((template) => boardTree.activeView.visiblePropertyIds.includes(template.id)) const [cardTrees, setCardTrees] = useState<{[key: string]: CardTree | undefined}>({}) + const visibleTitle = boardTree.activeView.visiblePropertyIds.includes(Constants.titleColumnId) useCardListener( cards.map((c) => c.id), @@ -60,6 +62,7 @@ const Gallery = (props: Props): JSX.Element => { cardTree={cardTree} onClick={props.onCardClicked} visiblePropertyTemplates={visiblePropertyTemplates} + visibleTitle={visibleTitle} isSelected={props.selectedCardIds.includes(card.id)} readonly={props.readonly} /> diff --git a/webapp/src/components/gallery/galleryCard.tsx b/webapp/src/components/gallery/galleryCard.tsx index 71ff4b1f6..915722df9 100644 --- a/webapp/src/components/gallery/galleryCard.tsx +++ b/webapp/src/components/gallery/galleryCard.tsx @@ -3,6 +3,7 @@ import React from 'react' import {FormattedMessage, injectIntl, IntlShape} from 'react-intl' +import {Constants} from '../../constants' import {IPropertyTemplate} from '../../blocks/board' import {Card} from '../../blocks/card' import {CardTree} from '../../viewModel/cardTree' @@ -26,6 +27,7 @@ type Props = { cardTree: CardTree onClick: (e: React.MouseEvent, card: Card) => void visiblePropertyTemplates: IPropertyTemplate[] + visibleTitle: boolean isSelected: boolean intl: IntlShape readonly: boolean @@ -83,16 +85,17 @@ const GalleryCard = React.memo((props: Props) => { /> ))} } -
- { cardTree.card.icon ?
{cardTree.card.icon}
: undefined } -
- {cardTree.card.title || - } -
-
+ {props.visibleTitle && +
+ { cardTree.card.icon ?
{cardTree.card.icon}
: undefined } +
+ {cardTree.card.title || + } +
+
} {visiblePropertyTemplates.length > 0 &&
{visiblePropertyTemplates.map((template) => ( diff --git a/webapp/src/components/viewHeader/viewHeaderPropertiesMenu.tsx b/webapp/src/components/viewHeader/viewHeaderPropertiesMenu.tsx index 0d997980f..55c63af9e 100644 --- a/webapp/src/components/viewHeader/viewHeaderPropertiesMenu.tsx +++ b/webapp/src/components/viewHeader/viewHeaderPropertiesMenu.tsx @@ -1,8 +1,9 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. import React from 'react' -import {FormattedMessage} from 'react-intl' +import {FormattedMessage, injectIntl, IntlShape} from 'react-intl' +import {Constants} from '../../constants' import {IPropertyTemplate} from '../../blocks/board' import {BoardView} from '../../blocks/boardView' import mutator from '../../mutator' @@ -13,6 +14,7 @@ import MenuWrapper from '../../widgets/menuWrapper' type Props = { properties: readonly IPropertyTemplate[] activeView: BoardView + intl: IntlShape } const ViewHeaderPropertiesMenu = React.memo((props: Props) => { const {properties, activeView} = props @@ -25,6 +27,22 @@ const ViewHeaderPropertiesMenu = React.memo((props: Props) => { /> + {activeView.viewType === 'gallery' && + { + let newVisiblePropertyIds = [] + if (activeView.visiblePropertyIds.includes(propertyId)) { + newVisiblePropertyIds = activeView.visiblePropertyIds.filter((o: string) => o !== propertyId) + } else { + newVisiblePropertyIds = [...activeView.visiblePropertyIds, propertyId] + } + mutator.changeViewVisibleProperties(activeView, newVisiblePropertyIds) + }} + />} {properties.map((option: IPropertyTemplate) => ( { ) }) -export default ViewHeaderPropertiesMenu +export default injectIntl(ViewHeaderPropertiesMenu)