From b42036afb764b1c61cae56db469202d4302e2cae Mon Sep 17 00:00:00 2001 From: spencerwooo Date: Sat, 5 Feb 2022 20:36:38 +0800 Subject: [PATCH] clamp multiple lines for long file names --- components/FileListing.tsx | 24 ++++------------------ components/FolderGridLayout.tsx | 2 +- components/SwitchLayout.tsx | 22 ++++++++++---------- components/previews/DefaultPreview.tsx | 12 +++++------ components/previews/ImagePreview.tsx | 28 ++++++++++++++++++++++++++ package.json | 1 + pnpm-lock.yaml | 10 +++++++++ tailwind.config.js | 4 +++- types/index.d.ts | 2 +- 9 files changed, 65 insertions(+), 40 deletions(-) create mode 100644 components/previews/ImagePreview.tsx diff --git a/components/FileListing.tsx b/components/FileListing.tsx index 9e0fd0b..5f47705 100644 --- a/components/FileListing.tsx +++ b/components/FileListing.tsx @@ -43,6 +43,7 @@ import FolderListLayout from './FolderListLayout' import type { OdFileObject, OdFolderObject } from '../types' import FolderGridLayout from './FolderGridLayout' +import ImagePreview from './previews/ImagePreview' // Disabling SSR for some previews const EPUBPreview = dynamic(() => import('./previews/EPUBPreview'), { @@ -340,29 +341,12 @@ const FileListing: FC<{ query?: ParsedUrlQuery }> = ({ query }) => { const fileName = file.name const fileExtension = fileName.slice(((fileName.lastIndexOf('.') - 1) >>> 0) + 2).toLowerCase() - const previewType = getPreviewType(fileExtension, { - video: Boolean(file.video), - }) + const previewType = getPreviewType(fileExtension, { video: Boolean(file.video) }) + if (previewType) { switch (previewType) { case preview.image: - return ( - <> - - {/* eslint-disable-next-line @next/next/no-img-element */} - {fileName} - - - - - - ) + return case preview.text: return diff --git a/components/FolderGridLayout.tsx b/components/FolderGridLayout.tsx index 45c1d18..e48bdaa 100644 --- a/components/FolderGridLayout.tsx +++ b/components/FolderGridLayout.tsx @@ -1,5 +1,6 @@ import type { OdFolderObject } from '../types' +import { useState } from 'react' import Link from 'next/link' import emojiRegex from 'emoji-regex' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' @@ -9,7 +10,6 @@ import { getFileIcon } from '../utils/getFileIcon' import { getBaseUrl } from '../utils/getBaseUrl' import { formatModifiedDateTime } from '../utils/fileDetails' import { Checkbox, Downloading } from './FileListing' -import { useState } from 'react' type OdFolderChildren = OdFolderObject['value'][number] diff --git a/components/SwitchLayout.tsx b/components/SwitchLayout.tsx index f4428c4..ebf31b6 100644 --- a/components/SwitchLayout.tsx +++ b/components/SwitchLayout.tsx @@ -14,38 +14,38 @@ export const SwitchLayout = () => { const [preferredLayout, setPreferredLayout] = useLocalStorage('preferredLayout', layouts[0]) return ( -
+
- + {preferredLayout.name} - + - + {layouts.map(layout => ( - {layout.name === preferredLayout.name && ( - - - - )} - + {layout.name} + {layout.name === preferredLayout.name && ( + + + + )} ))} diff --git a/components/previews/DefaultPreview.tsx b/components/previews/DefaultPreview.tsx index 8114c4e..dc795b2 100644 --- a/components/previews/DefaultPreview.tsx +++ b/components/previews/DefaultPreview.tsx @@ -14,9 +14,9 @@ const DefaultPreview: FC<{ file: OdFileObject }> = ({ file }) => {
-
+
-
{file.name}
+
{file.name}
@@ -32,7 +32,7 @@ const DefaultPreview: FC<{ file: OdFileObject }> = ({ file }) => {
MIME type
-
{file.file.mimeType}
+
{file.file?.mimeType || 'Unavailable'}
@@ -44,7 +44,7 @@ const DefaultPreview: FC<{ file: OdFileObject }> = ({ file }) => { Quick XOR - {file.file.hashes.quickXorHash} + {file.file.hashes?.quickXorHash || 'Unavailable'} @@ -52,7 +52,7 @@ const DefaultPreview: FC<{ file: OdFileObject }> = ({ file }) => { SHA1 - {file.file.hashes.sha1Hash} + {file.file.hashes?.sha1Hash || 'Unavailable'} @@ -60,7 +60,7 @@ const DefaultPreview: FC<{ file: OdFileObject }> = ({ file }) => { SHA256 - {file.file.hashes.sha256Hash} + {file.file.hashes?.sha256Hash || 'Unavailable'} diff --git a/components/previews/ImagePreview.tsx b/components/previews/ImagePreview.tsx new file mode 100644 index 0000000..6166b20 --- /dev/null +++ b/components/previews/ImagePreview.tsx @@ -0,0 +1,28 @@ +import type { OdFileObject } from '../../types' + +import { FC } from 'react' + +import { PreviewContainer, DownloadBtnContainer } from './Containers' +import DownloadButtonGroup from '../DownloadBtnGtoup' + +const ImagePreview: FC<{ file: OdFileObject }> = ({ file }) => { + return ( + <> + + {/* eslint-disable-next-line @next/next/no-img-element */} + {file.name} + + + + + + ) +} + +export default ImagePreview diff --git a/package.json b/package.json index cd22ac6..69b4460 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "@fortawesome/free-solid-svg-icons": "^5.15.3", "@fortawesome/react-fontawesome": "^0.1.14", "@headlessui/react": "^1.4.0", + "@tailwindcss/line-clamp": "^0.3.1", "awesome-debounce-promise": "^2.1.0", "axios": "^0.25.0", "cors": "^2.8.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 499dda2..bcdb121 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7,6 +7,7 @@ specifiers: '@fortawesome/free-solid-svg-icons': ^5.15.3 '@fortawesome/react-fontawesome': ^0.1.14 '@headlessui/react': ^1.4.0 + '@tailwindcss/line-clamp': ^0.3.1 '@types/cors': ^2.8.12 '@types/crypto-js': ^4.0.2 '@types/ioredis': ^4.28.5 @@ -62,6 +63,7 @@ dependencies: '@fortawesome/free-solid-svg-icons': 5.15.4 '@fortawesome/react-fontawesome': 0.1.17_f515edce028694561ceb456e3dba224c '@headlessui/react': 1.4.3_react-dom@17.0.2+react@17.0.2 + '@tailwindcss/line-clamp': 0.3.1_tailwindcss@3.0.18 awesome-debounce-promise: 2.1.0 axios: 0.25.0 cors: 2.8.5 @@ -376,6 +378,14 @@ packages: resolution: {integrity: sha512-JLo+Y592QzIE+q7Dl2pMUtt4q8SKYI5jDrZxrozEQxnGVOyYE+GWK9eLkwTaeN9DDctlaRAQ3TBmzZ1qdLE30A==} dev: true + /@tailwindcss/line-clamp/0.3.1_tailwindcss@3.0.18: + resolution: {integrity: sha512-pNr0T8LAc3TUx/gxCfQZRe9NB2dPEo/cedPHzUGIPxqDMhgjwNm6jYxww4W5l0zAsAddxr+XfZcqttGiFDgrGg==} + peerDependencies: + tailwindcss: '>=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1' + dependencies: + tailwindcss: 3.0.18_833e1018ad0d7954aa80c53675939269 + dev: false + /@types/cors/2.8.12: resolution: {integrity: sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw==} dev: true diff --git a/tailwind.config.js b/tailwind.config.js index e2adf33..2c01c61 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -35,5 +35,7 @@ module.exports = { } } }, - plugins: [], + plugins: [ + require('@tailwindcss/line-clamp'), + ], } diff --git a/types/index.d.ts b/types/index.d.ts index f3dae85..219bf27 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -13,7 +13,7 @@ export type OdFolderObject = { name: string size: number lastModifiedDateTime: string - file?: { mimeType: string; hashes: { quickXorHash: string; sha1Hash?: string; sha256Hash?: string } } + file?: { mimeType: string; hashes: { quickXorHash?: string; sha1Hash?: string; sha256Hash?: string } } folder?: { childCount: number; view: { sortBy: string; sortOrder: 'ascending'; viewType: 'thumbnails' } } image?: OdImageFile video?: OdVideoFile