mirror of
https://github.com/yu-i-i/overleaf-cep.git
synced 2026-11-15 06:33:55 +01:00
Merge pull request #34980 from overleaf/mj-ide-settings-feature
[web] Consolidate ide settings in `features/ide-settings` GitOrigin-RevId: cbf0ff069399f418d8cb0d8165628df190046ea9
This commit is contained in:
Mathias Jakobsen
committed by
Copybot
Copybot
parent
8e2edc4d8d
commit
3a3adf5e5a
-18
@@ -1,18 +0,0 @@
|
||||
import ToggleSetting from '../toggle-setting'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useDetachCompileContext as useCompileContext } from '@/shared/context/detach-compile-context'
|
||||
|
||||
export default function DarkModePdfSetting() {
|
||||
const { darkModePdf, setDarkModePdf } = useCompileContext()
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<ToggleSetting
|
||||
id="pdf-dark-mode-setting"
|
||||
label={t('dark_mode_pdf_preview')}
|
||||
description={t('invert_pdf_preview_colors_when_in_dark_mode')}
|
||||
checked={darkModePdf}
|
||||
onChange={setDarkModePdf}
|
||||
/>
|
||||
)
|
||||
}
|
||||
-60
@@ -1,60 +0,0 @@
|
||||
import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context'
|
||||
import DropdownSetting from '../dropdown-setting'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useEditorThemesOptionGroups } from '@/features/editor-left-menu/hooks/use-editor-theme-option-groups'
|
||||
import { isIEEEBranded } from '@/utils/is-ieee-branded'
|
||||
|
||||
export default function EditorThemeSetting() {
|
||||
const {
|
||||
editorTheme,
|
||||
setEditorTheme,
|
||||
editorLightTheme,
|
||||
setEditorLightTheme,
|
||||
editorDarkTheme,
|
||||
setEditorDarkTheme,
|
||||
overallTheme,
|
||||
} = useProjectSettingsContext()
|
||||
const { t } = useTranslation()
|
||||
|
||||
const optGroups = useEditorThemesOptionGroups()
|
||||
|
||||
if (overallTheme === 'system' && !isIEEEBranded()) {
|
||||
return (
|
||||
<>
|
||||
<DropdownSetting
|
||||
id="editorLightTheme"
|
||||
label={t('editor_theme_light')}
|
||||
description={t('the_code_editor_color_scheme_light_mode')}
|
||||
optgroups={optGroups}
|
||||
onChange={setEditorLightTheme}
|
||||
value={editorLightTheme}
|
||||
translateOptions="no"
|
||||
width="wide"
|
||||
/>
|
||||
<DropdownSetting
|
||||
id="editorDarkTheme"
|
||||
label={t('editor_theme_dark')}
|
||||
description={t('the_code_editor_color_scheme_dark_mode')}
|
||||
optgroups={optGroups}
|
||||
onChange={setEditorDarkTheme}
|
||||
value={editorDarkTheme}
|
||||
translateOptions="no"
|
||||
width="wide"
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<DropdownSetting
|
||||
id="editorTheme"
|
||||
label={t('editor_theme')}
|
||||
description={t('the_code_editor_color_scheme')}
|
||||
optgroups={optGroups}
|
||||
onChange={setEditorTheme}
|
||||
value={editorTheme}
|
||||
translateOptions="no"
|
||||
width="wide"
|
||||
/>
|
||||
)
|
||||
}
|
||||
-33
@@ -1,33 +0,0 @@
|
||||
import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import DropdownSetting from '../dropdown-setting'
|
||||
|
||||
export default function FontFamilySetting() {
|
||||
const { fontFamily, setFontFamily } = useProjectSettingsContext()
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<DropdownSetting
|
||||
id="fontFamily"
|
||||
label={t('editor_font_family')}
|
||||
options={[
|
||||
{
|
||||
value: 'monaco',
|
||||
label: 'Monaco / Menlo / Consolas',
|
||||
},
|
||||
{
|
||||
value: 'lucida',
|
||||
label: 'Lucida / Source Code Pro',
|
||||
},
|
||||
{
|
||||
value: 'opendyslexicmono',
|
||||
label: 'OpenDyslexic Mono',
|
||||
},
|
||||
]}
|
||||
onChange={setFontFamily}
|
||||
value={fontFamily}
|
||||
width="wide"
|
||||
translateOptions="no"
|
||||
/>
|
||||
)
|
||||
}
|
||||
-24
@@ -1,24 +0,0 @@
|
||||
import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import DropdownSetting from '../dropdown-setting'
|
||||
|
||||
const sizes = [10, 11, 12, 13, 14, 16, 18, 20, 22, 24]
|
||||
const options = sizes.map(size => ({
|
||||
value: size,
|
||||
label: `${size}px`,
|
||||
}))
|
||||
|
||||
export default function FontSizeSetting() {
|
||||
const { fontSize, setFontSize } = useProjectSettingsContext()
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<DropdownSetting
|
||||
id="fontSize"
|
||||
label={t('editor_font_size')}
|
||||
options={options}
|
||||
onChange={setFontSize}
|
||||
value={fontSize}
|
||||
/>
|
||||
)
|
||||
}
|
||||
-31
@@ -1,31 +0,0 @@
|
||||
import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import DropdownSetting from '../dropdown-setting'
|
||||
|
||||
export default function LineHeightSetting() {
|
||||
const { lineHeight, setLineHeight } = useProjectSettingsContext()
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<DropdownSetting
|
||||
id="lineHeight"
|
||||
label={t('editor_line_height')}
|
||||
options={[
|
||||
{
|
||||
value: 'compact',
|
||||
label: t('compact'),
|
||||
},
|
||||
{
|
||||
value: 'normal',
|
||||
label: t('normal'),
|
||||
},
|
||||
{
|
||||
value: 'wide',
|
||||
label: t('wide'),
|
||||
},
|
||||
]}
|
||||
onChange={setLineHeight}
|
||||
value={lineHeight}
|
||||
/>
|
||||
)
|
||||
}
|
||||
-45
@@ -1,45 +0,0 @@
|
||||
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 '@ol-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<Option<OverallTheme>> = useMemo(
|
||||
() =>
|
||||
overallThemes?.map(({ name, val }) => ({
|
||||
value: val,
|
||||
label: name,
|
||||
})) ?? [],
|
||||
[overallThemes]
|
||||
)
|
||||
|
||||
if (!overallThemes || isIEEEBranded()) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<DropdownSetting
|
||||
id="overallTheme"
|
||||
label={t('overall_theme')}
|
||||
description={t('the_overleaf_color_scheme')}
|
||||
options={options}
|
||||
onChange={setOverallTheme}
|
||||
value={overallTheme}
|
||||
loading={loadingStyleSheet}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
import OLButton from '@/shared/components/ol/ol-button'
|
||||
import Setting from './setting'
|
||||
|
||||
export default function ButtonSetting({
|
||||
id,
|
||||
label,
|
||||
buttonText,
|
||||
onClick,
|
||||
description,
|
||||
disabled,
|
||||
}: {
|
||||
id: string
|
||||
label: string
|
||||
buttonText: string
|
||||
onClick: () => void
|
||||
description?: string
|
||||
disabled?: boolean
|
||||
}) {
|
||||
return (
|
||||
<Setting controlId={id} label={label} description={description}>
|
||||
<OLButton
|
||||
id={id}
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
>
|
||||
{buttonText}
|
||||
</OLButton>
|
||||
</Setting>
|
||||
)
|
||||
}
|
||||
-23
@@ -1,23 +0,0 @@
|
||||
import ToggleSetting from '../toggle-setting'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useDetachCompileContext as useCompileContext } from '@/shared/context/detach-compile-context'
|
||||
import { useSetCompilationSettingWithEvent } from '@/features/editor-left-menu/hooks/use-set-compilation-setting'
|
||||
|
||||
export default function AutoCompileSetting() {
|
||||
const { autoCompile, setAutoCompile } = useCompileContext()
|
||||
const { t } = useTranslation()
|
||||
const changeAutoCompile = useSetCompilationSettingWithEvent(
|
||||
'auto-compile',
|
||||
setAutoCompile
|
||||
)
|
||||
|
||||
return (
|
||||
<ToggleSetting
|
||||
id="autoCompile"
|
||||
label={t('autocompile')}
|
||||
description={t('automatically_recompile_the_project_as_you_edit')}
|
||||
checked={autoCompile}
|
||||
onChange={changeAutoCompile}
|
||||
/>
|
||||
)
|
||||
}
|
||||
-47
@@ -1,47 +0,0 @@
|
||||
import { useState } from 'react'
|
||||
import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context'
|
||||
import DropdownSetting from '../dropdown-setting'
|
||||
import type { Option } from '../dropdown-setting'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { usePermissionsContext } from '@/features/ide-react/context/permissions-context'
|
||||
import { ProjectCompiler } from '@ol-types/project-settings'
|
||||
import { useSetCompilationSettingWithEvent } from '@/features/editor-left-menu/hooks/use-set-compilation-setting'
|
||||
import getMeta from '@/utils/meta'
|
||||
import _ from 'lodash'
|
||||
|
||||
function getCompilerOptions(): Option<ProjectCompiler>[] {
|
||||
const compilerOptions = ['pdfLaTeX', 'LaTeX', 'XeLaTeX', 'LuaLaTeX']
|
||||
const defaultCompiler = getMeta('ol-defaultLatexCompiler') as ProjectCompiler
|
||||
const sortedOptions = _.sortBy(
|
||||
compilerOptions,
|
||||
option => option.toLowerCase() !== defaultCompiler.toLowerCase()
|
||||
)
|
||||
return sortedOptions.map(option => ({
|
||||
value: option.toLowerCase() as ProjectCompiler,
|
||||
label: option,
|
||||
}))
|
||||
}
|
||||
|
||||
export default function CompilerSetting() {
|
||||
const { compiler, setCompiler } = useProjectSettingsContext()
|
||||
const [compilerOptions] = useState(() => getCompilerOptions())
|
||||
const { t } = useTranslation()
|
||||
const { write } = usePermissionsContext()
|
||||
const changeCompiler = useSetCompilationSettingWithEvent(
|
||||
'compiler',
|
||||
setCompiler
|
||||
)
|
||||
|
||||
return (
|
||||
<DropdownSetting
|
||||
id="compiler"
|
||||
label={t('compiler')}
|
||||
description={t('the_latex_engine_used_for_compiling')}
|
||||
disabled={!write}
|
||||
options={compilerOptions}
|
||||
onChange={changeCompiler}
|
||||
value={compiler}
|
||||
translateOptions="no"
|
||||
/>
|
||||
)
|
||||
}
|
||||
-36
@@ -1,36 +0,0 @@
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useDetachCompileContext as useCompileContext } from '@/shared/context/detach-compile-context'
|
||||
import { useMemo } from 'react'
|
||||
import DropdownSetting from '../dropdown-setting'
|
||||
import { useSetCompilationSettingWithEvent } from '@/features/editor-left-menu/hooks/use-set-compilation-setting'
|
||||
|
||||
export default function DraftSetting() {
|
||||
const { draft, setDraft } = useCompileContext()
|
||||
const { t } = useTranslation()
|
||||
const changeDraft = useSetCompilationSettingWithEvent(
|
||||
'compile-mode',
|
||||
setDraft
|
||||
)
|
||||
|
||||
const options = useMemo(
|
||||
() => [
|
||||
{ label: t('normal'), value: false },
|
||||
{
|
||||
label: t('fast_draft'),
|
||||
value: true,
|
||||
},
|
||||
],
|
||||
[t]
|
||||
)
|
||||
|
||||
return (
|
||||
<DropdownSetting
|
||||
id="draft"
|
||||
label={t('compile_mode')}
|
||||
options={options}
|
||||
description={t('switch_compile_mode_for_faster_draft_compilation')}
|
||||
value={draft}
|
||||
onChange={changeDraft}
|
||||
/>
|
||||
)
|
||||
}
|
||||
-49
@@ -1,49 +0,0 @@
|
||||
import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context'
|
||||
import DropdownSetting from '../dropdown-setting'
|
||||
import type { Option } from '../dropdown-setting'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { usePermissionsContext } from '@/features/ide-react/context/permissions-context'
|
||||
import { useMemo } from 'react'
|
||||
import getMeta from '@/utils/meta'
|
||||
import { useSetCompilationSettingWithEvent } from '@/features/editor-left-menu/hooks/use-set-compilation-setting'
|
||||
|
||||
export default function ImageNameSetting() {
|
||||
const { imageName, setImageName } = useProjectSettingsContext()
|
||||
const { t } = useTranslation()
|
||||
const { write } = usePermissionsContext()
|
||||
const changeImageName = useSetCompilationSettingWithEvent(
|
||||
'image-name',
|
||||
setImageName
|
||||
)
|
||||
|
||||
const imageNames = useMemo(() => getMeta('ol-imageNames') || [], [])
|
||||
|
||||
const options: Array<Option> = useMemo(
|
||||
() =>
|
||||
imageNames
|
||||
// filter out images that aren't allowed, unless thats the current image the project is on
|
||||
.filter(image => image.allowed || image.imageName === imageName)
|
||||
.map(({ imageName, imageDesc }) => ({
|
||||
value: imageName,
|
||||
label: imageDesc,
|
||||
})),
|
||||
[imageNames, imageName]
|
||||
)
|
||||
|
||||
if (imageNames.length === 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<DropdownSetting
|
||||
id="imageName"
|
||||
label={t('tex_live_version')}
|
||||
description={t('the_version_of_tex_live_used_for_compiling')}
|
||||
disabled={!write}
|
||||
options={options}
|
||||
onChange={changeImageName}
|
||||
value={imageName}
|
||||
translateOptions="no"
|
||||
/>
|
||||
)
|
||||
}
|
||||
-56
@@ -1,56 +0,0 @@
|
||||
import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context'
|
||||
import DropdownSetting from '../dropdown-setting'
|
||||
import { useMemo } from 'react'
|
||||
import type { Option } from '../dropdown-setting'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { usePermissionsContext } from '@/features/ide-react/context/permissions-context'
|
||||
import { useFileTreeData } from '@/shared/context/file-tree-data-context'
|
||||
import { isValidTeXFile } from '@/main/is-valid-tex-file'
|
||||
import { useSetCompilationSettingWithEvent } from '@/features/editor-left-menu/hooks/use-set-compilation-setting'
|
||||
|
||||
export default function RootDocumentSetting() {
|
||||
const { rootDocId, setRootDocId } = useProjectSettingsContext()
|
||||
const { t } = useTranslation()
|
||||
const { write } = usePermissionsContext()
|
||||
const { docs } = useFileTreeData()
|
||||
const changeRootDocId = useSetCompilationSettingWithEvent(
|
||||
'root-doc-id',
|
||||
setRootDocId,
|
||||
{ omitValueInEvent: true }
|
||||
)
|
||||
|
||||
const validDocsOptions = useMemo(() => {
|
||||
const filteredDocs =
|
||||
docs?.filter(
|
||||
doc => isValidTeXFile(doc.doc.name) || rootDocId === doc.doc.id
|
||||
) ?? []
|
||||
|
||||
const mappedDocs: Array<Option> = filteredDocs.map(doc => ({
|
||||
value: doc.doc.id,
|
||||
label: doc.path,
|
||||
}))
|
||||
|
||||
if (!rootDocId) {
|
||||
mappedDocs.unshift({
|
||||
value: '',
|
||||
label: 'None',
|
||||
disabled: true,
|
||||
})
|
||||
}
|
||||
|
||||
return mappedDocs
|
||||
}, [docs, rootDocId])
|
||||
|
||||
return (
|
||||
<DropdownSetting
|
||||
id="rootDocId"
|
||||
label={t('main_document')}
|
||||
description={`${t('the_primary_file_for_compiling_your_project')} ${t('you_can_also_right_click_a_file_to_set_it_as_main')}`}
|
||||
disabled={!write}
|
||||
options={validDocsOptions}
|
||||
onChange={changeRootDocId}
|
||||
value={rootDocId ?? ''}
|
||||
translateOptions="no"
|
||||
/>
|
||||
)
|
||||
}
|
||||
-34
@@ -1,34 +0,0 @@
|
||||
import ToggleSetting from '../toggle-setting'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useDetachCompileContext as useCompileContext } from '@/shared/context/detach-compile-context'
|
||||
import { useCallback } from 'react'
|
||||
import { useStopOnFirstError } from '@/shared/hooks/use-stop-on-first-error'
|
||||
|
||||
export default function StopOnFirstErrorSetting() {
|
||||
const { stopOnFirstError } = useCompileContext()
|
||||
const { enableStopOnFirstError, disableStopOnFirstError } =
|
||||
useStopOnFirstError({ eventSource: 'settings-modal' })
|
||||
const { t } = useTranslation()
|
||||
const changeStopOnFirstError = useCallback(
|
||||
(enabled: boolean) => {
|
||||
if (enabled) {
|
||||
enableStopOnFirstError()
|
||||
} else {
|
||||
disableStopOnFirstError()
|
||||
}
|
||||
},
|
||||
[enableStopOnFirstError, disableStopOnFirstError]
|
||||
)
|
||||
|
||||
return (
|
||||
<ToggleSetting
|
||||
id="stopOnFirstError"
|
||||
label={t('stop_on_first_error')}
|
||||
description={t(
|
||||
'stops_compiling_after_the_first_error_so_you_can_fix_issues_one_at_a_time'
|
||||
)}
|
||||
checked={stopOnFirstError}
|
||||
onChange={changeStopOnFirstError}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -1,104 +0,0 @@
|
||||
import OLFormSelect from '@/shared/components/ol/ol-form-select'
|
||||
import { ChangeEventHandler, useCallback } from 'react'
|
||||
import Setting from './setting'
|
||||
import classNames from 'classnames'
|
||||
import OLSpinner from '@/shared/components/ol/ol-spinner'
|
||||
|
||||
type PossibleValue = string | number | boolean
|
||||
|
||||
export type Option<T extends PossibleValue = string> = {
|
||||
value: T
|
||||
label: string
|
||||
ariaHidden?: 'true' | 'false'
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
export type Optgroup<T extends PossibleValue = string> = {
|
||||
label: string
|
||||
options: Array<Option<T>>
|
||||
}
|
||||
|
||||
type SettingsMenuSelectProps<T extends PossibleValue = string> = {
|
||||
id: string
|
||||
label: string
|
||||
options?: Array<Option<T>>
|
||||
onChange: (val: T) => void
|
||||
description?: string
|
||||
optgroups?: Array<Optgroup<T>>
|
||||
value?: T
|
||||
disabled?: boolean
|
||||
width?: 'default' | 'wide'
|
||||
loading?: boolean
|
||||
translateOptions?: 'yes' | 'no'
|
||||
}
|
||||
|
||||
export default function DropdownSetting<T extends PossibleValue = string>({
|
||||
id,
|
||||
label,
|
||||
options,
|
||||
onChange,
|
||||
value,
|
||||
optgroups,
|
||||
description = undefined,
|
||||
disabled = false,
|
||||
width = 'default',
|
||||
loading = false,
|
||||
translateOptions,
|
||||
}: SettingsMenuSelectProps<T>) {
|
||||
const handleChange: ChangeEventHandler<HTMLSelectElement> = useCallback(
|
||||
event => {
|
||||
const selectedValue = event.target.value
|
||||
let onChangeValue: PossibleValue = selectedValue
|
||||
if (typeof value === 'boolean') {
|
||||
onChangeValue = selectedValue === 'true'
|
||||
} else if (typeof value === 'number') {
|
||||
onChangeValue = parseInt(selectedValue, 10)
|
||||
}
|
||||
onChange(onChangeValue as T)
|
||||
},
|
||||
[onChange, value]
|
||||
)
|
||||
|
||||
return (
|
||||
<Setting controlId={id} label={label} description={description}>
|
||||
{loading ? (
|
||||
<OLSpinner size="sm" />
|
||||
) : (
|
||||
<OLFormSelect
|
||||
id={id}
|
||||
className={classNames('ide-dropdown-setting', {
|
||||
'ide-dropdown-setting-wide': width === 'wide',
|
||||
})}
|
||||
size="sm"
|
||||
onChange={handleChange}
|
||||
value={value?.toString()}
|
||||
disabled={disabled}
|
||||
translate={translateOptions}
|
||||
>
|
||||
{options?.map(option => (
|
||||
<option
|
||||
key={`${id}-${option.value}`}
|
||||
value={option.value.toString()}
|
||||
aria-hidden={option.ariaHidden}
|
||||
disabled={option.disabled}
|
||||
>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
{optgroups?.map(optgroup => (
|
||||
<optgroup label={optgroup.label} key={optgroup.label}>
|
||||
{optgroup.options.map(option => (
|
||||
<option
|
||||
value={option.value.toString()}
|
||||
key={option.value.toString()}
|
||||
>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</optgroup>
|
||||
))}
|
||||
</OLFormSelect>
|
||||
)}
|
||||
</Setting>
|
||||
)
|
||||
}
|
||||
-19
@@ -1,19 +0,0 @@
|
||||
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 (
|
||||
<ToggleSetting
|
||||
id="autoPairDelimiters"
|
||||
label={t('auto_close_brackets')}
|
||||
description={t('automatically_insert_closing_brackets_and_parentheses')}
|
||||
checked={autoPairDelimiters}
|
||||
onChange={setAutoPairDelimiters}
|
||||
/>
|
||||
)
|
||||
}
|
||||
-18
@@ -1,18 +0,0 @@
|
||||
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 (
|
||||
<ToggleSetting
|
||||
id="autoComplete"
|
||||
label={t('auto_complete')}
|
||||
description={t('suggests_code_completions_while_typing')}
|
||||
checked={autoComplete}
|
||||
onChange={setAutoComplete}
|
||||
/>
|
||||
)
|
||||
}
|
||||
-18
@@ -1,18 +0,0 @@
|
||||
import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context'
|
||||
import ToggleSetting from '../toggle-setting'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
export default function BreadcrumbsSetting() {
|
||||
const { breadcrumbs, setBreadcrumbs } = useProjectSettingsContext()
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<ToggleSetting
|
||||
id="breadcrumbs-setting"
|
||||
label={t('breadcrumbs')}
|
||||
description={t('see_your_current_location_in_the_project')}
|
||||
checked={breadcrumbs}
|
||||
onChange={setBreadcrumbs}
|
||||
/>
|
||||
)
|
||||
}
|
||||
-18
@@ -1,18 +0,0 @@
|
||||
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 (
|
||||
<ToggleSetting
|
||||
id="syntaxValidation"
|
||||
label={t('syntax_validation')}
|
||||
description={t('enables_real_time_syntax_checking_in_the_editor')}
|
||||
checked={syntaxValidation}
|
||||
onChange={setSyntaxValidation}
|
||||
/>
|
||||
)
|
||||
}
|
||||
-27
@@ -1,27 +0,0 @@
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useCallback } from 'react'
|
||||
import ButtonSetting from '../button-setting'
|
||||
import { useLayoutContext } from '@/shared/context/layout-context'
|
||||
import { useRailContext } from '@/features/ide-react/context/rail-context'
|
||||
|
||||
export default function DictionarySetting() {
|
||||
const { t } = useTranslation()
|
||||
const { setActiveModal } = useRailContext()
|
||||
|
||||
const { setSettingsShown } = useLayoutContext()
|
||||
|
||||
const onClick = useCallback(() => {
|
||||
setActiveModal('dictionary')
|
||||
setSettingsShown(false)
|
||||
}, [setSettingsShown, setActiveModal])
|
||||
|
||||
return (
|
||||
<ButtonSetting
|
||||
id="dictionary-settings"
|
||||
label={t('dictionary')}
|
||||
description={t('edit_your_custom_dictionary')}
|
||||
buttonText={t('edit')}
|
||||
onClick={onClick}
|
||||
/>
|
||||
)
|
||||
}
|
||||
-10
@@ -1,10 +0,0 @@
|
||||
import DictionaryModal from '@/features/dictionary/components/dictionary-modal'
|
||||
import { useRailContext } from '@/features/ide-react/context/rail-context'
|
||||
import { useCallback } from 'react'
|
||||
|
||||
export default function DictionarySettingsModal({ show }: { show: boolean }) {
|
||||
const { setActiveModal } = useRailContext()
|
||||
const handleHide = useCallback(() => setActiveModal(null), [setActiveModal])
|
||||
|
||||
return <DictionaryModal show={show} handleHide={handleHide} />
|
||||
}
|
||||
-18
@@ -1,18 +0,0 @@
|
||||
import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import ToggleSetting from '../toggle-setting'
|
||||
|
||||
export default function EditorTabsSetting() {
|
||||
const { editorTabs, setEditorTabs } = useProjectSettingsContext()
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<ToggleSetting
|
||||
id="editorTabs"
|
||||
label={t('open_files_in_tabs')}
|
||||
description={t('open_each_file_in_its_own_tab')}
|
||||
checked={editorTabs}
|
||||
onChange={setEditorTabs}
|
||||
/>
|
||||
)
|
||||
}
|
||||
-18
@@ -1,18 +0,0 @@
|
||||
import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context'
|
||||
import ToggleSetting from '../toggle-setting'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
export default function FloatingMenuSetting() {
|
||||
const { floatingMenu, setFloatingMenu } = useProjectSettingsContext()
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<ToggleSetting
|
||||
id="floatingMenu"
|
||||
label={t('show_quick_actions_on_text_selection')}
|
||||
description=""
|
||||
checked={floatingMenu}
|
||||
onChange={setFloatingMenu}
|
||||
/>
|
||||
)
|
||||
}
|
||||
-35
@@ -1,35 +0,0 @@
|
||||
import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import DropdownSetting from '../dropdown-setting'
|
||||
import { Keybindings } from '../../../../../../types/user-settings'
|
||||
|
||||
const OPTIONS: { value: Keybindings; label: string }[] = [
|
||||
{
|
||||
value: 'default',
|
||||
label: 'None',
|
||||
},
|
||||
{
|
||||
value: 'vim',
|
||||
label: 'Vim',
|
||||
},
|
||||
{
|
||||
value: 'emacs',
|
||||
label: 'Emacs',
|
||||
},
|
||||
]
|
||||
|
||||
export default function KeybindingSetting() {
|
||||
const { mode, setMode } = useProjectSettingsContext()
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<DropdownSetting
|
||||
id="mode"
|
||||
label={t('keybindings')}
|
||||
description={t('work_in_vim_or_emacs_emulation_mode')}
|
||||
options={OPTIONS}
|
||||
onChange={setMode}
|
||||
value={mode}
|
||||
/>
|
||||
)
|
||||
}
|
||||
-18
@@ -1,18 +0,0 @@
|
||||
import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context'
|
||||
import ToggleSetting from '../toggle-setting'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
export default function MathPreviewSetting() {
|
||||
const { mathPreview, setMathPreview } = useProjectSettingsContext()
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<ToggleSetting
|
||||
id="mathPreview"
|
||||
label={t('equation_preview')}
|
||||
description={t('show_live_equation_previews_while_typing')}
|
||||
checked={mathPreview}
|
||||
onChange={setMathPreview}
|
||||
/>
|
||||
)
|
||||
}
|
||||
-19
@@ -1,19 +0,0 @@
|
||||
import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context'
|
||||
import ToggleSetting from '../toggle-setting'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
export default function NonBlinkingCursorSetting() {
|
||||
const { nonBlinkingCursor, setNonBlinkingCursor } =
|
||||
useProjectSettingsContext()
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<ToggleSetting
|
||||
id="non-blinking-cursor"
|
||||
label={t('non_blinking_cursor')}
|
||||
description={t('reduces_visual_distraction_by_keeping_the_cursor_solid')}
|
||||
checked={nonBlinkingCursor}
|
||||
onChange={setNonBlinkingCursor}
|
||||
/>
|
||||
)
|
||||
}
|
||||
-28
@@ -1,28 +0,0 @@
|
||||
import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import DropdownSetting from '../dropdown-setting'
|
||||
|
||||
export default function PDFViewerSetting() {
|
||||
const { pdfViewer, setPdfViewer } = useProjectSettingsContext()
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<DropdownSetting
|
||||
id="pdfViewer"
|
||||
label={t('pdf_viewer')}
|
||||
options={[
|
||||
{
|
||||
value: 'pdfjs',
|
||||
label: t('overleaf'),
|
||||
},
|
||||
{
|
||||
value: 'native',
|
||||
label: t('browser'),
|
||||
},
|
||||
]}
|
||||
onChange={setPdfViewer}
|
||||
value={pdfViewer}
|
||||
translateOptions="no"
|
||||
/>
|
||||
)
|
||||
}
|
||||
-20
@@ -1,20 +0,0 @@
|
||||
import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context'
|
||||
import ToggleSetting from '../toggle-setting'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
export default function PreviewTabsSetting() {
|
||||
const { previewTabs, setPreviewTabs, editorTabs } =
|
||||
useProjectSettingsContext()
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<ToggleSetting
|
||||
id="previewTabs"
|
||||
label={t('preview_editor_tabs')}
|
||||
description={t('tabs_open_in_preview_mode_until_you_interact_with_them')}
|
||||
checked={previewTabs}
|
||||
onChange={setPreviewTabs}
|
||||
disabled={!editorTabs}
|
||||
/>
|
||||
)
|
||||
}
|
||||
-88
@@ -1,88 +0,0 @@
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import RadioButtonSetting, { RadioOption } from '../radio-button-setting'
|
||||
import {
|
||||
SettableNotificationLevel,
|
||||
useProjectNotificationPreferences,
|
||||
} from '../../hooks/use-project-notification-preferences'
|
||||
import BetaBadgeIcon from '@/shared/components/beta-badge-icon'
|
||||
import LoadingSpinner from '@/shared/components/loading-spinner'
|
||||
|
||||
export default function ProjectNotificationsSetting() {
|
||||
const { t } = useTranslation()
|
||||
const { notificationLevel, setNotificationLevel, isLoading } =
|
||||
useProjectNotificationPreferences()
|
||||
|
||||
if (isLoading) {
|
||||
return <LoadingSpinner loadingText={t('loading')} />
|
||||
}
|
||||
|
||||
const options: Array<RadioOption<SettableNotificationLevel>> = [
|
||||
{
|
||||
value: 'all',
|
||||
label: t('all_project_activity'),
|
||||
description: t('all_project_activity_description'),
|
||||
},
|
||||
{
|
||||
value: 'replies',
|
||||
label: t('replies_to_your_activity_only'),
|
||||
description: t('replies_to_your_activity_only_description'),
|
||||
},
|
||||
{
|
||||
value: 'off',
|
||||
label: t('off'),
|
||||
description: t('no_project_notifications_description'),
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<>
|
||||
{notificationLevel === 'global-off' ? (
|
||||
<div className="ide-setting-description">
|
||||
{t('project_notifications_muted_description')}{' '}
|
||||
<a
|
||||
href="/user/notification-preferences"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{t('change_settings')}
|
||||
</a>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<RadioButtonSetting
|
||||
id="projectNotifications"
|
||||
options={options}
|
||||
value={notificationLevel}
|
||||
onChange={setNotificationLevel}
|
||||
/>
|
||||
|
||||
<div className="global-notifications-link">
|
||||
<a
|
||||
href="/user/notification-preferences"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{t('manage_overleaf_email_preferences')}
|
||||
</a>
|
||||
</div>
|
||||
<div className="project-notifications-beta-note">
|
||||
<BetaBadgeIcon />
|
||||
<div>
|
||||
<span className="ide-setting-description">
|
||||
{t('email_notifications_are_currently_in_beta')}{' '}
|
||||
{t('these_settings_might_change_in_the_future')}{' '}
|
||||
</span>
|
||||
<a
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
href="https://forms.gle/unCNQedYXChTn2Qo6"
|
||||
>
|
||||
{t('give_feedback')}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
-40
@@ -1,40 +0,0 @@
|
||||
import { useProjectSettingsContext } from '@/features/editor-left-menu/context/project-settings-context'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import DropdownSetting, { Optgroup } from '../dropdown-setting'
|
||||
import { useMemo } from 'react'
|
||||
import getMeta from '@/utils/meta'
|
||||
import { supportsWebAssembly } from '@/utils/wasm'
|
||||
|
||||
// TODO: Split this into separate setttings for spell check
|
||||
// language and spell check on/off
|
||||
export default function SpellCheckSetting() {
|
||||
const { spellCheckLanguage, setSpellCheckLanguage } =
|
||||
useProjectSettingsContext()
|
||||
const { t } = useTranslation()
|
||||
|
||||
const optgroup: Optgroup = useMemo(() => {
|
||||
const options = (getMeta('ol-languages') ?? [])
|
||||
// only include spell-check languages that are available in the client
|
||||
.filter(language => language.dic !== undefined)
|
||||
|
||||
return {
|
||||
label: 'Language',
|
||||
options: options.map(language => ({
|
||||
value: language.code,
|
||||
label: language.name,
|
||||
})),
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<DropdownSetting
|
||||
id="spellCheckLanguage"
|
||||
label={t('spellcheck_language')}
|
||||
options={[{ value: '', label: t('off') }]}
|
||||
optgroups={[optgroup]}
|
||||
onChange={setSpellCheckLanguage}
|
||||
value={supportsWebAssembly() ? spellCheckLanguage : ''}
|
||||
width="wide"
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
import React from 'react'
|
||||
import OLFormCheckbox from '@/shared/components/ol/ol-form-checkbox'
|
||||
|
||||
export type RadioOption<T extends string = string> = {
|
||||
value: T
|
||||
label: string
|
||||
description?: string
|
||||
}
|
||||
|
||||
type RadioButtonSettingProps<T extends string = string> = {
|
||||
id: string
|
||||
options: Array<RadioOption<T>>
|
||||
value: T | undefined
|
||||
onChange: (value: T) => void
|
||||
}
|
||||
|
||||
export default function RadioButtonSetting<T extends string = string>({
|
||||
id,
|
||||
options,
|
||||
value,
|
||||
onChange,
|
||||
}: RadioButtonSettingProps<T>) {
|
||||
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
onChange(event.target.value as T)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="ide-radio-setting-options">
|
||||
{options.map(option => (
|
||||
<OLFormCheckbox
|
||||
key={`${id}-${option.value}`}
|
||||
type="radio"
|
||||
id={`${id}-${option.value}`}
|
||||
name={id}
|
||||
value={option.value}
|
||||
checked={value === option.value}
|
||||
onChange={handleChange}
|
||||
label={option.label}
|
||||
description={option.description}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function Setting({
|
||||
label,
|
||||
controlId,
|
||||
children,
|
||||
description = undefined,
|
||||
}: {
|
||||
label: React.ReactNode
|
||||
description: React.ReactNode | undefined
|
||||
controlId: string
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div id={`setting-${controlId}`} className="ide-setting">
|
||||
<div>
|
||||
<label htmlFor={controlId} className="ide-setting-title">
|
||||
{label}
|
||||
</label>
|
||||
{description && (
|
||||
<div className="ide-setting-description">{description}</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="ide-setting-input">{children}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,102 +0,0 @@
|
||||
import MaterialIcon from '@/shared/components/material-icon'
|
||||
|
||||
import { Nav, NavLink, TabContainer, TabContent } from 'react-bootstrap'
|
||||
import { SettingsEntry } from '../context/types'
|
||||
import SettingsTabPane from './settings-tab-pane'
|
||||
import BetaBadgeIcon from '@/shared/components/beta-badge-icon'
|
||||
import OLTooltip from '@/shared/components/ol/ol-tooltip'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
export const SettingsModalBody = ({
|
||||
activeTab,
|
||||
setActiveTab,
|
||||
settingsTabs,
|
||||
}: {
|
||||
activeTab: string | null | undefined
|
||||
setActiveTab: (tab: string | null | undefined) => void
|
||||
settingsTabs: SettingsEntry[]
|
||||
}) => {
|
||||
return (
|
||||
<TabContainer
|
||||
transition={false}
|
||||
onSelect={setActiveTab}
|
||||
activeKey={activeTab ?? undefined}
|
||||
id="ide-settings-tabs"
|
||||
>
|
||||
<div className="d-flex flex-row">
|
||||
<Nav
|
||||
activeKey={activeTab ?? undefined}
|
||||
className="d-flex flex-column ide-settings-tab-nav"
|
||||
>
|
||||
{settingsTabs.map(entry => (
|
||||
<SettingsNavLink entry={entry} key={entry.key} />
|
||||
))}
|
||||
</Nav>
|
||||
<TabContent className="ide-settings-tab-content">
|
||||
{settingsTabs
|
||||
.filter(t => 'sections' in t)
|
||||
.map(tab => (
|
||||
<SettingsTabPane tab={tab} key={tab.key} />
|
||||
))}
|
||||
</TabContent>
|
||||
</div>
|
||||
</TabContainer>
|
||||
)
|
||||
}
|
||||
|
||||
const SettingsNavLink = ({ entry }: { entry: SettingsEntry }) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
if ('href' in entry) {
|
||||
return (
|
||||
<a
|
||||
href={entry.href}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
className="ide-settings-tab-link ide-settings-tab-link-anchor"
|
||||
>
|
||||
<MaterialIcon
|
||||
className="ide-settings-tab-link-icon"
|
||||
type={entry.icon}
|
||||
unfilled
|
||||
/>
|
||||
<span>{entry.title}</span>
|
||||
<div className="flex-grow-1" />
|
||||
<MaterialIcon
|
||||
type="open_in_new"
|
||||
className="ide-settings-tab-link-external"
|
||||
/>
|
||||
</a>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<>
|
||||
<NavLink
|
||||
eventKey={entry.key}
|
||||
className="ide-settings-tab-link ide-settings-tab-link-button"
|
||||
key={entry.key}
|
||||
as="button"
|
||||
>
|
||||
<MaterialIcon
|
||||
className="ide-settings-tab-link-icon"
|
||||
type={entry.icon}
|
||||
unfilled
|
||||
/>
|
||||
<span>{entry.title}</span>
|
||||
<div className="flex-grow-1" />
|
||||
{entry.key === 'project_notifications' && (
|
||||
<OLTooltip
|
||||
id="project-notifications-beta-badge"
|
||||
description={t('email_notifications_are_currently_in_beta')}
|
||||
overlayProps={{ placement: 'right', delay: 100 }}
|
||||
>
|
||||
<span>
|
||||
<BetaBadgeIcon />
|
||||
</span>
|
||||
</OLTooltip>
|
||||
)}
|
||||
</NavLink>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
import {
|
||||
OLModal,
|
||||
OLModalBody,
|
||||
OLModalHeader,
|
||||
OLModalTitle,
|
||||
} from '@/shared/components/ol/ol-modal'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { SettingsModalBody } from './settings-modal-body'
|
||||
import {
|
||||
SettingsModalProvider,
|
||||
useSettingsModalContext,
|
||||
} from '../context/settings-modal-context'
|
||||
import useFocusOnSetting from '../hooks/use-focus-on-setting'
|
||||
import useOpenSettingsViaQueryParam from '../hooks/use-open-settings-via-query-param'
|
||||
|
||||
const SettingsModalWrapper = () => {
|
||||
return (
|
||||
<SettingsModalProvider>
|
||||
<SettingsModal />
|
||||
</SettingsModalProvider>
|
||||
)
|
||||
}
|
||||
|
||||
const SettingsModal = () => {
|
||||
const { t } = useTranslation()
|
||||
const { show, setShow, settingsTabs, activeTab, setActiveTab } =
|
||||
useSettingsModalContext()
|
||||
|
||||
useFocusOnSetting()
|
||||
useOpenSettingsViaQueryParam()
|
||||
|
||||
return (
|
||||
<OLModal
|
||||
show={show}
|
||||
onHide={() => setShow(false)}
|
||||
size="lg"
|
||||
backdropClassName={
|
||||
activeTab === 'appearance'
|
||||
? 'ide-settings-modal-transparent-backdrop'
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<OLModalHeader>
|
||||
<OLModalTitle>{t('settings')}</OLModalTitle>
|
||||
</OLModalHeader>
|
||||
<OLModalBody className="ide-settings-modal-body">
|
||||
<SettingsModalBody
|
||||
activeTab={activeTab}
|
||||
setActiveTab={setActiveTab}
|
||||
settingsTabs={settingsTabs}
|
||||
/>
|
||||
</OLModalBody>
|
||||
</OLModal>
|
||||
)
|
||||
}
|
||||
|
||||
export default SettingsModalWrapper
|
||||
@@ -1,18 +0,0 @@
|
||||
export default function SettingsSection({
|
||||
children,
|
||||
title,
|
||||
}: {
|
||||
children: React.ReactNode | React.ReactNode[]
|
||||
title?: string
|
||||
}) {
|
||||
if (!children) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="ide-settings-section">
|
||||
{title && <div className="ide-settings-section-title">{title}</div>}
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
import { TabPane } from 'react-bootstrap'
|
||||
import { SettingsTab } from '../context/types'
|
||||
import SettingsSection from './settings-section'
|
||||
import { Fragment } from 'react'
|
||||
|
||||
export default function SettingsTabPane({ tab }: { tab: SettingsTab }) {
|
||||
const { key, sections } = tab
|
||||
return (
|
||||
<TabPane eventKey={key} key={key}>
|
||||
{sections.map(section => (
|
||||
<SettingsSection key={section.key} title={section.title}>
|
||||
{section.settings.map(
|
||||
({ key, component, hidden }) =>
|
||||
!hidden && <Fragment key={key}>{component}</Fragment>
|
||||
)}
|
||||
</SettingsSection>
|
||||
))}
|
||||
</TabPane>
|
||||
)
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
import React from 'react'
|
||||
import Setting from './setting'
|
||||
import OLFormSwitch from '@/shared/components/ol/ol-form-switch'
|
||||
|
||||
export default function ToggleSetting({
|
||||
id,
|
||||
label,
|
||||
description,
|
||||
checked,
|
||||
onChange,
|
||||
disabled,
|
||||
}: {
|
||||
id: string
|
||||
label: React.ReactNode
|
||||
description: React.ReactNode
|
||||
checked: boolean | undefined
|
||||
onChange: (newValue: boolean) => void
|
||||
disabled?: boolean
|
||||
}) {
|
||||
const handleChange = () => {
|
||||
onChange(!checked)
|
||||
}
|
||||
|
||||
return (
|
||||
<Setting controlId={id} label={label} description={description}>
|
||||
<OLFormSwitch
|
||||
id={id}
|
||||
onChange={handleChange}
|
||||
checked={checked}
|
||||
label={label}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</Setting>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user