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 { 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 { // ================================================== 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 ( } + content={} 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 ( } + content={} 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 = ({ label, shortcut }) => { +export const LabelWithShortcut: React.FC = ({ + label, + command, + inverted = true +}) => { if (label === undefined) { return <>; } + const keys = command?.getShortCutKeys(); return ( - {shortcut !== undefined && } + {keys !== undefined && } ); }; 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 ( } + content={} 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 ( } + content={} 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 ( - + ); }