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

Commit0507530

Browse files
Kira-Pilotkylecarbs
authored andcommitted
feat: flexbox updates on workspace page (#1963)
* feat: flexbox work on workspace pageresolves 1910* fixing cancel text* chromatic fixes*resolves#1953no overflox text on smaller screens
1 parentdeae247 commit0507530

File tree

4 files changed

+60
-53
lines changed

4 files changed

+60
-53
lines changed

‎site/src/components/Resources/Resources.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,8 @@ export const Resources: FC<ResourcesProps> = ({ resources, getResourcesError, wo
4141
<TableHeaderRow>
4242
<TableCell>{Language.resourceLabel}</TableCell>
4343
<TableCellclassName={styles.agentColumn}>{Language.agentLabel}</TableCell>
44-
<TableCell>{Language.statusLabel}</TableCell>
4544
<TableCell>{Language.accessLabel}</TableCell>
45+
<TableCell>{Language.statusLabel}</TableCell>
4646
</TableHeaderRow>
4747
</TableHead>
4848
<TableBody>
@@ -82,11 +82,6 @@ export const Resources: FC<ResourcesProps> = ({ resources, getResourcesError, wo
8282
{agent.name}
8383
<spanclassName={styles.operatingSystem}>{agent.operating_system}</span>
8484
</TableCell>
85-
<TableCell>
86-
<spanstyle={{color:getDisplayAgentStatus(theme,agent).color}}>
87-
{getDisplayAgentStatus(theme,agent).status}
88-
</span>
89-
</TableCell>
9085
<TableCell>
9186
{agent.status==="connected"&&(
9287
<TerminalLink
@@ -97,6 +92,11 @@ export const Resources: FC<ResourcesProps> = ({ resources, getResourcesError, wo
9792
/>
9893
)}
9994
</TableCell>
95+
<TableCell>
96+
<spanstyle={{color:getDisplayAgentStatus(theme,agent).color}}>
97+
{getDisplayAgentStatus(theme,agent).status}
98+
</span>
99+
</TableCell>
100100
</TableRow>
101101
)
102102
})

‎site/src/components/Workspace/Workspace.tsx

Lines changed: 33 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -42,43 +42,43 @@ export const Workspace: FC<WorkspaceProps> = ({
4242

4343
return(
4444
<divclassName={styles.root}>
45-
<divclassName={styles.header}>
46-
<div>
47-
<Typographyvariant="h4"className={styles.title}>
48-
{workspace.name}
49-
</Typography>
45+
<Stackdirection="row"spacing={3}>
46+
<Stackdirection="column"className={styles.firstColumnSpacer}spacing={3}>
47+
<divclassName={styles.header}>
48+
<div>
49+
<Typographyvariant="h4"className={styles.title}>
50+
{workspace.name}
51+
</Typography>
5052

51-
<Typographycolor="textSecondary"className={styles.subtitle}>
52-
{workspace.owner_name}
53-
</Typography>
54-
</div>
53+
<Typographycolor="textSecondary"className={styles.subtitle}>
54+
{workspace.owner_name}
55+
</Typography>
56+
</div>
57+
<WorkspaceActions
58+
workspace={workspace}
59+
handleStart={handleStart}
60+
handleStop={handleStop}
61+
handleDelete={handleDelete}
62+
handleUpdate={handleUpdate}
63+
handleCancel={handleCancel}
64+
/>
65+
</div>
66+
</Stack>
5567

56-
<divclassName={styles.headerActions}>
57-
<WorkspaceActions
58-
workspace={workspace}
59-
handleStart={handleStart}
60-
handleStop={handleStop}
61-
handleDelete={handleDelete}
62-
handleUpdate={handleUpdate}
63-
handleCancel={handleCancel}
64-
/>
65-
</div>
66-
</div>
68+
<Stackdirection="column"className={styles.secondColumnSpacer}spacing={3}></Stack>
69+
</Stack>
6770

68-
<Stackdirection="row"spacing={3}className={styles.layout}>
69-
<Stackspacing={3}className={styles.main}>
71+
<Stackdirection="row"spacing={3}>
72+
<Stackdirection="column"className={styles.firstColumnSpacer}spacing={3}>
7073
<WorkspaceScheduleBannerworkspace={workspace}/>
71-
7274
<WorkspaceStatsworkspace={workspace}/>
73-
7475
<Resourcesresources={resources}getResourcesError={getResourcesError}workspace={workspace}/>
75-
7676
<WorkspaceSectiontitle="Timeline"contentsProps={{className:styles.timelineContents}}>
7777
<BuildsTablebuilds={builds}className={styles.timelineTable}/>
7878
</WorkspaceSection>
7979
</Stack>
8080

81-
<Stackspacing={3}className={styles.sidebar}>
81+
<Stackdirection="column"className={styles.secondColumnSpacer}spacing={3}>
8282
<WorkspaceScheduleworkspace={workspace}/>
8383
</Stack>
8484
</Stack>
@@ -92,15 +92,19 @@ export const useStyles = makeStyles((theme) => {
9292
display:"flex",
9393
flexDirection:"column",
9494
},
95+
firstColumnSpacer:{
96+
flex:2,
97+
},
98+
secondColumnSpacer:{
99+
flex:"0 0 300px",
100+
},
95101
header:{
96102
paddingTop:theme.spacing(5),
97103
paddingBottom:theme.spacing(5),
98104
fontFamily:MONOSPACE_FONT_FAMILY,
99105
display:"flex",
100106
alignItems:"center",
101-
},
102-
headerActions:{
103-
marginLeft:"auto",
107+
justifyContent:"space-between",
104108
},
105109
title:{
106110
fontWeight:600,

‎site/src/components/WorkspaceActions/WorkspaceActions.tsx

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,14 @@ import { Stack } from "../Stack/Stack"
1212
import{WorkspaceActionButton}from"../WorkspaceActionButton/WorkspaceActionButton"
1313

1414
exportconstLanguage={
15-
stop:"Stop workspace",
16-
stopping:"Stopping workspace",
17-
start:"Start workspace",
18-
starting:"Starting workspace",
19-
delete:"Delete workspace",
20-
deleting:"Deleting workspace",
15+
stop:"Stop",
16+
stopping:"Stopping",
17+
start:"Start",
18+
starting:"Starting",
19+
delete:"Delete",
20+
deleting:"Deleting",
2121
cancel:"Cancel action",
22-
update:"Update workspace",
22+
update:"Update",
2323
}
2424

2525
/**
@@ -92,7 +92,7 @@ export const WorkspaceActions: FC<WorkspaceActionsProps> = ({
9292
)}
9393
{canCancelJobs(workspaceStatus)&&(
9494
<WorkspaceActionButton
95-
className={styles.actionButton}
95+
className={styles.cancelActionButton}
9696
icon={<CancelIcon/>}
9797
onClick={handleCancel}
9898
label={Language.cancel}
@@ -111,6 +111,9 @@ const useStyles = makeStyles((theme) => ({
111111
actionButton:{
112112
// Set fixed width for the action buttons so they will not change the size
113113
// during the transitions
114+
width:theme.spacing(16),
115+
},
116+
cancelActionButton:{
114117
width:theme.spacing(27),
115118
},
116119
}))

‎site/src/components/WorkspaceStats/WorkspaceStats.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -39,15 +39,6 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({ workspace }) => {
3939
</Link>
4040
</div>
4141
<divclassName={styles.statsDivider}/>
42-
<divclassName={styles.statItem}>
43-
<spanclassName={styles.statsLabel}>{Language.statusLabel}</span>
44-
<spanclassName={styles.statsValue}>
45-
<spanstyle={{color:status.color}}role="status">
46-
{status.status}
47-
</span>
48-
</span>
49-
</div>
50-
<divclassName={styles.statsDivider}/>
5142
<divclassName={styles.statItem}>
5243
<spanclassName={styles.statsLabel}>{Language.versionLabel}</span>
5344
<spanclassName={styles.statsValue}>
@@ -65,6 +56,15 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({ workspace }) => {
6556
{dayjs().to(dayjs(workspace.latest_build.created_at))}
6657
</span>
6758
</div>
59+
<divclassName={styles.statsDivider}/>
60+
<divclassName={styles.statItem}>
61+
<spanclassName={styles.statsLabel}>{Language.statusLabel}</span>
62+
<spanclassName={styles.statsValue}>
63+
<spanstyle={{color:status.color}}role="status">
64+
{status.status}
65+
</span>
66+
</span>
67+
</div>
6868
</div>
6969
)
7070
}
@@ -83,7 +83,7 @@ const useStyles = makeStyles((theme) => ({
8383
},
8484

8585
statItem:{
86-
minWidth:theme.spacing(20),
86+
minWidth:"20%",
8787
padding:theme.spacing(2),
8888
paddingTop:theme.spacing(1.75),
8989
},

0 commit comments

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