V1.1

User Authentication - Login to user account - Register new user account - Reset user password Functionality - Added locations to menu - Added trash for deleted folders & files - Restore files or folders from trash - Empty trash function - Favourites folders - List of 5 latest uploads - Profile settings page - Storage info and upload limits Design - Night Mode - Navigation sidebar - Quick action buttons in mobile version - Improved mobile UX - Other small design improvements Settings - Enable/Disable user account registration - Set storage limitation - Set storage capacity for all users
2026-04-18 00:02:15 +00:00 · 2020-03-14 18:56:35 +01:00
parent 2deca027cd
commit 515e8ef5ef
42 changed files with 1107 additions and 996 deletions
--- a/resources/js/components/VueFileManagerComponents/FilesView/Alert.vue
+++ b/resources/js/components/VueFileManagerComponents/FilesView/Alert.vue
@@ -67,6 +67,10 @@
                this.button = 'That’s horrible!'
                this.emoji = '😢😢😢'
                this.buttonStyle = 'danger'
+
+                if (args.emoji) {
+                    this.emoji = args.emoji
+                }
            })

            // Show alert
@@ -80,6 +84,10 @@
                this.button = 'Awesome!'
                this.emoji = '🥳🥳🥳'
                this.buttonStyle = 'theme'
+
+                if (args.emoji) {
+                    this.emoji = args.emoji
+                }
            })

            // Close popup
--- a/resources/js/components/VueFileManagerComponents/FilesView/ContextMenu.vue
+++ b/resources/js/components/VueFileManagerComponents/FilesView/ContextMenu.vue
@@ -9,7 +9,7 @@
            <li class="menu-option" @click="addToFavourites" v-if="! $isTrashLocation() && item && item.type === 'folder'">{{ isInFavourites ? 'Remove Favourite' : 'Add To Favourites' }}</li>
            <li class="menu-option" @click="$store.dispatch('restoreItem', item)" v-if="item && $isTrashLocation()">Restore</li>
            <li class="menu-option" @click="createFolder" v-if="! $isTrashLocation()">Create Folder</li>
-            <li class="menu-option" @click="removeItem" v-if="! $isTrashLocation()">Delete</li>
+            <li class="menu-option" @click="removeItem" v-if="! $isTrashLocation() && item">Delete</li>
            <li class="menu-option" @click="$store.dispatch('emptyTrash')" v-if="$isTrashLocation()">Empty Trash</li>
            <li class="menu-option" @click="ItemDetail" v-if="item">Detail</li>
            <li class="menu-option" @click="downloadItem" v-if="isFile || isImage">Download</li>
@@ -46,9 +46,9 @@
        methods: {
            addToFavourites() {
                if (this.app.favourites && ! this.app.favourites.find(el => el.unique_id == this.item.unique_id)) {
-                    this.$store.dispatch('addToFavourites', this.item.unique_id)
+                    this.$store.dispatch('addToFavourites', this.item)
                } else {
-                    this.$store.dispatch('removeFromFavourites', this.item.unique_id)
+                    this.$store.dispatch('removeFromFavourites', this.item)
                }
            },
            downloadItem() {
@@ -82,12 +82,14 @@
            },
            showContextMenu(event, item) {
                let VerticalOffsetArea = item ? this.$refs.list.children.length * 50 : 50
-                let HorizontalOffsetArea = 150
+                let HorizontalOffsetArea = 190

                let container = document.getElementById('files-view')

-                let x = event.pageX - container.getBoundingClientRect().x
-                let y = event.pageY - container.getBoundingClientRect().y
+                var offset = container.getClientRects()[0];
+
+                let x = event.clientX - offset.left
+                let y = event.clientY - offset.top

                // Set position Y
                if ((container.offsetHeight - y) < VerticalOffsetArea) {
@@ -127,6 +129,7 @@

    .contextmenu {
        max-width: 190px;
+        width: 190px;
        position: absolute;
        z-index: 99;
        box-shadow: $shadow;
@@ -150,6 +153,7 @@
                padding: 15px 30px;
                cursor: pointer;
                width: 100%;
+                color: $text;

                &:hover {
                    background: $light_background;
@@ -165,6 +169,8 @@
            background: $dark_mode_foreground;

            .menu-options .menu-option {
+                color: $dark_mode_text_primary;
+
                &:hover {
                    background: $dark_mode_background;
                }
--- a/resources/js/components/VueFileManagerComponents/FilesView/DesktopToolbar.vue
+++ b/resources/js/components/VueFileManagerComponents/FilesView/DesktopToolbar.vue
@@ -170,6 +170,7 @@
            text-overflow: ellipsis;
            display: inline-block;
            vertical-align: middle;
+            color: $text;
        }
    }

@@ -208,5 +209,12 @@
        .toolbar .directory-name {
            color: $dark_mode_text_primary;
        }
+
+        .toolbar-go-back {
+
+            .back-directory-title {
+                color: $dark_mode_text_primary;
+            }
+        }
    }
 </style>
--- a/resources/js/components/VueFileManagerComponents/FilesView/FileInfoPanel.vue
+++ b/resources/js/components/VueFileManagerComponents/FilesView/FileInfoPanel.vue
@@ -174,6 +174,7 @@
            .name {
                @include font-size(16);
                font-weight: 600;
+                color: $text;
            }

            .mimetype {
@@ -206,6 +207,7 @@
                display: block;
                @include font-size(16);
                font-weight: bold;
+                color: $text;
            }
        }
    }
@@ -218,6 +220,23 @@
            .icon-preview {
                background: $dark_mode_background;
            }
+
+            .file-info {
+
+                .name {
+                    color: $dark_mode_text_primary;
+                }
+            }
+        }
+
+        .list-info {
+
+            .list-info-item {
+
+                span {
+                    color: $dark_mode_text_primary
+                }
+            }
        }
    }
 </style>
