mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-12-24 16:53:17 +00:00
Update ComposeModal.vue, fix redirect after posting. Fixes #3254
This commit is contained in:
Daniel Supernault
parent
6f2c717e27
commit
5db64e94a3
1 changed files with 174 additions and 56 deletions
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<input type="file" id="pf-dz" name="media" class="w-100 h-100 d-none file-input" v-bind:accept="config.uploader.media_types">
|
||||
<div class="compose-modal-component">
|
||||
<input type="file" id="pf-dz" name="media" class="w-100 h-100 d-none file-input" multiple="" v-bind:accept="config.uploader.media_types">
|
||||
<canvas class="d-none" id="pr_canvas"></canvas>
|
||||
<img class="d-none" id="pr_img">
|
||||
<div class="timeline">
|
||||
|
|
@ -446,9 +446,20 @@
|
|||
<div class="border-bottom">
|
||||
<p class="px-4 mb-0 py-2 cursor-pointer" @click="showTagCard()">Tag people</p>
|
||||
</div>
|
||||
<div class="border-bottom">
|
||||
<p class="px-4 mb-0 py-2 cursor-pointer" @click="showCollectionCard()">
|
||||
<span>Add to Collection <span class="ml-2 badge badge-primary">NEW</span></span>
|
||||
<span class="float-right">
|
||||
<span v-if="collectionsSelected.length" href="#" class="btn btn-outline-secondary btn-sm small mr-3 mt-n1 disabled" style="font-size:10px;padding:3px 5px;text-transform: uppercase" disabled>
|
||||
{{collectionsSelected.length}}
|
||||
</span>
|
||||
<span class="text-decoration-none"><i class="fas fa-chevron-right fa-lg text-lighter"></i></span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="border-bottom">
|
||||
<p class="px-4 mb-0 py-2 cursor-pointer" @click="showLicenseCard()">
|
||||
<span>Add license <span class="ml-2 badge badge-primary">NEW</span></span>
|
||||
<span>Add license</span>
|
||||
<span class="float-right">
|
||||
<a v-if="licenseTitle" href="#" @click.prevent="showLicenseCard()" class="btn btn-outline-secondary btn-sm small mr-3 mt-n1 disabled" style="font-size:10px;padding:3px;text-transform: uppercase" disabled>{{licenseTitle}}</a>
|
||||
<a href="#" @click.prevent="showLicenseCard()" class="text-decoration-none"><i class="fas fa-chevron-right fa-lg text-lighter"></i></a>
|
||||
|
|
@ -660,19 +671,30 @@
|
|||
</div>
|
||||
|
||||
<div v-if="page == 'addToCollection'" class="w-100 h-100 p-3">
|
||||
<div class="list-group mb-3">
|
||||
<div class="list-group-item cursor-pointer compose-action border" @click="goBack()">
|
||||
<div v-if="collectionsLoaded && collections.length" class="list-group mb-3 collections-list-group">
|
||||
<div
|
||||
v-for="(collection, index) in collections"
|
||||
class="list-group-item cursor-pointer compose-action border"
|
||||
:class="{ active: collectionsSelected.includes(index) }"
|
||||
@click="toggleCollectionItem(index)">
|
||||
<div class="media">
|
||||
<img src="" class="mr-3" alt="" width="50px" height="50px">
|
||||
<img :src="collection.thumb" class="mr-3" alt="" width="50px" height="50px">
|
||||
<div class="media-body">
|
||||
<h5 class="mt-0">collection title</h5>
|
||||
<p class="mb-0 text-muted small">3 Photos - Created 2h ago</p>
|
||||
<h5 class="mt-0">{{ collection.title }}</h5>
|
||||
<p class="mb-0 text-muted small">{{ collection.post_count }} Posts - Created {{ timeAgo(collection.published_at) }} ago</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
v-if="collectionsCanLoadMore"
|
||||
class="btn btn-light btn-block font-weight-bold mt-3"
|
||||
@click="loadMoreCollections">
|
||||
Load more
|
||||
</button>
|
||||
</div>
|
||||
<p class="d-flex justify-content-between mb-0">
|
||||
<button type="button" @click="goBack()" class="btn btn-link text-muted font-weight-bold text-decoration-none">Cancel</button>
|
||||
<button type="button" @click="clearSelectedCollections()" class="btn btn-link text-muted font-weight-bold text-decoration-none">Clear</button>
|
||||
<button type="button" @click="goBack()" class="btn btn-primary font-weight-bold">Save</button>
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -812,47 +834,6 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<style type="text/css" scoped>
|
||||
.media-drawer-filters {
|
||||
overflow-x: scroll;
|
||||
flex-wrap:unset;
|
||||
}
|
||||
.media-drawer-filters::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
background: transparent;
|
||||
}
|
||||
.media-drawer-filters .nav-link {
|
||||
min-width:100px;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
.media-drawer-filters .active {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
.media-drawer-filters::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.no-focus {
|
||||
border-color: none;
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
a.list-group-item {
|
||||
text-decoration: none;
|
||||
}
|
||||
a.list-group-item:hover {
|
||||
text-decoration: none;
|
||||
background-color: #f8f9fa !important;
|
||||
}
|
||||
.compose-action:hover {
|
||||
cursor: pointer;
|
||||
background-color: #f8f9fa !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
import VueCropper from 'vue-cropperjs';
|
||||
import 'cropperjs/dist/cropper.css';
|
||||
|
|
@ -1021,7 +1002,12 @@ export default {
|
|||
pollOptionModel: null,
|
||||
pollOptions: [],
|
||||
pollExpiry: 1440,
|
||||
postingPoll: false
|
||||
postingPoll: false,
|
||||
collections: [],
|
||||
collectionsSelected: [],
|
||||
collectionsLoaded: false,
|
||||
collectionsPage: 1,
|
||||
collectionsCanLoadMore: false,
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -1048,6 +1034,10 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
timeAgo(ts) {
|
||||
return App.util.format.timeAgo(ts);
|
||||
},
|
||||
|
||||
fetchProfile() {
|
||||
let tags = {
|
||||
public: 'Public',
|
||||
|
|
@ -1246,6 +1236,7 @@ export default {
|
|||
if(this.composeText == 'Add optional caption...') {
|
||||
this.composeText = '';
|
||||
}
|
||||
|
||||
let data = {
|
||||
media: this.media,
|
||||
caption: this.composeText,
|
||||
|
|
@ -1258,17 +1249,28 @@ export default {
|
|||
license: this.licenseId,
|
||||
video: this.video
|
||||
};
|
||||
|
||||
if(this.collectionsSelected.length) {
|
||||
data.collections = this.collectionsSelected
|
||||
.map(idx => {
|
||||
return this.collections[idx].id;
|
||||
});
|
||||
}
|
||||
|
||||
axios.post('/api/compose/v0/publish', data)
|
||||
.then(res => {
|
||||
let data = res.data;
|
||||
if(location.pathname === '/i/web/compose') {
|
||||
location.href = '/i/web/post/' + data.split('/').at(-1);
|
||||
if(location.pathname === '/i/web/compose' && res.data && res.data.length) {
|
||||
location.href = '/i/web/post/' + res.data.split('/').slice(-1)[0];
|
||||
} else {
|
||||
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');
|
||||
if(err.response) {
|
||||
let msg = err.response.data.message ? err.response.data.message : 'An unexpected error occured.'
|
||||
swal('Oops, something went wrong!', msg, 'error');
|
||||
} else {
|
||||
swal('Oops, something went wrong!', err.message, 'error');
|
||||
}
|
||||
});
|
||||
return;
|
||||
break;
|
||||
|
|
@ -1774,7 +1776,123 @@ export default {
|
|||
|
||||
filesize(val) {
|
||||
return filesize(val * 1024, {round: 0});
|
||||
},
|
||||
|
||||
showCollectionCard() {
|
||||
this.pageTitle = 'Add to Collection(s)';
|
||||
this.page = 'addToCollection';
|
||||
|
||||
if(!this.collectionsLoaded) {
|
||||
this.fetchCollections();
|
||||
}
|
||||
},
|
||||
|
||||
fetchCollections() {
|
||||
axios.get(`/api/local/profile/collections/${this.profile.id}`)
|
||||
.then(res => {
|
||||
this.collections = res.data;
|
||||
this.collectionsLoaded = true;
|
||||
this.collectionsCanLoadMore = res.data.length == 9;
|
||||
this.collectionsPage++;
|
||||
});
|
||||
},
|
||||
|
||||
toggleCollectionItem(index) {
|
||||
if(!this.collectionsSelected.includes(index)) {
|
||||
if(this.collectionsSelected.length == 7) {
|
||||
swal('Oops!', 'You can only share to 5 collections.', 'info');
|
||||
return;
|
||||
}
|
||||
this.collectionsSelected.push(index);
|
||||
} else {
|
||||
this.collectionsSelected = this.collectionsSelected.filter(c => c != index);
|
||||
}
|
||||
},
|
||||
|
||||
clearSelectedCollections() {
|
||||
this.collectionsSelected = [];
|
||||
this.pageTitle = 'Compose';
|
||||
this.page = 3;
|
||||
},
|
||||
|
||||
loadMoreCollections() {
|
||||
this.collectionsCanLoadMore = false;
|
||||
|
||||
axios.get(`/api/local/profile/collections/${this.profile.id}`, {
|
||||
params: {
|
||||
page: this.collectionsPage
|
||||
}
|
||||
})
|
||||
.then(res => {
|
||||
let ids = this.collections.map(c => c.id);
|
||||
let data = res.data.filter(res => {
|
||||
return !ids.includes(res.id);
|
||||
});
|
||||
|
||||
if(!data || !data.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.collections.push(...data);
|
||||
this.collectionsPage++;
|
||||
this.collectionsCanLoadMore = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.compose-modal-component {
|
||||
.media-drawer-filters {
|
||||
overflow-x: scroll;
|
||||
flex-wrap:unset;
|
||||
}
|
||||
.media-drawer-filters::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
background: transparent;
|
||||
}
|
||||
.media-drawer-filters .nav-link {
|
||||
min-width:100px;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
.media-drawer-filters .active {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
.media-drawer-filters::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.no-focus {
|
||||
border-color: none;
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
a.list-group-item {
|
||||
text-decoration: none;
|
||||
}
|
||||
a.list-group-item:hover {
|
||||
text-decoration: none;
|
||||
background-color: #f8f9fa !important;
|
||||
}
|
||||
.compose-action:hover {
|
||||
cursor: pointer;
|
||||
background-color: #f8f9fa !important;
|
||||
}
|
||||
.collections-list-group {
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
|
||||
.list-group-item {
|
||||
&.active {
|
||||
color: #212529;
|
||||
border-color: #60a5fa !important;
|
||||
background-color: #dbeafe !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue