UA-Fediland/pixelfed
2
0
Fork 0
mirror of https://github.com/pixelfed/pixelfed.git synced 2024-11-10 00:34:50 +00:00
Code Issues Projects Releases Packages Wiki Activity

Update ComposeModal.vue component

Browse source
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>
<div class="postPresenterContainer"> <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()"> <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> <p class="text-center mb-0 font-weight-bold p-5">Click here to add photos.</p>
</div> </div>
@ -45,7 +54,7 @@
</b-carousel-slide> </b-carousel-slide>
</b-carousel> </b-carousel>
</div> </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"> <ul class="nav media-drawer-filters text-center">
<li class="nav-item"> <li class="nav-item">
<div class="p-1 pt-3"> <div class="p-1 pt-3">
@ -63,6 +72,7 @@
</li> </li>
</ul> </ul>
</div> </div>
</div>
<div v-if="mediaDrawer" class="bg-lighter p-2 row"> <div v-if="mediaDrawer" class="bg-lighter p-2 row">
<div class="col-12"> <div class="col-12">
<div class="form-group"> <div class="form-group">
@ -84,7 +94,7 @@
</div> </div>
</div> </div>
<div :class="[mediaDrawer?'d-none':'card-body']"> <div class="card-body">
<div class="caption"> <div class="caption">
<p class="mb-2"> <p class="mb-2">
<textarea class="form-control d-inline-block" rows="3" placeholder="Add an optional caption" v-model="composeText"></textarea> <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> </div>
<div :class="[mediaDrawer?'d-none':'card-footer']"> <div class="card-footer">
<div class="d-flex justify-content-between align-items-center"> <div class="d-flex justify-content-between align-items-center">
<div> <div>
<div class="custom-control custom-switch d-inline mr-3"> <div class="custom-control custom-switch d-inline mr-3">
@ -192,6 +202,9 @@
</div> </div>
</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> </div>
</div> </div>
@ -234,7 +247,9 @@ export default {
carouselCursor: 0, carouselCursor: 0,
visibility: 'public', visibility: 'public',
mediaDrawer: false, mediaDrawer: false,
composeState: 'publish' composeState: 'publish',
uploading: false,
uploadProgress: 0
} }
}, },
@ -323,6 +338,7 @@ export default {
$(document).on('change', '.file-input', function(e) { $(document).on('change', '.file-input', function(e) {
let io = document.querySelector('.file-input'); let io = document.querySelector('.file-input');
Array.prototype.forEach.call(io.files, function(io, i) { Array.prototype.forEach.call(io.files, function(io, i) {
self.uploading = true;
if(self.media && self.media.length + i >= self.config.uploader.album_limit) { 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'); swal('Error', 'You can only upload ' + self.config.uploader.album_limit + ' photos per album', 'error');
return; return;
@ -341,6 +357,7 @@ export default {
let xhrConfig = { let xhrConfig = {
onUploadProgress: function(e) { onUploadProgress: function(e) {
let progress = Math.round( (e.loaded * 100) / e.total ); 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.ids.push(e.data.id);
self.media.push(e.data); self.media.push(e.data);
setTimeout(function() { setTimeout(function() {
self.mediaDrawer = true; self.uploading = false;
}, 1000); }, 500);
}).catch(function(e) { }).catch(function(e) {
swal('Oops, something went wrong!', 'An unexpected error occurred.', 'error'); swal('Oops, something went wrong!', 'An unexpected error occurred.', 'error');
}); });