context menu skelet

resources/js/components/Desktop/PopoverItem.vue

@@ -1,5 +1,5 @@
 <template>
-	<div v-if="isVisible" class="popover-item">
+	<div v-if="isVisible" class="popover-item" :class="side">
 		<slot></slot>
 	</div>
 </template>
@@ -10,7 +10,8 @@
 	export default {
 		name: 'PopoverItem',
 		props: [
-			'name'
+			'side',
+			'name',
 		],
 		data() {
 			return {
@@ -39,8 +40,15 @@
 		background: white;
 		border-radius: 8px;
 		overflow: hidden;
-		right: 0;
 		top: 50px;
+
+		&.left {
+			right: 0;
+		}
+
+		&.right {
+			left: 0;
+		}
 	}
 
 	@media (prefers-color-scheme: dark) {

resources/js/components/FilesView/DesktopToolbar.vue

@@ -38,7 +38,7 @@
 				<ToolbarGroup>
 					<PopoverWrapper>
 						<ToolbarButton @click.stop.native="showSortingMenu" source="preview-sorting" :action="$t('actions.sorting_view')" />
-						<PopoverItem name="desktop-sorting">
+						<PopoverItem name="desktop-sorting" side="left">
 							<FileSortingOptions />
 						</PopoverItem>
 					</PopoverWrapper>

resources/js/components/FilesView/FilePreviewToolbar.vue

@@ -6,9 +6,14 @@
 				<p class="title">{{ clipboard[0].name }}</p>
 				<span class="file-count"> ({{ showingImageIndex + ' ' + $t('pronouns.of') + ' ' + files.length }}) </span>
 			</div>
-			<span @click.stop="menuOpen" id="fast-preview-menu" class="fast-menu-icon group">
-				<more-horizontal-icon class="more-icon group-hover-text-theme" size="14" />
-			</span>
+			<PopoverWrapper>
+				<span @click.stop="showItemContextMenu" id="fast-preview-menu" class="fast-menu-icon group">
+					<more-horizontal-icon class="more-icon group-hover-text-theme" size="14" />
+				</span>
+				<PopoverItem name="file-preview-contextmenu" side="right">
+					<p>context menu</p>
+				</PopoverItem>
+			</PopoverWrapper>
 		</div>
 
 		<div class="created-at-wrapper">
@@ -30,6 +35,9 @@
 </template>
 
 <script>
+	import PopoverWrapper from '@/components/Desktop/PopoverWrapper'
+	import PopoverItem from '@/components/Desktop/PopoverItem'
+
     import ToolbarButton from '@/components/FilesView/ToolbarButton'
     import {XIcon, MoreHorizontalIcon} from 'vue-feather-icons'
     import {mapGetters} from 'vuex'
@@ -38,6 +46,9 @@
     export default {
         name: 'FilePreviewToolbar',
         components: {
+			PopoverWrapper,
+			PopoverItem,
+
             MoreHorizontalIcon,
             ToolbarButton,
             XIcon,
@@ -90,6 +101,13 @@
             },
         },
         methods: {
+			showItemContextMenu() {
+				if (this.$isMobile()) {
+					events.$emit('mobile-menu:show', 'file-menu')
+				} else {
+					events.$emit('popover:open', 'file-preview-contextmenu')
+				}
+			},
             increaseSizeOfPDF() {
                 events.$emit('document-zoom:in')
             },
@@ -121,9 +139,7 @@
                 })
             },
             menuOpen() {
-                if (this.$isMobile()) {
-                    events.$emit('mobile-menu:show', 'file-menu')
-                } else {
+                else {
                     events.$emit('showContextMenuPreview:show', this.clipboard[0])
                 }
             },