--- a/resources/js/components/VueFileManagerComponents/FilesView/FileItemList.vue
+++ b/resources/js/components/VueFileManagerComponents/FilesView/FileItemList.vue
@@ -45,7 +45,7 @@
                <span
                        ref="name"
                        @input="changeItemName"
-                        :contenteditable="!$isMobile()"
+                        :contenteditable="!$isMobile() && !$isTrashLocation()"
                        class="name"
                >{{ item.name }}</span
                >
--- a/resources/js/components/VueFileManagerComponents/FilesView/FilesContainer.vue
+++ b/resources/js/components/VueFileManagerComponents/FilesView/FilesContainer.vue
@@ -226,7 +226,6 @@
    }

    .file-content {
-        position: relative;
        display: flex;
        flex-wrap: nowrap;
    }
--- a/resources/js/components/VueFileManagerComponents/FilesView/MobileActionButton.vue
+++ b/resources/js/components/VueFileManagerComponents/FilesView/MobileActionButton.vue
@@ -34,6 +34,7 @@
        .label {
            @include font-size(14);
            font-weight: 700;
+            color: $text;
        }
    }

@@ -42,7 +43,11 @@
            background: $dark_mode_foreground;

            .icon path {
-                color: $theme;
+                fill: $theme;
+            }
+
+            .label {
+                color: $dark_mode_text_primary;
            }
        }
    }
--- a/resources/js/components/VueFileManagerComponents/FilesView/MobileActionButtonUpload.vue
+++ b/resources/js/components/VueFileManagerComponents/FilesView/MobileActionButtonUpload.vue
@@ -55,6 +55,7 @@
        .label {
            @include font-size(14);
            font-weight: 700;
+            color: $text;
        }
    }

@@ -63,7 +64,11 @@
            background: $dark_mode_foreground;

            .icon path {
-                color: $theme;
+                fill: $theme;
+            }
+
+            .label {
+                color: $dark_mode_text_primary;
            }
        }
    }
--- a/resources/js/components/VueFileManagerComponents/FilesView/MobileOptionList.vue
+++ b/resources/js/components/VueFileManagerComponents/FilesView/MobileOptionList.vue
@@ -92,9 +92,9 @@
        methods: {
            addToFavourites() {
                if (this.app.favourites && ! this.app.favourites.find(el => el.unique_id == this.fileInfoDetail.unique_id)) {
-                    this.$store.dispatch('addToFavourites', this.fileInfoDetail.unique_id)
+                    this.$store.dispatch('addToFavourites', this.fileInfoDetail)
                } else {
-                    this.$store.dispatch('removeFromFavourites', this.fileInfoDetail.unique_id)
+                    this.$store.dispatch('removeFromFavourites', this.fileInfoDetail)
                }
            },
            downloadItem() {
@@ -214,6 +214,7 @@

                .menu-option {
                    border-color: rgba($dark_mode_background, .5);
+                    color: $dark_mode_text_primary;
                }
            }
        }
--- a/resources/js/components/VueFileManagerComponents/FilesView/MobileToolbar.vue
+++ b/resources/js/components/VueFileManagerComponents/FilesView/MobileToolbar.vue
@@ -15,7 +15,9 @@

        <!--More Actions-->
        <div class="more-actions-button" @click="showSidebarMenu">
-            <FontAwesomeIcon icon="bars" v-if="isSmallAppSize"></FontAwesomeIcon>
+            <div class="tap-area">
+                <FontAwesomeIcon icon="bars" v-if="isSmallAppSize"></FontAwesomeIcon>
+            </div>
        </div>
    </div>
 </template>
@@ -140,6 +142,15 @@
        .more-actions-button {
            flex: 1;
            text-align: right;
+            position: relative;
+
+            .tap-area {
+                display: inline-block;
+                padding: 10px;
+                position: absolute;
+                right: -10px;
+                top: -20px;
+            }
        }
    }

@@ -151,6 +162,10 @@
            .directory-name {
                color: $dark_mode_text_primary;
            }
+
+            .more-actions-button svg path {
+                fill: $dark_mode_text_primary;
+            }
        }
    }
 </style>
--- a/resources/js/components/VueFileManagerComponents/FilesView/ToolbarButton.vue
+++ b/resources/js/components/VueFileManagerComponents/FilesView/ToolbarButton.vue
@@ -56,8 +56,8 @@
            background: $dark_mode_foreground;
        }

-        .icon svg path {
-            fill: $dark_mode_text_secondary;
+        .icon path {
+            fill: $dark_mode_text_primary;
        }
    }
 </style>
--- a/resources/js/components/VueFileManagerComponents/FilesView/ToolbarButtonUpload.vue
+++ b/resources/js/components/VueFileManagerComponents/FilesView/ToolbarButtonUpload.vue
@@ -8,6 +8,7 @@
                type="file"
                name="files[]"
                multiple
+                :disabled="$isTrashLocation() ? true : false"
        />
    </label>
 </template>
@@ -61,8 +62,8 @@
            background: $dark_mode_foreground;
        }

-        .icon svg path {
-            fill: $dark_mode_text_secondary;
+        .icon path {
+            fill: $dark_mode_text_primary;
        }
    }
 </style>