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

Browse source
This commit is contained in:
Daniel Supernault 2021-04-29 23:27:25 -06:00
parent 668e936eb5
commit 2119965659
No known key found for this signature in database
GPG key ID: 0DEF1C662C9033F7
1 changed files with 244 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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 > 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 == 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 == '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> </span>
</div> </div>
</div> </div>
@ -97,18 +98,20 @@
<div class="list-group list-group-flush"> <div class="list-group list-group-flush">
<div <div
v-for="(item, index) in availableLicenses" v-for="(item, index) in availableLicenses"
class="list-group-item cursor-pointer" class="list-group-item cursor-pointer"
:class="{ :class="{
'text-primary': licenseIndex === index, 'text-primary': licenseIndex === index,
'font-weight-bold': licenseIndex === index 'font-weight-bold': licenseIndex === index
}" }"
@click="toggleLicense(index)"> @click="toggleLicense(index)">
{{item.name}} {{item.name}}
</div> </div>
</div> </div>
</div> </div>
<div v-if="page == 'textOptions'" class="w-100 h-100" style="min-height: 280px;"> <div v-if="page == 'textOptions'" class="w-100 h-100" style="min-height: 280px;">
</div> </div>
<div v-if="page == 'addText'" class="w-100 h-100" style="min-height: 280px;"> <div v-if="page == 'addText'" class="w-100 h-100" style="min-height: 280px;">
<div class="mt-2"> <div class="mt-2">
<div class="media px-3"> <div class="media px-3">
@ -148,10 +151,10 @@
<div class="media"> <div class="media">
<div class="mr-3 align-items-center justify-content-center" style="display:inline-flex;width:40px;height:40px;border-radius: 100%;background-color: #008DF5"> <div class="mr-3 align-items-center justify-content-center" style="display:inline-flex;width:40px;height:40px;border-radius: 100%;background-color: #008DF5">
<i class="fas fa-bolt text-white fa-lg"></i> <i class="fas fa-bolt text-white fa-lg"></i>
</div> </div>
<div class="media-body text-left"> <div class="media-body text-left">
<p class="mb-0"> <p class="mb-0">
<span class="h5 mt-0 font-weight-bold text-primary">New Post</span> <span class="h5 mt-0 font-weight-bold text-primary">New Post</span>
</p> </p>
<p class="mb-0 text-muted">Share up to {{config.uploader.album_limit}} photos or videos</p> <p class="mb-0 text-muted">Share up to {{config.uploader.album_limit}} photos or videos</p>
</div> </div>
@ -164,7 +167,7 @@
<div class="media"> <div class="media">
<div class="mr-3 align-items-center justify-content-center" style="display:inline-flex;width:40px;height:40px;border-radius: 100%;border: 2px solid #008DF5"> <div class="mr-3 align-items-center justify-content-center" style="display:inline-flex;width:40px;height:40px;border-radius: 100%;border: 2px solid #008DF5">
<i class="far fa-edit text-primary fa-lg"></i> <i class="far fa-edit text-primary fa-lg"></i>
</div> </div>
<div class="media-body text-left"> <div class="media-body text-left">
<p class="mb-0"> <p class="mb-0">
<span class="h5 mt-0 font-weight-bold text-primary">New Text Post</span> <span class="h5 mt-0 font-weight-bold text-primary">New Text Post</span>
@ -183,10 +186,10 @@
<div class="media"> <div class="media">
<div class="mr-3 align-items-center justify-content-center" style="display:inline-flex;width:40px;height:40px;border-radius: 100%;border: 2px solid #008DF5"> <div class="mr-3 align-items-center justify-content-center" style="display:inline-flex;width:40px;height:40px;border-radius: 100%;border: 2px solid #008DF5">
<i class="fas fa-history text-primary fa-lg"></i> <i class="fas fa-history text-primary fa-lg"></i>
</div> </div>
<div class="media-body text-left"> <div class="media-body text-left">
<p class="mb-0"> <p class="mb-0">
<span class="h5 mt-0 font-weight-bold text-primary">New Story</span> <span class="h5 mt-0 font-weight-bold text-primary">New Story</span>
<sup class="float-right mt-2"> <sup class="float-right mt-2">
<span class="btn btn-outline-lighter p-1 btn-sm font-weight-bold py-0" style="font-size:10px;line-height: 0.6">BETA</span> <span class="btn btn-outline-lighter p-1 btn-sm font-weight-bold py-0" style="font-size:10px;line-height: 0.6">BETA</span>
</sup> </sup>
@ -202,10 +205,10 @@
<div class="media"> <div class="media">
<div class="mr-3 align-items-center justify-content-center" style="display:inline-flex;width:40px;height:40px;border-radius: 100%;border: 2px solid #008DF5"> <div class="mr-3 align-items-center justify-content-center" style="display:inline-flex;width:40px;height:40px;border-radius: 100%;border: 2px solid #008DF5">
<i class="fas fa-images text-primary fa-lg"></i> <i class="fas fa-images text-primary fa-lg"></i>
</div> </div>
<div class="media-body text-left"> <div class="media-body text-left">
<p class="mb-0"> <p class="mb-0">
<span class="h5 mt-0 font-weight-bold text-primary">New Collection</span> <span class="h5 mt-0 font-weight-bold text-primary">New Collection</span>
<sup class="float-right mt-2"> <sup class="float-right mt-2">
<span class="btn btn-outline-lighter p-1 btn-sm font-weight-bold py-0" style="font-size:10px;line-height: 0.6">BETA</span> <span class="btn btn-outline-lighter p-1 btn-sm font-weight-bold py-0" style="font-size:10px;line-height: 0.6">BETA</span>
</sup> </sup>
@ -216,7 +219,7 @@
</div> </div>
</a> </a>
<p class="py-3"> <p class="py-3">
<a class="font-weight-bold" href="/site/help">Help</a> <a class="font-weight-bold" href="/site/help">Help</a>
</p> </p>
@ -268,7 +271,7 @@
<div class="nav-link" style="display:block;width:300px;height:300px;" @click="carouselCursor = i"> <div class="nav-link" style="display:block;width:300px;height:300px;" @click="carouselCursor = i">
<!-- <img :class="'d-block img-fluid w-100 ' + [m.filter_class?m.filter_class:'']" :src="m.url" :alt="m.description" :title="m.description"> --> <!-- <img :class="'d-block img-fluid w-100 ' + [m.filter_class?m.filter_class:'']" :src="m.url" :alt="m.description" :title="m.description"> -->
<span :class="[m.filter_class?m.filter_class:'']"> <span :class="[m.filter_class?m.filter_class:'']">
<span :class="'rounded border ' + [i == carouselCursor ? ' border-primary shadow':'']" :style="'display:block;padding:5px;width:100%;height:100%;background-image: url(' + m.url + ');background-size:cover;border-width:3px !important;'"></span> <span :class="'rounded border ' + [i == carouselCursor ? ' border-primary shadow':'']" :style="'display:block;padding:5px;width:100%;height:100%;background-image: url(' + m.url + ');background-size:cover;border-width:3px !important;'"></span>
</span> </span>
</div> </div>
@ -372,7 +375,7 @@
</div> </div>
<div v-if="page == 'tagPeople'" class="w-100 h-100 p-3"> <div v-if="page == 'tagPeople'" class="w-100 h-100 p-3">
<autocomplete <autocomplete
v-show="taggedUsernames.length < 10" v-show="taggedUsernames.length < 10"
:search="tagSearch" :search="tagSearch"
placeholder="@pixelfed" placeholder="@pixelfed"
@ -413,7 +416,7 @@
<div v-if="page == 'addLocation'" class="w-100 h-100 p-3"> <div v-if="page == 'addLocation'" class="w-100 h-100 p-3">
<p class="mb-0">Add Location</p> <p class="mb-0">Add Location</p>
<autocomplete <autocomplete
:search="locationSearch" :search="locationSearch"
placeholder="Search locations ..." placeholder="Search locations ..."
aria-label="Search locations ..." aria-label="Search locations ..."
@ -501,21 +504,21 @@
<div class="list-group list-group-flush"> <div class="list-group list-group-flush">
<div <div
v-if="!profile.locked" v-if="!profile.locked"
class="list-group-item lead cursor-pointer" class="list-group-item lead cursor-pointer"
:class="{ 'text-primary': visibility == 'public' }" :class="{ 'text-primary': visibility == 'public' }"
@click="toggleVisibility('public')"> @click="toggleVisibility('public')">
Public Public
</div> </div>
<div <div
v-if="!profile.locked" v-if="!profile.locked"
class="list-group-item lead cursor-pointer" class="list-group-item lead cursor-pointer"
:class="{ 'text-primary': visibility == 'unlisted' }" :class="{ 'text-primary': visibility == 'unlisted' }"
@click="toggleVisibility('unlisted')"> @click="toggleVisibility('unlisted')">
Unlisted Unlisted
</div> </div>
<div <div
class="list-group-item lead cursor-pointer" class="list-group-item lead cursor-pointer"
:class="{ 'text-primary': visibility == 'private' }" :class="{ 'text-primary': visibility == 'private' }"
@click="toggleVisibility('private')"> @click="toggleVisibility('private')">
Followers Only Followers Only
</div> </div>
@ -589,7 +592,7 @@
<span>{{media[carouselCursor].license ? media[carouselCursor].license.length : 0}}/140</span> <span>{{media[carouselCursor].license ? media[carouselCursor].license.length : 0}}/140</span>
</p> --> </p> -->
<select class="form-control" v-model="licenseIndex"> <select class="form-control" v-model="licenseIndex">
<option <option
v-for="(item, index) in availableLicenses" v-for="(item, index) in availableLicenses"
:value="index" :value="index"
:selected="index === licenseIndex"> :selected="index === licenseIndex">
@ -606,6 +609,69 @@
</p> </p>
</div> </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> </div>
<!-- card-footers --> <!-- card-footers -->
@ -679,7 +745,7 @@ import VueTribute from 'vue-tribute'
export default { export default {
components: { components: {
VueCropper, VueCropper,
Autocomplete, Autocomplete,
VueTribute VueTribute
@ -700,12 +766,16 @@ export default {
carouselCursor: 0, carouselCursor: 0,
uploading: false, uploading: false,
uploadProgress: 100, uploadProgress: 100,
composeType: false, mode: 'photo',
modes: [
'photo',
'video',
'plain'
],
page: 1, page: 1,
composeState: 'publish', composeState: 'publish',
visibility: 'public', visibility: 'public',
visibilityTag: 'Public', visibilityTag: 'Public',
nsfw: false,
place: false, place: false,
commentsDisabled: false, commentsDisabled: false,
optimizeMedia: true, optimizeMedia: true,
@ -810,15 +880,16 @@ export default {
name: "Attribution-NonCommercial-NoDerivs" name: "Attribution-NonCommercial-NoDerivs"
} }
], ],
licenseIndex: 0 licenseIndex: 0,
video: {
title: '',
description: ''
}
} }
}, },
beforeMount() { beforeMount() {
this.fetchProfile(); this.fetchProfile();
if(this.config.uploader.media_types.includes('video/mp4') == false) {
this.composeType = 'post'
}
this.filters = window.App.util.filters; this.filters = window.App.util.filters;
}, },
@ -860,6 +931,7 @@ export default {
this.pageTitle = 'New Text Post'; this.pageTitle = 'New Text Post';
this.page = 'addText'; this.page = 'addText';
this.textMode = true; this.textMode = true;
this.mode = 'text';
}, },
mediaWatcher() { mediaWatcher() {
@ -910,7 +982,14 @@ export default {
self.media.push(e.data); self.media.push(e.data);
self.uploading = false; self.uploading = false;
setTimeout(function() { 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); }, 300);
}).catch(function(e) { }).catch(function(e) {
switch(e.response.status) { switch(e.response.status) {
@ -951,7 +1030,7 @@ export default {
return; return;
} }
let id = this.media[this.carouselCursor].id; let id = this.media[this.carouselCursor].id;
axios.delete('/api/compose/v0/media/delete', { axios.delete('/api/compose/v0/media/delete', {
params: { params: {
id: id id: id
@ -1001,7 +1080,8 @@ export default {
place: this.place, place: this.place,
tagged: this.taggedUsernames, tagged: this.taggedUsernames,
optimize_media: this.optimizeMedia, 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) axios.post('/api/compose/v0/publish', data)
.then(res => { .then(res => {
@ -1068,41 +1148,99 @@ export default {
}, },
closeModal() { closeModal() {
this.composeType = '';
$('#composeModal').modal('hide'); $('#composeModal').modal('hide');
}, },
goBack() { goBack() {
this.pageTitle = ''; this.pageTitle = '';
switch(this.page) { switch(this.mode) {
case 'addText': case 'photo':
this.page = 1; 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 = 3 : this.page--;
break;
}
break; break;
case 'textOptions': case 'video':
this.page = 'addText'; switch(this.page) {
break; case 'licensePicker':
this.page = 'video-2';
break;
case 'cropPhoto': case 'video-2':
case 'editMedia': this.page = 'video-2';
this.page = 2; break;
break;
case 'tagPeopleHelp': default:
this.showTagCard(); this.page = 'video-2';
break; break;
}
case 'licensePicker':
this.page = 3;
break; break;
default: default:
this.namedPages.indexOf(this.page) != -1 ? switch(this.page) {
this.page = (this.textMode ? 'addText' : 3) : case 'addText':
(this.textMode ? 'addText' : this.page--); 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; break;
} }
}, },
nextPage() { nextPage() {
@ -1115,7 +1253,7 @@ export default {
case 'cropPhoto': case 'cropPhoto':
this.pageLoading = true; this.pageLoading = true;
let self = this; let self = this;
this.$refs.cropper.getCroppedCanvas({ this.$refs.cropper.getCroppedCanvas({
maxWidth: 4096, maxWidth: 4096,
maxHeight: 4096, maxHeight: 4096,
fillColor: '#fff', fillColor: '#fff',
@ -1199,8 +1337,22 @@ export default {
onSubmitLocation(result) { onSubmitLocation(result) {
this.place = result; this.place = result;
this.pageTitle = this.textMode ? 'New Text Post' : ''; switch(this.mode) {
this.page = (this.textMode ? 'addText' : 3); 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; return;
}, },
@ -1227,8 +1379,23 @@ export default {
} }
this.visibility = state; this.visibility = state;
this.visibilityTag = tags[state]; this.visibilityTag = tags[state];
this.pageTitle = '';
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;
}
}, },
showMediaDescriptionsCard() { showMediaDescriptionsCard() {
@ -1350,9 +1517,24 @@ export default {
toggleLicense(index) { toggleLicense(index) {
this.licenseIndex = index; this.licenseIndex = index;
this.pageTitle = '';
this.page = 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;
}
}, },
} }
} }
</script> </script>