rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Replaced margin resizers with "Editor width" options. You can set it globally from Preferences > Appearance or per-note from the note options menu (#2324)

Browse Source
This commit is contained in:
Aman Harwara
2023-05-04 17:42:16 +05:30
committed by GitHub
parent 488142683c
commit 9fbb845b1d
18 changed files with 403 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
packages/web/src/javascripts/Components/Preferences/Panes/Appearance/EditorAppearance.tsx
View File

@@ -1,13 +1,15 @@
import { WebApplication } from '@/Application/WebApplication'
import Dropdown from '@/Components/Dropdown/Dropdown'
import Icon from '@/Components/Icon/Icon'
import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
import Switch from '@/Components/Switch/Switch'
import { PrefDefaults } from '@/Constants/PrefDefaults'
import { EditorFontSize, EditorLineHeight, PrefKey } from '@standardnotes/snjs'
import { useMemo, useState } from 'react'
import { ApplicationEvent, EditorFontSize, EditorLineHeight, EditorLineWidth, PrefKey } from '@standardnotes/snjs'
import { useCallback, useEffect, useMemo, useState } from 'react'
import { Subtitle, Title, Text } from '../../PreferencesComponents/Content'
import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
import { CHANGE_EDITOR_WIDTH_COMMAND } from '@standardnotes/ui-services'
type Props = {
application: WebApplication
@@ -59,28 +61,25 @@ const EditorDefaults = ({ application }: Props) => {
[],
)
const [marginResizers, setMarginResizers] = useState(() =>
application.getPreference(PrefKey.EditorResizersEnabled, PrefDefaults[PrefKey.EditorResizersEnabled]),
const [editorWidth, setEditorWidth] = useState(() =>
application.getPreference(PrefKey.EditorLineWidth, PrefDefaults[PrefKey.EditorLineWidth]),
)
const toggleMarginResizers = () => {
setMarginResizers(!marginResizers)
application.setPreference(PrefKey.EditorResizersEnabled, !marginResizers).catch(console.error)
}
const toggleEditorWidthModal = useCallback(() => {
application.keyboardService.triggerCommand(CHANGE_EDITOR_WIDTH_COMMAND, true)
}, [application.keyboardService])
useEffect(() => {
return application.addSingleEventObserver(ApplicationEvent.PreferencesChanged, async () => {
setEditorWidth(application.getPreference(PrefKey.EditorLineWidth, PrefDefaults[PrefKey.EditorLineWidth]))
})
}, [application])
return (
<PreferencesGroup>
<PreferencesSegment>
<Title>Editor appearance</Title>
<div className="mt-2">
<div className="flex items-center justify-between">
<div className="flex flex-col">
<Subtitle>Margin Resizers</Subtitle>
<Text>Allows left and right editor margins to be resized.</Text>
</div>
<Switch onChange={toggleMarginResizers} checked={marginResizers} />
</div>
<HorizontalSeparator classes="my-4" />
<div className="flex items-center justify-between">
<div className="flex flex-col">
<Subtitle>Monospace Font</Subtitle>
@@ -114,6 +113,20 @@ const EditorDefaults = ({ application }: Props) => {
/>
</div>
</div>
<HorizontalSeparator classes="my-4" />
<div>
<Subtitle>Editor width</Subtitle>
<Text>Sets the max editor width for all notes</Text>
<div className="mt-2">
<button
className="flex w-full min-w-55 items-center justify-between rounded border border-border bg-default py-1.5 px-3.5 text-left text-base text-foreground md:w-fit lg:text-sm"
onClick={toggleEditorWidthModal}
>
{editorWidth === EditorLineWidth.FullWidth ? 'Full width' : editorWidth}
<Icon type="chevron-down" size="normal" />
</button>
</div>
</div>
</div>
</PreferencesSegment>
</PreferencesGroup>