Merge pull request #54648 from nextcloud/fix/sharing-entry

fix(files_sharing): correctly apply icons and copy share link

Author: AndyScherzinger

apps/files_sharing/src/components/SharingEntryLink.vue

@@ -30,15 +30,14 @@
 				<!-- clipboard -->
 				<div>
 					<NcActions v-if="share && (!isEmailShareType || isFileRequest) && share.token" ref="copyButton" class="sharing-entry__copy">
-						<NcActionButton :aria-label="copyLinkTooltip"
-							:title="copyLinkTooltip"
+						<NcActionButton :aria-label="copyLinkLabel"
+							:title="copySuccess ? t('files_sharing', 'Successfully copied public link') : undefined"
 							:href="shareLink"
 							@click.prevent="copyLink">
 							<template #icon>
-								<CheckIcon v-if="copied && copySuccess"
-									:size="20"
-									class="icon-checkmark-color" />
-								<ClipboardIcon v-else :size="20" />
+								<NcIconSvgWrapper class="sharing-entry__copy-icon"
+									:class="{ 'sharing-entry__copy-icon--success': copySuccess }"
+									:path="copySuccess ? mdiCheck : mdiContentCopy" />
 							</template>
 						</NcActionButton>
 					</NcActions>
@@ -205,7 +204,7 @@
 		</NcActions>
 
 		<!-- loading indicator to replace the menu -->
-		<div v-else class="icon-loading-small sharing-entry__loading" />
+		<NcLoadingIcon v-else class="sharing-entry__loading" />
 
 		<!-- Modal to open whenever we have a QR code -->
 		<NcDialog v-if="showQRCode"
@@ -224,6 +223,7 @@
 </template>
 
 <script>
+import { mdiCheck, mdiContentCopy } from '@mdi/js'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 import { t } from '@nextcloud/l10n'
@@ -241,14 +241,15 @@ import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcAvatar from '@nextcloud/vue/components/NcAvatar'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
+import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
+import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 
 import Tune from 'vue-material-design-icons/Tune.vue'
 import IconCalendarBlank from 'vue-material-design-icons/CalendarBlankOutline.vue'
 import IconQr from 'vue-material-design-icons/Qrcode.vue'
 import ErrorIcon from 'vue-material-design-icons/Exclamation.vue'
 import LockIcon from 'vue-material-design-icons/LockOutline.vue'
 import CheckIcon from 'vue-material-design-icons/CheckBold.vue'
-import ClipboardIcon from 'vue-material-design-icons/ContentCopy.vue'
 import CloseIcon from 'vue-material-design-icons/Close.vue'
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
 
@@ -276,14 +277,15 @@ export default {
 		NcActionSeparator,
 		NcAvatar,
 		NcDialog,
+		NcIconSvgWrapper,
+		NcLoadingIcon,
 		VueQrcode,
 		Tune,
 		IconCalendarBlank,
 		IconQr,
 		ErrorIcon,
 		LockIcon,
 		CheckIcon,
-		ClipboardIcon,
 		CloseIcon,
 		PlusIcon,
 		SharingEntryQuickShareSelect,
@@ -303,11 +305,17 @@ export default {
 		},
 	},
 
+	setup() {
+		return {
+			mdiCheck,
+			mdiContentCopy,
+		}
+	},
+
 	data() {
 		return {
 			shareCreationComplete: false,
-			copySuccess: true,
-			copied: false,
+			copySuccess: false,
 			defaultExpirationDateEnabled: false,
 
 			// Are we waiting for password/expiration date
@@ -539,17 +547,9 @@ export default {
 		},
 
 		/**
-		 * Tooltip message for copy button
-		 *
 		 * @return {string}
 		 */
-		copyLinkTooltip() {
-			if (this.copied) {
-				if (this.copySuccess) {
-					return ''
-				}
-				return t('files_sharing', 'Cannot copy, please copy the link manually')
-			}
+		copyLinkLabel() {
 			return t('files_sharing', 'Copy public link of "{title}"', { title: this.title })
 		},
 
@@ -783,16 +783,13 @@ export default {
 				showSuccess(t('files_sharing', 'Link copied'))
 				// focus and show the tooltip
 				this.$refs.copyButton.$el.focus()
-				this.copySuccess = true
-				this.copied = true
 			} catch (error) {
-				this.copySuccess = false
-				this.copied = true
-				console.error(error)
+				logger.debug('Failed to automatically copy share link', { error })
+				window.prompt(t('files_sharing', 'Your browser does not support copying, please copy the link manually:'), this.shareLink)
 			} finally {
+				this.copySuccess = true
 				setTimeout(() => {
 					this.copySuccess = false
-					this.copied = false
 				}, 4000)
 			}
 		},
@@ -967,9 +964,8 @@ export default {
 		}
 	}
 
-	.icon-checkmark-color {
-		opacity: 1;
-		color: var(--color-success);
+	&__copy-icon--success {
+		color: var(--color-border-success);
 	}
 }
 

dist/6894-6894.js

@@ -2,6 +2,7 @@ SPDX-License-Identifier: MIT
 SPDX-License-Identifier: ISC
 SPDX-License-Identifier: GPL-3.0-or-later
 SPDX-License-Identifier: BSD-3-Clause
+SPDX-License-Identifier: Apache-2.0
 SPDX-License-Identifier: AGPL-3.0-or-later
 SPDX-License-Identifier: (MPL-2.0 OR Apache-2.0)
 SPDX-FileCopyrightText: string_decoder developers
@@ -37,6 +38,7 @@ SPDX-FileCopyrightText: Dr.-Ing. Mario Heiderich, Cure53 <mario@cure53.de> (http
 SPDX-FileCopyrightText: David Clark
 SPDX-FileCopyrightText: Christoph Wurst
 SPDX-FileCopyrightText: Chen Fengyuan
+SPDX-FileCopyrightText: Austin Andrews
 SPDX-FileCopyrightText: Arnout Kazemier
 SPDX-FileCopyrightText: Anthony Fu <https://github.com/antfu>
 SPDX-FileCopyrightText: Alkemics
@@ -53,6 +55,9 @@ This file is generated from multiple sources. Included packages:
 - @floating-ui/utils
 	- version: 0.2.10
 	- license: MIT
+- @mdi/js
+	- version: 7.4.47
+	- license: Apache-2.0
 - @nextcloud/auth
 	- version: 2.5.2
 	- license: GPL-3.0-or-later

dist/6894-6894.js.map

@@ -0,0 +1 @@
+9708-9708.js.license