mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-22 22:41:27 +00:00
Add new Compose UI
This commit is contained in:
parent
dc69f7e0c0
commit
c37b2a1d48
14 changed files with 228 additions and 174 deletions
|
@ -1,9 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<input type="file" name="media" class="d-none file-input" multiple="">
|
<input type="file" name="media" class="d-none file-input" multiple="" v-bind:accept="config.uploader.media_types">
|
||||||
<div class="timeline">
|
<div class="timeline">
|
||||||
<div class="card status-card card-md-rounded-0">
|
<div class="card status-card card-md-rounded-0">
|
||||||
|
|
||||||
<div class="card-header d-inline-flex align-items-center bg-white">
|
<div class="card-header d-inline-flex align-items-center bg-white">
|
||||||
<img v-bind:src="profile.avatar" width="32px" height="32px" style="border-radius: 32px;" class="box-shadow">
|
<img v-bind:src="profile.avatar" width="32px" height="32px" style="border-radius: 32px;" class="box-shadow">
|
||||||
<a class="username font-weight-bold pl-2 text-dark" v-bind:href="profile.url">
|
<a class="username font-weight-bold pl-2 text-dark" v-bind:href="profile.url">
|
||||||
|
@ -15,16 +14,16 @@
|
||||||
<span class="fas fa-ellipsis-v fa-lg text-muted"></span>
|
<span class="fas fa-ellipsis-v fa-lg text-muted"></span>
|
||||||
</button>
|
</button>
|
||||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
|
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
|
||||||
<div class="dropdown-item small font-weight-bold" v-on:click="mediaDrawer = !mediaDrawer">Show Media Toolbar</div>
|
<div v-show="media.length > 0" class="dropdown-item small font-weight-bold" v-on:click="mediaDrawer = !mediaDrawer">{{mediaDrawer ? 'Hide' : 'Show'}} Media Toolbar</div>
|
||||||
|
<div class="dropdown-item small font-weight-bold" v-on:click="about">About</div>
|
||||||
<div class="dropdown-divider"></div>
|
<div class="dropdown-divider"></div>
|
||||||
|
<div class="dropdown-item small font-weight-bold" v-on:click="closeModal">Close</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</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="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>
|
<p class="text-center mb-0 font-weight-bold p-5">Click here to add photos.</p>
|
||||||
</div>
|
</div>
|
||||||
|
@ -45,21 +44,41 @@
|
||||||
</b-carousel-slide>
|
</b-carousel-slide>
|
||||||
</b-carousel>
|
</b-carousel>
|
||||||
</div>
|
</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>
|
||||||
|
<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 v-if="mediaDrawer" class="bg-lighter p-2 row">
|
<div v-if="mediaDrawer" class="bg-lighter p-2 row">
|
||||||
<div class="col-4">
|
<div class="col-12">
|
||||||
<select class="form-control form-control-sm" id="filterSelectDropdown" v-on:change="toggleFilter($event)">
|
<div class="form-group">
|
||||||
<option value="none">No filter</option>
|
<input type="text" class="form-control" v-model="media[carouselCursor].alt" placeholder="Optional image description">
|
||||||
<option v-for="(filter, index) in filters" :value="filter[1]" :selected="filter[1]==media[carouselCursor].filter_class?'selected':''">{{filter[0]}}</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-5">
|
|
||||||
<button class="btn btn-outline-primary btn-sm mr-1" v-on:click="mediaAltText()">Alt Text</button>
|
<div class="form-group">
|
||||||
<button class="btn btn-outline-primary btn-sm mr-1" v-on:click="mediaLicense()">License</button>
|
<input type="text" class="form-control" v-model="media[carouselCursor].license" placeholder="Optional media license">
|
||||||
</div>
|
</div>
|
||||||
<div class="col-3 text-right">
|
</div>
|
||||||
|
<div class="col-6 pt-2">
|
||||||
|
<!-- <button class="btn btn-outline-secondary btn-sm mr-1"><i class="fas fa-map-marker-alt"></i></button>
|
||||||
|
<button class="btn btn-outline-secondary btn-sm"><i class="fas fa-tools"></i></button> -->
|
||||||
|
</div>
|
||||||
|
<div class="col-6 text-right pt-2">
|
||||||
<button class="btn btn-outline-danger btn-sm font-weight-bold mr-1" v-on:click="deleteMedia()"><i class="fas fa-trash"></i></button>
|
<button class="btn btn-outline-danger btn-sm font-weight-bold mr-1" v-on:click="deleteMedia()"><i class="fas fa-trash"></i></button>
|
||||||
<button class="btn btn-outline-secondary btn-sm font-weight-bold" v-on:click="updateMedia()"><i class="fas fa-times"></i></button>
|
<button class="btn btn-outline-secondary btn-sm font-weight-bold" v-on:click="updateMedia()">Close</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -101,12 +120,12 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="dropdown d-inline">
|
<div class="dropdown d-inline">
|
||||||
<button class="btn btn-outline-secondary btn-sm py-0 dropdown-toggle" type="button" id="visibility" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
<button class="btn btn-outline-secondary btn-sm py-0 dropdown-toggle" type="button" id="visibility" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||||
Public
|
{{visibility[0].toUpperCase() + visibility.slice(1)}}
|
||||||
</button>
|
</button>
|
||||||
<div class="dropdown-menu" aria-labelledby="visibility" style="width: 200px;">
|
<div class="dropdown-menu" aria-labelledby="visibility" style="width: 200px;">
|
||||||
<a class="dropdown-item active" href="#" data-id="public" data-title="Public">
|
<a :class="[visibility=='public'?'dropdown-item active':'dropdown-item']" href="#" data-id="public" data-title="Public" v-on:click.prevent="visibility = 'public'">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12 col-sm-2 px-0 text-center">
|
<div class="d-none d-block-sm col-sm-2 px-0 text-center">
|
||||||
<i class="fas fa-globe"></i>
|
<i class="fas fa-globe"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-sm-10 pl-2">
|
<div class="col-12 col-sm-10 pl-2">
|
||||||
|
@ -115,9 +134,9 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a class="dropdown-item" href="#" data-id="private" data-title="Followers Only">
|
<a :class="[visibility=='private'?'dropdown-item active':'dropdown-item']" href="#" data-id="private" data-title="Followers Only" v-on:click.prevent="visibility = 'private'">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12 col-sm-2 px-0 text-center">
|
<div class="d-none d-block-sm col-sm-2 px-0 text-center">
|
||||||
<i class="fas fa-lock"></i>
|
<i class="fas fa-lock"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-sm-10 pl-2">
|
<div class="col-12 col-sm-10 pl-2">
|
||||||
|
@ -126,8 +145,18 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
<a :class="[visibility=='private'?'dropdown-item active':'dropdown-item']" href="#" data-id="private" data-title="Followers Only" v-on:click.prevent="visibility = 'unlisted'">
|
||||||
<a class="dropdown-item" href="#" data-id="circle" data-title="Circle">
|
<div class="row">
|
||||||
|
<div class="d-none d-block-sm col-sm-2 px-0 text-center">
|
||||||
|
<i class="fas fa-lock"></i>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-sm-10 pl-2">
|
||||||
|
<p class="font-weight-bold mb-0">Unlisted</p>
|
||||||
|
<p class="small mb-0">Not listed on public timelines</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<!-- <a class="dropdown-item" href="#" data-id="circle" data-title="Circle">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12 col-sm-2 px-0 text-center">
|
<div class="col-12 col-sm-2 px-0 text-center">
|
||||||
<i class="far fa-circle"></i>
|
<i class="far fa-circle"></i>
|
||||||
|
@ -148,7 +177,7 @@
|
||||||
<p class="small mb-0">Recipients only</p>
|
<p class="small mb-0">Recipients only</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -163,10 +192,10 @@
|
||||||
</button>
|
</button>
|
||||||
<div class="dropdown-menu dropdown-menu-right">
|
<div class="dropdown-menu dropdown-menu-right">
|
||||||
<a :class="[composeState == 'publish' ?'dropdown-item font-weight-bold active':'dropdown-item font-weight-bold ']" href="#" v-on:click.prevent="composeState = 'publish'">Publish now</a>
|
<a :class="[composeState == 'publish' ?'dropdown-item font-weight-bold active':'dropdown-item font-weight-bold ']" href="#" v-on:click.prevent="composeState = 'publish'">Publish now</a>
|
||||||
<a :class="[composeState == 'draft' ?'dropdown-item font-weight-bold active':'dropdown-item font-weight-bold ']" href="#" v-on:click.prevent="composeState = 'draft'">Save as draft</a>
|
<!-- <a :class="[composeState == 'draft' ?'dropdown-item font-weight-bold active':'dropdown-item font-weight-bold ']" href="#" v-on:click.prevent="composeState = 'draft'">Save as draft</a>
|
||||||
<a :class="[composeState == 'schedule' ?'dropdown-item font-weight-bold active':'dropdown-item font-weight-bold ']" href="#" v-on:click.prevent="composeState = 'schedule'">Schedule for later</a>
|
<a :class="[composeState == 'schedule' ?'dropdown-item font-weight-bold active':'dropdown-item font-weight-bold ']" href="#" v-on:click.prevent="composeState = 'schedule'">Schedule for later</a>
|
||||||
<div class="dropdown-divider"></div>
|
<div class="dropdown-divider"></div>
|
||||||
<a :class="[composeState == 'delete' ?'dropdown-item font-weight-bold active':'dropdown-item font-weight-bold ']" href="#" v-on:click.prevent="composeState = 'delete'">Delete</a>
|
<a :class="[composeState == 'delete' ?'dropdown-item font-weight-bold active':'dropdown-item font-weight-bold ']" href="#" v-on:click.prevent="composeState = 'delete'">Delete</a> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -179,7 +208,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style type="text/css" scoped>
|
<style type="text/css" scoped>
|
||||||
.glass {
|
.glass {
|
||||||
-webkit-filter: blur(2px);
|
-webkit-filter: blur(2px);
|
||||||
-moz-filter: blur(2px);
|
-moz-filter: blur(2px);
|
||||||
-o-filter: blur(2px);
|
-o-filter: blur(2px);
|
||||||
|
@ -187,51 +216,49 @@
|
||||||
filter: blur(2px);
|
filter: blur(2px);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
.media-drawer-filters {
|
||||||
|
overflow-x: scroll;
|
||||||
|
flex-wrap:unset;
|
||||||
|
}
|
||||||
|
.media-drawer-filters .nav-link {
|
||||||
|
min-width:100px;
|
||||||
|
padding-top: 1rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.media-drawer-filters .active {
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.media-drawer-filters::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
profile: {},
|
config: {
|
||||||
create: {
|
uploader: {
|
||||||
hasGeneratedSelect: false,
|
media_types: '',
|
||||||
selectedFilter: false,
|
}
|
||||||
currentFilterName: false,
|
|
||||||
currentFilterClass: false
|
|
||||||
},
|
},
|
||||||
composeText: '',
|
profile: {},
|
||||||
composeTextLength: 27,
|
composeText: 'Add optional caption...',
|
||||||
|
composeTextLength: 0,
|
||||||
nsfw: false,
|
nsfw: false,
|
||||||
filters: [],
|
filters: [],
|
||||||
ids: [],
|
ids: [],
|
||||||
media: [],
|
media: [],
|
||||||
meta: {
|
|
||||||
'id': false,
|
|
||||||
'cursor': false,
|
|
||||||
'cw': false,
|
|
||||||
'alt': null,
|
|
||||||
'filter': null,
|
|
||||||
'license': null,
|
|
||||||
'preserve_exif': false,
|
|
||||||
},
|
|
||||||
cursor: 1,
|
|
||||||
carouselCursor: 0,
|
carouselCursor: 0,
|
||||||
visibility: 'public',
|
visibility: 'public',
|
||||||
cropmode: false,
|
|
||||||
croppie: false,
|
|
||||||
limit: pixelfed.settings.maxAlbumLength,
|
|
||||||
acceptedMimes: pixelfed.settings.acceptedMimes,
|
|
||||||
mediaDrawer: false,
|
mediaDrawer: false,
|
||||||
composeState: 'publish',
|
composeState: 'publish'
|
||||||
filter: {
|
|
||||||
name: null,
|
|
||||||
class: null
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
beforeMount() {
|
beforeMount() {
|
||||||
|
this.fetchConfig();
|
||||||
this.fetchProfile();
|
this.fetchProfile();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -294,6 +321,12 @@ export default {
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
|
||||||
|
fetchConfig() {
|
||||||
|
axios.get('/api/v2/config').then(res => {
|
||||||
|
this.config = res.data;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
fetchProfile() {
|
fetchProfile() {
|
||||||
axios.get('/api/v1/accounts/verify_credentials').then(res => {
|
axios.get('/api/v1/accounts/verify_credentials').then(res => {
|
||||||
this.profile = res.data;
|
this.profile = res.data;
|
||||||
|
@ -321,31 +354,34 @@ 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) {
|
||||||
if(self.media && self.media.length + i >= self.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');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
let type = io.type;
|
let type = io.type;
|
||||||
let acceptedMimes = pixelfed.settings.acceptedMimes.split(',');
|
let acceptedMimes = self.config.uploader.media_types.split(',');
|
||||||
let validated = $.inArray(type, acceptedMimes);
|
let validated = $.inArray(type, acceptedMimes);
|
||||||
if(validated == -1) {
|
if(validated == -1) {
|
||||||
swal('Invalid File Type', 'The file you are trying to add is not a valid mime type. Please upload a '+pixelfed.uploader.acceptedMimes+' only.', 'error');
|
swal('Invalid File Type', 'The file you are trying to add is not a valid mime type. Please upload a '+self.config.uploader.media_types+' only.', 'error');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
let form = new FormData();
|
let form = new FormData();
|
||||||
form.append('file', io);
|
form.append('file', io);
|
||||||
|
|
||||||
let config = {
|
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 );
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
axios.post('/api/v1/media', form, config)
|
axios.post('/api/v1/media', form, xhrConfig)
|
||||||
.then(function(e) {
|
.then(function(e) {
|
||||||
self.ids.push(e.data.id);
|
self.ids.push(e.data.id);
|
||||||
self.media.push(e.data);
|
self.media.push(e.data);
|
||||||
|
setTimeout(function() {
|
||||||
self.mediaDrawer = true;
|
self.mediaDrawer = true;
|
||||||
|
}, 1000);
|
||||||
}).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');
|
||||||
});
|
});
|
||||||
|
@ -354,16 +390,8 @@ export default {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
toggleFilter(e) {
|
toggleFilter(e, filter) {
|
||||||
this.media[this.carouselCursor].filter_class = e.target.value;
|
this.media[this.carouselCursor].filter_class = filter;
|
||||||
|
|
||||||
// todo: deprecate
|
|
||||||
this.create.selectedFilter = true;
|
|
||||||
this.create.filterName = val;
|
|
||||||
this.create.filterClass = val;
|
|
||||||
this.create.currentFilterName = val;
|
|
||||||
this.create.currentFilterClass = val;
|
|
||||||
this.filter.class = val;
|
|
||||||
},
|
},
|
||||||
|
|
||||||
updateMedia() {
|
updateMedia() {
|
||||||
|
@ -371,14 +399,20 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
deleteMedia() {
|
deleteMedia() {
|
||||||
|
if(window.confirm('Are you sure you want to delete this photo?') == false) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
let id = this.media[this.carouselCursor].id;
|
let id = this.media[this.carouselCursor].id;
|
||||||
axios.delete('/api/v1/media', {
|
axios.delete('/api/v1/media', {
|
||||||
params: {
|
params: {
|
||||||
id: id
|
id: id
|
||||||
}
|
}
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
if(this.media.length == 0) {
|
if(this.media.length == 1) {
|
||||||
this.mediaDrawer = false;
|
this.mediaDrawer = false;
|
||||||
|
this.ids = [];
|
||||||
|
this.media = [];
|
||||||
|
this.carouselCursor = 0;
|
||||||
}
|
}
|
||||||
this.ids.splice(this.carouselCursor, 1);
|
this.ids.splice(this.carouselCursor, 1);
|
||||||
this.media.splice(this.carouselCursor, 1);
|
this.media.splice(this.carouselCursor, 1);
|
||||||
|
@ -388,6 +422,8 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
mediaAltText() {
|
mediaAltText() {
|
||||||
|
return;
|
||||||
|
// deprecate
|
||||||
swal({
|
swal({
|
||||||
text: 'Add a media description',
|
text: 'Add a media description',
|
||||||
content: "input"
|
content: "input"
|
||||||
|
@ -399,6 +435,8 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
mediaLicense() {
|
mediaLicense() {
|
||||||
|
return;
|
||||||
|
// deprecate
|
||||||
swal({
|
swal({
|
||||||
text: 'Add a media license',
|
text: 'Add a media license',
|
||||||
content: "input",
|
content: "input",
|
||||||
|
@ -414,23 +452,60 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
compose() {
|
compose() {
|
||||||
|
let state = this.composeState;
|
||||||
|
|
||||||
|
switch(state) {
|
||||||
|
case 'publish' :
|
||||||
if(this.media.length == 0) {
|
if(this.media.length == 0) {
|
||||||
swal('Whoops!', 'You need to add media before you can save this!', 'warning');
|
swal('Whoops!', 'You need to add media before you can save this!', 'warning');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
if(this.composeText == 'Add optional caption...') {
|
||||||
|
this.composeText = '';
|
||||||
|
}
|
||||||
let data = {
|
let data = {
|
||||||
media: this.media,
|
media: this.media,
|
||||||
caption: this.composeText,
|
caption: this.composeText,
|
||||||
visibility: this.visibility,
|
visibility: this.visibility,
|
||||||
cw: this.nsfw
|
cw: this.nsfw
|
||||||
};
|
};
|
||||||
axios.post('/api/local/status/compose', data)
|
axios.post('/api/v2/status/compose', data)
|
||||||
.then(res => {
|
.then(res => {
|
||||||
let data = res.data;
|
let data = res.data;
|
||||||
window.location.href = data;
|
window.location.href = data;
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
swal('Oops, something went wrong!', 'An unexpected error occurred.', 'error');
|
swal('Oops, something went wrong!', 'An unexpected error occurred.', 'error');
|
||||||
});
|
});
|
||||||
|
return;
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'delete' :
|
||||||
|
this.mediaDrawer = false;
|
||||||
|
this.ids = [];
|
||||||
|
this.media = [];
|
||||||
|
this.carouselCursor = 0;
|
||||||
|
this.composeText = '';
|
||||||
|
this.composeTextLength = 0;
|
||||||
|
$('#composeModal').modal('hide');
|
||||||
|
return;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
about() {
|
||||||
|
let text = document.createElement('div');
|
||||||
|
text.innerHTML = `
|
||||||
|
<p class="small font-weight-bold">Please visit the <a href="/site/kb/sharing-media">Sharing Media</a> page for more info.</p>
|
||||||
|
`;
|
||||||
|
swal({
|
||||||
|
title: 'Compose UI v3',
|
||||||
|
content: text,
|
||||||
|
icon: 'info'
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
closeModal() {
|
||||||
|
$('#composeModal').modal('hide');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
4
resources/assets/js/compose.js
vendored
Normal file
4
resources/assets/js/compose.js
vendored
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
Vue.component(
|
||||||
|
'compose-modal',
|
||||||
|
require('./components/ComposeModal.vue').default
|
||||||
|
);
|
|
@ -24,3 +24,15 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@endsection
|
@endsection
|
||||||
|
|
||||||
|
@push('scripts')
|
||||||
|
<script type="text/javascript">
|
||||||
|
$(document).ready(function() {
|
||||||
|
$('a[data-target="#composeModal"]').on('click', function() {
|
||||||
|
$('#composeModal').modal('hide');
|
||||||
|
swal('Not Supported', 'You cannot compose a post from the admin dashboard.', 'error');
|
||||||
|
return;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
@endpush
|
|
@ -25,3 +25,13 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@endsection
|
@endsection
|
||||||
|
|
||||||
|
@push('scripts')
|
||||||
|
<script type="text/javascript">
|
||||||
|
$(document).ready(function() {
|
||||||
|
$('a#composeModal').on('click', function() {
|
||||||
|
swal('Not Supported', 'You cannot compose a post from the admin dashboard.', 'error');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
@endpush
|
|
@ -10,6 +10,7 @@
|
||||||
|
|
||||||
@push('scripts')
|
@push('scripts')
|
||||||
<script type="text/javascript" src="{{ mix('js/discover.js') }}"></script>
|
<script type="text/javascript" src="{{ mix('js/discover.js') }}"></script>
|
||||||
|
<script type="text/javascript" src="{{ mix('js/compose.js') }}"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
$(document).ready(function(){new Vue({el: '#content'});});
|
$(document).ready(function(){new Vue({el: '#content'});});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
@extends('layouts.app')
|
@extends('layouts.app')
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<div class="profile-header bg-light" style="background: #FF5F6D; /* fallback for old browsers */
|
<div class="profile-header" style="background: #FF5F6D; /* fallback for old browsers */
|
||||||
background: -webkit-linear-gradient(to right, #FFC371, #FF5F6D); /* Chrome 10-25, Safari 5.1-6 */
|
background: -webkit-linear-gradient(to right, #FFC371, #FF5F6D); /* Chrome 10-25, Safari 5.1-6 */
|
||||||
background: linear-gradient(to right, #FFC371, #FF5F6D); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
background: linear-gradient(to right, #FFC371, #FF5F6D); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
|
||||||
">
|
">
|
||||||
|
@ -55,3 +55,10 @@ background: linear-gradient(to right, #FFC371, #FF5F6D); /* W3C, IE 10+/ Edge, F
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@endsection
|
@endsection
|
||||||
|
|
||||||
|
@push('scripts')
|
||||||
|
<script type="text/javascript" src="{{ mix('js/compose.js') }}"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
$(document).ready(function(){new Vue({el: '#content'});});
|
||||||
|
</script>
|
||||||
|
@endpush
|
|
@ -83,3 +83,10 @@
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@endpush
|
@endpush
|
||||||
|
|
||||||
|
@push('scripts')
|
||||||
|
<script type="text/javascript" src="{{ mix('js/compose.js') }}"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
$(document).ready(function(){new Vue({el: '#content'});});
|
||||||
|
</script>
|
||||||
|
@endpush
|
|
@ -45,3 +45,9 @@
|
||||||
|
|
||||||
@endsection
|
@endsection
|
||||||
|
|
||||||
|
@push('scripts')
|
||||||
|
<script type="text/javascript" src="{{ mix('js/compose.js') }}"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
$(document).ready(function(){new Vue({el: '#content'});});
|
||||||
|
</script>
|
||||||
|
@endpush
|
|
@ -21,6 +21,7 @@
|
||||||
|
|
||||||
@push('scripts')
|
@push('scripts')
|
||||||
<script type="text/javascript" src="{{ mix('js/profile.js') }}"></script>
|
<script type="text/javascript" src="{{ mix('js/profile.js') }}"></script>
|
||||||
|
<script type="text/javascript" src="{{ mix('js/compose.js') }}"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
new Vue({
|
new Vue({
|
||||||
el: '#content'
|
el: '#content'
|
||||||
|
|
|
@ -23,6 +23,7 @@
|
||||||
|
|
||||||
@push('scripts')
|
@push('scripts')
|
||||||
<script type="text/javascript" src="{{ mix('js/status.js') }}"></script>
|
<script type="text/javascript" src="{{ mix('js/status.js') }}"></script>
|
||||||
|
<script type="text/javascript" src="{{ mix('js/compose.js') }}"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
new Vue({
|
new Vue({
|
||||||
|
|
|
@ -8,6 +8,7 @@
|
||||||
|
|
||||||
@push('scripts')
|
@push('scripts')
|
||||||
<script type="text/javascript" src="{{ mix('js/timeline.js') }}"></script>
|
<script type="text/javascript" src="{{ mix('js/timeline.js') }}"></script>
|
||||||
|
<script type="text/javascript" src="{{ mix('js/compose.js') }}"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
new Vue({
|
new Vue({
|
||||||
el: '#content'
|
el: '#content'
|
||||||
|
|
|
@ -8,6 +8,7 @@
|
||||||
|
|
||||||
@push('scripts')
|
@push('scripts')
|
||||||
<script type="text/javascript" src="{{ mix('js/timeline.js') }}"></script>
|
<script type="text/javascript" src="{{ mix('js/timeline.js') }}"></script>
|
||||||
|
<script type="text/javascript" src="{{ mix('js/compose.js') }}"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
new Vue({
|
new Vue({
|
||||||
el: '#content'
|
el: '#content'
|
||||||
|
|
|
@ -1,76 +1 @@
|
||||||
<div class="card card-md-rounded-0">
|
<compose-modal></compose-modal>
|
||||||
<div class="card-header bg-white font-weight-bold d-inline-flex justify-content-between">
|
|
||||||
<div>{{__('Create New Post')}}</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-body" id="statusForm">
|
|
||||||
|
|
||||||
<form method="post" action="{{route('timeline.personal')}}" enctype="multipart/form-data">
|
|
||||||
@csrf
|
|
||||||
<input type="hidden" name="filter_name" value="">
|
|
||||||
<input type="hidden" name="filter_class" value="">
|
|
||||||
<div class="form-group">
|
|
||||||
<div class="custom-file">
|
|
||||||
<input type="file" class="custom-file-input" id="fileInput" name="photo[]" accept="{{config('pixelfed.media_types')}}" multiple="">
|
|
||||||
<label class="custom-file-label" for="fileInput">Upload Image(s)</label>
|
|
||||||
</div>
|
|
||||||
<small class="form-text text-muted">
|
|
||||||
Max Size: @maxFileSize(). Supported formats: jpeg, png, gif, bmp. Limited to {{config('pixelfed.max_album_length')}} photos per post.
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<textarea class="form-control" name="caption" placeholder="Add optional caption here" autocomplete="off" data-limit="{{config('pixelfed.max_caption_length')}}" rows="1"></textarea>
|
|
||||||
<p class="form-text text-muted small text-right">
|
|
||||||
<span class="caption-counter">0</span>
|
|
||||||
<span>/</span>
|
|
||||||
<span>{{config('pixelfed.max_caption_length')}}</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<button class="btn btn-outline-primary btn-sm px-3 py-1 font-weight-bold" type="button" data-toggle="collapse" data-target="#collapsePreview" aria-expanded="false" aria-controls="collapsePreview">
|
|
||||||
Options <i class="fas fa-chevron-down"></i>
|
|
||||||
</button>
|
|
||||||
<div class="collapse" id="collapsePreview">
|
|
||||||
<div class="form-group pt-3">
|
|
||||||
<label class="font-weight-bold text-muted small">Visibility</label>
|
|
||||||
<div class="switch switch-sm">
|
|
||||||
<select class="form-control" name="visibility">
|
|
||||||
<option value="public" selected="">Public</option>
|
|
||||||
<option value="unlisted">Unlisted (hidden from public timelines)</option>
|
|
||||||
<option value="private">Followers Only</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<small class="form-text text-muted">
|
|
||||||
Set the visibility of this post.
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="font-weight-bold text-muted small">CW/NSFW</label>
|
|
||||||
<div class="switch switch-sm">
|
|
||||||
<input type="checkbox" class="switch" id="cw-switch" name="cw">
|
|
||||||
<label for="cw-switch" class="small font-weight-bold">(Default off)</label>
|
|
||||||
</div>
|
|
||||||
<small class="form-text text-muted">
|
|
||||||
Please mark all NSFW and controversial content, as per our content policy.
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
<div class="form-group d-none form-preview">
|
|
||||||
<label class="font-weight-bold text-muted small">Photo Preview</label>
|
|
||||||
<figure class="filterContainer">
|
|
||||||
<img class="filterPreview img-fluid">
|
|
||||||
</figure>
|
|
||||||
<small class="form-text text-muted font-weight-bold">
|
|
||||||
No filter selected.
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
<div class="form-group d-none form-filters">
|
|
||||||
<label for="filterSelectDropdown" class="font-weight-bold text-muted small">Select Filter</label>
|
|
||||||
<select class="form-control" id="filterSelectDropdown">
|
|
||||||
<option value="none" selected="">No Filter</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button type="submit" class="btn btn-outline-primary btn-block font-weight-bold">Create Post</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
3
webpack.mix.js
vendored
3
webpack.mix.js
vendored
|
@ -34,6 +34,9 @@ mix.js('resources/assets/js/app.js', 'public/js')
|
||||||
// LandingPage component
|
// LandingPage component
|
||||||
.js('resources/assets/js/landing.js', 'public/js')
|
.js('resources/assets/js/landing.js', 'public/js')
|
||||||
|
|
||||||
|
// ComposeModal component
|
||||||
|
.js('resources/assets/js/compose.js', 'public/js')
|
||||||
|
|
||||||
.sass('resources/assets/sass/app.scss', 'public/css', {
|
.sass('resources/assets/sass/app.scss', 'public/css', {
|
||||||
implementation: require('node-sass')
|
implementation: require('node-sass')
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in a new issue