SWREI/switched
0
0
Fork 0
Code

Refactor

Browse Source
This commit is contained in:
syuilo 2018-11-25 04:26:07 +09:00
parent 93f13ffc8e
commit 5e54751bd4
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
2 changed files with 16 additions and 181 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
src/client/app/desktop/views/components/note-detail.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="mk-note-detail" :title="title"> <div class="mk-note-detail" :title="title" tabindex="-1">
<button <button
class="read-more" class="read-more"
v-if="appearNote.reply && appearNote.reply.replyId && conversation.length == 0" v-if="appearNote.reply && appearNote.reply.replyId && conversation.length == 0"
@ -63,18 +63,18 @@
<footer> <footer>
<span class="app" v-if="note.app && $store.state.settings.showVia">via <b>{{ note.app.name }}</b></span> <span class="app" v-if="note.app && $store.state.settings.showVia">via <b>{{ note.app.name }}</b></span>
<mk-reactions-viewer :note="appearNote"/> <mk-reactions-viewer :note="appearNote"/>
<button class="replyButton" @click="reply" :title="$t('reply')"> <button class="replyButton" @click="reply()" :title="$t('reply')">
<template v-if="appearNote.reply"><fa icon="reply-all"/></template> <template v-if="appearNote.reply"><fa icon="reply-all"/></template>
<template v-else><fa icon="reply"/></template> <template v-else><fa icon="reply"/></template>
<p class="count" v-if="appearNote.repliesCount > 0">{{ appearNote.repliesCount }}</p> <p class="count" v-if="appearNote.repliesCount > 0">{{ appearNote.repliesCount }}</p>
</button> </button>
<button class="renoteButton" @click="renote" :title="$t('renote')"> <button class="renoteButton" @click="renote()" :title="$t('renote')">
<fa icon="retweet"/><p class="count" v-if="appearNote.renoteCount > 0">{{ appearNote.renoteCount }}</p> <fa icon="retweet"/><p class="count" v-if="appearNote.renoteCount > 0">{{ appearNote.renoteCount }}</p>
</button> </button>
<button class="reactionButton" :class="{ reacted: appearNote.myReaction != null }" @click="react" ref="reactButton" :title="$t('add-reaction')"> <button class="reactionButton" :class="{ reacted: appearNote.myReaction != null }" @click="react()" ref="reactButton" :title="$t('add-reaction')">
<fa icon="plus"/><p class="count" v-if="appearNote.reactions_count > 0">{{ appearNote.reactions_count }}</p> <fa icon="plus"/><p class="count" v-if="appearNote.reactions_count > 0">{{ appearNote.reactions_count }}</p>
</button> </button>
<button @click="menu" ref="menuButton"> <button @click="menu()" ref="menuButton">
<fa icon="ellipsis-h"/> <fa icon="ellipsis-h"/>
</button> </button>
</footer> </footer>
@ -88,23 +88,18 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import i18n from '../../../i18n'; import i18n from '../../../i18n';
import parse from '../../../../../mfm/parse';
import MkPostFormWindow from './post-form-window.vue';
import MkRenoteFormWindow from './renote-form-window.vue';
import MkNoteMenu from '../../../common/views/components/note-menu.vue';
import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
import XSub from './note.sub.vue'; import XSub from './note.sub.vue';
import { sum, unique } from '../../../../../prelude/array';
import noteSubscriber from '../../../common/scripts/note-subscriber'; import noteSubscriber from '../../../common/scripts/note-subscriber';
import noteMixin from '../../../common/scripts/note-mixin';
export default Vue.extend({ export default Vue.extend({
i18n: i18n('desktop/views/components/note-detail.vue'), i18n: i18n('desktop/views/components/note-detail.vue'),
components: { components: {
XSub XSub
}, },
mixins: [noteSubscriber('note')], mixins: [noteMixin(), noteSubscriber('note')],
props: { props: {
note: { note: {
@ -118,47 +113,12 @@ export default Vue.extend({
data() { data() {
return { return {
showContent: false,
conversation: [], conversation: [],
conversationFetching: false, conversationFetching: false,
replies: [] replies: []
}; };
}, },
computed: {
isRenote(): boolean {
return (this.note.renote &&
this.note.text == null &&
this.note.fileIds.length == 0 &&
this.note.poll == null);
},
appearNote(): any {
return this.isRenote ? this.note.renote : this.note;
},
reactionsCount(): number {
return this.appearNote.reactionCounts
? sum(Object.values(this.appearNote.reactionCounts))
: 0;
},
title(): string {
return new Date(this.appearNote.createdAt).toLocaleString();
},
urls(): string[] {
if (this.appearNote.text) {
const ast = parse(this.appearNote.text);
return unique(ast
.filter(t => ((t.name == 'url' || t.name == 'link') && t.props.url && !t.silent))
.map(t => t.props.url));
} else {
return null;
}
}
},
mounted() { mounted() {
// Get replies // Get replies
if (!this.compact) { if (!this.compact) {
@ -169,24 +129,6 @@ export default Vue.extend({
this.replies = replies; this.replies = replies;
}); });
} }
// Draw map
if (this.appearNote.geo) {
const shouldShowMap = this.$store.getters.isSignedIn ? this.$store.state.settings.showMaps : true;
if (shouldShowMap) {
this.$root.os.getGoogleMaps().then(maps => {
const uluru = new maps.LatLng(this.appearNote.geo.coordinates[1], this.appearNote.geo.coordinates[0]);
const map = new maps.Map(this.$refs.map, {
center: uluru,
zoom: 15
});
new maps.Marker({
position: uluru,
map: map
});
});
}
}
}, },
methods: { methods: {
@ -200,32 +142,6 @@ export default Vue.extend({
this.conversationFetching = false; this.conversationFetching = false;
this.conversation = conversation.reverse(); this.conversation = conversation.reverse();
}); });
},
reply() {
this.$root.new(MkPostFormWindow, {
reply: this.appearNote
});
},
renote() {
this.$root.new(MkRenoteFormWindow, {
note: this.appearNote
});
},
react() {
this.$root.new(MkReactionPicker, {
source: this.$refs.reactButton,
note: this.appearNote
});
},
menu() {
this.$root.new(MkNoteMenu, {
source: this.$refs.menuButton,
note: this.appearNote
});
} }
} }
}); });

