mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-29 19:25:57 +00:00
add to create share link a send share vie email option
This commit is contained in:
Milos Holba
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<label class="input-label">{{$t('shared_form.recipients_label')}}</label>
|
||||
<div class="input-wrapper">
|
||||
<div class="email-list" v-for="(email, index) in emails" :key="index">
|
||||
<span>
|
||||
<p>{{email}} </p>
|
||||
<x-icon @click="removeEmail(index)" class="icon" size="14" />
|
||||
</span>
|
||||
</div>
|
||||
<input@keydown.delete=removeLastEmail($event) @keyup="handleEmail()" v-model="singleEmail" class="emails" :placeholder="placeHolder" autocomplete="new-password" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {XIcon } from 'vue-feather-icons'
|
||||
import {events} from '@/bus'
|
||||
export default {
|
||||
name: "EmailsInput",
|
||||
components: {XIcon},
|
||||
computed: {
|
||||
placeHolder() {
|
||||
if(! this.emails.length)
|
||||
return this.$t('shared_form.email_placeholder')
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
emails: [],
|
||||
singleEmail: undefined
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
removeEmail (email) {
|
||||
// Remove email forom array of emails
|
||||
this.emails.shift(email)
|
||||
},
|
||||
removeLastEmail(event) {
|
||||
|
||||
// If is input empty and presse backspace remove last email from array
|
||||
if(event.code === 'Backspace' && this.singleEmail === '' )
|
||||
this.emails.pop()
|
||||
},
|
||||
handleEmail() {
|
||||
|
||||
|
||||
// Get index of @ and last dot
|
||||
let lastDot = this.singleEmail.lastIndexOf('.')
|
||||
let at = this.singleEmail.indexOf('@')
|
||||
|
||||
// Check if is after @ some dot, if email have @ anf if dont have more like one
|
||||
if(lastDot < at || at === -1 || this.singleEmail.match(/@/g).length > 1 ) return
|
||||
|
||||
|
||||
// After come or backspace push the single email to array or emails
|
||||
if(this.singleEmail.includes(',') || this.singleEmail.includes(' ') ) {
|
||||
|
||||
let email = this.singleEmail.replace(/[","," "]/, "")
|
||||
|
||||
// Push single email to aray of emails
|
||||
this.emails.push(email)
|
||||
|
||||
this.singleEmail = ""
|
||||
|
||||
events.$emit('emailsInputValues', this.emails)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/vue-file-manager/_inapp-forms.scss";
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
|
||||
.wrapper {
|
||||
margin-bottom: 20px;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
@include font-size(14);
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 50px;
|
||||
border-radius: 8px;
|
||||
padding: 13px 20px;
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
|
||||
overflow-x: auto;
|
||||
overflow-y: none;
|
||||
|
||||
&:focus-within{
|
||||
border:1px solid $theme;
|
||||
box-shadow: 0 1px 5px rgba($theme, 0.3);
|
||||
}
|
||||
.email-list {
|
||||
white-space: nowrap;
|
||||
span {
|
||||
display: flex;
|
||||
padding: 5px;
|
||||
background: rgba($theme, .1);
|
||||
border-radius: 8px;
|
||||
margin-right: 5px;
|
||||
align-items: center;
|
||||
p {
|
||||
color: $theme;
|
||||
font-weight: 700;
|
||||
@include font-size(16);
|
||||
}
|
||||
.icon {
|
||||
cursor: pointer;
|
||||
margin: 0px 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.emails {
|
||||
min-width: 100px;
|
||||
border: none ;
|
||||
font-weight: 700;
|
||||
@include font-size(16);
|
||||
appearance: none;
|
||||
|
||||
&::placeholder {
|
||||
color:rgba($text-muted, .5)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.input-wrapper {
|
||||
background: $dark_mode_foreground;
|
||||
.emails {
|
||||
background: $dark_mode_foreground;
|
||||
color: $dark_mode_text_primary;
|
||||
|
||||
&::placeholder {
|
||||
color:$dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@@ -9,6 +9,24 @@
|
||||
<!--Item Thumbnail-->
|
||||
<ThumbnailItem class="item-thumbnail" :item="pickedItem" info="metadata"/>
|
||||
|
||||
<div class="select-share-wrapper">
|
||||
<div @click="shareBy = 'link'" :class="{'active' : shareBy === 'link'}">
|
||||
<link-icon class="icon" size="17" />
|
||||
<h1>{{$t('shared_form.share_by_link')}}</h1>
|
||||
</div>
|
||||
<div @click="shareBy = 'email'" :class="{'active' : shareBy === 'email'}">
|
||||
<mail-icon class="icon" size="17"/>
|
||||
<h1> {{$t('shared_form.share_by_email')}}</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="shareBy === 'email' && isGeneratedShared " class="successfully-send-wrapper">
|
||||
<div class="successfully-send"> {{$t('shared_form.email_successfully_send_message')}} </div>
|
||||
</div>
|
||||
|
||||
<EmailsInput v-if="shareBy === 'email' && ! isGeneratedShared "/>
|
||||
|
||||
|
||||
<!--Form to set sharing-->
|
||||
<ValidationObserver v-if="! isGeneratedShared" ref="shareForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
|
||||
|
||||
@@ -83,12 +101,14 @@
|
||||
import PopupActions from '@/components/Others/Popup/PopupActions'
|
||||
import PopupContent from '@/components/Others/Popup/PopupContent'
|
||||
import PopupHeader from '@/components/Others/Popup/PopupHeader'
|
||||
import EmailsInput from '@/components/Others/Forms/EmailsInput'
|
||||
import SwitchInput from '@/components/Others/Forms/SwitchInput'
|
||||
import SelectInput from '@/components/Others/Forms/SelectInput'
|
||||
import ThumbnailItem from '@/components/Others/ThumbnailItem'
|
||||
import ActionButton from '@/components/Others/ActionButton'
|
||||
import CopyInput from '@/components/Others/Forms/CopyInput'
|
||||
import ButtonBase from '@/components/FilesView/ButtonBase'
|
||||
import {LinkIcon, MailIcon } from 'vue-feather-icons'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
@@ -106,11 +126,14 @@
|
||||
PopupActions,
|
||||
PopupContent,
|
||||
PopupHeader,
|
||||
EmailsInput,
|
||||
SelectInput,
|
||||
SwitchInput,
|
||||
ButtonBase,
|
||||
CopyInput,
|
||||
MailIcon,
|
||||
required,
|
||||
LinkIcon
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
@@ -139,12 +162,14 @@
|
||||
permission: undefined,
|
||||
type: undefined,
|
||||
unique_id: undefined,
|
||||
emails:undefined
|
||||
},
|
||||
pickedItem: undefined,
|
||||
shareLink: undefined,
|
||||
isGeneratedShared: false,
|
||||
isLoading: false,
|
||||
isMoreOptions: false,
|
||||
shareBy: "link"
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -194,9 +219,13 @@
|
||||
},
|
||||
mounted() {
|
||||
|
||||
events.$on('emailsInputValues', (emails) => this.shareOptions.emails = emails)
|
||||
|
||||
// Show popup
|
||||
events.$on('popup:open', args => {
|
||||
|
||||
this.shareBy = 'link'
|
||||
|
||||
if (args.name !== 'share-create') return
|
||||
|
||||
// Store picked item
|
||||
@@ -232,6 +261,66 @@
|
||||
@import "@assets/vue-file-manager/_inapp-forms.scss";
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
|
||||
.successfully-send-wrapper {
|
||||
padding: 0px 20px;
|
||||
margin-bottom: 20px;
|
||||
.successfully-send {
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
border-radius: 8px;
|
||||
background: $light_background ;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
p {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-share-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0px 20px;
|
||||
margin-bottom: 20px;
|
||||
cursor: pointer;
|
||||
|
||||
& > * {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: $light_background;
|
||||
color: $text;
|
||||
}
|
||||
& > :first-child {
|
||||
border-top-left-radius: 8px;
|
||||
border-bottom-left-radius: 8px;
|
||||
}
|
||||
& > :last-child {
|
||||
border-top-right-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
}
|
||||
.icon {
|
||||
margin-right: 10px;
|
||||
path,
|
||||
polyline {
|
||||
color: $theme !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-share-wrapper {
|
||||
.active {
|
||||
background: $text;
|
||||
h1 {
|
||||
color: $light_background !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.more-options {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
@@ -246,4 +335,19 @@
|
||||
.item-thumbnail {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.select-share-wrapper {
|
||||
& > * {
|
||||
background: $dark_mode_foreground;
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
.active {
|
||||
background: $dark_mode_text_primary;
|
||||
h1 {
|
||||
color: $dark_mode_foreground !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user