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

Commite993951

Browse files
BrunoQuaresmapull[bot]
authored andcommitted
refactor(site): Redesign dialogs (#6237)
1 parentcec7a17 commite993951

File tree

7 files changed

+70
-178
lines changed

7 files changed

+70
-178
lines changed

‎site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.stories.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import{action}from"@storybook/addon-actions"
12
import{ComponentMeta,Story}from"@storybook/react"
23
import{ConfirmDialog,ConfirmDialogProps}from"./ConfirmDialog"
34

@@ -7,9 +8,11 @@ export default {
78
argTypes:{
89
onClose:{
910
action:"onClose",
11+
defaultValue:action("onClose"),
1012
},
1113
onConfirm:{
1214
action:"onConfirm",
15+
defaultValue:action("onConfirm"),
1316
},
1417
open:{
1518
control:"boolean",

‎site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.tsx

Lines changed: 22 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
importDialogActionsfrom"@material-ui/core/DialogActions"
2-
import{alpha,makeStyles}from"@material-ui/core/styles"
3-
importTypographyfrom"@material-ui/core/Typography"
2+
import{makeStyles}from"@material-ui/core/styles"
43
import{ReactNode,FC,PropsWithChildren}from"react"
54
import{
65
Dialog,
@@ -61,25 +60,35 @@ const useStyles = makeStyles((theme) => ({
6160
"& .MuiPaper-root":{
6261
background:theme.palette.background.paper,
6362
border:`1px solid${theme.palette.divider}`,
63+
width:"100%",
64+
maxWidth:theme.spacing(55),
6465
},
6566
"& .MuiDialogActions-spacing":{
66-
padding:`0${theme.spacing(3.75)}px${theme.spacing(3.75)}px`,
67+
padding:`0${theme.spacing(5)}px${theme.spacing(5)}px`,
6768
},
6869
},
6970
dialogContent:{
7071
color:theme.palette.text.secondary,
71-
padding:theme.spacing(6),
72-
textAlign:"center",
72+
padding:theme.spacing(5),
7373
},
74-
titleText:{
75-
marginBottom:theme.spacing(3),
74+
dialogTitle:{
75+
margin:0,
76+
marginBottom:theme.spacing(2),
77+
color:theme.palette.text.primary,
78+
fontWeight:400,
79+
fontSize:theme.spacing(2.5),
7680
},
77-
description:{
78-
color:alpha(theme.palette.text.secondary,0.75),
81+
dialogDescription:{
82+
color:theme.palette.text.secondary,
7983
lineHeight:"160%",
84+
fontSize:16,
8085

8186
"& strong":{
82-
color:alpha(theme.palette.text.secondary,0.95),
87+
color:theme.palette.text.primary,
88+
},
89+
90+
"& p":{
91+
margin:theme.spacing(1,0),
8392
},
8493
},
8594
}))
@@ -110,25 +119,11 @@ export const ConfirmDialog: FC<PropsWithChildren<ConfirmDialogProps>> = ({
110119
}
111120

112121
return(
113-
<Dialog
114-
className={styles.dialogWrapper}
115-
maxWidth="sm"
116-
onClose={onClose}
117-
open={open}
118-
>
122+
<DialogclassName={styles.dialogWrapper}onClose={onClose}open={open}>
119123
<divclassName={styles.dialogContent}>
120-
<TypographyclassName={styles.titleText}variant="h3">
121-
{title}
122-
</Typography>
123-
124+
<h3className={styles.dialogTitle}>{title}</h3>
124125
{description&&(
125-
<Typography
126-
component={typeofdescription==="string" ?"p" :"div"}
127-
className={styles.description}
128-
variant="body2"
129-
>
130-
{description}
131-
</Typography>
126+
<divclassName={styles.dialogDescription}>{description}</div>
132127
)}
133128
</div>
134129

‎site/src/components/Dialogs/DeleteDialog/DeleteDialog.stories.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import{action}from"@storybook/addon-actions"
12
import{ComponentMeta,Story}from"@storybook/react"
23
import{DeleteDialog,DeleteDialogProps}from"./DeleteDialog"
34

@@ -7,9 +8,11 @@ export default {
78
argTypes:{
89
onCancel:{
910
action:"onClose",
11+
defaultValue:action("onClose"),
1012
},
1113
onConfirm:{
1214
action:"onConfirm",
15+
defaultValue:action("onConfirm"),
1316
},
1417
open:{
1518
control:"boolean",

‎site/src/components/Dialogs/DeleteDialog/DeleteDialog.tsx

Lines changed: 26 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
1-
importFormHelperTextfrom"@material-ui/core/FormHelperText"
21
importmakeStylesfrom"@material-ui/core/styles/makeStyles"
32
importTextFieldfrom"@material-ui/core/TextField"
4-
importTypographyfrom"@material-ui/core/Typography"
53
import{Maybe}from"components/Conditionals/Maybe"
6-
import{Stack}from"components/Stack/Stack"
74
import{ChangeEvent,useState,PropsWithChildren,FC}from"react"
85
import{useTranslation}from"react-i18next"
96
import{ConfirmDialog}from"../ConfirmDialog/ConfirmDialog"
@@ -34,30 +31,33 @@ export const DeleteDialog: FC<PropsWithChildren<DeleteDialogProps>> = ({
3431
consthandleChange=(event:ChangeEvent<HTMLInputElement>)=>{
3532
setNameValue(event.target.value)
3633
}
34+
consthasError=nameValue.length>0&&!confirmed
3735

3836
constcontent=(
3937
<>
40-
<Typography>{t("deleteDialog.intro",{ entity})}</Typography>
38+
<p>{t("deleteDialog.intro",{ entity})}</p>
4139
<Maybecondition={info!==undefined}>
42-
<TypographyclassName={styles.warning}>{info}</Typography>
40+
<pclassName={styles.warning}>{info}</p>
4341
</Maybe>
44-
<Typography>{t("deleteDialog.confirm",{ entity})}</Typography>
45-
<Stackspacing={1}>
46-
<TextField
47-
name="confirmation"
48-
autoComplete="off"
49-
id="confirmation"
50-
placeholder={name}
51-
value={nameValue}
52-
onChange={handleChange}
53-
label={t("deleteDialog.confirmLabel",{ entity})}
54-
/>
55-
<Maybecondition={nameValue.length>0&&!confirmed}>
56-
<FormHelperTexterror>
57-
{t("deleteDialog.incorrectName",{ entity})}
58-
</FormHelperText>
59-
</Maybe>
60-
</Stack>
42+
<p>{t("deleteDialog.confirm",{ entity})}</p>
43+
44+
<TextField
45+
fullWidth
46+
InputLabelProps={{
47+
shrink:true,
48+
}}
49+
autoFocus
50+
className={styles.textField}
51+
name="confirmation"
52+
autoComplete="off"
53+
id="confirmation"
54+
placeholder={name}
55+
value={nameValue}
56+
onChange={handleChange}
57+
label={t("deleteDialog.confirmLabel",{ entity})}
58+
error={hasError}
59+
helperText={hasError&&t("deleteDialog.incorrectName",{ entity})}
60+
/>
6161
</>
6262
)
6363

@@ -80,4 +80,8 @@ const useStyles = makeStyles((theme) => ({
8080
warning:{
8181
color:theme.palette.warning.light,
8282
},
83+
84+
textField:{
85+
marginTop:theme.spacing(3),
86+
},
8387
}))

‎site/src/components/Dialogs/Dialog.tsx

Lines changed: 9 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
importMuiDialog,{
22
DialogPropsasMuiDialogProps,
33
}from"@material-ui/core/Dialog"
4-
import{alpha,darken,lighten,makeStyles}from"@material-ui/core/styles"
4+
import{alpha,darken,makeStyles}from"@material-ui/core/styles"
55
import*asReactfrom"react"
6+
import{colors}from"theme/colors"
67
import{combineClasses}from"../../util/combineClasses"
78
import{
89
LoadingButton,
@@ -42,7 +43,6 @@ export const DialogActionButtons: React.FC<DialogActionButtonsProps> = ({
4243
cancelText="Cancel",
4344
confirmText="Confirm",
4445
confirmLoading=false,
45-
confirmDialog,
4646
disabled=false,
4747
onCancel,
4848
onConfirm,
@@ -54,29 +54,24 @@ export const DialogActionButtons: React.FC<DialogActionButtonsProps> = ({
5454
<>
5555
{onCancel&&(
5656
<LoadingButton
57-
className={combineClasses({
58-
[styles.dialogButton]:true,
59-
[styles.cancelButton]:true,
60-
[styles.confirmDialogCancelButton]:confirmDialog,
61-
})}
6257
disabled={confirmLoading}
6358
onClick={onCancel}
6459
variant="outlined"
60+
fullWidth
6561
>
6662
{cancelText}
6763
</LoadingButton>
6864
)}
6965
{onConfirm&&(
7066
<LoadingButton
67+
fullWidth
7168
variant="contained"
7269
onClick={onConfirm}
7370
color={typeToColor(type)}
7471
loading={confirmLoading}
7572
disabled={disabled}
7673
type="submit"
7774
className={combineClasses({
78-
[styles.dialogButton]:true,
79-
[styles.submitButton]:true,
8075
[styles.errorButton]:type==="delete",
8176
[styles.successButton]:type==="success",
8277
})}
@@ -88,119 +83,17 @@ export const DialogActionButtons: React.FC<DialogActionButtonsProps> = ({
8883
)
8984
}
9085

91-
interfaceStyleProps{
92-
type:ConfirmDialogType
93-
}
94-
9586
constuseButtonStyles=makeStyles((theme)=>({
96-
dialogButton:{
97-
borderRadius:theme.shape.borderRadius,
98-
fontSize:theme.typography.h6.fontSize,
99-
fontWeight:theme.typography.h5.fontWeight,
100-
padding:`${theme.spacing(0.75)}px${theme.spacing(2)}px`,
101-
width:"100%",
102-
boxShadow:"none",
103-
},
104-
cancelButton:{
105-
background:alpha(theme.palette.primary.main,0.1),
106-
color:theme.palette.primary.main,
107-
108-
"&:hover":{
109-
background:alpha(theme.palette.primary.main,0.3),
110-
},
111-
},
112-
confirmDialogCancelButton:(props:StyleProps)=>{
113-
constcolor=
114-
props.type==="info"
115-
?theme.palette.primary.contrastText
116-
:theme.palette.error.contrastText
117-
return{
118-
background:alpha(color,0.15),
119-
color,
120-
121-
"&:hover":{
122-
background:alpha(color,0.3),
123-
},
124-
125-
"&.Mui-disabled":{
126-
background:alpha(color,0.15),
127-
color:alpha(color,0.5),
128-
},
129-
}
130-
},
131-
submitButton:{
132-
// Override disabled to keep background color, change loading spinner to contrast color
133-
"&.Mui-disabled":{
134-
"&.MuiButton-containedPrimary":{
135-
background:theme.palette.primary.dark,
136-
137-
"& .MuiCircularProgress-root":{
138-
color:theme.palette.primary.contrastText,
139-
},
140-
},
141-
142-
"&.CdrButton-error.MuiButton-contained":{
143-
background:darken(theme.palette.error.main,0.3),
144-
145-
"& .MuiCircularProgress-root":{
146-
color:theme.palette.error.contrastText,
147-
},
148-
},
149-
},
150-
},
15187
errorButton:{
15288
"&.MuiButton-contained":{
153-
backgroundColor:lighten(theme.palette.error.dark,0.15),
154-
color:theme.palette.error.contrastText,
155-
"&:hover":{
156-
backgroundColor:theme.palette.error.dark,
157-
"@media (hover: none)":{
158-
backgroundColor:"transparent",
159-
},
160-
"&.Mui-disabled":{
161-
backgroundColor:"transparent",
162-
},
163-
},
164-
"&.Mui-disabled":{
165-
backgroundColor:theme.palette.action.disabledBackground,
166-
color:alpha(theme.palette.text.disabled,0.5),
167-
},
168-
},
169-
170-
"&.MuiButton-outlined":{
171-
color:theme.palette.error.main,
172-
borderColor:theme.palette.error.main,
173-
"&:hover":{
174-
backgroundColor:alpha(
175-
theme.palette.error.main,
176-
theme.palette.action.hoverOpacity,
177-
),
178-
"@media (hover: none)":{
179-
backgroundColor:"transparent",
180-
},
181-
"&.Mui-disabled":{
182-
backgroundColor:"transparent",
183-
},
184-
},
185-
"&.Mui-disabled":{
186-
color:alpha(theme.palette.text.disabled,0.5),
187-
borderColor:theme.palette.action.disabled,
188-
},
189-
},
190-
191-
"&.MuiButton-text":{
192-
color:theme.palette.error.main,
89+
backgroundColor:colors.red[10],
90+
borderColor:colors.red[9],
91+
color:theme.palette.text.primary,
19392
"&:hover":{
194-
backgroundColor:alpha(
195-
theme.palette.error.main,
196-
theme.palette.action.hoverOpacity,
197-
),
198-
"@media (hover: none)":{
199-
backgroundColor:"transparent",
200-
},
93+
backgroundColor:colors.red[9],
20194
},
20295
"&.Mui-disabled":{
203-
color:alpha(theme.palette.text.disabled,0.5),
96+
opacity:0.5,
20497
},
20598
},
20699
},

‎site/src/components/Dialogs/ResetPasswordDialog/ResetPasswordDialog.stories.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import{action}from"@storybook/addon-actions"
12
import{Story}from"@storybook/react"
23
import{MockUser}from"../../../testHelpers/renderHelpers"
34
import{
@@ -9,8 +10,8 @@ export default {
910
title:"components/Dialogs/ResetPasswordDialog",
1011
component:ResetPasswordDialog,
1112
argTypes:{
12-
onClose:{action:"onClose"},
13-
onConfirm:{action:"onConfirm"},
13+
onClose:{action:"onClose",defaultValue:action("onClose")},
14+
onConfirm:{action:"onConfirm",defaultValue:action("onConfirm")},
1415
},
1516
}
1617

0 commit comments

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