@visns-studio/visns-components 5.1.17 → 5.1.18
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
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
78
78
|
},
|
|
79
79
|
"name": "@visns-studio/visns-components",
|
|
80
|
-
"version": "5.1.
|
|
80
|
+
"version": "5.1.18",
|
|
81
81
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
82
82
|
"main": "src/index.js",
|
|
83
83
|
"files": [
|
|
@@ -11,7 +11,19 @@ import { BlockPicker } from 'react-color';
|
|
|
11
11
|
import { CopyToClipboard } from 'react-copy-to-clipboard';
|
|
12
12
|
import { NumericFormat, PatternFormat } from 'react-number-format';
|
|
13
13
|
import { Editor } from '@tinymce/tinymce-react';
|
|
14
|
-
import {
|
|
14
|
+
import {
|
|
15
|
+
Edit,
|
|
16
|
+
ChevronRight,
|
|
17
|
+
Circle,
|
|
18
|
+
CircleFill,
|
|
19
|
+
CirclePlus,
|
|
20
|
+
CloudDownload,
|
|
21
|
+
Copy,
|
|
22
|
+
Minus,
|
|
23
|
+
ArrowBack,
|
|
24
|
+
TrashCan,
|
|
25
|
+
CircleX,
|
|
26
|
+
} from 'akar-icons';
|
|
15
27
|
import { toast } from 'react-toastify';
|
|
16
28
|
import styles from './styles/Field.module.scss';
|
|
17
29
|
|
|
@@ -19,6 +31,9 @@ import CustomFetch from './Fetch';
|
|
|
19
31
|
import Form from './Form';
|
|
20
32
|
import MultiSelect from './MultiSelect';
|
|
21
33
|
import Select from './Select';
|
|
34
|
+
import SketchConfig from './sketch/json/config.json';
|
|
35
|
+
import SketchField from './sketch/SketchField';
|
|
36
|
+
import Tools from './sketch/tools';
|
|
22
37
|
import VisnsAsyncSelect from './AsyncSelect';
|
|
23
38
|
import VisnsAutocomplete from './Autocomplete';
|
|
24
39
|
import VisnsDropZone from '../cms/DropZone';
|
|
@@ -63,6 +78,30 @@ function Field({
|
|
|
63
78
|
const [formItemClass, setFormItemClass] = useState('');
|
|
64
79
|
const [options, setOptions] = useState([]);
|
|
65
80
|
|
|
81
|
+
/** Canvas States */
|
|
82
|
+
const [canvasPopupOpen, setCanvasPopupOpen] = useState(false);
|
|
83
|
+
const [canvasUrl, setCanvasUrl] = useState('');
|
|
84
|
+
const [sketchTool, setSketchTool] = useState(Tools.Pencil);
|
|
85
|
+
const [toolClass, setToolClass] = useState('pencil');
|
|
86
|
+
const [lineWidth, setLineWidth] = useState(2);
|
|
87
|
+
const [lineColor, setLineColor] = useState('rgba(0, 0, 0, 1)');
|
|
88
|
+
const sketchRef = useRef(null);
|
|
89
|
+
|
|
90
|
+
/** Canvas Functions */
|
|
91
|
+
const handleCanvasSave = async () => {
|
|
92
|
+
// Save the current canvas state
|
|
93
|
+
const canvasState = sketchRef.current.saveCanvasState();
|
|
94
|
+
|
|
95
|
+
// Export the canvas image data as a Base64 string
|
|
96
|
+
const imageData = await sketchRef.current.exportCanvasImage(); // Use await here
|
|
97
|
+
|
|
98
|
+
// Call the onChangeCanvas function with both values
|
|
99
|
+
onChangeCanvas(settings, canvasState, imageData);
|
|
100
|
+
|
|
101
|
+
// Close the canvas popup
|
|
102
|
+
setCanvasPopupOpen(false);
|
|
103
|
+
};
|
|
104
|
+
|
|
66
105
|
const cover = {
|
|
67
106
|
position: 'fixed',
|
|
68
107
|
top: '0px',
|
|
@@ -203,6 +242,7 @@ function Field({
|
|
|
203
242
|
}
|
|
204
243
|
});
|
|
205
244
|
} else {
|
|
245
|
+
console.info(s);
|
|
206
246
|
filter = {
|
|
207
247
|
where: [
|
|
208
248
|
{
|
|
@@ -212,20 +252,22 @@ function Field({
|
|
|
212
252
|
],
|
|
213
253
|
};
|
|
214
254
|
|
|
215
|
-
if (s
|
|
216
|
-
filter.fields = s.fields;
|
|
255
|
+
if (s?.child?.fields) {
|
|
256
|
+
filter.fields = s.child.fields;
|
|
217
257
|
}
|
|
218
258
|
|
|
219
|
-
if (s
|
|
220
|
-
filter.orderBy = s.orderBy;
|
|
259
|
+
if (s?.child?.orderBy) {
|
|
260
|
+
filter.orderBy = s.child.orderBy;
|
|
221
261
|
}
|
|
222
262
|
|
|
223
|
-
if (s
|
|
224
|
-
forEach(s.where, (w) => {
|
|
263
|
+
if (s?.child?.where) {
|
|
264
|
+
forEach(s.child.where, (w) => {
|
|
225
265
|
filter.where.push(w);
|
|
226
266
|
});
|
|
227
267
|
}
|
|
228
268
|
|
|
269
|
+
console.info(filter, s.fields);
|
|
270
|
+
|
|
229
271
|
CustomFetch(s.child.url, 'POST', filter, function (result) {
|
|
230
272
|
childDropdownCallback({
|
|
231
273
|
id: s.child.id,
|
|
@@ -280,8 +322,6 @@ function Field({
|
|
|
280
322
|
'checkbox',
|
|
281
323
|
'colour',
|
|
282
324
|
'copytoclipboard',
|
|
283
|
-
'date',
|
|
284
|
-
'datetime',
|
|
285
325
|
'dropdown',
|
|
286
326
|
'dropdown-ajax',
|
|
287
327
|
'dynamicdata',
|
|
@@ -307,6 +347,14 @@ function Field({
|
|
|
307
347
|
{settings.label} {settings.required ? '*' : ''}
|
|
308
348
|
</span>
|
|
309
349
|
);
|
|
350
|
+
} else if (['date', 'datetime', 'time'].includes(settings.type)) {
|
|
351
|
+
return (
|
|
352
|
+
<span
|
|
353
|
+
className={`${styles.fi__span} ${styles.prefocusdate}`}
|
|
354
|
+
>
|
|
355
|
+
{settings.label} {settings.required ? '*' : ''}
|
|
356
|
+
</span>
|
|
357
|
+
);
|
|
310
358
|
} else if (['plaintext'].includes(settings.type)) {
|
|
311
359
|
if (settings.description) {
|
|
312
360
|
return (
|
|
@@ -687,7 +735,7 @@ function Field({
|
|
|
687
735
|
settings.multiple === true
|
|
688
736
|
) {
|
|
689
737
|
return (
|
|
690
|
-
|
|
738
|
+
<div className={styles['file-upload-container']}>
|
|
691
739
|
<input
|
|
692
740
|
type="file"
|
|
693
741
|
multiple
|
|
@@ -695,51 +743,53 @@ function Field({
|
|
|
695
743
|
className={inputClass[settings.id]}
|
|
696
744
|
onChange={onChange}
|
|
697
745
|
/>
|
|
746
|
+
|
|
698
747
|
{inputValue && inputValue.length > 0 && (
|
|
699
|
-
<ul className=
|
|
748
|
+
<ul className={styles['file-list']}>
|
|
700
749
|
{inputValue.map((file, index) => (
|
|
701
750
|
<li
|
|
702
751
|
key={`file-${settings.id}-${index}`}
|
|
703
752
|
>
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
753
|
+
<span
|
|
754
|
+
className={styles['file-name']}
|
|
755
|
+
>
|
|
756
|
+
{file.name ||
|
|
757
|
+
file.file_name ||
|
|
758
|
+
''}
|
|
759
|
+
</span>
|
|
709
760
|
<button
|
|
710
|
-
className=
|
|
761
|
+
className={
|
|
762
|
+
styles['trash-button']
|
|
763
|
+
}
|
|
711
764
|
onClick={(e) => {
|
|
712
765
|
e.preventDefault();
|
|
713
766
|
e.stopPropagation();
|
|
714
|
-
|
|
715
|
-
const updatedFiles =
|
|
716
|
-
inputValue.filter(
|
|
717
|
-
(_, fileIndex) =>
|
|
718
|
-
fileIndex !==
|
|
719
|
-
index
|
|
720
|
-
);
|
|
721
|
-
|
|
722
767
|
setFormData(
|
|
723
768
|
(prevFormData) => ({
|
|
724
769
|
...prevFormData,
|
|
725
770
|
[settings.id]:
|
|
726
|
-
|
|
771
|
+
inputValue.filter(
|
|
772
|
+
(
|
|
773
|
+
_,
|
|
774
|
+
fileIndex
|
|
775
|
+
) =>
|
|
776
|
+
fileIndex !==
|
|
777
|
+
index
|
|
778
|
+
),
|
|
727
779
|
})
|
|
728
780
|
);
|
|
729
781
|
}}
|
|
730
782
|
>
|
|
731
783
|
<TrashCan
|
|
732
|
-
data-tooltip-id="system-tooltip"
|
|
733
|
-
data-tooltip-content="Remove File"
|
|
734
784
|
strokeWidth={2}
|
|
735
|
-
size={
|
|
785
|
+
size={20}
|
|
736
786
|
/>
|
|
737
787
|
</button>
|
|
738
788
|
</li>
|
|
739
789
|
))}
|
|
740
790
|
</ul>
|
|
741
791
|
)}
|
|
742
|
-
|
|
792
|
+
</div>
|
|
743
793
|
);
|
|
744
794
|
} else {
|
|
745
795
|
return (
|
|
@@ -1922,6 +1972,126 @@ function Field({
|
|
|
1922
1972
|
updateForm={setChildForm}
|
|
1923
1973
|
/>
|
|
1924
1974
|
</Popup>
|
|
1975
|
+
<Popup
|
|
1976
|
+
open={canvasPopupOpen}
|
|
1977
|
+
onClose={() => setCanvasPopupOpen(false)}
|
|
1978
|
+
closeOnDocumentClick={false}
|
|
1979
|
+
>
|
|
1980
|
+
<div className={`${styles.modalwrap} ${styles['top--modal']}`}>
|
|
1981
|
+
<div className={styles.modal}>
|
|
1982
|
+
<div className={styles.modal__header}>
|
|
1983
|
+
<h1>Edit Canvas</h1>
|
|
1984
|
+
<button
|
|
1985
|
+
className={styles.modal__close}
|
|
1986
|
+
onClick={() => setCanvasPopupOpen(false)}
|
|
1987
|
+
>
|
|
1988
|
+
<CircleX size={24} color="#FFF" />
|
|
1989
|
+
</button>
|
|
1990
|
+
</div>
|
|
1991
|
+
<div
|
|
1992
|
+
className={`${styles.modal__content} ${styles.drawDiv}`}
|
|
1993
|
+
>
|
|
1994
|
+
{/* Sketch Tools */}
|
|
1995
|
+
<ul className={styles.drawactions}>
|
|
1996
|
+
<li>
|
|
1997
|
+
<button
|
|
1998
|
+
onClick={() => {
|
|
1999
|
+
handleCanvasSave();
|
|
2000
|
+
}}
|
|
2001
|
+
className={styles['drawactions--save']}
|
|
2002
|
+
>
|
|
2003
|
+
<CloudDownload size={16} /> Save
|
|
2004
|
+
</button>
|
|
2005
|
+
</li>
|
|
2006
|
+
<li>
|
|
2007
|
+
<button
|
|
2008
|
+
onClick={() => {
|
|
2009
|
+
setSketchTool(Tools.Pencil);
|
|
2010
|
+
setToolClass('pencil');
|
|
2011
|
+
}}
|
|
2012
|
+
className={`${
|
|
2013
|
+
styles['drawaction-pencil']
|
|
2014
|
+
} ${
|
|
2015
|
+
toolClass === 'pencil'
|
|
2016
|
+
? styles['drawactive']
|
|
2017
|
+
: ''
|
|
2018
|
+
}`}
|
|
2019
|
+
>
|
|
2020
|
+
<Edit size={16} /> Pencil
|
|
2021
|
+
</button>
|
|
2022
|
+
</li>
|
|
2023
|
+
<li>
|
|
2024
|
+
<button
|
|
2025
|
+
onClick={() => {
|
|
2026
|
+
setSketchTool(Tools.Line);
|
|
2027
|
+
|
|
2028
|
+
setToolClass('line');
|
|
2029
|
+
}}
|
|
2030
|
+
className={`${
|
|
2031
|
+
styles['drawaction-line']
|
|
2032
|
+
} ${
|
|
2033
|
+
toolClass === 'line'
|
|
2034
|
+
? styles['drawactive']
|
|
2035
|
+
: ''
|
|
2036
|
+
}`}
|
|
2037
|
+
>
|
|
2038
|
+
<Minus size={16} /> Line
|
|
2039
|
+
</button>
|
|
2040
|
+
</li>
|
|
2041
|
+
<li>
|
|
2042
|
+
<button
|
|
2043
|
+
onClick={() => {
|
|
2044
|
+
setSketchTool(Tools.Circle);
|
|
2045
|
+
|
|
2046
|
+
setToolClass('circle');
|
|
2047
|
+
}}
|
|
2048
|
+
className={`${
|
|
2049
|
+
styles['drawaction-circle']
|
|
2050
|
+
} ${
|
|
2051
|
+
toolClass === 'circle'
|
|
2052
|
+
? styles['drawactive']
|
|
2053
|
+
: ''
|
|
2054
|
+
}`}
|
|
2055
|
+
>
|
|
2056
|
+
<Circle size={16} /> Circle
|
|
2057
|
+
</button>
|
|
2058
|
+
</li>
|
|
2059
|
+
<li>
|
|
2060
|
+
<button
|
|
2061
|
+
onClick={() => sketchRef.current.undo()}
|
|
2062
|
+
className={styles['drawaction-undo']}
|
|
2063
|
+
>
|
|
2064
|
+
<ArrowBack size={16} /> Undo
|
|
2065
|
+
</button>
|
|
2066
|
+
</li>
|
|
2067
|
+
<li>
|
|
2068
|
+
<button
|
|
2069
|
+
onClick={() =>
|
|
2070
|
+
sketchRef.current.clearCanvas()
|
|
2071
|
+
}
|
|
2072
|
+
className={styles['drawactions--clear']}
|
|
2073
|
+
>
|
|
2074
|
+
<TrashCan size={16} /> Clear
|
|
2075
|
+
</button>
|
|
2076
|
+
</li>
|
|
2077
|
+
</ul>
|
|
2078
|
+
{(canvasUrl || inputValue?.state) && (
|
|
2079
|
+
<SketchField
|
|
2080
|
+
ref={sketchRef}
|
|
2081
|
+
width={740}
|
|
2082
|
+
height={800}
|
|
2083
|
+
tool={sketchTool}
|
|
2084
|
+
lineColor={lineColor}
|
|
2085
|
+
lineWidth={lineWidth}
|
|
2086
|
+
className={styles.drawcontainer}
|
|
2087
|
+
backgroundImage={canvasUrl}
|
|
2088
|
+
defaultValue={inputValue?.state || null}
|
|
2089
|
+
/>
|
|
2090
|
+
)}
|
|
2091
|
+
</div>
|
|
2092
|
+
</div>
|
|
2093
|
+
</div>
|
|
2094
|
+
</Popup>
|
|
1925
2095
|
</div>
|
|
1926
2096
|
);
|
|
1927
2097
|
}
|
|
@@ -152,6 +152,17 @@ select:not(:placeholder-shown) + .fi__span {
|
|
|
152
152
|
color: rgba(var(--paragraph-rgb), 0.65) !important;
|
|
153
153
|
}
|
|
154
154
|
|
|
155
|
+
.prefocusdate {
|
|
156
|
+
transform: translateX(10px) scale(0.9) !important;
|
|
157
|
+
opacity: 1 !important;
|
|
158
|
+
padding: 0 0.25rem !important;
|
|
159
|
+
background: var(--tertiary-color) !important;
|
|
160
|
+
font-weight: 400 !important;
|
|
161
|
+
transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1) !important;
|
|
162
|
+
z-index: 1 !important;
|
|
163
|
+
color: rgba(var(--paragraph-rgb), 0.65) !important;
|
|
164
|
+
}
|
|
165
|
+
|
|
155
166
|
.qtrItem {
|
|
156
167
|
flex-basis: 25%;
|
|
157
168
|
}
|
|
@@ -417,3 +428,228 @@ input[type='file']:hover {
|
|
|
417
428
|
color: var(--secondary-color);
|
|
418
429
|
}
|
|
419
430
|
}
|
|
431
|
+
|
|
432
|
+
.modalwrap {
|
|
433
|
+
background: var(--tertiary-color);
|
|
434
|
+
border-radius: 3px;
|
|
435
|
+
overflow: visible;
|
|
436
|
+
border-top-left-radius: var(--br);
|
|
437
|
+
border-top-right-radius: var(--br);
|
|
438
|
+
|
|
439
|
+
.modal {
|
|
440
|
+
width: 100%;
|
|
441
|
+
position: relative;
|
|
442
|
+
|
|
443
|
+
&__header {
|
|
444
|
+
width: 100%;
|
|
445
|
+
background: var(--primary-color);
|
|
446
|
+
border: 2px solid rgba(var(--primary-color), 1.05);
|
|
447
|
+
border-top-left-radius: var(--br);
|
|
448
|
+
border-top-right-radius: var(--br);
|
|
449
|
+
box-sizing: border-box;
|
|
450
|
+
|
|
451
|
+
h1 {
|
|
452
|
+
color: var(--secondary-color);
|
|
453
|
+
margin: 0;
|
|
454
|
+
padding: 0.75em 0.75em;
|
|
455
|
+
font-size: 1.15em;
|
|
456
|
+
}
|
|
457
|
+
|
|
458
|
+
.modal__close {
|
|
459
|
+
width: max-content;
|
|
460
|
+
position: absolute;
|
|
461
|
+
right: 5px;
|
|
462
|
+
top: 5px;
|
|
463
|
+
box-sizing: border-box;
|
|
464
|
+
background: rgba(var(--primary-color), 1.08);
|
|
465
|
+
cursor: pointer;
|
|
466
|
+
padding: 8px 8px;
|
|
467
|
+
margin: 0;
|
|
468
|
+
outline: none;
|
|
469
|
+
border: none;
|
|
470
|
+
border-radius: var(--br);
|
|
471
|
+
display: block;
|
|
472
|
+
line-height: 1;
|
|
473
|
+
|
|
474
|
+
svg {
|
|
475
|
+
color: var(--secondary-color);
|
|
476
|
+
display: block;
|
|
477
|
+
}
|
|
478
|
+
}
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
&__content {
|
|
482
|
+
width: 100%;
|
|
483
|
+
position: relative;
|
|
484
|
+
padding: 0.25rem;
|
|
485
|
+
box-sizing: border-box;
|
|
486
|
+
border-top-left-radius: var(--br);
|
|
487
|
+
border-top-right-radius: var(--br);
|
|
488
|
+
|
|
489
|
+
.btn {
|
|
490
|
+
background: var(--primary-color);
|
|
491
|
+
border: 1px solid rgba(var(--primary-color), 1.05);
|
|
492
|
+
|
|
493
|
+
&:hover {
|
|
494
|
+
background: var(--secondary-color);
|
|
495
|
+
color: var(--tertiary-color);
|
|
496
|
+
}
|
|
497
|
+
}
|
|
498
|
+
}
|
|
499
|
+
}
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
.top--modal {
|
|
503
|
+
width: 100%;
|
|
504
|
+
max-width: 1000px !important;
|
|
505
|
+
height: auto;
|
|
506
|
+
// display: none;
|
|
507
|
+
padding: 0 !important;
|
|
508
|
+
}
|
|
509
|
+
|
|
510
|
+
// Canvas
|
|
511
|
+
|
|
512
|
+
.drawDiv {
|
|
513
|
+
width: 100%;
|
|
514
|
+
display: flex;
|
|
515
|
+
justify-content: space-between;
|
|
516
|
+
|
|
517
|
+
img {
|
|
518
|
+
width: 100%;
|
|
519
|
+
max-width: 470px;
|
|
520
|
+
display: block;
|
|
521
|
+
margin: 0 auto;
|
|
522
|
+
}
|
|
523
|
+
}
|
|
524
|
+
|
|
525
|
+
.drawactions {
|
|
526
|
+
width: 100%;
|
|
527
|
+
height: auto;
|
|
528
|
+
list-style: none;
|
|
529
|
+
padding: 0 1em 0 0;
|
|
530
|
+
margin: 0;
|
|
531
|
+
flex: 1;
|
|
532
|
+
box-sizing: border-box;
|
|
533
|
+
|
|
534
|
+
li {
|
|
535
|
+
width: 100%;
|
|
536
|
+
margin: 0 0 2px 0;
|
|
537
|
+
|
|
538
|
+
button {
|
|
539
|
+
width: 100%;
|
|
540
|
+
color: var(--paragraph-color);
|
|
541
|
+
border: 1px solid transparent;
|
|
542
|
+
padding: 0.5em 1em;
|
|
543
|
+
border-radius: 6px;
|
|
544
|
+
text-align: left;
|
|
545
|
+
font-size: 0.875em;
|
|
546
|
+
|
|
547
|
+
.octicon {
|
|
548
|
+
margin-right: 8px;
|
|
549
|
+
transform: scale(0.8) translateY(-1px);
|
|
550
|
+
}
|
|
551
|
+
}
|
|
552
|
+
|
|
553
|
+
.drawactions--save {
|
|
554
|
+
background: #4ff1ba;
|
|
555
|
+
color: var(--paragraph-color);
|
|
556
|
+
}
|
|
557
|
+
|
|
558
|
+
.drawactions--clear {
|
|
559
|
+
background: #ff6a6a;
|
|
560
|
+
color: var(--paragraph-color);
|
|
561
|
+
}
|
|
562
|
+
|
|
563
|
+
.drawactive {
|
|
564
|
+
border: 1px solid rgba(var(--paragraph-color-rgb), 1.4);
|
|
565
|
+
background: rgba(var(--paragraph-color-rgb), 0.2);
|
|
566
|
+
color: rgba(var(--paragraph-color-rgb), 1.05);
|
|
567
|
+
}
|
|
568
|
+
}
|
|
569
|
+
}
|
|
570
|
+
|
|
571
|
+
.drawcontainer {
|
|
572
|
+
display: block;
|
|
573
|
+
flex: 0 1 80%;
|
|
574
|
+
margin: 0;
|
|
575
|
+
border: 1px dashed rgba(var(--primary-color-rgb), 1.2);
|
|
576
|
+
padding: 5px;
|
|
577
|
+
overflow: hidden;
|
|
578
|
+
box-sizing: border-box;
|
|
579
|
+
}
|
|
580
|
+
|
|
581
|
+
.canvasWrap {
|
|
582
|
+
display: block;
|
|
583
|
+
margin: 0 auto;
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
.canvas-container {
|
|
587
|
+
display: block;
|
|
588
|
+
margin: 0 auto;
|
|
589
|
+
}
|
|
590
|
+
|
|
591
|
+
/* File List Styling */
|
|
592
|
+
.file-upload-container {
|
|
593
|
+
display: flex;
|
|
594
|
+
flex-direction: column;
|
|
595
|
+
gap: 0.5em;
|
|
596
|
+
width: 100%;
|
|
597
|
+
}
|
|
598
|
+
|
|
599
|
+
.file-upload-container input[type='file'] {
|
|
600
|
+
padding: 8px;
|
|
601
|
+
border: 1px solid var(--border-color);
|
|
602
|
+
border-radius: var(--br);
|
|
603
|
+
width: auto;
|
|
604
|
+
background: var(--tertiary-color);
|
|
605
|
+
}
|
|
606
|
+
|
|
607
|
+
.file-list {
|
|
608
|
+
width: 100%;
|
|
609
|
+
border: 1px solid var(--border-color);
|
|
610
|
+
border-radius: var(--br);
|
|
611
|
+
background: var(--tertiary-color);
|
|
612
|
+
max-height: 200px;
|
|
613
|
+
overflow-y: auto;
|
|
614
|
+
padding: 0.5em;
|
|
615
|
+
}
|
|
616
|
+
|
|
617
|
+
.file-list li {
|
|
618
|
+
display: flex;
|
|
619
|
+
justify-content: space-between;
|
|
620
|
+
align-items: center;
|
|
621
|
+
padding: 0.75em 1em;
|
|
622
|
+
border-bottom: 1px solid var(--border-color);
|
|
623
|
+
font-size: 0.9rem;
|
|
624
|
+
background: white;
|
|
625
|
+
border-radius: 5px;
|
|
626
|
+
transition: background 0.3s;
|
|
627
|
+
margin-bottom: 5px;
|
|
628
|
+
}
|
|
629
|
+
|
|
630
|
+
.file-list li:last-child {
|
|
631
|
+
border-bottom: none;
|
|
632
|
+
}
|
|
633
|
+
|
|
634
|
+
.file-list li:hover {
|
|
635
|
+
background: rgba(var(--paragraph-color-rgb), 0.1);
|
|
636
|
+
}
|
|
637
|
+
|
|
638
|
+
.trash-button {
|
|
639
|
+
background: transparent;
|
|
640
|
+
border: none;
|
|
641
|
+
cursor: pointer;
|
|
642
|
+
color: var(--primary-color);
|
|
643
|
+
display: flex;
|
|
644
|
+
align-items: center;
|
|
645
|
+
transition: color 0.3s;
|
|
646
|
+
}
|
|
647
|
+
|
|
648
|
+
.trash-button:hover {
|
|
649
|
+
color: var(--secondary-color);
|
|
650
|
+
}
|
|
651
|
+
|
|
652
|
+
.trash-button svg {
|
|
653
|
+
width: 1.2em;
|
|
654
|
+
height: 1.2em;
|
|
655
|
+
}
|