mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-28 02:50:39 +00:00
CopyInput.vue refactoring
This commit is contained in:
Čarodej
+2
-2
@@ -185,11 +185,11 @@ return [
|
||||
],
|
||||
[
|
||||
'name' => 'paystack_payment_description',
|
||||
'value' => 'Available Bank Account, USSD, Mobile Money, Apple Pay',
|
||||
'value' => 'Available Bank Account, USSD, Mobile Money, Apple Pay.',
|
||||
],
|
||||
[
|
||||
'name' => 'stripe_payment_description',
|
||||
'value' => 'Available credit card or Apple Pay',
|
||||
'value' => 'Available credit card or Apple Pay.',
|
||||
],
|
||||
],
|
||||
],
|
||||
|
||||
@@ -25,8 +25,8 @@
|
||||
"/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-items~chunks/page~8729b0a3.js": "/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-items~chunks/page~8729b0a3.js?id=50f7067283a882b798bd",
|
||||
"/chunks/app-language~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan-creat~d6690165.js": "/chunks/app-language~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan-creat~d6690165.js?id=2f03fbbe27b922063d16",
|
||||
"/chunks/app-others.js": "/chunks/app-others.js?id=c1e42f111fd531672466",
|
||||
"/chunks/app-payments.js": "/chunks/app-payments.js?id=89d41188daef178a94b0",
|
||||
"/chunks/app-payments~chunks/settings.js": "/chunks/app-payments~chunks/settings.js?id=ec4c3e5b27d7ee2e2cd1",
|
||||
"/chunks/app-payments.js": "/chunks/app-payments.js?id=616abaab42fb4c218f33",
|
||||
"/chunks/app-payments~chunks/settings.js": "/chunks/app-payments~chunks/settings.js?id=5e454564895beb88469a",
|
||||
"/chunks/app-settings.js": "/chunks/app-settings.js?id=5968eed91e41e99efd4c",
|
||||
"/chunks/app-setup.js": "/chunks/app-setup.js?id=c3a013b11ae7bde6f39d",
|
||||
"/chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/database~chunks/email-veri~2c1222b7.js": "/chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/database~chunks/email-veri~2c1222b7.js?id=f8d41224222e2bd2040e",
|
||||
@@ -71,10 +71,10 @@
|
||||
"/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=a52c81995d29f51dfe05",
|
||||
"/chunks/purchase-code.js": "/chunks/purchase-code.js?id=2da6b9e5f951fb7f4312",
|
||||
"/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=8577d4c771602671b38a",
|
||||
"/chunks/settings.js": "/chunks/settings.js?id=b5cae98f485e7e6f6ef9",
|
||||
"/chunks/settings-password.js": "/chunks/settings-password.js?id=1ab825f0be1d756e231b",
|
||||
"/chunks/settings.js": "/chunks/settings.js?id=3b85172bcc9cfc7b6a35",
|
||||
"/chunks/settings-password.js": "/chunks/settings-password.js?id=f119a31771105baf2df9",
|
||||
"/chunks/settings-storage.js": "/chunks/settings-storage.js?id=6e69a64a01e345af8b55",
|
||||
"/chunks/settings~chunks/settings-password.js": "/chunks/settings~chunks/settings-password.js?id=2af24f8d9f3412ae0662",
|
||||
"/chunks/settings~chunks/settings-password.js": "/chunks/settings~chunks/settings-password.js?id=aafc9cd6aa47b01bc25a",
|
||||
"/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=651d5accf401908724c5",
|
||||
"/chunks/shared.js": "/chunks/shared.js?id=db60726012b6d246bd77",
|
||||
"/chunks/shared-with-me.js": "/chunks/shared-with-me.js?id=cf39d503eef93bcc7f1c",
|
||||
@@ -182,5 +182,46 @@
|
||||
"/chunks/admin~chunks/platform~chunks/settings~chunks/shared.3c23d5015727c88ad982.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.3c23d5015727c88ad982.hot-update.js",
|
||||
"/chunks/admin~chunks/platform~chunks/settings~chunks/shared.4f8cae58dbe64014a0b2.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.4f8cae58dbe64014a0b2.hot-update.js",
|
||||
"/chunks/admin~chunks/platform~chunks/settings~chunks/shared.7dc07358ab58b00c9140.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.7dc07358ab58b00c9140.hot-update.js",
|
||||
"/chunks/admin~chunks/platform~chunks/settings~chunks/shared.b0ed5f0ca43eb55bb28f.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.b0ed5f0ca43eb55bb28f.hot-update.js"
|
||||
"/chunks/admin~chunks/platform~chunks/settings~chunks/shared.b0ed5f0ca43eb55bb28f.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.b0ed5f0ca43eb55bb28f.hot-update.js",
|
||||
"/chunks/app-payments.ce10b09e11eb0a19ac32.hot-update.js": "/chunks/app-payments.ce10b09e11eb0a19ac32.hot-update.js",
|
||||
"/chunks/app-payments~chunks/settings.4c85a18a52126d6dbca9.hot-update.js": "/chunks/app-payments~chunks/settings.4c85a18a52126d6dbca9.hot-update.js",
|
||||
"/chunks/app-payments~chunks/settings.e9f026f327c87eaf7cec.hot-update.js": "/chunks/app-payments~chunks/settings.e9f026f327c87eaf7cec.hot-update.js",
|
||||
"/chunks/app-payments~chunks/settings.77588e1a5df573dd2dd3.hot-update.js": "/chunks/app-payments~chunks/settings.77588e1a5df573dd2dd3.hot-update.js",
|
||||
"/chunks/app-payments~chunks/settings.f086f3649d6a611a457f.hot-update.js": "/chunks/app-payments~chunks/settings.f086f3649d6a611a457f.hot-update.js",
|
||||
"/chunks/app-payments~chunks/settings.ce24fb6690b104b59bb0.hot-update.js": "/chunks/app-payments~chunks/settings.ce24fb6690b104b59bb0.hot-update.js",
|
||||
"/chunks/app-payments~chunks/settings.a1ce9e3e0ca08b79940a.hot-update.js": "/chunks/app-payments~chunks/settings.a1ce9e3e0ca08b79940a.hot-update.js",
|
||||
"/chunks/app-payments~chunks/settings.5f06869bb89582d87a02.hot-update.js": "/chunks/app-payments~chunks/settings.5f06869bb89582d87a02.hot-update.js",
|
||||
"/chunks/app-payments~chunks/settings.ae775fb4e7ce535e1cdc.hot-update.js": "/chunks/app-payments~chunks/settings.ae775fb4e7ce535e1cdc.hot-update.js",
|
||||
"/chunks/app-payments~chunks/settings.c7151e71f4d094838a28.hot-update.js": "/chunks/app-payments~chunks/settings.c7151e71f4d094838a28.hot-update.js",
|
||||
"/chunks/app-payments~chunks/settings.1e92bd3e5eb421dc61a5.hot-update.js": "/chunks/app-payments~chunks/settings.1e92bd3e5eb421dc61a5.hot-update.js",
|
||||
"/chunks/app-payments~chunks/settings.13dcc5a457a405cc46bb.hot-update.js": "/chunks/app-payments~chunks/settings.13dcc5a457a405cc46bb.hot-update.js",
|
||||
"/chunks/app-payments~chunks/settings.a48b5951153fc59f7daa.hot-update.js": "/chunks/app-payments~chunks/settings.a48b5951153fc59f7daa.hot-update.js",
|
||||
"/chunks/app-payments~chunks/settings.07fe07171e8c140129d0.hot-update.js": "/chunks/app-payments~chunks/settings.07fe07171e8c140129d0.hot-update.js",
|
||||
"/chunks/app-payments~chunks/settings.b1cf5bdeb55f263f5e72.hot-update.js": "/chunks/app-payments~chunks/settings.b1cf5bdeb55f263f5e72.hot-update.js",
|
||||
"/chunks/app-payments~chunks/settings.93906131f80edb0f84fc.hot-update.js": "/chunks/app-payments~chunks/settings.93906131f80edb0f84fc.hot-update.js",
|
||||
"/chunks/app-payments~chunks/settings.c17d38f5884d51848df8.hot-update.js": "/chunks/app-payments~chunks/settings.c17d38f5884d51848df8.hot-update.js",
|
||||
"/chunks/app-payments~chunks/settings.6318889cecbafddba944.hot-update.js": "/chunks/app-payments~chunks/settings.6318889cecbafddba944.hot-update.js",
|
||||
"/chunks/app-payments~chunks/settings.43da691d4482e1ed6282.hot-update.js": "/chunks/app-payments~chunks/settings.43da691d4482e1ed6282.hot-update.js",
|
||||
"/chunks/app-payments~chunks/settings.dcb798201563c61a897c.hot-update.js": "/chunks/app-payments~chunks/settings.dcb798201563c61a897c.hot-update.js",
|
||||
"/chunks/app-payments~chunks/settings.a316a3fe372c345f809c.hot-update.js": "/chunks/app-payments~chunks/settings.a316a3fe372c345f809c.hot-update.js",
|
||||
"/chunks/app-payments~chunks/settings.d2b4f2b2d0d5a033d514.hot-update.js": "/chunks/app-payments~chunks/settings.d2b4f2b2d0d5a033d514.hot-update.js",
|
||||
"/chunks/app-payments~chunks/settings.1b160fc77002e8f02987.hot-update.js": "/chunks/app-payments~chunks/settings.1b160fc77002e8f02987.hot-update.js",
|
||||
"/chunks/app-payments~chunks/settings.38698aed876699475c61.hot-update.js": "/chunks/app-payments~chunks/settings.38698aed876699475c61.hot-update.js",
|
||||
"/chunks/app-payments~chunks/settings.f42e8540a5093653022e.hot-update.js": "/chunks/app-payments~chunks/settings.f42e8540a5093653022e.hot-update.js",
|
||||
"/chunks/app-payments~chunks/settings.b597fcc69cce25987eea.hot-update.js": "/chunks/app-payments~chunks/settings.b597fcc69cce25987eea.hot-update.js",
|
||||
"/chunks/app-payments~chunks/settings.b7c2ccc8c0bea1ccb3a4.hot-update.js": "/chunks/app-payments~chunks/settings.b7c2ccc8c0bea1ccb3a4.hot-update.js",
|
||||
"/chunks/app-payments~chunks/settings.c6471f6aff08488a1df5.hot-update.js": "/chunks/app-payments~chunks/settings.c6471f6aff08488a1df5.hot-update.js",
|
||||
"/chunks/app-payments~chunks/settings.469679e90243da3043c5.hot-update.js": "/chunks/app-payments~chunks/settings.469679e90243da3043c5.hot-update.js",
|
||||
"/chunks/app-payments~chunks/settings.a8315b543a2e037463b5.hot-update.js": "/chunks/app-payments~chunks/settings.a8315b543a2e037463b5.hot-update.js",
|
||||
"/chunks/app-payments~chunks/settings.4fe45d6bc0cd42c8262c.hot-update.js": "/chunks/app-payments~chunks/settings.4fe45d6bc0cd42c8262c.hot-update.js",
|
||||
"/js/main.8c4258961a0f086bb381.hot-update.js": "/js/main.8c4258961a0f086bb381.hot-update.js",
|
||||
"/chunks/app-payments.8c4258961a0f086bb381.hot-update.js": "/chunks/app-payments.8c4258961a0f086bb381.hot-update.js",
|
||||
"/chunks/settings.8c4258961a0f086bb381.hot-update.js": "/chunks/settings.8c4258961a0f086bb381.hot-update.js",
|
||||
"/chunks/settings-password.8c4258961a0f086bb381.hot-update.js": "/chunks/settings-password.8c4258961a0f086bb381.hot-update.js",
|
||||
"/chunks/app-payments.5277cfc30f1a9f50ad44.hot-update.js": "/chunks/app-payments.5277cfc30f1a9f50ad44.hot-update.js",
|
||||
"/chunks/settings.5277cfc30f1a9f50ad44.hot-update.js": "/chunks/settings.5277cfc30f1a9f50ad44.hot-update.js",
|
||||
"/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"
|
||||
}
|
||||
|
||||
@@ -1,39 +1,44 @@
|
||||
<template>
|
||||
<div class="inline-wrapper icon-append copy-input" :class="size" @click="copyUrl">
|
||||
<input ref="sel" :value="str" id="link-input" type="text" class="focus-border-theme input-dark" readonly>
|
||||
<div class="multi-icon">
|
||||
<div class="icon-item group hover-bg-theme-100">
|
||||
<copy-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>
|
||||
<div @click="copyUrl" class="flex items-center relative">
|
||||
<input ref="sel" :value="str" :id="id" type="text" class="pr-8 focus-border-theme input-dark" readonly>
|
||||
|
||||
<!--Copy icon-->
|
||||
<div class="absolute right-0 px-4">
|
||||
<copy-icon v-if="! isCopiedLink" size="16" class="cursor-pointer hover-text-theme vue-feather"/>
|
||||
<check-icon v-if="isCopiedLink" size="16" class="cursor-pointer text-theme vue-feather"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CopyIcon, CheckIcon, SendIcon } from 'vue-feather-icons'
|
||||
import {
|
||||
CopyIcon,
|
||||
CheckIcon,
|
||||
SendIcon
|
||||
} from 'vue-feather-icons'
|
||||
|
||||
export default {
|
||||
name: 'CopyInput',
|
||||
props: [
|
||||
'size',
|
||||
'str'
|
||||
'str',
|
||||
],
|
||||
components: {
|
||||
CheckIcon,
|
||||
CopyIcon,
|
||||
SendIcon
|
||||
SendIcon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isCopiedLink: false
|
||||
isCopiedLink: false,
|
||||
id: 'link-input-' + Math.floor(Math.random() * 10000000),
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
copyUrl() {
|
||||
|
||||
// Get input value
|
||||
var copyText = document.getElementById('link-input')
|
||||
let copyText = document.getElementById(this.id)
|
||||
|
||||
// select link
|
||||
copyText.select()
|
||||
@@ -53,119 +58,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";
|
||||
|
||||
.multi-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: $light_background;
|
||||
border-bottom-right-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
|
||||
line,
|
||||
rect,
|
||||
path,
|
||||
polygon {
|
||||
color: $text;
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
padding: 13px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-left: 1px solid $light_mode_border_darken;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
|
||||
line,
|
||||
polyline,
|
||||
path,
|
||||
rect,
|
||||
polygon {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-right-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// Single page
|
||||
.copy-input {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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,
|
||||
rect,
|
||||
polygon {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
border-color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.copy-input {
|
||||
input {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<PageTab>
|
||||
<!--Global payment settings-->
|
||||
<div class="card shadow-card">
|
||||
<div v-if="false" class="card shadow-card">
|
||||
<FormLabel icon="dollar">
|
||||
{{ $t('Subscription Payments') }}
|
||||
</FormLabel>
|
||||
|
||||
Reference in New Issue
Block a user