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

feat: Added linked items container & autocomplete input to file preview modal

Browse Source
This commit is contained in:
Aman Harwara
2023-01-05 15:32:18 +05:30
parent 496525ef61
commit 22c6e2c56c
4 changed files with 27 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx
View File

@@ -13,6 +13,7 @@ import { getIconForFileType } from '@/Utils/Items/Icons/getIconForFileType'
import FileMenuOptions from '../FileContextMenu/FileMenuOptions'
import Menu from '../Menu/Menu'
import Popover from '../Popover/Popover'
import LinkedItemBubblesContainer from '../LinkedItems/LinkedItemBubblesContainer'
type Props = {
application: WebApplication
@@ -26,6 +27,7 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, view
return null
}
const [showLinkedBubblesContainer, setShowLinkedBubblesContainer] = useState(false)
const [showOptionsMenu, setShowOptionsMenu] = useState(false)
const [showFileInfoPanel, setShowFileInfoPanel] = useState(false)
const menuButtonRef = useRef<HTMLButtonElement>(null)
@@ -96,6 +98,12 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, view
<span className="ml-3 font-medium">{currentFile.name}</span>
</div>
<div className="flex items-center">
<button
className="mr-4 flex cursor-pointer rounded border border-solid border-border bg-transparent p-1.5 hover:bg-contrast"
onClick={() => setShowLinkedBubblesContainer((show) => !show)}
>
<Icon type="link" className="text-neutral" />
</button>
<button
className="mr-4 flex cursor-pointer rounded border border-solid border-border bg-transparent p-1.5 hover:bg-contrast"
onClick={() => setShowOptionsMenu((show) => !show)}
@@ -144,6 +152,14 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, view
</button>
</div>
</div>
{showLinkedBubblesContainer && (
<div className="-mt-1 border-b border-border py-1.5 px-3.5">
<LinkedItemBubblesContainer
linkingController={viewControllerManager.linkingController}
item={currentFile}
/>
</div>
)}
<div className="flex min-h-0 flex-grow">
<div className="relative flex max-w-full flex-grow items-center justify-center">
<FilePreview file={currentFile} application={application} key={currentFile.uuid} />