nezumi/onedrive-vercel-index
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/onedrive-vercel-index.git synced 2026-09-22 13:38:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

clamp multiple lines for long file names

Browse Source
This commit is contained in:
spencerwooo
2022-02-05 20:36:38 +08:00
parent 443d42b16c
commit b42036afb7
9 changed files with 65 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/SwitchLayout.tsx
+11 -11
View File
@@ -14,38 +14,38 @@ export const SwitchLayout = () => {
const [preferredLayout, setPreferredLayout] = useLocalStorage('preferredLayout', layouts[0])
return (
<div className="w-24 flex-shrink-0 text-sm text-gray-600 dark:text-gray-300 md:w-28">
<div className="relative w-24 flex-shrink-0 text-sm text-gray-600 dark:text-gray-300 md:w-28">
<Listbox value={preferredLayout} onChange={setPreferredLayout}>
<Listbox.Button className="relative w-full cursor-pointer rounded pl-2">
<span className="pointer-events-none flex items-center">
<FontAwesomeIcon className="mr-2 h-4 w-4" icon={preferredLayout.icon} />
<FontAwesomeIcon className="mr-2 h-3 w-3" icon={preferredLayout.icon} />
<span>{preferredLayout.name}</span>
</span>
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<FontAwesomeIcon className="h-4 w-4" icon="chevron-down" />
<FontAwesomeIcon className="h-3 w-3" icon="chevron-down" />
</span>
</Listbox.Button>
<Transition as={Fragment} leave="transition ease-in duration-100" leaveFrom="opacity-100" leaveTo="opacity-0">
<Listbox.Options className="absolute z-20 mt-1 w-36 overflow-auto rounded border border-gray-900/10 bg-white py-1 shadow-lg focus:outline-none dark:border-gray-500/30 dark:bg-gray-800">
<Listbox.Options className="absolute right-0 z-20 mt-1 w-32 overflow-auto rounded border border-gray-900/10 bg-white py-1 shadow-lg focus:outline-none dark:border-gray-500/30 dark:bg-gray-800">
{layouts.map(layout => (
<Listbox.Option
key={layout.id}
className={`${
layout.name === preferredLayout.name &&
'bg-blue-50 text-blue-700 dark:bg-blue-600/10 dark:text-blue-400'
} relative flex cursor-pointer select-none items-center py-1.5 pl-9 text-gray-600 hover:opacity-80 dark:text-gray-300`}
} relative flex cursor-pointer select-none items-center py-1.5 pl-3 text-gray-600 hover:opacity-80 dark:text-gray-300`}
value={layout}
>
{layout.name === preferredLayout.name && (
<span className="absolute inset-y-0 left-0 flex items-center pl-3">
<FontAwesomeIcon className="h-4 w-4" icon="check" />
</span>
)}
<FontAwesomeIcon className="mr-2 h-4 w-4" icon={layout.icon} />
<FontAwesomeIcon className="mr-2 h-3 w-3" icon={layout.icon} />
<span className={layout.name === preferredLayout.name ? 'font-medium' : 'font-normal'}>
{layout.name}
</span>
{layout.name === preferredLayout.name && (
<span className="absolute inset-y-0 right-3 flex items-center">
<FontAwesomeIcon className="h-3 w-3" icon="check" />
</span>
)}
</Listbox.Option>
))}
</Listbox.Options>