Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit510bc37

Browse files
refactor: update avatar sizes in groups, users and members (#17230)
We updated the template and workspace avatars to be "lg" so to keep itconsistent we have to do the same for the other avatars too.
1 parent3bfafe3 commit510bc37

File tree

10 files changed

+110
-80
lines changed

10 files changed

+110
-80
lines changed

‎site/src/components/Avatar/Avatar.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@ const avatarVariants = cva(
2222
{
2323
variants:{
2424
size:{
25-
lg:"h-[--avatar-lg] w-[--avatar-lg] rounded-[6px] text-sm font-medium",
26-
md:"h-[--avatar-default] w-[--avatar-default] text-2xs",
27-
sm:"h-[--avatar-sm] w-[--avatar-sm] text-[8px]",
25+
lg:"size-[--avatar-lg] rounded-[6px] text-sm font-medium",
26+
md:"size-[--avatar-default] text-2xs",
27+
sm:"size-[--avatar-sm] text-[8px]",
2828
},
2929
variant:{
3030
default:null,

‎site/src/components/Avatar/AvatarData.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
import{useTheme}from"@emotion/react";
21
import{Avatar}from"components/Avatar/Avatar";
3-
import{Stack}from"components/Stack/Stack";
42
importtype{FC,ReactNode}from"react";
53

64
exportinterfaceAvatarDataProps{
@@ -26,10 +24,10 @@ export const AvatarData: FC<AvatarDataProps> = ({
2624
imgFallbackText,
2725
avatar,
2826
})=>{
29-
consttheme=useTheme();
3027
if(!avatar){
3128
avatar=(
3229
<Avatar
30+
size="lg"
3331
src={src}
3432
fallback={(typeoftitle==="string" ?title :imgFallbackText)||"-"}
3533
/>
@@ -41,7 +39,9 @@ export const AvatarData: FC<AvatarDataProps> = ({
4139
{avatar}
4240

4341
<divclassName="flex flex-col w-full">
44-
<spanclassName="text-sm font-semibold">{title}</span>
42+
<spanclassName="text-sm font-semibold text-content-primary">
43+
{title}
44+
</span>
4545
{subtitle&&(
4646
<spanclassName="text-content-secondary text-xs font-medium">
4747
{subtitle}

‎site/src/components/Avatar/AvatarDataSkeleton.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import type { FC } from "react";
55
exportconstAvatarDataSkeleton:FC=()=>{
66
return(
77
<divclassName="flex items-center gap-3 w-full">
8-
<Skeletonvariant="rectangular"className="size-10 rounded-sm"/>
8+
<Skeletonvariant="rectangular"className="size-10 rounded-sm shrink-0"/>
99

1010
<divclassName="flex flex-col w-full">
1111
<Skeletonvariant="text"width={100}/>

‎site/src/components/LastSeen/LastSeen.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useTheme } from "@emotion/react";
22
importdayjsfrom"dayjs";
33
importrelativeTimefrom"dayjs/plugin/relativeTime";
44
importtype{FC,HTMLAttributes}from"react";
5+
import{cn}from"utils/cn";
56

67
dayjs.extend(relativeTime);
78

@@ -11,7 +12,7 @@ interface LastSeenProps
1112
"data-chromatic"?:string;// prevents a type error in the stories
1213
}
1314

14-
exportconstLastSeen:FC<LastSeenProps>=({ at, ...attrs})=>{
15+
exportconstLastSeen:FC<LastSeenProps>=({ at,className,...attrs})=>{
1516
consttheme=useTheme();
1617
constt=dayjs(at);
1718
constnow=dayjs();
@@ -35,7 +36,12 @@ export const LastSeen: FC<LastSeenProps> = ({ at, ...attrs }) => {
3536
}
3637

3738
return(
38-
<spandata-chromatic="ignore"css={{ color}}{...attrs}>
39+
<span
40+
data-chromatic="ignore"
41+
css={{ color}}
42+
{...attrs}
43+
className={cn(["whitespace-nowrap",className])}
44+
>
3945
{message}
4046
</span>
4147
);

‎site/src/components/Table/Table.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export const TableHead = React.forwardRef<
8282
<th
8383
ref={ref}
8484
className={cn(
85-
"py-2 px-4 text-left align-middle font-semibold",
85+
"p-3 text-left align-middle font-semibold",
8686
"[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
8787
className,
8888
)}
@@ -98,7 +98,7 @@ export const TableCell = React.forwardRef<
9898
ref={ref}
9999
className={cn(
100100
"border-0 border-t border-border border-solid",
101-
"py-2 px-4 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
101+
"p-3 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
102102
className,
103103
)}
104104
{...props}

‎site/src/pages/GroupsPage/GroupPage.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -310,7 +310,13 @@ const GroupMemberRow: FC<GroupMemberRowProps> = ({
310310
<TableRowkey={member.id}>
311311
<TableCellwidth="59%">
312312
<AvatarData
313-
avatar={<Avatarfallback={member.username}src={member.avatar_url}/>}
313+
avatar={
314+
<Avatar
315+
size="lg"
316+
fallback={member.username}
317+
src={member.avatar_url}
318+
/>
319+
}
314320
title={member.username}
315321
subtitle={member.email}
316322
/>

‎site/src/pages/GroupsPage/GroupsPageView.tsx

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
importtype{Interpolation,Theme}from"@emotion/react";
22
importAddOutlinedfrom"@mui/icons-material/AddOutlined";
33
importKeyboardArrowRightfrom"@mui/icons-material/KeyboardArrowRight";
4-
importAvatarGroupfrom"@mui/material/AvatarGroup";
54
importSkeletonfrom"@mui/material/Skeleton";
65
importtype{Group}from"api/typesGenerated";
76
import{Avatar}from"components/Avatar/Avatar";
87
import{AvatarData}from"components/Avatar/AvatarData";
98
import{AvatarDataSkeleton}from"components/Avatar/AvatarDataSkeleton";
9+
import{Badge}from"components/Badge/Badge";
1010
import{Button}from"components/Button/Button";
1111
import{ChooseOne,Cond}from"components/Conditionals/ChooseOne";
1212
import{EmptyState}from"components/EmptyState/EmptyState";
@@ -115,13 +115,17 @@ const GroupRow: FC<GroupRowProps> = ({ group }) => {
115115
constrowProps=useClickableTableRow({
116116
onClick:()=>navigate(group.name),
117117
});
118+
constmemberAvatars=group.members.slice(0,5);
119+
constremainingAvatars=group.members.length-memberAvatars.length;
118120

119121
return(
120122
<TableRowdata-testid={`group-${group.id}`}{...rowProps}>
121123
<TableCell>
122124
<AvatarData
123125
avatar={
124126
<Avatar
127+
size="lg"
128+
variant="icon"
125129
fallback={group.display_name||group.name}
126130
src={group.avatar_url}
127131
/>
@@ -132,20 +136,24 @@ const GroupRow: FC<GroupRowProps> = ({ group }) => {
132136
</TableCell>
133137

134138
<TableCell>
135-
{group.members.length===0&&"-"}
136-
<AvatarGroup
137-
max={10}
138-
total={group.members.length}
139-
css={{justifyContent:"flex-end",gap:8}}
140-
>
141-
{group.members.map((member)=>(
142-
<Avatar
143-
key={member.username}
144-
fallback={member.username}
145-
src={member.avatar_url}
146-
/>
147-
))}
148-
</AvatarGroup>
139+
{group.members.length>0 ?(
140+
<divclassName="flex items-center gap-2">
141+
{memberAvatars.map((member)=>(
142+
<Avatar
143+
key={member.username}
144+
fallback={member.username}
145+
src={member.avatar_url}
146+
/>
147+
))}
148+
{remainingAvatars>0&&(
149+
<BadgeclassName="h-[--avatar-default]">
150+
+{remainingAvatars}
151+
</Badge>
152+
)}
153+
</div>
154+
) :(
155+
"-"
156+
)}
149157
</TableCell>
150158

151159
<TableCell>

‎site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.tsx

Lines changed: 60 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { ErrorAlert } from "components/Alert/ErrorAlert";
1111
import{Avatar}from"components/Avatar/Avatar";
1212
import{AvatarData}from"components/Avatar/AvatarData";
1313
import{displayError,displaySuccess}from"components/GlobalSnackbar/utils";
14+
import{Loader}from"components/Loader/Loader";
1415
import{
1516
MoreMenu,
1617
MoreMenuContent,
@@ -32,6 +33,7 @@ import {
3233
TableHeader,
3334
TableRow,
3435
}from"components/Table/Table";
36+
import{TableLoader}from"components/TableLoader/TableLoader";
3537
import{UserAutocomplete}from"components/UserAutocomplete/UserAutocomplete";
3638
importtype{PaginationResultInfo}from"hooks/usePaginatedQuery";
3739
import{TriangleAlert}from"lucide-react";
@@ -125,58 +127,67 @@ export const OrganizationMembersPageView: FC<
125127
</TableRow>
126128
</TableHeader>
127129
<TableBody>
128-
{members?.map((member)=>(
129-
<TableRowkey={member.user_id}className="align-baseline">
130-
<TableCell>
131-
<AvatarData
132-
avatar={
133-
<Avatar
134-
fallback={member.username}
135-
src={member.avatar_url}
136-
/>
137-
}
138-
title={member.name||member.username}
139-
subtitle={member.email}
130+
{members ?(
131+
members.map((member)=>(
132+
<TableRowkey={member.user_id}className="align-baseline">
133+
<TableCell>
134+
<AvatarData
135+
avatar={
136+
<Avatar
137+
fallback={member.username}
138+
src={member.avatar_url}
139+
size="lg"
140+
/>
141+
}
142+
title={member.name||member.username}
143+
subtitle={member.email}
144+
/>
145+
</TableCell>
146+
<UserRoleCell
147+
inheritedRoles={member.global_roles}
148+
roles={member.roles}
149+
allAvailableRoles={allAvailableRoles}
150+
oidcRoleSyncEnabled={false}
151+
isLoading={isUpdatingMemberRoles}
152+
canEditUsers={canEditMembers}
153+
onEditRoles={async(roles)=>{
154+
try{
155+
awaitupdateMemberRoles(member,roles);
156+
displaySuccess("Roles updated successfully.");
157+
}catch(error){
158+
displayError(
159+
getErrorMessage(error,"Failed to update roles."),
160+
);
161+
}
162+
}}
140163
/>
141-
</TableCell>
142-
<UserRoleCell
143-
inheritedRoles={member.global_roles}
144-
roles={member.roles}
145-
allAvailableRoles={allAvailableRoles}
146-
oidcRoleSyncEnabled={false}
147-
isLoading={isUpdatingMemberRoles}
148-
canEditUsers={canEditMembers}
149-
onEditRoles={async(roles)=>{
150-
try{
151-
awaitupdateMemberRoles(member,roles);
152-
displaySuccess("Roles updated successfully.");
153-
}catch(error){
154-
displayError(
155-
getErrorMessage(error,"Failed to update roles."),
156-
);
157-
}
158-
}}
159-
/>
160-
<UserGroupsCelluserGroups={member.groups}/>
161-
<TableCell>
162-
{member.user_id!==me.id&&canEditMembers&&(
163-
<MoreMenu>
164-
<MoreMenuTrigger>
165-
<ThreeDotsButton/>
166-
</MoreMenuTrigger>
167-
<MoreMenuContent>
168-
<MoreMenuItem
169-
danger
170-
onClick={()=>removeMember(member)}
171-
>
172-
Remove
173-
</MoreMenuItem>
174-
</MoreMenuContent>
175-
</MoreMenu>
176-
)}
164+
<UserGroupsCelluserGroups={member.groups}/>
165+
<TableCell>
166+
{member.user_id!==me.id&&canEditMembers&&(
167+
<MoreMenu>
168+
<MoreMenuTrigger>
169+
<ThreeDotsButton/>
170+
</MoreMenuTrigger>
171+
<MoreMenuContent>
172+
<MoreMenuItem
173+
danger
174+
onClick={()=>removeMember(member)}
175+
>
176+
Remove
177+
</MoreMenuItem>
178+
</MoreMenuContent>
179+
</MoreMenu>
180+
)}
181+
</TableCell>
182+
</TableRow>
183+
))
184+
) :(
185+
<TableRow>
186+
<TableCellcolSpan={999}>
187+
<Loader/>
177188
</TableCell>
178189
</TableRow>
179-
))}
190+
)}
180191
</TableBody>
181192
</Table>
182193
</PaginationContainer>

‎site/src/pages/TemplateSettingsPage/TemplatePermissionsPage/TemplatePermissionsPageView.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -258,6 +258,7 @@ export const TemplatePermissionsPageView: FC<
258258
<AvatarData
259259
avatar={
260260
<Avatar
261+
size="lg"
261262
fallback={group.display_name||group.name}
262263
src={group.avatar_url}
263264
/>

‎site/src/pages/UsersPage/UsersTable/UsersTableBody.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -87,9 +87,7 @@ export const UsersTableBody: FC<UsersTableBodyProps> = ({
8787
<TableLoaderSkeleton>
8888
<TableRowSkeleton>
8989
<TableCell>
90-
<divcss={{display:"flex",alignItems:"center",gap:8}}>
91-
<AvatarDataSkeleton/>
92-
</div>
90+
<AvatarDataSkeleton/>
9391
</TableCell>
9492

9593
<TableCell>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp