This commit is contained in:
syuilo 2018-02-22 22:03:44 +09:00
parent 7816282318
commit bc632cefe5
11 changed files with 104 additions and 90 deletions

View file

@ -5,6 +5,7 @@ import signup from './signup.vue';
import forkit from './forkit.vue'; import forkit from './forkit.vue';
import nav from './nav.vue'; import nav from './nav.vue';
import postHtml from './post-html'; import postHtml from './post-html';
import poll from './poll.vue';
import pollEditor from './poll-editor.vue'; import pollEditor from './poll-editor.vue';
import reactionIcon from './reaction-icon.vue'; import reactionIcon from './reaction-icon.vue';
import reactionsViewer from './reactions-viewer.vue'; import reactionsViewer from './reactions-viewer.vue';
@ -25,6 +26,7 @@ Vue.component('mk-signup', signup);
Vue.component('mk-forkit', forkit); Vue.component('mk-forkit', forkit);
Vue.component('mk-nav', nav); Vue.component('mk-nav', nav);
Vue.component('mk-post-html', postHtml); Vue.component('mk-post-html', postHtml);
Vue.component('mk-poll', poll);
Vue.component('mk-poll-editor', pollEditor); Vue.component('mk-poll-editor', pollEditor);
Vue.component('mk-reaction-icon', reactionIcon); Vue.component('mk-reaction-icon', reactionIcon);
Vue.component('mk-reactions-viewer', reactionsViewer); Vue.component('mk-reactions-viewer', reactionsViewer);

View file

@ -1,11 +1,11 @@
<template> <template>
<div :data-is-voted="isVoted"> <div class="mk-poll" :data-is-voted="isVoted">
<ul> <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) : ''"> <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> <div class="backdrop" :style="{ 'width': (showResult ? (choice.votes / total * 100) : 0) + '%' }"></div>
<span> <span>
<template v-if="choice.is_voted">%fa:check%</template> <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 class="votes" v-if="showResult">({{ '%i18n:common.tags.mk-poll.vote-count%'.replace('{}', choice.votes) }})</span>
</span> </span>
</li> </li>
@ -19,100 +19,100 @@
</div> </div>
</template> </template>
<script lang="typescript"> <script lang="ts">
export default { import Vue from 'vue';
props: ['post'], export default Vue.extend({
data() { props: ['post'],
return { data() {
showResult: false return {
}; showResult: false
};
},
computed: {
poll(): any {
return this.post.poll;
}, },
computed: { total(): number {
poll() { return this.poll.choices.reduce((a, b) => a + b.votes, 0);
return this.post.poll;
},
total() {
return this.poll.choices.reduce((a, b) => a + b.votes, 0);
},
isVoted() {
return this.poll.choices.some(c => c.is_voted);
}
}, },
created() { isVoted(): boolean {
this.showResult = this.isVoted; return this.poll.choices.some(c => c.is_voted);
},
methods: {
toggleShowResult() {
this.showResult = !this.showResult;
},
vote(id) {
if (this.poll.choices.some(c => c.is_voted)) return;
(this as any).api('posts/polls/vote', {
post_id: this.post.id,
choice: id
}).then(() => {
this.poll.choices.forEach(c => {
if (c.id == id) {
c.votes++;
c.is_voted = true;
}
});
this.showResult = true;
});
}
} }
}; },
created() {
this.showResult = this.isVoted;
},
methods: {
toggleShowResult() {
this.showResult = !this.showResult;
},
vote(id) {
if (this.poll.choices.some(c => c.is_voted)) return;
(this as any).api('posts/polls/vote', {
post_id: this.post.id,
choice: id
}).then(() => {
this.poll.choices.forEach(c => {
if (c.id == id) {
c.votes++;
Vue.set(c, 'is_voted', true);
}
});
this.showResult = true;
});
}
}
});
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
:scope .mk-poll
> ul
display block display block
margin 0
padding 0
list-style none
> ul > li
display block display block
margin 0 margin 4px 0
padding 0 padding 4px 8px
list-style none width 100%
border solid 1px #eee
border-radius 4px
overflow hidden
cursor pointer
> li &:hover
display block background rgba(0, 0, 0, 0.05)
margin 4px 0
padding 4px 8px
width 100%
border solid 1px #eee
border-radius 4px
overflow hidden
cursor pointer
&:hover &:active
background rgba(0, 0, 0, 0.05) background rgba(0, 0, 0, 0.1)
&:active > .backdrop
background rgba(0, 0, 0, 0.1) position absolute
top 0
left 0
height 100%
background $theme-color
transition width 1s ease
> .backdrop > .votes
position absolute margin-left 4px
top 0
left 0
height 100%
background $theme-color
transition width 1s ease
> .votes > p
margin-left 4px a
color inherit
> p &[data-is-voted]
a > ul > li
color inherit cursor default
&[data-is-voted] &:hover
> ul > li background transparent
cursor default
&:hover &:active
background transparent background transparent
&:active
background transparent
</style> </style>

