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

style: tailwind classname sorting (#1169)

Browse Source
This commit is contained in:
Aman Harwara
2022-06-28 13:37:38 +05:30
committed by GitHub
parent 15ca2d358b
commit ee5b6627da
159 changed files with 565 additions and 549 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/web/src/javascripts/Components/FilePreview/FilePreview.tsx
View File

@@ -58,9 +58,9 @@ const FilePreview = ({ file, application }: Props) => {
}, [application.files, downloadedBytes, file, isFilePreviewable])
return isDownloading ? (
<div className="flex flex-col justify-center items-center flex-grow">
<div className="flex flex-grow flex-col items-center justify-center">
<div className="flex items-center">
<Spinner className="w-5 h-5 mr-3" />
<Spinner className="mr-3 h-5 w-5" />
<div className="text-base font-semibold">{downloadProgress}%</div>
</div>
<span className="mt-3">Loading file...</span>

10
packages/web/src/javascripts/Components/FilePreview/FilePreviewError.tsx
View File

@@ -12,12 +12,12 @@ type Props = {
const FilePreviewError = ({ file, filesController, isFilePreviewable, tryAgainCallback }: Props) => {
return (
<div className="flex flex-col justify-center items-center flex-grow">
<NoPreviewIllustration className="w-30 h-30 mb-4" />
<div className="font-bold text-base mb-2">This file can't be previewed.</div>
<div className="flex flex-grow flex-col items-center justify-center">
<NoPreviewIllustration className="mb-4 h-30 w-30" />
<div className="mb-2 text-base font-bold">This file can't be previewed.</div>
{isFilePreviewable ? (
<>
<div className="text-sm text-center text-passive-0 mb-4 max-w-35ch">
<div className="max-w-35ch mb-4 text-center text-sm text-passive-0">
There was an error loading the file. Try again, or download the file and open it using another application.
</div>
<div className="flex items-center">
@@ -41,7 +41,7 @@ const FilePreviewError = ({ file, filesController, isFilePreviewable, tryAgainCa
</>
) : (
<>
<div className="text-sm text-center text-passive-0 mb-4 max-w-35ch">
<div className="max-w-35ch mb-4 text-center text-sm text-passive-0">
To view this file, download it and open it using another application.
</div>
<Button

4
packages/web/src/javascripts/Components/FilePreview/FilePreviewInfoPanel.tsx
View File

@@ -9,8 +9,8 @@ type Props = {
const FilePreviewInfoPanel: FunctionComponent<Props> = ({ file }) => {
return (
<div className="flex flex-col min-w-70 p-4 border-0 border-l border-solid border-border">
<div className="flex items-center mb-4">
<div className="flex min-w-70 flex-col border-0 border-l border-solid border-border p-4">
<div className="mb-4 flex items-center">
<Icon type="info" className="mr-2" />
<div className="font-semibold">File information</div>
</div>

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

@@ -78,20 +78,20 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, view
>
<DialogContent
aria-label="File preview modal"
className="flex flex-col rounded shadow-main p-0 min-w-[90%] min-h-[90%] bg-[color:var(--modal-background-color)] "
className="flex min-h-[90%] min-w-[90%] flex-col rounded bg-[color:var(--modal-background-color)] p-0 shadow-main "
>
<div
className="flex flex-shrink-0 justify-between items-center min-h-6 px-4 py-3 border-0 border-b border-solid border-border focus:shadow-none"
className="min-h-6 flex flex-shrink-0 items-center justify-between border-0 border-b border-solid border-border px-4 py-3 focus:shadow-none"
tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
onKeyDown={keyDownHandler}
>
<div className="flex items-center">
<div className="w-6 h-6">{IconComponent}</div>
<div className="h-6 w-6">{IconComponent}</div>
<span className="ml-3 font-medium">{currentFile.name}</span>
</div>
<div className="flex items-center">
<button
className="flex p-1.5 mr-4 bg-transparent hover:bg-contrast border-solid border-border border cursor-pointer rounded"
className="mr-4 flex cursor-pointer rounded border border-solid border-border bg-transparent p-1.5 hover:bg-contrast"
onClick={() => setShowFileInfoPanel((show) => !show)}
>
<Icon type="info" className="text-neutral" />
@@ -100,14 +100,14 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, view
ref={closeButtonRef}
onClick={dismiss}
aria-label="Close modal"
className="flex p-1 bg-transparent hover:bg-contrast border-0 cursor-pointer rounded"
className="flex cursor-pointer rounded border-0 bg-transparent p-1 hover:bg-contrast"
>
<Icon type="close" className="text-neutral" />
</button>
</div>
</div>
<div className="flex flex-grow min-h-0">
<div className="flex flex-grow items-center justify-center relative max-w-full">
<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} />
</div>
{showFileInfoPanel && <FilePreviewInfoPanel file={currentFile} />}

10
packages/web/src/javascripts/Components/FilePreview/ImagePreview.tsx
View File

@@ -12,8 +12,8 @@ const ImagePreview: FunctionComponent<Props> = ({ objectUrl }) => {
const [imageZoomPercent, setImageZoomPercent] = useState(100)
return (
<div className="flex items-center justify-center w-full h-full min-h-0">
<div className="flex items-center justify-center w-full h-full relative overflow-auto">
<div className="flex h-full min-h-0 w-full items-center justify-center">
<div className="relative flex h-full w-full items-center justify-center overflow-auto">
<img
src={objectUrl}
style={{
@@ -37,10 +37,10 @@ const ImagePreview: FunctionComponent<Props> = ({ objectUrl }) => {
}}
/>
</div>
<div className="flex items-center absolute left-1/2 -translate-x-1/2 bottom-6 py-1 px-3 bg-default border border-solid border-border rounded">
<div className="absolute left-1/2 bottom-6 flex -translate-x-1/2 items-center rounded border border-solid border-border bg-default py-1 px-3">
<span className="mr-1.5">Zoom:</span>
<IconButton
className="hover:bg-contrast p-1 rounded"
className="rounded p-1 hover:bg-contrast"
icon={'subtract' as IconType}
title="Zoom Out"
focusable={true}
@@ -57,7 +57,7 @@ const ImagePreview: FunctionComponent<Props> = ({ objectUrl }) => {
/>
<span className="mx-2">{imageZoomPercent}%</span>
<IconButton
className="hover:bg-contrast p-1 rounded"
className="rounded p-1 hover:bg-contrast"
icon="add"
title="Zoom In"
focusable={true}

6
packages/web/src/javascripts/Components/FilePreview/PreviewComponent.tsx
View File

@@ -33,12 +33,12 @@ const PreviewComponent: FunctionComponent<Props> = ({ file, bytes }) => {
}
if (file.mimeType.startsWith('video/')) {
return <video className="w-full h-full" src={objectUrl} controls autoPlay />
return <video className="h-full w-full" src={objectUrl} controls autoPlay />
}
if (file.mimeType.startsWith('audio/')) {
return (
<div className="w-full h-full flex items-center justify-center">
<div className="flex h-full w-full items-center justify-center">
<audio src={objectUrl} controls />
</div>
)
@@ -48,7 +48,7 @@ const PreviewComponent: FunctionComponent<Props> = ({ file, bytes }) => {
return <TextPreview bytes={bytes} />
}
return <object className="w-full h-full" data={objectUrl} />
return <object className="h-full w-full" data={objectUrl} />
}
export default PreviewComponent

2
packages/web/src/javascripts/Components/FilePreview/TextPreview.tsx
View File

@@ -14,7 +14,7 @@ const TextPreview = ({ bytes }: Props) => {
return (
<textarea
autoComplete="off"
className="w-full h-full flex-grow font-editor focus:shadow-none focus:outline-none"
className="font-editor h-full w-full flex-grow focus:shadow-none focus:outline-none"
dir="auto"
id={ElementIds.FileTextPreview}
defaultValue={text}