Add initial logic for rendering the context menu

Author: DaneEveritt

resources/assets/scripts/components/server/components/FileManagerFileRow.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div class="row" :class="{ clickable: canEdit(file) }">
+        <div class="row" :class="{ clickable: canEdit(file) }" v-on:contextmenu="showContextMenu">
             <div class="flex-none icon">
                 <file-text-icon v-if="!file.symlink"/>
                 <link2-icon v-else/>
@@ -10,26 +10,106 @@
             <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>
     </div>
 </template>
 
 <script>
-    import { FileTextIcon, Link2Icon } from 'vue-feather-icons';
+    import { CopyIcon, CornerUpLeftIcon, DeleteIcon, DownloadIcon, Edit3Icon, FileTextIcon, FilePlusIcon, FolderPlusIcon, Link2Icon } from 'vue-feather-icons';
     import * as Helpers from './../../../helpers/index';
 
     export default {
         name: 'file-manager-file-row',
-        components: { FileTextIcon, Link2Icon },
+        components: {
+            CopyIcon, CornerUpLeftIcon, DeleteIcon, DownloadIcon,
+            Edit3Icon, FileTextIcon, FilePlusIcon, FolderPlusIcon,
+            Link2Icon,
+        },
         props: {
             file: {type: Object, required: true},
             editable: {type: Array, required: true}
         },
 
+        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;
+                }
+            });
 
+            // 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).
+            this.$parent.$on('collapse-menus', (uid) => {
+                if (this._uid !== uid) {
+                    this.contextMenuVisible = false;
+                }
+            })
+        },
+
+        beforeDestroy: function () {
+            document.removeEventListener('click', this.listener);
         },
 
         methods: {
+            /**
+             * Handle a right-click action on a file manager row.
+             *
+             * @param {Event} e
+             */
+            showContextMenu: function (e) {
+                e.preventDefault();
+                this.$parent.$emit('collapse-menus', this._uid);
+                this.contextMenuVisible = !this.contextMenuVisible;
+            },
+
             /**
              * Determine if a file can be edited on the Panel.
              *

resources/assets/styles/components/filemanager.css

@@ -29,6 +29,39 @@
       }
     }
   }
+
+  .context-menu {
+    @apply .absolute .bg-white .py-2 .border .rounded .text-grey-darker .text-sm .cursor-pointer;
+
+    & > div:not(:last-of-type) {
+      @apply .border-b .border-grey-lightest .pb-2 .mb-2;
+    }
+
+    & .context-row {
+      @apply .flex .flex-row .items-center .py-2 .px-8 .border-t .border-b .border-transparent;
+
+      & > .icon {
+        @apply .flex-none;
+
+        & > svg {
+          @apply .h-4;
+        }
+      }
+
+      & > .action {
+        @apply .flex-auto .pl-2;
+      }
+
+      &:hover {
+        @apply .bg-grey-lightest .border-t .border-b .border-grey-lighter;
+      }
+
+      &.danger:hover {
+        @apply .bg-red-lightest .border-t .border-b .border-red-lighter;
+      }
+
+    }
+  }
 }
 
 .filemanager-breadcrumbs {