From cf3274213217ffd5e48e0dd549bbc2c38fea3ba7 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 18 Aug 2018 22:03:19 -0700
Subject: [PATCH] More file manager updates

---
 .../components/FileManagerContextMenu.vue     | 63 +++++++++++++
 .../server/components/FileManagerFileRow.vue  | 88 +++++++------------
 .../assets/styles/components/filemanager.css  | 10 +--
 3 files changed, 100 insertions(+), 61 deletions(-)
 create mode 100644 resources/assets/scripts/components/server/components/FileManagerContextMenu.vue

diff --git a/resources/assets/scripts/components/server/components/FileManagerContextMenu.vue b/resources/assets/scripts/components/server/components/FileManagerContextMenu.vue
new file mode 100644
index 000000000..74e768103
--- /dev/null
+++ b/resources/assets/scripts/components/server/components/FileManagerContextMenu.vue
@@ -0,0 +1,63 @@
+<template>
+    <div class="context-menu">
+        <div>
+            <div class="context-row">
+                <div class="icon">
+                    <edit3-icon/>
+                </div>
+                <div class="action"><span>Rename</span></div>
+            </div>
+            <div class="context-row">
+                <div class="icon">
+                    <corner-up-left-icon class="h-4"/>
+                </div>
+                <div class="action"><span class="text-left">Move</span></div>
+            </div>
+            <div class="context-row">
+                <div class="icon">
+                    <copy-icon class="h-4"/>
+                </div>
+                <div class="action">Copy</div>
+            </div>
+        </div>
+        <div>
+            <div class="context-row">
+                <div class="icon">
+                    <file-plus-icon class="h-4"/>
+                </div>
+                <div class="action">New File</div>
+            </div>
+            <div class="context-row">
+                <div class="icon">
+                    <folder-plus-icon class="h-4"/>
+                </div>
+                <div class="action">New Folder</div>
+            </div>
+        </div>
+        <div>
+            <div class="context-row">
+                <div class="icon">
+                    <download-icon class="h-4"/>
+                </div>
+                <div class="action">Download</div>
+            </div>
+            <div class="context-row danger">
+                <div class="icon">
+                    <delete-icon class="h-4"/>
+                </div>
+                <div class="action">Delete</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { CopyIcon, CornerUpLeftIcon, DeleteIcon, DownloadIcon, Edit3Icon, FilePlusIcon, FolderPlusIcon } from 'vue-feather-icons';
+
+    export default {
+        name: 'file-manager-context-menu',
+        components: {
+            CopyIcon, CornerUpLeftIcon, DeleteIcon, DownloadIcon, Edit3Icon, FilePlusIcon, FolderPlusIcon,
+        },
+    };
+</script>
diff --git a/resources/assets/scripts/components/server/components/FileManagerFileRow.vue b/resources/assets/scripts/components/server/components/FileManagerFileRow.vue
index a804cfae5..8720ef4a1 100644
--- a/resources/assets/scripts/components/server/components/FileManagerFileRow.vue
+++ b/resources/assets/scripts/components/server/components/FileManagerFileRow.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div class="row" :class="{ clickable: canEdit(file) }" v-on:contextmenu="showContextMenu">
+        <div class="row" :class="{ clickable: canEdit(file), 'active-selection': contextMenuVisible }" v-on:contextmenu="showContextMenu">
             <div class="flex-none icon">
                 <file-text-icon v-if="!file.symlink"/>
                 <link2-icon v-else/>
@@ -10,55 +10,21 @@
             <div class="flex-1 text-right text-grey-dark">{{formatDate(file.modified)}}</div>
             <div class="flex-none w-1/6"></div>
         </div>
-        <div class="context-menu" v-show="contextMenuVisible" ref="contextMenu">
-            <div>
-                <div class="context-row">
-                    <div class="icon"><edit3-icon/></div>
-                    <div class="action"><span>Rename</span></div>
-                </div>
-                <div class="context-row">
-                    <div class="icon"><corner-up-left-icon class="h-4"/></div>
-                    <div class="action"><span class="text-left">Move</span></div>
-                </div>
-                <div class="context-row">
-                    <div class="icon"><copy-icon class="h-4"/></div>
-                    <div class="action">Copy</div>
-                </div>
-            </div>
-            <div>
-                <div class="context-row">
-                    <div class="icon"><file-plus-icon class="h-4"/></div>
-                    <div class="action">New File</div>
-                </div>
-                <div class="context-row">
-                    <div class="icon"><folder-plus-icon class="h-4"/></div>
-                    <div class="action">New Folder</div>
-                </div>
-            </div>
-            <div>
-                <div class="context-row">
-                    <div class="icon"><download-icon class="h-4"/></div>
-                    <div class="action">Download</div>
-                </div>
-                <div class="context-row danger">
-                    <div class="icon"><delete-icon class="h-4"/></div>
-                    <div class="action">Delete</div>
-                </div>
-            </div>
-        </div>
+        <file-manager-context-menu class="context-menu" v-show="contextMenuVisible" ref="contextMenu"/>
     </div>
 </template>
 
 <script>
