Skip to content

Commit 1c9701c

Browse files
haraldschillyharaldschilly
committed
frontend/i18n: working on menus/labels/buttons
1 parent 38c1cee commit 1c9701c

File tree

19 files changed

+670
-499
lines changed

19 files changed

+670
-499
lines changed

‎src/packages/frontend/frame-editors/frame-tree/commands/commands.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
/*
2+
* This file is part of CoCalc: Copyright © 2024 Sagemath, Inc.
3+
* License: MS-RSL – see LICENSE.md for details
4+
*/
5+
16
import type { Command } from "./types";
27
import { addCommandsToMenus } from "./menus";
38

‎src/packages/frontend/frame-editors/frame-tree/commands/editor-menus.ts‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ and addCommands functions.
77
*/
88

99
import { IconRotation } from "@cocalc/frontend/components/icon";
10+
import { IntlMessage } from "@cocalc/frontend/i18n";
1011
import { capitalize } from "@cocalc/util/misc";
1112
import { addCommands } from "./commands";
1213
import { addMenus } from "./menus";
@@ -22,9 +23,9 @@ type Command0 = {
2223
};
2324

2425
type Menu = {
25-
label: string;
26+
label: string | IntlMessage;
2627
pos: number;
27-
[key: string]: (Partial<Command0> | string)[] | number | string;
28+
entries: { [key: string]: (Partial<Command0> | string)[] | number | string };
2829
};
2930

