Skip to content

Commit 808b331

Browse files
setchysetchy
committed
feat: avatar length handling
Signed-off-by: Adam Setch <[email protected]>
1 parent ca265a0 commit 808b331

File tree

2 files changed

+94
-93
lines changed

2 files changed

+94
-93
lines changed

‎src/renderer/components/avatars/AvatarWithFallback.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type React from 'react';
22
import { useState } from 'react';
33

44
import { FeedPersonIcon, MarkGithubIcon } from '@primer/octicons-react';
5-
import { Avatar, Stack, Text } from '@primer/react';
5+
import { Avatar, Stack, Truncate } from '@primer/react';
66

77
import { type Link, Size } from '../../types';
88
import type { UserType } from '../../typesGitHub';
@@ -52,10 +52,10 @@ export const AvatarWithFallback: React.FC<IAvatarWithFallback> = ({
5252
/>
5353
)}
5454
{name && (
55-
// TODO add truncation logic for long names
56-
<Text className="block truncate flex-shrink overflow-ellipsis">
57-
{name}
58-
</Text>
55+
<Truncate title={name} inline maxWidth={280}>
56+
asdokmdasoimdasoisadoindsviunafjhnfpuinfdsapiujndfp iun
57+
piunaspiufnpiuadspdsfainfdsai
58+
</Truncate>
5959
)}
6060
</Stack>
6161
);

‎src/renderer/routes/Accounts.tsx‎

