feat(web): tailwind css (#1147)

This commit is contained in:
Aman Harwara
2022-06-28 02:50:52 +05:30
committed by GitHub
parent 0ead805412
commit b80038f607
201 changed files with 1824 additions and 2699 deletions

View File

@@ -6,6 +6,7 @@ import Switch from '@/Components/Switch/Switch'
import { observer } from 'mobx-react-lite'
import { FilesController } from '@/Controllers/FilesController'
import { SelectedItemsController } from '@/Controllers/SelectedItemsController'
import HorizontalSeparator from '../Shared/HorizontalSeparator'
type Props = {
closeMenu: () => void
@@ -64,35 +65,47 @@ const FileMenuOptions: FunctionComponent<Props> = ({
return (
<>
<button onBlur={closeOnBlur} className="sn-dropdown-item focus:bg-info-backdrop" onClick={onPreview}>
<Icon type="file" className="mr-2 color-neutral" />
<button
onBlur={closeOnBlur}
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:bg-info-backdrop focus:shadow-none text-sm"
onClick={onPreview}
>
<Icon type="file" className="mr-2 text-neutral" />
Preview file
</button>
{selectedFiles.length === 1 && (
<>
{isFileAttachedToNote ? (
<button onBlur={closeOnBlur} className="sn-dropdown-item focus:bg-info-backdrop" onClick={onDetach}>
<Icon type="link-off" className="mr-2 color-neutral" />
<button
onBlur={closeOnBlur}
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:bg-info-backdrop focus:shadow-none text-sm"
onClick={onDetach}
>
<Icon type="link-off" className="mr-2 text-neutral" />
Detach from note
</button>
) : shouldShowAttachOption ? (
<button onBlur={closeOnBlur} className="sn-dropdown-item focus:bg-info-backdrop" onClick={onAttach}>
<Icon type="link" className="mr-2 color-neutral" />
<button
onBlur={closeOnBlur}
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:bg-info-backdrop focus:shadow-none text-sm"
onClick={onAttach}
>
<Icon type="link" className="mr-2 text-neutral" />
Attach to note
</button>
) : null}
</>
)}
<div className="min-h-1px my-1 bg-border"></div>
<HorizontalSeparator classes="my-1" />
<button
className="sn-dropdown-item justify-between focus:bg-info-backdrop"
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:bg-info-backdrop focus:shadow-none text-sm justify-between"
onClick={() => {
void filesController.setProtectionForFiles(!hasProtectedFiles, selectionController.selectedFiles)
}}
onBlur={closeOnBlur}
>
<span className="flex items-center">
<Icon type="password" className="mr-2 color-neutral" />
<Icon type="password" className="mr-2 text-neutral" />
Password protection
</span>
<Switch
@@ -101,41 +114,41 @@ const FileMenuOptions: FunctionComponent<Props> = ({
checked={hasProtectedFiles}
/>
</button>
<div className="min-h-1px my-1 bg-border"></div>
<HorizontalSeparator classes="my-1" />
<button
onBlur={closeOnBlur}
className="sn-dropdown-item focus:bg-info-backdrop"
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:bg-info-backdrop focus:shadow-none text-sm"
onClick={() => {
void filesController.downloadFiles(selectionController.selectedFiles)
}}
>
<Icon type="download" className="mr-2 color-neutral" />
<Icon type="download" className="mr-2 text-neutral" />
Download
</button>
{shouldShowRenameOption && (
<button
onBlur={closeOnBlur}
className="sn-dropdown-item focus:bg-info-backdrop"
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:bg-info-backdrop focus:shadow-none text-sm"
onClick={() => {
renameToggleCallback?.(true)
}}
>
<Icon type="pencil" className="mr-2 color-neutral" />
<Icon type="pencil" className="mr-2 text-neutral" />
Rename
</button>
)}
<button
onBlur={closeOnBlur}
className="sn-dropdown-item focus:bg-info-backdrop"
className="flex items-center border-0 cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-1.5 text-left w-full focus:bg-info-backdrop focus:shadow-none text-sm"
onClick={() => {
void filesController.deleteFilesPermanently(selectionController.selectedFiles)
}}
>
<Icon type="trash" className="mr-2 color-danger" />
<span className="color-danger">Delete permanently</span>
<Icon type="trash" className="mr-2 text-danger" />
<span className="text-danger">Delete permanently</span>
</button>
{selectedFiles.length === 1 && (
<div className="px-3 pt-1.5 pb-0.5 text-xs color-neutral font-medium">
<div className="px-3 pt-1.5 pb-0.5 text-xs text-neutral font-medium">
<div>
<span className="font-semibold">File ID:</span> {selectedFiles[0].uuid}
</div>