Prettier file upload form

This commit is contained in:
Eliot Berriot 2018-02-28 19:21:06 +01:00
parent 799cc01964
commit 7561f4dddf
No known key found for this signature in database
GPG Key ID: DD6965E2476E5C27
1 changed files with 7 additions and 5 deletions

View File

@ -1,8 +1,8 @@
<template> <template>
<div> <div>
<div v-if="batch" class="ui two buttons"> <div v-if="batch" class="ui container">
<file-upload-widget <file-upload-widget
class="ui icon button" :class="['ui', 'icon', 'left', 'floated', 'button']"
:post-action="uploadUrl" :post-action="uploadUrl"
:multiple="true" :multiple="true"
:size="1024 * 1024 * 30" :size="1024 * 1024 * 30"
@ -19,16 +19,18 @@
<i class="upload icon"></i> <i class="upload icon"></i>
Select files to upload... Select files to upload...
</file-upload-widget> </file-upload-widget>
<button class="ui icon teal button" v-if="!$refs.upload || !$refs.upload.active" @click.prevent="$refs.upload.active = true"> <button
:class="['ui', 'right', 'floated', 'icon', {disabled: files.length === 0}, 'button']"
v-if="!$refs.upload || !$refs.upload.active" @click.prevent="$refs.upload.active = true">
<i class="play icon" aria-hidden="true"></i> <i class="play icon" aria-hidden="true"></i>
Start Upload Start Upload
</button> </button>
<button type="button" class="ui icon yellow button" v-else @click.prevent="$refs.upload.active = false"> <button type="button" class="ui right floated icon yellow button" v-else @click.prevent="$refs.upload.active = false">
<i class="pause icon" aria-hidden="true"></i> <i class="pause icon" aria-hidden="true"></i>
Stop Upload Stop Upload
</button> </button>
</div> </div>
<div class="ui hidden divider"></div> <div class="ui hidden clearing divider"></div>
<p v-if="batch"> <p v-if="batch">
Once all your files are uploaded, simply head over <router-link :to="{name: 'library.import.batches.detail', params: {id: batch.id }}">import detail page</router-link> to check the import status. Once all your files are uploaded, simply head over <router-link :to="{name: 'library.import.batches.detail', params: {id: batch.id }}">import detail page</router-link> to check the import status.
</p> </p>