wip
This commit is contained in:
syuilo
parent
7816282318
commit
bc632cefe5
|
|
@ -5,6 +5,7 @@ import signup from './signup.vue';
|
|||
import forkit from './forkit.vue';
|
||||
import nav from './nav.vue';
|
||||
import postHtml from './post-html';
|
||||
import poll from './poll.vue';
|
||||
import pollEditor from './poll-editor.vue';
|
||||
import reactionIcon from './reaction-icon.vue';
|
||||
import reactionsViewer from './reactions-viewer.vue';
|
||||
|
|
@ -25,6 +26,7 @@ Vue.component('mk-signup', signup);
|
|||
Vue.component('mk-forkit', forkit);
|
||||
Vue.component('mk-nav', nav);
|
||||
Vue.component('mk-post-html', postHtml);
|
||||
Vue.component('mk-poll', poll);
|
||||
Vue.component('mk-poll-editor', pollEditor);
|
||||
Vue.component('mk-reaction-icon', reactionIcon);
|
||||
Vue.component('mk-reactions-viewer', reactionsViewer);
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<div :data-is-voted="isVoted">
|
||||
<div class="mk-poll" :data-is-voted="isVoted">
|
||||
<ul>
|
||||
<li v-for="choice in poll.choices" :key="choice.id" @click="vote.bind(choice.id)" :class="{ voted: choice.voted }" :title="!isVoted ? '%i18n:common.tags.mk-poll.vote-to%'.replace('{}', choice.text) : ''">
|
||||
<div class="backdrop" :style="{ 'width:' + (showResult ? (choice.votes / total * 100) : 0) + '%' }"></div>
|
||||
<li v-for="choice in poll.choices" :key="choice.id" @click="vote(choice.id)" :class="{ voted: choice.voted }" :title="!isVoted ? '%i18n:common.tags.mk-poll.vote-to%'.replace('{}', choice.text) : ''">
|
||||
<div class="backdrop" :style="{ 'width': (showResult ? (choice.votes / total * 100) : 0) + '%' }"></div>
|
||||
<span>
|
||||
<template v-if="choice.is_voted">%fa:check%</template>
|
||||
{{ text }}
|
||||
{{ choice.text }}
|
||||
<span class="votes" v-if="showResult">({{ '%i18n:common.tags.mk-poll.vote-count%'.replace('{}', choice.votes) }})</span>
|
||||
</span>
|
||||
</li>
|
||||
|
|
@ -19,8 +19,9 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="typescript">
|
||||
export default {
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
export default Vue.extend({
|
||||
props: ['post'],
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -28,13 +29,13 @@
|
|||
};
|
||||
},
|
||||
computed: {
|
||||
poll() {
|
||||
poll(): any {
|
||||
return this.post.poll;
|
||||
},
|
||||
total() {
|
||||
total(): number {
|
||||
return this.poll.choices.reduce((a, b) => a + b.votes, 0);
|
||||
},
|
||||
isVoted() {
|
||||
isVoted(): boolean {
|
||||
return this.poll.choices.some(c => c.is_voted);
|
||||
}
|
||||
},
|
||||
|
|
@ -54,19 +55,18 @@
|
|||
this.poll.choices.forEach(c => {
|
||||
if (c.id == id) {
|
||||
c.votes++;
|
||||
c.is_voted = true;
|
||||
Vue.set(c, 'is_voted', true);
|
||||
}
|
||||
});
|
||||
this.showResult = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
:scope
|
||||
display block
|
||||
.mk-poll
|
||||
|
||||
> ul
|
||||
display block
|
||||
|
|
|
|||
|
|
@ -287,7 +287,7 @@ export default Vue.extend({
|
|||
width calc(100% - 275px * 2)
|
||||
order 2
|
||||
|
||||
> *:not(main)
|
||||
> *:not(.main)
|
||||
width 275px
|
||||
padding 16px 0 16px 0
|
||||
|
||||
|
|
@ -303,7 +303,7 @@ export default Vue.extend({
|
|||
order 3
|
||||
|
||||
@media (max-width 1100px)
|
||||
> *:not(main)
|
||||
> *:not(.main)
|
||||
display none
|
||||
|
||||
> .main
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</a>
|
||||
<div class="text">
|
||||
<p>
|
||||
<mk-reaction-icon reaction={ notification.reaction }/>
|
||||
<mk-reaction-icon :reaction="notification.reaction"/>
|
||||
<a :href="`/${notification.user.username}`" v-user-preview="notification.user.id">{{ notification.user.name }}</a>
|
||||
</p>
|
||||
<a class="post-ref" :href="`/${notification.post.user.username}/${notification.post.id}`">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="mk-posts">
|
||||
<template v-for="(post, i) in _posts">
|
||||
<x-post :post.sync="post" :key="post.id"/>
|
||||
<x-post :post="post" :key="post.id" @update:post="onPostUpdated(i, $event)"/>
|
||||
<p class="date" v-if="i != posts.length - 1 && post._date != _posts[i + 1]._date">
|
||||
<span>%fa:angle-up%{{ post._datetext }}</span>
|
||||
<span>%fa:angle-down%{{ _posts[i + 1]._datetext }}</span>
|
||||
|
|
@ -41,6 +41,9 @@ export default Vue.extend({
|
|||
methods: {
|
||||
focus() {
|
||||
(this.$el as any).children[0].focus();
|
||||
},
|
||||
onPostUpdated(i, post) {
|
||||
Vue.set((this as any).posts, i, post);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import userCard from './user-card.vue';
|
|||
import postDetail from './post-detail.vue';
|
||||
import followButton from './follow-button.vue';
|
||||
import friendsMaker from './friends-maker.vue';
|
||||
import notification from './notification.vue';
|
||||
import notifications from './notifications.vue';
|
||||
import notificationPreview from './notification-preview.vue';
|
||||
|
||||
|
|
@ -29,5 +30,6 @@ Vue.component('mk-user-card', userCard);
|
|||
Vue.component('mk-post-detail', postDetail);
|
||||
Vue.component('mk-follow-button', followButton);
|
||||
Vue.component('mk-friends-maker', friendsMaker);
|
||||
Vue.component('mk-notification', notification);
|
||||
Vue.component('mk-notifications', notifications);
|
||||
Vue.component('mk-notification-preview', notificationPreview);
|
||||
|
|
|
|||
|
|
@ -106,6 +106,7 @@ import Vue from 'vue';
|
|||
import getPostSummary from '../../../../../common/get-post-summary';
|
||||
|
||||
export default Vue.extend({
|
||||
props: ['notification'],
|
||||
data() {
|
||||
return {
|
||||
getPostSummary
|
||||
|
|
|
|||
|
|
@ -10,7 +10,8 @@
|
|||
</template>
|
||||
</div>
|
||||
<button class="more" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications">
|
||||
<template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template>{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:mobile.tags.mk-notifications.more%' }
|
||||
<template v-if="fetchingMoreNotifications">%fa:spinner .pulse .fw%</template>
|
||||
{{ fetchingMoreNotifications ? '%i18n:common.loading%' : '%i18n:mobile.tags.mk-notifications.more%' }}
|
||||
</button>
|
||||
<p class="empty" v-if="notifications.length == 0 && !fetching">%i18n:mobile.tags.mk-notifications.empty%</p>
|
||||
<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<slot name="head"></slot>
|
||||
<slot></slot>
|
||||
<template v-for="(post, i) in _posts">
|
||||
<x-post :post="post" :key="post.id"/>
|
||||
<x-post :post="post" :key="post.id" @update:post="onPostUpdated(i, $event)"/>
|
||||
<p class="date" v-if="i != posts.length - 1 && post._date != _posts[i + 1]._date">
|
||||
<span>%fa:angle-up%{{ post._datetext }}</span>
|
||||
<span>%fa:angle-down%{{ _posts[i + 1]._datetext }}</span>
|
||||
|
|
@ -39,6 +39,11 @@ export default Vue.extend({
|
|||
return post;
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onPostUpdated(i, post) {
|
||||
Vue.set((this as any).posts, i, post);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<main v-if="!fetching">
|
||||
<a v-if="post.next" :href="post.next">%fa:angle-up%%i18n:mobile.tags.mk-post-page.next%</a>
|
||||
<div>
|
||||
<mk-post-detail :post="parent.post"/>
|
||||
<mk-post-detail :post="post"/>
|
||||
</div>
|
||||
<a v-if="post.prev" :href="post.prev">%fa:angle-down%%i18n:mobile.tags.mk-post-page.prev%</a>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@
|
|||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import age from 's-age';
|
||||
import * as age from 's-age';
|
||||
import Progress from '../../../common/scripts/loading';
|
||||
import XHome from './user/home.vue';
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue