fix(sharing): migrate QuickShareSelect to NcActions

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
nextcloud · Jan 30, 2024 · 5ae89c0 · 5ae89c0
1 parent e224432
commit 5ae89c0
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 200 deletions.
diff --git a/apps/files_sharing/src/components/SharingEntry.vue b/apps/files_sharing/src/components/SharingEntry.vue
@@ -29,7 +29,7 @@
 			:menu-position="'left'"
 			:url="share.shareWithAvatar" />
 
-		<div class="sharing-entry__summary" @click.prevent="toggleQuickShareSelect">
+		<div class="sharing-entry__summary">
 			<component :is="share.shareWithLink ? 'a' : 'div'"
 				:title="tooltip"
 				:aria-label="tooltip"
@@ -41,14 +41,13 @@
 					<small v-if="hasStatus && share.status.message">({{ share.status.message }})</small>
 				</span>
 			</component>
-			<QuickShareSelect :share="share"
+			<SharingEntryQuickShareSelect :share="share"
 				:file-info="fileInfo"
-				:toggle="showDropdown"
 				@open-sharing-details="openShareDetailsForCustomSettings(share)" />
 		</div>
 		<NcButton class="sharing-entry__action"
 			:aria-label="t('files_sharing', 'Open Sharing Details')"
-			type="tertiary-no-background"
+			type="tertiary"
 			@click="openSharingDetails(share)">
 			<template #icon>
 				<DotsHorizontalIcon :size="20" />
@@ -63,7 +62,7 @@ import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import DotsHorizontalIcon from 'vue-material-design-icons/DotsHorizontal.vue'
 
-import QuickShareSelect from './SharingEntryQuickShareSelect.vue'
+import SharingEntryQuickShareSelect from './SharingEntryQuickShareSelect.vue'
 
 import SharesMixin from '../mixins/SharesMixin.js'
 import ShareDetails from '../mixins/ShareDetails.js'
@@ -76,16 +75,11 @@ export default {
 		NcAvatar,
 		DotsHorizontalIcon,
 		NcSelect,
-		QuickShareSelect,
+		SharingEntryQuickShareSelect,
 	},
 
 	mixins: [SharesMixin, ShareDetails],
 
-	data() {
-		return {
-			showDropdown: false,
-		}
-	},
 	computed: {
 		title() {
 			let title = this.share.shareWithDisplayName
@@ -140,9 +134,6 @@ export default {
 		onMenuClose() {
 			this.onNoteSubmit()
 		},
-		toggleQuickShareSelect() {
-			this.showDropdown = !this.showDropdown
-		},
 	},
 }
 </script>
@@ -158,6 +149,7 @@ export default {
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
+		align-items: flex-start;
 		flex: 1 0;
 		min-width: 0;
 

diff --git a/apps/files_sharing/src/components/SharingEntryLink.vue b/apps/files_sharing/src/components/SharingEntryLink.vue
@@ -27,17 +27,16 @@
 			class="sharing-entry__avatar" />
 
 		<div class="sharing-entry__summary">
-			<div class="sharing-entry__desc" @click.prevent="toggleQuickShareSelect">
+			<div class="sharing-entry__desc">
 				<span class="sharing-entry__title" :title="title">
 					{{ title }}
 				</span>
 				<p v-if="subtitle">
 					{{ subtitle }}
 				</p>
-				<QuickShareSelect v-if="share && share.permissions !== undefined"
+				<SharingEntryQuickShareSelect v-if="share && share.permissions !== undefined"
 					:share="share"
 					:file-info="fileInfo"
-					:toggle="showDropdown"
 					@open-sharing-details="openShareDetailsForCustomSettings(share)" />
 			</div>
 
@@ -199,7 +198,7 @@ import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 
 import Tune from 'vue-material-design-icons/Tune.vue'
 
-import QuickShareSelect from './SharingEntryQuickShareSelect.vue'
+import SharingEntryQuickShareSelect from './SharingEntryQuickShareSelect.vue'
 
 import ExternalShareAction from './ExternalShareAction.vue'
 import GeneratePassword from '../utils/GeneratePassword.js'
@@ -220,7 +219,7 @@ export default {
 		NcActionSeparator,
 		NcAvatar,
 		Tune,
-		QuickShareSelect,
+		SharingEntryQuickShareSelect,
 	},
 
 	mixins: [SharesMixin, ShareDetails],
@@ -238,7 +237,6 @@ export default {
 
 	data() {
 		return {
-			showDropdown: false,
 			copySuccess: true,
 			copied: false,
 
@@ -730,10 +728,6 @@ export default {
 			// YET. We can safely delete the share :)
 			this.$emit('remove:share', this.share)
 		},
-
-		toggleQuickShareSelect() {
-			this.showDropdown = !this.showDropdown
-		},
 	},
 }
 </script>