View file

@ -287,7 +287,7 @@ export default Vue.extend({
width calc(100% - 275px * 2) width calc(100% - 275px * 2)
order 2 order 2
> *:not(main) > *:not(.main)
width 275px width 275px
padding 16px 0 16px 0 padding 16px 0 16px 0
@ -303,7 +303,7 @@ export default Vue.extend({
order 3 order 3
@media (max-width 1100px) @media (max-width 1100px)
> *:not(main) > *:not(.main)
display none display none
> .main > .main

View file

@ -10,7 +10,7 @@
</a> </a>
<div class="text"> <div class="text">
<p> <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> <a :href="`/${notification.user.username}`" v-user-preview="notification.user.id">{{ notification.user.name }}</a>
</p> </p>
<a class="post-ref" :href="`/${notification.post.user.username}/${notification.post.id}`"> <a class="post-ref" :href="`/${notification.post.user.username}/${notification.post.id}`">

View file

@ -1,7 +1,7 @@
<template> <template>
<div class="mk-posts"> <div class="mk-posts">
<template v-for="(post, i) in _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"> <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-up%{{ post._datetext }}</span>
<span>%fa:angle-down%{{ _posts[i + 1]._datetext }}</span> <span>%fa:angle-down%{{ _posts[i + 1]._datetext }}</span>
@ -41,6 +41,9 @@ export default Vue.extend({
methods: { methods: {
focus() { focus() {
(this.$el as any).children[0].focus(); (this.$el as any).children[0].focus();
},
onPostUpdated(i, post) {
Vue.set((this as any).posts, i, post);
} }
} }
}); });

View file

@ -13,6 +13,7 @@ import userCard from './user-card.vue';
import postDetail from './post-detail.vue'; import postDetail from './post-detail.vue';
import followButton from './follow-button.vue'; import followButton from './follow-button.vue';
import friendsMaker from './friends-maker.vue'; import friendsMaker from './friends-maker.vue';
import notification from './notification.vue';
import notifications from './notifications.vue'; import notifications from './notifications.vue';
import notificationPreview from './notification-preview.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-post-detail', postDetail);
Vue.component('mk-follow-button', followButton); Vue.component('mk-follow-button', followButton);
Vue.component('mk-friends-maker', friendsMaker); Vue.component('mk-friends-maker', friendsMaker);
Vue.component('mk-notification', notification);
Vue.component('mk-notifications', notifications); Vue.component('mk-notifications', notifications);
Vue.component('mk-notification-preview', notificationPreview); Vue.component('mk-notification-preview', notificationPreview);

View file

@ -106,6 +106,7 @@ import Vue from 'vue';
import getPostSummary from '../../../../../common/get-post-summary'; import getPostSummary from '../../../../../common/get-post-summary';
export default Vue.extend({ export default Vue.extend({
props: ['notification'],
data() { data() {
return { return {
getPostSummary getPostSummary

View file

@ -10,7 +10,8 @@
</template> </template>
</div> </div>
<button class="more" v-if="moreNotifications" @click="fetchMoreNotifications" :disabled="fetchingMoreNotifications"> <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> </button>
<p class="empty" v-if="notifications.length == 0 && !fetching">%i18n:mobile.tags.mk-notifications.empty%</p> <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> <p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>

View file

@ -3,7 +3,7 @@
<slot name="head"></slot> <slot name="head"></slot>
<slot></slot> <slot></slot>
<template v-for="(post, i) in _posts"> <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"> <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-up%{{ post._datetext }}</span>
<span>%fa:angle-down%{{ _posts[i + 1]._datetext }}</span> <span>%fa:angle-down%{{ _posts[i + 1]._datetext }}</span>
@ -39,6 +39,11 @@ export default Vue.extend({
return post; return post;
}); });
} }
},
methods: {
onPostUpdated(i, post) {
Vue.set((this as any).posts, i, post);
}
} }
}); });
</script> </script>

View file

@ -4,7 +4,7 @@
<main v-if="!fetching"> <main v-if="!fetching">
<a v-if="post.next" :href="post.next">%fa:angle-up%%i18n:mobile.tags.mk-post-page.next%</a> <a v-if="post.next" :href="post.next">%fa:angle-up%%i18n:mobile.tags.mk-post-page.next%</a>
<div> <div>
<mk-post-detail :post="parent.post"/> <mk-post-detail :post="post"/>
</div> </div>
<a v-if="post.prev" :href="post.prev">%fa:angle-down%%i18n:mobile.tags.mk-post-page.prev%</a> <a v-if="post.prev" :href="post.prev">%fa:angle-down%%i18n:mobile.tags.mk-post-page.prev%</a>
</main> </main>

View file

@ -58,7 +58,7 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import age from 's-age'; import * as age from 's-age';
import Progress from '../../../common/scripts/loading'; import Progress from '../../../common/scripts/loading';
import XHome from './user/home.vue'; import XHome from './user/home.vue';