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,15 +64,20 @@
  :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">
  {{ t('files_sharing', 'Please enter the following required information before creating the share') }}
  </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/506-506.js.LICENSE.txt → 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>
  *