Skip to content

Commit f825d12

Browse files
williamsteinwilliamstein
committed
add editor settings modal
1 parent 8403f6c commit f825d12

File tree

18 files changed

+106
-124
lines changed

18 files changed

+106
-124
lines changed

‎src/packages/frontend/account/account-preferences.tsx

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
import { Form, Switch, Tooltip } from "antd";
77
import { join } from "path";
88
import { FormattedMessage } from "react-intl";
9-
109
import { Col, Row } from "@cocalc/frontend/antd-bootstrap";
1110
import { redux, useTypedRedux } from "@cocalc/frontend/app-framework";
1211
import { A, Loading } from "@cocalc/frontend/components";
@@ -34,9 +33,6 @@ export const AccountPreferences: React.FC = () => {
3433
);
3534
const passports = useTypedRedux("account", "passports");
3635
const sign_out_error = useTypedRedux("account", "sign_out_error");
37-
const autosave = useTypedRedux("account", "autosave");
38-
const font_size = useTypedRedux("account", "font_size");
39-
const editor_settings = useTypedRedux("account", "editor_settings");
4036
const stripe_customer = useTypedRedux("account", "stripe_customer");
4137
const other_settings = useTypedRedux("account", "other_settings");
4238
const is_anonymous = useTypedRedux("account", "is_anonymous");
@@ -159,13 +155,7 @@ export const AccountPreferences: React.FC = () => {
159155
{!is_anonymous && <ApiKeys />}
160156
</Col>
161157
<Col xs={12} md={6}>
162-
<EditorSettings
163-
autosave={autosave}
164-
tab_size={editor_settings?.get("tab_size")}
165-
font_size={font_size}
166-
editor_settings={editor_settings as any}
167-
email_address={email_address}
168-
/>
158+
<EditorSettings />
169159
<TerminalSettings />
170160
<KeyboardSettings />
171161
</Col>

‎src/packages/frontend/account/editor-settings/autosave-interval.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
*/
55

66
import { useIntl } from "react-intl";
7-
8-
import { LabeledRow, NumberInput } from "@cocalc/frontend/components";
7+
import { InputNumber } from "antd";
8+
import { LabeledRow } from "@cocalc/frontend/components";
99

1010
interface Props {
1111
autosave: number;
@@ -22,12 +22,12 @@ export function EditorSettingsAutosaveInterval(props: Props): JSX.Element {
2222
defaultMessage: "Autosave interval",
2323
})}
2424
>
25-
<NumberInput
26-
on_change={(n) => props.on_change("autosave", n)}
25+
<InputNumber
26+
onChange={(n) => props.on_change("autosave", n)}
2727
min={15}
2828
max={900}
29-
number={props.autosave}
30-
unit="seconds"
29+
value={props.autosave}
30+
addonAfter="seconds"
3131
/>
3232
</LabeledRow>
3333
);

‎src/packages/frontend/account/editor-settings/checkboxes.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
* License: MS-RSL – see LICENSE.md for details
44
*/
55

6-
import { Map } from "immutable";
76
import { Checkbox } from "@cocalc/frontend/antd-bootstrap";
87
import { Component, Rendered } from "@cocalc/frontend/app-framework";
98
import { capitalize, is_different, keys } from "@cocalc/util/misc";
@@ -46,7 +45,7 @@ const EDITOR_SETTINGS_CHECKBOXES: { [setting: string]: string | Rendered } = {
4645
} as const;
4746

4847
interface Props {
49-
editor_settings: Map<string, any>;
48+
editor_settings;
5049
email_address?: string;
5150
on_change: Function;
5251
}

‎src/packages/frontend/account/editor-settings/color-schemes.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55