3031
type EditorMenus = {
@@ -56,16 +57,13 @@ export function addEditorMenus({
5657
for (const menuName in editorMenus) {
5758
const menu = editorMenus[menuName];
5859
const groups: string[] = [];
59-
for (const group in menu) {
60-
const data = menu[group];
61-
if (typeof data == "string" || typeof data == "number") {
62-
// label and pos
63-
continue;
64-
}
60+
const { entries } = menu;
61+
for (const group in entries) {
62+
const data = entries[group];
6563
const gp = `${prefix}-${group}`;
6664
groups.push(gp);
6765
let pos = -1;
68-
for (const cmd of data) {
66+
for (const cmd of Object.values(data)) {
6967
pos += 1;
7068
if (typeof cmd == "string") {
7169
COMMANDS[cmd] = { group: gp, pos };

‎src/packages/frontend/frame-editors/frame-tree/commands/format-commands.tsx‎

Lines changed: 122 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
FONT_FACES,
88
FONT_SIZES,
99
} from "@cocalc/frontend/editors/editor-button-bar";
10+
import { menu } from "@cocalc/frontend/i18n";
1011
import { addEditorMenus } from "./editor-menus";
1112

1213
const FORMAT_SPEC = {
@@ -118,128 +119,132 @@ const FORMAT_SPEC = {
118119

119120
const FORMAT_MENUS = {
120121
insert: {
121-
label: "Insert",
122+
label: menu.insert,
122123
pos: 1.3,
123-
math: ["equation", "display_equation", "ai_formula"],
124-
lists: ["insertunorderedlist", "insertorderedlist"],
125-
objects: [
126-
"table",
127-
"link",
128-
"quote",
129-
"image",
130-
"horizontalRule",
131-
"format_code",
132-
"SpecialChar",
133-
],
124+
entries: {
125+
math: ["equation", "display_equation", "ai_formula"],
126+
lists: ["insertunorderedlist", "insertorderedlist"],
127+
objects: [
128+
"table",
129+
"link",
130+
"quote",
131+
"image",
132+
"horizontalRule",
133+
"format_code",
134+
"SpecialChar",
135+
],
136+
},
134137
},
135138
format: {
136-
label: "Format",
139+
label: menu.format,
137140
pos: 1.5,
138-
font_text: [
139-
{
140-
icon: "bold",
141-
isVisible: "format_action",
142-
name: "font",
143-
label: "Font",
144-
children: [
145-
"bold",
146-
"italic",
147-
"underline",
148-
"strikethrough",
149-
"code",
150-
"sub",
151-
"sup",
152-
],
153-
},
154-
{
155-
icon: "text-height",
156-
isVisible: "format_action", // todo
157-
name: "font-size",
158-
label: "Size",
159-
children: FONT_SIZES.map((size) => {
160-
return {
161-
name: `${size}`,
162-
onClick: ({ props }) =>
163-
props.actions.format_action("font_size_new", size),
164-
label: (
165-
<span style={{ fontSize: size }}>
166-
{size} {size === "medium" ? "(default)" : undefined}
167-
</span>
168-
),
169-
icon: <span style={{ fontSize: size }}>A</span>,
170-
};
171-
}),
172-
},
173-
{
174-
icon: "font",
175-
isVisible: "format_action", // todo
176-
name: "font-family",
177-
label: "Family",
178-
children: FONT_FACES.map((family) => {
179-
return {
180-
name: family,
181-
onClick: ({ props }) =>
182-
props.actions.format_action("font_family", family),
183-
label: <span style={{ fontFamily: family }}>{family}</span>,
184-
icon: <span style={{ fontFamily: family }}>A</span>,
185-
};
186-
}),
187-
},
188-
{
189-
icon: "header",
190-
isVisible: "format_action", // todo
191-
name: "header",
192-
label: "Heading",
193-
children: range(1, 7).map((heading) => {
194-
return {
195-
name: `heading-${heading}`,
196-
onClick: ({ props }) =>
197-
props.actions.format_action(`format_heading_${heading}`),
198-
label: <HeadingContent heading={heading} />,
199-
};
200-
}),
201-
},
202-
{
203-
icon: "colors",
204-
isVisible: "format_action",
205-
name: "color",
206-
label: "Color",
207-
children: [
208-
{
209-
stayOpenOnClick: true,
210-
label: ({ props }) => (
211-
<div
212-
onClick={(e) => {
213-
// hack so can select a color without picker closing.
214-
e.stopPropagation();
215-
}}
216-
>
217-
<ColorPicker
218-
radio
219-
onChange={(code) => {
220-
props.actions.format_action("color", code);
141+
entries: {
142+
font_text: [
143+
{
144+
icon: "bold",
145+
isVisible: "format_action",
146+
name: "font",
147+
label: "Font",
148+
children: [
149+
"bold",
150+
"italic",
151+
"underline",
152+
"strikethrough",
153+
"code",
154+
"sub",
155+
"sup",
156+
],
157+
},
158+
{
159+
icon: "text-height",
160+
isVisible: "format_action", // todo
161+
name: "font-size",
162+
label: "Size",
163+
children: FONT_SIZES.map((size) => {
164+
return {
165+
name: `${size}`,
166+
onClick: ({ props }) =>
167+
props.actions.format_action("font_size_new", size),
168+
label: (
169+
<span style={{ fontSize: size }}>
170+
{size} {size === "medium" ? "(default)" : undefined}
171+
</span>
172+
),
173+
icon: <span style={{ fontSize: size }}>A</span>,
174+
};
175+
}),
176+
},
177+
{
178+
icon: "font",
179+
isVisible: "format_action", // todo
180+
name: "font-family",
181+
label: "Family",
182+
children: FONT_FACES.map((family) => {
183+
return {
184+
name: family,
185+
onClick: ({ props }) =>
186+
props.actions.format_action("font_family", family),
187+
label: <span style={{ fontFamily: family }}>{family}</span>,
188+
icon: <span style={{ fontFamily: family }}>A</span>,
189+
};
190+
}),
191+
},
192+
{
193+
icon: "header",
194+
isVisible: "format_action", // todo
195+
name: "header",
196+
label: "Heading",
197+
children: range(1, 7).map((heading) => {
198+
return {
199+
name: `heading-${heading}`,
200+
onClick: ({ props }) =>
201+
props.actions.format_action(`format_heading_${heading}`),
202+
label: <HeadingContent heading={heading} />,
203+
};
204+
}),
205+
},
206+
{
207+
icon: "colors",
208+
isVisible: "format_action",
209+
name: "color",
210+
label: "Color",
211+
children: [
212+
{
213+
stayOpenOnClick: true,
214+
label: ({ props }) => (
215+
<div
216+
onClick={(e) => {
217+
// hack so can select a color without picker closing.
218+
e.stopPropagation();
221219
}}
222-
/>
223-
</div>
224-
),
225-
},
226-
],
227-
},
228-
{
229-
icon: "text",
230-
isVisible: "format_action",
231-
name: "text",
232-
label: "Text",
233-
children: [
234-
"justifyleft",
235-
"justifycenter",
236-
"justifyright",
237-
"justifyfull",
238-
],
239-
},
240-
"comment",
241-
"unformat",
242-
],
220+
>
221+
<ColorPicker
222+
radio
223+
onChange={(code) => {
224+
props.actions.format_action("color", code);
225+
}}
226+
/>
227+
</div>
228+
),
229+
},
230+
],
231+
},
232+
{
233+
icon: "text",
234+
isVisible: "format_action",
235+
name: "text",
236+
label: "Text",
237+
children: [
238+
"justifyleft",
239+
"justifycenter",
240+
"justifyright",
241+
"justifyfull",
242+
],
243+
},
244+
"comment",
245+
"unformat",
246+
],
247+
},
243248
},
244249
};
245250

‎src/packages/frontend/frame-editors/frame-tree/commands/generic-commands.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
/*
2+
* This file is part of CoCalc: Copyright © 2024 Sagemath, Inc.
3+
* License: MS-RSL – see LICENSE.md for details
4+
*/
5+
16
import { Input } from "antd";
27
import { debounce } from "lodash";
38
import { useEffect, useRef } from "react";
@@ -14,6 +19,7 @@ import {
1419
undo as chatUndo,
1520
} from "@cocalc/frontend/frame-editors/generic/chat";
1621
import { get_default_font_size } from "@cocalc/frontend/frame-editors/generic/client";
22+
import { labels, menu } from "@cocalc/frontend/i18n";
1723
import { open_new_tab as openNewTab } from "@cocalc/frontend/misc/open-browser-tab";
1824
import { isSupportedExtension } from "@cocalc/frontend/project/page/home-page/ai-generate-examples";
1925
import { AI_GENERATE_DOC_TAG } from "@cocalc/frontend/project/page/home-page/ai-generate-utils";
@@ -652,7 +658,7 @@ addCommands({
652658
group: "misc-file-actions",
653659
icon: "upload",
654660
title: "Upload a file or directory from your compute to the server",
655-
label: "Upload",
661+
label: labels.upload,
656662
...fileAction("upload"),
657663
},
658664
share: {
@@ -677,7 +683,7 @@ addCommands({
677683
group: "new-open",
678684
icon: "plus-circle",
679685
title: "Create a new file",
680-
label: "New File",
686+
label: menu.new_file,
681687
...fileAction("new"),
682688
},
683689
new_ai: {
@@ -718,7 +724,7 @@ addCommands({
718724
group: "save",
719725
icon: "save",
720726
title: "Save this file to disk",
721-
label: "Save",
727+
label: labels.save,
722728
keyboard: `${IS_MACOS ? "⌘" : "control"} + S`,
723729
},
724730
chatgpt: {
@@ -751,7 +757,7 @@ addCommands({
751757
group: "help-link",
752758
icon: "medkit",
753759
label: "Support Ticket",
754-
button: "Support",
760+
button: labels.support,
755761
title:
756762
"Create a support ticket. Ask the people at CoCalc a question, report a bug, etc.",
757763
onClick: () => {

0 commit comments

Comments
 (0)