fix #1746: reuse contextual menu for all files

IceWhaleTech · Jul 31, 2024 · af97ec3 · af97ec3
1 parent 882369b
commit af97ec3
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 212 deletions.
diff --git a/main/src/components/filebrowser/components/ActionButton.vue b/main/src/components/filebrowser/components/ActionButton.vue
@@ -17,152 +17,15 @@
  * @FilePath: /CasaOS-UI/src/components/filebrowser/components/ActionButton.vue
 -->
 <template>
-	<div class="action-btn" @click.stop>
-		<b-dropdown :id="'dr-'+index" ref="dropDown" :close-on-click="false"
-					:position="'is-'+verticalPos+'-'+horizontalPos" animation="fade1"
-					append-to-body aria-role="list" class="file-dropdown"
-					@active-change="dorpActiveChange($event,'dr-'+index)">
-			<template #trigger>
-				<p role="button">
-					<b-icon id="das" custom-size="mdi-18px" icon="dots-horizontal">
-					</b-icon>
-				</p>
-			</template>
-			<b-dropdown-item aria-role="menuitem" @click="download">
-				{{ $t('Download') }}
-			</b-dropdown-item>
-			<b-dropdown-item aria-role="menuitem" @click="copyPath">
-				{{ $t('Copy Path') }}
-			</b-dropdown-item>
-			<hr class="dropdown-divider">
-			<b-dropdown-item aria-role="menuitem" @click="rename">
-				{{ $t('Rename') }}
-			</b-dropdown-item>
-			<b-dropdown-item aria-role="menuitem" @click="operate('move',item)">
-				{{ $t('Cut') }}
-			</b-dropdown-item>
-			<b-dropdown-item aria-role="menuitem" @click="operate('copy',item)">
-				{{ $t('Copy') }}
-			</b-dropdown-item>
-			<b-dropdown-item v-if="isWallpaperType" aria-role="menuitem" @click="setAsWallpaper(item)">
-				{{ $t('Set as wallpaper') }}
-			</b-dropdown-item>
-			<template v-if="item.is_dir">
-				<hr class="dropdown-divider">
-				<b-dropdown-item v-if="!isShared" aria-role="menuitem" @click="shareFoler">
-					{{ $t('Share') }}
-				</b-dropdown-item>
-				<b-dropdown-item v-else aria-role="menuitem" class="has-text-danger" @click="unShare">
-					{{ $t('UnShare') }}
-				</b-dropdown-item>
-			</template>
-
-			<hr class="dropdown-divider">
-			<b-dropdown-item v-if="!isConfirmed" aria-role="menuitem" class="has-text-danger"
-							 @click="isConfirmed = true">
-				{{ $t('Delete') }}
-			</b-dropdown-item>
-			<b-dropdown-item v-else aria-role="menuitem" class="has-text-danger" @click="deleteItem(item)">
-				{{ $t('Are you sure?') }}
-			</b-dropdown-item>
-		</b-dropdown>
+	<div class="action-btn" @click.stop="$emit('click', $event)">
+		<p role="button">
+			<b-icon custom-size="mdi-18px" icon="dots-horizontal" />
+		</p>
 	</div>
 </template>
 
 <script>
-import {mixin, wallpaperType} from '@/mixins/mixin';
-import has                    from 'lodash/has'
-
 export default {
-	mixins: [mixin],
-	inject: ['filePanel'],
-	props: {
-		cols: Number,
-		index: Number,
-		item: Object
-	},
-	data() {
-		return {
-			verticalPos: "bottom",
-			isConfirmed: false,
-			shareId: ""
-		}
-	},
-	computed: {
-		horizontalPos() {
-			return (this.index + 1) % this.cols == 0 ? "left" : "right"
-		},
-		isWallpaperType() {
-			return this.item.is_dir ? false : wallpaperType.includes(this.getFileExt(this.item))
-		},
-		isShared() {
-			const extensions = this.item.extensions
-			if (extensions === null) {
-				return false
-			} else {
-				if (has(extensions, 'share')) {
-					return extensions.share.shared === "true"
-				} else {
-					return false
-				}
-			}
-		}
-	},
-	mounted() {
-		document.addEventListener('contextmenu', this.hideContextMenu);
-
-	},
-	destroyed() {
-		document.removeEventListener('contextmenu', this.hideContextMenu)
-	},
-
-	methods: {
-		dorpActiveChange($event, el) {
-			if ($event) {
-				this.isConfirmed = false
-			}
-			const trigger = document.getElementById(el);
-			const bottomOffset = window.innerHeight - trigger.getBoundingClientRect().y - 216
-			this.verticalPos = bottomOffset > 0 ? "bottom" : "top"
-		},
-		hideContextMenu() {
-			this.$refs.dropDown.isActive = false
-		},
-		rename() {
-			this.$refs.dropDown.toggle()
-			this.filePanel.showRenameModal(this.item)
-		},
-
-		async shareFoler() {
-			this.$refs.dropDown.toggle()
-			const data = [{
-				path: this.item.path,
-				anonymous: true
-			}]
-			try {
-				await this.$api.samba.createShare(data)
-				this.filePanel.getShareLink(this.item)
-				this.filePanel.reloadShare()
-			} catch (error) {
-				this.isSaving = false
-				this.$buefy.toast.open({
-					message: error.response.data.message,
-					type: 'is-danger'
-				})
-			}
-		},
-
-		unShare() {
-			this.$refs.dropDown.toggle()
-			const data = {
-				id: this.item.extensions.share.id,
-			}
-			this.filePanel.handleUnShare(data)
-		}
-
-	},
+	emits: ['click']
 }
