From 733bc26ed1741addcf73820efe0d6d21cf91dd2d Mon Sep 17 00:00:00 2001 From: Mathias Jakobsen Date: Tue, 4 Mar 2025 13:14:30 +0000 Subject: [PATCH] Merge pull request #23848 from overleaf/dp-settings Add initial components for new editor settings modal GitOrigin-RevId: e3eb511d2af9265e0fc1cf54178b3e2953717950 --- .../web/frontend/extracted-translations.json | 13 ++- ...alSymbolsRoundedUnfilledPartialSlice.woff2 | Bin 4032 -> 4156 bytes .../material-symbols/unfilled-symbols.mjs | 1 + .../appearance-settings.tsx | 10 ++ .../overall-theme-setting.tsx | 45 +++++++++ .../components/settings/dropdown-setting.tsx | 90 ++++++++++++++++++ .../auto-close-brackets-setting.tsx | 19 ++++ .../editor-settings/auto-complete-setting.tsx | 18 ++++ .../editor-settings/code-check-setting.tsx | 18 ++++ .../editor-settings/editor-settings.tsx | 25 +++++ .../editor-settings/editor-theme-setting.tsx | 46 +++++++++ .../editor-settings/math-preview-setting.tsx | 18 ++++ .../components/settings/setting.tsx | 23 +++++ .../settings/settings-modal-body.tsx | 24 ++--- .../components/settings/settings-section.tsx | 18 ++++ .../components/settings/toggle-setting.tsx | 34 +++++++ .../bootstrap-5/pages/editor/settings.scss | 45 ++++++++- services/web/locales/en.json | 15 +-- .../editor-left-menu.spec.tsx | 4 +- .../settings-auto-close-brackets.test.tsx | 2 +- 20 files changed, 438 insertions(+), 30 deletions(-) create mode 100644 services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/appearance-settings.tsx create mode 100644 services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/overall-theme-setting.tsx create mode 100644 services/web/frontend/js/features/ide-redesign/components/settings/dropdown-setting.tsx create mode 100644 services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/auto-close-brackets-setting.tsx create mode 100644 services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/auto-complete-setting.tsx create mode 100644 services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/code-check-setting.tsx create mode 100644 services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/editor-settings.tsx create mode 100644 services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/editor-theme-setting.tsx create mode 100644 services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/math-preview-setting.tsx create mode 100644 services/web/frontend/js/features/ide-redesign/components/settings/setting.tsx create mode 100644 services/web/frontend/js/features/ide-redesign/components/settings/settings-section.tsx create mode 100644 services/web/frontend/js/features/ide-redesign/components/settings/toggle-setting.tsx diff --git a/services/web/frontend/extracted-translations.json b/services/web/frontend/extracted-translations.json index dbcb9262bc..50809a721c 100644 --- a/services/web/frontend/extracted-translations.json +++ b/services/web/frontend/extracted-translations.json @@ -134,6 +134,7 @@ "anyone_with_link_can_edit": "", "anyone_with_link_can_view": "", "app_on_x": "", + "appearance": "", "apply_suggestion": "", "archive": "", "archive_projects": "", @@ -159,6 +160,7 @@ "autocompile_disabled_reason": "", "autocomplete": "", "autocomplete_references": "", + "automatically_inserts_closing_brackets_and_parentheses": "", "available_with_group_professional": "", "back": "", "back_to_configuration": "", @@ -235,6 +237,7 @@ "change_the_ownership_of_your_personal_projects": "", "change_to_group_plan": "", "change_to_this_plan": "", + "changes_the_color_scheme_of_the_code_editor": "", "changing_the_position_of_your_figure": "", "changing_the_position_of_your_table": "", "chat": "", @@ -317,6 +320,7 @@ "continue_to": "", "continue_using_free_features": "", "continue_with_free_plan": "", + "controls_the_theme_of_the_application_interface": "", "copied": "", "copy": "", "copy_code": "", @@ -469,7 +473,6 @@ "editor_limit_exceeded_in_this_project": "", "editor_only": "", "editor_only_hide_pdf": "", - "editor_settings": "", "editor_theme": "", "educational_disclaimer": "", "educational_disclaimer_heading": "", @@ -494,6 +497,8 @@ "enable_stop_on_first_error_under_recompile_dropdown_menu": "", "enable_stop_on_first_error_under_recompile_dropdown_menu_v2": "", "enabled": "", + "enables_a_real_time_equation_preview_in_the_editor": "", + "enables_real_time_syntax_checking_in_the_editor": "", "enabling": "", "end_of_document": "", "enter_6_digit_code": "", @@ -592,7 +597,6 @@ "full_width": "", "future_payments": "", "general": "", - "general_settings": "", "generate_token": "", "generic_if_problem_continues_contact_us": "", "generic_linked_file_compile_error": "", @@ -806,8 +810,6 @@ "integrations": "", "integrations_like_github": "", "interested_in_cheaper_personal_plan": "", - "interface": "", - "interface_settings": "", "invalid_confirmation_code": "", "invalid_email": "", "invalid_file_name": "", @@ -1165,7 +1167,6 @@ "pdf_only_hide_editor": "", "pdf_preview_error": "", "pdf_rendering_error": "", - "pdf_settings": "", "pdf_unavailable_for_download": "", "pdf_viewer": "", "pdf_viewer_error": "", @@ -1627,6 +1628,7 @@ "suggested": "", "suggested_fix_for_error_in_path": "", "suggestion_applied": "", + "suggests_code_completions_while_typing": "", "support_for_your_browser_is_ending_soon": "", "supports_up_to_x_users": "", "sure_you_want_to_cancel_plan_change": "", @@ -1790,6 +1792,7 @@ "toolbar_toggle_symbol_palette": "", "toolbar_undo": "", "toolbar_undo_redo_actions": "", + "tools": "", "tooltip_hide_filetree": "", "tooltip_hide_panel": "", "tooltip_hide_pdf": "", diff --git a/services/web/frontend/fonts/material-symbols/MaterialSymbolsRoundedUnfilledPartialSlice.woff2 b/services/web/frontend/fonts/material-symbols/MaterialSymbolsRoundedUnfilledPartialSlice.woff2 index a7c79e29a925490dd1f14a04a889e1fa7db057c2..ade3a5b5df989911474a56e8c079f5042abad467 100644 GIT binary patch literal 4156 zcmV-C5X0|xPew8T0RR9101!L?4gdfE03hH101x5-0RR9100000000000000000000 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 diff --git a/services/web/frontend/fonts/material-symbols/unfilled-symbols.mjs b/services/web/frontend/fonts/material-symbols/unfilled-symbols.mjs index 9c4a941859..57bef6ea11 100644 --- a/services/web/frontend/fonts/material-symbols/unfilled-symbols.mjs +++ b/services/web/frontend/fonts/material-symbols/unfilled-symbols.mjs @@ -5,6 +5,7 @@ export default /** @type {const} */ ([ 'book_5', + 'brush', 'code', 'create_new_folder', 'description', diff --git a/services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/appearance-settings.tsx b/services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/appearance-settings.tsx new file mode 100644 index 0000000000..2ab843049e --- /dev/null +++ b/services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/appearance-settings.tsx @@ -0,0 +1,10 @@ +import SettingsSection from '../settings-section' +import OverallThemeSetting from '../appearance-settings/overall-theme-setting' + +export default function AppearanceSettings() { + return ( + + + + ) +} diff --git a/services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/overall-theme-setting.tsx b/services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/overall-theme-setting.tsx new file mode 100644 index 0000000000..6249da1ceb --- /dev/null +++ b/services/web/frontend/js/features/ide-redesign/components/settings/appearance-settings/overall-theme-setting.tsx @@ -0,0 +1,45 @@ +import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context' +import DropdownSetting from '../dropdown-setting' +import getMeta from '@/utils/meta' +import { useMemo } from 'react' +import type { Option } from '../dropdown-setting' +import { useTranslation } from 'react-i18next' +import { OverallThemeMeta } from '../../../../../../../types/project-settings' +import { isIEEEBranded } from '@/utils/is-ieee-branded' +import { useLayoutContext } from '@/shared/context/layout-context' +import { OverallTheme } from '@/shared/utils/styles' + +export default function OverallThemeSetting() { + const { t } = useTranslation() + const overallThemes = getMeta('ol-overallThemes') as + | OverallThemeMeta[] + | undefined + + const { loadingStyleSheet } = useLayoutContext() + const { overallTheme, setOverallTheme } = useProjectSettingsContext() + + const options: Array> = useMemo( + () => + overallThemes?.map(({ name, val }) => ({ + value: val, + label: name, + })) ?? [], + [overallThemes] + ) + + if (!overallThemes || isIEEEBranded()) { + return null + } + + return ( + + ) +} diff --git a/services/web/frontend/js/features/ide-redesign/components/settings/dropdown-setting.tsx b/services/web/frontend/js/features/ide-redesign/components/settings/dropdown-setting.tsx new file mode 100644 index 0000000000..f999809a88 --- /dev/null +++ b/services/web/frontend/js/features/ide-redesign/components/settings/dropdown-setting.tsx @@ -0,0 +1,90 @@ +import OLFormSelect from '@/features/ui/components/ol/ol-form-select' +import { ChangeEventHandler, useCallback } from 'react' +import Setting from './setting' +import classNames from 'classnames' +import { Spinner } from 'react-bootstrap-5' + +type PossibleValue = string | number + +export type Option = { + value: T + label: string + ariaHidden?: 'true' | 'false' + disabled?: boolean +} + +export type Optgroup = { + label: string + options: Array> +} + +type SettingsMenuSelectProps = { + id: string + label: string + description: string + options: Array> + onChange: (val: T) => void + value?: T + disabled?: boolean + width?: 'default' | 'wide' + loading?: boolean +} + +export default function DropdownSetting({ + id, + label, + description, + options, + onChange, + value, + disabled = false, + width = 'default', + loading = false, +}: SettingsMenuSelectProps) { + const handleChange: ChangeEventHandler = useCallback( + event => { + const selectedValue = event.target.value + let onChangeValue: PossibleValue = selectedValue + if (typeof value === 'number') { + onChangeValue = parseInt(selectedValue, 10) + } + onChange(onChangeValue as T) + }, + [onChange, value] + ) + + return ( + + {loading ? ( + + ) +} diff --git a/services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/auto-close-brackets-setting.tsx b/services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/auto-close-brackets-setting.tsx new file mode 100644 index 0000000000..893e011070 --- /dev/null +++ b/services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/auto-close-brackets-setting.tsx @@ -0,0 +1,19 @@ +import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context' +import ToggleSetting from '../toggle-setting' +import { useTranslation } from 'react-i18next' + +export default function AutoCloseBracketsSetting() { + const { autoPairDelimiters, setAutoPairDelimiters } = + useProjectSettingsContext() + const { t } = useTranslation() + + return ( + + ) +} diff --git a/services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/auto-complete-setting.tsx b/services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/auto-complete-setting.tsx new file mode 100644 index 0000000000..bf15beca96 --- /dev/null +++ b/services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/auto-complete-setting.tsx @@ -0,0 +1,18 @@ +import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context' +import ToggleSetting from '../toggle-setting' +import { useTranslation } from 'react-i18next' + +export default function AutoCompleteSetting() { + const { autoComplete, setAutoComplete } = useProjectSettingsContext() + const { t } = useTranslation() + + return ( + + ) +} diff --git a/services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/code-check-setting.tsx b/services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/code-check-setting.tsx new file mode 100644 index 0000000000..2f2a22ee0c --- /dev/null +++ b/services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/code-check-setting.tsx @@ -0,0 +1,18 @@ +import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context' +import ToggleSetting from '../toggle-setting' +import { useTranslation } from 'react-i18next' + +export default function CodeCheckSetting() { + const { syntaxValidation, setSyntaxValidation } = useProjectSettingsContext() + const { t } = useTranslation() + + return ( + + ) +} diff --git a/services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/editor-settings.tsx b/services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/editor-settings.tsx new file mode 100644 index 0000000000..a61c19ccc3 --- /dev/null +++ b/services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/editor-settings.tsx @@ -0,0 +1,25 @@ +import EditorThemeSetting from './editor-theme-setting' +import AutoCompleteSetting from './auto-complete-setting' +import CodeCheckSetting from './code-check-setting' +import AutoCloseBracketsSetting from './auto-close-brackets-setting' +import SettingsSection from '../settings-section' +import MathPreviewSetting from './math-preview-setting' +import { useTranslation } from 'react-i18next' + +export default function EditorSettings() { + const { t } = useTranslation() + + return ( + <> + + + + + + + + + + + ) +} diff --git a/services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/editor-theme-setting.tsx b/services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/editor-theme-setting.tsx new file mode 100644 index 0000000000..d904257021 --- /dev/null +++ b/services/web/frontend/js/features/ide-redesign/components/settings/editor-settings/editor-theme-setting.tsx @@ -0,0 +1,46 @@ +import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context' +import DropdownSetting from '../dropdown-setting' +import getMeta from '@/utils/meta' +import { useMemo } from 'react' +import type { Option } from '../dropdown-setting' +import { useTranslation } from 'react-i18next' + +export default function EditorThemeSetting() { + const editorThemes = getMeta('ol-editorThemes') + const legacyEditorThemes = getMeta('ol-legacyEditorThemes') + const { editorTheme, setEditorTheme } = useProjectSettingsContext() + const { t } = useTranslation() + + const options = useMemo(() => { + const editorThemeOptions: Array