ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add icon to document form

This commit is contained in:
Ramon Wenger 2019-05-15 15:34:32 +02:00
parent caa6736330
commit 8764aee445
1 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
client/src/components/content-forms/DocumentForm.vue
View File

@ -1,18 +1,25 @@
<template> <template>
<div class="document-form" ref="documentform"> <div class="document-form" ref="documentform">
<div v-if="!value.url" ref="uploadcare-panel"></div> <div v-if="!value.url" ref="uploadcare-panel"></div>
<div v-if="value.url"> <div v-if="value.url" class="document-form__uploaded">
<document-icon class="document-form__icon"></document-icon>
<a :href="previewUrl" class="document-form__link" target="_blank">{{previewLink}}</a> <a :href="previewUrl" class="document-form__link" target="_blank">{{previewLink}}</a>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import DocumentIcon from '@/components/icons/DocumentIcon';
import {uploadcare} from '@/helpers/uploadcare'; import {uploadcare} from '@/helpers/uploadcare';
export default { export default {
props: ['value', 'index'], props: ['value', 'index'],
components: {
DocumentIcon
},
mounted() { mounted() {
uploadcare(this, url => { uploadcare(this, url => {
this.$emit('link-change-url', url, this.index) this.$emit('link-change-url', url, this.index)
@ -41,11 +48,21 @@
@import "@/styles/_variables.scss"; @import "@/styles/_variables.scss";
.document-form { .document-form {
&__uploaded {
display: flex;
align-items: center;
}
&__link { &__link {
text-decoration: underline; text-decoration: underline;
} }
&__icon {
width: 30px;
height: 30px;
margin-right: $small-spacing;
}
&__file-input { &__file-input {
width: 0.1px; width: 0.1px;
height: 0.1px; height: 0.1px;