plusui-native 0.2.99 → 0.2.100
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "plusui-native",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.100",
|
|
4
4
|
"description": "PlusUI CLI - Build C++ desktop apps modern UI ",
|
|
5
5
|
"main": "src/index.js",
|
|
6
6
|
"type": "module",
|
|
@@ -27,11 +27,11 @@
|
|
|
27
27
|
"semver": "^7.6.0",
|
|
28
28
|
"which": "^4.0.0",
|
|
29
29
|
"execa": "^8.0.1",
|
|
30
|
-
"plusui-native-builder": "^0.1.
|
|
31
|
-
"plusui-native-connect": "^0.1.
|
|
30
|
+
"plusui-native-builder": "^0.1.98",
|
|
31
|
+
"plusui-native-connect": "^0.1.98"
|
|
32
32
|
},
|
|
33
33
|
"peerDependencies": {
|
|
34
|
-
"plusui-native-connect": "^0.1.
|
|
34
|
+
"plusui-native-connect": "^0.1.98"
|
|
35
35
|
},
|
|
36
36
|
"publishConfig": {
|
|
37
37
|
"access": "public"
|
|
@@ -1,14 +1,16 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { useState, useEffect, useRef } from 'react';
|
|
2
|
+
import plusui, { type FileInfo, type DropZone } from 'plusui';
|
|
2
3
|
|
|
3
4
|
function App() {
|
|
4
|
-
const
|
|
5
|
-
const
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
5
|
+
const [files, setFiles] = useState<FileInfo[]>([]);
|
|
6
|
+
const dropRef = useRef<HTMLDivElement>(null);
|
|
7
|
+
|
|
8
|
+
useEffect(() => {
|
|
9
|
+
if (dropRef.current) {
|
|
10
|
+
const zone = plusui.fileDrop.createDropZone('main', dropRef.current);
|
|
11
|
+
return zone.onFiles((f: FileInfo[]) => setFiles(f));
|
|
12
|
+
}
|
|
13
|
+
}, []);
|
|
12
14
|
|
|
13
15
|
return (
|
|
14
16
|
<div className="app">
|
|
@@ -21,19 +23,40 @@ function App() {
|
|
|
21
23
|
<div className="card">
|
|
22
24
|
<h2>Window</h2>
|
|
23
25
|
<div className="button-group">
|
|
24
|
-
<button className="button" onClick={
|
|
25
|
-
<button className="button" onClick={
|
|
26
|
-
<button className="button" onClick={
|
|
27
|
-
<button className="button" onClick={
|
|
28
|
-
<button className="button" onClick={
|
|
29
|
-
<button className="button" onClick={
|
|
30
|
-
<button className="button button-danger" onClick={
|
|
26
|
+
<button className="button" onClick={() => plusui.window.show()}>Show</button>
|
|
27
|
+
<button className="button" onClick={() => plusui.window.hide()}>Hide</button>
|
|
28
|
+
<button className="button" onClick={() => plusui.window.minimize()}>Minimize</button>
|
|
29
|
+
<button className="button" onClick={() => plusui.window.maximize()}>Maximize</button>
|
|
30
|
+
<button className="button" onClick={() => plusui.window.restore()}>Restore</button>
|
|
31
|
+
<button className="button" onClick={() => plusui.window.center()}>Center</button>
|
|
32
|
+
<button className="button button-danger" onClick={() => plusui.window.close()}>Close</button>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
|
|
36
|
+
<div className="card">
|
|
37
|
+
<h2>Drop Files</h2>
|
|
38
|
+
<div ref={dropRef} className="dropzone" data-dropzone="main">
|
|
39
|
+
<div className="dropzone-text">Drag files here</div>
|
|
31
40
|
</div>
|
|
41
|
+
{files.length > 0 && (
|
|
42
|
+
<div className="filelist">
|
|
43
|
+
<div className="filelist-header">
|
|
44
|
+
<span>{files.length} file(s)</span>
|
|
45
|
+
<button className="button button-small" onClick={() => setFiles([])}>Clear</button>
|
|
46
|
+
</div>
|
|
47
|
+
{files.map((f: FileInfo, i: number) => (
|
|
48
|
+
<div key={i} className="fileitem">
|
|
49
|
+
<span className="fileitem-name">{f.name}</span>
|
|
50
|
+
<span className="fileitem-size">{plusui.formatFileSize(f.size)}</span>
|
|
51
|
+
</div>
|
|
52
|
+
))}
|
|
53
|
+
</div>
|
|
54
|
+
)}
|
|
32
55
|
</div>
|
|
33
56
|
|
|
34
57
|
<div className="card">
|
|
35
58
|
<h2>App</h2>
|
|
36
|
-
<button className="button button-danger" onClick={
|
|
59
|
+
<button className="button button-danger" onClick={() => plusui.app.quit()}>Quit</button>
|
|
37
60
|
</div>
|
|
38
61
|
|
|
39
62
|
<div className="info">
|
|
@@ -94,6 +94,11 @@ body {
|
|
|
94
94
|
transform: translateY(0);
|
|
95
95
|
}
|
|
96
96
|
|
|
97
|
+
.button-small {
|
|
98
|
+
padding: 0.4rem 0.8rem;
|
|
99
|
+
font-size: 0.85rem;
|
|
100
|
+
}
|
|
101
|
+
|
|
97
102
|
.button-danger {
|
|
98
103
|
background: rgba(231, 76, 60, 0.6);
|
|
99
104
|
border-color: rgba(231, 76, 60, 0.8);
|
|
@@ -103,26 +108,6 @@ body {
|
|
|
103
108
|
background: rgba(231, 76, 60, 0.8);
|
|
104
109
|
}
|
|
105
110
|
|
|
106
|
-
.info-text {
|
|
107
|
-
margin-top: 1rem;
|
|
108
|
-
padding: 0.75rem 1rem;
|
|
109
|
-
background: rgba(255, 255, 255, 0.15);
|
|
110
|
-
border-radius: 0.5rem;
|
|
111
|
-
font-size: 1rem;
|
|
112
|
-
animation: fadeIn 0.3s ease;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
@keyframes fadeIn {
|
|
116
|
-
from {
|
|
117
|
-
opacity: 0;
|
|
118
|
-
transform: translateY(-10px);
|
|
119
|
-
}
|
|
120
|
-
to {
|
|
121
|
-
opacity: 1;
|
|
122
|
-
transform: translateY(0);
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
|
|
126
111
|
.info {
|
|
127
112
|
text-align: center;
|
|
128
113
|
opacity: 0.8;
|
|
@@ -139,190 +124,80 @@ body {
|
|
|
139
124
|
font-family: 'Courier New', monospace;
|
|
140
125
|
}
|
|
141
126
|
|
|
142
|
-
/*
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
.filedrop-zone {
|
|
147
|
-
position: relative;
|
|
148
|
-
display: flex;
|
|
149
|
-
flex-direction: column;
|
|
150
|
-
align-items: center;
|
|
151
|
-
justify-content: center;
|
|
152
|
-
min-height: 180px;
|
|
153
|
-
padding: 2rem;
|
|
154
|
-
border: 2px dashed rgba(255, 255, 255, 0.3);
|
|
127
|
+
/* Dropzone */
|
|
128
|
+
.dropzone {
|
|
129
|
+
border: 2px dashed rgba(255, 255, 255, 0.4);
|
|
155
130
|
border-radius: 0.75rem;
|
|
156
|
-
|
|
157
|
-
|
|
131
|
+
padding: 2rem;
|
|
132
|
+
margin-top: 1rem;
|
|
133
|
+
transition: all 0.2s ease;
|
|
158
134
|
cursor: pointer;
|
|
159
|
-
user-select: none;
|
|
160
135
|
}
|
|
161
136
|
|
|
162
|
-
.
|
|
163
|
-
border-color: rgba(255, 255, 255, 0.
|
|
164
|
-
background
|
|
137
|
+
.dropzone:hover {
|
|
138
|
+
border-color: rgba(255, 255, 255, 0.6);
|
|
139
|
+
background: rgba(255, 255, 255, 0.05);
|
|
165
140
|
}
|
|
166
141
|
|
|
167
|
-
.
|
|
142
|
+
.dropzone-active {
|
|
168
143
|
border-color: #60a5fa;
|
|
169
|
-
background-color: rgba(96, 165, 250, 0.1);
|
|
170
144
|
border-width: 3px;
|
|
145
|
+
background: rgba(96, 165, 250, 0.15);
|
|
171
146
|
transform: scale(1.02);
|
|
172
|
-
box-shadow: 0 0
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
.filedrop-content {
|
|
176
|
-
display: flex;
|
|
177
|
-
flex-direction: column;
|
|
178
|
-
align-items: center;
|
|
179
|
-
gap: 1rem;
|
|
180
|
-
text-align: center;
|
|
181
|
-
pointer-events: none;
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
.filedrop-icon {
|
|
185
|
-
width: 3rem;
|
|
186
|
-
height: 3rem;
|
|
187
|
-
color: rgba(255, 255, 255, 0.6);
|
|
188
|
-
transition: all 0.2s ease-in-out;
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
.filedrop-zone.filedrop-active .filedrop-icon {
|
|
192
|
-
color: #60a5fa;
|
|
193
|
-
transform: scale(1.2);
|
|
147
|
+
box-shadow: 0 0 20px rgba(96, 165, 250, 0.3);
|
|
194
148
|
}
|
|
195
149
|
|
|
196
|
-
.
|
|
150
|
+
.dropzone-text {
|
|
197
151
|
font-size: 1rem;
|
|
198
152
|
font-weight: 500;
|
|
199
|
-
color: rgba(255, 255, 255, 0.
|
|
200
|
-
transition: color 0.2s ease-in-out;
|
|
153
|
+
color: rgba(255, 255, 255, 0.8);
|
|
201
154
|
}
|
|
202
155
|
|
|
203
|
-
.
|
|
156
|
+
.dropzone-active .dropzone-text {
|
|
204
157
|
color: #93c5fd;
|
|
205
158
|
font-weight: 600;
|
|
206
159
|
}
|
|
207
160
|
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
color: rgba(255, 255, 255, 0.6);
|
|
211
|
-
transition: color 0.2s ease-in-out;
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
.filedrop-zone.filedrop-active .filedrop-hint {
|
|
215
|
-
color: rgba(255, 255, 255, 0.8);
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
.filedrop-zone.filedrop-compact {
|
|
219
|
-
min-height: 120px;
|
|
220
|
-
padding: 1.5rem;
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
.filedrop-zone.filedrop-compact .filedrop-icon {
|
|
224
|
-
width: 2rem;
|
|
225
|
-
height: 2rem;
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
.filedrop-zone.filedrop-inline {
|
|
229
|
-
min-height: 80px;
|
|
230
|
-
padding: 1rem;
|
|
231
|
-
flex-direction: row;
|
|
232
|
-
justify-content: flex-start;
|
|
233
|
-
gap: 1rem;
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
.filedrop-zone.filedrop-inline .filedrop-content {
|
|
237
|
-
flex-direction: row;
|
|
238
|
-
align-items: center;
|
|
239
|
-
text-align: left;
|
|
240
|
-
gap: 0.75rem;
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
.filedrop-zone.filedrop-minimal {
|
|
244
|
-
border-style: solid;
|
|
245
|
-
border-width: 1px;
|
|
246
|
-
background-color: transparent;
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
.filedrop-zone.filedrop-bold {
|
|
250
|
-
border-width: 3px;
|
|
251
|
-
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
.filedrop-files {
|
|
161
|
+
/* File List */
|
|
162
|
+
.filelist {
|
|
255
163
|
margin-top: 1rem;
|
|
256
|
-
|
|
164
|
+
text-align: left;
|
|
257
165
|
}
|
|
258
166
|
|
|
259
|
-
.
|
|
167
|
+
.filelist-header {
|
|
260
168
|
display: flex;
|
|
169
|
+
justify-content: space-between;
|
|
261
170
|
align-items: center;
|
|
262
|
-
gap: 0.75rem;
|
|
263
|
-
padding: 0.75rem;
|
|
264
|
-
background-color: rgba(255, 255, 255, 0.1);
|
|
265
|
-
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
266
|
-
border-radius: 0.5rem;
|
|
267
171
|
margin-bottom: 0.5rem;
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
background-color: rgba(255, 255, 255, 0.15);
|
|
273
|
-
border-color: rgba(255, 255, 255, 0.3);
|
|
172
|
+
padding-bottom: 0.5rem;
|
|
173
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
|
174
|
+
font-size: 0.9rem;
|
|
175
|
+
color: rgba(255, 255, 255, 0.7);
|
|
274
176
|
}
|
|
275
177
|
|
|
276
|
-
.
|
|
277
|
-
width: 2rem;
|
|
278
|
-
height: 2rem;
|
|
279
|
-
flex-shrink: 0;
|
|
178
|
+
.fileitem {
|
|
280
179
|
display: flex;
|
|
180
|
+
justify-content: space-between;
|
|
281
181
|
align-items: center;
|
|
282
|
-
|
|
283
|
-
background
|
|
284
|
-
border-radius: 0.
|
|
285
|
-
|
|
182
|
+
padding: 0.6rem 0.8rem;
|
|
183
|
+
background: rgba(255, 255, 255, 0.08);
|
|
184
|
+
border-radius: 0.4rem;
|
|
185
|
+
margin-bottom: 0.4rem;
|
|
286
186
|
}
|
|
287
187
|
|
|
288
|
-
.
|
|
289
|
-
|
|
290
|
-
min-width: 0;
|
|
188
|
+
.fileitem:hover {
|
|
189
|
+
background: rgba(255, 255, 255, 0.12);
|
|
291
190
|
}
|
|
292
191
|
|
|
293
|
-
.
|
|
294
|
-
font-size: 0.
|
|
295
|
-
font-weight: 500;
|
|
296
|
-
color: #fff;
|
|
297
|
-
white-space: nowrap;
|
|
192
|
+
.fileitem-name {
|
|
193
|
+
font-size: 0.9rem;
|
|
298
194
|
overflow: hidden;
|
|
299
195
|
text-overflow: ellipsis;
|
|
196
|
+
white-space: nowrap;
|
|
300
197
|
}
|
|
301
198
|
|
|
302
|
-
.
|
|
303
|
-
font-size: 0.
|
|
304
|
-
color: rgba(255, 255, 255, 0.
|
|
305
|
-
margin-
|
|
306
|
-
}
|
|
307
|
-
|
|
308
|
-
.filedrop-file-remove {
|
|
309
|
-
flex-shrink: 0;
|
|
310
|
-
width: 1.5rem;
|
|
311
|
-
height: 1.5rem;
|
|
312
|
-
display: flex;
|
|
313
|
-
align-items: center;
|
|
314
|
-
justify-content: center;
|
|
315
|
-
border-radius: 0.25rem;
|
|
316
|
-
color: rgba(255, 255, 255, 0.6);
|
|
317
|
-
cursor: pointer;
|
|
318
|
-
transition: all 0.2s ease-in-out;
|
|
319
|
-
pointer-events: auto;
|
|
320
|
-
background: transparent;
|
|
321
|
-
border: none;
|
|
322
|
-
font-size: 1rem;
|
|
323
|
-
}
|
|
324
|
-
|
|
325
|
-
.filedrop-file-remove:hover {
|
|
326
|
-
background-color: rgba(239, 68, 68, 0.2);
|
|
327
|
-
color: #fca5a5;
|
|
199
|
+
.fileitem-size {
|
|
200
|
+
font-size: 0.8rem;
|
|
201
|
+
color: rgba(255, 255, 255, 0.5);
|
|
202
|
+
margin-left: 1rem;
|
|
328
203
|
}
|
|
@@ -1,14 +1,18 @@
|
|
|
1
|
+
import { createSignal, onMount } from 'solid-js';
|
|
1
2
|
import plusui from 'plusui';
|
|
3
|
+
import type { FileInfo, DropZone } from 'plusui';
|
|
2
4
|
|
|
3
5
|
function App() {
|
|
4
|
-
const
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
6
|
+
const [files, setFiles] = createSignal<FileInfo[]>([]);
|
|
7
|
+
let dropZoneRef: HTMLDivElement | undefined;
|
|
8
|
+
let myZone: DropZone | undefined;
|
|
9
|
+
|
|
10
|
+
onMount(() => {
|
|
11
|
+
if (dropZoneRef) {
|
|
12
|
+
myZone = plusui.fileDrop.createDropZone('main', dropZoneRef);
|
|
13
|
+
myZone.onFiles((f: FileInfo[]) => setFiles(f));
|
|
14
|
+
}
|
|
15
|
+
});
|
|
12
16
|
|
|
13
17
|
return (
|
|
14
18
|
<div class="app">
|
|
@@ -21,19 +25,40 @@ function App() {
|
|
|
21
25
|
<div class="card">
|
|
22
26
|
<h2>Window</h2>
|
|
23
27
|
<div class="button-group">
|
|
24
|
-
<button class="button" onClick={
|
|
25
|
-
<button class="button" onClick={
|
|
26
|
-
<button class="button" onClick={
|
|
27
|
-
<button class="button" onClick={
|
|
28
|
-
<button class="button" onClick={
|
|
29
|
-
<button class="button" onClick={
|
|
30
|
-
<button class="button button-danger" onClick={
|
|
28
|
+
<button class="button" onClick={() => plusui.window.show()}>Show</button>
|
|
29
|
+
<button class="button" onClick={() => plusui.window.hide()}>Hide</button>
|
|
30
|
+
<button class="button" onClick={() => plusui.window.minimize()}>Minimize</button>
|
|
31
|
+
<button class="button" onClick={() => plusui.window.maximize()}>Maximize</button>
|
|
32
|
+
<button class="button" onClick={() => plusui.window.restore()}>Restore</button>
|
|
33
|
+
<button class="button" onClick={() => plusui.window.center()}>Center</button>
|
|
34
|
+
<button class="button button-danger" onClick={() => plusui.window.close()}>Close</button>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
|
|
38
|
+
<div class="card">
|
|
39
|
+
<h2>Drop Files</h2>
|
|
40
|
+
<div ref={dropZoneRef} class="dropzone" data-dropzone="main">
|
|
41
|
+
<div class="dropzone-text">Drag files here</div>
|
|
31
42
|
</div>
|
|
43
|
+
{files().length > 0 && (
|
|
44
|
+
<div class="filelist">
|
|
45
|
+
<div class="filelist-header">
|
|
46
|
+
<span>{files().length} file(s)</span>
|
|
47
|
+
<button class="button button-small" onClick={() => setFiles([])}>Clear</button>
|
|
48
|
+
</div>
|
|
49
|
+
{files().map((f: FileInfo) => (
|
|
50
|
+
<div class="fileitem">
|
|
51
|
+
<span class="fileitem-name">{f.name}</span>
|
|
52
|
+
<span class="fileitem-size">{plusui.formatFileSize(f.size)}</span>
|
|
53
|
+
</div>
|
|
54
|
+
))}
|
|
55
|
+
</div>
|
|
56
|
+
)}
|
|
32
57
|
</div>
|
|
33
58
|
|
|
34
59
|
<div class="card">
|
|
35
60
|
<h2>App</h2>
|
|
36
|
-
<button class="button button-danger" onClick={
|
|
61
|
+
<button class="button button-danger" onClick={() => plusui.app.quit()}>Quit</button>
|
|
37
62
|
</div>
|
|
38
63
|
|
|
39
64
|
<div class="info">
|
|
@@ -94,6 +94,11 @@ body {
|
|
|
94
94
|
transform: translateY(0);
|
|
95
95
|
}
|
|
96
96
|
|
|
97
|
+
.button-small {
|
|
98
|
+
padding: 0.4rem 0.8rem;
|
|
99
|
+
font-size: 0.85rem;
|
|
100
|
+
}
|
|
101
|
+
|
|
97
102
|
.button-danger {
|
|
98
103
|
background: rgba(231, 76, 60, 0.6);
|
|
99
104
|
border-color: rgba(231, 76, 60, 0.8);
|
|
@@ -103,26 +108,6 @@ body {
|
|
|
103
108
|
background: rgba(231, 76, 60, 0.8);
|
|
104
109
|
}
|
|
105
110
|
|
|
106
|
-
.info-text {
|
|
107
|
-
margin-top: 1rem;
|
|
108
|
-
padding: 0.75rem 1rem;
|
|
109
|
-
background: rgba(255, 255, 255, 0.15);
|
|
110
|
-
border-radius: 0.5rem;
|
|
111
|
-
font-size: 1rem;
|
|
112
|
-
animation: fadeIn 0.3s ease;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
@keyframes fadeIn {
|
|
116
|
-
from {
|
|
117
|
-
opacity: 0;
|
|
118
|
-
transform: translateY(-10px);
|
|
119
|
-
}
|
|
120
|
-
to {
|
|
121
|
-
opacity: 1;
|
|
122
|
-
transform: translateY(0);
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
|
|
126
111
|
.info {
|
|
127
112
|
text-align: center;
|
|
128
113
|
opacity: 0.8;
|
|
@@ -139,190 +124,80 @@ body {
|
|
|
139
124
|
font-family: 'Courier New', monospace;
|
|
140
125
|
}
|
|
141
126
|
|
|
142
|
-
/*
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
.filedrop-zone {
|
|
147
|
-
position: relative;
|
|
148
|
-
display: flex;
|
|
149
|
-
flex-direction: column;
|
|
150
|
-
align-items: center;
|
|
151
|
-
justify-content: center;
|
|
152
|
-
min-height: 180px;
|
|
153
|
-
padding: 2rem;
|
|
154
|
-
border: 2px dashed rgba(255, 255, 255, 0.3);
|
|
127
|
+
/* Dropzone */
|
|
128
|
+
.dropzone {
|
|
129
|
+
border: 2px dashed rgba(255, 255, 255, 0.4);
|
|
155
130
|
border-radius: 0.75rem;
|
|
156
|
-
|
|
157
|
-
|
|
131
|
+
padding: 2rem;
|
|
132
|
+
margin-top: 1rem;
|
|
133
|
+
transition: all 0.2s ease;
|
|
158
134
|
cursor: pointer;
|
|
159
|
-
user-select: none;
|
|
160
135
|
}
|
|
161
136
|
|
|
162
|
-
.
|
|
163
|
-
border-color: rgba(255, 255, 255, 0.
|
|
164
|
-
background
|
|
137
|
+
.dropzone:hover {
|
|
138
|
+
border-color: rgba(255, 255, 255, 0.6);
|
|
139
|
+
background: rgba(255, 255, 255, 0.05);
|
|
165
140
|
}
|
|
166
141
|
|
|
167
|
-
.
|
|
142
|
+
.dropzone-active {
|
|
168
143
|
border-color: #60a5fa;
|
|
169
|
-
background-color: rgba(96, 165, 250, 0.1);
|
|
170
144
|
border-width: 3px;
|
|
145
|
+
background: rgba(96, 165, 250, 0.15);
|
|
171
146
|
transform: scale(1.02);
|
|
172
|
-
box-shadow: 0 0
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
.filedrop-content {
|
|
176
|
-
display: flex;
|
|
177
|
-
flex-direction: column;
|
|
178
|
-
align-items: center;
|
|
179
|
-
gap: 1rem;
|
|
180
|
-
text-align: center;
|
|
181
|
-
pointer-events: none;
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
.filedrop-icon {
|
|
185
|
-
width: 3rem;
|
|
186
|
-
height: 3rem;
|
|
187
|
-
color: rgba(255, 255, 255, 0.6);
|
|
188
|
-
transition: all 0.2s ease-in-out;
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
.filedrop-zone.filedrop-active .filedrop-icon {
|
|
192
|
-
color: #60a5fa;
|
|
193
|
-
transform: scale(1.2);
|
|
147
|
+
box-shadow: 0 0 20px rgba(96, 165, 250, 0.3);
|
|
194
148
|
}
|
|
195
149
|
|
|
196
|
-
.
|
|
150
|
+
.dropzone-text {
|
|
197
151
|
font-size: 1rem;
|
|
198
152
|
font-weight: 500;
|
|
199
|
-
color: rgba(255, 255, 255, 0.
|
|
200
|
-
transition: color 0.2s ease-in-out;
|
|
153
|
+
color: rgba(255, 255, 255, 0.8);
|
|
201
154
|
}
|
|
202
155
|
|
|
203
|
-
.
|
|
156
|
+
.dropzone-active .dropzone-text {
|
|
204
157
|
color: #93c5fd;
|
|
205
158
|
font-weight: 600;
|
|
206
159
|
}
|
|
207
160
|
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
color: rgba(255, 255, 255, 0.6);
|
|
211
|
-
transition: color 0.2s ease-in-out;
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
.filedrop-zone.filedrop-active .filedrop-hint {
|
|
215
|
-
color: rgba(255, 255, 255, 0.8);
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
.filedrop-zone.filedrop-compact {
|
|
219
|
-
min-height: 120px;
|
|
220
|
-
padding: 1.5rem;
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
.filedrop-zone.filedrop-compact .filedrop-icon {
|
|
224
|
-
width: 2rem;
|
|
225
|
-
height: 2rem;
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
.filedrop-zone.filedrop-inline {
|
|
229
|
-
min-height: 80px;
|
|
230
|
-
padding: 1rem;
|
|
231
|
-
flex-direction: row;
|
|
232
|
-
justify-content: flex-start;
|
|
233
|
-
gap: 1rem;
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
.filedrop-zone.filedrop-inline .filedrop-content {
|
|
237
|
-
flex-direction: row;
|
|
238
|
-
align-items: center;
|
|
239
|
-
text-align: left;
|
|
240
|
-
gap: 0.75rem;
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
.filedrop-zone.filedrop-minimal {
|
|
244
|
-
border-style: solid;
|
|
245
|
-
border-width: 1px;
|
|
246
|
-
background-color: transparent;
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
.filedrop-zone.filedrop-bold {
|
|
250
|
-
border-width: 3px;
|
|
251
|
-
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
|
|
252
|
-
}
|
|
253
|
-
|
|
254
|
-
.filedrop-files {
|
|
161
|
+
/* File List */
|
|
162
|
+
.filelist {
|
|
255
163
|
margin-top: 1rem;
|
|
256
|
-
|
|
164
|
+
text-align: left;
|
|
257
165
|
}
|
|
258
166
|
|
|
259
|
-
.
|
|
167
|
+
.filelist-header {
|
|
260
168
|
display: flex;
|
|
169
|
+
justify-content: space-between;
|
|
261
170
|
align-items: center;
|
|
262
|
-
gap: 0.75rem;
|
|
263
|
-
padding: 0.75rem;
|
|
264
|
-
background-color: rgba(255, 255, 255, 0.1);
|
|
265
|
-
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
266
|
-
border-radius: 0.5rem;
|
|
267
171
|
margin-bottom: 0.5rem;
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
background-color: rgba(255, 255, 255, 0.15);
|
|
273
|
-
border-color: rgba(255, 255, 255, 0.3);
|
|
172
|
+
padding-bottom: 0.5rem;
|
|
173
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
|
174
|
+
font-size: 0.9rem;
|
|
175
|
+
color: rgba(255, 255, 255, 0.7);
|
|
274
176
|
}
|
|
275
177
|
|
|
276
|
-
.
|
|
277
|
-
width: 2rem;
|
|
278
|
-
height: 2rem;
|
|
279
|
-
flex-shrink: 0;
|
|
178
|
+
.fileitem {
|
|
280
179
|
display: flex;
|
|
180
|
+
justify-content: space-between;
|
|
281
181
|
align-items: center;
|
|
282
|
-
|
|
283
|
-
background
|
|
284
|
-
border-radius: 0.
|
|
285
|
-
|
|
182
|
+
padding: 0.6rem 0.8rem;
|
|
183
|
+
background: rgba(255, 255, 255, 0.08);
|
|
184
|
+
border-radius: 0.4rem;
|
|
185
|
+
margin-bottom: 0.4rem;
|
|
286
186
|
}
|
|
287
187
|
|
|
288
|
-
.
|
|
289
|
-
|
|
290
|
-
min-width: 0;
|
|
188
|
+
.fileitem:hover {
|
|
189
|
+
background: rgba(255, 255, 255, 0.12);
|
|
291
190
|
}
|
|
292
191
|
|
|
293
|
-
.
|
|
294
|
-
font-size: 0.
|
|
295
|
-
font-weight: 500;
|
|
296
|
-
color: #fff;
|
|
297
|
-
white-space: nowrap;
|
|
192
|
+
.fileitem-name {
|
|
193
|
+
font-size: 0.9rem;
|
|
298
194
|
overflow: hidden;
|
|
299
195
|
text-overflow: ellipsis;
|
|
196
|
+
white-space: nowrap;
|
|
300
197
|
}
|
|
301
198
|
|
|
302
|
-
.
|
|
303
|
-
font-size: 0.
|
|
304
|
-
color: rgba(255, 255, 255, 0.
|
|
305
|
-
margin-
|
|
306
|
-
}
|
|
307
|
-
|
|
308
|
-
.filedrop-file-remove {
|
|
309
|
-
flex-shrink: 0;
|
|
310
|
-
width: 1.5rem;
|
|
311
|
-
height: 1.5rem;
|
|
312
|
-
display: flex;
|
|
313
|
-
align-items: center;
|
|
314
|
-
justify-content: center;
|
|
315
|
-
border-radius: 0.25rem;
|
|
316
|
-
color: rgba(255, 255, 255, 0.6);
|
|
317
|
-
cursor: pointer;
|
|
318
|
-
transition: all 0.2s ease-in-out;
|
|
319
|
-
pointer-events: auto;
|
|
320
|
-
background: transparent;
|
|
321
|
-
border: none;
|
|
322
|
-
font-size: 1rem;
|
|
323
|
-
}
|
|
324
|
-
|
|
325
|
-
.filedrop-file-remove:hover {
|
|
326
|
-
background-color: rgba(239, 68, 68, 0.2);
|
|
327
|
-
color: #fca5a5;
|
|
199
|
+
.fileitem-size {
|
|
200
|
+
font-size: 0.8rem;
|
|
201
|
+
color: rgba(255, 255, 255, 0.5);
|
|
202
|
+
margin-left: 1rem;
|
|
328
203
|
}
|