1+ <div class =" mb-4" >
2+ <div class =" flex flex-row items-stretch rounded-lg border border-gray-200 dark:border-gray-700" >
3+ <div class =" w-48 h-full bg-white dark:bg-gray-700 rounded-l-lg" >
4+ {{ #each this.categories as |category index |}}
5+ <a
6+ href =" #"
7+ class =" flex flex-row px-4 py-2 border-b border-gray-200 dark:border-gray-900 hover:bg-blue-400
8+ {{ if (eq this.currentCategory.type category.type ) ' bg-blue-500' }}
9+ {{ if (eq index 0 ) ' rounded-tl-lg' }} "
10+ {{ on " click" (fn this.switchCategory category )}}
11+ >
12+ <div class =" w-6" >
13+ <FaIcon @icon ={{ category.icon }} @size =" sm" />
14+ </div >
15+ <div >{{ category.name }} </div >
16+ </a >
17+ {{ /each }}
18+ </div >
19+ <div class =" flex-1 border-l border-gray-200 dark:border-gray-700" >
20+ <div class =" p-4" >
21+ {{ #if this.isUploading }}
22+ <div
23+ class =" dropzone w-full rounded-lg px-4 py-8 bg-gray-50 dark:bg-gray-900 bg-opacity-25 text-gray-900 dark:text-white text-center flex flex-col items-center justify-center border-2 border-dashed border-gray-200 dark:border-indigo-500"
24+ >
25+ <div class =" flex items-center justify-center py-5" >
26+ <Spinner class =" text-sm dar:text-gray-100" @loadingMessage ={{ concat (t " common.uploading" ) " ..." }} />
27+ </div >
28+ </div >
29+ {{ else }}
30+ {{ #let (file-queue name =" files" onFileAdded =this.queueFile accept = (join " ," this.acceptedFileTypes )) as |queue |}}
31+ <FileDropzone @queue ={{ queue }} class =" dropzone file-dropzone" as |dropzone|>
32+ {{ #if dropzone.active }}
33+ {{ #if dropzone.valid }}
34+ {{ t " dropzone.drop-to-upload" }}
35+ {{ else }}
36+ {{ t " dropzone.invalid" }}
37+ {{ /if }}
38+ {{ else if queue.files.length}}
39+ <div class =" my-2" >
40+ <FaIcon @icon =" folder-open" class =" text-indigo-500 mr-2" />
41+ {{ t " dropzone.files-ready-for-upload" numOfFiles = (pluralize queue.files.length (t " dropzone.file" ))}}
42+ </div >
43+ <div class =" my-2" >({{ queue.progress }} %)</div >
44+ {{ else }}
45+ <h4 class =" font-semibold" >
46+ <FaIcon @icon =" folder-open" @size =" lg" class =" text-indigo-500 mr-2" />
47+ {{ t " dropzone.upload-avatar-files" }}
48+ </h4 >
49+ <div >
50+ {{ #if dropzone.supported }}
51+ <p class =" text-sm my-5" >{{ t " dropzone.dropzone-supported-avatars" }} </p >
52+ {{ /if }}
53+ <FileUpload @name =" files" @for =" files" @accept ={{ join " ," this.acceptedFileTypes }} @multiple ={{ true }} @onFileAdded ={{ this.queueFile }} >
54+ <a tabindex ={{ 0 }} class =" btn btn-magic cursor-pointer ml-1" >{{ t " dropzone.or-select-button-text" }} </a >
55+ </FileUpload >
56+ </div >
57+ {{ /if }}
58+ </FileDropzone >
59+ {{ /let }}
60+ {{ /if }}
61+ <div class =" space-y-4 mt-4" >
62+ {{ #if this.uploadQueue }}
63+ <div class =" space-y-2" >
64+ {{ #each this.uploadQueue as |file |}}
65+ <div class =" flex items-center justify-between bg-blue-100 border border-blue-800 dark:border-blue-800 py-1.5 shadow-sm rounded-lg px-4" >
66+ <div class =" text-xs text-blue-900 truncate" >{{ truncate-filename file.name 50 }} </div >
67+ <div class =" flex items-center text-sm" >
68+ <Spinner class =" text-blue-900 mr-2" />
69+ <span class =" font-bold text-blue-900" >{{ round file.progress }} %</span >
70+ </div >
71+ </div >
72+ {{ /each }}
73+ </div >
74+ {{ /if }}
75+ <div >
76+ <div class =" grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4" >
77+ {{ #each this.currentCategory.avatars as |file |}}
78+ <File @file ={{ file }} @onDelete ={{ this.removeFile }} />
79+ {{ /each }}
80+ </div >
81+ </div >
82+ </div >
83+ </div >
84+ </div >
85+ </div >
86+ </div >
0 commit comments