97
src/client/app/mobile/views/components/note-detail.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="mk-note-detail"> <div class="mk-note-detail" tabindex="-1">
<button <button
class="more" class="more"
v-if="appearNote.reply && appearNote.reply.replyId && conversation.length == 0" v-if="appearNote.reply && appearNote.reply.replyId && conversation.length == 0"
@ -61,18 +61,18 @@
</div> </div>
<footer> <footer>
<mk-reactions-viewer :note="appearNote"/> <mk-reactions-viewer :note="appearNote"/>
<button @click="reply" :title="$t('title')"> <button @click="reply()" :title="$t('title')">
<template v-if="appearNote.reply"><fa icon="reply-all"/></template> <template v-if="appearNote.reply"><fa icon="reply-all"/></template>
<template v-else><fa icon="reply"/></template> <template v-else><fa icon="reply"/></template>
<p class="count" v-if="appearNote.repliesCount > 0">{{ appearNote.repliesCount }}</p> <p class="count" v-if="appearNote.repliesCount > 0">{{ appearNote.repliesCount }}</p>
</button> </button>
<button @click="renote" title="Renote"> <button @click="renote()" title="Renote">
<fa icon="retweet"/><p class="count" v-if="appearNote.renoteCount > 0">{{ appearNote.renoteCount }}</p> <fa icon="retweet"/><p class="count" v-if="appearNote.renoteCount > 0">{{ appearNote.renoteCount }}</p>
</button> </button>
<button :class="{ reacted: appearNote.myReaction != null }" @click="react" ref="reactButton" :title="$t('title')"> <button :class="{ reacted: appearNote.myReaction != null }" @click="react()" ref="reactButton" :title="$t('title')">
<fa icon="plus"/><p class="count" v-if="appearNote.reactions_count > 0">{{ appearNote.reactions_count }}</p> <fa icon="plus"/><p class="count" v-if="appearNote.reactions_count > 0">{{ appearNote.reactions_count }}</p>
</button> </button>
<button @click="menu" ref="menuButton"> <button @click="menu()" ref="menuButton">
<fa icon="ellipsis-h"/> <fa icon="ellipsis-h"/>
</button> </button>
</footer> </footer>
@ -86,21 +86,18 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import i18n from '../../../i18n'; import i18n from '../../../i18n';
import parse from '../../../../../mfm/parse';
import MkNoteMenu from '../../../common/views/components/note-menu.vue';
import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
import XSub from './note.sub.vue'; import XSub from './note.sub.vue';
import { sum, unique } from '../../../../../prelude/array';
import noteSubscriber from '../../../common/scripts/note-subscriber'; import noteSubscriber from '../../../common/scripts/note-subscriber';
import noteMixin from '../../../common/scripts/note-mixin';
export default Vue.extend({ export default Vue.extend({
i18n: i18n('mobile/views/components/note-detail.vue'), i18n: i18n('mobile/views/components/note-detail.vue'),
components: { components: {
XSub XSub
}, },
mixins: [noteSubscriber('note')], mixins: [noteMixin(), noteSubscriber('note')],
props: { props: {
note: { note: {
@ -114,43 +111,12 @@ export default Vue.extend({
data() { data() {
return { return {
showContent: false,
conversation: [], conversation: [],
conversationFetching: false, conversationFetching: false,
replies: [] replies: []
}; };
}, },
computed: {
isRenote(): boolean {
return (this.note.renote &&
this.note.text == null &&
this.note.fileIds.length == 0 &&
this.note.poll == null);
},
appearNote(): any {
return this.isRenote ? this.note.renote : this.note;
},
reactionsCount(): number {
return this.appearNote.reactionCounts
? sum(Object.values(this.appearNote.reactionCounts))
: 0;
},
urls(): string[] {
if (this.appearNote.text) {
const ast = parse(this.appearNote.text);
return unique(ast
.filter(t => ((t.name == 'url' || t.name == 'link') && t.props.url && !t.silent))
.map(t => t.props.url));
} else {
return null;
}
}
},
mounted() { mounted() {
// Get replies // Get replies
if (!this.compact) { if (!this.compact) {
@ -161,24 +127,6 @@ export default Vue.extend({
this.replies = replies; this.replies = replies;
}); });
} }
// Draw map
if (this.appearNote.geo) {
const shouldShowMap = this.$store.getters.isSignedIn ? this.$store.state.settings.showMaps : true;
if (shouldShowMap) {
this.$root.os.getGoogleMaps().then(maps => {
const uluru = new maps.LatLng(this.appearNote.geo.coordinates[1], this.appearNote.geo.coordinates[0]);
const map = new maps.Map(this.$refs.map, {
center: uluru,
zoom: 15
});
new maps.Marker({
position: uluru,
map: map
});
});
}
}
}, },
methods: { methods: {
@ -192,35 +140,6 @@ export default Vue.extend({
this.conversationFetching = false; this.conversationFetching = false;
this.conversation = conversation.reverse(); this.conversation = conversation.reverse();
}); });
},
reply() {
this.$post({
reply: this.appearNote
});
},
renote() {
this.$post({
renote: this.appearNote
});
},
react() {
this.$root.new(MkReactionPicker, {
source: this.$refs.reactButton,
note: this.appearNote,
compact: true,
big: true
});
},
menu() {
this.$root.new(MkNoteMenu, {
source: this.$refs.menuButton,
note: this.appearNote,
compact: true
});
} }
} }
}); });