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

feat(web): tailwind css (#1147)

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/web/src/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
View File

@@ -270,12 +270,14 @@ const AttachedFilesButton: FunctionComponent<Props> = ({
}
}}
ref={buttonRef}
className={`sn-icon-button border-contrast ${attachedFilesCount > 0 ? 'py-1 px-3' : ''}`}
className={`flex justify-center items-center min-w-8 h-8 bg-text-padding hover:bg-contrast focus:bg-contrast text-neutral border border-solid border-border rounded-full cursor-pointer ${
attachedFilesCount > 0 ? 'py-1 px-3' : ''
}`}
onBlur={closeOnBlur}
>
<VisuallyHidden>Attached files</VisuallyHidden>
<Icon type="attachment-file" className="block" />
{attachedFilesCount > 0 && <span className="ml-2">{attachedFilesCount}</span>}
{attachedFilesCount > 0 && <span className="text-sm ml-2">{attachedFilesCount}</span>}
</DisclosureButton>
<DisclosurePanel
onKeyDown={(event) => {
@@ -289,7 +291,7 @@ const AttachedFilesButton: FunctionComponent<Props> = ({
...position,
maxHeight,
}}
className="sn-dropdown sn-dropdown--animated min-w-80 max-h-120 max-w-xs flex flex-col overflow-y-auto fixed"
className="bg-default rounded shadow-main transition-transform duration-150 slide-down-animation min-w-80 max-h-120 max-w-xs flex flex-col overflow-y-auto fixed"
onBlur={closeOnBlur}
>
{open && (

26
packages/web/src/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
View File

@@ -78,12 +78,12 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
border: isDraggingFiles ? '2px dashed var(--sn-stylekit-info-color)' : '',
}}
>
<div className="flex border-0 border-b-1 border-solid border-main">
<div className="flex border-b border-solid border-border">
<button
id={PopoverTabs.AttachedFiles}
className={`bg-default border-0 cursor-pointer px-3 py-2.5 relative focus:bg-info-backdrop focus:shadow-bottom ${
currentTab === PopoverTabs.AttachedFiles ? 'color-info font-medium shadow-bottom' : 'color-text'
} ${attachedTabDisabled ? 'color-neutral cursor-not-allowed' : ''}`}
className={`bg-default border-0 cursor-pointer px-3 py-2.5 relative focus:bg-info-backdrop focus:shadow-bottom text-sm ${
currentTab === PopoverTabs.AttachedFiles ? 'text-info font-medium shadow-bottom' : 'text-text'
} ${attachedTabDisabled ? 'text-neutral cursor-not-allowed' : ''}`}
onClick={() => {
setCurrentTab(PopoverTabs.AttachedFiles)
}}
@@ -94,8 +94,8 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
</button>
<button
id={PopoverTabs.AllFiles}
className={`bg-default border-0 cursor-pointer px-3 py-2.5 relative focus:bg-info-backdrop focus:shadow-bottom ${
currentTab === PopoverTabs.AllFiles ? 'color-info font-medium shadow-bottom' : 'color-text'
className={`bg-default border-0 cursor-pointer px-3 py-2.5 relative focus:bg-info-backdrop focus:shadow-bottom text-sm ${
currentTab === PopoverTabs.AllFiles ? 'text-info font-medium shadow-bottom' : 'text-text'
}`}
onClick={() => {
setCurrentTab(PopoverTabs.AllFiles)
@@ -107,11 +107,11 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
</div>
<div className="min-h-0 max-h-110 overflow-y-auto">
{filteredList.length > 0 || searchQuery.length > 0 ? (
<div className="sticky top-0 left-0 p-3 bg-default border-0 border-b-1 border-solid border-main">
<div className="sticky top-0 left-0 p-3 bg-default border-b border-solid border-border">
<div className="relative">
<input
type="text"
className="color-text w-full rounded py-1.5 px-3 text-input bg-default border-solid border-1 border-main"
className="text-text w-full rounded py-1.5 px-3 text-sm bg-default border-solid border border-border"
placeholder="Search files..."
value={searchQuery}
onInput={(e) => {
@@ -129,7 +129,7 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
}}
onBlur={closeOnBlur}
>
<Icon type="clear-circle-filled" className="color-neutral" />
<Icon type="clear-circle-filled" className="text-neutral" />
</button>
)}
</div>
@@ -161,20 +161,20 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
? 'No files attached to this note'
: 'No files found in this account'}
</div>
<Button variant="normal" onClick={handleAttachFilesClick} onBlur={closeOnBlur}>
<Button onClick={handleAttachFilesClick} onBlur={closeOnBlur}>
{currentTab === PopoverTabs.AttachedFiles ? 'Attach' : 'Upload'} files
</Button>
<div className="text-xs color-passive-0 mt-3">Or drop your files here</div>
<div className="text-xs text-passive-0 mt-3">Or drop your files here</div>
</div>
)}
</div>
{filteredList.length > 0 && (
<button
className="sn-dropdown-item py-3 border-0 border-t-1px border-solid border-main focus:bg-info-backdrop"
className="flex items-center cursor-pointer hover:bg-contrast hover:text-foreground text-text bg-transparent px-3 py-3 text-left w-full focus:bg-info-backdrop focus:shadow-none text-sm border-0 border-t border-solid border-border"
onClick={handleAttachFilesClick}
onBlur={closeOnBlur}
>
<Icon type="add" className="mr-2 color-neutral" />
<Icon type="add" className="mr-2 text-neutral" />
{currentTab === PopoverTabs.AttachedFiles ? 'Attach' : 'Upload'} files
</button>
)}

8
packages/web/src/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx
View File

@@ -91,7 +91,7 @@ const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
{isRenamingFile ? (
<input
type="text"
className="text-input px-1.5 py-1 mb-1 border-1 border-solid border-main bg-transparent color-foreground"
className="text-input px-1.5 py-1 mb-1 border border-solid border-border bg-transparent text-foreground"
value={fileName}
ref={fileNameInputRef}
onInput={handleFileNameInput}
@@ -100,13 +100,13 @@ const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
/>
) : (
<div className="text-sm mb-1 break-word">
<span className="vertical-middle">{file.name}</span>
<span className="align-middle">{file.name}</span>
{file.protected && (
<Icon type="lock-filled" className="sn-icon--small ml-2 color-neutral vertical-middle" />
<Icon type="lock-filled" className="ml-2 text-neutral inline align-middle" size="small" />
)}
</div>
)}
<div className="text-xs color-passive-0">
<div className="text-xs text-passive-0">
{file.created_at.toLocaleString()} · {formatSizeToReadableString(file.decryptedSize)}
</div>
</div>

46
packages/web/src/javascripts/Components/AttachedFilesPopover/PopoverFileSubmenu.tsx
View File

@@ -7,6 +7,7 @@ import Switch from '@/Components/Switch/Switch'
import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
import { PopoverFileSubmenuProps } from './PopoverFileItemProps'
import { PopoverFileItemActionType } from './PopoverFileItemAction'
import HorizontalSeparator from '../Shared/HorizontalSeparator'
const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
file,
@@ -67,7 +68,7 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
onBlur={closeOnBlur}
className="w-7 h-7 p-1 rounded-full border-0 bg-transparent hover:bg-contrast cursor-pointer"
>
<Icon type="more" className="color-neutral" />
<Icon type="more" className="text-neutral" />
</DisclosureButton>
<DisclosurePanel
ref={menuRef}
@@ -75,25 +76,27 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
...menuStyle,
position: 'fixed',
}}
className="sn-dropdown flex flex-col max-h-120 min-w-60 py-1 fixed overflow-y-auto"
className={`${
isMenuOpen ? 'flex' : 'hidden'
} flex-col bg-default rounded shadow-main max-h-120 min-w-60 py-1 fixed overflow-y-auto`}
>
{isMenuOpen && (
<>
<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:shadow-none text-sm focus:bg-info-backdrop"
onClick={() => {
previewHandler(file)
closeMenu()
}}
>
<Icon type="file" className="mr-2 color-neutral" />
<Icon type="file" className="mr-2 text-neutral" />
Preview file
</button>
{isAttachedToNote ? (
<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:shadow-none text-sm focus:bg-info-backdrop"
onClick={() => {
handleFileAction({
type: PopoverFileItemActionType.DetachFileToNote,
@@ -102,13 +105,13 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
closeMenu()
}}
>
<Icon type="link-off" className="mr-2 color-neutral" />
<Icon type="link-off" className="mr-2 text-neutral" />
Detach from note
</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:shadow-none text-sm focus:bg-info-backdrop"
onClick={() => {
handleFileAction({
type: PopoverFileItemActionType.AttachFileToNote,
@@ -117,13 +120,13 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
closeMenu()
}}
>
<Icon type="link" className="mr-2 color-neutral" />
<Icon type="link" className="mr-2 text-neutral" />
Attach to note
</button>
)}
<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:shadow-none text-sm justify-between focus:bg-info-backdrop"
onClick={() => {
handleFileAction({
type: PopoverFileItemActionType.ToggleFileProtection,
@@ -136,7 +139,7 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
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
@@ -145,10 +148,10 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
checked={isFileProtected}
/>
</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:shadow-none text-sm focus:bg-info-backdrop"
onClick={() => {
handleFileAction({
type: PopoverFileItemActionType.DownloadFile,
@@ -157,22 +160,22 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
closeMenu()
}}
>
<Icon type="download" className="mr-2 color-neutral" />
<Icon type="download" className="mr-2 text-neutral" />
Download
</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:shadow-none text-sm focus:bg-info-backdrop"
onClick={() => {
setIsRenamingFile(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:shadow-none text-sm focus:bg-info-backdrop"
onClick={() => {
handleFileAction({
type: PopoverFileItemActionType.DeleteFile,
@@ -181,9 +184,14 @@ const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
closeMenu()
}}
>
<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>
<div className="px-3 py-1 text-xs text-neutral font-medium">
<div>
<span className="font-semibold">File ID:</span> {file.uuid}
</div>
</div>
</>
)}
</DisclosurePanel>