IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Get overlay working, refactor

Browse Source 
- use arrow function for error watch property, remove let that = this
This commit is contained in:
Matt Rider 2019-06-03 18:54:39 -03:00
parent e5ccdb91d2
commit 31a6d36e59
1 changed files with 80 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
webapp/components/Upload/index.vue
View File

@ -1,21 +1,31 @@
<template> <template>
<vue-dropzone <div :key="error">
id="customdropzone" <vue-dropzone
:key="user.avatar" id="customdropzone"
ref="el" :key="user.avatar"
:use-custom-slot="true" ref="el"
:options="dropzoneOptions" :use-custom-slot="true"
@vdropzone-error="verror" :options="dropzoneOptions"
> @vdropzone-error="verror"
<div class="dz-message"> >
<hc-avatar :user="user" class="profile-avatar" size="x-large"/> <div class="dz-message" @mouseover="hover = true" @mouseleave="hover = false">
</div> <hc-avatar :user="user" class="profile-avatar" size="x-large"></hc-avatar>
</vue-dropzone> <div class="hc-attachments-upload-area">
<div class="hc-drag-marker">
<ds-icon v-if="hover" name="image" size="xxx-large"/>
</div>
</div>
</div>
<div class="dz-preview dz-error dz-complete dz-image-preview">
<span></span>
</div>
</vue-dropzone>
</div>
</template> </template>
<script> <script>
import vueDropzone from 'nuxt-dropzone' import vueDropzone from 'nuxt-dropzone'
import HcAvatar from '~/components/Avatar/Avatar.vue'
import gql from 'graphql-tag' import gql from 'graphql-tag'
import HcAvatar from '~/components/Avatar/Avatar.vue'
export default { export default {
components: { components: {
@ -30,16 +40,15 @@ export default {
dropzoneOptions: { dropzoneOptions: {
url: this.vddrop, url: this.vddrop,
maxFilesize: 5.0, maxFilesize: 5.0,
dictDefaultMessage: '',
}, },
error: false, error: false,
hover: false,
} }
}, },
watch: { watch: {
error() { error: () => {
let that = this
setTimeout(function() { setTimeout(function() {
that.error = false this.error = false
}, 2000) }, 2000)
}, },
}, },
@ -76,10 +85,6 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss">
#customdropzone:hover {
cursor: pointer;
}
#customdropzone .dz-preview { #customdropzone .dz-preview {
transition: all 0.2s ease-out; transition: all 0.2s ease-out;
width: 160px; width: 160px;
@ -104,9 +109,59 @@ export default {
width: 100%; width: 100%;
} }
#customdropzone .dz-preview .dz-details { .hc-attachments-upload-area {
color: white; position: relative;
transition: opacity 0.2s linear; display: flex;
text-align: center; align-items: center;
justify-content: center;
cursor: pointer;
}
.hc-attachments-upload-button {
pointer-events: none;
}
.hc-drag-marker {
position: relative;
width: 122px;
height: 122px;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
color: hsl(0, 0%, 25%);
transition: all 0.2s ease-out;
font-size: 60px;
margin: -120px auto 5px;
background-color: rgba(255, 255, 255, 0.3);
opacity: 0.1;
&:before {
position: absolute;
content: '';
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 100%;
border: 20px solid rgba(255, 255, 255, 0.4);
visibility: hidden;
}
&:after {
position: absolute;
content: '';
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
border-radius: 100%;
border: 1px dashed hsl(0, 0%, 25%);
}
.hc-attachments-upload-area:hover & {
opacity: 1;
}
} }
</style> </style>