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

refactor: menu items (#2057)

Browse Source
This commit is contained in:
Aman Harwara
2022-11-27 22:53:30 +05:30
committed by GitHub
parent 8145cdb8ac
commit 3c91b0cb17
24 changed files with 291 additions and 352 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx
View File

@@ -1,5 +1,4 @@
import Icon from '@/Components/Icon/Icon'
import Switch from '@/Components/Switch/Switch'
import { observer } from 'mobx-react-lite'
import { useState, useEffect, useMemo, useCallback } from 'react'
import { NoteType, Platform, SNNote } from '@standardnotes/snjs'
@@ -22,7 +21,6 @@ import { getNoteBlob, getNoteFileName } from '@/Utils/NoteExportUtils'
import { shareSelectedNotes } from '@/NativeMobileWeb/ShareSelectedNotes'
import { downloadSelectedNotesOnAndroid } from '@/NativeMobileWeb/DownloadSelectedNotesOnAndroid'
import ProtectedUnauthorizedLabel from '../ProtectedItemOverlay/ProtectedUnauthorizedLabel'
import { classNames } from '@standardnotes/utils'
import { MenuItemIconSize } from '@/Constants/TailwindClassNames'
import { KeyboardShortcutIndicator } from '../KeyboardShortcutIndicator/KeyboardShortcutIndicator'
import { NoteAttributes } from './NoteAttributes'
@@ -30,8 +28,10 @@ import { SpellcheckOptions } from './SpellcheckOptions'
import { NoteSizeWarning } from './NoteSizeWarning'
import { DeletePermanentlyButton } from './DeletePermanentlyButton'
import { useCommandService } from '../ApplicationView/CommandProvider'
import { menuItemClassNames, menuItemSwitchClassNames, iconClass } from './ClassNames'
import { iconClass } from './ClassNames'
import SuperNoteOptions from './SuperNoteOptions'
import MenuSwitchButtonItem from '../Menu/MenuSwitchButtonItem'
import MenuItem from '../Menu/MenuItem'
const iconSize = MenuItemIconSize
const iconClassDanger = `text-danger mr-2 ${iconSize}`
@@ -160,132 +160,94 @@ const NotesOptions = ({
return <ProtectedUnauthorizedLabel />
}
const firstItemClass = 'pt-4'
return (
<>
{notes.length === 1 && (
<>
<button className={classNames(menuItemClassNames, firstItemClass)} onClick={openRevisionHistoryModal}>
<div className="flex w-full items-center justify-between">
<span className="flex">
<Icon type="history" className={iconClass} />
Note history
</span>
{historyShortcut && <KeyboardShortcutIndicator className={''} shortcut={historyShortcut} />}
</div>
</button>
<MenuItem onClick={openRevisionHistoryModal}>
<Icon type="history" className={iconClass} />
Note history
{historyShortcut && <KeyboardShortcutIndicator className="ml-auto" shortcut={historyShortcut} />}
</MenuItem>
<HorizontalSeparator classes="my-2" />
</>
)}
<button
className={menuItemSwitchClassNames}
onClick={() => {
notesController.setLockSelectedNotes(!locked)
<MenuSwitchButtonItem
checked={locked}
onChange={(locked) => {
notesController.setLockSelectedNotes(locked)
}}
>
<span className="flex items-center">
<Icon type="pencil-off" className={iconClass} />
Prevent editing
</span>
<Switch className="px-0" checked={locked} />
</button>
<button
className={menuItemSwitchClassNames}
onClick={() => {
<Icon type="pencil-off" className={iconClass} />
Prevent editing
</MenuSwitchButtonItem>
<MenuSwitchButtonItem
checked={!hidePreviews}
onChange={(hidePreviews) => {
notesController.setHideSelectedNotePreviews(!hidePreviews)
}}
>
<span className="flex items-center">
<Icon type="rich-text" className={iconClass} />
Show preview
</span>
<Switch className="px-0" checked={!hidePreviews} />
</button>
<button
className={menuItemSwitchClassNames}
onClick={() => {
notesController.setProtectSelectedNotes(!protect).catch(console.error)
<Icon type="rich-text" className={iconClass} />
Show preview
</MenuSwitchButtonItem>
<MenuSwitchButtonItem
checked={protect}
onChange={(protect) => {
notesController.setProtectSelectedNotes(protect).catch(console.error)
}}
>
<span className="flex items-center">
<Icon type="lock" className={iconClass} />
Password protect
</span>
<Switch className="px-0" checked={protect} />
</button>
<Icon type="lock" className={iconClass} />
Password protect
</MenuSwitchButtonItem>
{notes.length === 1 && (
<>
<HorizontalSeparator classes="my-2" />
<ChangeEditorOption
iconClassName={iconClass}
className={menuItemSwitchClassNames}
application={application}
note={notes[0]}
/>
<ChangeEditorOption iconClassName={iconClass} application={application} note={notes[0]} />
</>
)}
<HorizontalSeparator classes="my-2" />
{navigationController.tagsCount > 0 && (
<AddTagOption
iconClassName={iconClass}
className={menuItemSwitchClassNames}
navigationController={navigationController}
notesController={notesController}
/>
)}
<button
className={menuItemClassNames}
<MenuItem
onClick={() => {
notesController.setStarSelectedNotes(!starred)
}}
>
<div className="flex w-full items-center justify-between">
<span className="flex">
<Icon type="star" className={iconClass} />
{starred ? 'Unstar' : 'Star'}
</span>
{starShortcut && <KeyboardShortcutIndicator className={''} shortcut={starShortcut} />}
</div>
</button>
<Icon type="star" className={iconClass} />
{starred ? 'Unstar' : 'Star'}
{starShortcut && <KeyboardShortcutIndicator className="ml-auto" shortcut={starShortcut} />}
</MenuItem>
{unpinned && (
<button
className={menuItemClassNames}
<MenuItem
onClick={() => {
notesController.setPinSelectedNotes(true)
}}
>
<div className="flex w-full items-center justify-between">
<span className="flex">
<Icon type="pin" className={iconClass} />
Pin to top
</span>
{pinShortcut && <KeyboardShortcutIndicator className={''} shortcut={pinShortcut} />}
</div>
</button>
<Icon type="pin" className={iconClass} />
Pin to top
{pinShortcut && <KeyboardShortcutIndicator className="ml-auto" shortcut={pinShortcut} />}
</MenuItem>
)}
{pinned && (
<button
className={menuItemClassNames}
<MenuItem
onClick={() => {
notesController.setPinSelectedNotes(false)
}}
>
<div className="flex w-full items-center justify-between">
<span className="flex">
<Icon type="unpin" className={iconClass} />
Unpin
</span>
{pinShortcut && <KeyboardShortcutIndicator className={''} shortcut={pinShortcut} />}
</div>
</button>
<Icon type="unpin" className={iconClass} />
Unpin
{pinShortcut && <KeyboardShortcutIndicator className="ml-auto" shortcut={pinShortcut} />}
</MenuItem>
)}
{notes[0].noteType !== NoteType.Super && (
<>
<button
className={menuItemClassNames}
<MenuItem
onClick={() => {
application.isNativeMobileWeb()
? void shareSelectedNotes(application, notes)
@@ -294,22 +256,21 @@ const NotesOptions = ({
>
<Icon type={application.platform === Platform.Android ? 'share' : 'download'} className={iconClass} />
{application.platform === Platform.Android ? 'Share' : 'Export'}
</button>
</MenuItem>
{application.platform === Platform.Android && (
<button className={menuItemClassNames} onClick={() => downloadSelectedNotesOnAndroid(application, notes)}>
<MenuItem onClick={() => downloadSelectedNotesOnAndroid(application, notes)}>
<Icon type="download" className={iconClass} />
Export
</button>
</MenuItem>
)}
</>
)}
<button className={menuItemClassNames} onClick={duplicateSelectedItems}>
<MenuItem onClick={duplicateSelectedItems}>
<Icon type="copy" className={iconClass} />
Duplicate
</button>
</MenuItem>
{unarchived && (
<button
className={menuItemClassNames}
<MenuItem
onClick={async () => {
await notesController.setArchiveSelectedNotes(true).catch(console.error)
closeMenuAndToggleNotesList()
@@ -317,11 +278,10 @@ const NotesOptions = ({
>
<Icon type="archive" className={iconClassWarning} />
<span className="text-warning">Archive</span>
</button>
</MenuItem>
)}
{archived && (
<button
className={menuItemClassNames}
<MenuItem
onClick={async () => {
await notesController.setArchiveSelectedNotes(false).catch(console.error)
closeMenuAndToggleNotesList()
@@ -329,7 +289,7 @@ const NotesOptions = ({
>
<Icon type="unarchive" className={iconClassWarning} />
<span className="text-warning">Unarchive</span>
</button>
</MenuItem>
)}
{notTrashed &&
(altKeyDown ? (
@@ -340,8 +300,7 @@ const NotesOptions = ({
}}
/>
) : (
<button
className={menuItemClassNames}
<MenuItem
onClick={async () => {
await notesController.setTrashSelectedNotes(true)
closeMenuAndToggleNotesList()
@@ -349,12 +308,11 @@ const NotesOptions = ({
>
<Icon type="trash" className={iconClassDanger} />
<span className="text-danger">Move to trash</span>
</button>
</MenuItem>
))}
{trashed && (
<>
<button
className={menuItemClassNames}
<MenuItem
onClick={async () => {
await notesController.setTrashSelectedNotes(false)
closeMenuAndToggleNotesList()
@@ -362,15 +320,14 @@ const NotesOptions = ({
>
<Icon type="restore" className={iconClassSuccess} />
<span className="text-success">Restore</span>
</button>
</MenuItem>
<DeletePermanentlyButton
onClick={async () => {
await notesController.deleteNotesPermanently()
closeMenuAndToggleNotesList()
}}
/>
<button
className={menuItemClassNames}
<MenuItem
onClick={async () => {
await notesController.emptyTrash()
closeMenuAndToggleNotesList()
@@ -383,7 +340,7 @@ const NotesOptions = ({
<div className="text-xs">{notesController.trashedNotesCount} notes in Trash</div>
</div>
</div>
</button>
</MenuItem>
</>
)}
@@ -398,21 +355,11 @@ const NotesOptions = ({
)}
<HorizontalSeparator classes="my-2" />
<ListedActionsOption
iconClassName={iconClass}
className={menuItemSwitchClassNames}
application={application}
note={notes[0]}
/>
<ListedActionsOption iconClassName={iconClass} application={application} note={notes[0]} />
<HorizontalSeparator classes="my-2" />
<SpellcheckOptions
className={menuItemSwitchClassNames}
editorForNote={editorForNote}
notesController={notesController}
note={notes[0]}
/>
<SpellcheckOptions editorForNote={editorForNote} notesController={notesController} note={notes[0]} />
<HorizontalSeparator classes="my-2" />