Skip to content

Commit b7a4c11

Browse files
codewithkylecodewithkyle
committed
♻ Complete Modals rework
1 parent 09be5a5 commit b7a4c11

File tree

3 files changed

+430
-196
lines changed

3 files changed

+430
-196
lines changed

‎src/framework/components/modals/index.html‎

Lines changed: 98 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,102 @@
11
<div class="w-full text-center">
2-
<button sfx="button" kind="solid" color="grey" class="m-0.5 bttn js-bttn-general">Passive</button>
3-
<button sfx="button" kind="solid" color="grey" class="m-0.5 bttn js-bttn-warn">Confirm</button>
2+
<button sfx="button" kind="solid" color="grey" class="m-0.5 bttn js-bttn-passive">Passive</button>
3+
<button sfx="button" kind="solid" color="grey" class="m-0.5 bttn js-bttn-confirm">Confirm</button>
44
<button sfx="button" kind="solid" color="grey" class="m-0.5 bttn js-bttn-confirm-danger">Confirm Danger</button>
5-
<button sfx="button" kind="solid" color="grey" class="m-0.5 bttn js-bttn-danger">General Actions</button>
6-
<script type="module"></script>
5+
<button sfx="button" kind="solid" color="grey" class="m-0.5 bttn js-bttn-form">Form</button>
6+
<button sfx="button" kind="solid" color="grey" class="m-0.5 bttn js-bttn-raw">Raw</button>
7+
8+
<script type="module">
9+
import modals from "/js/modals.js";
10+
import Input from "/js/input.js";
11+
import { html } from "/js/lit-html.js";
12+
13+
document.body.querySelector(".js-bttn-confirm-danger").addEventListener("click", ()=>{
14+
modals.dangerous({
15+
title: "Delete Account",
16+
message: "Are you sure you want to delete your account? All of your data will be permanently removed. This action cannot be undone.",
17+
confirm: "Delete Account",
18+
callbacks: {
19+
confirm: ()=>{
20+
console.log("Account deleted");
21+
},
22+
cancel: ()=>{
23+
console.log("Account not deleted");
24+
},
25+
},
26+
});
27+
});
28+
29+
document.body.querySelector(".js-bttn-confirm").addEventListener("click", ()=>{
30+
modals.confirm({
31+
title: "Submit Order",
32+
message: "Once your order is submitted production will begin automatically. This action cannot be undone.",
33+
callbacks: {
34+
confirm: ()=>{
35+
console.log("Order submitted");
36+
},
37+
cancel: ()=>{
38+
console.log("Order not submitted");
39+
},
40+
},
41+
});
42+
});
43+
44+
document.body.querySelector(".js-bttn-passive").addEventListener("click", ()=>{
45+
modals.passive({
46+
title: "Unable to connect your account",
47+
message: `
48+
Your changes were saved, but we could not connect your account due to a technical issue on our end. Please try reconnecting again. If the issue keeps happening, contact <a class="link" href="#">Customer Support</a>.
49+
`,
50+
actions: [
51+
{
52+
label: "Cancel",
53+
callback: ()=>{
54+
console.log("Canceling");
55+
},
56+
},
57+
{
58+
label: "Try Again",
59+
callback: ()=>{
60+
console.log("Trying again");
61+
},
62+
},
63+
],
64+
});
65+
});
66+
67+
document.body.querySelector(".js-bttn-form").addEventListener("click", ()=>{
68+
modals.form({
69+
title: "New Project",
70+
view: html`
71+
${new Input({
72+
placeholder: "Project Name",
73+
name: "projectName",
74+
required: true,
75+
})}
76+
`,
77+
callbacks: {
78+
submit: (data)=>{
79+
console.log(data);
80+
},
81+
cancel: ()=>{
82+
console.log("Project not created");
83+
},
84+
},
85+
});
86+
});
87+
88+
document.body.querySelector(".js-bttn-raw").addEventListener("click", ()=>{
89+
const modal = modals.raw({
90+
view: html`
91+
<div class="p-2">
92+
<iframe style="width:100%;aspect-ratio: 16/9;" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
93+
</div>
94+
`,
95+
width: 768,
96+
});
97+
console.log(modal);
98+
});
99+
</script>
7100
</div>
8101
<link href="/css/button.css" rel="stylesheet" />
102+
<link href="/css/link.css" rel="stylesheet" />

‎src/framework/components/modals/modals.scss‎