66
import { useIntl } from "react-intl";
77
import { Map } from "immutable";
8-
98
import { LabeledRow, SelectorInput } from "@cocalc/frontend/components";
109
import { CodeMirrorStatic } from "@cocalc/frontend/jupyter/codemirror-static";
1110
import { cm_options } from "@cocalc/frontend/frame-editors/codemirror/cm-options";
@@ -16,7 +15,7 @@ import { EDITOR_COLOR_SCHEMES } from "@cocalc/util/db-schema/accounts";
1615
interface Props {
1716
theme: string;
1817
on_change: (selected: string) => void;
19-
editor_settings: Map<string, any>;
18+
editor_settings;
2019
font_size?: number;
2120
}
2221

‎src/packages/frontend/account/editor-settings/editor-settings.tsx

Lines changed: 60 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,9 @@
33
* License: MS-RSL – see LICENSE.md for details
44
*/
55

6-
import { Map } from "immutable";
76
import { FormattedMessage } from "react-intl";
8-
7+
import { redux, useTypedRedux } from "@cocalc/frontend/app-framework";
98
import { Panel } from "@cocalc/frontend/antd-bootstrap";
10-
import { Component, redux } from "@cocalc/frontend/app-framework";
119
import { Icon, Loading } from "@cocalc/frontend/components";
1210
import { KEYBOARD_VARIANTS } from "@cocalc/frontend/frame-editors/x11-editor/xpra/keyboards";
1311
import { deep_copy } from "@cocalc/util/misc";
@@ -21,110 +19,93 @@ import {
2119
EditorSettingsKeyboardVariant,
2220
EditorSettingsPhysicalKeyboard,
2321
} from "./x11-keyboard";
24-
2522
import { set_account_table } from "../util";
2623

