mirror of
https://github.com/hotomoe/hotomoe
synced 2024-12-05 10:18:09 +09:00
Refactor
This commit is contained in:
parent
93f13ffc8e
commit
5e54751bd4
@ -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
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -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
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user