From e35ba1abc5ddc485f0cdd8f7f3f7bb55ac27a6ca Mon Sep 17 00:00:00 2001 From: Chen-I Lim Date: Mon, 4 Jan 2021 12:08:12 -0800 Subject: [PATCH] Property Menu: i18n --- webapp/i18n/en.json | 22 +++++++++-- webapp/src/components/contentBlock.tsx | 6 +-- webapp/src/widgets/propertyMenu.tsx | 52 +++++++++++++++++--------- 3 files changed, 56 insertions(+), 24 deletions(-) diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index 5b7f410ab..30cf650ee 100644 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -24,9 +24,9 @@ "ContentBlock.Delete": "Delete", "ContentBlock.DeleteAction": "delete", "ContentBlock.Text": "Text", - "ContentBlock.addDivider": "Add divider", - "ContentBlock.addImage": "Add image", - "ContentBlock.addText": "Add text", + "ContentBlock.addDivider": "add divider", + "ContentBlock.addImage": "add image", + "ContentBlock.addText": "add text", "ContentBlock.divider": "Divider", "ContentBlock.editCardText": "edit card text", "ContentBlock.editText": "Edit text...", @@ -44,6 +44,22 @@ "Mutator.new-card-from-template": "new card from template", "Mutator.new-template-from-board": "new template from board", "Mutator.new-template-from-card": "new template from card", + "PropertyMenu.changeType": "Change property type", + "PropertyMenu.typeTitle": "Type", + "PropertyType.Checkbox": "Checkbox", + "PropertyType.CreatedBy": "Created By", + "PropertyType.CreatedTime": "Created Time", + "PropertyType.Email": "Email", + "PropertyType.File": "File or Media", + "PropertyType.MultiSelect": "Multi Select", + "PropertyType.Number": "Number", + "PropertyType.Person": "Person", + "PropertyType.Phone": "Phone", + "PropertyType.Select": "Select", + "PropertyType.Text": "Text", + "PropertyType.URL": "URL", + "PropertyType.UpdatedBy": "Updated By", + "PropertyType.UpdatedTime": "Updated Time", "Sidebar.add-board": "+ Add Board", "Sidebar.add-template": "+ New template", "Sidebar.dark-theme": "Dark theme", diff --git a/webapp/src/components/contentBlock.tsx b/webapp/src/components/contentBlock.tsx index 3d91e8cd9..7620a7341 100644 --- a/webapp/src/components/contentBlock.tsx +++ b/webapp/src/components/contentBlock.tsx @@ -89,7 +89,7 @@ class ContentBlock extends React.PureComponent { const contentOrder = contents.map((o) => o.id) contentOrder.splice(index, 0, newBlock.id) mutator.performAsUndoGroup(async () => { - const description = intl.formatMessage({id: 'ContentBlock.addText', defaultMessage: 'Add text'}) + const description = intl.formatMessage({id: 'ContentBlock.addText', defaultMessage: 'add text'}) await mutator.insertBlock(newBlock, description) await mutator.changeCardContentOrder(card, contentOrder, description) }) @@ -102,7 +102,7 @@ class ContentBlock extends React.PureComponent { onClick={() => { Utils.selectLocalFile((file) => { mutator.performAsUndoGroup(async () => { - const description = intl.formatMessage({id: 'ContentBlock.addImage', defaultMessage: 'Add image'}) + const description = intl.formatMessage({id: 'ContentBlock.addImage', defaultMessage: 'add image'}) const newBlock = await mutator.createImageBlock(card, file, description) if (newBlock) { const contentOrder = contents.map((o) => o.id) @@ -126,7 +126,7 @@ class ContentBlock extends React.PureComponent { const contentOrder = contents.map((o) => o.id) contentOrder.splice(index, 0, newBlock.id) mutator.performAsUndoGroup(async () => { - const description = intl.formatMessage({id: 'ContentBlock.addDivider', defaultMessage: 'Add divider'}) + const description = intl.formatMessage({id: 'ContentBlock.addDivider', defaultMessage: 'add divider'}) await mutator.insertBlock(newBlock, description) await mutator.changeCardContentOrder(card, contentOrder, description) }) diff --git a/webapp/src/widgets/propertyMenu.tsx b/webapp/src/widgets/propertyMenu.tsx index e6362d84d..5fc320c71 100644 --- a/webapp/src/widgets/propertyMenu.tsx +++ b/webapp/src/widgets/propertyMenu.tsx @@ -1,12 +1,11 @@ // 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 {PropertyType} from '../blocks/board' import {Utils} from '../utils' - import Menu from '../widgets/menu' - import './propertyMenu.scss' type Props = { @@ -16,13 +15,14 @@ type Props = { onNameChanged: (newName: string) => void onTypeChanged: (newType: PropertyType) => void onDelete: (id: string) => void + intl: IntlShape } type State = { name: string } -export default class PropertyMenu extends React.PureComponent { +class PropertyMenu extends React.PureComponent { private nameTextbox = React.createRef() constructor(props: Props) { @@ -36,21 +36,23 @@ export default class PropertyMenu extends React.PureComponent { } private typeDisplayName(type: PropertyType): string { + const {intl} = this.props + switch (type) { - case 'text': return 'Text' - case 'number': return 'Number' - case 'select': return 'Select' - case 'multiSelect': return 'Multi Select' - case 'person': return 'Person' - case 'file': return 'File or Media' - case 'checkbox': return 'Checkbox' - case 'url': return 'URL' - case 'email': return 'Email' - case 'phone': return 'Phone' - case 'createdTime': return 'Created Time' - case 'createdBy': return 'Created By' - case 'updatedTime': return 'Updated Time' - case 'updatedBy': return 'Updated By' + case 'text': return intl.formatMessage({id: 'PropertyType.Text', defaultMessage: 'Text'}) + case 'number': return intl.formatMessage({id: 'PropertyType.Number', defaultMessage: 'Number'}) + case 'select': return intl.formatMessage({id: 'PropertyType.Select', defaultMessage: 'Select'}) + case 'multiSelect': return intl.formatMessage({id: 'PropertyType.MultiSelect', defaultMessage: 'Multi Select'}) + case 'person': return intl.formatMessage({id: 'PropertyType.Person', defaultMessage: 'Person'}) + case 'file': return intl.formatMessage({id: 'PropertyType.File', defaultMessage: 'File or Media'}) + case 'checkbox': return intl.formatMessage({id: 'PropertyType.Checkbox', defaultMessage: 'Checkbox'}) + case 'url': return intl.formatMessage({id: 'PropertyType.URL', defaultMessage: 'URL'}) + case 'email': return intl.formatMessage({id: 'PropertyType.Email', defaultMessage: 'Email'}) + case 'phone': return intl.formatMessage({id: 'PropertyType.Phone', defaultMessage: 'Phone'}) + case 'createdTime': return intl.formatMessage({id: 'PropertyType.CreatedTime', defaultMessage: 'Created Time'}) + case 'createdBy': return intl.formatMessage({id: 'PropertyType.CreatedBy', defaultMessage: 'Created By'}) + case 'updatedTime': return intl.formatMessage({id: 'PropertyType.UpdatedTime', defaultMessage: 'Updated Time'}) + case 'updatedBy': return intl.formatMessage({id: 'PropertyType.UpdatedBy', defaultMessage: 'Updated By'}) default: { Utils.assertFailure(`typeDisplayName, unhandled type: ${type}`) return type @@ -58,6 +60,10 @@ export default class PropertyMenu extends React.PureComponent { } } + private typeMenuTitle(type: PropertyType): string { + return `${this.props.intl.formatMessage({id: 'PropertyMenu.typeTitle', defaultMessage: 'Type'})}: ${this.typeDisplayName(type)}` + } + public render(): JSX.Element { return ( @@ -78,8 +84,16 @@ export default class PropertyMenu extends React.PureComponent { /> + + + {this.props.intl.formatMessage({id: 'PropertyMenu.changeType', defaultMessage: 'Change property type'})} + + + + + { ) } } + +export default injectIntl(PropertyMenu)