x/onedrive
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

display extension still when space for filename is not enough

Browse source
This commit is contained in:
myl7 2022-02-10 23:18:22 +08:00
parent 601ae3ce8b
commit 4e490a007c
No known key found for this signature in database
GPG key ID: 04F1013B67177C88
3 changed files with 16 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
components/FileListing.tsx
View file

@ -12,7 +12,7 @@ import { useTranslation } from 'next-i18next'
import useLocalStorage from '../utils/useLocalStorage'
import { getPreviewType, preview } from '../utils/getPreviewType'
import { useProtectedSWRInfinite } from '../utils/fetchWithSWR'
import { getFileIcon } from '../utils/getFileIcon'
import { getExtension, getFileIcon } from '../utils/getFileIcon'
import {
DownloadingToast,
downloadMultipleFiles,
@ -66,10 +66,20 @@ const renderEmoji = (name: string) => {
const emoji = emojiRegex().exec(name)
return { render: emoji && !emoji.index, emoji }
}
export const formatChildName = (name: string) => {
const formatChildName = (name: string) => {
const { render, emoji } = renderEmoji(name)
return render ? name.replace(emoji ? emoji[0] : '', '').trim() : name
}
export const ChildName: FC<{ name: string }> = ({ name }) => {
let basename = formatChildName(name)
const extension = getExtension(basename)
basename = basename.substring(0, basename.length - extension.length)
return (
<span className="truncate before:float-right before:content-[attr(data-tail)]" data-tail={extension}>
{basename}
</span>
)
}
export const ChildIcon: FC<{ child: OdFolderChildren }> = ({ child }) => {
const { render, emoji } = renderEmoji(child.name)
return render ? (

4
components/FolderGridLayout.tsx
View file

@ -9,7 +9,7 @@ import { useTranslation } from 'next-i18next'
import { getBaseUrl } from '../utils/getBaseUrl'
import { formatModifiedDateTime } from '../utils/fileDetails'
import { getReadablePath } from '../utils/getReadablePath'
import { Checkbox, ChildIcon, Downloading, formatChildName } from './FileListing'
import { Checkbox, ChildIcon, ChildName, Downloading } from './FileListing'
const GridItem = ({ c, path }: { c: OdFolderChildren; path: string }) => {
// We use the generated medium thumbnail for rendering preview images (excluding folders)
@ -43,7 +43,7 @@ const GridItem = ({ c, path }: { c: OdFolderChildren; path: string }) => {
<span className="w-5 flex-shrink-0 text-center">
<ChildIcon child={c} />
</span>
<span className="overflow-hidden truncate">{formatChildName(c.name)}</span>
<ChildName name={c.name} />
</div>
<div className="truncate text-center font-mono text-xs text-gray-700 dark:text-gray-500">
{formatModifiedDateTime(c.lastModifiedDateTime)}

4
components/FolderListLayout.tsx
View file

@ -10,7 +10,7 @@ import { getBaseUrl } from '../utils/getBaseUrl'
import { humanFileSize, formatModifiedDateTime } from '../utils/fileDetails'
import { getReadablePath } from '../utils/getReadablePath'
import { Downloading, Checkbox, formatChildName, ChildIcon } from './FileListing'
import { Downloading, Checkbox, ChildIcon, ChildName } from './FileListing'
const FileListItem: FC<{ fileContent: OdFolderChildren }> = ({ fileContent: c }) => {
return (
@ -19,7 +19,7 @@ const FileListItem: FC<{ fileContent: OdFolderChildren }> = ({ fileContent: c })
<div className="w-5 flex-shrink-0 text-center">
<ChildIcon child={c} />
</div>
<div className="truncate">{formatChildName(c.name)}</div>
<ChildName name={c.name} />
</div>
<div className="col-span-3 hidden flex-shrink-0 font-mono text-sm text-gray-700 dark:text-gray-500 md:block">
{formatModifiedDateTime(c.lastModifiedDateTime)}