mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-25 15:55:22 +00:00
Update ComposeModal, use new routes
This commit is contained in:
Daniel Supernault
parent
a0a15730db
commit
caafef580c
1 changed files with 153 additions and 15 deletions
|
|
@ -86,10 +86,46 @@
|
|||
<span v-else>
|
||||
<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>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-0 border-top">
|
||||
<div v-if="page == 'textOptions'" class="w-100 h-100" style="min-height: 280px;">
|
||||
test
|
||||
</div>
|
||||
<div v-if="page == 'addText'" class="w-100 h-100" style="min-height: 280px;">
|
||||
<div class="mt-2">
|
||||
<div class="media px-3">
|
||||
<div class="media-body">
|
||||
<div class="form-group">
|
||||
<label class="font-weight-bold text-muted small d-none">Body</label>
|
||||
<textarea class="form-control border-0 rounded-0 no-focus" rows="7" placeholder="What's happening?" style="font-size:18px;resize:none" v-model="composeText" v-on:keyup="composeTextLength = composeText.length"></textarea>
|
||||
<div class="border-bottom"></div>
|
||||
<p class="help-text small text-right text-muted mb-0 font-weight-bold">{{composeTextLength}}/{{config.uploader.max_caption_length}}</p>
|
||||
<p class="mb-0 mt-2">
|
||||
<a class="btn btn-primary rounded-pill mr-2" href="#" style="height: 37px;" @click.prevent="showTextOptions()">
|
||||
<i class="fas fa-palette px-3 text-white"></i>
|
||||
</a>
|
||||
<!-- <a class="btn btn-outline-lighter rounded-pill ml-3" href="#" @click.prevent="showLocationCard()">
|
||||
<i class="fas fa-map-marker-alt px-3"></i>
|
||||
</a>
|
||||
<a class="btn btn-outline-lighter rounded-pill mx-3" href="#" @click.prevent="showTagCard()">
|
||||
<i class="fas fa-user-plus px-3"></i>
|
||||
</a> -->
|
||||
<a class="btn rounded-pill mx-3 d-inline-flex align-items-center" href="#" :class="[nsfw ? 'btn-danger' : 'btn-outline-lighter']" style="height: 37px;" @click.prevent="nsfw = !nsfw" title="Mark as sensitive/not safe for work">
|
||||
<i class="far fa-flag px-3"></i> <span class="text-muted small font-weight-bold"></span>
|
||||
</a>
|
||||
<a class="btn btn-outline-lighter rounded-pill d-inline-flex align-items-center" href="#" style="height: 37px;" @click.prevent="showVisibilityCard()">
|
||||
<i class="fas fa-eye mr-2"></i> <span class="text-muted small font-weight-bold">{{visibilityTag}}</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="page == 1" class="w-100 h-100 d-flex justify-content-center align-items-center" style="min-height: 400px;">
|
||||
<div class="text-center">
|
||||
<div v-if="media.length == 0" class="card mx-md-5 my-md-3 shadow-none border compose-action text-decoration-none text-dark">
|
||||
|
|
@ -107,6 +143,26 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="config.ab.top == true && media.length == 0" class="card mx-md-5 my-md-3 shadow-none border compose-action text-decoration-none text-dark">
|
||||
<div @click.prevent="addText" class="card-body">
|
||||
<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">
|
||||
<i class="far fa-edit text-primary fa-lg"></i>
|
||||
</div>
|
||||
<div class="media-body text-left">
|
||||
<p class="mb-0">
|
||||
<span class="h5 mt-0 font-weight-bold text-primary">New Text Post</span>
|
||||
<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>
|
||||
</sup>
|
||||
</p>
|
||||
<p class="mb-0 text-muted">Share a text only post</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a v-if="config.features.stories == true" class="card mx-md-5 my-md-3 shadow-none border compose-action text-decoration-none text-dark" href="/i/stories/new">
|
||||
<div class="card-body">
|
||||
<div class="media">
|
||||
|
|
@ -349,6 +405,19 @@
|
|||
|
||||
<div v-if="page == 'advancedSettings'" class="w-100 h-100">
|
||||
<div class="list-group list-group-flush">
|
||||
<!-- <div class="d-none list-group-item d-flex justify-content-between">
|
||||
<div>
|
||||
<div class="text-dark ">Optimize Media</div>
|
||||
<p v-if="mediaCropped" class="text-muted small mb-0">Media was cropped or filtered, it must be optimized.</p>
|
||||
<p v-else class="text-muted small mb-0">Compress media for smaller file size.</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="custom-control custom-switch" style="z-index: 9999;">
|
||||
<input type="checkbox" class="custom-control-input" id="asoptimizemedia" v-model="optimizeMedia" :disabled="mediaCropped">
|
||||
<label class="custom-control-label" for="asoptimizemedia"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="list-group-item d-flex justify-content-between">
|
||||
<div>
|
||||
<div class="text-dark ">Turn off commenting</div>
|
||||
|
|
@ -591,6 +660,8 @@ export default {
|
|||
nsfw: false,
|
||||
place: false,
|
||||
commentsDisabled: false,
|
||||
optimizeMedia: true,
|
||||
mediaCropped: false,
|
||||
pageTitle: '',
|
||||
|
||||
cropper: {
|
||||
|
|
@ -613,11 +684,13 @@ export default {
|
|||
'addToStory',
|
||||
'editMedia',
|
||||
'cameraRoll',
|
||||
'tagPeopleHelp'
|
||||
'tagPeopleHelp',
|
||||
'textOptions'
|
||||
],
|
||||
cameraRollMedia: [],
|
||||
taggedUsernames: [],
|
||||
taggedPeopleSearch: null
|
||||
taggedPeopleSearch: null,
|
||||
textMode: false
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -664,6 +737,12 @@ export default {
|
|||
el.removeAttr('disabled');
|
||||
},
|
||||
|
||||
addText(event) {
|
||||
this.pageTitle = 'New Text Post';
|
||||
this.page = 'addText';
|
||||
this.textMode = true;
|
||||
},
|
||||
|
||||
mediaWatcher() {
|
||||
let self = this;
|
||||
$(document).on('change', '#pf-dz', function(e) {
|
||||
|
|
@ -705,7 +784,7 @@ export default {
|
|||
}
|
||||
};
|
||||
|
||||
axios.post('/api/pixelfed/v1/media', form, xhrConfig)
|
||||
axios.post('/api/compose/v0/media/upload', form, xhrConfig)
|
||||
.then(function(e) {
|
||||
self.uploadProgress = 100;
|
||||
self.ids.push(e.data.id);
|
||||
|
|
@ -747,7 +826,7 @@ export default {
|
|||
}
|
||||
let id = this.media[this.carouselCursor].id;
|
||||
|
||||
axios.delete('/api/pixelfed/v1/media', {
|
||||
axios.delete('/api/compose/v0/media/delete', {
|
||||
params: {
|
||||
id: id
|
||||
}
|
||||
|
|
@ -794,9 +873,51 @@ export default {
|
|||
cw: this.nsfw,
|
||||
comments_disabled: this.commentsDisabled,
|
||||
place: this.place,
|
||||
tagged: this.taggedUsernames
|
||||
tagged: this.taggedUsernames,
|
||||
optimize_media: this.optimizeMedia
|
||||
};
|
||||
axios.post('/api/local/status/compose', data)
|
||||
axios.post('/api/compose/v0/publish', data)
|
||||
.then(res => {
|
||||
let data = res.data;
|
||||
window.location.href = data;
|
||||
}).catch(err => {
|
||||
let msg = err.response.data.message ? err.response.data.message : 'An unexpected error occured.'
|
||||
swal('Oops, something went wrong!', msg, 'error');
|
||||
});
|
||||
return;
|
||||
break;
|
||||
|
||||
case 'delete' :
|
||||
this.ids = [];
|
||||
this.media = [];
|
||||
this.carouselCursor = 0;
|
||||
this.composeText = '';
|
||||
this.composeTextLength = 0;
|
||||
$('#composeModal').modal('hide');
|
||||
return;
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
composeTextPost() {
|
||||
let state = this.composeState;
|
||||
|
||||
if(this.composeText.length > this.config.uploader.max_caption_length) {
|
||||
swal('Error', 'Caption is too long', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
switch(state) {
|
||||
case 'publish' :
|
||||
let data = {
|
||||
caption: this.composeText,
|
||||
visibility: this.visibility,
|
||||
cw: this.nsfw,
|
||||
comments_disabled: this.commentsDisabled,
|
||||
place: this.place,
|
||||
tagged: this.taggedUsernames,
|
||||
};
|
||||
axios.post('/api/compose/v0/publish/text', data)
|
||||
.then(res => {
|
||||
let data = res.data;
|
||||
window.location.href = data;
|
||||
|
|
@ -828,6 +949,14 @@ export default {
|
|||
this.pageTitle = '';
|
||||
|
||||
switch(this.page) {
|
||||
case 'addText':
|
||||
this.page = 1;
|
||||
break;
|
||||
|
||||
case 'textOptions':
|
||||
this.page = 'addText';
|
||||
break;
|
||||
|
||||
case 'cropPhoto':
|
||||
case 'editMedia':
|
||||
this.page = 2;
|
||||
|
|
@ -838,7 +967,9 @@ export default {
|
|||
break;
|
||||
|
||||
default:
|
||||
this.namedPages.indexOf(this.page) != -1 ? this.page = 3 : this.page--;
|
||||
this.namedPages.indexOf(this.page) != -1 ?
|
||||
this.page = (this.textMode ? 'addText' : 3) :
|
||||
(this.textMode ? 'addText' : this.page--);
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
|
@ -860,10 +991,11 @@ export default {
|
|||
imageSmoothingEnabled: false,
|
||||
imageSmoothingQuality: 'high',
|
||||
}).toBlob(function(blob) {
|
||||
self.mediaCropped = true;
|
||||
let data = new FormData();
|
||||
data.append('file', blob);
|
||||
let url = '/api/local/compose/media/update/' + self.ids[self.carouselCursor];
|
||||
|
||||
data.append('id', self.ids[self.carouselCursor]);
|
||||
let url = '/api/compose/v0/media/update';
|
||||
axios.post(url, data).then(res => {
|
||||
self.media[self.carouselCursor].url = res.data.url;
|
||||
self.pageLoading = false;
|
||||
|
|
@ -921,7 +1053,7 @@ export default {
|
|||
locationSearch(input) {
|
||||
if (input.length < 1) { return []; };
|
||||
let results = [];
|
||||
return axios.get('/api/local/compose/location/search', {
|
||||
return axios.get('/api/compose/v0/search/location', {
|
||||
params: {
|
||||
q: input
|
||||
}
|
||||
|
|
@ -936,8 +1068,8 @@ export default {
|
|||
|
||||
onSubmitLocation(result) {
|
||||
this.place = result;
|
||||
this.pageTitle = '';
|
||||
this.page = 3;
|
||||
this.pageTitle = this.textMode ? 'New Text Post' : '';
|
||||
this.page = (this.textMode ? 'addText' : 3);
|
||||
return;
|
||||
},
|
||||
|
||||
|
|
@ -965,7 +1097,7 @@ export default {
|
|||
this.visibility = state;
|
||||
this.visibilityTag = tags[state];
|
||||
this.pageTitle = '';
|
||||
this.page = 3;
|
||||
this.page = this.textMode ? 'addText' : 3;
|
||||
},
|
||||
|
||||
showMediaDescriptionsCard() {
|
||||
|
|
@ -1024,7 +1156,8 @@ export default {
|
|||
canvas.toBlob(function(blob) {
|
||||
data = new FormData();
|
||||
data.append('file', blob);
|
||||
axios.post('/api/local/compose/media/update/'+media.id, data).then(res => {
|
||||
data.append('id', media.id);
|
||||
axios.post('/api/compose/v0/media/update', data).then(res => {
|
||||
}).catch(err => {
|
||||
});
|
||||
});
|
||||
|
|
@ -1039,7 +1172,7 @@ export default {
|
|||
if (input.length < 1) { return []; };
|
||||
let self = this;
|
||||
let results = [];
|
||||
return axios.get('/api/local/compose/tag/search', {
|
||||
return axios.get('/api/compose/v0/search/tag', {
|
||||
params: {
|
||||
q: input
|
||||
}
|
||||
|
|
@ -1070,6 +1203,11 @@ export default {
|
|||
|
||||
untagUsername(index) {
|
||||
this.taggedUsernames.splice(index, 1);
|
||||
},
|
||||
|
||||
showTextOptions() {
|
||||
this.page = 'textOptions';
|
||||
this.pageTitle = 'Text Post Options';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue