Skip to content

Commit 2ccc007

Browse files
javizqhjavizqh
committed
Fix error modals
1 parent 9adf509 commit 2ccc007

File tree

6 files changed

+158
-60
lines changed

6 files changed

+158
-60
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.42",
3+
"version": "0.1.43",
44
"main": "dist/main.js",
55
"typings": "dist/index.d.ts",
66
"files": [

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import NewFileModal from "./NewFileModal";
3+
import Modal, { ModalEditableList, ModalRow, ModalTitlebar } from "./Modal";
4+
import ErrorModal from "./ErrorModal";
5+
6+
type Story = StoryObj<typeof ErrorModal>;
7+
8+
const meta: Meta<typeof ErrorModal> = {
9+
component: ErrorModal,
10+
};
11+
12+
export default meta;
13+
14+
export const Main: Story = {
15+
render: (args) => (
16+
<div
17+
style={{
18+
width: "100vw",
19+
height: "100vh",
20+
}}
21+
>
22+
<ErrorModal />
23+
</div>
24+
),
25+
};

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

Lines changed: 42 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import styled from "styled-components";
22
import { ErrorVariant } from "./ErrorModal";
33
import Modal, { ModalTitlebar } from "./Modal";
4+
import { StyledModalTitlebar } from "./Modal.styles";
45

56
const primaryColor = "#666";
67

@@ -98,11 +99,15 @@ interface StyledModalErrorProps {
9899
infoBorder?: string;
99100
warning?: string;
100101
warningBorder?: string;
102+
bgColor?: string;
103+
borderColor?: string;
104+
roundness?: number;
101105
}
102106

103107
const handleVariantModal = (p: StyledModalErrorProps) => {
104108
switch (p.variant) {
105109
case "error":
110+
console.log("Error");
106111
return `
107112
background-color: ${p.error ?? primaryColor} !important;
108113
border-color: ${p.errorBorder ?? primaryColor} !important;
@@ -120,41 +125,64 @@ const handleVariantModal = (p: StyledModalErrorProps) => {
120125
}
121126
};
122127

123-
export const StyledModalError = styled(Modal)<StyledModalErrorProps>`
128+
export const StyledModalError = styled.dialog<StyledModalErrorProps>`
129+
width: 500px;
130+
padding: 1rem 1.5rem 1.5rem 1.5rem;
131+
position: relative;
132+
133+
border: 2px solid;
134+
border-radius: ${(p) => p.roundness ?? 1}px;
135+
box-shadow: hsl(0 0% 0% / 10%) 0 0 0.5rem 0.25rem;
136+
137+
&::backdrop {
138+
background: hsla(0, 0%, 0%, 0.5);
139+
}
140+
141+
&:focus {
142+
outline: none;
143+
}
144+
124145
${handleVariantModal}
125146
`;
126147

127148
interface StyledModalErrorTitlebarProps {
128149
variant: ErrorVariant;
129150
color?: string;
130151
darkColor?: string;
152+
hoverColor?: string;
153+
roundness?: number;
131154
}
132155

133156
const handleVariantTitlebar = (p: StyledModalErrorTitlebarProps) => {
134157
switch (p.variant) {
135158
case "error":
136159
return `
137-
& label {
138-
color: ${p.color ?? primaryColor} !important;
139-
}
160+
color: ${p.color ?? primaryColor} !important;
140161
`;
141162
case "warning":
142163
return `
143-
& label {
144-
color: ${p.darkColor ?? primaryColor} !important;
145-
}
164+
color: ${p.darkColor ?? primaryColor} !important;
146165
`;
147166
case "info":
148167
return `
149-
& label {
150-
color: ${p.color ?? primaryColor} !important;
151-
}
168+
color: ${p.color ?? primaryColor} !important;
152169
`;
153170
}
154171
};
155172

156-
export const StyledModalErrorTitlebar = styled(
157-
ModalTitlebar,
158-
)<StyledModalErrorTitlebarProps>`
159-
${handleVariantTitlebar}
173+
export const StyledModalErrorTitlebar = styled.div<StyledModalErrorTitlebarProps>`
174+
font-size: large;
175+
display: grid;
176+
grid-template-columns: 1fr auto 1fr;
177+
grid-column-gap: 5px;
178+
justify-items: center;
179+
align-items: center;
180+
181+
& label {
182+
${handleVariantTitlebar}
183+
font-weight: 600;
184+
align-self: center;
185+
grid-column-start: 2;
186+
text-align: center;
187+
}
160188
`;

‎src/components/Modals/ErrorModal.tsx‎

Lines changed: 87 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,52 @@ import {
66
StyledModalErrorTitlebar,
77
} from "./ErrorModal.styles";
88
import { ModalRow } from "./Modal";
9+
import { useEffect, useRef, useState } from "react";
10+
import { StyledModalContent } from "./Modal.styles";
911

1012
export type ErrorVariant = "error" | "warning" | "info";
1113

1214
const ErrorModal = () => {
1315
const theme = useTheme();
14-
const { isOpen, msg, type, close } = useError();
16+
const { isOpen, msg, type, close } = {
17+
isOpen: true,
18+
msg: "Error",
19+
type: ErrorType.INFO,
20+
close: () => {},
21+
};
22+
23+
const [isModalOpen, setModalOpen] = useState<boolean>(isOpen);
24+
const modalRef = useRef<HTMLDialogElement>(null);
25+
26+
const handleCloseModal = () => {
27+
if (onClose) {
28+
onClose();
29+
}
30+
setModalOpen(false);
31+
};
32+
33+
const handleKeyDown = (event: any) => {
34+
if (event.key === "Escape") {
35+
handleCloseModal();
36+
}
37+
};
38+
39+
useEffect(() => {
40+
setModalOpen(isOpen);
41+
}, [isOpen]);
42+
43+
useEffect(() => {
44+
const modalElement = modalRef.current;
45+
46+
document.getElementById(`${type_str}-modal`)!.focus();
47+
if (modalElement) {
48+
if (isModalOpen) {
49+
modalElement.showModal();
50+
} else {
51+
modalElement.close();
52+
}
53+
}
54+
}, [isModalOpen]);
1555

1656
var type_str: ErrorVariant = "error";
1757
var type_header = "Error";
@@ -46,57 +86,62 @@ const ErrorModal = () => {
4686
return (
4787
<StyledModalError
4888
id={`${type_str}-modal`}
49-
isOpen={isOpen}
50-
onClose={onClose}
89+
ref={modalRef}
90+
onKeyDown={handleKeyDown}
5191
variant={type_str}
92+
roundness={theme.roundness}
5293
error={theme.palette.error}
53-
errorBorder={theme.palette.border.info}
94+
errorBorder={theme.palette.border.error}
5495
info={theme.palette.background}
5596
infoBorder={theme.palette.border.info}
5697
warning={theme.palette.warning}
5798
warningBorder={theme.palette.border.warning}
5899
>
59-
<StyledModalErrorTitlebar
60-
color={theme.palette.text}
61-
darkColor={theme.palette.text}
62-
title={type_header}
63-
htmlFor="actionName"
64-
variant={type_str}
65-
/>
66-
<ModalRow>
67-
<StyledModalErrorRow
68-
roundness={theme.roundness}
69-
variant={type_str}
70-
errorButtonColor={theme.palette.button.error}
71-
errorHoverColor={theme.palette.button.hoverError}
72-
errorTextColor={theme.palette.text}
73-
infoButtonColor={theme.palette.button.info}
74-
infoHoverColor={theme.palette.button.hoverInfo}
75-
infoTextColor={theme.palette.text}
76-
warningButtonColor={theme.palette.button.warning}
77-
warningHoverColor={theme.palette.button.hoverWarning}
78-
warningTextColor={theme.palette.darkText}
79-
>
80-
<label id="errorMsg">{msg}</label>
81-
</StyledModalErrorRow>
82-
</ModalRow>
83-
<ModalRow>
84-
<StyledModalErrorRow
100+
<StyledModalContent id="bt-modal-contents">
101+
<StyledModalErrorTitlebar
102+
color={theme.palette.text}
103+
darkColor={theme.palette.darkText}
104+
hoverColor={theme.palette.secondary}
85105
roundness={theme.roundness}
86106
variant={type_str}
87-
errorButtonColor={theme.palette.button.error}
88-
errorHoverColor={theme.palette.button.hoverError}
89-
errorTextColor={theme.palette.text}
90-
infoButtonColor={theme.palette.button.info}
91-
infoHoverColor={theme.palette.button.hoverInfo}
92-
infoTextColor={theme.palette.text}
93-
warningButtonColor={theme.palette.button.warning}
94-
warningHoverColor={theme.palette.button.hoverWarning}
95-
warningTextColor={theme.palette.darkText}
96107
>
97-
<div onClick={() => onClose()}>Close</div>
98-
</StyledModalErrorRow>
99-
</ModalRow>
108+
<label htmlFor="actionName">{type_header}</label>
109+
</StyledModalErrorTitlebar>
110+
<ModalRow>
111+
<StyledModalErrorRow
112+
roundness={theme.roundness}
113+
variant={type_str}
114+
errorButtonColor={theme.palette.button.error}
115+
errorHoverColor={theme.palette.button.hoverError}
116+
errorTextColor={theme.palette.text}
117+
infoButtonColor={theme.palette.button.info}
118+
infoHoverColor={theme.palette.button.hoverInfo}
119+
infoTextColor={theme.palette.text}
120+
warningButtonColor={theme.palette.button.warning}
121+
warningHoverColor={theme.palette.button.hoverWarning}
122+
warningTextColor={theme.palette.darkText}
123+
>
124+
<label id="errorMsg">{msg}</label>
125+
</StyledModalErrorRow>
126+
</ModalRow>
127+
<ModalRow>
128+
<StyledModalErrorRow
129+
roundness={theme.roundness}
130+
variant={type_str}
131+
errorButtonColor={theme.palette.button.error}
132+
errorHoverColor={theme.palette.button.hoverError}
133+
errorTextColor={theme.palette.text}
134+
infoButtonColor={theme.palette.button.info}
135+
infoHoverColor={theme.palette.button.hoverInfo}
136+
infoTextColor={theme.palette.text}
137+
warningButtonColor={theme.palette.button.warning}
138+
warningHoverColor={theme.palette.button.hoverWarning}
139+
warningTextColor={theme.palette.darkText}
140+
>
141+
<button onClick={() => onClose()}>Close</button>
142+
</StyledModalErrorRow>
143+
</ModalRow>
144+
</StyledModalContent>
100145
</StyledModalError>
101146
);
102147
};

‎src/components/Modals/Modal.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -315,13 +315,13 @@ export const ModalInputDropdown = ({
315315
ref={ref}
316316
id={id}
317317
name={id}
318-
list={id + '-list'}
318+
list={id + "-list"}
319319
onChange={onChange}
320320
placeholder={placeholder}
321321
{...props}
322322
/>
323323
<label htmlFor={id}>{placeholder}</label>
324-
<datalist id={id + '-list'}>
324+
<datalist id={id + "-list"}>
325325
{entries && entries.map((name) => <option value={name} />)}
326326
</datalist>
327327
{description && <div>{description}</div>}

‎src/components/StatusBar/StatusBar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -323,7 +323,7 @@ export const StatusBarCustomUniverseSelector = ({
323323

324324
const selectUniverse = async (universeName: string) => {
325325
console.log(universeName);
326-
setOpen(false)
326+
setOpen(false);
327327

328328
if (!universeName) return;
329329

0 commit comments

Comments
 (0)