nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-06 02:33:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

CopyShareLink.vue refactoring

Browse Source
This commit is contained in:
Čarodej
2022-01-07 16:26:54 +01:00
parent 10c25cf9d5
commit a113fffbf0
4 changed files with 106 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
public/mix-manifest.json
View File

@@ -64,8 +64,8 @@
"/chunks/plan-settings.js": "/chunks/plan-settings.js?id=162c17e8608dafa5fc17",
"/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=7eff560fea52770a642f",
"/chunks/plans.js": "/chunks/plans.js?id=854c232c29d88c5b541a",
"/chunks/platform.js": "/chunks/platform.js?id=5ab4646e34000c740516",
"/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=e939c5508cae2ce47ffc",
"/chunks/platform.js": "/chunks/platform.js?id=0ed7318456309ffedae9",
"/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=99c84e49c4fdd36d03f9",
"/chunks/platform~chunks/shared~chunks/shared-with-me~chunks/team-folders.js": "/chunks/platform~chunks/shared~chunks/shared-with-me~chunks/team-folders.js?id=ca9ca67afd5839597647",
"/chunks/profile.js": "/chunks/profile.js?id=8688d9c7ff850e6989e6",
"/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=a52c81995d29f51dfe05",
@@ -223,5 +223,78 @@
"/chunks/app-payments.e2ec0051578a2c84e718.hot-update.js": "/chunks/app-payments.e2ec0051578a2c84e718.hot-update.js",
"/chunks/settings.e2ec0051578a2c84e718.hot-update.js": "/chunks/settings.e2ec0051578a2c84e718.hot-update.js",
"/chunks/app-payments.55ef7cd68b58e48de441.hot-update.js": "/chunks/app-payments.55ef7cd68b58e48de441.hot-update.js",
"/chunks/settings.55ef7cd68b58e48de441.hot-update.js": "/chunks/settings.55ef7cd68b58e48de441.hot-update.js"
"/chunks/settings.55ef7cd68b58e48de441.hot-update.js": "/chunks/settings.55ef7cd68b58e48de441.hot-update.js",
"/chunks/platform~chunks/shared.fc38fc250b44d5d5dc18.hot-update.js": "/chunks/platform~chunks/shared.fc38fc250b44d5d5dc18.hot-update.js",
"/chunks/platform~chunks/shared.b1f33d5a6f7695dd139a.hot-update.js": "/chunks/platform~chunks/shared.b1f33d5a6f7695dd139a.hot-update.js",
"/chunks/platform~chunks/shared.2365cb769a4f9b871af7.hot-update.js": "/chunks/platform~chunks/shared.2365cb769a4f9b871af7.hot-update.js",
"/chunks/platform~chunks/shared.ad98f9fd0309711d14c5.hot-update.js": "/chunks/platform~chunks/shared.ad98f9fd0309711d14c5.hot-update.js",
"/chunks/platform~chunks/shared.baed8e17d16e3e558339.hot-update.js": "/chunks/platform~chunks/shared.baed8e17d16e3e558339.hot-update.js",
"/chunks/platform~chunks/shared.0332264d9d5d634b22a4.hot-update.js": "/chunks/platform~chunks/shared.0332264d9d5d634b22a4.hot-update.js",
"/chunks/platform~chunks/shared.a87bc4089b082e8e97f2.hot-update.js": "/chunks/platform~chunks/shared.a87bc4089b082e8e97f2.hot-update.js",
"/chunks/platform~chunks/shared.0654754030df548449ad.hot-update.js": "/chunks/platform~chunks/shared.0654754030df548449ad.hot-update.js",
"/chunks/platform~chunks/shared.c9aeda9334150c3a5cc8.hot-update.js": "/chunks/platform~chunks/shared.c9aeda9334150c3a5cc8.hot-update.js",
"/chunks/platform~chunks/shared.8fc79ce55c9886ebac38.hot-update.js": "/chunks/platform~chunks/shared.8fc79ce55c9886ebac38.hot-update.js",
"/chunks/platform~chunks/shared.d26885786895c89904d7.hot-update.js": "/chunks/platform~chunks/shared.d26885786895c89904d7.hot-update.js",
"/chunks/platform~chunks/shared.0dde38511c0be0b7c6b5.hot-update.js": "/chunks/platform~chunks/shared.0dde38511c0be0b7c6b5.hot-update.js",
"/chunks/platform~chunks/shared.5d96e98fc76dc14ddc43.hot-update.js": "/chunks/platform~chunks/shared.5d96e98fc76dc14ddc43.hot-update.js",
"/chunks/platform~chunks/shared.236062fb112e03c13b6a.hot-update.js": "/chunks/platform~chunks/shared.236062fb112e03c13b6a.hot-update.js",
"/chunks/platform~chunks/shared.e88e1f5ce7919fcc1cbf.hot-update.js": "/chunks/platform~chunks/shared.e88e1f5ce7919fcc1cbf.hot-update.js",
"/chunks/platform~chunks/shared.0062111ae9c08b615f2b.hot-update.js": "/chunks/platform~chunks/shared.0062111ae9c08b615f2b.hot-update.js",
"/chunks/platform~chunks/shared.8aedc24f083bf0e3e929.hot-update.js": "/chunks/platform~chunks/shared.8aedc24f083bf0e3e929.hot-update.js",
"/chunks/platform~chunks/shared.6dac73b7d9f234e6b91f.hot-update.js": "/chunks/platform~chunks/shared.6dac73b7d9f234e6b91f.hot-update.js",
"/chunks/platform~chunks/shared.d9e041fb768d256e9f25.hot-update.js": "/chunks/platform~chunks/shared.d9e041fb768d256e9f25.hot-update.js",
"/chunks/platform~chunks/shared.bbacedda90f7b8c5a9ab.hot-update.js": "/chunks/platform~chunks/shared.bbacedda90f7b8c5a9ab.hot-update.js",
"/chunks/platform~chunks/shared.6562ad352d4feb091c05.hot-update.js": "/chunks/platform~chunks/shared.6562ad352d4feb091c05.hot-update.js",
"/chunks/platform~chunks/shared.ecc2984d7d01245f16d0.hot-update.js": "/chunks/platform~chunks/shared.ecc2984d7d01245f16d0.hot-update.js",
"/chunks/platform~chunks/shared.147b7bbcf65ba34e52c3.hot-update.js": "/chunks/platform~chunks/shared.147b7bbcf65ba34e52c3.hot-update.js",
"/chunks/platform~chunks/shared.5b0c1cfd6bda50fc75cb.hot-update.js": "/chunks/platform~chunks/shared.5b0c1cfd6bda50fc75cb.hot-update.js",
"/chunks/platform~chunks/shared.c4a7ca69a5a3f6616f15.hot-update.js": "/chunks/platform~chunks/shared.c4a7ca69a5a3f6616f15.hot-update.js",
"/chunks/platform~chunks/shared.389a5ea5643c7cee92a0.hot-update.js": "/chunks/platform~chunks/shared.389a5ea5643c7cee92a0.hot-update.js",
"/chunks/platform~chunks/shared.850405cf0bc49009c733.hot-update.js": "/chunks/platform~chunks/shared.850405cf0bc49009c733.hot-update.js",
"/chunks/platform~chunks/shared.1dc82f4258ec219c01f3.hot-update.js": "/chunks/platform~chunks/shared.1dc82f4258ec219c01f3.hot-update.js",
"/chunks/platform~chunks/shared.a018e55524104e82498a.hot-update.js": "/chunks/platform~chunks/shared.a018e55524104e82498a.hot-update.js",
"/chunks/platform~chunks/shared.95dc5711dd713331bd16.hot-update.js": "/chunks/platform~chunks/shared.95dc5711dd713331bd16.hot-update.js",
"/chunks/platform~chunks/shared.4e34c032feeac1ecd873.hot-update.js": "/chunks/platform~chunks/shared.4e34c032feeac1ecd873.hot-update.js",
"/chunks/platform~chunks/shared.e70752d58b2df2c19d92.hot-update.js": "/chunks/platform~chunks/shared.e70752d58b2df2c19d92.hot-update.js",
"/chunks/platform~chunks/shared.5cf83f02ceaed597e3f1.hot-update.js": "/chunks/platform~chunks/shared.5cf83f02ceaed597e3f1.hot-update.js",
"/chunks/platform~chunks/shared.c83de807294fde9691ab.hot-update.js": "/chunks/platform~chunks/shared.c83de807294fde9691ab.hot-update.js",
"/chunks/platform~chunks/shared.350808b3cda72517ebaa.hot-update.js": "/chunks/platform~chunks/shared.350808b3cda72517ebaa.hot-update.js",
"/chunks/platform~chunks/shared.689575c80a877e2f1f10.hot-update.js": "/chunks/platform~chunks/shared.689575c80a877e2f1f10.hot-update.js",
"/chunks/platform~chunks/shared.5a3afae063d8d2ee10b6.hot-update.js": "/chunks/platform~chunks/shared.5a3afae063d8d2ee10b6.hot-update.js",
"/chunks/platform~chunks/shared.740b6c0e18520f2a80fe.hot-update.js": "/chunks/platform~chunks/shared.740b6c0e18520f2a80fe.hot-update.js",
"/chunks/platform~chunks/shared.01f4dfc1b742d80f3339.hot-update.js": "/chunks/platform~chunks/shared.01f4dfc1b742d80f3339.hot-update.js",
"/chunks/platform~chunks/shared.3e086835de18347e7d7d.hot-update.js": "/chunks/platform~chunks/shared.3e086835de18347e7d7d.hot-update.js",
"/chunks/platform~chunks/shared.8c4697f08f8d742fa8da.hot-update.js": "/chunks/platform~chunks/shared.8c4697f08f8d742fa8da.hot-update.js",
"/chunks/platform~chunks/shared.4f8edea960d4abc3f3aa.hot-update.js": "/chunks/platform~chunks/shared.4f8edea960d4abc3f3aa.hot-update.js",
"/chunks/platform~chunks/shared.d44fc781f974990b6447.hot-update.js": "/chunks/platform~chunks/shared.d44fc781f974990b6447.hot-update.js",
"/chunks/platform~chunks/shared.b454cc324c76bb259b58.hot-update.js": "/chunks/platform~chunks/shared.b454cc324c76bb259b58.hot-update.js",
"/chunks/platform~chunks/shared.c66e40621f123f59172b.hot-update.js": "/chunks/platform~chunks/shared.c66e40621f123f59172b.hot-update.js",
"/chunks/platform~chunks/shared.02eef0648303e104059b.hot-update.js": "/chunks/platform~chunks/shared.02eef0648303e104059b.hot-update.js",
"/chunks/platform~chunks/shared.e33604961699c20b7345.hot-update.js": "/chunks/platform~chunks/shared.e33604961699c20b7345.hot-update.js",
"/chunks/platform~chunks/shared.417153e127a2a29483d7.hot-update.js": "/chunks/platform~chunks/shared.417153e127a2a29483d7.hot-update.js",
"/chunks/platform~chunks/shared.4f1ec0c3086a44f2c58d.hot-update.js": "/chunks/platform~chunks/shared.4f1ec0c3086a44f2c58d.hot-update.js",
"/chunks/platform~chunks/shared.0a116dba5256c3529199.hot-update.js": "/chunks/platform~chunks/shared.0a116dba5256c3529199.hot-update.js",
"/chunks/platform~chunks/shared.cbaa354b13582a7325cc.hot-update.js": "/chunks/platform~chunks/shared.cbaa354b13582a7325cc.hot-update.js",
"/chunks/platform~chunks/shared.1a13d9652e263209d61a.hot-update.js": "/chunks/platform~chunks/shared.1a13d9652e263209d61a.hot-update.js",
"/chunks/platform~chunks/shared.1a43980d135cda8022cf.hot-update.js": "/chunks/platform~chunks/shared.1a43980d135cda8022cf.hot-update.js",
"/chunks/platform~chunks/shared.2edd62367e07ac48cd77.hot-update.js": "/chunks/platform~chunks/shared.2edd62367e07ac48cd77.hot-update.js",
"/chunks/platform~chunks/shared.e8a44a0d5bbbf08920d6.hot-update.js": "/chunks/platform~chunks/shared.e8a44a0d5bbbf08920d6.hot-update.js",
"/chunks/platform~chunks/shared.618914d9abd82176a715.hot-update.js": "/chunks/platform~chunks/shared.618914d9abd82176a715.hot-update.js",
"/chunks/platform~chunks/shared.8567f89360f648aa4d1a.hot-update.js": "/chunks/platform~chunks/shared.8567f89360f648aa4d1a.hot-update.js",
"/chunks/platform~chunks/shared.d383f054f44f58108674.hot-update.js": "/chunks/platform~chunks/shared.d383f054f44f58108674.hot-update.js",
"/chunks/platform~chunks/shared.467854b95cf979d92c28.hot-update.js": "/chunks/platform~chunks/shared.467854b95cf979d92c28.hot-update.js",
"/chunks/platform~chunks/shared.6f8f084127b91daa5189.hot-update.js": "/chunks/platform~chunks/shared.6f8f084127b91daa5189.hot-update.js",
"/chunks/platform~chunks/shared.b31c53a36bb5446dfe70.hot-update.js": "/chunks/platform~chunks/shared.b31c53a36bb5446dfe70.hot-update.js",
"/chunks/platform~chunks/shared.17ca85ac2b0f36a8006c.hot-update.js": "/chunks/platform~chunks/shared.17ca85ac2b0f36a8006c.hot-update.js",
"/chunks/platform~chunks/shared.db538ed382871b80e799.hot-update.js": "/chunks/platform~chunks/shared.db538ed382871b80e799.hot-update.js",
"/chunks/platform~chunks/shared.ab5c720324e401140888.hot-update.js": "/chunks/platform~chunks/shared.ab5c720324e401140888.hot-update.js",
"/chunks/platform.6d6ba3cab2b2412ab5f7.hot-update.js": "/chunks/platform.6d6ba3cab2b2412ab5f7.hot-update.js",
"/chunks/platform.531a7d1fafd082fa6f43.hot-update.js": "/chunks/platform.531a7d1fafd082fa6f43.hot-update.js",
"/chunks/platform~chunks/shared.531a7d1fafd082fa6f43.hot-update.js": "/chunks/platform~chunks/shared.531a7d1fafd082fa6f43.hot-update.js",
"/chunks/platform~chunks/shared.47acee5692195134af8b.hot-update.js": "/chunks/platform~chunks/shared.47acee5692195134af8b.hot-update.js",
"/chunks/platform~chunks/shared.c1cde8cee7825bf9214d.hot-update.js": "/chunks/platform~chunks/shared.c1cde8cee7825bf9214d.hot-update.js",
"/chunks/platform~chunks/shared.3d9e808725684fd9a21c.hot-update.js": "/chunks/platform~chunks/shared.3d9e808725684fd9a21c.hot-update.js",
"/chunks/platform~chunks/shared.7ed015a6ed75e79acc32.hot-update.js": "/chunks/platform~chunks/shared.7ed015a6ed75e79acc32.hot-update.js",
"/chunks/platform~chunks/shared.9aa6ce5c73104843403d.hot-update.js": "/chunks/platform~chunks/shared.9aa6ce5c73104843403d.hot-update.js",
"/chunks/platform~chunks/shared.f1b2c8b446d29ab06219.hot-update.js": "/chunks/platform~chunks/shared.f1b2c8b446d29ab06219.hot-update.js"
}

