Copy to clipboard with button instead of link

Signed-off-by: Christopher Ng <chrng8@gmail.com>

apps/files_sharing/src/components/SharingEntryInternal.vue

@@ -9,27 +9,33 @@
 				<div class="avatar-external icon-external-white" />
 			</template>
 
-			<NcActionLink :href="internalLink"
-				:aria-label="t('files_sharing', 'Copy internal link to clipboard')"
-				target="_blank"
-				:icon="copied && copySuccess ? 'icon-checkmark-color' : 'icon-clippy'"
+			<NcActionButton :aria-label="t('files_sharing', 'Copy internal link to clipboard')"
 				@click.prevent="copyLink">
+				<template #icon>
+					<Check v-if="copied && copySuccess" :size="20" />
+					<ClipboardTextMultipleOutline v-else :size="20" />
+				</template>
 				{{ clipboardTooltip }}
-			</NcActionLink>
+			</NcActionButton>
 		</SharingEntrySimple>
 	</ul>
 </template>
 
 <script>
 import { generateUrl } from '@nextcloud/router'
-import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
+import { NcActionButton } from '@nextcloud/vue'
 import SharingEntrySimple from './SharingEntrySimple'
 
+import Check from 'vue-material-design-icons/Check.vue'
+import ClipboardTextMultipleOutline from 'vue-material-design-icons/ClipboardTextMultipleOutline.vue'
+
 export default {
 	name: 'SharingEntryInternal',
 
 	components: {
-		NcActionLink,
+		Check,
+		ClipboardTextMultipleOutline,
+		NcActionButton,
 		SharingEntrySimple,
 	},
 

apps/files_sharing/src/components/SharingEntryLink.vue

@@ -38,13 +38,14 @@
 		<NcActions v-if="share && !isEmailShareType && share.token"
 			ref="copyButton"
 			class="sharing-entry__copy">
-			<NcActionLink :href="shareLink"
-				target="_blank"
-				:aria-label="t('files_sharing', 'Copy public link to clipboard')"
-				:icon="copied && copySuccess ? 'icon-checkmark-color' : 'icon-clippy'"
+			<NcActionButton :aria-label="t('files_sharing', 'Copy public link to clipboard')"
 				@click.stop.prevent="copyLink">
+				<template #icon>
+					<Check v-if="copied && copySuccess" :size="20" />
+					<ClipboardTextMultipleOutline v-else :size="20" />
+				</template>
 				{{ clipboardTooltip }}
-			</NcActionLink>
+			</NcActionButton>
 		</NcActions>
 
 		<!-- pending actions -->
@@ -303,16 +304,18 @@ import { showError } from '@nextcloud/dialogs'
 import { Type as ShareTypes } from '@nextcloud/sharing'
 import Vue from 'vue'
 
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton'
-import NcActionCheckbox from '@nextcloud/vue/dist/Components/NcActionCheckbox'
-import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput'
-import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
-import NcActionText from '@nextcloud/vue/dist/Components/NcActionText'
-import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator'
-import NcActionTextEditable from '@nextcloud/vue/dist/Components/NcActionTextEditable'
-import NcActions from '@nextcloud/vue/dist/Components/NcActions'
-import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
+import {
+	NcActionButton,
+	NcActionCheckbox,
+	NcActionInput,
+	NcActionLink,
+	NcActions,
+	NcActionSeparator,
+	NcActionText,
+	NcActionTextEditable,
+	NcAvatar,
+	Tooltip,
+} from '@nextcloud/vue'
 
 import ExternalShareAction from './ExternalShareAction.vue'
 import SharePermissionsEditor from './SharePermissionsEditor.vue'
@@ -320,20 +323,25 @@ import GeneratePassword from '../utils/GeneratePassword.js'
 import Share from '../models/Share.js'
 import SharesMixin from '../mixins/SharesMixin.js'
 
+import Check from 'vue-material-design-icons/Check.vue'
+import ClipboardTextMultipleOutline from 'vue-material-design-icons/ClipboardTextMultipleOutline.vue'
+
 export default {
 	name: 'SharingEntryLink',
 
 	components: {
-		NcActions,
+		Check,
+		ClipboardTextMultipleOutline,
+		ExternalShareAction,
 		NcActionButton,
 		NcActionCheckbox,
 		NcActionInput,
 		NcActionLink,
+		NcActions,
+		NcActionSeparator,
 		NcActionText,
 		NcActionTextEditable,
-		NcActionSeparator,
 		NcAvatar,
-		ExternalShareAction,
 		SharePermissionsEditor,
 	},
 

tests/acceptance/features/bootstrap/FilesAppSharingContext.php

@@ -206,7 +206,7 @@ class FilesAppSharingContext implements Context, ActorAwareInterface {
 	 * @return Locator
 	 */
 	public static function copyLinkButton() {
-		return Locator::forThe()->css("a.sharing-entry__copy")->
+		return Locator::forThe()->css("button.sharing-entry__copy")->
 				descendantOf(self::shareLinkRow())->
 				describedAs("Copy link button in the details view in Files app");
 	}
@@ -391,7 +391,7 @@ class FilesAppSharingContext implements Context, ActorAwareInterface {
 		// Clicking on the menu item copies the link to the clipboard, but it is
 		// not possible to access that value from the acceptance tests. Due to
 		// this the value of the attribute that holds the URL is used instead.
-		$this->actor->getSharedNotebook()["shared link"] = $this->actor->find(self::copyLinkButton(), 2)->getWrappedElement()->getAttribute("href");
+		$this->actor->getSharedNotebook()["shared link"] = $this->actor->getSession()->evaluateScript("return document.querySelector('.sharing-entry__link').__vue__.shareLink;");
 	}
 
 	/**