Merge pull request #43774 from nextcloud/feat/spring2024/add-qr-code-for-link-share

feat: added new action for qrcode popup on link-share actions

apps/files/src/actions/moveOrCopyAction.ts

@@ -166,7 +166,7 @@ export const handleCopyMoveNodeTo = async (node: Node, destination: Folder, meth
 				if (error?.response?.status === 412) {
 					throw new Error(t('files', 'A file or folder with that name already exists in this folder'))
 				} else if (error?.response?.status === 423) {
-					throw new Error(t('files', 'The file is locked'))
+					throw new Error(t('files', 'The files are locked'))
 				} else if (error?.response?.status === 404) {
 					throw new Error(t('files', 'The file does not exist anymore'))
 				} else if (error.message) {

apps/files_sharing/src/components/SharingEntryInternal.vue

@@ -10,8 +10,14 @@
 
 			<NcActionButton :title="copyLinkTooltip"
 				:aria-label="copyLinkTooltip"
-				:icon="copied && copySuccess ? 'icon-checkmark-color' : 'icon-clippy'"
-				@click="copyLink" />
+				@click="copyLink">
+				<template #icon>
+					<CheckIcon v-if="copied && copySuccess"
+						:size="20"
+						class="icon-checkmark-color" />
+					<ClipboardIcon v-else :size="20" />
+				</template>
+			</NcActionButton>
 		</SharingEntrySimple>
 	</ul>
 </template>
@@ -20,6 +26,10 @@
 import { generateUrl } from '@nextcloud/router'
 import { showSuccess } from '@nextcloud/dialogs'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+
+import CheckIcon from 'vue-material-design-icons/CheckBold.vue'
+import ClipboardIcon from 'vue-material-design-icons/ClipboardFlow.vue'
+
 import SharingEntrySimple from './SharingEntrySimple.vue'
 
 export default {
@@ -28,6 +38,8 @@ export default {
 	components: {
 		NcActionButton,
 		SharingEntrySimple,
+		CheckIcon,
+		ClipboardIcon,
 	},
 
 	props: {
@@ -114,6 +126,7 @@ export default {
 	}
 	.icon-checkmark-color {
 		opacity: 1;
+		color: var(--color-success);
 	}
 }
 </style>

apps/files_sharing/src/components/SharingEntryLink.vue

@@ -21,7 +21,8 @@
   -->
 
 <template>
-	<li :class="{ 'sharing-entry--share': share }" class="sharing-entry sharing-entry__link">
+	<li :class="{ 'sharing-entry--share': share }"
+		class="sharing-entry sharing-entry__link">
 		<NcAvatar :is-no-user="true"
 			:icon-class="isEmailShareType ? 'avatar-link-share icon-mail-white' : 'avatar-link-share icon-public-white'"
 			class="sharing-entry__avatar" />
@@ -44,8 +45,14 @@
 			<NcActions v-if="share && !isEmailShareType && share.token" ref="copyButton" class="sharing-entry__copy">
 				<NcActionButton	:title="copyLinkTooltip"
 					:aria-label="copyLinkTooltip"
-					:icon="copied && copySuccess ? 'icon-checkmark-color' : 'icon-clippy'"
-					@click.prevent="copyLink" />
+					@click.prevent="copyLink">
+					<template #icon>
+						<CheckIcon v-if="copied && copySuccess"
+							:size="20"
+							class="icon-checkmark-color" />
+						<ClipboardIcon v-else :size="20" />
+					</template>
+				</NcActionButton>
 			</NcActions>
 		</div>
 
@@ -57,7 +64,11 @@
 			:open.sync="open"
 			@close="onCancel">
 			<!-- pending data menu -->
-			<NcActionText v-if="errors.pending" icon="icon-error" :class="{ error: errors.pending }">
+			<NcActionText v-if="errors.pending"
+				class="error">
+				<template #icon>
+					<ErrorIcon :size="20" />
+				</template>
 				{{ errors.pending }}
 			</NcActionText>
 			<NcActionText v-else icon="icon-info">
@@ -65,7 +76,8 @@
 			</NcActionText>
 
 			<!-- password -->
-			<NcActionText v-if="pendingEnforcedPassword" icon="icon-password">
+			<NcActionText v-if="pendingEnforcedPassword">
+				<LockIcon :size="20" />
 				{{ t('files_sharing', 'Password protection (enforced)') }}
 			</NcActionText>
 			<NcActionCheckbox v-else-if="pendingPassword"
@@ -107,10 +119,16 @@
 				{{ t('files_sharing', 'Enter a date') }}
 			</NcActionInput>
 
-			<NcActionButton icon="icon-checkmark" @click.prevent.stop="onNewLinkShare">
+			<NcActionButton @click.prevent.stop="onNewLinkShare">
+				<template #icon>
+					<CheckIcon :size="20" />
+				</template>
 				{{ t('files_sharing', 'Create share') }}
 			</NcActionButton>
-			<NcActionButton icon="icon-close" @click.prevent.stop="onCancel">
+			<NcActionButton @click.prevent.stop="onCancel">
+				<template #icon>
+					<CloseIcon :size="20" />
+				</template>
 				{{ t('files_sharing', 'Cancel') }}
 			</NcActionButton>
 		</NcActions>
@@ -128,11 +146,19 @@
 						:close-after-click="true"
 						@click.prevent="openSharingDetails">
 						<template #icon>
-							<Tune />
+							<Tune :size="20" />
 						</template>
 						{{ t('files_sharing', 'Customize link') }}
 					</NcActionButton>
 				</template>
+				
+				<NcActionButton :close-after-click="true"
+					@click.prevent="showQRCode = true">
+					<template #icon>
+						<IconQr :size="20" />
+					</template>
+					{{ t('files_sharing', 'Generate QR code') }}
+				</NcActionButton>
 
 				<NcActionSeparator />
 
@@ -155,15 +181,19 @@
 
 				<NcActionButton v-if="!isEmailShareType && canReshare"
 					class="new-share-link"
-					icon="icon-add"
 					@click.prevent.stop="onNewLinkShare">
+					<template #icon>
+						<PlusIcon :size="20" />
+					</template>
 					{{ t('files_sharing', 'Add another link') }}
 				</NcActionButton>
 
 				<NcActionButton v-if="share.canDelete"
-					icon="icon-close"
 					:disabled="saving"
 					@click.prevent="onDelete">
+					<template #icon>
+						<CloseIcon :size="20" />
+					</template>
 					{{ t('files_sharing', 'Unshare') }}
 				</NcActionButton>
 			</template>
@@ -179,6 +209,20 @@
 
 		<!-- loading indicator to replace the menu -->
 		<div v-else class="icon-loading-small sharing-entry__loading" />
+
+		<!-- Modal to open whenever we have a QR code -->
+		<NcDialog v-if="showQRCode"
+			size="normal"
+			:open.sync="showQRCode"
+			:name="title"
+			:close-on-click-outside="true"
+			@close="showQRCode = false">
+			<div class="qr-code-dialog">
+				<VueQrcode tag="img"
+					:value="shareLink"
+					class="qr-code-dialog__img" />
+			</div>
+		</NcDialog>
 	</li>
 </template>
 
@@ -187,6 +231,7 @@ import { generateUrl } from '@nextcloud/router'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { Type as ShareTypes } from '@nextcloud/sharing'
 import Vue from 'vue'
+import VueQrcode from '@chenfengyuan/vue-qrcode';
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActionInput from '@nextcloud/vue/dist/Components/NcActionInput.js'
@@ -195,8 +240,16 @@ import NcActionText from '@nextcloud/vue/dist/Components/NcActionText.js'
 import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
+import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 
 import Tune from 'vue-material-design-icons/Tune.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/Lock.vue'
+import CheckIcon from 'vue-material-design-icons/CheckBold.vue'
+import ClipboardIcon from 'vue-material-design-icons/ClipboardFlow.vue'
+import CloseIcon from 'vue-material-design-icons/Close.vue'
+import PlusIcon from 'vue-material-design-icons/Plus.vue'
 
 import SharingEntryQuickShareSelect from './SharingEntryQuickShareSelect.vue'
 
@@ -218,7 +271,16 @@ export default {
 		NcActionText,
 		NcActionSeparator,
 		NcAvatar,
+		NcDialog,
+		VueQrcode,
 		Tune,
+		IconQr,
+		ErrorIcon,
+		LockIcon,
+		CheckIcon,
+		ClipboardIcon,
+		CloseIcon,
+		PlusIcon,
 		SharingEntryQuickShareSelect,
 	},
 
@@ -245,6 +307,9 @@ export default {
 
 			ExternalLegacyLinkActions: OCA.Sharing.ExternalLinkActions.state,
 			ExternalShareActions: OCA.Sharing.ExternalShareActions.state,
+
+			// tracks whether modal should be opened or not
+			showQRCode: false,
 		}
 	},
 
@@ -801,6 +866,19 @@ export default {
 
 	.icon-checkmark-color {
 		opacity: 1;
+		color: var(--color-success);
+	}
+}
+
+// styling for the qr-code container
+.qr-code-dialog {
+	display: flex;
+	width: 100%;
+	justify-content: center;
+
+	&__img {
+		width: 100%;
+		height: auto;
 	}
 }
 </style>

dist/556-556.js.LICENSE.txt

@@ -20,6 +20,16 @@
  *
  */
 
+/*!
+ * vue-qrcode v1.0.2
+ * https://fengyuanchen.github.io/vue-qrcode
+ *
+ * Copyright 2018-present Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2020-01-18T06:04:33.222Z
+ */
+
 /**
  * @copyright 2022 Louis Chmn <louis@chmn.me>
  *