-</script>
-
-<style>
-</style>
+</script>
diff --git a/main/src/components/filebrowser/components/GirdView.vue b/main/src/components/filebrowser/components/GirdView.vue
@@ -55,16 +55,7 @@
 									</b-field>
 									<!-- CheckBox End -->
 
-									<!-- Action Button Start -->
-									<action-button
-										:class="{ show: isMobile }"
-										:cols="cols"
-										:index="index"
-										:item="item"
-										@reload="$emit('reload')"
-										@showDetailModal="$emit('showDetailModal', item)"
-									></action-button>
-									<!-- Action Button End -->
+									<action-button :class="{ show: isMobile }" @click.stop="openContextMenu($event, item)" />
 								</div>
 							</div>
 						</div>

diff --git a/main/src/components/filebrowser/components/ListView.vue b/main/src/components/filebrowser/components/ListView.vue
@@ -56,10 +56,7 @@
 											dateFmt }}</span>
 									</div>
 									<div class="action-wrapper is-flex-shrink-0">
-										<!-- Action Button Start -->
-										<action-button :class="{ show: isMobile }" :cols="cols" :index="index" :item="item"
-											@reload="$emit('reload')"></action-button>
-										<!-- Action Button End -->
+										<action-button :class="{ show: isMobile }" @click.stop="openContextMenu($event, item)" />
 									</div>
 								</div>
 								<div v-if="!isMobile" class="td">

diff --git a/main/src/mixins/mixin.js b/main/src/mixins/mixin.js
@@ -162,10 +162,6 @@ export const mixin = {
 			this.$refs.dropDown?.toggle()
 			this.downloadFile(this.item)
 		},
-		playVideo(item, player) {
-			let url = player + this.getFileUrl(item)
-			window.open(url, '_self');
-		},
 
 		// Get File Download URL
 		getFileUrl(items) {
@@ -227,22 +223,6 @@ export const mixin = {
 				type: 'is-success'
 			})
 		},
-		/**
-		 * @description: Download File
-		 * @param {Object,Object} event item
-		 * @return {void}
-		 */
-		clickItem(event, item) {
-			let bounced = event.target.getAttribute('class').includes('mdi-dots')
-			if (bounced) {
-				return false
-			}
-			if (item.is_dir) {
-				this.$emit('gotoFolder', item.path)
-			} else {
-				this.$emit('showDetailModal', item)
-			}
-		},
 		/**
 		 * @description: Open Context Menu
 		 * @param {Object,Object} event item
@@ -399,36 +379,12 @@ export const mixin = {
 
 
 	filters: {
-		/**
-		 * @description: Format size output
-		 * @param {int} value size value
-		 * @return {String}
-		 */
-		renderBps(value) {
-			if (null == value || value == '' || value == 0) {
-				return "0 bps";
-			}
-			const unitArr = ["bps", "Kbps", "Mbps", "Gbps", "TB", "PB", "EB", "ZB", "YB"];
-			let index = 0,
-				srcsize = parseFloat(value);
-			index = Math.floor(Math.log(srcsize) / Math.log(1024));
-			let size = srcsize / Math.pow(1024, index);
-			size = size.toFixed(2);
-			return size + unitArr[index];
-		},
-
 		renderSize,
 
 		toFahrenheit: function (value) {
 			return (32 + value * 1.8).toFixed(1);
 		},
 
-
-		formatNum(number) {
-			return new Intl.NumberFormat().format(number)
-		},
-
-
 		getProgressType(per) {
 			if (per >= 0 && per < 80) {
 				return "is-primary"
@@ -439,17 +395,6 @@ export const mixin = {
 			}
 		},
 
-
-		getTextType(per) {
-			if (per >= 0 && per < 80) {
-				return "has-text-success"
-			} else if (per >= 80 && per < 90) {
-				return "has-text-warning"
-			} else {
-				return "has-text-danger"
-			}
-		},
-
 		dateFmt: function (value) {
 			if (dayjs().isSame(value, 'year')) {
 				return dayjs(value).format('DD/MM hh:mm')