feat: Only show show inherited shares section if present

Signed-off-by: nfebe <[email protected]>
nextcloud · Jan 23, 2025 · 5f3eeea · 5f3eeea
1 parent f878cff
commit 5f3eeea
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 52 deletions.
diff --git a/apps/files_sharing/src/views/SharingInherited.vue b/apps/files_sharing/src/views/SharingInherited.vue
@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<ul id="sharing-inherited-shares">
+	<ul v-if="shares.length" id="sharing-inherited-shares">
 		<!-- Main collapsible entry -->
 		<SharingEntrySimple class="sharing-entry__inherited"
 			:title="mainTitle"

diff --git a/apps/files_sharing/src/views/SharingTab.vue b/apps/files_sharing/src/views/SharingTab.vue
@@ -28,22 +28,24 @@
 			<section>
 				<div class="section-header">
 					<h4>{{ t('files_sharing', 'Internal shares') }}</h4>
-					<NcButton v-tooltip="{
-							content: internalSharesHelpText,
-							triggers: ['click'],
-							delay: { show: 0, hide: 400 },
-						}"
-						class="hint-icon"
-						type="tertiary-no-background"
-						:aria-label="t('files_sharing', 'Internal shares explanation')"
-						:aria-describedby="'tooltip-internal-shares'">
-						<span id="tooltip-internal-shares" class="visually-hidden">
-							{{ internalSharesHelpText }}
-						</span>
-						<template #icon>
-							<InfoIcon :size="20" />
+					<NcPopover popup-role="dialog">
+						<template #trigger>
+							<NcButton class="hint-icon"
+								type="tertiary-no-background"
+								:aria-label="t('files_sharing', 'Internal shares explanation')"
+								:aria-describedby="'popover-internal-shares'">
+								<span id="popover-internal-shares" class="visually-hidden">
+									{{ internalSharesHelpText }}
+								</span>
+								<template #icon>
+									<InfoIcon :size="20" />
+								</template>
+							</NcButton>
 						</template>
-					</NcButton>
+						<p class="hint-body">
+							{{ internalSharesHelpText }}
+						</p>
+					</NcPopover>
 				</div>
 				<!-- add new share input -->
 				<SharingInput v-if="!loading"
@@ -72,22 +74,24 @@
 			<section>
 				<div class="section-header">
 					<h4>{{ t('files_sharing', 'External shares') }}</h4>
-					<NcButton v-tooltip="{
-							content: externalSharesHelpText,
-							triggers: ['click'],
-							delay: { show: 0, hide: 400 },
-						}"
-						class="hint-icon"
-						type="tertiary-no-background"
-						:aria-label="t('files_sharing', 'External shares explanation')"
-						:aria-describedby="'tooltip-external-shares'">
-						<span id="tooltip-external-shares" class="visually-hidden">
-							{{ externalSharesHelpText }}
-						</span>
-						<template #icon>
-							<InfoIcon class="hint-icon" :size="20" />
+					<NcPopover popup-role="dialog">
+						<template #trigger>
+							<NcButton class="hint-icon"
+								type="tertiary-no-background"
+								:aria-label="t('files_sharing', 'External shares explanation')"
+								:aria-describedby="'popover-external-shares'">
+								<span id="popover-external-shares" class="visually-hidden">
+									{{ externalSharesHelpText }}
+								</span>
+								<template #icon>
+									<InfoIcon :size="20" />
+								</template>
+							</NcButton>
 						</template>
-					</NcButton>
+						<p class="hint-body">
+							{{ externalSharesHelpText }}
+						</p>
+					</NcPopover>
 				</div>
 				<SharingInput v-if="!loading"
 					:can-reshare="canReshare"
@@ -110,22 +114,24 @@
 			<section v-if="sections.length > 0 && !showSharingDetailsView">
 				<div class="section-header">
 					<h4>{{ t('files_sharing', 'Additional shares') }}</h4>
-					<NcButton v-tooltip="{
-							content: externalSharesHelpText,
-							triggers: ['click'],
-							delay: { show: 0, hide: 400 },
-						}"
-						class="hint-icon"
-						type="tertiary-no-background"
-						:aria-label="t('files_sharing', 'Additional shares explanation')"
-						:aria-describedby="'tooltip-additional-shares'">
-						<span id="tooltip-additional-shares" class="visually-hidden">
-							{{ additionalSharesHelpText }}
-						</span>
-						<template #icon>
-							<InfoIcon class="hint-icon" :size="20" />
+					<NcPopover popup-role="dialog">
+						<template #trigger>
+							<NcButton class="hint-icon"
+								type="tertiary-no-background"
+								:aria-label="t('files_sharing', 'Additional shares explanation')"
+								:aria-describedby="'popover-additional-shares'">
+								<span id="popover-additional-shares" class="visually-hidden">
+									{{ additionalSharesHelpText }}
+								</span>
+								<template #icon>
+									<InfoIcon :size="20" />
+								</template>
+							</NcButton>
 						</template>
-					</NcButton>
+						<p class="hint-body">
+							{{ additionalSharesHelpText }}
+						</p>
+					</NcPopover>
 				</div>
 				<!-- additional entries, use it with cautious -->
 				<div v-for="(section, index) in sections"
@@ -169,7 +175,6 @@ import NcPopover from '@nextcloud/vue/dist/Components/NcPopover.js'
 
 import axios from '@nextcloud/axios'
 import moment from '@nextcloud/moment'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
@@ -191,10 +196,6 @@ import ShareDetails from '../mixins/ShareDetails.js'
 export default {
 	name: 'SharingTab',
 
-	directives: {
-		Tooltip,
-	},
-
 	components: {
 		CollectionList,
 		InfoIcon,
@@ -540,10 +541,11 @@ export default {
 				}
 
 				.hint-icon {
-					// fill: var(--color-primary-element) !important;
 					color: var(--color-primary-element);
 				}
+
 			}
+
 		}
 
 		& > section:not(:last-child) {
@@ -556,4 +558,9 @@ export default {
 		margin: 44px 0;
 	}
 }
+
+.hint-body {
+	max-width: 300px;
+	padding: calc(var(--default-grid-baseline) * 2);
+}
 </style>