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

Commit906046c

Browse files
feat: Add minor settings improvements (#4626)
1 parent0d67dfc commit906046c

File tree

7 files changed

+264
-639
lines changed

7 files changed

+264
-639
lines changed

‎site/src/components/DeploySettingsLayout/Header.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import React from "react"
66

77
exportconstHeader:React.FC<{
88
title:string|JSX.Element
9-
description:string|JSX.Element
9+
description?:string|JSX.Element
1010
secondary?:boolean
1111
docsHref?:string
1212
}>=({ title, description, docsHref, secondary})=>{
@@ -18,7 +18,9 @@ export const Header: React.FC<{
1818
<h1className={`${styles.title}${secondary ?"secondary" :""}`}>
1919
{title}
2020
</h1>
21-
<spanclassName={styles.description}>{description}</span>
21+
{description&&(
22+
<spanclassName={styles.description}>{description}</span>
23+
)}
2224
</div>
2325

2426
{docsHref&&(

‎site/src/components/DeploySettingsLayout/Option.tsx

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import{makeStyles}from"@material-ui/core/styles"
22
importReact,{PropsWithChildren}from"react"
33
import{MONOSPACE_FONT_FAMILY}from"theme/constants"
4+
import{DisabledBadge,EnabledBadge}from"./Badges"
45

56
exportconstOptionName:React.FC<PropsWithChildren>=({ children})=>{
67
conststyles=useStyles()
@@ -14,27 +15,71 @@ export const OptionDescription: React.FC<PropsWithChildren> = ({
1415
return<spanclassName={styles.optionDescription}>{children}</span>
1516
}
1617

18+
constNotSet:React.FC=()=>{
19+
conststyles=useStyles()
20+
21+
return<spanclassName={styles.optionValue}>Not set</span>
22+
}
23+
1724
exportconstOptionValue:React.FC<PropsWithChildren>=({ children})=>{
1825
conststyles=useStyles()
26+
27+
if(typeofchildren==="boolean"){
28+
returnchildren ?<EnabledBadge/> :<DisabledBadge/>
29+
}
30+
31+
if(Array.isArray(children)){
32+
if(children.length===0){
33+
return<NotSet/>
34+
}
35+
36+
return(
37+
<ulclassName={styles.optionValueList}>
38+
{children.map((item)=>(
39+
<likey={item}className={styles.optionValue}>
40+
{item}
41+
</li>
42+
))}
43+
</ul>
44+
)
45+
}
46+
47+
if(children===""){
48+
return<NotSet/>
49+
}
50+
1951
return<spanclassName={styles.optionValue}>{children}</span>
2052
}
2153

2254
constuseStyles=makeStyles((theme)=>({
2355
optionName:{
2456
display:"block",
2557
},
58+
2659
optionDescription:{
2760
display:"block",
2861
color:theme.palette.text.secondary,
2962
fontSize:14,
3063
marginTop:theme.spacing(0.5),
3164
},
65+
3266
optionValue:{
3367
fontSize:14,
3468
fontFamily:MONOSPACE_FONT_FAMILY,
69+
overflowWrap:"anywhere",
70+
userSelect:"all",
3571

3672
"& ul":{
3773
padding:theme.spacing(2),
3874
},
3975
},
76+
77+
optionValueList:{
78+
margin:0,
79+
padding:0,
80+
listStylePosition:"inside",
81+
display:"flex",
82+
flexDirection:"column",
83+
gap:theme.spacing(0.5),
84+
},
4085
}))
Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import{makeStyles}from"@material-ui/core/styles"
2+
importTablefrom"@material-ui/core/Table"
3+
importTableBodyfrom"@material-ui/core/TableBody"
4+
importTableCellfrom"@material-ui/core/TableCell"
5+
importTableContainerfrom"@material-ui/core/TableContainer"
6+
importTableHeadfrom"@material-ui/core/TableHead"
7+
importTableRowfrom"@material-ui/core/TableRow"
8+
import{DeploymentFlags}from"api/typesGenerated"
9+
import{
10+
OptionDescription,
11+
OptionName,
12+
OptionValue,
13+
}from"components/DeploySettingsLayout/Option"
14+
importReactfrom"react"
15+
16+
constOptionsTable:React.FC<{options:Partial<DeploymentFlags>}>=({
17+
options,
18+
})=>{
19+
conststyles=useStyles()
20+
21+
return(
22+
<TableContainer>
23+
<TableclassName={styles.table}>
24+
<TableHead>
25+
<TableRow>
26+
<TableCellwidth="50%">Option</TableCell>
27+
<TableCellwidth="50%">Value</TableCell>
28+
</TableRow>
29+
</TableHead>
30+
<TableBody>
31+
{Object.values(options).map((option)=>{
32+
return(
33+
<TableRowkey={option.flag}>
34+
<TableCell>
35+
<OptionName>{option.name}</OptionName>
36+
<OptionDescription>{option.description}</OptionDescription>
37+
</TableCell>
38+
39+
<TableCell>
40+
<OptionValue>{option.value}</OptionValue>
41+
</TableCell>
42+
</TableRow>
43+
)
44+
})}
45+
</TableBody>
46+
</Table>
47+
</TableContainer>
48+
)
49+
}
50+
51+
constuseStyles=makeStyles((theme)=>({
52+
table:{
53+
"& td":{
54+
paddingTop:theme.spacing(3),
55+
paddingBottom:theme.spacing(3),
56+
},
57+
58+
"& td:last-child, & th:last-child":{
59+
paddingLeft:theme.spacing(4),
60+
},
61+
},
62+
}))
63+
64+
exportdefaultOptionsTable

0 commit comments

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