Skip to content

Commit 2437cde

Browse files
silverwindsilverwind
committed
Move dropzone CSS to first-party and fix color issues
1 parent 160ccb5 commit 2437cde

File tree

3 files changed

+262
-14
lines changed

3 files changed

+262
-14
lines changed

‎web_src/css/features/dropzone.css‎

Lines changed: 261 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,264 @@
1+
@keyframes passing-through {
2+
0% { opacity: 0; transform: translateY(40px); }
3+
30%, 70% { opacity: 1; transform: translateY(0); }
4+
100% { opacity: 0; transform: translateY(-40px); }
5+
}
6+
7+
@keyframes slide-in {
8+
0% { opacity: 0; transform: translateY(40px); }
9+
30% { opacity: 1; transform: translateY(0); }
10+
}
11+
12+
@keyframes pulse {
13+
0% { transform: scale(1); }
14+
10% { transform: scale(1.1); }
15+
20% { transform: scale(1); }
16+
}
17+
18+
.dropzone {
19+
min-height: 150px;
20+
border-radius: 5px;
21+
padding: 20px;
22+
}
23+
24+
.dropzone.dz-clickable {
25+
cursor: pointer;
26+
}
27+
28+
.dropzone.dz-clickable * {
29+
cursor: default;
30+
}
31+
32+
.dropzone.dz-clickable .dz-message,
33+
.dropzone.dz-clickable .dz-message * {
34+
cursor: pointer;
35+
}
36+
37+
.dropzone.dz-started .dz-message {
38+
display: none;
39+
}
40+
41+
.dropzone.dz-drag-hover {
42+
border-style: solid;
43+
}
44+
45+
.dropzone.dz-drag-hover .dz-message {
46+
opacity: .5;
47+
}
48+
49+
.dropzone .dz-message {
50+
text-align: center;
51+
margin: 10px 0;
52+
}
53+
54+
.dropzone .dz-message .dz-button {
55+
background: none;
56+
color: inherit;
57+
border: none;
58+
padding: 0;
59+
font: inherit;
60+
cursor: pointer;
61+
outline: inherit;
62+
}
63+
64+
.dropzone .dz-preview {
65+
position: relative;
66+
display: inline-block;
67+
vertical-align: top;
68+
margin: 16px;
69+
min-height: 100px;
70+
}
71+
72+
.dropzone .dz-preview:hover {
73+
z-index: 1000;
74+
}
75+
76+
.dropzone .dz-preview:hover .dz-details {
77+
opacity: 1;
78+
}
79+
80+
.dropzone .dz-preview.dz-file-preview .dz-details {
81+
opacity: 1;
82+
}
83+
84+
.dropzone .dz-preview .dz-remove {
85+
font-size: 14px;
86+
text-align: center;
87+
display: block;
88+
cursor: pointer;
89+
border: none;
90+
}
91+
92+
.dropzone .dz-preview .dz-remove:hover {
93+
text-decoration: underline;
94+
}
95+
96+
.dropzone .dz-preview .dz-details {
97+
z-index: 20;
98+
position: absolute;
99+
top: 0;
100+
left: 0;
101+
opacity: 0;
102+
font-size: 13px;
103+
min-width: 100%;
104+
max-width: 100%;
105+
padding: 2em 1em;
106+
text-align: center;
107+
color: var(--color-text);
108+
line-height: 150%;
109+
}
110+
111+
.dropzone .dz-preview .dz-details .dz-size {
112+
margin-bottom: 1em;
113+
font-size: 16px;
114+
}
115+
116+
.dropzone .dz-preview .dz-details .dz-filename {
117+
white-space: nowrap;
118+
}
119+
120+
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
121+
overflow: hidden;
122+
text-overflow: ellipsis;
123+
}
124+
125+
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
126+
border: 1px solid transparent;
127+
}
128+
129+
.dropzone .dz-preview .dz-details .dz-filename span,
130+
.dropzone .dz-preview .dz-details .dz-size span {
131+
padding: 0 0.4em;
132+
border-radius: 3px;
133+
}
134+
135+
.dropzone .dz-preview:hover .dz-image img {
136+
transform: scale(1.05, 1.05);
137+
filter: opacity(0.5);
138+
}
139+
140+
.dropzone .dz-preview .dz-image {
141+
border-radius: 20px;
142+
overflow: hidden;
143+
width: 120px;
144+
height: 120px;
145+
position: relative;
146+
display: block;
147+
z-index: 10;
148+
}
149+
150+
.dropzone .dz-preview .dz-image img {
151+
display: block;
152+
}
153+
154+
.dropzone .dz-preview.dz-success .dz-success-mark {
155+
animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
156+
}
157+
158+
.dropzone .dz-preview.dz-error .dz-error-mark {
159+
opacity: 1;
160+
animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
161+
}
162+
163+
.dropzone .dz-preview .dz-success-mark,
164+
.dropzone .dz-preview .dz-error-mark {
165+
pointer-events: none;
166+
opacity: 0;
167+
z-index: 500;
168+
position: absolute;
169+
display: block;
170+
top: 50%;
171+
left: 50%;
172+
margin-left: -27px;
173+
margin-top: -27px;
174+
border-radius: 50%;
175+
}
176+
177+
.dropzone .dz-preview .dz-success-mark svg,
178+
.dropzone .dz-preview .dz-error-mark svg {
179+
display: block;
180+
width: 54px;
181+
height: 54px;
182+
fill: var(--color-text);
183+
}
184+
185+
.dropzone .dz-preview.dz-processing .dz-progress {
186+
opacity: 1;
187+
transition: all 0.2s linear;
188+
}
189+
190+
.dropzone .dz-preview.dz-complete .dz-progress {
191+
opacity: 0;
192+
transition: opacity 0.4s ease-in;
193+
}
194+
195+
.dropzone .dz-preview:not(.dz-processing) .dz-progress {
196+
animation: pulse 6s ease infinite;
197+
}
198+
199+
.dropzone .dz-preview .dz-progress {
200+
opacity: 1;
201+
z-index: 1000;
202+
pointer-events: none;
203+
position: absolute;
204+
height: 20px;
205+
top: 50%;
206+
margin-top: -10px;
207+
left: 15%;
208+
right: 15%;
209+
border: 3px solid transparent;
210+
border-radius: 10px;
211+
overflow: hidden;
212+
}
213+
214+
.dropzone .dz-preview .dz-progress .dz-upload {
215+
display: block;
216+
position: relative;
217+
height: 100%;
218+
width: 0;
219+
transition: width 300ms ease-in-out;
220+
border-radius: 17px;
221+
}
222+
223+
.dropzone .dz-preview.dz-error .dz-error-message {
224+
display: block;
225+
}
226+
227+
.dropzone .dz-preview.dz-error:hover .dz-error-message {
228+
opacity: 1;
229+
pointer-events: auto;
230+
}
231+
232+
.dropzone .dz-preview .dz-error-message {
233+
pointer-events: none;
234+
z-index: 1000;
235+
position: absolute;
236+
display: block;
237+
display: none;
238+
opacity: 0;
239+
transition: opacity 0.3s ease;
240+
border-radius: 8px;
241+
font-size: 13px;
242+
top: 130px;
243+
left: -10px;
244+
width: 140px;
245+
background: var(--color-red);
246+
padding: 0.5em 1em;
247+
color: var(--color-white);
248+
}
249+
250+
.dropzone .dz-preview .dz-error-message::after {
251+
content: "";
252+
position: absolute;
253+
top: -6px;
254+
left: 64px;
255+
width: 0;
256+
height: 0;
257+
border-left: 6px solid transparent;
258+
border-right: 6px solid transparent;
259+
border-bottom: 6px solid var(--color-red);
260+
}
261+
1262
.ui .field .dropzone {
2263
border: 2px dashed var(--color-secondary);
3264
background: none;
@@ -7,10 +268,6 @@
7268
min-height: 0;
8269
}
9270