-    import { CopyIcon, CornerUpLeftIcon, DeleteIcon, DownloadIcon, Edit3Icon, FileTextIcon, FilePlusIcon, FolderPlusIcon, Link2Icon } from 'vue-feather-icons';
     import * as Helpers from './../../../helpers/index';
+    import { FileTextIcon, Link2Icon } from 'vue-feather-icons';
+    import isObject from 'lodash/isObject';
+    import FileManagerContextMenu from './FileManagerContextMenu';
 
     export default {
         name: 'file-manager-file-row',
         components: {
-            CopyIcon, CornerUpLeftIcon, DeleteIcon, DownloadIcon,
-            Edit3Icon, FileTextIcon, FilePlusIcon, FolderPlusIcon,
-            Link2Icon,
+            FileManagerContextMenu,
+            FileTextIcon, Link2Icon
         },
         props: {
             file: {type: Object, required: true},
@@ -67,23 +33,12 @@
 
         data: function () {
             return {
-                listener: null,
                 contextMenuVisible: false,
             };
         },
 
         mounted: function () {
-            // Handle a click anywhere in the document and hide the context menu if that click is not
-            // a right click and isn't occurring somewhere in the currently visible context menu.
-            this.listener = document.addEventListener('click', (e) => {
-                if (e.button !== 2
-                    && this.contextMenuVisible
-                    && e.target !== this.$refs.contextMenu
-                    && !this.$refs.contextMenu.contains(e.target)
-                ) {
-                    this.contextMenuVisible = false;
-                }
-            });
+            document.addEventListener('click', this._clickListener);
 
             // If the parent component emits the collapse menu event check if the unique ID of the component
             // is this one. If not, collapse the menu (we right clicked into another element).
@@ -95,19 +50,25 @@
         },
 
         beforeDestroy: function () {
-            document.removeEventListener('click', this.listener);
+            document.removeEventListener('click', this._clickListener, false);
         },
 
         methods: {
             /**
              * Handle a right-click action on a file manager row.
              *
-             * @param {Event} e
+             * @param {MouseEvent} e
              */
             showContextMenu: function (e) {
                 e.preventDefault();
                 this.$parent.$emit('collapse-menus', this._uid);
-                this.contextMenuVisible = !this.contextMenuVisible;
+
+                this.contextMenuVisible = true;
+
+                const menuWidth = this.$refs.contextMenu.$el.offsetWidth;
+                const positionElement = e.clientX - Math.round(menuWidth / 2);
+                
+                this.$refs.contextMenu.$el.style = `left: ${positionElement}; top: ${e.clientY}`;
             },
 
             /**
@@ -120,6 +81,21 @@
                 return this.editable.indexOf(file.mime) >= 0;
             },
 
+            /**
+             * Handle a click anywhere in the document and hide the context menu if that click is not
+             * a right click and isn't occurring somewhere in the currently visible context menu.
+             *
+             * @param {MouseEvent} e
+             * @private
+             */
+            _clickListener: function (e) {
+                if (e.button !== 2 && this.contextMenuVisible) {
+                    if (e.target !== this.$refs.contextMenu.$el && !this.$refs.contextMenu.$el.contains(e.target)) {
+                        this.contextMenuVisible = false;
+                    }
+                }
+            },
+
             readableSize: Helpers.readableSize,
             formatDate: Helpers.formatDate,
         }
diff --git a/resources/assets/styles/components/filemanager.css b/resources/assets/styles/components/filemanager.css
index a4de5ab7f..a938b4a2d 100644
--- a/resources/assets/styles/components/filemanager.css
+++ b/resources/assets/styles/components/filemanager.css
@@ -8,18 +8,18 @@
   }
 
   & .row {
-    @apply .flex .text-sm .py-3 .text-sm .border .border-transparent .text-black;
+    @apply .flex .text-sm .py-3 .text-sm .border .border-transparent .text-black .rounded;
 
     & > div {
       @apply .pr-4;
     }
 
     &.clickable {
-      @apply .rounded .cursor-pointer .no-underline;
+      @apply .cursor-pointer .no-underline;
+    }
 
-      &:hover {
-        @apply .bg-grey-lightest .border-blue-light .text-blue-dark;
-      }
+    &.active-selection, &.clickable:hover {
+      @apply .bg-grey-lightest .border-blue-light .text-blue-dark;
     }
 
     & > .icon {