YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: fix text truncate

Browse Source
This commit is contained in:
Steven
2024-04-08 19:20:16 +08:00
parent 90ed908d2e
commit 436a6cb084
3 changed files with 82 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/components/MemoView.tsx
View File

@ -92,13 +92,11 @@ const MemoView: React.FC<Props> = (props: Props) => {
</Link> </Link>
<div className="w-full flex flex-col justify-center items-start"> <div className="w-full flex flex-col justify-center items-start">
<Link <Link
className="w-auto leading-tight hover:opacity-80" className="w-full block leading-tight hover:opacity-80 truncate text-gray-600 dark:text-gray-400"
to={`/u/${encodeURIComponent(creator.username)}`} to={`/u/${encodeURIComponent(creator.username)}`}
unstable_viewTransition unstable_viewTransition
> >
<span className="text-gray-600 leading-tight max-w-[80%] truncate dark:text-gray-400"> {creator.nickname || creator.username}
{creator.nickname || creator.username}
</span>
</Link> </Link>
<div <div
className="w-auto -mt-0.5 text-xs leading-tight text-gray-400 dark:text-gray-500 select-none" className="w-auto -mt-0.5 text-xs leading-tight text-gray-400 dark:text-gray-500 select-none"

163
web/src/components/Settings/AccessTokenSection.tsx
View File

@ -55,97 +55,90 @@ const AccessTokenSection = () => {
}; };
return ( return (
<> <div className="mt-6 w-full flex flex-col justify-start items-start space-y-4">
<div className="mt-4 w-full flex flex-col justify-start items-start space-y-4"> <div className="w-full">
<div className="w-full"> <div className="sm:flex sm:items-center sm:justify-between">
<div className="sm:flex sm:items-center sm:justify-between"> <div className="sm:flex-auto space-y-1">
<div className="sm:flex-auto space-y-1"> <p className="flex flex-row justify-start items-center font-medium text-gray-700 dark:text-gray-400">
<p className="flex flex-row justify-start items-center font-medium text-gray-700 dark:text-gray-400"> Access Tokens
Access Tokens <LearnMore className="ml-2" url="https://usememos.com/docs/security/access-tokens" />
<LearnMore className="ml-2" url="https://usememos.com/docs/security/access-tokens" /> </p>
</p> <p className="text-sm text-gray-700 dark:text-gray-500">A list of all access tokens for your account.</p>
<p className="text-sm text-gray-700 dark:text-gray-500">A list of all access tokens for your account.</p>
</div>
<div className="mt-4 sm:mt-0">
<Button
variant="outlined"
color="neutral"
onClick={() => {
showCreateAccessTokenDialog(handleCreateAccessTokenDialogConfirm);
}}
>
{t("common.create")}
</Button>
</div>
</div> </div>
<div className="mt-2 flow-root"> <div className="mt-4 sm:mt-0">
<div className="overflow-x-auto"> <Button
<div className="inline-block min-w-full py-2 align-middle"> variant="outlined"
<table className="min-w-full divide-y divide-gray-300 dark:divide-zinc-600"> color="neutral"
<thead> onClick={() => {
<tr> showCreateAccessTokenDialog(handleCreateAccessTokenDialogConfirm);
<th scope="col" className="px-3 py-2 text-left text-sm font-semibold text-gray-900 dark:text-gray-400"> }}
Token >
</th> {t("common.create")}
<th scope="col" className="py-2 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-400"> </Button>
Description </div>
</th> </div>
<th scope="col" className="px-3 py-2 text-left text-sm font-semibold text-gray-900 dark:text-gray-400"> <div className="flow-root">
Created At <div className="overflow-x-auto">
</th> <div className="inline-block min-w-full py-2 align-middle">
<th scope="col" className="px-3 py-2 text-left text-sm font-semibold text-gray-900 dark:text-gray-400"> <table className="min-w-full divide-y divide-gray-300 dark:divide-zinc-600">
Expires At <thead>
</th> <tr>
<th scope="col" className="relative py-3.5 pl-3 pr-4"> <th scope="col" className="px-3 py-2 text-left text-sm font-semibold text-gray-900 dark:text-gray-400">
<span className="sr-only">{t("common.delete")}</span> Token
</th> </th>
<th scope="col" className="py-2 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-400">
Description
</th>
<th scope="col" className="px-3 py-2 text-left text-sm font-semibold text-gray-900 dark:text-gray-400">
Created At
</th>
<th scope="col" className="px-3 py-2 text-left text-sm font-semibold text-gray-900 dark:text-gray-400">
Expires At
</th>
<th scope="col" className="relative py-3.5 pl-3 pr-4">
<span className="sr-only">{t("common.delete")}</span>
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200 dark:divide-zinc-700">
{userAccessTokens.map((userAccessToken) => (
<tr key={userAccessToken.accessToken}>
<td className="whitespace-nowrap px-3 py-2 text-sm text-gray-900 dark:text-gray-400 flex flex-row justify-start items-center gap-x-1">
<span className="font-mono">{getFormatedAccessToken(userAccessToken.accessToken)}</span>
<IconButton color="neutral" variant="plain" size="sm" onClick={() => copyAccessToken(userAccessToken.accessToken)}>
<Icon.Clipboard className="w-4 h-auto text-gray-400" />
</IconButton>
</td>
<td className="whitespace-nowrap py-2 pl-4 pr-3 text-sm text-gray-900 dark:text-gray-400">
{userAccessToken.description}
</td>
<td className="whitespace-nowrap px-3 py-2 text-sm text-gray-500 dark:text-gray-400">
{userAccessToken.issuedAt?.toLocaleString()}
</td>
<td className="whitespace-nowrap px-3 py-2 text-sm text-gray-500 dark:text-gray-400">
{userAccessToken.expiresAt?.toLocaleString() ?? "Never"}
</td>
<td className="relative whitespace-nowrap py-2 pl-3 pr-4 text-right text-sm">
<IconButton
color="danger"
variant="plain"
size="sm"
onClick={() => {
handleDeleteAccessToken(userAccessToken.accessToken);
}}
>
<Icon.Trash className="w-4 h-auto" />
</IconButton>
</td>
</tr> </tr>
</thead> ))}
<tbody className="divide-y divide-gray-200 dark:divide-zinc-700"> </tbody>
{userAccessTokens.map((userAccessToken) => ( </table>
<tr key={userAccessToken.accessToken}>
<td className="whitespace-nowrap px-3 py-2 text-sm text-gray-900 dark:text-gray-400 flex flex-row justify-start items-center gap-x-1">
<span className="font-mono">{getFormatedAccessToken(userAccessToken.accessToken)}</span>
<IconButton
color="neutral"
variant="plain"
size="sm"
onClick={() => copyAccessToken(userAccessToken.accessToken)}
>
<Icon.Clipboard className="w-4 h-auto text-gray-400" />
</IconButton>
</td>
<td className="whitespace-nowrap py-2 pl-4 pr-3 text-sm text-gray-900 dark:text-gray-400">
{userAccessToken.description}
</td>
<td className="whitespace-nowrap px-3 py-2 text-sm text-gray-500 dark:text-gray-400">
{userAccessToken.issuedAt?.toLocaleString()}
</td>
<td className="whitespace-nowrap px-3 py-2 text-sm text-gray-500 dark:text-gray-400">
{userAccessToken.expiresAt?.toLocaleString() ?? "Never"}
</td>
<td className="relative whitespace-nowrap py-2 pl-3 pr-4 text-right text-sm">
<IconButton
color="danger"
variant="plain"
size="sm"
onClick={() => {
handleDeleteAccessToken(userAccessToken.accessToken);
}}
>
<Icon.Trash className="w-4 h-auto" />
</IconButton>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</> </div>
); );
}; };

10
web/src/components/Settings/MyAccountSection.tsx
View File

@ -45,14 +45,8 @@ const MyAccountSection = () => {
</Button> </Button>
</MenuButton> </MenuButton>
<Menu className="text-sm" size="sm" placement="bottom"> <Menu className="text-sm" size="sm" placement="bottom">
<MenuItem onClick={showChangePasswordDialog}> <MenuItem onClick={showChangePasswordDialog}>{t("setting.account-section.change-password")}</MenuItem>
<Icon.ArchiveRestore className="w-4 h-auto" /> <MenuItem onClick={() => downloadExportedMemos(user)}>{t("setting.account-section.export-memos")}</MenuItem>
{t("setting.account-section.change-password")}
</MenuItem>
<MenuItem onClick={() => downloadExportedMemos(user)}>
<Icon.Trash className="w-4 h-auto" />
{t("setting.account-section.export-memos")}
</MenuItem>
</Menu> </Menu>
</Dropdown> </Dropdown>
</div> </div>