From c68f28a88dbadb812fa3258ce0477f72abb95dad Mon Sep 17 00:00:00 2001
From: Ahmed Kandil <sa@tomorrowsystem.com>
Date: Mon, 24 Jun 2019 18:59:31 +0200
Subject: [PATCH 1/2] Extend settings

Add and apply more settings (btnClasses, showFullScreen, showAbout, showDiskList, viewType, folderIcon, showProperties, showSize, canDownload, canManage) from outside the compiled fileusing var fmSettings = {settings key:value pairs};
---
 INSTALL.md                                    | 100 ++++++++++++++++++
 src/components/blocks/InfoBlock.vue           |   8 +-
 src/components/blocks/Navbar.vue              |  60 +++++++----
 .../blocks/mixins/contextMenuRules.js         |  44 +++++---
 src/components/manager/DiskList.vue           |   6 +-
 src/components/manager/GridView.vue           |   8 +-
 src/components/manager/TableView.vue          |  12 ++-
 src/components/modals/views/Preview.vue       |   6 +-
 src/init.js                                   |   4 +
 src/store/settings/mutations.js               |   9 ++
 src/store/settings/store.js                   |  14 +++
 11 files changed, 226 insertions(+), 45 deletions(-)
 create mode 100644 INSTALL.md

diff --git a/INSTALL.md b/INSTALL.md
new file mode 100644
index 0000000..9cf3a49
--- /dev/null
+++ b/INSTALL.md
@@ -0,0 +1,100 @@
+## Installation
+
+### Laravel
+1. Create new laravel project
+    ```
+    composer create-project --prefer-dist laravel/laravel fm
+    ```
+
+2. Install file manager packend package
+    ```
+    composer require alexusmai/laravel-file-manager
+    ```
+
+3. Publish configuration file
+    ```
+    php artisan vendor:publish --tag=fm-config
+    ```
+
+4. Publish compiled and minimized js and css files
+    ```
+    php artisan vendor:publish --tag=fm-assets
+    ```
+
+5. Edit the content of `resources/views/welcome.blade.php` adding
+    ```
+    <!-- CSRF Token -->
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+
+    <!-- Styles -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
+    <link rel="stylesheet" href="http://github.com/%7B%7B%20asset('vendor/file-manager/css/file-manager.css') }}">
+
+    ....
+
+    <div class="container-fluid">
+        <div class="row justify-content-center">
+            <div class="col-12 py-3">
+                <div id="fm"></div>
+            </div>
+        </div>
+    </div>
+    ...
+    <!-- File manager js -->
+    <script src="http://github.com/%7B%7B%20asset('vendor/file-manager/js/file-manager.js') }}"></script>
+    ```
+
+### NPM
+1. Install node dependencies
+    ```
+    npm install
+    ```
+
+2. Install file manager frontend package
+    ```
+    npm install laravel-file-manager --save
+    ```
+
+3. Change the content of `resources/js/app.js` to
+    ```
+    import Vue from 'vue';
+    import Vuex from 'vuex';
+    import FileManager from 'laravel-file-manager'
+
+    Vue.use(Vuex);
+
+    const store = new Vuex.Store();
+
+    Vue.use(FileManager, {
+        store
+    });
+
+    window.fm = new Vue({
+        el: '#fm',
+        store,
+        template: '<file-manager></file-manager>'
+    });
+    ```
+
+4. Edit the content of `resources/views/welcome.blade.php` replacing 
+    ```
+    <link rel="stylesheet" href="http://github.com/%7B%7B%20asset('vendor/file-manager/css/file-manager.css') }}">
+    ```
+    And
+    ```
+    <script src="http://github.com/%7B%7B%20asset('vendor/file-manager/js/file-manager.js') }}"></script>
+    ```
+    With
+    ```
+    <script src="http://github.com/%7B%7B%20asset('js/app.js') }}"></script>
+    ```
+
+5. Compile frontend package
+    ```
+    npm run dev
+    ```
+
+6. Work on frontend package at `node_modules/laravel-file-manager` doing the modifications needed. Would be better to track changes using git
+
+7. Compile again by `npm run production` then copy final `public/js/app.js` to your laravel app `public/js/file-manager.js` you don't need any css files as it is already included in the js file
diff --git a/src/components/blocks/InfoBlock.vue b/src/components/blocks/InfoBlock.vue
index a16d744..36551d4 100644
--- a/src/components/blocks/InfoBlock.vue
+++ b/src/components/blocks/InfoBlock.vue
@@ -3,12 +3,12 @@
         <div class="col-auto">
             <span v-show="selectedCount">
                 {{ `${lang.info.selected} ${selectedCount}` }}
