Skip to content

Commit 77b545e

Browse files
authored
fix(external-sources): done button loading state behaviour (#770)
Co-authored-by: nd0ut <[email protected]>
1 parent 8cbbdb3 commit 77b545e

File tree

6 files changed

+48
-7
lines changed

6 files changed

+48
-7
lines changed

blocks/ExternalSource/ExternalSource.js

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,12 @@ export class ExternalSource extends UploaderBlock {
2828
total: 0,
2929

3030
isSelectionReady: false,
31+
isDoneBtnEnabled: false,
3132
couldSelectAll: false,
3233
couldDeselectAll: false,
3334
showSelectionStatus: false,
3435
counterText: '',
36+
doneBtnTextClass: 'uc-hidden',
3537

3638
onDone: () => {
3739
for (const message of this.$.selectedList) {
@@ -150,7 +152,9 @@ export class ExternalSource extends UploaderBlock {
150152
);
151153

152154
this.set$({
155+
doneBtnTextClass: message.isReady ? '' : 'uc-hidden',
153156
isSelectionReady: message.isReady,
157+
isDoneBtnEnabled: message.isReady && message.selectedFiles.length > 0,
154158
showSelectionStatus: message.isMultipleMode && message.total > 0,
155159
couldSelectAll: message.selectedCount < message.total,
156160
couldDeselectAll: message.selectedCount === message.total,
@@ -256,7 +260,7 @@ export class ExternalSource extends UploaderBlock {
256260
this.set$({
257261
selectedList: [],
258262
total: 0,
259-
isSelectionReady: false,
263+
isDoneBtnEnabled: false,
260264
couldSelectAll: false,
261265
couldDeselectAll: false,
262266
showSelectionStatus: false,
@@ -284,12 +288,10 @@ ExternalSource.template = /* HTML */ `
284288
<button type="button" set="onclick: onSelectAll; @hidden: !couldSelectAll" l10n="select-all"></button>
285289
<button type="button" set="onclick: onDeselectAll; @hidden: !couldDeselectAll" l10n="deselect-all"></button>
286290
</div>
287-
<button
288-
type="button"
289-
class="uc-done-btn uc-primary-btn"
290-
set="onclick: onDone; @disabled: !isSelectionReady"
291-
l10n="done"
292-
></button>
291+
<button type="button" class="uc-done-btn uc-primary-btn" set="onclick: onDone; @disabled: !isDoneBtnEnabled;">
292+
<uc-spinner set="@hidden: isSelectionReady"></uc-spinner>
293+
<span l10n="done" set="@class: doneBtnTextClass"></span>
294+
</button>
293295
</div>
294296
</div>
295297
`;

blocks/ExternalSource/external-source.css

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,3 +78,17 @@ uc-external-source uc-activity-header {
7878
uc-external-source uc-activity-header .uc-close-btn {
7979
pointer-events: auto;
8080
}
81+
82+
uc-external-source .uc-done-btn > span.uc-hidden {
83+
visibility: hidden;
84+
pointer-events: none;
85+
}
86+
87+
uc-external-source .uc-done-btn > uc-spinner {
88+
position: absolute;
89+
width: 100%;
90+
height: 100%;
91+
display: flex;
92+
align-items: center;
93+
justify-content: center;
94+
}

blocks/Spinner/Spinner.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { BaseComponent } from '@symbiotejs/symbiote';
2+
3+
export class Spinner extends BaseComponent {}
4+
5+
Spinner.template = /* HTML */ ` <div class="uc-spinner"></div> `;

blocks/Spinner/spinner.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
@keyframes uc-spinner-keyframes {
2+
from {
3+
transform: rotate(0deg);
4+
}
5+
to {
6+
transform: rotate(360deg);
7+
}
8+
}
9+
10+
.uc-spinner {
11+
width: 1em;
12+
height: 1em;
13+
border: solid 2px transparent;
14+
border-top-color: currentColor;
15+
border-left-color: currentColor;
16+
border-radius: 50%;
17+
animation: uc-spinner-keyframes 400ms linear infinite;
18+
}

blocks/themes/uc-basic/index.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
@import url('../../CloudImageEditor/index.css');
3131
@import url('../../CloudImageEditorActivity/index.css');
3232
@import url('../../Select/select.css');
33+
@import url('../../Spinner/spinner.css');
3334

3435
/* POST RESET */
3536
@import url('post-reset.css');

index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export { FormInput } from './blocks/FormInput/FormInput.js';
3232
export { ActivityHeader } from './blocks/ActivityHeader/ActivityHeader.js';
3333
export { Select } from './blocks/Select/Select.js';
3434
export { Copyright } from './blocks/Copyright/Copyright.js';
35+
export { Spinner } from './blocks/Spinner/Spinner.js';
3536

3637
// Solutions:
3738
export { FileUploaderRegular } from './solutions/file-uploader/regular/FileUploaderRegular.js';

0 commit comments

Comments
 (0)