27-
interface Props {
28-
autosave?: number;
29-
tab_size?: number;
30-
font_size?: number;
31-
email_address?: string;
32-
editor_settings?: Map<string, any>;
33-
}
24+
export function EditorSettings({}) {
25+
const autosave = useTypedRedux("account", "autosave");
26+
const font_size = useTypedRedux("account", "font_size");
27+
const editor_settings = useTypedRedux("account", "editor_settings");
28+
const email_address = useTypedRedux("account", "email_address");
29+
const tab_size = editor_settings?.get("tab_size");
3430

35-
export class EditorSettings extends Component<Props> {
36-
private get_keyboard_variant_options(val?) {
31+
function get_keyboard_variant_options(val?) {
3732
if (val == null) {
38-
val = this.props.editor_settings?.get("physical_keyboard");
33+
val = editor_settings?.get("physical_keyboard");
3934
}
4035
const options = deep_copy(KEYBOARD_VARIANTS[val] ?? []);
4136
options.unshift({ value: "", display: "No variant" });
4237
return options;
4338
}
4439

45-
private on_change(name: string, val: any): void {
40+
function on_change(name: string, val: any): void {
4641
if (name === "autosave" || name === "font_size") {
4742
set_account_table({ [name]: val });
4843
} else {
4944
set_account_table({ editor_settings: { [name]: val } });
5045
}
5146

5247
if (name === "physical_keyboard") {
53-
const options = this.get_keyboard_variant_options(val);
48+
const options = get_keyboard_variant_options(val);
5449
redux
5550
.getActions("account")
5651
.setState({ keyboard_variant_options: options });
5752
for (const opt of options) {
5853
if (opt.value === "nodeadkeys") {
59-
this.on_change("keyboard_variant", opt.value);
54+
on_change("keyboard_variant", opt.value);
6055
return;
6156
}
6257
}
6358
// otherwise, select default
64-
this.on_change("keyboard_variant", "");
59+
on_change("keyboard_variant", "");
6560
}
6661
}
6762

68-
public render() {
69-
if (
70-
this.props.editor_settings == null ||
71-
this.props.font_size == null ||
72-
!this.props.autosave ||
73-
!this.props.tab_size
74-
) {
75-
return <Loading />;
76-
}
77-
return (
78-
<Panel
79-
header={
80-
<>
81-
<Icon name="edit" />{" "}
82-
<FormattedMessage
83-
id="account.editor-settings.title"
84-
defaultMessage="Editor"
85-
/>
86-
</>
87-
}
88-
>
89-
<EditorSettingsFontSize
90-
on_change={this.on_change.bind(this)}
91-
font_size={this.props.font_size}
92-
/>
93-
<EditorSettingsAutosaveInterval
94-
on_change={this.on_change.bind(this)}
95-
autosave={this.props.autosave}
96-
/>
97-
<EditorSettingsIndentSize
98-
on_change={this.on_change.bind(this)}
99-
tab_size={this.props.tab_size}
100-
/>
101-
<EditorSettingsColorScheme
102-
on_change={(value) => this.on_change("theme", value)}
103-
theme={this.props.editor_settings.get("theme")}
104-
editor_settings={this.props.editor_settings}
105-
font_size={this.props.font_size}
106-
/>
107-
<EditorSettingsKeyboardBindings
108-
on_change={(value) => this.on_change("bindings", value)}
109-
bindings={this.props.editor_settings.get("bindings")}
110-
/>
111-
<EditorSettingsPhysicalKeyboard
112-
on_change={(value) => this.on_change("physical_keyboard", value)}
113-
physical_keyboard={this.props.editor_settings.get(
114-
"physical_keyboard",
115-
)}
116-
/>
117-
<EditorSettingsKeyboardVariant
118-
on_change={(value) => this.on_change("keyboard_variant", value)}
119-
keyboard_variant={this.props.editor_settings.get("keyboard_variant")}
120-
keyboard_variant_options={this.get_keyboard_variant_options()}
121-
/>
122-
<EditorSettingsCheckboxes
123-
on_change={this.on_change.bind(this)}
124-
editor_settings={this.props.editor_settings}
125-
email_address={this.props.email_address}
126-
/>
127-
</Panel>
128-
);
63+
if (editor_settings == null || font_size == null || !autosave || !tab_size) {
64+
return <Loading />;
12965
}
66+
67+
return (
68+
<Panel
69+
header={
70+
<>
71+
<Icon name="edit" />{" "}
72+
<FormattedMessage
73+
id="account.editor-settings.title"
74+
defaultMessage="Editor Settings"
75+
/>
76+
</>
77+
}
78+
>
79+
<EditorSettingsFontSize on_change={on_change} font_size={font_size} />
80+
<EditorSettingsAutosaveInterval
81+
on_change={on_change}
82+
autosave={autosave}
83+
/>
84+
<EditorSettingsIndentSize on_change={on_change} tab_size={tab_size} />
85+
<EditorSettingsColorScheme
86+
on_change={(value) => on_change("theme", value)}
87+
theme={editor_settings.get("theme") ?? ""}
88+
editor_settings={editor_settings}
89+
font_size={font_size}
90+
/>
91+
<EditorSettingsKeyboardBindings
92+
on_change={(value) => on_change("bindings", value)}
93+
bindings={editor_settings.get("bindings") ?? ""}
94+
/>
95+
<EditorSettingsPhysicalKeyboard
96+
on_change={(value) => on_change("physical_keyboard", value)}
97+
physical_keyboard={editor_settings.get("physical_keyboard") ?? ""}
98+
/>
99+
<EditorSettingsKeyboardVariant
100+
on_change={(value) => on_change("keyboard_variant", value)}
101+
keyboard_variant={editor_settings.get("keyboard_variant") ?? ""}
102+
keyboard_variant_options={get_keyboard_variant_options()}
103+
/>
104+
<EditorSettingsCheckboxes
105+
on_change={on_change}
106+
editor_settings={editor_settings}
107+
email_address={email_address}
108+
/>
109+
</Panel>
110+
);
130111
}

‎src/packages/frontend/account/editor-settings/font-size.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,16 @@
33
* License: MS-RSL – see LICENSE.md for details
44
*/
55

6-
import { LabeledRow, NumberInput } from "@cocalc/frontend/components";
6+
import { InputNumber } from "antd";
7+
import { LabeledRow } from "@cocalc/frontend/components";
78
import { useIntl } from "react-intl";
89

910
interface Props {
1011
font_size: number;
1112
on_change: (name: string, value: number) => void;
1213
}
1314

14-
export function EditorSettingsFontSize(props: Props): JSX.Element {
15+
export function EditorSettingsFontSize(props: Props) {
1516
const intl = useIntl();
1617

1718
return (
@@ -22,12 +23,12 @@ export function EditorSettingsFontSize(props: Props): JSX.Element {
2223
})}
2324
className="cc-account-prefs-font-size"
2425
>
25-
<NumberInput
26-
on_change={(n) => props.on_change("font_size", n)}
26+
<InputNumber
27+
onChange={(n) => props.on_change("font_size", n ?? 14)}
2728
min={5}
2829
max={32}
29-
number={props.font_size}
30-
unit="px"
30+
value={props.font_size}
31+
addonAfter="px"
3132
/>
3233
</LabeledRow>
3334
);

‎src/packages/frontend/account/editor-settings/indent-size.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
*/
55

66
import { useIntl } from "react-intl";
7-
8-
import { LabeledRow, NumberInput } from "@cocalc/frontend/components";
7+
import { InputNumber } from "antd";
8+
import { LabeledRow } from "@cocalc/frontend/components";
99

1010
interface Props {
1111
tab_size: number;
@@ -22,11 +22,12 @@ export function EditorSettingsIndentSize(props: Props): JSX.Element {
2222
defaultMessage: "Indent size",
2323
})}
2424
>
25-
<NumberInput
26-
on_change={(n) => props.on_change("tab_size", n)}
25+
<InputNumber
26+
onChange={(n) => props.on_change("tab_size", n ?? 10)}
2727
min={2}
2828
max={32}
29-
number={props.tab_size}
29+
value={props.tab_size}
30+
addonAfter="spaces"
3031
/>
3132
</LabeledRow>
3233
);

‎src/packages/frontend/account/terminal-settings.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import {
1313
SelectorInput,
1414
} from "@cocalc/frontend/components";
1515
import { theme_desc } from "@cocalc/frontend/frame-editors/terminal-editor/theme-data";
16-
import { labels } from "@cocalc/frontend/i18n";
1716
import { set_account_table } from "./util";
1817

1918
declare global {
@@ -40,7 +39,7 @@ export function TerminalSettings() {
4039
<Panel
4140
header={
4241
<>
43-
<Icon name="terminal" /> {intl.formatMessage(labels.terminal)}
42+
<Icon name="terminal" /> Terminal Settings
4443
</>
4544
}
4645
>

‎src/packages/frontend/app/settings-modal.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ tab could also be accessed this way.
1010

1111
import { Modal } from "antd";
1212
import { useActions, useRedux } from "@cocalc/frontend/app-framework";
13-
1413
import { TerminalSettings } from "@cocalc/frontend/account/terminal-settings";
14+
import { EditorSettings } from "@cocalc/frontend/account/editor-settings/editor-settings";
1515

1616
// Ensure the billing Actions and Store are created, which are needed for purchases, etc., to work...
1717
import "@cocalc/frontend/billing/actions";
@@ -34,7 +34,7 @@ export default function SettingsModal({}) {
3434
return (
3535
<Modal
3636
key="settings-modal"
37-
width={"600px"}
37+
width={"800px"}
3838
destroyOnClose
3939
open
4040
title={title}
@@ -53,6 +53,8 @@ function getDescription(name: string): { Component?; title? } {
5353
switch (name) {
5454
case "terminal-settings":
5555
return { Component: TerminalSettings };
56+
case "editor-settings":
57+
return { Component: EditorSettings };
5658
default:
5759
return {
5860
title: <div>Unknown component {name}</div>,

‎src/packages/frontend/frame-editors/code-editor/actions.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3051,4 +3051,8 @@ export class Actions<
30513051
setTrust = async (trust: boolean) => {
30523052
await this._syncstring.set_settings({ trust });
30533053
};
3054+
3055+
settings = () => {
3056+
this.redux.getActions("page").settings("editor-settings");
3057+
};
30543058
}

0 commit comments

Comments
 (0)