-                {{ `${lang.info.selectedSize} ${selectedFilesSize}` }}
+                <span v-if="extSettings.showSize">{{ `${lang.info.selectedSize} ${selectedFilesSize}` }}</span>
             </span>
             <span v-show="!selectedCount">
                 {{ `${lang.info.directories} ${directoriesCount}` }}
                 {{ `${lang.info.files} ${filesCount}` }}
-                {{ `${lang.info.size} ${filesSize}`}}
+                <span v-if="extSettings.showSize">{{ `${lang.info.size} ${filesSize}`}}</span>
             </span>
         </div>
         <div class="col-4">
@@ -42,6 +42,7 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
 import translate from './../../mixins/translate';
 import helper from './../../mixins/helper';
 
@@ -49,6 +50,9 @@ export default {
   name: 'InfoBlock',
   mixins: [translate, helper],
   computed: {
+    ...mapState('fm', {
+      extSettings: state => state.settings.extSettings,
+    }),
     /**
      * Active manager
      * @returns {default.computed.activeManager|(function())|string|activeManager}
diff --git a/src/components/blocks/Navbar.vue b/src/components/blocks/Navbar.vue
index a57387d..f941ff5 100644
--- a/src/components/blocks/Navbar.vue
+++ b/src/components/blocks/Navbar.vue
@@ -3,68 +3,79 @@
         <div class="row justify-content-between">
             <div class="col-auto">
                 <div class="btn-group" role="group">
-                    <button type="button" class="btn btn-secondary"
+                    <button type="button"
+                            v-bind:class="extSettings.btnClasses"
                             v-bind:disabled="backDisabled"
                             v-bind:title="lang.btn.back"
                             v-on:click="historyBack()">
                         <i class="fas fa-step-backward"></i>
                     </button>
-                    <button type="button" class="btn btn-secondary"
+                    <button type="button"
+                            v-bind:class="extSettings.btnClasses"
                             v-bind:disabled="forwardDisabled"
                             v-bind:title="lang.btn.forward"
                             v-on:click="historyForward()">
                         <i class="fas fa-step-forward"></i>
                     </button>
-                    <button type="button" class="btn btn-secondary"
+                    <button type="button"
+                            v-bind:class="extSettings.btnClasses"
                             v-on:click="refreshAll()"
                             v-bind:title="lang.btn.refresh">
                         <i class="fas fa-sync-alt"></i>
                     </button>
                 </div>
-                <div class="btn-group" role="group">
-                    <button type="button" class="btn btn-secondary"
+                <div v-if="extSettings.canManage" class="btn-group" role="group">
+                    <button type="button"
+                            v-bind:class="extSettings.btnClasses"
                             v-on:click="showModal('NewFile')"
                             v-bind:title="lang.btn.file">
                         <i class="far fa-file"></i>
                     </button>
-                    <button type="button" class="btn btn-secondary"
+                    <button type="button"
+                            v-bind:class="extSettings.btnClasses"
                             v-on:click="showModal('NewFolder')"
                             v-bind:title="lang.btn.folder">
                         <i class="far fa-folder"></i>
                     </button>
-                    <button type="button" class="btn btn-secondary"
+                    <button type="button"
+                            v-bind:class="extSettings.btnClasses"
                             disabled
                             v-if="uploading"
                             v-bind:title="lang.btn.upload">
                         <i class="fas fa-upload"></i>
                     </button>
-                    <button type="button" class="btn btn-secondary"
+                    <button type="button"
+                            v-bind:class="extSettings.btnClasses"
                             v-else
                             v-on:click="showModal('Upload')"
                             v-bind:title="lang.btn.upload">
                         <i class="fas fa-upload"></i>
                     </button>
-                    <button type="button" class="btn btn-secondary"
+                    <button type="button"
+                            v-bind:class="extSettings.btnClasses"
                             v-bind:disabled="!isAnyItemSelected"
                             v-on:click="showModal('Delete')"
                             v-bind:title="lang.btn.delete">
                         <i class="fas fa-trash-alt"></i>
                     </button>
                 </div>
-                <div class="btn-group" role="group">
-                    <button type="button" class="btn btn-secondary"
+                <div v-if="extSettings.canManage" class="btn-group" role="group">
+                    <button type="button"
+                            v-bind:class="extSettings.btnClasses"
                             v-bind:disabled="!isAnyItemSelected"
                             v-bind:title="lang.btn.copy"
                             v-on:click="toClipboard('copy')">
                         <i class="fas fa-copy"></i>
                     </button>
-                    <button type="button" class="btn btn-secondary"
+                    <button type="button"
+                            v-bind:class="extSettings.btnClasses"
                             v-bind:disabled="!isAnyItemSelected"
                             v-bind:title="lang.btn.cut"
                             v-on:click="toClipboard('cut')">
                         <i class="fas fa-cut"></i>
                     </button>
-                    <button type="button" class="btn btn-secondary"
+                    <button type="button"
+                            v-bind:class="extSettings.btnClasses"
                             v-bind:disabled="!clipboardType"
                             v-bind:title="lang.btn.paste"
                             v-on:click="paste">
@@ -74,29 +85,30 @@
             </div>
             <div class="col-auto text-right">
                 <div class="btn-group" role="group">
-                    <button type="button" class="btn btn-secondary"
-                            v-bind:class="[viewType === 'table' ? 'active' : '']"
+                    <button type="button"
+                            v-bind:class="[viewType === 'table' ? 'active' : '', extSettings.btnClasses]"
                             v-on:click="selectView('table')"
                             v-bind:title="lang.btn.table">
                         <i class="fas fa-th-list"></i>
                     </button>
-                    <button role="button" class="btn btn-secondary"
-                            v-bind:class="[viewType === 'grid' ? 'active' : '']"
+                    <button role="button"
+                            v-bind:class="[viewType === 'grid' ? 'active' : '', extSettings.btnClasses]"
                             v-on:click="selectView('grid')"
                             v-bind:title="lang.btn.grid">
                         <i class="fas fa-th"></i>
                     </button>
                 </div>
-                <div class="btn-group" role="group">
-                    <button type="button" class="btn btn-secondary"
+                <div v-if="extSettings.showFullScreen" class="btn-group" role="group">
+                    <button type="button"
                             v-bind:title="lang.btn.fullScreen"
-                            v-bind:class="{ active: fullScreen }"
+                            v-bind:class="[fullScreen ? 'active' : '', extSettings.btnClasses]"
                             v-on:click="screenToggle">
                         <i class="fas fa-expand-arrows-alt"></i>
                     </button>
                 </div>
-                <div class="btn-group" role="group">
-                    <button type="button" class="btn btn-secondary"
+                <div v-if="extSettings.showAbout" class="btn-group" role="group">
+                    <button type="button"
+                            v-bind:class="extSettings.btnClasses"
                             v-bind:title="lang.btn.about"
                             v-on:click="showModal('About')">
                         <i class="fas fa-question"></i>
@@ -108,12 +120,16 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
 import translate from './../../mixins/translate';
 import EventBus from './../../eventBus';
 
 export default {
   mixins: [translate],
   computed: {
+    ...mapState('fm', {
+      extSettings: state => state.settings.extSettings,
+    }),
     /**
      * Active manager name
      * @returns {default.computed.activeManager|(function())|string|activeManager}
diff --git a/src/components/blocks/mixins/contextMenuRules.js b/src/components/blocks/mixins/contextMenuRules.js
index 51291aa..c072a8c 100644
--- a/src/components/blocks/mixins/contextMenuRules.js
+++ b/src/components/blocks/mixins/contextMenuRules.js
@@ -2,14 +2,21 @@
  * Rules for context menu items (show/hide)
  * {name}Rule
  */
+import { mapState } from 'vuex';
 export default {
+  computed: {
+    ...mapState('fm', {
+      extSettings: state => state.settings.extSettings,
+    }),
+  },
   methods: {
     /**
      * Open - menu item status - show or hide
      * @returns {boolean}
      */
     openRule() {
-      return !this.multiSelect && this.firstItemType === 'dir';
+      return !this.multiSelect &&
+          this.firstItemType === 'dir';
     },
 
     /**
@@ -26,7 +33,8 @@ export default {
      * @returns {boolean}
      */
     videoPlayRule() {
-      return !this.multiSelect && this.canVideoPlay(this.selectedItems[0].extension);
+      return !this.multiSelect &&
+          this.canVideoPlay(this.selectedItems[0].extension);
     },
 
     /**
@@ -44,7 +52,8 @@ export default {
      * @returns {boolean|*}
      */
     editRule() {
-      return !this.multiSelect &&
+      return this.extSettings.canManage &&
+          !this.multiSelect &&
           this.firstItemType === 'file' &&
           this.canEdit(this.selectedItems[0].extension);
     },
@@ -54,7 +63,8 @@ export default {
      * @returns {boolean|null}
      */
     selectRule() {
-      return !this.multiSelect && this.firstItemType === 'file' &&
+      return !this.multiSelect &&
+          this.firstItemType === 'file' &&
           this.$store.state.fm.fileCallback;
     },
 
@@ -63,7 +73,9 @@ export default {
      * @returns {boolean}
      */
     downloadRule() {
-      return !this.multiSelect && this.firstItemType === 'file';
+      return this.extSettings.canDownload &&
+          !this.multiSelect &&
+          this.firstItemType === 'file';
     },
 
     /**
@@ -71,7 +83,7 @@ export default {
      * @returns {boolean}
      */
     copyRule() {
-      return true;
+      return this.extSettings.canManage;
     },
 
     /**
@@ -79,7 +91,7 @@ export default {
      * @returns {boolean}
      */
     cutRule() {
-      return true;
+      return this.extSettings.canManage;
     },
 
     /**
@@ -87,7 +99,8 @@ export default {
      * @returns {boolean}
      */
     renameRule() {
-      return !this.multiSelect;
+      return this.extSettings.canManage &&
+          !this.multiSelect;
     },
 
     /**
@@ -95,7 +108,8 @@ export default {
      * @returns {boolean}
      */
     pasteRule() {
-      return !!this.$store.state.fm.clipboard.type;
+      return this.extSettings.canManage &&
+          !!this.$store.state.fm.clipboard.type;
     },
 
     /**
@@ -103,7 +117,8 @@ export default {
      * @returns {boolean}
      */
     zipRule() {
-      return this.selectedDiskDriver === 'local';
+      return this.extSettings.canManage &&
+          this.selectedDiskDriver === 'local';
     },
 
     /**
@@ -111,7 +126,8 @@ export default {
      * @returns {boolean}
      */
     unzipRule() {
-      return this.selectedDiskDriver === 'local' &&
+      return this.extSettings.canManage &&
+          this.selectedDiskDriver === 'local' &&
           !this.multiSelect &&
           this.firstItemType === 'file' &&
           this.isZip(this.selectedItems[0].extension);
@@ -122,7 +138,7 @@ export default {
      * @returns {boolean}
      */
     deleteRule() {
-      return true;
+      return this.extSettings.canManage;
     },
 
     /**
@@ -130,7 +146,9 @@ export default {
      * @returns {boolean}
      */
     propertiesRule() {
-      return !this.multiSelect;
+      return this.extSettings.canManage &&
+          this.extSettings.showProperties &&
+          !this.multiSelect;
     },
   },
 };
diff --git a/src/components/manager/DiskList.vue b/src/components/manager/DiskList.vue
index 459a245..4778a9d 100644
--- a/src/components/manager/DiskList.vue
+++ b/src/components/manager/DiskList.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="fm-disk-list">
+    <div v-if="extSettings.showDiskList" class="fm-disk-list">
         <ul class="list-inline">
             <li class="list-inline-item" v-for="(disk, index) in disks" v-bind:key="index">
                 <span class="badge"
@@ -13,6 +13,7 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
 export default {
   name: 'DiskList',
   props: {
@@ -20,6 +21,9 @@ export default {
     manager: { type: String, required: true },
   },
   computed: {
+    ...mapState('fm', {
+      extSettings: state => state.settings.extSettings,
+    }),
     /**
      * Disk list
      * @returns {Array}
diff --git a/src/components/manager/GridView.vue b/src/components/manager/GridView.vue
index 614e802..08960d7 100644
--- a/src/components/manager/GridView.vue
+++ b/src/components/manager/GridView.vue
@@ -18,7 +18,7 @@
                  v-on:contextmenu.prevent="contextMenu(directory, $event)">
                 <div class="fm-item-icon">
                     <i class="fa-5x pb-2"
-                       v-bind:class="(acl && directory.acl === 0) ? 'fas fa-unlock-alt' : 'far fa-folder'"></i>
+                       v-bind:class="(acl && directory.acl === 0) ? 'fas fa-unlock-alt' : extSettings.folderIcon"></i>
                 </div>
                 <div class="fm-item-info">{{ directory.basename }}</div>
             </div>
@@ -48,7 +48,7 @@
                 <div class="fm-item-info">
                     {{ `${file.filename}.${file.extension}` }}
                     <br>
-                    {{ bytesToHuman(file.size) }}
+                    <span v-if="extSettings.showSize">{{ bytesToHuman(file.size) }}</span>
                 </div>
             </div>
         </div>
@@ -56,6 +56,7 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
 import translate from './../../mixins/translate';
 import helper from './../../mixins/helper';
 import managerHelper from './mixins/manager';
@@ -81,6 +82,9 @@ export default {
     }
   },
   computed: {
+    ...mapState('fm', {
+      extSettings: state => state.settings.extSettings,
+    }),
     /**
      * Image extensions list
      * @returns {*}
diff --git a/src/components/manager/TableView.vue b/src/components/manager/TableView.vue
index b9d6b3b..e50ffea 100644
--- a/src/components/manager/TableView.vue
+++ b/src/components/manager/TableView.vue
@@ -12,7 +12,7 @@
                                v-show="sortSettings.direction === 'up'"></i>
                         </template>
                     </th>
-                    <th class="w-10" v-on:click="sortBy('size')">
+                    <th v-if="extSettings.showSize" class="w-10" v-on:click="sortBy('size')">
                         {{ lang.manager.table.size }}
                         <template v-if="sortSettings.field === 'size'">
                             <i class="fas fa-sort-amount-down"
@@ -55,9 +55,9 @@
                     <td class="fm-content-item unselectable"
                         v-bind:class="(acl && directory.acl === 0) ? 'text-hidden' : ''"
                         v-on:dblclick="selectDirectory(directory.path)">
-                        <i class="far fa-folder"></i> {{ directory.basename }}
+                        <i v-bind:class="extSettings.folderIcon"></i> {{ directory.basename }}
                     </td>
-                    <td></td>
+                    <td v-if="extSettings.showSize"></td>
                     <td>{{ lang.manager.table.folder }}</td>
                     <td>
                         {{ timestampToDate(directory.timestamp) }}
@@ -75,7 +75,7 @@
                            v-bind:class="extensionToIcon(file.extension)"></i>
                         {{ file.filename ? file.filename : file.basename }}
                     </td>
-                    <td>{{ bytesToHuman(file.size) }}</td>
+                    <td v-if="extSettings.showSize">{{ bytesToHuman(file.size) }}</td>
                     <td>
                         {{ file.extension }}
                     </td>
@@ -89,6 +89,7 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
 import translate from './../../mixins/translate';
 import helper from './../../mixins/helper';
 import managerHelper from './mixins/manager';
@@ -100,6 +101,9 @@ export default {
     manager: { type: String, required: true },
   },
   computed: {
+    ...mapState('fm', {
+      extSettings: state => state.settings.extSettings,
+    }),
     /**
      * Sort settings
      * @returns {*}
diff --git a/src/components/modals/views/Preview.vue b/src/components/modals/views/Preview.vue
index 9fc2530..60a4ba8 100644
--- a/src/components/modals/views/Preview.vue
+++ b/src/components/modals/views/Preview.vue
@@ -23,7 +23,7 @@
         </div>
         <div v-if="showFooter" class="d-flex justify-content-between">
             <span class="d-block">
-                <button class="btn btn-info"
+                <button v-if="extSettings.canManage" class="btn btn-info"
                         v-bind:title="lang.modal.cropper.title" v-on:click="showCropperModule = true">
                     <i class="fas fa-crop-alt"></i>
                 </button>
@@ -36,6 +36,7 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
 import CropperModule from './../additions/Cropper.vue';
 import modal from './../mixins/modal';
 import translate from './../../../mixins/translate';
@@ -56,6 +57,9 @@ export default {
     this.setImgUrl();
   },
   computed: {
+    ...mapState('fm', {
+      extSettings: state => state.settings.extSettings,
+    }),
     /**
      * Selected disk
      * @returns {*}
diff --git a/src/init.js b/src/init.js
index 2685d81..505b3f5 100644
--- a/src/init.js
+++ b/src/init.js
@@ -35,4 +35,8 @@ export default function install(Vue, options = {}) {
   options.store.registerModule('fm', store);
 
   options.store.commit('fm/settings/manualSettings', options);
+
+  options.store.commit('fm/settings/extendSettings', fmSettings);
+
+  options.store.commit(`fm/${options.store.state.fm.activeManager}/setView`, options.store.state.fm.settings.extSettings.viewType);
 }
diff --git a/src/store/settings/mutations.js b/src/store/settings/mutations.js
index 64c296e..d23c68c 100644
--- a/src/store/settings/mutations.js
+++ b/src/store/settings/mutations.js
@@ -29,6 +29,15 @@ export default {
     }
   },
 
+  /**
+   * Extend settings
+   * @param state
+   * @param data
+   */
+  extendSettings(state, data) {
+    Object.assign(state.extSettings, data);
+  },
+
   /**
    * Initiate Axios baseUrl and headers
    * @param state
diff --git a/src/store/settings/store.js b/src/store/settings/store.js
index 2ee8683..529d967 100644
--- a/src/store/settings/store.js
+++ b/src/store/settings/store.js
@@ -40,6 +40,20 @@ export default {
         ar: Object.freeze(ar),
       },
 
+      // Extended settings
+      extSettings: {
+        btnClasses: 'btn btn-secondary',
+        showFullScreen: true,
+        showAbout: true,
+        showDiskList: true,
+        viewType: 'table',
+        folderIcon: 'far fa-folder',
+        showProperties: true,
+        showSize: true,
+        canDownload: true,
+        canManage: true,
+      },
+
       // Context menu items
       contextMenu: [
         [

From 04587f17333139fa9392026dbe9c58302317e7ab Mon Sep 17 00:00:00 2001
From: Ahmed Kandil <sa@tomorrowsystem.com>
Date: Sun, 30 Jun 2019 20:10:27 +0200
Subject: [PATCH 2/2] Add showBreadcrumb Option

---
 src/components/manager/Breadcrumb.vue | 6 +++++-
 src/store/settings/store.js           | 1 +
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/manager/Breadcrumb.vue b/src/components/manager/Breadcrumb.vue
index e477abd..9801fd2 100644
--- a/src/components/manager/Breadcrumb.vue
+++ b/src/components/manager/Breadcrumb.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="fm-breadcrumb">
+    <div v-if="extSettings.showBreadcrumb" class="fm-breadcrumb">
         <nav aria-label="breadcrumb">
             <ol class="breadcrumb"
                 v-bind:class="[manager === activeManager ? 'active-manager' : 'bg-light']">
@@ -21,12 +21,16 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
 export default {
   name: 'Breadcrumb',
   props: {
     manager: { type: String, required: true },
   },
   computed: {
+    ...mapState('fm', {
+      extSettings: state => state.settings.extSettings,
+    }),
     /**
      * Active manager name
      * @returns {default.computed.activeManager|(function())|string|activeManager}
diff --git a/src/store/settings/store.js b/src/store/settings/store.js
index 85800fd..62a39f3 100644
--- a/src/store/settings/store.js
+++ b/src/store/settings/store.js
@@ -46,6 +46,7 @@ export default {
         showFullScreen: true,
         showAbout: true,
         showDiskList: true,
+        showBreadcrumb: true,
         viewType: 'table',
         folderIcon: 'far fa-folder',
         showProperties: true,