UA-Fediland/pixelfed
2
0
Fork 0
mirror of https://github.com/pixelfed/pixelfed.git synced 2024-11-26 08:13:16 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #1702 from pixelfed/staging

Browse source 
Update ComposeModal and Profile components
This commit is contained in:
daniel 2019-09-12 22:42:39 -06:00 committed by GitHub
commit 198ec1457f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 201 additions and 174 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -12,6 +12,7 @@
- Updated EmailService, added new domains [#1690](https://github.com/pixelfed/pixelfed/pull/1690) - Updated EmailService, added new domains [#1690](https://github.com/pixelfed/pixelfed/pull/1690)
- Updated quill.js to v1.3.7 [#1692](https://github.com/pixelfed/pixelfed/pull/1690) - Updated quill.js to v1.3.7 [#1692](https://github.com/pixelfed/pixelfed/pull/1690)
- Cache ProfileController [#1700](https://github.com/pixelfed/pixelfed/pull/1700) - Cache ProfileController [#1700](https://github.com/pixelfed/pixelfed/pull/1700)
- Updated ComposeUI v4, made cropping optional [#1702](https://github.com/pixelfed/pixelfed/pull/1702)
## Deprecated ## Deprecated
- Remove deprecated profile following/followers [#1697](https://github.com/pixelfed/pixelfed/pull/1697) - Remove deprecated profile following/followers [#1697](https://github.com/pixelfed/pixelfed/pull/1697)

BIN
public/js/compose.js vendored
View file

Binary file not shown.

BIN
public/js/profile.js vendored
View file

Binary file not shown.

BIN
public/mix-manifest.json
View file

Binary file not shown.

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

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<input type="file" id="pf-dz" name="media" class="w-100 h-100 d-none file-input" draggable="true" multiple="true" v-bind:accept="config.uploader.media_types"> <input type="file" id="pf-dz" name="media" class="w-100 h-100 d-none file-input" draggable="true" v-bind:accept="config.uploader.media_types">
<div class="timeline"> <div class="timeline">
<div v-if="uploading"> <div v-if="uploading">
<div class="card status-card card-md-rounded-0 w-100 h-100 bg-light py-5" style="border-bottom: 1px solid #f1f1f1"> <div class="card status-card card-md-rounded-0 w-100 h-100 bg-light py-5" style="border-bottom: 1px solid #f1f1f1">
@ -12,7 +12,7 @@
</div> </div>
<div v-else> <div v-else>
<div class="card status-card card-md-rounded-0 w-100 h-100" style="display:flex;"> <div class="card status-card card-md-rounded-0 w-100 h-100" style="display:flex;">
<div class="card-header d-inline-flex align-items-center bg-white"> <div class="card-header d-inline-flex align-items-center justify-content-between bg-white">
<div> <div>
<a v-if="page == 1" href="#" @click.prevent="closeModal()" class="font-weight-bold text-decoration-none text-muted"> <a v-if="page == 1" href="#" @click.prevent="closeModal()" class="font-weight-bold text-decoration-none text-muted">
<i class="fas fa-times fa-lg"></i> <i class="fas fa-times fa-lg"></i>
@ -25,15 +25,20 @@
<span class="font-weight-bold mb-0">{{pageTitle}}</span> <span class="font-weight-bold mb-0">{{pageTitle}}</span>
</span> </span>
</div> </div>
<div class="text-right" style="flex-grow:1;"> <div v-if="page == 2">
<a href="#" class="text-center text-dark" @click.prevent="showCropPhotoCard"><i class="fas fa-magic fa-lg"></i></a>
</div>
<div>
<!-- <a v-if="page > 1" class="font-weight-bold text-decoration-none" href="#" @click.prevent="page--">Back</a> --> <!-- <a v-if="page > 1" class="font-weight-bold text-decoration-none" href="#" @click.prevent="page--">Back</a> -->
<span v-if="pageLoading"> <span v-if="pageLoading">
<div class="spinner-border spinner-border-sm" role="status"> <div class="spinner-border spinner-border-sm" role="status">
<span class="sr-only">Loading...</span> <span class="sr-only">Loading...</span>
</div> </div>
</span> </span>
<a v-if="!pageLoading && (page > 1 && page <= 3) || (page == 1 && ids.length != 0)" class="font-weight-bold text-decoration-none" href="#" @click.prevent="nextPage">Next</a> <span v-else>
<a v-if="!pageLoading && page == 4" class="font-weight-bold text-decoration-none" href="#" @click.prevent="compose">Post</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>
</span>
</div> </div>
</div> </div>
<div class="card-body p-0 border-top"> <div class="card-body p-0 border-top">
@ -43,7 +48,7 @@
<a class="btn btn-primary font-weight-bold" href="/i/compose">Compose Post</a> <a class="btn btn-primary font-weight-bold" href="/i/compose">Compose Post</a>
</p> </p>
<hr> <hr>
<p> <p v-if="media.length == 0">
<button type="button" class="btn btn-outline-primary font-weight-bold" @click.prevent="addMedia">Compose Post <sup>BETA</sup></button> <button type="button" class="btn btn-outline-primary font-weight-bold" @click.prevent="addMedia">Compose Post <sup>BETA</sup></button>
</p> </p>
<p> <p>
@ -60,7 +65,7 @@
</div> </div>
</div> </div>
<div v-if="page == 2" class="w-100 h-100"> <div v-if="page == 'cropPhoto'" class="w-100 h-100">
<div v-if="ids.length > 0"> <div v-if="ids.length > 0">
<vue-cropper <vue-cropper
ref="cropper" ref="cropper"
@ -75,7 +80,7 @@
</div> </div>
</div> </div>
<div v-if="page == 3" class="w-100 h-100"> <div v-if="page == 2" class="w-100 h-100">
<div slot="img" style="display:flex;min-height: 420px;align-items: center;"> <div slot="img" style="display:flex;min-height: 420px;align-items: center;">
<img :class="'d-block img-fluid w-100 ' + [media[carouselCursor].filter_class?media[carouselCursor].filter_class:'']" :src="media[carouselCursor].url" :alt="media[carouselCursor].description" :title="media[carouselCursor].description"> <img :class="'d-block img-fluid w-100 ' + [media[carouselCursor].filter_class?media[carouselCursor].filter_class:'']" :src="media[carouselCursor].url" :alt="media[carouselCursor].description" :title="media[carouselCursor].description">
</div> </div>
@ -98,7 +103,7 @@
</div> </div>
</div> </div>
<div v-if="page == 4" class="w-100 h-100"> <div v-if="page == 3" class="w-100 h-100">
<div class="border-bottom mt-2"> <div class="border-bottom mt-2">
<div class="media px-3"> <div class="media px-3">
<img :src="media[0].url" width="42px" height="42px" :class="[media[0].filter_class?'mr-2 ' + media[0].filter_class:'mr-2']"> <img :src="media[0].url" width="42px" height="42px" :class="[media[0].filter_class?'mr-2 ' + media[0].filter_class:'mr-2']">
@ -177,7 +182,7 @@
</div> </div>
</div> </div>
</div> </div>
<a class="list-group-item" @click.prevent="page = 'altText'"> <a href="#" class="list-group-item" @click.prevent="page = 'altText'">
<div class="text-dark">Write alt text</div> <div class="text-dark">Write alt text</div>
<p class="text-muted small mb-0">Alt text describes your photos for people with visual impairments.</p> <p class="text-muted small mb-0">Alt text describes your photos for people with visual impairments.</p>
</a> </a>
@ -227,7 +232,7 @@
</div> </div>
<!-- card-footers --> <!-- card-footers -->
<div v-if="page == 2" class="card-footer bg-white d-flex justify-content-between"> <div v-if="page == 'cropPhoto'" class="card-footer bg-white d-flex justify-content-between">
<div> <div>
<button type="button" class="btn btn-outline-secondary" @click="rotate"><i class="fas fa-undo"></i></button> <button type="button" class="btn btn-outline-secondary" @click="rotate"><i class="fas fa-undo"></i></button>
</div> </div>
@ -325,6 +330,7 @@ export default {
taggedUsernames: false, taggedUsernames: false,
namedPages: [ namedPages: [
'cropPhoto',
'tagPeople', 'tagPeople',
'addLocation', 'addLocation',
'advancedSettings', 'advancedSettings',
@ -642,12 +648,13 @@ export default {
}, },
nextPage() { nextPage() {
this.pageTitle = '';
switch(this.page) { switch(this.page) {
case 1: case 1:
this.page = 3; this.page = 2;
break; break;
case 2: case 'cropPhoto':
this.pageLoading = true; this.pageLoading = true;
let self = this; let self = this;
this.$refs.cropper.getCroppedCanvas({ this.$refs.cropper.getCroppedCanvas({
@ -664,14 +671,14 @@ export default {
axios.post(url, data).then(res => { axios.post(url, data).then(res => {
self.media[self.carouselCursor].url = res.data.url; self.media[self.carouselCursor].url = res.data.url;
self.pageLoading = false; self.pageLoading = false;
self.page++; self.page = 2;
}).catch(err => { }).catch(err => {
}); });
}); });
break; break;
case 2:
case 3: case 3:
case 4:
this.page++; this.page++;
break; break;
} }
@ -732,16 +739,25 @@ export default {
onSubmitLocation(result) { onSubmitLocation(result) {
this.place = result; this.place = result;
this.pageTitle = ''; this.pageTitle = '';
this.page = 4; this.page = 3;
return; return;
}, },
goBack() { goBack() {
this.pageTitle = ''; this.pageTitle = '';
if(this.page == 'addToStory') {
this.page = 1; switch(this.page) {
} else { case 'addToStory':
this.namedPages.indexOf(this.page) != -1 ? this.page = 4 : this.page--; this.page = 1;
break;
case 'cropPhoto':
this.page = 2;
break;
default:
this.namedPages.indexOf(this.page) != -1 ? this.page = 3 : this.page--;
break;
} }
}, },
@ -755,6 +771,11 @@ export default {
this.page = 'addToStory'; this.page = 'addToStory';
}, },
showCropPhotoCard() {
this.pageTitle = 'Edit Photo';
this.page = 'cropPhoto';
},
toggleVisibility(state) { toggleVisibility(state) {
let tags = { let tags = {
public: 'Public', public: 'Public',
@ -764,7 +785,7 @@ export default {
this.visibility = state; this.visibility = state;
this.visibilityTag = tags[state]; this.visibilityTag = tags[state];
this.pageTitle = ''; this.pageTitle = '';
this.page = 4; this.page = 3;
} }
} }
} }

311
resources/assets/js/components/Profile.vue
View file

@ -346,176 +346,176 @@
</div> </div>
</div> </div>
<b-modal ref="followingModal" <b-modal ref="followingModal"
id="following-modal" id="following-modal"
hide-footer hide-footer
centered centered
title="Following" title="Following"
body-class="list-group-flush p-0"> body-class="list-group-flush p-0">
<div class="list-group"> <div class="list-group">
<div class="list-group-item border-0" v-for="(user, index) in following" :key="'following_'+index"> <div class="list-group-item border-0" v-for="(user, index) in following" :key="'following_'+index">
<div class="media"> <div class="media">
<a :href="user.url"> <a :href="user.url">
<img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px" loading="lazy"> <img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px" loading="lazy">
</a> </a>
<div class="media-body"> <div class="media-body">
<p class="mb-0" style="font-size: 14px"> <p class="mb-0" style="font-size: 14px">
<a :href="user.url" class="font-weight-bold text-dark"> <a :href="user.url" class="font-weight-bold text-dark">
{{user.username}} {{user.username}}
</a> </a>
</p> </p>
<p class="text-muted mb-0" style="font-size: 14px"> <p class="text-muted mb-0" style="font-size: 14px">
{{user.display_name}} {{user.display_name}}
</p> </p>
</div> </div>
<div v-if="owner"> <div v-if="owner">
<a class="btn btn-outline-secondary btn-sm" href="#" @click.prevent="followModalAction(user.id, index, 'following')">Unfollow</a> <a class="btn btn-outline-secondary btn-sm" href="#" @click.prevent="followModalAction(user.id, index, 'following')">Unfollow</a>
</div>
</div> </div>
</div> </div>
</div> <div v-if="following.length == 0" class="list-group-item border-0">
<div v-if="following.length == 0" class="list-group-item border-0"> <div class="list-group-item border-0">
<div class="list-group-item border-0"> <p class="p-3 text-center mb-0 lead"></p>
<p class="p-3 text-center mb-0 lead"></p> </div>
</div>
<div v-if="followingMore" class="list-group-item text-center" v-on:click="followingLoadMore()">
<p class="mb-0 small text-muted font-weight-light cursor-pointer">Load more</p>
</div> </div>
</div> </div>
<div v-if="followingMore" class="list-group-item text-center" v-on:click="followingLoadMore()">
<p class="mb-0 small text-muted font-weight-light cursor-pointer">Load more</p>
</div>
</div>
</b-modal> </b-modal>
<b-modal ref="followerModal" <b-modal ref="followerModal"
id="follower-modal" id="follower-modal"
hide-footer hide-footer
centered centered
title="Followers" title="Followers"
body-class="list-group-flush p-0"> body-class="list-group-flush p-0">
<div class="list-group"> <div class="list-group">
<div class="list-group-item border-0" v-for="(user, index) in followers" :key="'follower_'+index"> <div class="list-group-item border-0" v-for="(user, index) in followers" :key="'follower_'+index">
<div class="media"> <div class="media">
<a :href="user.url"> <a :href="user.url">
<img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px" loading="lazy"> <img class="mr-3 rounded-circle box-shadow" :src="user.avatar" :alt="user.username + '’s avatar'" width="30px" loading="lazy">
</a> </a>
<div class="media-body"> <div class="media-body">
<p class="mb-0" style="font-size: 14px"> <p class="mb-0" style="font-size: 14px">
<a :href="user.url" class="font-weight-bold text-dark"> <a :href="user.url" class="font-weight-bold text-dark">
{{user.username}} {{user.username}}
</a> </a>
</p> </p>
<p class="text-muted mb-0" style="font-size: 14px"> <p class="text-muted mb-0" style="font-size: 14px">
{{user.display_name}} {{user.display_name}}
</p> </p>
</div>
</div> </div>
</div> </div>
<div v-if="followerMore" class="list-group-item text-center" v-on:click="followersLoadMore()">
<p class="mb-0 small text-muted font-weight-light cursor-pointer">Load more</p>
</div>
</div> </div>
<div v-if="followerMore" class="list-group-item text-center" v-on:click="followersLoadMore()">
<p class="mb-0 small text-muted font-weight-light cursor-pointer">Load more</p>
</div>
</div>
</b-modal> </b-modal>
<b-modal ref="visitorContextMenu" <b-modal ref="visitorContextMenu"
id="visitor-context-menu" id="visitor-context-menu"
hide-footer hide-footer
hide-header hide-header
centered centered
size="sm" size="sm"
body-class="list-group-flush p-0"> body-class="list-group-flush p-0">
<div class="list-group" v-if="relationship"> <div class="list-group" v-if="relationship">
<div class="list-group-item cursor-pointer text-center rounded text-dark" @click="copyProfileLink"> <div class="list-group-item cursor-pointer text-center rounded text-dark" @click="copyProfileLink">
Copy Link Copy Link
</div>
<div v-if="user && !owner && !relationship.following" class="list-group-item cursor-pointer text-center rounded text-dark" @click="followProfile">
Follow
</div>
<div v-if="user && !owner && relationship.following" class="list-group-item cursor-pointer text-center rounded" @click="followProfile">
Unfollow
</div>
<div v-if="user && !owner && !relationship.muting" class="list-group-item cursor-pointer text-center rounded" @click="muteProfile">
Mute
</div>
<div v-if="user && !owner && relationship.muting" class="list-group-item cursor-pointer text-center rounded" @click="unmuteProfile">
Unmute
</div>
<div v-if="user && !owner" class="list-group-item cursor-pointer text-center rounded text-dark" @click="reportProfile">
Report User
</div>
<div v-if="user && !owner && !relationship.blocking" class="list-group-item cursor-pointer text-center rounded text-dark" @click="blockProfile">
Block
</div>
<div v-if="user && !owner && relationship.blocking" class="list-group-item cursor-pointer text-center rounded text-dark" @click="unblockProfile">
Unblock
</div>
<div v-if="user && owner" class="list-group-item cursor-pointer text-center rounded text-dark" @click="redirect('/settings/home')">
Settings
</div>
<div class="list-group-item cursor-pointer text-center rounded text-muted" @click="$refs.visitorContextMenu.hide()">
Close
</div>
</div> </div>
<div v-if="user && !owner && !relationship.following" class="list-group-item cursor-pointer text-center rounded text-dark" @click="followProfile">
Follow
</div>
<div v-if="user && !owner && relationship.following" class="list-group-item cursor-pointer text-center rounded" @click="followProfile">
Unfollow
</div>
<div v-if="user && !owner && !relationship.muting" class="list-group-item cursor-pointer text-center rounded" @click="muteProfile">
Mute
</div>
<div v-if="user && !owner && relationship.muting" class="list-group-item cursor-pointer text-center rounded" @click="unmuteProfile">
Unmute
</div>
<div v-if="user && !owner" class="list-group-item cursor-pointer text-center rounded text-dark" @click="reportProfile">
Report User
</div>
<div v-if="user && !owner && !relationship.blocking" class="list-group-item cursor-pointer text-center rounded text-dark" @click="blockProfile">
Block
</div>
<div v-if="user && !owner && relationship.blocking" class="list-group-item cursor-pointer text-center rounded text-dark" @click="unblockProfile">
Unblock
</div>
<div v-if="user && owner" class="list-group-item cursor-pointer text-center rounded text-dark" @click="redirect('/settings/home')">
Settings
</div>
<div class="list-group-item cursor-pointer text-center rounded text-muted" @click="$refs.visitorContextMenu.hide()">
Close
</div>
</div>
</b-modal> </b-modal>
<b-modal ref="sponsorModal" <b-modal ref="sponsorModal"
id="sponsor-modal" id="sponsor-modal"
hide-footer hide-footer
:title="'Sponsor ' + profileUsername" :title="'Sponsor ' + profileUsername"
centered centered
size="md" size="md"
body-class="px-5"> body-class="px-5">
<div> <div>
<p class="font-weight-bold">External Links</p> <p class="font-weight-bold">External Links</p>
<p v-if="sponsorList.patreon" class="pt-2"> <p v-if="sponsorList.patreon" class="pt-2">
<a :href="'https://' + sponsorList.patreon" rel="nofollow" class="font-weight-bold">{{sponsorList.patreon}}</a> <a :href="'https://' + sponsorList.patreon" rel="nofollow" class="font-weight-bold">{{sponsorList.patreon}}</a>
</p> </p>
<p v-if="sponsorList.liberapay" class="pt-2"> <p v-if="sponsorList.liberapay" class="pt-2">
<a :href="'https://' + sponsorList.liberapay" rel="nofollow" class="font-weight-bold">{{sponsorList.liberapay}}</a> <a :href="'https://' + sponsorList.liberapay" rel="nofollow" class="font-weight-bold">{{sponsorList.liberapay}}</a>
</p> </p>
<p v-if="sponsorList.opencollective" class="pt-2"> <p v-if="sponsorList.opencollective" class="pt-2">
<a :href="'https://' + sponsorList.opencollective" rel="nofollow" class="font-weight-bold">{{sponsorList.opencollective}}</a> <a :href="'https://' + sponsorList.opencollective" rel="nofollow" class="font-weight-bold">{{sponsorList.opencollective}}</a>
</p> </p>
</div> </div>
</b-modal> </b-modal>
</div> </div>
</template> </template>
<style type="text/css" scoped> <style type="text/css" scoped>
.o-square { .o-square {
max-width: 320px; max-width: 320px;
} }
.o-portrait { .o-portrait {
max-width: 320px; max-width: 320px;
} }
.o-landscape { .o-landscape {
max-width: 320px; max-width: 320px;
} }
.post-icon { .post-icon {
color: #fff; color: #fff;
position:relative; position:relative;
margin-top: 10px; margin-top: 10px;
z-index: 9; z-index: 9;
opacity: 0.6; opacity: 0.6;
text-shadow: 3px 3px 16px #272634; text-shadow: 3px 3px 16px #272634;
} }
.font-size-16px { .font-size-16px {
font-size: 16px; font-size: 16px;
} }
.profile-website { .profile-website {
color: #003569; color: #003569;
text-decoration: none; text-decoration: none;
font-weight: 600; font-weight: 600;
} }
.nav-topbar .nav-link { .nav-topbar .nav-link {
color: #999; color: #999;
} }
.nav-topbar .nav-link .small { .nav-topbar .nav-link .small {
font-weight: 600; font-weight: 600;
} }
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
import VueMasonry from 'vue-masonry-css' import VueMasonry from 'vue-masonry-css'
Vue.use(VueMasonry);
export default { export default {
props: [ props: [
'profile-id', 'profile-id',
'profile-layout', 'profile-layout',
'profile-settings', 'profile-settings',
'profile-username' 'profile-username'
], ],
data() { data() {
return { return {
@ -557,6 +557,7 @@
this.fetchProfile(); this.fetchProfile();
let u = new URLSearchParams(window.location.search); let u = new URLSearchParams(window.location.search);
if(u.has('ui') && u.get('ui') == 'moment' && this.layout != 'moment') { if(u.has('ui') && u.get('ui') == 'moment' && this.layout != 'moment') {
Vue.use(VueMasonry);
this.layout = 'moment'; this.layout = 'moment';
} }
if(u.has('ui') && u.get('ui') == 'metro' && this.layout != 'metro') { if(u.has('ui') && u.get('ui') == 'metro' && this.layout != 'metro') {
@ -581,6 +582,11 @@
if(u.has('md') && u.get('md') == 'following') { if(u.has('md') && u.get('md') == 'following') {
this.followingModal(); this.followingModal();
} }
if(document.querySelectorAll('body')[0].classList.contains('loggedIn') == true) {
axios.get('/api/v1/accounts/verify_credentials').then(res => {
this.user = res.data;
});
}
}, },
updated() { updated() {
@ -591,12 +597,12 @@
fetchProfile() { fetchProfile() {
axios.get('/api/v1/accounts/' + this.profileId).then(res => { axios.get('/api/v1/accounts/' + this.profileId).then(res => {
this.profile = res.data; this.profile = res.data;
}).then(res => {
this.fetchPosts();
}); });
if(document.querySelectorAll('body')[0].classList.contains('loggedIn') == true) { },
axios.get('/api/v1/accounts/verify_credentials').then(res => {
this.user = res.data; fetchPosts() {
});
}
let apiUrl = '/api/v1/accounts/' + this.profileId + '/statuses'; let apiUrl = '/api/v1/accounts/' + this.profileId + '/statuses';
axios.get(apiUrl, { axios.get(apiUrl, {
params: { params: {
@ -614,7 +620,7 @@
this.timeline = data; this.timeline = data;
this.ownerCheck(); this.ownerCheck();
this.loading = false; this.loading = false;
this.loadSponsor(); //this.loadSponsor();
}).catch(err => { }).catch(err => {
swal('Oops, something went wrong', swal('Oops, something went wrong',
'Please release the page.', 'Please release the page.',
@ -825,7 +831,6 @@
}); });
}, },
unmuteProfile(status = null) { unmuteProfile(status = null) {
if($('body').hasClass('loggedIn') == false) { if($('body').hasClass('loggedIn') == false) {
return; return;