Split copyLinkToClipBoard for public&private link, add quicklinks to …

…sidebar

packages/web-app-files/src/components/SideBar/PrivateLinkItem.vue

@@ -1,21 +1,34 @@
 <template>
-  <copy-to-clipboard-button
+  <oc-button
+    v-oc-tooltip="copyToClipboardLabel"
     class="oc-files-private-link-copy-url"
-    :value="link"
-    :label="copyToClipboardLabel"
-    :text="copyToClipboardText"
-    :success-msg-title="copyToClipboardSuccessMsgTitle"
-    :success-msg-text="copyToClipboardSuccessMsgText"
-  />
+    :aria-label="copyToClipboardLabel"
+    appearance="raw"
+    :variation="copied ? 'success' : 'passive'"
+    @click="copyValueToClipboard"
+  >
+    <span v-text="copyToClipboardText" />
+    <oc-icon
+      v-if="copied"
+      key="oc-copy-to-clipboard-copied"
+      name="checkbox-circle"
+      class="_clipboard-success-animation"
+    />
+    <oc-icon v-else key="oc-copy-to-clipboard-copy" name="clipboard" />
+  </oc-button>
 </template>
 
 <script>
-import CopyToClipboardButton from './Shared/CopyToClipboardButton.vue'
+import { mapActions } from 'vuex'
+import copyToClipboard from 'copy-to-clipboard'
 
 export default {
   name: 'PrivateLinkItem',
-  components: { CopyToClipboardButton },
   inject: ['displayedItem'],
+  data: () => ({
+    copied: false,
+    timeout: null
+  }),
   computed: {
     link() {
       return this.displayedItem.value.privateLink
@@ -25,13 +38,46 @@ export default {
     },
     copyToClipboardLabel() {
       return this.$gettext('Copy private link to clipboard')
+    }
+  },
+  methods: {
+    ...mapActions(['showMessage']),
+    copyValueToClipboard() {
+      copyToClipboard(this.displayedItem.value)
+      this.clipboardSuccessHandler()
+      this.showMessage({
+        title: this.$gettext('Private link copied'),
+        desc: this.$gettext('The private link has been copied to your clipboard.')
+      })
     },
-    copyToClipboardSuccessMsgTitle() {
-      return this.$gettext('Private link copied')
-    },
-    copyToClipboardSuccessMsgText() {
-      return this.$gettext('The private link has been copied to your clipboard.')
+    clipboardSuccessHandler() {
+      this.copied = true
+      clearTimeout(this.timeout)
+      this.timeout = setTimeout(() => {
+        this.copied = false
+      }, 550)
     }
   }
 }
 </script>
+
+<style scoped>
+._clipboard-success-animation {
+  animation-name: _clipboard-success-animation;
+  animation-duration: 0.8s;
+  animation-timing-function: ease-out;
+  animation-fill-mode: both;
+}
+
+@keyframes _clipboard-success-animation {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.9;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+</style>

packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue

@@ -12,6 +12,24 @@
           <oc-contextual-helper v-if="helpersEnabled" v-bind="viaLinkHelp" />
         </h3>
         <div v-if="canCreatePublicLinks" class="oc-mt-m">
+          <name-and-copy v-if="quicklink" :link="quicklink" />
+          <create-quick-link
+            v-else
+            :password-enforced="passwordEnforced"
+            :expiration-date="globalExpirationDate"
+            @createPublicLink="createLink"
+          />
+          <details-and-edit
+            v-if="quicklink"
+            :is-folder-share="highlightedFile.isFolder"
+            :link="quicklink"
+            :modifiable="canEdit"
+            :password-enforced="passwordEnforced"
+            :expiration-date="globalExpirationDate"
+            :available-role-options="availableRoleOptions"
+            @updateLink="updatePublicLink"
+            @removePublicLink="deleteLinkConfirmation"
+          />
           <hr class="oc-my-s" />
           <oc-button
             id="files-file-link-add"
@@ -76,7 +94,7 @@ import { cloneStateObject } from '../../../helpers/store'
 import CreateForm from './Links/CreateForm.vue'
 import DetailsAndEdit from './Links/DetailsAndEdit.vue'
 import NameAndCopy from './Links/NameAndCopy.vue'
-import QuickLink from './Links/QuickLink.vue'
+import CreateQuickLink from './Links/CreateQuickLink.vue'
 import { ShareTypes, LinkShareRoles } from '../../../helpers/share'
 import { useStore, useCapabilitySpacesEnabled } from 'web-pkg/src/composables'
 import { clientService } from 'web-pkg/src/services'
@@ -91,8 +109,8 @@ export default defineComponent({
   name: 'FileLinks',
   components: {
     CreateForm,
+    CreateQuickLink,
     DetailsAndEdit,
-    QuickLink,
     NameAndCopy
   },
   mixins: [mixins],
@@ -131,9 +149,8 @@ export default defineComponent({
       return this.capabilities?.files_sharing?.public?.defaultPublicLinkShareName || ''
     },
 
-    quickLink() {
-      // TODO: filter for quicklink
-      return this.links[0]
+    quicklink() {
+      return this.currentFileOutgoingLinks.find((link) => link.quicklink === true)
     },
 
     globalExpirationDate() {
@@ -229,7 +246,14 @@ export default defineComponent({
     },
 
     links() {
-      return [...this.currentFileOutgoingLinks, ...this.indirectLinks]
+      // exclude quicklink here
+      const nonQuickLinkOutgoingLinks = this.currentFileOutgoingLinks.filter(
+        (link) => !link.quicklink
+      )
+
+      console.log(nonQuickLinkOutgoingLinks, this.currentFileOutgoingLinks)
+
+      return [...nonQuickLinkOutgoingLinks, ...this.indirectLinks]
         .sort(this.linksComparator)
         .map((share) => {
           share.key = 'direct-link-' + share.id
@@ -372,6 +396,7 @@ export default defineComponent({
         expireDate,
         password,
         permissions: link.permissions,
+        quicklink: link.quicklink,
         name: link.name,
         ...(this.currentStorageId && {
           spaceRef: `${this.currentStorageId}${this.highlightedFile.path}`

packages/web-app-files/src/components/SideBar/Shares/Links/CreateQuickLink.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="oc-mb-s oc-width-1-1">
+    <h4 class="oc-text-truncate oc-files-file-link-name oc-my-s" v-text="heading" />
+    <div class="oc-flex oc-flex-middle oc-flex-between oc-width-1-1 oc-p-s link-name-container">
+      <div class="oc-flex oc-flex-middle oc-text-truncate">
+        <oc-icon name="link" fill-type="line" />
+        <p class="oc-files-file-link-url oc-ml-s oc-text-truncate oc-my-rm" v-text="noLinkLabel" />
+      </div>
+      <oc-button v-oc-tooltip="label" :aria-label="label" @click="createQuickLink">
+        <span v-text="createLinkLabel" />
+      </oc-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CreateQuickLink',
+  props: {
+    expirationDate: {
+      type: Object,
+      default: () => {},
+      required: false
+    },
+    passwordEnforced: {
+      type: Object,
+      default: () => {},
+      required: false
+    }
+  },
+  computed: {
+    heading() {
+      return this.$gettext('Quick link')
+    },
+    label() {
+      return this.$gettext('Create quick link')
+    },
+    createLinkLabel() {
+      return this.$gettext('Create link')
+    },
+    noLinkLabel() {
+      return this.$gettext('No link')
+    }
+  },
+  methods: {
+    createQuickLink() {
+      // handle expiredate && passwordenforcement
+      this.$emit('createPublicLink', {
+        link: {
+          name: this.$gettext('Quicklink'),
+          permissions: 1,
+          quicklink: true
+        },
+        showError: (e) => {
+          this.error = e
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.link-name-container {
+  background-color: var(--oc-color-input-bg);
+  border: 1px solid var(--oc-color-input-border);
+}
+</style>