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-19 00:22: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/Auth.vue
+++ b/resources/js/components/VueFileManagerComponents/Auth.vue
@@ -472,6 +472,7 @@

 <style scoped lang="scss">
    @import "@assets/app.scss";
+    @import '@assets/vue-file-manager/_forms';

    .auth-form {
        text-align: center;
@@ -499,12 +500,14 @@
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 2px;
+            color: $text;
        }

        h2 {
            @include font-size(23);
            font-weight: 500;
            margin-bottom: 50px;
+            color: $text;
        }

        .block-form {
@@ -515,21 +518,6 @@
                text-align: right;
            }
        }
-
-        .additional-link {
-            @include font-size(16);
-            margin-top: 50px;
-            display: block;
-
-            b {
-                color: $theme;
-                cursor: pointer;
-
-                &:hover {
-                    text-decoration: underline;
-                }
-            }
-        }
    }

    @media only screen and (min-width: 690px) and (max-width: 960px) {
@@ -555,4 +543,13 @@
        }
    }

+    @media (prefers-color-scheme: dark) {
+        .auth-form {
+
+            h1, h2, .additional-link {
+                color: $dark_mode_text_primary;
+            }
+        }
+    }
+
 </style>
--- a/resources/js/components/VueFileManagerComponents/FilesView.vue
+++ b/resources/js/components/VueFileManagerComponents/FilesView.vue
@@ -141,11 +141,12 @@
            .files-container {
                padding-left: 15px;
                padding-right: 15px;
-                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
+                position: absolute;
+                overflow-y: auto;

                .file-list {
                    //height: 100%;
@@ -243,7 +244,7 @@
            }

            .toolbar-go-back span {
-                max-width: 140px;
+                max-width: 120px;
            }

            .grid .file-wrapper {
@@ -273,16 +274,4 @@
        }
    }

-    @media only screen and (max-width: 960px) {
-        #files-view .files-container {
-            left: 265px !important;
-        }
-    }
-
-    @media only screen and (max-width: 690px) {
-        #files-view .files-container {
-            left: 0 !important;
-        }
-    }
-
 </style>
--- 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>
--- a/resources/js/components/VueFileManagerComponents/Others/PageHeader.vue
+++ b/resources/js/components/VueFileManagerComponents/Others/PageHeader.vue
@@ -47,6 +47,7 @@
        .title {
            @include font-size(22);
            font-weight: 700;
+            color: $text;
        }

        .icon {
@@ -72,6 +73,10 @@
        .page-header {
            background: $dark_mode_background;

+            .title {
+                color: $dark_mode_text_primary;
+            }
+
            .icon path {
                fill: $theme;
            }
--- a/resources/js/components/VueFileManagerComponents/Others/TextLabel.vue
+++ b/resources/js/components/VueFileManagerComponents/Others/TextLabel.vue
@@ -14,7 +14,7 @@
    @import "@assets/app.scss";

    .text-label {
-        @include font-size(11);
+        @include font-size(10);
        color: $light_text;
        text-transform: uppercase;
        font-weight: 900;
--- a/resources/js/components/VueFileManagerComponents/Sidebar.vue
+++ b/resources/js/components/VueFileManagerComponents/Sidebar.vue
@@ -143,13 +143,13 @@
                if (this.app.favourites.find(folder => folder.unique_id == this.draggedItem.unique_id)) return

                // Store favourites folder
-                this.$store.dispatch('addToFavourites', this.draggedItem.unique_id)
+                this.$store.dispatch('addToFavourites', this.draggedItem)

            },
            removeFavourite(folder) {

                // Remove favourites folder
-                this.$store.dispatch('removeFromFavourites', folder.unique_id)
+                this.$store.dispatch('removeFromFavourites', folder)
            }
        },
        mounted() {
@@ -204,7 +204,7 @@

            .menu-list-item {
                display: block;
-                padding: 10px 15px;
+                padding: 10px 15px 10px 25px;
                @include transition(150ms);
                cursor: pointer;
                position: relative;
@@ -236,7 +236,7 @@
                    vertical-align: middle;

                    path {
-                        fill: $theme;
+                        fill: $text;
                    }
                }

@@ -280,7 +280,7 @@
                border: 2px dashed transparent;

                .menu-list-item {
-                    padding: 10px 13px;
+                    padding: 10px 13px 10 23px;

                    .icon {
                        @include font-size(20);
@@ -332,7 +332,7 @@
        }

        #sidebar {
-            position: fixed;
+            position: absolute;
            overflow-y: auto;
            top: 0;
            left: 0;
@@ -374,9 +374,18 @@

        .menu-list-wrapper {

-            .menu-list .menu-list-item:hover {
-                background: rgba($theme, .1);
+            .menu-list .menu-list-item {
+
+                .label {
+                    color: $dark_mode_text_primary;
+                }
+
+                &:hover {
+                    background: rgba($theme, .1);
+                }
            }
+
+
        }
    }

--- a/resources/js/components/VueFileManagerComponents/Sidebar/StorageSize.vue
+++ b/resources/js/components/VueFileManagerComponents/Sidebar/StorageSize.vue
@@ -47,6 +47,7 @@
            .title {
                @include font-size(14);
                font-weight: 700;
+                color: $text;
            }

            .size {
@@ -73,6 +74,10 @@
            .size {
                @include font-size(10);
            }
+
+            .title {
+                color: $dark_mode_text_primary;
+            }
        }
    }
 </style>
--- a/resources/js/components/VueFileManagerComponents/Sidebar/UserHeadline.vue
+++ b/resources/js/components/VueFileManagerComponents/Sidebar/UserHeadline.vue
@@ -77,10 +77,6 @@
        cursor: pointer;
        @include transition(150ms);

-        &:hover {
-            //background: rgba($theme, .1);
-        }
-
        &:active {
            transform: scale(0.95);
        }
@@ -99,6 +95,7 @@
            display: block;
            @include font-size(17);
            line-height: 1;
+            color: $text;
        }

        .email {
@@ -145,6 +142,7 @@
            padding: 15px 30px;
            cursor: pointer;
            width: 100%;
+            color: $text;

            &:hover {
                background: $light_background;
@@ -177,8 +175,8 @@

        .user-name {

-            .email {
-                color: $dark_mode_text_secondary;
+            .name {
+                color: $dark_mode_text_primary;
            }
        }

@@ -186,6 +184,8 @@
            background: $dark_mode_background;

            .menu-option {
+                color: $dark_mode_text_primary;
+
                &:hover {
                    background: $dark_mode_foreground;
                }
--- a/resources/js/components/VueFileManagerComponents/UserSettings.vue
+++ b/resources/js/components/VueFileManagerComponents/UserSettings.vue
@@ -165,6 +165,7 @@

 <style lang="scss">
    @import "@assets/app.scss";
+    @import '@assets/vue-file-manager/_forms';

    .avatar-upload {
        display: flex;
@@ -177,6 +178,7 @@
            .description {
                @include font-size(18);
                font-weight: 700;
+                color: $text;
            }

            .supported {
@@ -256,6 +258,10 @@

        .avatar-upload .info {

+            .description {
+                color: $dark_mode_text_primary;
+            }
+
            .supported {
                color: $dark_mode_text_secondary;
            }