nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-18 08:12:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

added prettier

Browse Source
This commit is contained in:
Čarodej
2022-02-01 12:21:38 +01:00
parent 5ae875233b
commit b38b532cbe
284 changed files with 25410 additions and 25338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
resources/js/components/FilesView/UploadProgress.vue
View File

@@ -2,16 +2,21 @@
<transition name="info-panel">
<div v-if="fileQueue.length > 0" class="upload-progress">
<div class="progress-title">
<!--Is processing-->
<span v-if="isProcessingFile" class="flex items-center justify-center">
<span v-if="isProcessingFile" class="flex items-center justify-center">
<refresh-cw-icon size="12" class="sync-alt text-theme" />
{{ $t('uploading.processing_file') }}
</span>
<!--Multi file upload-->
<span v-if="!isProcessingFile && fileQueue.length > 0">
{{ $t('uploading.progress', {current:filesInQueueUploaded, total: filesInQueueTotal, progress: uploadingProgress}) }}
<span v-if="!isProcessingFile && fileQueue.length > 0">
{{
$t('uploading.progress', {
current: filesInQueueUploaded,
total: filesInQueueTotal,
progress: uploadingProgress,
})
}}
</span>
</div>
<div class="progress-wrapper">
@@ -25,102 +30,96 @@
</template>
<script>
import ProgressBar from "./ProgressBar";
import { RefreshCwIcon, XIcon } from 'vue-feather-icons'
import {mapGetters} from 'vuex'
import {events} from "../../bus";
import ProgressBar from './ProgressBar'
import { RefreshCwIcon, XIcon } from 'vue-feather-icons'
import { mapGetters } from 'vuex'
import { events } from '../../bus'
export default {
name: 'UploadProgress',
components: {
RefreshCwIcon,
ProgressBar,
XIcon,
export default {
name: 'UploadProgress',
components: {
RefreshCwIcon,
ProgressBar,
XIcon,
},
computed: {
...mapGetters(['filesInQueueUploaded', 'filesInQueueTotal', 'uploadingProgress', 'isProcessingFile', 'fileQueue']),
},
methods: {
cancelUpload() {
events.$emit('cancel-upload')
},
computed: {
...mapGetters([
'filesInQueueUploaded',
'filesInQueueTotal',
'uploadingProgress',
'isProcessingFile',
'fileQueue',
])
},
methods: {
cancelUpload() {
events.$emit('cancel-upload')
}
}
}
},
}
</script>
<style scoped lang="scss">
@import '../../../sass/vuefilemanager/variables';
@import '../../../sass/vuefilemanager/mixins';
@import '../../../sass/vuefilemanager/variables';
@import '../../../sass/vuefilemanager/mixins';
.sync-alt {
animation: spin 1s linear infinite;
margin-right: 5px;
.sync-alt {
animation: spin 1s linear infinite;
margin-right: 5px;
polyline, path {
color: inherit;
}
polyline,
path {
color: inherit;
}
}
@keyframes spin {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
@keyframes spin {
0% {
transform: rotate(0);
}
.info-panel-enter-active,
.info-panel-leave-active {
transition: all 0.3s ease;
100% {
transform: rotate(360deg);
}
}
.info-panel-enter,
.info-panel-leave-to {
opacity: 0;
transform: translateY(-100%);
}
.info-panel-enter-active,
.info-panel-leave-active {
transition: all 0.3s ease;
}
.upload-progress {
width: 100%;
position: relative;
z-index: 1;
.info-panel-enter,
.info-panel-leave-to {
opacity: 0;
transform: translateY(-100%);
}
.progress-wrapper {
display: flex;
.upload-progress {
width: 100%;
position: relative;
z-index: 1;
.cancel-icon {
cursor: pointer;
padding: 0 7px 0 13px;
.progress-wrapper {
display: flex;
&:hover {
.cancel-icon {
cursor: pointer;
padding: 0 7px 0 13px;
line {
color: inherit;
}
&:hover {
line {
color: inherit;
}
}
}
.progress-title {
font-weight: 700;
text-align: center;
span {
@include font-size(14);
}
}
}
.dark {
.progress-bar {
background: $dark_mode_foreground;
.progress-title {
font-weight: 700;
text-align: center;
span {
@include font-size(14);
}
}
}
.dark {
.progress-bar {
background: $dark_mode_foreground;
}
}
</style>