68 lines
1.1 KiB
Vue
68 lines
1.1 KiB
Vue
<template>
|
|
<div
|
|
class="media-upload"
|
|
:class="{ disabled: disabled }"
|
|
>
|
|
<label
|
|
class="label"
|
|
:title="$t('tool_tip.media_upload')"
|
|
>
|
|
<i
|
|
v-if="uploading"
|
|
class="progress-icon icon-spin4 animate-spin"
|
|
/>
|
|
<i
|
|
v-if="!uploading"
|
|
class="new-icon icon-upload"
|
|
/>
|
|
<input
|
|
v-if="uploadReady"
|
|
:disabled="disabled"
|
|
type="file"
|
|
style="position: fixed; top: -100em"
|
|
multiple="true"
|
|
@change="change"
|
|
>
|
|
</label>
|
|
</div>
|
|
</template>
|
|
|
|
<script src="./media_upload.js" ></script>
|
|
|
|
<style lang="scss">
|
|
@import '../../_variables.scss';
|
|
|
|
.media-upload {
|
|
&.disabled {
|
|
.new-icon {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
&:hover {
|
|
i, label {
|
|
color: $fallback--faint;
|
|
color: var(--faint, $fallback--faint);
|
|
}
|
|
}
|
|
}
|
|
|
|
.label {
|
|
display: inline-block;
|
|
}
|
|
|
|
.new-icon {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.progress-icon {
|
|
display: inline-block;
|
|
line-height: 0;
|
|
&::before {
|
|
/* Overriding fontello to achieve the perfect speeeen */
|
|
margin: 0;
|
|
line-height: 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|