mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-20 00:42:16 +00:00
merge local with remote changes (Peter)
This commit is contained in:
Milos Holba
@@ -8,7 +8,7 @@
|
||||
<div class="icon-item">
|
||||
|
||||
<!-- MultiSelecting for the mobile version -->
|
||||
<div :class="{'check-select-folder' : this.data.type === 'folder', 'check-select' : this.data.type !== 'folder'}" v-if="mobileMultiSelect">
|
||||
<div :class="{'check-select-folder' : this.data.type === 'folder', 'check-select' : this.data.type !== 'folder'}" v-if="multiSelectMode">
|
||||
<div class="select-box" :class="{'select-box-active' : isClicked } ">
|
||||
<CheckIcon v-if="isClicked" class="icon" size="17"/>
|
||||
</div>
|
||||
@@ -58,7 +58,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span @click.stop="showItemActions" class="show-actions" v-if="$isMobile() && ! ( $checkPermission('visitor') && isFolder || mobileMultiSelect ) && canShowMobileOptions">
|
||||
<span @click.stop="showItemActions" class="show-actions" v-if="$isMobile() && ! ( $checkPermission('visitor') && isFolder || multiSelectMode ) && canShowMobileOptions">
|
||||
<FontAwesomeIcon icon="ellipsis-h" class="icon-action"></FontAwesomeIcon>
|
||||
</span>
|
||||
</div>
|
||||
@@ -132,7 +132,7 @@ export default {
|
||||
return {
|
||||
area: false,
|
||||
itemName: undefined,
|
||||
mobileMultiSelect: false
|
||||
multiSelectMode: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -193,7 +193,7 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.mobileMultiSelect && this.$isMobile()) {
|
||||
if (!this.multiSelectMode && this.$isMobile()) {
|
||||
// Open in mobile version on first click
|
||||
if (this.$isMobile() && this.isFolder) {
|
||||
// Go to folder
|
||||
@@ -212,7 +212,7 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
if (this.mobileMultiSelect && this.$isMobile()) {
|
||||
if (this.multiSelectMode && this.$isMobile()) {
|
||||
if (this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)) {
|
||||
this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.data)
|
||||
} else {
|
||||
@@ -240,7 +240,7 @@ export default {
|
||||
|
||||
//Clear selected data after open another folder
|
||||
this.$store.commit('CLEAR_FILEINFO_DETAIL')
|
||||
|
||||
|
||||
if (this.$isThisLocation('public')) {
|
||||
this.$store.dispatch('browseShared', [{ folder: this.data, back: false, init: false }])
|
||||
} else {
|
||||
@@ -264,12 +264,12 @@ export default {
|
||||
this.itemName = this.data.name
|
||||
|
||||
events.$on('mobileSelecting:start', () => {
|
||||
this.mobileMultiSelect = true
|
||||
this.multiSelectMode = true
|
||||
this.$store.commit('CLEAR_FILEINFO_DETAIL')
|
||||
})
|
||||
|
||||
events.$on('mobileSelecting:stop', () => {
|
||||
this.mobileMultiSelect = false
|
||||
this.multiSelectMode = false
|
||||
this.$store.commit('CLEAR_FILEINFO_DETAIL')
|
||||
})
|
||||
// Change item name
|
||||
@@ -564,11 +564,11 @@ export default {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.select-box {
|
||||
background-color: $dark_mode_foreground;
|
||||
background-color: lighten($dark_mode_foreground, 10%);
|
||||
}
|
||||
|
||||
.select-box-active {
|
||||
background-color: $theme;
|
||||
background-color: #f4f5f6;
|
||||
|
||||
.icon {
|
||||
stroke: $text;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -15,33 +15,37 @@
|
||||
</div>
|
||||
|
||||
<!--ContextMenu for Base location with MASTER permission-->
|
||||
<div v-if="baseLocationMasterMenu && ! multiSelectMode" class="mobile-actions">
|
||||
<MobileActionButton @click.native="createFolder" icon="folder-plus" :class="{'is-inactive' : multiSelectMode}">
|
||||
{{ $t('context_menu.add_folder') }}
|
||||
</MobileActionButton>
|
||||
<MobileActionButtonUpload :class="{'is-inactive' : multiSelectMode}">
|
||||
{{ $t('context_menu.upload') }}
|
||||
</MobileActionButtonUpload>
|
||||
<MobileMultiSelectButton @click.native="enableMultiSelectMode">
|
||||
{{ $t('context_menu.select') }}
|
||||
</MobileMultiSelectButton>
|
||||
<MobileActionButton class="preview-sorting" @click.native="showViewOptions" icon="preview-sorting">
|
||||
{{$t('preview_sorting.preview_sorting_button')}}
|
||||
</MobileActionButton>
|
||||
</div>
|
||||
<transition name="button">
|
||||
<div v-if="baseLocationMasterMenu && ! multiSelectMode" class="mobile-actions">
|
||||
<MobileActionButton @click.native="createFolder" icon="folder-plus" :class="{'is-inactive' : multiSelectMode}">
|
||||
{{ $t('context_menu.add_folder') }}
|
||||
</MobileActionButton>
|
||||
<MobileActionButtonUpload :class="{'is-inactive' : multiSelectMode}">
|
||||
{{ $t('context_menu.upload') }}
|
||||
</MobileActionButtonUpload>
|
||||
<MobileMultiSelectButton @click.native="enableMultiSelectMode">
|
||||
{{ $t('context_menu.select') }}
|
||||
</MobileMultiSelectButton>
|
||||
<MobileActionButton class="preview-sorting" @click.native="showViewOptions" icon="preview-sorting">
|
||||
{{$t('preview_sorting.preview_sorting_button')}}
|
||||
</MobileActionButton>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<!-- Selecting buttons -->
|
||||
<div v-if="multiSelectMode" class="mobile-actions">
|
||||
<MobileActionButton @click.native="selectAll" icon="check-square">
|
||||
{{$t('mobile_selecting.select_all')}}
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="deselectAll" icon="x-square">
|
||||
{{$t('mobile_selecting.deselect_all')}}
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="disableMultiSelectMode" icon="check">
|
||||
{{$t('mobile_selecting.done')}}
|
||||
</MobileActionButton>
|
||||
</div>
|
||||
<transition name="button">
|
||||
<div v-if="multiSelectMode" class="mobile-actions">
|
||||
<MobileActionButton @click.native="selectAll" icon="check-square">
|
||||
{{$t('mobile_selecting.select_all')}}
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="deselectAll" icon="x-square">
|
||||
{{$t('mobile_selecting.deselect_all')}}
|
||||
</MobileActionButton>
|
||||
<MobileActionButton @click.native="disableMultiSelectMode" icon="check">
|
||||
{{$t('mobile_selecting.done')}}
|
||||
</MobileActionButton>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<!--ContextMenu for Base location with VISITOR permission-->
|
||||
<div v-if="baseLocationVisitorMenu && ! multiSelectMode" class="mobile-actions">
|
||||
@@ -134,6 +138,25 @@
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.button-enter-active,
|
||||
.button-leave-active {
|
||||
transition: all 250ms;
|
||||
}
|
||||
|
||||
.button-enter {
|
||||
opacity: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.button-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(50%);
|
||||
}
|
||||
|
||||
.button-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.preview-sorting {
|
||||
background: $light_background !important;
|
||||
/deep/ .label {
|
||||
|
||||
@@ -81,7 +81,7 @@ export default {
|
||||
.multiselect-actions {
|
||||
display: flex;
|
||||
padding: 10px 15px;
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
138
resources/js/components/FilesView/ProcessingPopup.vue
Normal file
138
resources/js/components/FilesView/ProcessingPopup.vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<transition name="popup">
|
||||
<div class="popup" v-if="isZippingFiles">
|
||||
<div class="popup-wrapper">
|
||||
<div class="popup-content">
|
||||
<div class="spinner-wrapper">
|
||||
<Spinner/>
|
||||
</div>
|
||||
<h1 class="title">{{ $t('popup_zipping.title') }}</h1>
|
||||
<p class="message">{{ $t('popup_zipping.message') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Spinner from '@/components/FilesView/Spinner'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'ProcessingPopup',
|
||||
components: {
|
||||
Spinner
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'isZippingFiles'
|
||||
])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@assets/vue-file-manager/_variables';
|
||||
@import '@assets/vue-file-manager/_mixins';
|
||||
|
||||
.spinner-wrapper {
|
||||
padding-bottom: 90px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.popup {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 20;
|
||||
overflow: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.popup-wrapper {
|
||||
z-index: 12;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-width: 480px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) scale(1);
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
box-shadow: $light_mode_popup_shadow;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
|
||||
.title {
|
||||
@include font-size(22);
|
||||
font-weight: 700;
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.message {
|
||||
@include font-size(16);
|
||||
color: #333;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
.popup-wrapper {
|
||||
padding: 20px;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
|
||||
.title {
|
||||
@include font-size(19);
|
||||
}
|
||||
|
||||
.message {
|
||||
@include font-size(15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.popup-wrapper {
|
||||
background: $dark_mode_background;
|
||||
}
|
||||
.popup-content {
|
||||
.title {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.message {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Animations
|
||||
.popup-enter-active {
|
||||
animation: popup-in 0.35s 0.15s ease both;
|
||||
}
|
||||
|
||||
.popup-leave-active {
|
||||
animation: popup-in 0.15s ease reverse;
|
||||
}
|
||||
|
||||
@keyframes popup-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.7);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user