Skip to content

Commit a540db2

Browse files
javizqhjavizqh
committed
Improved modals
1 parent c922cd2 commit a540db2

File tree

15 files changed

+356
-353
lines changed

15 files changed

+356
-353
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "jderobot-ide-interface",
3-
"version": "0.1.33",
3+
"version": "0.1.34",
44
"main": "dist/main.js",
55
"typings": "dist/index.d.ts",
66
"files": [

‎src/components/Modals/DeleteModal.stories.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import DeleteModal from "./DeleteModal";
3+
4+
type Story = StoryObj<typeof DeleteModal>;
5+
6+
const meta: Meta<typeof DeleteModal> = {
7+
component: DeleteModal,
8+
};
9+
10+
export default meta;
11+
12+
export const Main: Story = {
13+
render: (args) => (
14+
<div
15+
style={{
16+
width: "100vw",
17+
height: "100vh",
18+
}}
19+
>
20+
<DeleteModal
21+
onSubmit={() => {}}
22+
isOpen
23+
onClose={() => {}}
24+
selectedEntry={{
25+
name: "a",
26+
is_dir: false,
27+
path: "a",
28+
group: "",
29+
access: false,
30+
files: [],
31+
}}
32+
/>
33+
</div>
34+
),
35+
};

‎src/components/Modals/DeleteModal.tsx‎

Lines changed: 26 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
1-
import { useEffect } from "react";
2-
import Modal, { ModalTitlebar } from "./Modal";
1+
import Modal, { ModalRow, ModalTitlebar } from "./Modal";
32
import { Entry } from "Types";
4-
import {
5-
StyledModalButtonDelete,
6-
StyledModalButtonRow,
7-
StyledModalRow,
8-
} from "./Modal.styles";
3+
import { StyledModalButtonDelete } from "./Modal.styles";
94
import { useTheme } from "Utils";
105
import styled from "styled-components";
116

@@ -26,14 +21,6 @@ const DeleteModal = ({
2621
}) => {
2722
const theme = useTheme();
2823

29-
useEffect(() => {
30-
// if (isOpen && focusInputRef.current) {
31-
// setTimeout(() => {
32-
// focusInputRef.current.focus();
33-
// }, 0);
34-
// }
35-
}, [isOpen]);
36-
3724
const handleSubmit = (event: any) => {
3825
event.preventDefault();
3926
onSubmit();
@@ -49,45 +36,34 @@ const DeleteModal = ({
4936
return (
5037
<StyledModal
5138
id="delete-modal"
52-
hasCloseBtn={true}
5339
isOpen={isOpen}
5440
onClose={onClose}
41+
onSubmit={handleSubmit}
42+
onReset={handleCancel}
5543
>
56-
<form onSubmit={handleSubmit} onReset={handleCancel}>
57-
<ModalTitlebar
58-
title="Delete confirmation"
59-
htmlFor="delete-modal"
60-
hasClose
61-
handleClose={() => {
62-
handleCancel(undefined);
63-
}}
64-
/>
65-
<StyledModalRow
66-
color={theme.palette.text}
67-
buttonColor={theme.palette.primary}
68-
roundness={theme.roundness}
69-
>
70-
<div>
71-
<label> Do you want to delete {selectedEntry.name} ?</label>
72-
</div>
73-
</StyledModalRow>
74-
<StyledModalButtonRow
75-
color={theme.palette.text}
76-
buttonColor={theme.palette.primary}
77-
roundness={theme.roundness}
44+
<ModalTitlebar
45+
title="Delete confirmation"
46+
htmlFor="delete-modal"
47+
hasClose
48+
handleClose={() => {
49+
handleCancel(undefined);
50+
}}
51+
/>
52+
<ModalRow>
53+
<label> Do you want to delete {selectedEntry.name} ?</label>
54+
</ModalRow>
55+
<ModalRow type="buttons">
56+
<button type="reset" id="cancel-delete-selected">
57+
Cancel
58+
</button>
59+
<StyledModalButtonDelete
60+
bgColor={theme.palette.button.error}
61+
type="submit"
62+
id="delete-selected-button"
7863
>
79-
<button type="reset" id="cancel-delete-selected">
80-
Cancel
81-
</button>
82-
<StyledModalButtonDelete
83-
bgColor={theme.palette.primary}
84-
type="submit"
85-
id="delete-selected-button"
86-
>
87-
Delete
88-
</StyledModalButtonDelete>
89-
</StyledModalButtonRow>
90-
</form>
64+
Delete
65+
</StyledModalButtonDelete>
66+
</ModalRow>
9167
</StyledModal>
9268
);
9369
};

‎src/components/Modals/ErrorModal.tsx‎

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { useError, useTheme } from "Utils";
22
import { ErrorType } from "Types";
3-
import { StyledModalRow } from "./Modal.styles";
43
import {
54
StyledModalError,
65
StyledModalErrorRow,
76
StyledModalErrorTitlebar,
87
} from "./ErrorModal.styles";
8+
import { ModalRow } from "./Modal";
99

1010
export type ErrorVariant = "error" | "warning" | "info";
1111

@@ -46,7 +46,6 @@ const ErrorModal = () => {
4646
return (
4747
<StyledModalError
4848
id={`${type_str}-modal`}
49-
hasCloseBtn={true}
5049
isOpen={isOpen}
5150
onClose={onClose}
5251
variant={type_str}
@@ -64,11 +63,7 @@ const ErrorModal = () => {
6463
htmlFor="actionName"
6564
variant={type_str}
6665
/>
67-
<StyledModalRow
68-
color={theme.palette.text}
69-
buttonColor={theme.palette.primary}
70-
roundness={theme.roundness}
71-
>
66+
<ModalRow>
7267
<StyledModalErrorRow
7368
roundness={theme.roundness}
7469
variant={type_str}
@@ -84,12 +79,8 @@ const ErrorModal = () => {
8479
>
8580
<label id="errorMsg">{msg}</label>
8681
</StyledModalErrorRow>
87-
</StyledModalRow>
88-
<StyledModalRow
89-
color={theme.palette.text}
90-
buttonColor={theme.palette.primary}
91-
roundness={theme.roundness}
92-
>
82+
</ModalRow>
83+
<ModalRow>
9384
<StyledModalErrorRow
9485
roundness={theme.roundness}
9586
variant={type_str}
@@ -105,7 +96,7 @@ const ErrorModal = () => {
10596
>
10697
<div onClick={() => onClose()}>Close</div>
10798
</StyledModalErrorRow>
108-
</StyledModalRow>
99+
</ModalRow>
109100
</StyledModalError>
110101
);
111102
};

‎src/components/Modals/Modal.styles.ts‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,13 @@ export const StyledModalContent = styled.div`
3333
flex-direction: column;
3434
gap: 1rem;
3535
flex-grow: 1;
36+
37+
& form {
38+
display: flex;
39+
flex-direction: column;
40+
gap: 1rem;
41+
flex-grow: 1;
42+
}
3643
`;
3744

3845
interface StyledModalTitlebarProps {
@@ -47,6 +54,7 @@ export const StyledModalTitlebar = styled.div<StyledModalTitlebarProps>`
4754
grid-template-columns: 1fr auto 1fr;
4855
grid-column-gap: 5px;
4956
justify-items: center;
57+
align-items: center;
5058
5159
& label {
5260
color: ${(p) => p.color ?? primaryColor};
@@ -58,8 +66,8 @@ export const StyledModalTitlebar = styled.div<StyledModalTitlebarProps>`
5866
5967
& svg {
6068
height: 100%;
61-
width: 24px;
62-
height: 24px;
69+
width: 16px;
70+
height: 16px;
6371
padding: 2px;
6472
border-radius: ${(p) => p.roundness ?? 1}px;
6573
background-color: transparent;
@@ -99,6 +107,10 @@ interface StyledModalRowProps {
99107
}
100108

101109
export const StyledModalRow = styled.div<StyledModalRowProps>`
110+
display: flex;
111+
flex-direction: column;
112+
align-items: center;
113+
102114
& select,
103115
button {
104116
width: 100%;
@@ -110,7 +122,6 @@ export const StyledModalRow = styled.div<StyledModalRowProps>`
110122
111123
& button {
112124
background-color: ${(p) => p.buttonColor ?? primaryColor};
113-
margin-bottom: 10px;
114125
border-radius: ${(p) => p.roundness ?? 1}px;
115126
height: 2em;
116127
font-size: medium;
@@ -133,12 +144,12 @@ interface StyledModalButtonRowProps {
133144
}
134145

135146
export const StyledModalButtonRow = styled.div<StyledModalButtonRowProps>`
136-
margin-top: 30px;
137147
display: flex;
138148
flex-direction: row;
139149
justify-content: space-evenly;
140150
align-items: center;
141151
gap: 10px;
152+
width: 100%;
142153
143154
& button {
144155
width: 100px;
@@ -148,7 +159,6 @@ export const StyledModalButtonRow = styled.div<StyledModalButtonRowProps>`
148159
font-size: medium;
149160
background-color: ${(p) => p.buttonColor ?? primaryColor};
150161
opacity: 0.6;
151-
margin-bottom: 10px;
152162
border-radius: ${(p) => p.roundness ?? 1}px;
153163
height: 2em;
154164
font-size: medium;
@@ -164,16 +174,11 @@ interface StyledModalButtonDeleteProps {
164174
}
165175

166176
export const StyledModalButtonDelete = styled.button<StyledModalButtonDeleteProps>`
167-
opacity: 0.6;
168-
background-color: ${(p) => p.bgColor ?? primaryColor};
169-
&:hover:enabled {
170-
opacity: 1;
171-
}
177+
background-color: ${(p) => p.bgColor ?? primaryColor} !important;
172178
`;
173179

174180
export const StyledModalInputRowContainer = styled.div`
175181
width: 100%;
176-
margin: 10px 0px;
177182
display: flex;
178183
flex-direction: row;
179184
justify-content: space-evenly;

0 commit comments

Comments
 (0)