Lines changed: 26 additions & 192 deletions
Original file line numberDiff line numberDiff line change
@@ -1,217 +1,51 @@
1-
passive-modal,
2-
confirm-modal,
3-
form-modal,
4-
raw-modal {
1+
modal-component {
2+
display: flex;
3+
flex-direction: column;
4+
justify-content: center;
5+
align-items: center;
56
position: fixed;
67
top: 0;
78
left: 0;
89
width: 100vw;
910
height: 100vh;
10-
display: flex;
11-
justify-content: center;
12-
align-items: center;
13-
z-index: 5000;
1411

1512
.backdrop {
1613
position: absolute;
1714
top: 0;
1815
left: 0;
1916
width: 100%;
2017
height: 100%;
21-
background-color: rgba(255, 255, 255, 0.6);
22-
backdrop-filter: blur(4px);
23-
z-index: 1;
18+
background-color: hsl(var(--grey-700-hsl) / 0.6);
19+
backdrop-filter: blur(8px);
2420
}
2521

2622
.modal {
27-
display: inline-block;
28-
background-color: var(--white);
29-
border-radius: 0.5rem;
30-
width: 100%;
31-
max-width: calc(100% - 2rem);
32-
z-index: 2;
3323
position: relative;
34-
overflow: hidden;
35-
box-shadow: var(--shadow-grey-lg);
3624
border: 1px solid var(--grey-300);
25+
box-shadow: var(--shadow-grey-lg);
26+
background-color: var(--white);
27+
border-radius: 1rem;
28+
max-width: calc(100vw - 2rem);
29+
max-height: calc(100vh - 2rem);
30+
overflow-y: auto;
31+
}
3732

38-
&[size="small"] {
39-
width: 350px;
40-
}
41-
&[size="medium"] {
42-
width: 450px;
43-
}
44-
&[size="large"] {
45-
width: 768px;
46-
}
47-
48-
.close {
49-
position: absolute;
50-
top: 0;
51-
right: 0;
52-
width: 36px;
53-
height: 36px;
54-
display: inline-flex;
55-
justify-content: center;
56-
align-items: center;
57-
cursor: pointer;
58-
color: var(--grey-400);
59-
outline-offset: 0;
60-
61-
&:focus-visible {
62-
outline: var(--focus-ring);
63-
outline-offset: var(--focus-ring-offset);
64-
transition: outline-offset 80ms var(--ease-in-out);
65-
}
66-
67-
&:hover {
33+
&.static-content {
34+
.modal {
35+
h2 {
36+
font-size: var(--font-lg);
37+
font-weight: var(--font-medium);
6838
color: var(--grey-800);
69-
70-
&::before {
71-
opacity: 0.05;
72-
}
39+
line-height: 1.375;
40+
margin-bottom: 1rem;
41+
display: block;
7342
}
7443

75-
&:active {
76-
color: var(--grey-800);
77-
outline-offset: 0;
78-
79-
&::before {
80-
opacity: 0.1;
81-
}
82-
}
83-
84-
&::before {
85-
content: "";
86-
display: inline-block;
87-
position: absolute;
88-
top: 0;
89-
left: 0;
90-
width: 100%;
91-
height: 100%;
92-
background-color: var(--grey-500);
93-
border-radius: 50%;
94-
opacity: 0;
95-
transition: all 80ms var(--ease-in-out);
96-
}
97-
98-
svg {
99-
width: 18px;
100-
height: 18px;
101-
}
102-
}
103-
104-
h1 {
105-
display: block;
106-
font-weight: var(--font-medium);
107-
font-size: var(--font-md);
108-
color: var(--grey-800);
109-
padding: 1rem 1rem 0.5rem;
110-
line-height: 1.375;
111-
}
112-
113-
p {
114-
display: block;
115-
color: var(--grey-700);
116-
font-size: var(--font-sm);
117-
line-height: 1.618;
118-
padding: 0 1rem 1rem;
119-
}
120-
121-
.actions {
122-
display: flex;
123-
justify-content: flex-end;
124-
align-items: center;
125-
width: 100%;
126-
padding: 1rem;
127-
background-color: var(--grey-50);
128-
border-top: 1px solid var(--grey-300);
129-
130-
button {
131-
display: inline-flex;
132-
justify-content: center;
133-
align-items: center;
134-
flex-flow: row nowrap;
135-
position: relative;
136-
background-color: var(--primary-700);
137-
border: 1px solid var(--primary-800);
138-
transition: transform 80ms var(--ease-in-out), box-shadow 80ms var(--ease-in-out);
139-
padding: 0 1rem;
140-
min-height: 36px;
141-
box-shadow: none;
142-
text-transform: uppercase;
44+
p {
45+
color: var(--grey-700);
14346
font-size: var(--font-sm);
144-
font-weight: var(--font-medium);
145-
user-select: none;
146-
text-overflow: ellipsis;
147-
cursor: pointer;
148-
border-radius: 0.25rem;
149-
outline-offset: 0;
150-
151-
&:focus-visible {
152-
outline: var(--focus-ring);
153-
outline-offset: var(--focus-ring-offset);
154-
transition: outline-offset 80ms var(--ease-in-out);
155-
}
156-
157-
&:active,
158-
&.is-active {
159-
outline-offset: 0;
160-
box-shadow: none !important;
161-
transform: translateY(1px);
162-
}
163-
164-
&.confirm {
165-
border-color: var(--success-800);
166-
background-color: var(--success-700);
167-
color: var(--white);
168-
box-shadow: var(--bevel);
169-
170-
&:hover,
171-
&:focus-visible {
172-
background-color: var(--success-600);
173-
}
174-
175-
&:active,
176-
&.is-active {
177-
background-color: var(--success-700);
178-
}
179-
180-
&.danger {
181-
border-color: var(--danger-800);
182-
background-color: var(--danger-700);
183-
color: var(--white);
184-
box-shadow: var(--bevel);
185-
186-
&:hover,
187-
&:focus-visible {
188-
background-color: var(--danger-600);
189-
}
190-
191-
&:active,
192-
&.is-active {
193-
background-color: var(--danger-800);
194-
}
195-
}
196-
}
197-
198-
&.cancel {
199-
border-color: var(--grey-300);
200-
background-color: var(--white);
201-
color: var(--black);
202-
box-shadow: var(--bevel);
203-
margin-right: 1rem;
204-
205-
&:hover,
206-
&:focus-visible {
207-
background-color: var(--grey-50);
208-
}
209-
210-
&:active,
211-
&.is-active {
212-
background-color: var(--grey-100);
213-
}
214-
}
47+
line-height: 1.618;
48+
display: block;
21549
}
21650
}
21751
}

0 commit comments

Comments
 (0)