FediMovies/fedimovies-web
1
1
Fork 0
Code Pull requests Activity

Show loading indicator while attachment is being uploaded

Browse source
This commit is contained in:
silverpill 2023-02-21 19:41:43 +00:00
parent 302872d4ac
commit fe3a9ff0c2
3 changed files with 20 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
### Added ### Added
- Detect preferred color scheme. - Detect preferred color scheme.
- Show loading indicator while attachment is being uploaded.
## [1.21.0] - 2023-04-12 ## [1.21.0] - 2023-04-12

20
src/components/Loader.vue
View file

@ -8,18 +8,18 @@
<style scoped lang="scss"> <style scoped lang="scss">
/* https://github.com/loadingio/css-spinner/blob/master/dist/ripple.html */ /* https://github.com/loadingio/css-spinner/blob/master/dist/ripple.html */
$loader-size: 80px;
$loader-width: 4px;
.loader { .loader {
height: $loader-size; --loader-size: 80px;
--loader-width: 4px;
height: var(--loader-size);
position: relative; position: relative;
width: $loader-size; width: var(--loader-size);
} }
.loader div { .loader div {
animation: loader 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; animation: loader 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
border: $loader-width solid var(--loader-color); border: var(--loader-width) solid var(--loader-color);
border-radius: 50%; border-radius: 50%;
opacity: 1; opacity: 1;
position: absolute; position: absolute;
@ -32,18 +32,18 @@ $loader-width: 4px;
@keyframes loader { @keyframes loader {
0% { 0% {
height: 0; height: 0;
left: calc($loader-size / 2 - $loader-width); left: calc(var(--loader-size) / 2 - var(--loader-width));
opacity: 1; opacity: 1;
top: calc($loader-size / 2 - $loader-width); top: calc(var(--loader-size) / 2 - var(--loader-width));
width: 0; width: 0;
} }
100% { 100% {
height: $loader-size - $loader-width * 2; height: calc(var(--loader-size) - var(--loader-width) * 2);
left: 0; left: 0;
opacity: 0; opacity: 0;
top: 0; top: 0;
width: $loader-size - $loader-width * 2; width: calc(var(--loader-size) - var(--loader-width) * 2);
} }
} }
</style> </style>

11
src/components/PostEditor.vue
View file

@ -45,11 +45,12 @@
<button <button
type="button" type="button"
class="icon" class="icon"
title="Attach image" title="Attach file"
:disabled="!canAttachFile()" :disabled="!canAttachFile()"
@click="selectAttachment()" @click="selectAttachment()"
> >
<img src="@/assets/feather/paperclip.svg"> <img v-if="!isAttachmentLoading" src="@/assets/feather/paperclip.svg">
<loader v-else></loader>
<input <input
type="file" type="file"
ref="attachmentUploadInputRef" ref="attachmentUploadInputRef"
@ -140,6 +141,7 @@ import {
} from "@/api/posts" } from "@/api/posts"
import { User } from "@/api/users" import { User } from "@/api/users"
import Avatar from "@/components/Avatar.vue" import Avatar from "@/components/Avatar.vue"
import Loader from "@/components/Loader.vue"
import PostContent from "@/components/PostContent.vue" import PostContent from "@/components/PostContent.vue"
import VisibilityIcon from "@/components/VisibilityIcon.vue" import VisibilityIcon from "@/components/VisibilityIcon.vue"
import { useInstanceInfo } from "@/composables/instance" import { useInstanceInfo } from "@/composables/instance"
@ -451,6 +453,11 @@ $line-height: 1.5;
flex-grow: 1; flex-grow: 1;
} }
.loader {
--loader-size: #{$icon-size};
--loader-width: 2px;
}
.character-counter { .character-counter {
font-weight: bold; font-weight: bold;
} }