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

chore: fix super export option position in menu

Browse Source
This commit is contained in:
Aman Harwara
2023-07-18 14:14:03 +05:30
parent e7d805b91a
commit 8ceb6938b3
2 changed files with 53 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
packages/web/src/javascripts/Components/NotesOptions/SuperNoteOptions.tsx
View File

@@ -1,17 +1,8 @@
import { SNNote } from '@standardnotes/snjs'
import {
PlatformedKeyboardShortcut,
SUPER_EXPORT_HTML,
SUPER_EXPORT_JSON,
SUPER_EXPORT_MARKDOWN,
} from '@standardnotes/ui-services'
import { useRef, useState } from 'react'
import { useCommandService } from '../CommandProvider'
import { PlatformedKeyboardShortcut } from '@standardnotes/ui-services'
import Icon from '../Icon/Icon'
import { KeyboardShortcutIndicator } from '../KeyboardShortcutIndicator/KeyboardShortcutIndicator'
import Menu from '../Menu/Menu'
import MenuItem from '../Menu/MenuItem'
import Popover from '../Popover/Popover'
import HorizontalSeparator from '../Shared/HorizontalSeparator'
import { iconClass } from './ClassNames'
@@ -21,12 +12,7 @@ type Props = {
enableSuperMarkdownPreview: () => void
}
const SuperNoteOptions = ({ note, markdownShortcut, enableSuperMarkdownPreview }: Props) => {
const commandService = useCommandService()
const exportButtonRef = useRef<HTMLButtonElement>(null)
const [isExportMenuOpen, setIsExportMenuOpen] = useState(false)
const SuperNoteOptions = ({ markdownShortcut, enableSuperMarkdownPreview }: Props) => {
return (
<>
<HorizontalSeparator classes="my-2" />
@@ -38,45 +24,6 @@ const SuperNoteOptions = ({ note, markdownShortcut, enableSuperMarkdownPreview }
Show Markdown
{markdownShortcut && <KeyboardShortcutIndicator className="ml-auto" shortcut={markdownShortcut} />}
</MenuItem>
<MenuItem
ref={exportButtonRef}
onClick={() => {
setIsExportMenuOpen((open) => !open)
}}
>
<div className="flex items-center">
<Icon type="download" className={iconClass} />
Export
</div>
<Icon type="chevron-right" className="ml-auto text-neutral" />
</MenuItem>
<Popover
title="Export note"
side="left"
align="start"
open={isExportMenuOpen}
anchorElement={exportButtonRef.current}
togglePopover={() => {
setIsExportMenuOpen(!isExportMenuOpen)
}}
className="py-1"
>
<Menu a11yLabel={'Super note export menu'} isOpen={isExportMenuOpen}>
<MenuItem onClick={() => commandService.triggerCommand(SUPER_EXPORT_JSON, note.title)}>
<Icon type="code" className={iconClass} />
Export as JSON
</MenuItem>
<MenuItem onClick={() => commandService.triggerCommand(SUPER_EXPORT_MARKDOWN, note.title)}>
<Icon type="markdown" className={iconClass} />
Export as Markdown
</MenuItem>
<MenuItem onClick={() => commandService.triggerCommand(SUPER_EXPORT_HTML, note.title)}>
<Icon type="rich-text" className={iconClass} />
Export as HTML
</MenuItem>
</Menu>
</Popover>
</>
)
}