From c03ffbe4a0c25326c5d78d26921029d0e2a84fbf Mon Sep 17 00:00:00 2001
From: Nils Petter Fremming <35219649+nilscognite@users.noreply.github.com>
Date: Tue, 20 Aug 2024 14:56:15 +0200
Subject: [PATCH] fix(react-components): Finalize the string for translation
(#4711)
* Initial commit
* Add final strings
* Fix shortcut keys on commands so they are according to Cogs standard
* Sync strings
---
.../architecture/base/commands/BaseCommand.ts | 11 ++++---
.../base/commands/mocks/MockFilterCommand.ts | 2 +-
.../PointCloudFilterCommand.ts | 2 +-
.../SetPointColorTypeCommand.ts | 10 +++---
.../concrete/clipping/ClipTool.ts | 2 +-
.../concrete/clipping/SliceDomainObject.ts | 8 ++---
.../clipping/commands/ApplyClipCommand.ts | 2 +-
.../clipping/commands/FlipSliceCommand.ts | 2 +-
.../clipping/commands/NextClippingCommand.ts | 4 +--
.../clipping/commands/SetClipTypeCommand.ts | 20 +++++------
.../commands/ShowAllClippingCommand.ts | 2 +-
.../commands/ShowClippingOnTopCommand.ts | 2 +-
.../primitives/plane/PlaneDomainObject.ts | 8 ++---
.../i18n/en/reveal-react-components.json | 33 ++++++++++++++++++-
.../components/Architecture/CommandButton.tsx | 3 +-
.../components/Architecture/FilterButton.tsx | 3 +-
.../Architecture/LabelWithShortcut.tsx | 13 ++++++--
.../components/Architecture/OptionButton.tsx | 3 +-
.../Architecture/SettingsButton.tsx | 6 ++--
19 files changed, 85 insertions(+), 51 deletions(-)
diff --git a/react-components/src/architecture/base/commands/BaseCommand.ts b/react-components/src/architecture/base/commands/BaseCommand.ts
index ce6e93cb5e0..8b73bb262af 100644
--- a/react-components/src/architecture/base/commands/BaseCommand.ts
+++ b/react-components/src/architecture/base/commands/BaseCommand.ts
@@ -163,18 +163,19 @@ export abstract class BaseCommand {
return translate(key, fallback);
}
- public getShortCutKeys(): string | undefined {
+ public getShortCutKeys(): string[] | undefined {
const key = this.shortCutKey;
if (key === undefined) {
return undefined;
}
- let result = '';
+ const keys: string[] = [];
if (this.shortCutKeyOnCtrl) {
- result += 'Ctrl+';
+ keys.push('Ctrl');
}
if (this.shortCutKeyOnShift) {
- result += 'Shift+';
+ keys.push('Shift');
}
- return result + key;
+ keys.push(key);
+ return keys;
}
}
diff --git a/react-components/src/architecture/base/commands/mocks/MockFilterCommand.ts b/react-components/src/architecture/base/commands/mocks/MockFilterCommand.ts
index 856cbd54138..1147e9c8996 100644
--- a/react-components/src/architecture/base/commands/mocks/MockFilterCommand.ts
+++ b/react-components/src/architecture/base/commands/mocks/MockFilterCommand.ts
@@ -21,7 +21,7 @@ export class MockFilterCommand extends BaseFilterCommand {
// ==================================================
public override get tooltip(): TranslateKey {
- return { key: '', fallback: 'Filter' };
+ return { fallback: 'Filter' };
}
protected override createChildren(): FilterItemCommand[] {
diff --git a/react-components/src/architecture/base/concreteCommands/PointCloudFilterCommand.ts b/react-components/src/architecture/base/concreteCommands/PointCloudFilterCommand.ts
index 267ead40d55..be63d28c761 100644
--- a/react-components/src/architecture/base/concreteCommands/PointCloudFilterCommand.ts
+++ b/react-components/src/architecture/base/concreteCommands/PointCloudFilterCommand.ts
@@ -22,7 +22,7 @@ export class PointCloudFilterCommand extends BaseFilterCommand {
// ==================================================
public override get tooltip(): TranslateKey {
- return { key: 'POINT_FILTER', fallback: 'Points filter' };
+ return { key: 'POINT_FILTER', fallback: 'Point filter' };
}
public override get isEnabled(): boolean {
diff --git a/react-components/src/architecture/base/concreteCommands/SetPointColorTypeCommand.ts b/react-components/src/architecture/base/concreteCommands/SetPointColorTypeCommand.ts
index 4de861c55c3..11f5715e5f3 100644
--- a/react-components/src/architecture/base/concreteCommands/SetPointColorTypeCommand.ts
+++ b/react-components/src/architecture/base/concreteCommands/SetPointColorTypeCommand.ts
@@ -80,18 +80,18 @@ function getTranslateKey(type: PointColorType): TranslateKey {
case PointColorType.Rgb:
return { key: 'RGB', fallback: 'RGB' };
case PointColorType.Depth:
- return { key: 'DEPTH', fallback: 'Depth' };
+ return { key: 'MEASUREMENTS_DEPTH', fallback: 'Depth' };
case PointColorType.Height:
- return { key: 'HEIGHT', fallback: 'Height' };
+ return { key: 'MEASUREMENTS_HEIGHT', fallback: 'Height' };
case PointColorType.Classification:
return { key: 'CLASSIFICATION', fallback: 'Classification' };
case PointColorType.Intensity:
return { key: 'INTENSITY', fallback: 'Intensity' };
case PointColorType.LevelOfDetail:
- return { key: 'LEVEL_OF_DETAIL', fallback: 'LevelOfDetail' };
+ return { fallback: 'LevelOfDetail' };
case PointColorType.PointIndex:
- return { key: 'POINT_INDEX', fallback: 'PointIndex' };
+ return { fallback: 'PointIndex' };
default:
- return { key: 'UNKNOWN', fallback: 'Unknown' };
+ return { fallback: 'Unknown' };
}
}
diff --git a/react-components/src/architecture/concrete/clipping/ClipTool.ts b/react-components/src/architecture/concrete/clipping/ClipTool.ts
index dd8aacd3ae8..8bd0747ec8a 100644
--- a/react-components/src/architecture/concrete/clipping/ClipTool.ts
+++ b/react-components/src/architecture/concrete/clipping/ClipTool.ts
@@ -37,7 +37,7 @@ export class ClipTool extends PrimitiveEditTool {
}
public override get tooltip(): TranslateKey {
- return { key: 'CLIP_TOOL', fallback: 'Create or edit crop box and slice planes' };
+ return { key: 'CLIP_TOOL', fallback: 'Create, edit crop boxes, and slice planes' };
}
public override getToolbar(): Array<BaseCommand | undefined> {
diff --git a/react-components/src/architecture/concrete/clipping/SliceDomainObject.ts b/react-components/src/architecture/concrete/clipping/SliceDomainObject.ts
index 33a18535149..5560497a8d5 100644
--- a/react-components/src/architecture/concrete/clipping/SliceDomainObject.ts
+++ b/react-components/src/architecture/concrete/clipping/SliceDomainObject.ts
@@ -32,13 +32,13 @@ export class SliceDomainObject extends PlaneDomainObject {
public override get typeName(): TranslateKey {
switch (this.primitiveType) {
case PrimitiveType.PlaneX:
- return { key: 'SLICE_X', fallback: 'X slice' };
+ return { key: 'SLICE_X', fallback: 'Vertical slice along Y-axis' };
case PrimitiveType.PlaneY:
- return { key: 'SLICE_Y', fallback: 'Y slice' };
+ return { key: 'SLICE_Y', fallback: 'Vertical slice along X-axis' };
case PrimitiveType.PlaneZ:
- return { key: 'SLICE_Z', fallback: 'Z slice' };
+ return { key: 'SLICE_Z', fallback: 'Horizontal slice' };
case PrimitiveType.PlaneXY:
- return { key: 'SLICE_XY', fallback: 'XY slice' };
+ return { key: 'SLICE_XY', fallback: 'Vertical slice' };
default:
throw new Error('Unknown PrimitiveType');
}
diff --git a/react-components/src/architecture/concrete/clipping/commands/ApplyClipCommand.ts b/react-components/src/architecture/concrete/clipping/commands/ApplyClipCommand.ts
index 9f5f4bcf7e4..135b2b06fc2 100644
--- a/react-components/src/architecture/concrete/clipping/commands/ApplyClipCommand.ts
+++ b/react-components/src/architecture/concrete/clipping/commands/ApplyClipCommand.ts
@@ -18,7 +18,7 @@ export class ApplyClipCommand extends RenderTargetCommand {
public override get tooltip(): TranslateKey {
return {
key: 'CLIP_APPLY',
- fallback: 'Apply selected crop box to the model if any, otherwise apply all slice planes'
+ fallback: 'Apply selected crop box to a model. Otherwise, apply to all slice planes'
};
}
diff --git a/react-components/src/architecture/concrete/clipping/commands/FlipSliceCommand.ts b/react-components/src/architecture/concrete/clipping/commands/FlipSliceCommand.ts
index 1e6c7c2108b..3b0808e23ab 100644
--- a/react-components/src/architecture/concrete/clipping/commands/FlipSliceCommand.ts
+++ b/react-components/src/architecture/concrete/clipping/commands/FlipSliceCommand.ts
@@ -14,7 +14,7 @@ export class FlipSliceCommand extends DomainObjectCommand<SliceDomainObject> {
// ==================================================
public override get tooltip(): TranslateKey {
- return { key: 'SLICE_FLIP', fallback: 'Flip side on this slice' };
+ return { key: 'SLICE_FLIP', fallback: 'Flip side' };
}
public override get icon(): string {
diff --git a/react-components/src/architecture/concrete/clipping/commands/NextClippingCommand.ts b/react-components/src/architecture/concrete/clipping/commands/NextClippingCommand.ts
index 13b35b8b0ac..915f373e555 100644
--- a/react-components/src/architecture/concrete/clipping/commands/NextClippingCommand.ts
+++ b/react-components/src/architecture/concrete/clipping/commands/NextClippingCommand.ts
@@ -29,12 +29,12 @@ export class NextOrPrevClippingCommand extends RenderTargetCommand {
if (this._next) {
return {
key: 'CLIP_NEXT',
- fallback: 'Set the next crop box or slicing plane as global clipping'
+ fallback: 'Set next crop box or slicing plane as global clipping'
};
} else {
return {
key: 'CLIP_PREV',
- fallback: 'Set the previous crop box or slicing plane as global clipping'
+ fallback: 'Set previous crop box or slicing plane as global clipping'
};
}
}
diff --git a/react-components/src/architecture/concrete/clipping/commands/SetClipTypeCommand.ts b/react-components/src/architecture/concrete/clipping/commands/SetClipTypeCommand.ts
index 54d8b19963b..d43d2db33b6 100644
--- a/react-components/src/architecture/concrete/clipping/commands/SetClipTypeCommand.ts
+++ b/react-components/src/architecture/concrete/clipping/commands/SetClipTypeCommand.ts
@@ -113,29 +113,29 @@ function getTooltipByPrimitiveType(primitiveType: PrimitiveType): TranslateKey {
switch (primitiveType) {
case PrimitiveType.PlaneX:
return {
- key: 'SLICE_X_ADD',
- fallback: 'Add X slice. Click at one point.'
+ key: 'ADD_SLICE_X',
+ fallback: 'Add vertical slice along Y-axis. Select a point.'
};
case PrimitiveType.PlaneY:
return {
- key: 'SLICE_Y_ADD',
- fallback: 'Add Y slice. Click at one point.'
+ key: 'ADD_SLICE_Y',
+ fallback: 'Add vertical slice along X-axis. Select a point.'
};
case PrimitiveType.PlaneZ:
return {
- key: 'SLICE_Z_ADD',
- fallback: 'Add Z slice. Click at one point.'
+ key: 'ADD_SLICE_Z',
+ fallback: 'Add horizontal slice. Select a point.'
};
case PrimitiveType.PlaneXY:
return {
- key: 'SLICE_XY_ADD',
- fallback: 'Add XY slice. Click at two points.'
+ key: 'ADD_SLICE_XY',
+ fallback: 'Add vertical slice. Select two points.'
};
case PrimitiveType.Box:
return {
- key: 'CROP_BOX_ADD',
+ key: 'ADD_CROP_BOX',
fallback:
- 'Create crop box. Click at three points in a horizontal plan and the fourth to give it height.'
+ 'Create crop box. Select three points in a horizontal plane, then select a fourth point for height.'
};
default:
throw new Error('Unknown PrimitiveType');
diff --git a/react-components/src/architecture/concrete/clipping/commands/ShowAllClippingCommand.ts b/react-components/src/architecture/concrete/clipping/commands/ShowAllClippingCommand.ts
index 277371532cd..3c70c44fe4e 100644
--- a/react-components/src/architecture/concrete/clipping/commands/ShowAllClippingCommand.ts
+++ b/react-components/src/architecture/concrete/clipping/commands/ShowAllClippingCommand.ts
@@ -16,7 +16,7 @@ export class ShowAllClippingCommand extends InstanceCommand {
public override get tooltip(): TranslateKey {
return {
key: 'CLIP_SHOW_SELECTED_ONLY',
- fallback: 'Show or hide all other slicing planes and crop boxes than selected'
+ fallback: 'Show/hide slicing planes and crop boxes that are not selected'
};
}
diff --git a/react-components/src/architecture/concrete/clipping/commands/ShowClippingOnTopCommand.ts b/react-components/src/architecture/concrete/clipping/commands/ShowClippingOnTopCommand.ts
index 3faf9672216..125cda932ff 100644
--- a/react-components/src/architecture/concrete/clipping/commands/ShowClippingOnTopCommand.ts
+++ b/react-components/src/architecture/concrete/clipping/commands/ShowClippingOnTopCommand.ts
@@ -14,7 +14,7 @@ export class ShowClippingOnTopCommand extends ShowDomainObjectsOnTopCommand {
// ==================================================
public override get tooltip(): TranslateKey {
- return { key: 'CLIP_SHOW_ON_TOP', fallback: 'Show all crop boxes and slices on top' };
+ return { key: 'CLIP_SHOW_ON_TOP', fallback: 'Show crop boxes and slices on top' };
}
protected override isInstance(domainObject: DomainObject): boolean {
diff --git a/react-components/src/architecture/concrete/primitives/plane/PlaneDomainObject.ts b/react-components/src/architecture/concrete/primitives/plane/PlaneDomainObject.ts
index bde225ea4d4..a7bd664faa0 100644
--- a/react-components/src/architecture/concrete/primitives/plane/PlaneDomainObject.ts
+++ b/react-components/src/architecture/concrete/primitives/plane/PlaneDomainObject.ts
@@ -88,13 +88,13 @@ export abstract class PlaneDomainObject extends VisualDomainObject {
public override get typeName(): TranslateKey {
switch (this.primitiveType) {
case PrimitiveType.PlaneX:
- return { key: 'PLANE_X', fallback: 'Vertical plane along Y-axis' };
+ return { fallback: 'Vertical plane along Y-axis' };
case PrimitiveType.PlaneY:
- return { key: 'PLANE_Y', fallback: 'Vertical plane along X-axis' };
+ return { fallback: 'Vertical plane along X-axis' };
case PrimitiveType.PlaneZ:
- return { key: 'PLANE_Z', fallback: 'Horizontal plane' };
+ return { fallback: 'Horizontal plane' };
case PrimitiveType.PlaneXY:
- return { key: 'PLANE_XY', fallback: 'Vertical plane' };
+ return { fallback: 'Vertical plane' };
default:
throw new Error('Unknown PrimitiveType');
}
diff --git a/react-components/src/common/i18n/en/reveal-react-components.json b/react-components/src/common/i18n/en/reveal-react-components.json
index 8d07583b8ac..fbf99969c6a 100644
--- a/react-components/src/common/i18n/en/reveal-react-components.json
+++ b/react-components/src/common/i18n/en/reveal-react-components.json
@@ -79,5 +79,36 @@
"TOUCH_ZOOM": "Zoom",
"WIDGET_WINDOW_CLOSE": "Close",
"WIDGET_WINDOW_EXPAND": "Expand",
- "WIDGET_WINDOW_MINIMIZE": "Minimize"
+ "WIDGET_WINDOW_MINIMIZE": "Minimize",
+ "POINTS_FILTER": "Point filter",
+ "POINT_COLOR": "Point color",
+ "POINT_SHAPE": "Point shape",
+ "POINT_SIZE": "Point size",
+ "RGB": "RGB",
+ "CLASSIFICATION": "Classification",
+ "INTENSITY": "Intensity",
+ "CIRCLE": "Circle",
+ "SQUARE": "Square",
+ "PARABOLOID": "Paraboloid",
+ "UNDO": "Undo",
+ "REDO": "Redo",
+ "CROP_BOX": "Crop box",
+ "SLICE_X": "Vertical slice along Y-axis",
+ "SLICE_Y": "Vertical slice along X-axis",
+ "SLICE_Z": "Horizontal slice",
+ "SLICE_XY": "Vertical slice",
+ "SLICE_FLIP": "Flip side",
+ "ADD_SLICE_X": "Add vertical slice along Y-axis. Select a point.",
+ "ADD_SLICE_Y": "Add vertical slice along X-axis. Select a point.",
+ "ADD_SLICE_Z": "Add horizontal slice. Select a point.",
+ "ADD_SLICE_XY": "Add vertical slice. Select two points.",
+ "ADD_CROP_BOX": "Create crop box. Select three points in a horizontal plane, then select a fourth point for height.",
+ "CLIP_TOOL": "Create, edit crop boxes, and slice planes",
+ "CLIP_APPLY": "Apply selected crop box to a model. Otherwise, apply to all slice planes",
+ "CLIP_SHOW_SELECTED_ONLY": "Show/hide slicing planes and crop boxes that are not selected",
+ "CLIP_SHOW_ON_TOP": "Show crop boxes and slices on top",
+ "CLIP_NEXT": "Set next crop box or slicing plane as global clipping",
+ "CLIP_PREV": "Set previous crop box or slicing plane as global clipping"
}
+
+
diff --git a/react-components/src/components/Architecture/CommandButton.tsx b/react-components/src/components/Architecture/CommandButton.tsx
index 63629ab0df3..6bddbc8cccf 100644
--- a/react-components/src/components/Architecture/CommandButton.tsx
+++ b/react-components/src/components/Architecture/CommandButton.tsx
@@ -48,11 +48,10 @@ export const CommandButton = ({
}
const placement = getTooltipPlacement(isHorizontal);
const label = command.getLabel(t);
- const shortcut = command.getShortCutKeys();
return (
<CogsTooltip
- content={<LabelWithShortcut label={label} shortcut={shortcut} />}
+ content={<LabelWithShortcut label={label} command={command} />}
disabled={label === undefined}
appendTo={document.body}
placement={placement}>
diff --git a/react-components/src/components/Architecture/FilterButton.tsx b/react-components/src/components/Architecture/FilterButton.tsx
index d46cec944d0..da617cab9a3 100644
--- a/react-components/src/components/Architecture/FilterButton.tsx
+++ b/react-components/src/components/Architecture/FilterButton.tsx
@@ -93,7 +93,6 @@ export const FilterButton = ({
}
const placement = getTooltipPlacement(isHorizontal);
const label = usedInSettings ? undefined : command.getLabel(t);
- const shortcut = command.getShortCutKeys();
const flexDirection = getFlexDirection(isHorizontal);
const children = command.children;
@@ -102,7 +101,7 @@ export const FilterButton = ({
}
return (
<CogsTooltip
- content={<LabelWithShortcut label={label} shortcut={shortcut} />}
+ content={<LabelWithShortcut label={label} command={command} />}
disabled={usedInSettings || label === undefined}
appendTo={document.body}
placement={placement}>
diff --git a/react-components/src/components/Architecture/LabelWithShortcut.tsx b/react-components/src/components/Architecture/LabelWithShortcut.tsx
index ac4faf14f88..60091bfce9d 100644
--- a/react-components/src/components/Architecture/LabelWithShortcut.tsx
+++ b/react-components/src/components/Architecture/LabelWithShortcut.tsx
@@ -6,20 +6,27 @@ import React from 'react';
import styled from 'styled-components';
import { Shortcut } from '@cognite/cogs.js';
+import { type BaseCommand } from '../../architecture/base/commands/BaseCommand';
type LabelWithShortcutProps = {
label?: string;
- shortcut?: string;
+ command?: BaseCommand;
+ inverted?: boolean;
};
-export const LabelWithShortcut: React.FC<LabelWithShortcutProps> = ({ label, shortcut }) => {
+export const LabelWithShortcut: React.FC<LabelWithShortcutProps> = ({
+ label,
+ command,
+ inverted = true
+}) => {
if (label === undefined) {
return <></>;
}
+ const keys = command?.getShortCutKeys();
return (
<Container key={label}>
<Label>{label}</Label>
- {shortcut !== undefined && <Shortcut keys={[shortcut]} inverted />}
+ {keys !== undefined && <Shortcut keys={keys} inverted={inverted} />}
</Container>
);
};
diff --git a/react-components/src/components/Architecture/OptionButton.tsx b/react-components/src/components/Architecture/OptionButton.tsx
index 4dbe664d4cb..6cebe365261 100644
--- a/react-components/src/components/Architecture/OptionButton.tsx
+++ b/react-components/src/components/Architecture/OptionButton.tsx
@@ -83,14 +83,13 @@ export const OptionButton = ({
}
const placement = getTooltipPlacement(isHorizontal);
const label = usedInSettings ? undefined : command.getLabel(t);
- const shortcut = command.getShortCutKeys();
const flexDirection = getFlexDirection(isHorizontal);
const children = command.children;
const selectedLabel = command.selectedChild?.getLabel(t);
return (
<CogsTooltip
- content={<LabelWithShortcut label={label} shortcut={shortcut} />}
+ content={<LabelWithShortcut label={label} command={command} />}
disabled={usedInSettings || label === undefined}
appendTo={document.body}
placement={placement}>
diff --git a/react-components/src/components/Architecture/SettingsButton.tsx b/react-components/src/components/Architecture/SettingsButton.tsx
index c8efbd8ac5c..72ae1845e33 100644
--- a/react-components/src/components/Architecture/SettingsButton.tsx
+++ b/react-components/src/components/Architecture/SettingsButton.tsx
@@ -71,13 +71,12 @@ export const SettingsButton = ({
}
const placement = getTooltipPlacement(isHorizontal);
const label = command.getLabel(t);
- const shortcut = command.getShortCutKeys();
const flexDirection = getFlexDirection(isHorizontal);
const children = command.children;
return (
<CogsTooltip
- content={<LabelWithShortcut label={label} shortcut={shortcut} />}
+ content={<LabelWithShortcut label={label} command={command} />}
disabled={label === undefined}
appendTo={document.body}
placement={placement}>
@@ -157,7 +156,6 @@ function createButton(command: BaseCommand, t: TranslateDelegate): ReactElement
return <></>;
}
const label = command.getLabel(t);
- const shortcut = command.getShortCutKeys();
return (
<Menu.Item
key={command.uniqueId}
@@ -170,7 +168,7 @@ function createButton(command: BaseCommand, t: TranslateDelegate): ReactElement
command.invoke();
setChecked(command.isChecked);
}}>
- <LabelWithShortcut label={label} shortcut={shortcut} />
+ <LabelWithShortcut label={label} command={command} inverted={false} />
</Menu.Item>
);
}