Lines changed: 89 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -123,13 +123,8 @@ export const AccountsRoute: FC = () => {
123123
key={accountUUID}
124124
className="rounded-md p-2 mb-4 bg-gitify-accounts"
125125
>
126-
<Stack
127-
direction="horizontal"
128-
gap="condensed"
129-
align="center"
130-
justify="space-between"
131-
>
132-
<Stack direction="vertical" align="start" gap="condensed">
126+
<Stack direction="horizontal">
127+
<Stack direction="vertical">
133128
<Button
134129
title="Open account profile"
135130
onClick={() => openAccountProfile(account)}
@@ -143,95 +138,101 @@ export const AccountsRoute: FC = () => {
143138
/>
144139
</Button>
145140

146-
<Box className="pl-4 pb-2 text-xs">
147-
<Stack direction="vertical" gap="condensed">
148-
<Box hidden={!account.user.name}>
149-
<Stack
150-
direction="horizontal"
151-
gap="condensed"
152-
align="center"
153-
>
154-
<PersonIcon />
155-
<Text>{account.user?.name}</Text>
156-
</Stack>
157-
</Box>
141+
<Stack
142+
direction="horizontal"
143+
justify="space-between"
144+
align="center"
145+
>
146+
<Box className="pl-4 pb-2 text-xs">
147+
<Stack direction="vertical" gap="condensed">
148+
<Box hidden={!account.user.name}>
149+
<Stack
150+
direction="horizontal"
151+
gap="condensed"
152+
align="center"
153+
>
154+
<PersonIcon />
155+
<Text>{account.user?.name}</Text>
156+
</Stack>
157+
</Box>
158158

159-
<Box
160-
title="Open host"
161-
onClick={() => openHost(account.hostname)}
162-
className="cursor-pointer"
163-
data-testid="account-host"
164-
>
165-
<Stack
166-
direction="horizontal"
167-
gap="condensed"
168-
align="center"
159+
<Box
160+
title="Open host"
161+
onClick={() => openHost(account.hostname)}
162+
className="cursor-pointer"
163+
data-testid="account-host"
169164
>
170-
<PlatformIcon />
171-
<Text>{account.hostname}</Text>
172-
</Stack>
173-
</Box>
165+
<Stack
166+
direction="horizontal"
167+
gap="condensed"
168+
align="center"
169+
>
170+
<PlatformIcon />
171+
<Text>{account.hostname}</Text>
172+
</Stack>
173+
</Box>
174174

175-
<Box
176-
title="Open developer settings"
177-
onClick={() => openDeveloperSettings(account)}
178-
className="cursor-pointer"
179-
data-testid="account-developer-settings"
180-
>
181-
<Stack
182-
direction="horizontal"
183-
gap="condensed"
184-
align="center"
175+
<Box
176+
title="Open developer settings"
177+
onClick={() => openDeveloperSettings(account)}
178+
className="cursor-pointer"
179+
data-testid="account-developer-settings"
185180
>
186-
<AuthMethodIcon />
187-
<Text>{account.method}</Text>
188-
</Stack>
189-
</Box>
190-
</Stack>
191-
</Box>
192-
</Stack>
181+
<Stack
182+
direction="horizontal"
183+
gap="condensed"
184+
align="center"
185+
>
186+
<AuthMethodIcon />
187+
<Text>{account.method}</Text>
188+
</Stack>
189+
</Box>
190+
</Stack>
191+
</Box>
193192

194-
<Stack direction="horizontal" gap="condensed">
195-
<IconButton
196-
icon={AlertFillIcon}
197-
aria-label={`This account is missing one or more required scopes: [${formatRequiredScopes()}]`}
198-
variant="danger"
199-
onClick={() => openDeveloperSettings(account)}
200-
size="small"
201-
data-testid="account-missing-scopes"
202-
className={
203-
account.hasRequiredScopes ? 'invisible' : 'visible'
204-
}
205-
/>
193+
<Stack direction="horizontal" gap="condensed">
194+
<IconButton
195+
icon={AlertFillIcon}
196+
aria-label={`This account is missing one or more required scopes: [${formatRequiredScopes()}]`}
197+
variant="danger"
198+
onClick={() => openDeveloperSettings(account)}
199+
size="small"
200+
data-testid="account-missing-scopes"
201+
className={
202+
account.hasRequiredScopes ? 'invisible' : 'visible'
203+
}
204+
/>
206205

207-
<IconButton
208-
icon={i === 0 ? StarFillIcon : StarIcon}
209-
aria-label={
210-
i === 0 ? 'Primary account' : 'Set as primary account'
211-
}
212-
variant={i === 0 ? 'primary' : 'default'}
213-
onClick={() => setAsPrimaryAccount(account)}
214-
size="small"
215-
data-testid="account-set-primary"
216-
/>
206+
<IconButton
207+
icon={i === 0 ? StarFillIcon : StarIcon}
208+
aria-label={
209+
i === 0 ? 'Primary account' : 'Set as primary account'
210+
}
211+
variant={i === 0 ? 'primary' : 'default'}
212+
onClick={() => setAsPrimaryAccount(account)}
213+
size="small"
214+
data-testid="account-set-primary"
215+
/>
217216

218-
<IconButton
219-
icon={SyncIcon}
220-
aria-label={`Refresh ${account.user.login}`}
221-
onClick={() => handleRefresh(account)}
222-
size="small"
223-
loading={loadingStates[accountUUID] || false}
224-
data-testid="account-refresh"
225-
/>
217+
<IconButton
218+
icon={SyncIcon}
219+
aria-label={`Refresh ${account.user.login}`}
220+
onClick={() => handleRefresh(account)}
221+
size="small"
222+
loading={loadingStates[accountUUID] || false}
223+
data-testid="account-refresh"
224+
/>
226225

227-
<IconButton
228-
icon={SignOutIcon}
229-
aria-label={`Logout ${account.user.login}`}
230-
variant="danger"
231-
onClick={() => logoutAccount(account)}
232-
size="small"
233-
data-testid="account-logout"
234-
/>
226+
<IconButton
227+
icon={SignOutIcon}
228+
aria-label={`Logout ${account.user.login}`}
229+
variant="danger"
230+
onClick={() => logoutAccount(account)}
231+
size="small"
232+
data-testid="account-logout"
233+
/>
234+
</Stack>
235+
</Stack>
235236
</Stack>
236237
</Stack>
237238
</Box>

0 commit comments

Comments
 (0)