mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-10 00:34:50 +00:00
Update ComposeModal
This commit is contained in:
Daniel Supernault
parent
668e936eb5
commit
2119965659
1 changed files with 244 additions and 62 deletions
|
|
@ -89,6 +89,7 @@
|
|||
<a v-if="!pageLoading && (page > 1 && page <= 2) || (page == 1 && ids.length != 0) || page == 'cropPhoto'" class="font-weight-bold text-decoration-none" href="#" @click.prevent="nextPage">Next</a>
|
||||
<a v-if="!pageLoading && page == 3" class="font-weight-bold text-decoration-none" href="#" @click.prevent="compose()">Post</a>
|
||||
<a v-if="!pageLoading && page == 'addText'" class="font-weight-bold text-decoration-none" href="#" @click.prevent="composeTextPost()">Post</a>
|
||||
<a v-if="!pageLoading && page == 'video-2'" class="font-weight-bold text-decoration-none" href="#" @click.prevent="compose()">Post</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -107,8 +108,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="page == 'textOptions'" class="w-100 h-100" style="min-height: 280px;">
|
||||
</div>
|
||||
|
||||
<div v-if="page == 'addText'" class="w-100 h-100" style="min-height: 280px;">
|
||||
<div class="mt-2">
|
||||
<div class="media px-3">
|
||||
|
|
@ -606,6 +609,69 @@
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<div v-if="page == 'video-2'" class="w-100 h-100">
|
||||
<div v-if="video.title.length" class="border-bottom">
|
||||
<div class="media p-3">
|
||||
<img :src="media[0].url" width="100px" height="70px" :class="[media[0].filter_class?'mr-2 ' + media[0].filter_class:'mr-2']">
|
||||
<div class="media-body">
|
||||
<p class="font-weight-bold mb-1">{{video.title ? video.title.slice(0,70) : 'Untitled'}}</p>
|
||||
<p class="mb-0 text-muted small">{{video.description ? video.description.slice(0,90) : 'No description'}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="border-bottom d-flex justify-content-between px-4 mb-0 py-2 ">
|
||||
<div>
|
||||
<div class="text-dark ">Contains NSFW Media</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="custom-control custom-switch" style="z-index: 9999;">
|
||||
<input type="checkbox" class="custom-control-input" id="asnsfw" v-model="nsfw">
|
||||
<label class="custom-control-label" for="asnsfw"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-bottom">
|
||||
<p class="px-4 mb-0 py-2 cursor-pointer" @click="showLicenseCard()">Add license</p>
|
||||
</div>
|
||||
<div class="border-bottom">
|
||||
<p class="px-4 mb-0 py-2">
|
||||
<span>Audience</span>
|
||||
<span class="float-right">
|
||||
<a href="#" @click.prevent="showVisibilityCard()" class="btn btn-outline-secondary btn-sm small mr-3 mt-n1 disabled" style="font-size:10px;padding:3px;text-transform: uppercase" disabled>{{visibilityTag}}</a>
|
||||
<a href="#" @click.prevent="showVisibilityCard()" class="text-decoration-none"><i class="fas fa-chevron-right fa-lg text-lighter"></i></a>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="p-3">
|
||||
<!-- <div class="card card-body shadow-none border d-flex justify-content-center align-items-center mb-3 p-5">
|
||||
<div class="d-flex align-items-center">
|
||||
<p class="mb-0 text-center">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="sr-only">Loading...</span>
|
||||
</div>
|
||||
</p>
|
||||
<p class="ml-3 mb-0 text-center font-weight-bold">
|
||||
Processing video
|
||||
</p>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="form-group">
|
||||
<p class="small font-weight-bold text-muted mb-0">Title</p>
|
||||
<input class="form-control" v-model="video.title" placeholder="Add a good title">
|
||||
<p class="help-text mb-0 small text-muted">{{video.title.length}}/70</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group mb-0">
|
||||
<p class="small font-weight-bold text-muted mb-0">Description</p>
|
||||
<textarea class="form-control" v-model="video.description" placeholder="Add an optional description" maxlength="5000" rows="5"></textarea>
|
||||
<p class="help-text mb-0 small text-muted">{{video.description.length}}/5000</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- card-footers -->
|
||||
|
|
@ -700,12 +766,16 @@ export default {
|
|||
carouselCursor: 0,
|
||||
uploading: false,
|
||||
uploadProgress: 100,
|
||||
composeType: false,
|
||||
mode: 'photo',
|
||||
modes: [
|
||||
'photo',
|
||||
'video',
|
||||
'plain'
|
||||
],
|
||||
page: 1,
|
||||
composeState: 'publish',
|
||||
visibility: 'public',
|
||||
visibilityTag: 'Public',
|
||||
nsfw: false,
|
||||
place: false,
|
||||
commentsDisabled: false,
|
||||
optimizeMedia: true,
|
||||
|
|
@ -810,15 +880,16 @@ export default {
|
|||
name: "Attribution-NonCommercial-NoDerivs"
|
||||
}
|
||||
],
|
||||
licenseIndex: 0
|
||||
licenseIndex: 0,
|
||||
video: {
|
||||
title: '',
|
||||
description: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
beforeMount() {
|
||||
this.fetchProfile();
|
||||
if(this.config.uploader.media_types.includes('video/mp4') == false) {
|
||||
this.composeType = 'post'
|
||||
}
|
||||
this.filters = window.App.util.filters;
|
||||
},
|
||||
|
||||
|
|
@ -860,6 +931,7 @@ export default {
|
|||
this.pageTitle = 'New Text Post';
|
||||
this.page = 'addText';
|
||||
this.textMode = true;
|
||||
this.mode = 'text';
|
||||
},
|
||||
|
||||
mediaWatcher() {
|
||||
|
|
@ -910,7 +982,14 @@ export default {
|
|||
self.media.push(e.data);
|
||||
self.uploading = false;
|
||||
setTimeout(function() {
|
||||
self.page = 2;
|
||||
// if(type === 'video/mp4') {
|
||||
// self.pageTitle = 'Edit Video Details';
|
||||
// self.mode = 'video';
|
||||
// self.page = 'video-2';
|
||||
// } else {
|
||||
// self.page = 2;
|
||||
// }
|
||||
self.page = 3;
|
||||
}, 300);
|
||||
}).catch(function(e) {
|
||||
switch(e.response.status) {
|
||||
|
|
@ -1001,7 +1080,8 @@ export default {
|
|||
place: this.place,
|
||||
tagged: this.taggedUsernames,
|
||||
optimize_media: this.optimizeMedia,
|
||||
license: this.availableLicenses[this.licenseIndex].id
|
||||
license: this.availableLicenses[this.licenseIndex].id,
|
||||
video: this.video
|
||||
};
|
||||
axios.post('/api/compose/v0/publish', data)
|
||||
.then(res => {
|
||||
|
|
@ -1068,13 +1148,14 @@ export default {
|
|||
},
|
||||
|
||||
closeModal() {
|
||||
this.composeType = '';
|
||||
$('#composeModal').modal('hide');
|
||||
},
|
||||
|
||||
goBack() {
|
||||
this.pageTitle = '';
|
||||
|
||||
switch(this.mode) {
|
||||
case 'photo':
|
||||
switch(this.page) {
|
||||
case 'addText':
|
||||
this.page = 1;
|
||||
|
|
@ -1097,12 +1178,69 @@ export default {
|
|||
this.page = 3;
|
||||
break;
|
||||
|
||||
case 'video-2':
|
||||
this.page = 1;
|
||||
break;
|
||||
|
||||
default:
|
||||
this.namedPages.indexOf(this.page) != -1 ?
|
||||
this.page = (this.textMode ? 'addText' : 3) :
|
||||
(this.textMode ? 'addText' : this.page--);
|
||||
this.page = 3 : this.page--;
|
||||
break;
|
||||
}
|
||||
break;
|
||||
|
||||
case 'video':
|
||||
switch(this.page) {
|
||||
case 'licensePicker':
|
||||
this.page = 'video-2';
|
||||
break;
|
||||
|
||||
case 'video-2':
|
||||
this.page = 'video-2';
|
||||
break;
|
||||
|
||||
default:
|
||||
this.page = 'video-2';
|
||||
break;
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
switch(this.page) {
|
||||
case 'addText':
|
||||
this.page = 1;
|
||||
break;
|
||||
|
||||
case 'textOptions':
|
||||
this.page = 'addText';
|
||||
break;
|
||||
|
||||
case 'cropPhoto':
|
||||
case 'editMedia':
|
||||
this.page = 2;
|
||||
break;
|
||||
|
||||
case 'tagPeopleHelp':
|
||||
this.showTagCard();
|
||||
break;
|
||||
|
||||
case 'licensePicker':
|
||||
this.page = 3;
|
||||
break;
|
||||
|
||||
case 'video-2':
|
||||
this.page = 1;
|
||||
break;
|
||||
|
||||
default:
|
||||
this.namedPages.indexOf(this.page) != -1 ?
|
||||
this.page = (this.mode == 'text' ? 'addText' : 3) :
|
||||
(this.mode == 'text' ? 'addText' : this.page--);
|
||||
break;
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
nextPage() {
|
||||
|
|
@ -1199,8 +1337,22 @@ export default {
|
|||
|
||||
onSubmitLocation(result) {
|
||||
this.place = result;
|
||||
this.pageTitle = this.textMode ? 'New Text Post' : '';
|
||||
this.page = (this.textMode ? 'addText' : 3);
|
||||
switch(this.mode) {
|
||||
case 'photo':
|
||||
this.pageTitle = '';
|
||||
this.page = 3;
|
||||
break;
|
||||
|
||||
case 'video':
|
||||
this.pageTitle = 'Edit Video Details';
|
||||
this.page = 'video-2';
|
||||
break;
|
||||
|
||||
case 'text':
|
||||
this.pageTitle = 'New Text Post';
|
||||
this.page = 'addText';
|
||||
break;
|
||||
}
|
||||
return;
|
||||
},
|
||||
|
||||
|
|
@ -1227,8 +1379,23 @@ export default {
|
|||
}
|
||||
this.visibility = state;
|
||||
this.visibilityTag = tags[state];
|
||||
|
||||
switch(this.mode) {
|
||||
case 'photo':
|
||||
this.pageTitle = '';
|
||||
this.page = this.textMode ? 'addText' : 3;
|
||||
this.page = 3;
|
||||
break;
|
||||
|
||||
case 'video':
|
||||
this.pageTitle = 'Edit Video Details';
|
||||
this.page = 'video-2';
|
||||
break;
|
||||
|
||||
case 'text':
|
||||
this.pageTitle = 'New Text Post';
|
||||
this.page = 'addText';
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
showMediaDescriptionsCard() {
|
||||
|
|
@ -1350,8 +1517,23 @@ export default {
|
|||
|
||||
toggleLicense(index) {
|
||||
this.licenseIndex = index;
|
||||
|
||||
switch(this.mode) {
|
||||
case 'photo':
|
||||
this.pageTitle = '';
|
||||
this.page = 3;
|
||||
break;
|
||||
|
||||
case 'video':
|
||||
this.pageTitle = 'Edit Video Details';
|
||||
this.page = 'video-2';
|
||||
break;
|
||||
|
||||
case 'text':
|
||||
this.pageTitle = 'New Text Post';
|
||||
this.page = 'addText';
|
||||
break;
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue