UA-Fediland/pixelfed
2
0
Fork 0
mirror of https://github.com/pixelfed/pixelfed.git synced 2024-11-10 08:44:49 +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

95
resources/assets/js/components/ComposeModal.vue
View file

@ -25,43 +25,53 @@
</div> </div>
<div class="postPresenterContainer"> <div class="postPresenterContainer">
<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="uploading">
<p class="text-center mb-0 font-weight-bold p-5">Click here to add photos.</p> <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>
<div v-if="ids.length > 0"> <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>
<div v-if="ids.length > 0">
<b-carousel id="p-carousel" <b-carousel id="p-carousel"
style="text-shadow: 1px 1px 2px #333;" style="text-shadow: 1px 1px 2px #333;"
controls controls
indicators indicators
background="#ffffff" background="#ffffff"
:interval="0" :interval="0"
v-model="carouselCursor" v-model="carouselCursor"
> >
<b-carousel-slide v-if="ids.length > 0" v-for="(preview, index) in media" :key="'preview_media_'+index"> <b-carousel-slide v-if="ids.length > 0" v-for="(preview, index) in media" :key="'preview_media_'+index">
<div slot="img" :class="[media[index].filter_class?media[index].filter_class + ' cursor-pointer':' cursor-pointer']" v-on:click="addMedia()"> <div slot="img" :class="[media[index].filter_class?media[index].filter_class + ' cursor-pointer':' cursor-pointer']" v-on:click="addMedia()">
<img class="d-block img-fluid w-100" :src="preview.url" :alt="preview.description" :title="preview.description"> <img class="d-block img-fluid w-100" :src="preview.url" :alt="preview.description" :title="preview.description">
</div>
</b-carousel-slide>
</b-carousel>
</div>
<div v-if="mediaDrawer" class="bg-dark align-items-center">
<ul class="nav media-drawer-filters text-center">
<li class="nav-item">
<div class="p-1 pt-3">
<img :src="media[carouselCursor].url" width="100px" height="60px" v-on:click.prevent="toggleFilter($event, null)" class="cursor-pointer">
</div>
<a :class="[media[carouselCursor].filter_class == null ? 'nav-link text-white active' : 'nav-link text-muted']" href="#" v-on:click.prevent="toggleFilter($event, null)">No Filter</a>
</li>
<li class="nav-item" v-for="(filter, index) in filters">
<div class="p-1 pt-3">
<div :class="filter[1]" v-on:click.prevent="toggleFilter($event, filter[1])">
<img :src="media[carouselCursor].url" width="100px" height="60px" class="">
</div> </div>
</div> </b-carousel-slide>
<a :class="[media[carouselCursor].filter_class == filter[1] ? 'nav-link text-white active' : 'nav-link text-muted']" href="#" v-on:click.prevent="toggleFilter($event, filter[1])">{{filter[0]}}</a> </b-carousel>
</li> </div>
</ul> <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">
<img :src="media[carouselCursor].url" width="100px" height="60px" v-on:click.prevent="toggleFilter($event, null)" class="cursor-pointer">
</div>
<a :class="[media[carouselCursor].filter_class == null ? 'nav-link text-white active' : 'nav-link text-muted']" href="#" v-on:click.prevent="toggleFilter($event, null)">No Filter</a>
</li>
<li class="nav-item" v-for="(filter, index) in filters">
<div class="p-1 pt-3">
<div :class="filter[1]" v-on:click.prevent="toggleFilter($event, filter[1])">
<img :src="media[carouselCursor].url" width="100px" height="60px" class="">
</div>
</div>
<a :class="[media[carouselCursor].filter_class == filter[1] ? 'nav-link text-white active' : 'nav-link text-muted']" href="#" v-on:click.prevent="toggleFilter($event, filter[1])">{{filter[0]}}</a>
</li>
</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">
@ -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');
}); });