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

Commitc37c0e7

Browse files
refactor(site): simplify workspace topbar (#11370)
1 parent62a20e8 commitc37c0e7

File tree

2 files changed

+70
-56
lines changed

2 files changed

+70
-56
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
importtype{FC}from"react";
1+
importtype{FC,ReactNode}from"react";
22
import{useTheme}from"@emotion/react";
33
import{Avatar}from"components/Avatar/Avatar";
44
import{Stack}from"components/Stack/Stack";
55

66
exportinterfaceAvatarDataProps{
7-
title:string|JSX.Element;
8-
subtitle?:string;
7+
title:ReactNode;
8+
subtitle?:ReactNode;
99
src?:string;
1010
avatar?:React.ReactNode;
1111
}

‎site/src/pages/WorkspacePage/WorkspaceTopbar/WorkspaceTopbar.tsx‎

Lines changed: 67 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,8 @@ import {
1111
}from"components/FullPageLayout/Topbar";
1212
importTooltipfrom"@mui/material/Tooltip";
1313
importArrowBackOutlinedfrom"@mui/icons-material/ArrowBackOutlined";
14-
importPersonOutlineOutlinedfrom"@mui/icons-material/PersonOutlineOutlined";
15-
import{WorkspaceOutdatedTooltipContent}from"components/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip";
16-
import{Popover,PopoverTrigger}from"components/Popover/Popover";
1714
importScheduleOutlinedfrom"@mui/icons-material/ScheduleOutlined";
1815
import{WorkspaceStatusBadge}from"components/WorkspaceStatusBadge/WorkspaceStatusBadge";
19-
import{Pill}from"components/Pill/Pill";
2016
import{
2117
WorkspaceScheduleControls,
2218
shouldDisplayScheduleControls,
@@ -25,11 +21,15 @@ import { workspaceQuota } from "api/queries/workspaceQuota";
2521
import{useQuery}from"react-query";
2622
importMonetizationOnOutlinedfrom"@mui/icons-material/MonetizationOnOutlined";
2723
import{useTheme}from"@mui/material/styles";
28-
importInfoOutlinedfrom"@mui/icons-material/InfoOutlined";
2924
importLinkfrom"@mui/material/Link";
3025
import{useDashboard}from"components/Dashboard/DashboardProvider";
3126
import{displayDormantDeletion}from"utils/dormant";
3227
importDeleteOutlinefrom"@mui/icons-material/DeleteOutline";
28+
importPersonOutlinefrom"@mui/icons-material/PersonOutline";
29+
import{Popover,PopoverTrigger}from"components/Popover/Popover";
30+
import{HelpTooltipContent}from"components/HelpTooltip/HelpTooltip";
31+
import{AvatarData}from"components/AvatarData/AvatarData";
32+
import{Avatar}from"components/Avatar/Avatar";
3333

3434
exporttypeWorkspaceError=
3535
|"getBuildsError"
@@ -120,58 +120,72 @@ export const WorkspaceTopbar = (props: WorkspaceProps) => {
120120
}}
121121
>
122122
<TopbarData>
123-
<TopbarAvatarsrc={workspace.template_icon}/>
124-
<spancss={{fontWeight:500}}>{workspace.name}</span>
123+
<TopbarIcon>
124+
<PersonOutline/>
125+
</TopbarIcon>
126+
<Tooltiptitle="Owner">
127+
<span>{workspace.owner_name}</span>
128+
</Tooltip>
125129
<TopbarDivider/>
126-
<Link
127-
component={RouterLink}
128-
to={`/templates/${workspace.template_name}`}
129-
css={{color:"inherit"}}
130-
>
131-
{workspace.template_display_name??workspace.template_name}
132-
</Link>
130+
<Popovermode="hover">
131+
<PopoverTrigger>
132+
<span
133+
css={{
134+
display:"flex",
135+
alignItems:"center",
136+
gap:8,
137+
cursor:"default",
138+
padding:"4px 0",
139+
}}
140+
>
141+
<TopbarAvatarsrc={workspace.template_icon}/>
142+
<spancss={{fontWeight:500}}>{workspace.name}</span>
143+
</span>
144+
</PopoverTrigger>
133145

134-
{workspace.outdated ?(
135-
<Popovermode="hover">
136-
<PopoverTrigger>
137-
{/* Added to give some bottom space from the popover content */}
138-
<divcss={{padding:"4px 0",margin:"-4px 0"}}>
139-
<Pill
140-
icon={
141-
<InfoOutlined
142-
css={{
143-
width:"12px !important",
144-
height:"12px !important",
145-
color:theme.palette.warning.light,
146-
}}
147-
/>
148-
}
146+
<HelpTooltipContent
147+
anchorOrigin={{
148+
vertical:"bottom",
149+
horizontal:"center",
150+
}}
151+
transformOrigin={{
152+
vertical:"top",
153+
horizontal:"center",
154+
}}
155+
>
156+
<AvatarData
157+
title={
158+
<Link
159+
component={RouterLink}
160+
to={`/templates/${workspace.template_name}`}
161+
css={{color:"inherit"}}
162+
>
163+
{workspace.template_display_name.length>0
164+
?workspace.template_display_name
165+
:workspace.template_name}
166+
</Link>
167+
}
168+
subtitle={
169+
<Link
170+
component={RouterLink}
171+
to={`/templates/${workspace.template_name}/versions/${workspace.latest_build.template_version_name}`}
172+
css={{color:"inherit"}}
149173
>
150-
<spancss={{color:theme.palette.warning.light}}>
151-
{workspace.latest_build.template_version_name}
152-
</span>
153-
</Pill>
154-
</div>
155-
</PopoverTrigger>
156-
<WorkspaceOutdatedTooltipContent
157-
templateName={workspace.template_name}
158-
latestVersionId={workspace.template_active_version_id}
159-
onUpdateVersion={handleUpdate}
160-
ariaLabel="update version"
174+
{workspace.latest_build.template_version_name}
175+
</Link>
176+
}
177+
avatar={
178+
workspace.template_icon!==""&&(
179+
<Avatar
180+
src={workspace.template_icon}
181+
variant="square"
182+
fitImage
183+
/>
184+
)
185+
}
161186
/>
162-
</Popover>
163-
) :(
164-
<Pill>{workspace.latest_build.template_version_name}</Pill>
165-
)}
166-
</TopbarData>
167-
168-
<TopbarData>
169-
<Tooltiptitle="Owner">
170-
<TopbarIcon>
171-
<PersonOutlineOutlinedaria-label="Owner"/>
172-
</TopbarIcon>
173-
</Tooltip>
174-
<span>{workspace.owner_name}</span>
187+
</HelpTooltipContent>
188+
</Popover>
175189
</TopbarData>
176190

177191
{shouldDisplayDormantData&&(

0 commit comments

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