Initial commit

resources/js/components/VueFileManagerComponents/FilesView/UploadProgress.vue

@@ -0,0 +1,66 @@
+<template>
+    <transition name="info-panel">
+        <div v-if="uploadingFilesCount" class="upload-progress">
+            <div class="progress-title">
+				<span
+                >Uploading files {{ uploadingFilesCount.current }}/{{
+						uploadingFilesCount.total
+					}}</span
+                >
+            </div>
+            <ProgressBar :progress="uploadingFileProgress"/>
+        </div>
+    </transition>
+</template>
+
+<script>
+    import ProgressBar from '@/components/VueFileManagerComponents/FilesView/ProgressBar'
+    import {mapGetters} from 'vuex'
+
+    export default {
+        name: 'UploadProgress',
+        components: {
+            ProgressBar,
+        },
+        computed: {
+            ...mapGetters(['uploadingFileProgress', 'uploadingFilesCount'])
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "@assets/app.scss";
+
+    .info-panel-enter-active,
+    .info-panel-leave-active {
+        transition: all 0.3s ease;
+    }
+
+    .info-panel-enter,
+    .info-panel-leave-to {
+        opacity: 0;
+        transform: translateY(-100%);
+    }
+
+    .upload-progress {
+        width: 100%;
+        padding-bottom: 10px;
+        position: relative;
+        z-index: 1;
+
+        .progress-title {
+            font-weight: 700;
+            text-align: center;
+
+            span {
+                @include font-size(14);
+            }
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .progress-bar {
+            background: $dark_mode_foreground;
+        }
+    }
+</style>