fix: improve archive loading indicator
parent
63d4bfcf27
commit
5a380b79d2
|
@ -12,17 +12,25 @@
|
||||||
type="text"
|
type="text"
|
||||||
@keyup.enter="submit"
|
@keyup.enter="submit"
|
||||||
v-model.trim="name"
|
v-model.trim="name"
|
||||||
|
:disabled="loading"
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
v-for="(ext, format) in formats"
|
v-for="(ext, format) in formats"
|
||||||
:key="format"
|
:key="format"
|
||||||
|
:disabled="loading"
|
||||||
class="button button--block"
|
class="button button--block"
|
||||||
@click="archive(format)"
|
@click="archive(format)"
|
||||||
v-focus
|
v-focus
|
||||||
>
|
>
|
||||||
{{ ext }}
|
<i
|
||||||
|
v-if="loading && format === loadingFormat"
|
||||||
|
class="material-icons spin"
|
||||||
|
>
|
||||||
|
autorenew
|
||||||
|
</i>
|
||||||
|
<span v-else>{{ ext }}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -48,12 +56,19 @@ export default {
|
||||||
tarlz4: "tar.lz4",
|
tarlz4: "tar.lz4",
|
||||||
tarsz: "tar.sz",
|
tarsz: "tar.sz",
|
||||||
},
|
},
|
||||||
|
loading: false,
|
||||||
|
loadingFormat: "",
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState(["req", "selected"]),
|
...mapState(["req", "selected"]),
|
||||||
...mapGetters(["isFiles", "isListing"]),
|
...mapGetters(["isFiles", "isListing"]),
|
||||||
},
|
},
|
||||||
|
mounted() {
|
||||||
|
if (this.selected.length > 0) {
|
||||||
|
this.name = this.req.items[this.selected[0]].name;
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
cancel: function () {
|
cancel: function () {
|
||||||
this.$store.commit("closeHovers");
|
this.$store.commit("closeHovers");
|
||||||
|
@ -75,6 +90,8 @@ export default {
|
||||||
uri = uri.replace("//", "/");
|
uri = uri.replace("//", "/");
|
||||||
|
|
||||||
try {
|
try {
|
||||||
|
this.loading = true;
|
||||||
|
this.loadingFormat = format;
|
||||||
buttons.loading("archive");
|
buttons.loading("archive");
|
||||||
await api.archive(uri, this.name, format, ...items);
|
await api.archive(uri, this.name, format, ...items);
|
||||||
this.$store.commit("closeHovers");
|
this.$store.commit("closeHovers");
|
||||||
|
@ -83,6 +100,8 @@ export default {
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
this.$showError(e);
|
this.$showError(e);
|
||||||
} finally {
|
} finally {
|
||||||
|
this.loading = false;
|
||||||
|
this.loadingFormat = "";
|
||||||
buttons.done("archive");
|
buttons.done("archive");
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -44,7 +44,7 @@ video {
|
||||||
}
|
}
|
||||||
|
|
||||||
i.spin {
|
i.spin {
|
||||||
animation: 1s spin linear infinite, 1s pulse linear infinite;
|
animation: 1s spin linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
i.pulse-spin {
|
i.pulse-spin {
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
"delete": "حذف",
|
"delete": "حذف",
|
||||||
"directorySizes": "حساب أحجام الدليل",
|
"directorySizes": "حساب أحجام الدليل",
|
||||||
"download": "تحميل",
|
"download": "تحميل",
|
||||||
"edit": "Edit",
|
"edit": "تعديل",
|
||||||
"file": "ملف",
|
"file": "ملف",
|
||||||
"folder": "مجلّد",
|
"folder": "مجلّد",
|
||||||
"hideDotfiles": "إخفاء dotfiles",
|
"hideDotfiles": "إخفاء dotfiles",
|
||||||
|
|
|
@ -39,7 +39,7 @@
|
||||||
"submit": "Submit",
|
"submit": "Submit",
|
||||||
"switchView": "Switch view",
|
"switchView": "Switch view",
|
||||||
"toggleSidebar": "Toggle sidebar",
|
"toggleSidebar": "Toggle sidebar",
|
||||||
"unarchive": "Unarchive",
|
"unarchive": "Extract",
|
||||||
"update": "Update",
|
"update": "Update",
|
||||||
"upload": "Upload"
|
"upload": "Upload"
|
||||||
},
|
},
|
||||||
|
@ -171,7 +171,7 @@
|
||||||
"show": "Show",
|
"show": "Show",
|
||||||
"size": "Size",
|
"size": "Size",
|
||||||
"skipTrashMessage": "Skip trash bin and delete immediately",
|
"skipTrashMessage": "Skip trash bin and delete immediately",
|
||||||
"unarchive": "Unarchive",
|
"unarchive": "Extract",
|
||||||
"unarchiveDestinationLocationMessage": "Select the destination:",
|
"unarchiveDestinationLocationMessage": "Select the destination:",
|
||||||
"unarchiveFolderNameMessage": "Choose folder name:",
|
"unarchiveFolderNameMessage": "Choose folder name:",
|
||||||
"unarchiveMessage": "Choose the destination folder name:",
|
"unarchiveMessage": "Choose the destination folder name:",
|
||||||
|
|
Loading…
Reference in New Issue