10-
.ui .field .dropzone .dz-message {
11-
margin: 10px 0;
12-
}
13-
14271
.dropzone .dz-button {
15272
color: var(--color-text-light) !important;
16273
}
@@ -36,22 +293,14 @@
36293
object-fit: contain !important;
37294
}
38295

39-
.dropzone .dz-preview.dz-image-preview,
40296
.dropzone-attachments .thumbnails img {
41297
background: transparent !important;
42-
}
43-
44-
.dropzone-attachments .thumbnails img {
45298
height: 120px !important;
46299
width: 120px !important;
47300
object-fit: contain !important;
48301
margin-bottom: 0 !important;
49302
}
50303

51-
.dropzone .dz-preview:hover .dz-image img {
52-
filter: opacity(0.5) !important;
53-
}
54-
55304
.ui .field .dropzone .dz-preview .dz-progress {
56305
/* by default the progress-bar is vertically centered (top: 50%), it's better to put it after the "details (size, filename)",
57306
then the layout from top to bottom is: size, filename, progress */

‎web_src/css/index.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@
3333
@import "./shared/repoorg.css";
3434
@import "./shared/settings.css";
3535

36-
@import "./features/dropzone.css";
3736
@import "./features/gitgraph.css";
3837
@import "./features/heatmap.css";
3938
@import "./features/imagediff.css";

‎web_src/js/features/dropzone.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export const DropzoneCustomEventUploadDone = 'dropzone-custom-upload-done';
1717
async function createDropzone(el, opts) {
1818
const [{Dropzone}] = await Promise.all([
1919
import(/* webpackChunkName: "dropzone" */'dropzone'),
20-
import(/* webpackChunkName: "dropzone" */'dropzone/dist/dropzone.css'),
20+
import(/* webpackChunkName: "dropzone" */'../../css/features/dropzone.css'),
2121
]);
2222
return new Dropzone(el, opts);
2323
}

0 commit comments

Comments
 (0)