219
resources/js/components/Others/Forms/CopyShareLink.vue
View File

@@ -1,54 +1,61 @@
<template>
<div class="inline-wrapper icon-append copy-input" :class="size">
<input ref="sel" :value="item.data.relationships.shared.data.attributes.link" id="link-input" type="text" class="input-text input-dark" readonly>
<div class="multi-icon">
<div @click="copyUrl" class="icon-item group hover-bg-theme-100">
<link-icon v-if="! isCopiedLink" size="14" class="group-hover-text-theme hover-text-theme"/>
<check-icon v-if="isCopiedLink" size="14" class="group-hover-text-theme hover-text-theme"/>
<div class="flex items-center relative">
<input ref="sel" :value="item.data.relationships.shared.data.attributes.link" :id="id" type="text" class="pr-16 py-2 pl-3 text-sm focus-border-theme input-dark" readonly>
<!--Copy icon-->
<div class="flex items-center">
<div @click="copyUrl" class="absolute right-9 p-1">
<copy-icon v-if="! isCopiedLink" size="14" class="cursor-pointer hover-text-theme vue-feather"/>
<check-icon v-if="isCopiedLink" size="14" class="cursor-pointer hover-text-theme vue-feather"/>
</div>
<div @click.stop.prevent="moreOptions" class="icon-item group hover-bg-theme-100">
<more-horizontal-icon size="14" class="group-hover-text-theme hover-text-theme" />
<div @click.stop.prevent="moreOptions" class="absolute right-2.5 p-1">
<more-horizontal-icon size="14" class="cursor-pointer hover-text-theme vue-feather" />
</div>
</div>
<ul v-if="isOpenedMoreOptions" class="input-options">
<li class="option-item" @click="sendOnEmail">
<div class="option-icon">
<!--Hidden options-->
<ul v-if="isOpenedMoreOptions" class="shadow-xl bg-white rounded-lg absolute top-12 left-0 right-0 z-10 overflow-y-auto overflow-x-hidden">
<li @click="sendViaEmail" class="flex items-center py-2.5 px-5 block cursor-pointer hover:bg-light-background">
<div class="w-8">
<send-icon size="14" />
</div>
<span class="option-value">{{ $t('sharelink.share_via_email') }}</span>
<span class="text-sm font-bold">
{{ $t('sharelink.share_via_email') }}
</span>
</li>
<li class="option-item" @click="copyIframe">
<div class="option-icon">
<li @click="copyIframe" class="flex items-center py-2.5 px-5 block cursor-pointer hover:bg-light-background">
<div class="w-8">
<code-icon size="14" />
</div>
<span class="option-value">{{ $t('sharelink.copy_embed') }}</span>
<span class="text-sm font-bold">
{{ $t('sharelink.copy_embed') }}
</span>
</li>
</ul>
<textarea v-model="iframeCode" ref="iframe" class="iframe-output"></textarea>
<textarea v-model="iframeCode" ref="iframe" class="absolute right-full opacity-0 pointer-events-none"></textarea>
</div>
</template>
<script>
import { LinkIcon, CheckIcon, SendIcon, MoreHorizontalIcon, CodeIcon } from 'vue-feather-icons'
import { CopyIcon, CheckIcon, SendIcon, MoreHorizontalIcon, CodeIcon } from 'vue-feather-icons'
import { events } from '/resources/js/bus'
export default {
name: 'CopyShareLink',
props: [
'size',
'item',
],
components: {
MoreHorizontalIcon,
CheckIcon,
CopyIcon,
CodeIcon,
LinkIcon,
SendIcon
},
data() {
return {
id: 'link-input-' + Math.floor(Math.random() * 10000000),
iframeCode: '',
isCopiedLink: false,
isOpenedMoreOptions: false,
@@ -58,7 +65,7 @@ export default {
moreOptions() {
this.isOpenedMoreOptions = ! this.isOpenedMoreOptions
},
sendOnEmail() {
sendViaEmail() {
events.$emit('popup:open', {
name: 'share-edit',
item: this.item,
@@ -88,7 +95,7 @@ export default {
copyUrl() {
// Get input value
var copyText = document.getElementById('link-input')
var copyText = document.getElementById(this.id)
// select link
copyText.select()
@@ -108,173 +115,3 @@ export default {
}
}
</script>
<style lang="scss" scoped>
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
@import "resources/sass/vuefilemanager/_inapp-forms.scss";
@import "resources/sass/vuefilemanager/_forms.scss";
.input-options {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
background: white;
border-radius: 8px;
position: absolute;
overflow: hidden;
top: 45px;
left: 0;
right: 0;
z-index: 9;
max-height: 295px;
overflow-y: auto;
.option-item {
padding: 13px 20px;
display: block;
cursor: pointer;
&:hover {
color: $theme;
background: $light_background;
}
&:last-child {
border-bottom: none;
}
}
.option-icon {
width: 20px;
display: inline-block;
@include font-size(10);
svg {
margin-top: -4px;
vertical-align: middle;
}
}
.option-value {
@include font-size(14);
font-weight: 700;
width: 100%;
vertical-align: middle;
&.placehoder {
color: rgba($text, 0.5);
}
}
}
.multi-icon {
display: flex;
align-items: center;
background: $light_background;
border-bottom-right-radius: 8px;
border-top-right-radius: 8px;
line,
path,
polygon,
circle{
color: $text;
}
.icon-item {
padding: 12px 10px;
display: flex;
align-items: center;
border-left: 1px solid $light_mode_border_darken;
cursor: pointer;
&:hover {
line,
polyline,
path,
circle,
polygon {
color: inherit;
}
}
&:first-child {
border-left: none;
}
&:last-child {
border-bottom-right-radius: 8px;
border-top-right-radius: 8px;
}
}
}
.copy-input {
position: relative;
border: 1px solid $light_mode_border_darken;
border-radius: 8px;
&.small {
&.icon-append {
.icon {
padding: 10px;
}
}
input {
padding: 6px 10px;
@include font-size(13);
}
}
.icon {
cursor: pointer;
}
input {
text-overflow: ellipsis;
box-shadow: none;
&:disabled {
color: $text;
cursor: pointer;
}
}
}
.iframe-output {
position: absolute;
right: -9999px;
}
.dark {
.copy-input {
border-color: #333333;
}
.multi-icon {
background: $dark_mode_foreground;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
line,
path,
circle,
polygon {
color: inherit !important;
}
.icon-item {
border-color: #333333;
}
}
.copy-input {
input {
color: $dark_mode_text_primary;
}
}
}
</style>

2
resources/js/components/Others/ShareCreatePopup.vue
View File

@@ -60,7 +60,7 @@
<!--Copy generated link-->
<AppInputText v-if="isGeneratedShared" :title="$t('shared_form.label_share_vie_email')" class="px-6" :is-last="true">
<CopyShareLink size="small" :item="pickedItem" />
<CopyShareLink :item="pickedItem" />
</AppInputText>
</PopupContent>

2
resources/js/components/Others/ShareEditPopup.vue
View File

@@ -12,7 +12,7 @@
<!--Get share link-->
<div v-if="! sendToRecipientsMenu || (sendToRecipientsMenu && isEmailSended)" class="input-wrapper copy-input">
<label class="input-label">{{ $t('shared_form.label_share_vie_email') }}:</label>
<CopyShareLink size="small" :item="pickedItem" />
<CopyShareLink :item="pickedItem" />
</div>
<!--Share via email-->