mirror of
https://github.com/pixelfed/pixelfed.git
synced 2024-11-10 08:44:49 +00:00
Merge pull request #1269 from pixelfed/frontend-ui-refactor
Frontend ui refactor
This commit is contained in:
commit
fb3e668d89
5 changed files with 60 additions and 13 deletions
BIN
public/js/status.js
vendored
BIN
public/js/status.js
vendored
Binary file not shown.
BIN
public/js/timeline.js
vendored
BIN
public/js/timeline.js
vendored
Binary file not shown.
Binary file not shown.
|
@ -893,11 +893,11 @@ export default {
|
|||
let em = event.target.innerText;
|
||||
if(this.replyText.length == 0) {
|
||||
this.reply_to_profile_id = this.status.account.id;
|
||||
this.replyText = '@' + this.status.account.username + ' ' + em;
|
||||
this.replyText = em + ' ';
|
||||
$('textarea[name="comment"]').focus();
|
||||
} else {
|
||||
this.reply_to_profile_id = this.status.account.id;
|
||||
this.replyText += em;
|
||||
this.replyText += em + ' ';
|
||||
$('textarea[name="comment"]').focus();
|
||||
}
|
||||
},
|
||||
|
|
|
@ -152,10 +152,27 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-footer bg-white" v-if="status.id == replyId">
|
||||
<form class="" v-on:submit.prevent="commentSubmit(status, $event)">
|
||||
<input type="hidden" name="item" value="">
|
||||
<input class="form-control status-reply-input" name="comment" placeholder="Add a comment…" autocomplete="off">
|
||||
<div v-if="status.id == replyId && !status.comments_disabled" class="card-footer bg-white px-2 py-0">
|
||||
<ul class="nav align-items-center emoji-reactions" style="overflow-x: scroll;flex-wrap: unset;">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -388,6 +405,24 @@
|
|||
.small .custom-control-label {
|
||||
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>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
@ -422,6 +457,8 @@
|
|||
lightboxMedia: false,
|
||||
showSuggestions: false,
|
||||
showReadMore: true,
|
||||
replyStatus: {},
|
||||
replyText: '',
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -592,7 +629,10 @@
|
|||
return;
|
||||
}
|
||||
this.replies = {};
|
||||
this.replyStatus = {};
|
||||
this.replyText = '';
|
||||
this.replyId = status.id;
|
||||
this.replyStatus = status;
|
||||
this.fetchStatusComments(status, '');
|
||||
},
|
||||
|
||||
|
@ -724,16 +764,12 @@
|
|||
|
||||
commentSubmit(status, $event) {
|
||||
let id = status.id;
|
||||
let form = $event.target;
|
||||
let input = $(form).find('input[name="comment"]');
|
||||
let comment = input.val();
|
||||
let comments = form.parentElement.parentElement.getElementsByClassName('comments')[0];
|
||||
let comment = this.replyText;
|
||||
axios.post('/i/comment', {
|
||||
item: id,
|
||||
comment: comment
|
||||
}).then(res => {
|
||||
form.reset();
|
||||
form.blur();
|
||||
this.replyText = '';
|
||||
this.replies.push(res.data.entity);
|
||||
});
|
||||
},
|
||||
|
@ -1058,7 +1094,18 @@
|
|||
hideSuggestions() {
|
||||
localStorage.setItem('pf_metro_ui.exp.rec', 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>
|
||||
|
|
Loading…
Reference in a new issue