- Mobile menu components refactoring

- Components name renaming
2026-04-28 02:50:39 +00:00 · 2021-04-14 11:17:29 +02:00
parent 16b7575fca
commit eba8903792
40 changed files with 1044 additions and 1340 deletions
@@ -0,0 +1,199 @@
+<template>
+    <PopupWrapper name="move">
+        <!--Title-->
+        <PopupHeader :title="$t('popup_move_item.title')" icon="move" />
+
+        <!--Content-->
+        <PopupContent type="height-limited" v-if="pickedItem">
+
+            <!--Show Spinner when loading folders-->
+            <Spinner v-if="isLoadingTree" />
+
+            <!--Folder tree-->
+            <div v-if="! isLoadingTree && navigation">
+                <ThumbnailItem v-if="fileInfoDetail.length < 2 || isSelectedItem" class="item-thumbnail" :item="pickedItem" info="location" />
+
+                <MultiSelected class="multiple-selected"
+                               :title="$t('file_detail.selected_multiple')"
+                               :subtitle="this.fileInfoDetail.length + ' ' + $tc('file_detail.items', this.fileInfoDetail.length)"
+                               v-if="fileInfoDetail.length > 1 && !isSelectedItem" />
+                    
+                <TreeMenu :disabled-by-id="pickedItem" :depth="1" :nodes="items" v-for="items in navigation" :key="items.id" />
+            </div>
+        </PopupContent>
+
+        <!--Actions-->
+        <PopupActions>
+            <ButtonBase
+                class="popup-button"
+                @click.native="$closePopup()"
+                button-style="secondary"
+            >{{ $t('popup_move_item.cancel') }}
+            </ButtonBase>
+            <ButtonBase
+                class="popup-button"
+                @click.native="moveItem"
+                :button-style="selectedFolder ? 'theme' : 'secondary'"
+            >{{ $t('popup_move_item.submit') }}
+            </ButtonBase>
+        </PopupActions>
+    </PopupWrapper>
+</template>
+
+<script>
+    import PopupWrapper from '@/components/Others/Popup/PopupWrapper'
+    import PopupActions from '@/components/Others/Popup/PopupActions'
+    import MultiSelected from '@/components/FilesView/MultiSelected'
+    import PopupContent from '@/components/Others/Popup/PopupContent'
+    import PopupHeader from '@/components/Others/Popup/PopupHeader'
+    import ThumbnailItem from '@/components/Others/ThumbnailItem'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
+    import Spinner from '@/components/FilesView/Spinner'
+    import TreeMenu from '@/components/Others/TreeMenu'
+    import {mapGetters} from 'vuex'
+    import {events} from '@/bus'
+
+    export default {
+        name: 'MoveItemPopup',
+        components: {
+            ThumbnailItem,
+            PopupWrapper,
+            MultiSelected,
+            PopupActions,
+            PopupContent,
+            PopupHeader,
+            ButtonBase,
+            TreeMenu,
+            Spinner,
+        },
+        computed: {
+            ...mapGetters(['navigation', 'fileInfoDetail']),
+        },
+        data() {
+            return {
+                selectedFolder: undefined,
+                pickedItem: undefined,
+                isLoadingTree: true,
+                isSelectedItem: false
+            }
+        },
+        methods: {
+            moveItem() {
+                // Prevent empty submit
+                if (!this.selectedFolder) return
+
+                // Prevent to move items to the same parent
+                if (this.fileInfoDetail.find(item => item.parent_id === this.selectedFolder.id)) return
+
+                // Move item
+                if (!this.isSelectedItem) {
+                    this.$store.dispatch('moveItem', {to_item: this.selectedFolder, isSelectedItem: null})
+                }
+
+                if (this.isSelectedItem) {
+                    this.$store.dispatch('moveItem', {to_item: this.selectedFolder, isSelectedItem: this.pickedItem})
+                }
+
+                console.log('to item:', this.selectedFolder);
+                console.log('isSelectedItem:', this.pickedItem);
+
+                // Close popup
+                events.$emit('popup:close')
+
+                // If is mobile, close the selecting mod after done the move action
+                if (this.$isMobile())
+                    events.$emit('mobileSelecting:stop')
+            },
+        },
+        mounted() {
+
+            // Select folder in tree
+            events.$on('pick-folder', folder => {
+
+                if (folder.id === this.pickedItem.id) {
+                    this.selectedFolder = undefined
+                } else {
+                    this.selectedFolder = folder
+                }
+            })
+
+            // Show Move item popup
+            events.$on('popup:open', args => {
+
+                if (args.name !== 'move') return
+
+                // Show tree spinner
+                this.isLoadingTree = true
+
+                // Get folder tree and hide spinner
+                this.$store.dispatch('getFolderTree').then(() => {
+                    this.isLoadingTree = false
+                })
+
+                // Store picked item
+                if (!this.fileInfoDetail.includes(args.item[0])) {
+                    this.pickedItem = args.item[0]
+                    this.isSelectedItem = true
+                }
+
+                if (this.fileInfoDetail.includes(args.item[0])) {
+                    this.pickedItem = this.fileInfoDetail[0]
+                    this.isSelectedItem = false
+                }
+            })
+
+            // Close popup
+            events.$on('popup:close', () => {
+
+                // Clear selected folder
+                setTimeout(() => {
+                    this.selectedFolder = undefined
+                }, 150)
+            })
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+@import '@assets/vuefilemanager/_variables';
+@import '@assets/vuefilemanager/_mixins';
+
+.item-thumbnail {
+    margin-bottom: 20px;
+}
+
+.multiple-selected {
+    padding: 0 20px;;
+    margin-bottom: 20px;
+
+    /deep/ .text {
+        .title {
+            color: $text;
+        }
+
+        .count {
+            color: $text-muted;
+        }
+    }
+
+    /deep/ .icon-wrapper {
+        .icon {
+            stroke: $theme;
+        }
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    .multiple-selected {
+        /deep/ .text {
+            .title {
+                color: $dark_mode_text_primary;
+            }
+
+            .count {
+                color: $dark_mode_text_secondary;
+            }
+        }
+    }
+}
+</style>