|
15 | 15 |
|
16 | 16 | <script lang="ts">
|
17 | 17 | import { getEmbeddedLabel } from '@hcengineering/platform'
|
18 |
| - import { |
19 |
| - Button, |
20 |
| - IconClose, |
21 |
| - Label, |
22 |
| - ProgressCircle, |
23 |
| - Scroller, |
24 |
| - tooltip |
25 |
| - } from '@hcengineering/ui' |
| 18 | + import { Button, IconClose, Label, ProgressCircle, Scroller, tooltip } from '@hcengineering/ui' |
26 | 19 | import { ObjectPresenter } from '@hcengineering/view-resources'
|
27 | 20 | import { createEventDispatcher, onMount } from 'svelte'
|
28 | 21 |
|
|
53 | 46 | }
|
54 | 47 |
|
55 | 48 | function handleCancelAll (): void {
|
56 |
| - upload?.files.forEach(element => { |
| 49 | + upload?.files.forEach((element) => { |
57 | 50 | if (element.cancel !== undefined) {
|
58 | 51 | element.cancel()
|
59 | 52 | }
|
|
76 | 69 | onMount(() => {
|
77 | 70 | return uploads.subscribe(updateState)
|
78 | 71 | })
|
79 |
| -
|
80 | 72 | </script>
|
81 | 73 |
|
82 | 74 | <div class="antiPopup upload-popup">
|
|
108 | 100 | <Scroller>
|
109 | 101 | <div class="upload-popup__content flex-col flex-no-shrink flex-gap-4">
|
110 | 102 | {#if upload}
|
111 |
| - {#each upload.files as [_, file] } |
112 |
| - {#if file.progress} |
113 |
| - <div class="upload-file-row flex-row-center justify-start flex-gap-4"> |
114 |
| - <div class="upload-file-row__status w-4"> |
115 |
| - {#if file.error} |
116 |
| - <IconError size={'small'} fill={'var(--negative-button-default)'} /> |
117 |
| - {:else if file.finished} |
118 |
| - <IconCompleted size={'small'} fill={'var(--positive-button-default)'} /> |
119 |
| - {:else} |
120 |
| - <ProgressCircle value={file.progress} size={'small'} primary /> |
121 |
| - {/if} |
122 |
| - </div> |
123 |
| - |
124 |
| - <div class="upload-file-row__content flex-col flex-gap-1"> |
125 |
| - <div class="label overflow-label" use:tooltip={{ label: getEmbeddedLabel(file.name) }}>{file.name}</div> |
126 |
| - <div class="flex-row-center flex-gap-2 text-sm"> |
| 103 | + {#each [...upload.files.values()] as file} |
| 104 | + {#if file.progress} |
| 105 | + <div class="upload-file-row flex-row-center justify-start flex-gap-4"> |
| 106 | + <div class="upload-file-row__status w-4"> |
127 | 107 | {#if file.error}
|
128 |
| - <Label label={uploader.status.Error} /> |
129 |
| - <span class="label overflow-label" use:tooltip={{ label: getEmbeddedLabel(error) }}>{error}</span> |
130 |
| - {:else if file.progress > 0} |
131 |
| - {#if file.finished} |
132 |
| - <Label label={uploader.status.Completed} /> |
133 |
| - {:else} |
134 |
| - <Label label={uploader.status.Uploading} /> |
135 |
| - <span>file.progress</span> |
| 108 | + <IconError size={'small'} fill={'var(--negative-button-default)'} /> |
| 109 | + {:else if file.finished} |
| 110 | + <IconCompleted size={'small'} fill={'var(--positive-button-default)'} /> |
| 111 | + {:else} |
| 112 | + <ProgressCircle value={file.progress} size={'small'} primary /> |
| 113 | + {/if} |
| 114 | + </div> |
| 115 | + |
| 116 | + <div class="upload-file-row__content flex-col flex-gap-1"> |
| 117 | + <div class="label overflow-label" use:tooltip={{ label: getEmbeddedLabel(file.name) }}>{file.name}</div> |
| 118 | + <div class="flex-row-center flex-gap-2 text-sm"> |
| 119 | + {#if file.error} |
| 120 | + <Label label={uploader.status.Error} /> |
| 121 | + <span class="label overflow-label" use:tooltip={{ label: getEmbeddedLabel(file.error) }}>{file.error}</span> |
| 122 | + {:else if file.progress > 0} |
| 123 | + {#if file.finished} |
| 124 | + <Label label={uploader.status.Completed} /> |
| 125 | + {:else} |
| 126 | + <Label label={uploader.status.Uploading} /> |
| 127 | + <span>file.progress</span> |
136 | 128 | {/if}
|
137 | 129 | {/if}
|
| 130 | + </div> |
138 | 131 | </div>
|
139 |
| - </div> |
140 | 132 |
|
141 |
| - <div class="upload-file-row__tools flex-row-center"> |
142 |
| - {#if file.error} |
143 |
| - <Button |
144 |
| - kind={'icon'} |
145 |
| - icon={IconRetry} |
146 |
| - iconProps={{ size: 'small' }} |
147 |
| - showTooltip={{ label: uploader.string.Retry }} |
148 |
| - on:click={() => { |
149 |
| - handleRetryFile(file) |
150 |
| - }} |
151 |
| - /> |
152 |
| - {/if} |
153 |
| - {#if !file.finished} |
154 |
| - <Button |
155 |
| - kind={'icon'} |
156 |
| - icon={IconClose} |
157 |
| - iconProps={{ size: 'small' }} |
158 |
| - showTooltip={{ label: uploader.string.Cancel }} |
159 |
| - on:click={() => { |
160 |
| - handleCancelFile(file) |
161 |
| - }} |
162 |
| - /> |
163 |
| - {/if} |
| 133 | + <div class="upload-file-row__tools flex-row-center"> |
| 134 | + {#if file.error} |
| 135 | + <Button |
| 136 | + kind={'icon'} |
| 137 | + icon={IconRetry} |
| 138 | + iconProps={{ size: 'small' }} |
| 139 | + showTooltip={{ label: uploader.string.Retry }} |
| 140 | + on:click={() => { |
| 141 | + handleRetryFile(file) |
| 142 | + }} |
| 143 | + /> |
| 144 | + {/if} |
| 145 | + {#if !file.finished} |
| 146 | + <Button |
| 147 | + kind={'icon'} |
| 148 | + icon={IconClose} |
| 149 | + iconProps={{ size: 'small' }} |
| 150 | + showTooltip={{ label: uploader.string.Cancel }} |
| 151 | + on:click={() => { |
| 152 | + handleCancelFile(file) |
| 153 | + }} |
| 154 | + /> |
| 155 | + {/if} |
| 156 | + </div> |
164 | 157 | </div>
|
165 |
| - </div> |
166 |
| - {/if} |
167 |
| - {/each} |
| 158 | + {/if} |
| 159 | + {/each} |
168 | 160 | {/if}
|
169 | 161 | </div>
|
170 | 162 | </Scroller>
|
|
0 commit comments