Merge pull request #61 from n1crack/development

update state when closing treeview by clicking outside, add fullscreen shortcut

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuefinder",
-  "version": "2.5.2",
+  "version": "2.5.3",
   "description": "Vuefinder is a file manager component for vuejs.",
   "type": "module",
   "files": [

src/components/Breadcrumb.vue

@@ -271,8 +271,12 @@ const vClickOutside = {
  */
 const toggleTreeView = () => {
   app.showTreeView = !app.showTreeView;
-  setStore('show-tree-view', app.showTreeView);
 }
+watch(() => app.showTreeView, (newShowTreeView, oldValue) => {
+  if (newShowTreeView !== oldValue) {
+    setStore('show-tree-view', newShowTreeView);
+  }
+});
 
 /**
  *

src/components/Toolbar.vue

@@ -73,7 +73,7 @@
 </template>
 
 <script setup>
-import {inject, ref} from 'vue';
+import {inject, ref, watch} from 'vue';
 import {FEATURES} from "../features.js";
 import ModalNewFolder from "./modals/ModalNewFolder.vue";
 import ModalNewFile from "./modals/ModalNewFile.vue";
@@ -108,16 +108,19 @@ app.emitter.on('vf-search-query', ({newQuery}) => {
 
 const toggleFullScreen = () => {
   app.fullScreen = !app.fullScreen;
+}
+
+watch(() => app.fullScreen, () => {
   if (app.fullScreen) {
-    // add body over flow hidden
+    // add body overflow hidden
     document.querySelector('body').style.overflow = 'hidden';
   } else {
-    // remove body over flow hidden
+    // remove body overflow hidden
     document.querySelector('body').style.overflow = '';
   }
   setStore('full-screen', app.fullScreen);
   app.emitter.emit('vf-fullscreen-toggle');
-}
+});
 
 // View Management
 const toggleView = () => {

src/components/modals/ModalAbout.vue

@@ -18,7 +18,7 @@
 
         <div>
           <div>
-            <nav class="flex" aria-label="Tabs">
+            <nav class="flex overflow-auto" aria-label="Tabs">
               <button v-for="tab in tabs" :key="tab.name"
                  @click="selectedTab = tab.key "
                  :class="[tab.key === selectedTab ? 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 border-sky-500' : 'text-gray-500 dark:text-gray-500 hover:text-gray-700 border-gray-300 dark:border-gray-600', 'px-3 py-2 border-b font-medium text-sm']" :aria-current="tab.current ? 'page' : undefined">{{ tab.name }}</button>
@@ -177,6 +177,12 @@
                 <kbd>Ctrl</kbd> + <kbd>,</kbd>
               </div>
             </div>
+            <div class="flex justify-between text-sm text-gray-500 dark:text-gray-400">
+              {{ t('Toggle Full Screen') }}
+              <div>
+                <kbd>Ctrl</kbd> + <kbd>Enter</kbd>
+              </div>
+            </div>
           </div>
         </div>
 

src/composables/useHotkeyActions.js

@@ -9,6 +9,7 @@ const KEYBOARD_SHORTCUTS = {
     F2: 'F2',
     F5: 'F5',
     DELETE: 'Delete',
+    ENTER: 'Enter',
     BACKSLASH: 'Backslash',
     KEY_A: 'KeyA',
     KEY_E: 'KeyE',
@@ -57,6 +58,11 @@ export function useHotkeyActions(app) {
             app.storage.setStore('show-tree-view', app.showTreeView);
         }
 
+        if (e.metaKey && e.code === KEYBOARD_SHORTCUTS.ENTER) {
+            app.fullScreen = !app.fullScreen;
+            app.root.focus();
+        }
+
         if (e.metaKey && e.code === KEYBOARD_SHORTCUTS.KEY_A) {
             app.dragSelect.selectAll();
             e.preventDefault()