chris
/
pixelfed
forked from mirror/pixelfed
1
0
Fork 0
Code Pull Requests Activity

Update ComposeModal.vue component

This commit is contained in:
Daniel Supernault 2019-04-15 19:39:54 -06:00
parent e3c425e222
commit 7a37926703
No known key found for this signature in database
GPG Key ID: 0DEF1C662C9033F7
1 changed files with 57 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
resources/assets/js/components/ComposeModal.vue
View File

@ -25,6 +25,15 @@
</div>
<div class="postPresenterContainer">
<div v-if="uploading">
<div class="w-100 h-100 bg-light py-5" style="border-bottom: 1px solid #f1f1f1">
<div class="p-5">
<b-progress :value="uploadProgress" :max="100" striped :animated="true"></b-progress>
<p class="text-center mb-0 font-weight-bold">Uploading...</p>
</div>
</div>
</div>
<div v-else>
<div v-if="ids.length == 0" class="w-100 h-100 bg-light py-5 cursor-pointer" style="border-bottom: 1px solid #f1f1f1" v-on:click="addMedia()">
<p class="text-center mb-0 font-weight-bold p-5">Click here to add photos.</p>
</div>
@ -45,7 +54,7 @@
</b-carousel-slide>
</b-carousel>
</div>
<div v-if="mediaDrawer" class="bg-dark align-items-center">
<div v-if="ids.length > 0" class="bg-dark align-items-center">
<ul class="nav media-drawer-filters text-center">
<li class="nav-item">
<div class="p-1 pt-3">
@ -63,6 +72,7 @@
</li>
</ul>
</div>
</div>
<div v-if="mediaDrawer" class="bg-lighter p-2 row">
<div class="col-12">
<div class="form-group">
@ -84,7 +94,7 @@
</div>
</div>
<div :class="[mediaDrawer?'d-none':'card-body']">
<div class="card-body">
<div class="caption">
<p class="mb-2">
<textarea class="form-control d-inline-block" rows="3" placeholder="Add an optional caption" v-model="composeText"></textarea>
@ -101,7 +111,7 @@
</div>
</div>
<div :class="[mediaDrawer?'d-none':'card-footer']">
<div class="card-footer">
<div class="d-flex justify-content-between align-items-center">
<div>
<div class="custom-control custom-switch d-inline mr-3">
@ -192,6 +202,9 @@
</div>
</div>
<div class="card-footer py-1">
<p class="text-center mb-0 font-weight-bold text-muted small">Having issues? You can also use the <a href="/i/compose">Classic Compose UI</a>.</p>
</div>
</div>
</div>
</div>
@ -234,7 +247,9 @@ export default {
carouselCursor: 0,
visibility: 'public',
mediaDrawer: false,
composeState: 'publish'
composeState: 'publish',
uploading: false,
uploadProgress: 0
}
},
@ -323,6 +338,7 @@ export default {
$(document).on('change', '.file-input', function(e) {
let io = document.querySelector('.file-input');
Array.prototype.forEach.call(io.files, function(io, i) {
self.uploading = true;
if(self.media && self.media.length + i >= self.config.uploader.album_limit) {
swal('Error', 'You can only upload ' + self.config.uploader.album_limit + ' photos per album', 'error');
return;
@ -341,6 +357,7 @@ export default {
let xhrConfig = {
onUploadProgress: function(e) {
let progress = Math.round( (e.loaded * 100) / e.total );
self.uploadProgress = progress;
}
};
@ -349,8 +366,8 @@ export default {
self.ids.push(e.data.id);
self.media.push(e.data);
setTimeout(function() {
self.mediaDrawer = true;
}, 1000);
self.uploading = false;
}, 500);
}).catch(function(e) {
swal('Oops, something went wrong!', 'An unexpected error occurred.', 'error');
});