UA-Fediland/pixelfed
2
0
Fork 0
mirror of https://github.com/pixelfed/pixelfed.git synced 2024-12-01 18:53:16 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #1269 from pixelfed/frontend-ui-refactor

Browse source 
Frontend ui refactor
This commit is contained in:
daniel 2019-05-04 22:45:08 -06:00 committed by GitHub
commit fb3e668d89
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 60 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/js/status.js vendored
View file

Binary file not shown.

BIN
public/js/timeline.js vendored
View file

Binary file not shown.

BIN
public/mix-manifest.json
View file

Binary file not shown.

4
resources/assets/js/components/PostComponent.vue
View file

@ -893,11 +893,11 @@ export default {
let em = event.target.innerText; let em = event.target.innerText;
if(this.replyText.length == 0) { if(this.replyText.length == 0) {
this.reply_to_profile_id = this.status.account.id; this.reply_to_profile_id = this.status.account.id;
this.replyText = '@' + this.status.account.username + ' ' + em; this.replyText = em + ' ';
$('textarea[name="comment"]').focus(); $('textarea[name="comment"]').focus();
} else { } else {
this.reply_to_profile_id = this.status.account.id; this.reply_to_profile_id = this.status.account.id;
this.replyText += em; this.replyText += em + ' ';
$('textarea[name="comment"]').focus(); $('textarea[name="comment"]').focus();
} }
}, },

67
resources/assets/js/components/Timeline.vue
View file

@ -152,10 +152,27 @@
</div> </div>
</div> </div>
<div class="card-footer bg-white" v-if="status.id == replyId"> <div v-if="status.id == replyId && !status.comments_disabled" class="card-footer bg-white px-2 py-0">
<form class="" v-on:submit.prevent="commentSubmit(status, $event)"> <ul class="nav align-items-center emoji-reactions" style="overflow-x: scroll;flex-wrap: unset;">
<input type="hidden" name="item" value=""> <li class="nav-item" v-on:click="emojiReaction(status)">😂</li>
<input class="form-control status-reply-input" name="comment" placeholder="Add a comment…" autocomplete="off"> <li class="nav-item" v-on:click="emojiReaction(status)">💯</li>
<li class="nav-item" v-on:click="emojiReaction(status)">❤️</li>
<li class="nav-item" v-on:click="emojiReaction(status)">🙌</li>
<li class="nav-item" v-on:click="emojiReaction(status)">👏</li>
<li class="nav-item" v-on:click="emojiReaction(status)">😍</li>
<li class="nav-item" v-on:click="emojiReaction(status)">😯</li>
<li class="nav-item" v-on:click="emojiReaction(status)">😢</li>
<li class="nav-item" v-on:click="emojiReaction(status)">😅</li>
<li class="nav-item" v-on:click="emojiReaction(status)">😁</li>
<li class="nav-item" v-on:click="emojiReaction(status)">🙂</li>
<li class="nav-item" v-on:click="emojiReaction(status)">😎</li>
</ul>
</div>
<div v-if="status.id == replyId && !status.comments_disabled" class="card-footer bg-white sticky-md-bottom p-0">
<form class="border-0 rounded-0 align-middle" method="post" action="/i/comment" :data-id="status.id" data-truncate="false">
<textarea class="form-control border-0 rounded-0" name="comment" placeholder="Add a comment…" autocomplete="off" autocorrect="off" style="height:56px;line-height: 18px;max-height:80px;resize: none; padding-right:4.2rem;" v-model="replyText"></textarea>
<input type="button" value="Post" class="d-inline-block btn btn-link font-weight-bold reply-btn text-decoration-none" v-on:click.prevent="commentSubmit(status, $event)"/>
</form> </form>
</div> </div>
</div> </div>
@ -388,6 +405,24 @@
.small .custom-control-label { .small .custom-control-label {
padding-top: 3px; padding-top: 3px;
} }
.reply-btn {
position: absolute;
bottom: 12px;
right: 20px;
width: 60px;
text-align: center;
border-radius: 0 3px 3px 0;
}
.emoji-reactions .nav-item {
font-size: 1.2rem;
padding: 9px;
cursor: pointer;
}
.emoji-reactions::-webkit-scrollbar {
width: 0px;
height: 0px;
background: transparent;
}
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
@ -422,6 +457,8 @@
lightboxMedia: false, lightboxMedia: false,
showSuggestions: false, showSuggestions: false,
showReadMore: true, showReadMore: true,
replyStatus: {},
replyText: '',
} }
}, },
@ -592,7 +629,10 @@
return; return;
} }
this.replies = {}; this.replies = {};
this.replyStatus = {};
this.replyText = '';
this.replyId = status.id; this.replyId = status.id;
this.replyStatus = status;
this.fetchStatusComments(status, ''); this.fetchStatusComments(status, '');
}, },
@ -724,16 +764,12 @@
commentSubmit(status, $event) { commentSubmit(status, $event) {
let id = status.id; let id = status.id;
let form = $event.target; let comment = this.replyText;
let input = $(form).find('input[name="comment"]');
let comment = input.val();
let comments = form.parentElement.parentElement.getElementsByClassName('comments')[0];
axios.post('/i/comment', { axios.post('/i/comment', {
item: id, item: id,
comment: comment comment: comment
}).then(res => { }).then(res => {
form.reset(); this.replyText = '';
form.blur();
this.replies.push(res.data.entity); this.replies.push(res.data.entity);
}); });
}, },
@ -1058,7 +1094,18 @@
hideSuggestions() { hideSuggestions() {
localStorage.setItem('pf_metro_ui.exp.rec', false); localStorage.setItem('pf_metro_ui.exp.rec', false);
this.showSuggestions = false; this.showSuggestions = false;
},
emojiReaction(status) {
let em = event.target.innerText;
if(this.replyText.length == 0) {
this.replyText = em + ' ';
$('textarea[name="comment"]').focus();
} else {
this.replyText += em + ' ';
$('textarea[name="comment"]').focus();
} }
},
} }
} }
</script> </script>