[Client] Improve cw-button

This commit is contained in:
syuilo 2018-12-08 10:36:26 +09:00
parent b2dedf7f98
commit 596f92cfcc
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
10 changed files with 34 additions and 9 deletions

View File

@ -322,6 +322,8 @@ common/views/components/theme.vue:
common/views/components/cw-button.vue: common/views/components/cw-button.vue:
hide: "隠す" hide: "隠す"
show: "もっと見る" show: "もっと見る"
chars: "{count}文字"
files: "{count}ファイル"
common/views/components/messaging.vue: common/views/components/messaging.vue:
search-user: "ユーザーを探す" search-user: "ユーザーを探す"

View File

@ -1,21 +1,36 @@
<template> <template>
<button class="nrvgflfuaxwgkxoynpnumyookecqrrvh" @click="toggle">{{ value ? this.$t('hide') : this.$t('show') }}</button> <button class="nrvgflfuaxwgkxoynpnumyookecqrrvh" @click="toggle">
<b>{{ value ? this.$t('hide') : this.$t('show') }}</b>
<span v-if="!value">
<span v-if="note.text">{{ this.$t('chars', { count: length(note.text) }) | number }}</span>
<span v-if="note.text && note.files && note.files.length > 0"> / </span>
<span v-if="note.files && note.files.length > 0">{{ this.$t('files', { count: note.files.length }) }}</span>
</span>
</button>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import i18n from '../../../i18n'; import i18n from '../../../i18n';
import { length } from 'stringz';
export default Vue.extend({ export default Vue.extend({
i18n: i18n('common/views/components/cw-button.vue'), i18n: i18n('common/views/components/cw-button.vue'),
props: { props: {
value: { value: {
type: Boolean, type: Boolean,
required: true required: true
},
note: {
type: Object,
required: true
} }
}, },
methods: { methods: {
length,
toggle() { toggle() {
this.$emit('input', !this.value); this.$emit('input', !this.value);
} }
@ -37,4 +52,12 @@ export default Vue.extend({
&:hover &:hover
background var(--cwButtonHoverBg) background var(--cwButtonHoverBg)
> span
margin-left 4px
&:before
content '('
&:after
content ')'
</style> </style>

View File

@ -42,7 +42,7 @@
<div class="body"> <div class="body">
<p v-if="appearNote.cw != null" class="cw"> <p v-if="appearNote.cw != null" class="cw">
<misskey-flavored-markdown v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis" /> <misskey-flavored-markdown v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis" />
<mk-cw-button v-model="showContent"/> <mk-cw-button v-model="showContent" :note="appearNote"/>
</p> </p>
<div class="content" v-show="appearNote.cw == null || showContent"> <div class="content" v-show="appearNote.cw == null || showContent">
<div class="text"> <div class="text">

View File

@ -6,7 +6,7 @@
<div class="body"> <div class="body">
<p v-if="note.cw != null" class="cw"> <p v-if="note.cw != null" class="cw">
<misskey-flavored-markdown v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$store.state.i" :custom-emojis="note.emojis" /> <misskey-flavored-markdown v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$store.state.i" :custom-emojis="note.emojis" />
<mk-cw-button v-model="showContent"/> <mk-cw-button v-model="showContent" :note="note"/>
</p> </p>
<div class="content" v-show="note.cw == null || showContent"> <div class="content" v-show="note.cw == null || showContent">
<mk-sub-note-content class="text" :note="note"/> <mk-sub-note-content class="text" :note="note"/>

View File

@ -6,7 +6,7 @@
<div class="body"> <div class="body">
<p v-if="note.cw != null" class="cw"> <p v-if="note.cw != null" class="cw">
<misskey-flavored-markdown v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$store.state.i" :custom-emojis="note.emojis" /> <misskey-flavored-markdown v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$store.state.i" :custom-emojis="note.emojis" />
<mk-cw-button v-model="showContent"/> <mk-cw-button v-model="showContent" :note="note"/>
</p> </p>
<div class="content" v-show="note.cw == null || showContent"> <div class="content" v-show="note.cw == null || showContent">
<mk-sub-note-content class="text" :note="note"/> <mk-sub-note-content class="text" :note="note"/>

View File

@ -21,7 +21,7 @@
<div class="body" v-if="appearNote.deletedAt == null"> <div class="body" v-if="appearNote.deletedAt == null">
<p v-if="appearNote.cw != null" class="cw"> <p v-if="appearNote.cw != null" class="cw">
<misskey-flavored-markdown v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis" /> <misskey-flavored-markdown v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis" />
<mk-cw-button v-model="showContent"/> <mk-cw-button v-model="showContent" :note="appearNote"/>
</p> </p>
<div class="content" v-show="appearNote.cw == null || showContent"> <div class="content" v-show="appearNote.cw == null || showContent">
<div class="text"> <div class="text">

View File

@ -27,7 +27,7 @@
<div class="body"> <div class="body">
<p v-if="appearNote.cw != null" class="cw"> <p v-if="appearNote.cw != null" class="cw">
<misskey-flavored-markdown v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis" /> <misskey-flavored-markdown v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis" />
<mk-cw-button v-model="showContent"/> <mk-cw-button v-model="showContent" :note="appearNote"/>
</p> </p>
<div class="content" v-show="appearNote.cw == null || showContent"> <div class="content" v-show="appearNote.cw == null || showContent">
<div class="text"> <div class="text">

View File

@ -6,7 +6,7 @@
<div class="body"> <div class="body">
<p v-if="note.cw != null" class="cw"> <p v-if="note.cw != null" class="cw">
<span class="text" v-if="note.cw != ''">{{ note.cw }}</span> <span class="text" v-if="note.cw != ''">{{ note.cw }}</span>
<mk-cw-button v-model="showContent"/> <mk-cw-button v-model="showContent" :note="note"/>
</p> </p>
<div class="content" v-show="note.cw == null || showContent"> <div class="content" v-show="note.cw == null || showContent">
<mk-sub-note-content class="text" :note="note"/> <mk-sub-note-content class="text" :note="note"/>

View File

@ -6,7 +6,7 @@
<div class="body"> <div class="body">
<p v-if="note.cw != null" class="cw"> <p v-if="note.cw != null" class="cw">
<misskey-flavored-markdown v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$store.state.i" :custom-emojis="note.emojis" /> <misskey-flavored-markdown v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$store.state.i" :custom-emojis="note.emojis" />
<mk-cw-button v-model="showContent"/> <mk-cw-button v-model="showContent" :note="note"/>
</p> </p>
<div class="content" v-show="note.cw == null || showContent"> <div class="content" v-show="note.cw == null || showContent">
<mk-sub-note-content class="text" :note="note"/> <mk-sub-note-content class="text" :note="note"/>

View File

@ -17,7 +17,7 @@
<div class="body" v-if="appearNote.deletedAt == null"> <div class="body" v-if="appearNote.deletedAt == null">
<p v-if="appearNote.cw != null" class="cw"> <p v-if="appearNote.cw != null" class="cw">
<misskey-flavored-markdown v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis" /> <misskey-flavored-markdown v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis" />
<mk-cw-button v-model="showContent"/> <mk-cw-button v-model="showContent" :note="appearNote"/>
</p> </p>
<div class="content" v-show="appearNote.cw == null || showContent"> <div class="content" v-show="appearNote.cw == null || showContent">
<div class="text"> <div class="text">