[Client] Improve cw-button
This commit is contained in:
		
							parent
							
								
									b2dedf7f98
								
							
						
					
					
						commit
						596f92cfcc
					
				
					 10 changed files with 34 additions and 9 deletions
				
			
		| 
						 | 
				
			
			@ -322,6 +322,8 @@ common/views/components/theme.vue:
 | 
			
		|||
common/views/components/cw-button.vue:
 | 
			
		||||
  hide: "隠す"
 | 
			
		||||
  show: "もっと見る"
 | 
			
		||||
  chars: "{count}文字"
 | 
			
		||||
  files: "{count}ファイル"
 | 
			
		||||
 | 
			
		||||
common/views/components/messaging.vue:
 | 
			
		||||
  search-user: "ユーザーを探す"
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,21 +1,36 @@
 | 
			
		|||
<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>
 | 
			
		||||
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
import Vue from 'vue';
 | 
			
		||||
import i18n from '../../../i18n';
 | 
			
		||||
import { length } from 'stringz';
 | 
			
		||||
 | 
			
		||||
export default Vue.extend({
 | 
			
		||||
	i18n: i18n('common/views/components/cw-button.vue'),
 | 
			
		||||
 | 
			
		||||
	props: {
 | 
			
		||||
		value: {
 | 
			
		||||
			type: Boolean,
 | 
			
		||||
			required: true
 | 
			
		||||
		},
 | 
			
		||||
		note: {
 | 
			
		||||
			type: Object,
 | 
			
		||||
			required: true
 | 
			
		||||
		}
 | 
			
		||||
	},
 | 
			
		||||
 | 
			
		||||
	methods: {
 | 
			
		||||
		length,
 | 
			
		||||
 | 
			
		||||
		toggle() {
 | 
			
		||||
			this.$emit('input', !this.value);
 | 
			
		||||
		}
 | 
			
		||||
| 
						 | 
				
			
			@ -37,4 +52,12 @@ export default Vue.extend({
 | 
			
		|||
	&:hover
 | 
			
		||||
		background var(--cwButtonHoverBg)
 | 
			
		||||
 | 
			
		||||
	> span
 | 
			
		||||
		margin-left 4px
 | 
			
		||||
 | 
			
		||||
		&:before
 | 
			
		||||
			content '('
 | 
			
		||||
		&:after
 | 
			
		||||
			content ')'
 | 
			
		||||
 | 
			
		||||
</style>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -42,7 +42,7 @@
 | 
			
		|||
		<div class="body">
 | 
			
		||||
			<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" />
 | 
			
		||||
				<mk-cw-button v-model="showContent"/>
 | 
			
		||||
				<mk-cw-button v-model="showContent" :note="appearNote"/>
 | 
			
		||||
			</p>
 | 
			
		||||
			<div class="content" v-show="appearNote.cw == null || showContent">
 | 
			
		||||
				<div class="text">
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -6,7 +6,7 @@
 | 
			
		|||
		<div class="body">
 | 
			
		||||
			<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" />
 | 
			
		||||
				<mk-cw-button v-model="showContent"/>
 | 
			
		||||
				<mk-cw-button v-model="showContent" :note="note"/>
 | 
			
		||||
			</p>
 | 
			
		||||
			<div class="content" v-show="note.cw == null || showContent">
 | 
			
		||||
				<mk-sub-note-content class="text" :note="note"/>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -6,7 +6,7 @@
 | 
			
		|||
		<div class="body">
 | 
			
		||||
			<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" />
 | 
			
		||||
				<mk-cw-button v-model="showContent"/>
 | 
			
		||||
				<mk-cw-button v-model="showContent" :note="note"/>
 | 
			
		||||
			</p>
 | 
			
		||||
			<div class="content" v-show="note.cw == null || showContent">
 | 
			
		||||
				<mk-sub-note-content class="text" :note="note"/>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -21,7 +21,7 @@
 | 
			
		|||
			<div class="body" v-if="appearNote.deletedAt == null">
 | 
			
		||||
				<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" />
 | 
			
		||||
					<mk-cw-button v-model="showContent"/>
 | 
			
		||||
					<mk-cw-button v-model="showContent" :note="appearNote"/>
 | 
			
		||||
				</p>
 | 
			
		||||
				<div class="content" v-show="appearNote.cw == null || showContent">
 | 
			
		||||
					<div class="text">
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -27,7 +27,7 @@
 | 
			
		|||
		<div class="body">
 | 
			
		||||
			<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" />
 | 
			
		||||
				<mk-cw-button v-model="showContent"/>
 | 
			
		||||
				<mk-cw-button v-model="showContent" :note="appearNote"/>
 | 
			
		||||
			</p>
 | 
			
		||||
			<div class="content" v-show="appearNote.cw == null || showContent">
 | 
			
		||||
				<div class="text">
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -6,7 +6,7 @@
 | 
			
		|||
		<div class="body">
 | 
			
		||||
			<p v-if="note.cw != null" class="cw">
 | 
			
		||||
				<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>
 | 
			
		||||
			<div class="content" v-show="note.cw == null || showContent">
 | 
			
		||||
				<mk-sub-note-content class="text" :note="note"/>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -6,7 +6,7 @@
 | 
			
		|||
		<div class="body">
 | 
			
		||||
			<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" />
 | 
			
		||||
				<mk-cw-button v-model="showContent"/>
 | 
			
		||||
				<mk-cw-button v-model="showContent" :note="note"/>
 | 
			
		||||
			</p>
 | 
			
		||||
			<div class="content" v-show="note.cw == null || showContent">
 | 
			
		||||
				<mk-sub-note-content class="text" :note="note"/>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -17,7 +17,7 @@
 | 
			
		|||
			<div class="body" v-if="appearNote.deletedAt == null">
 | 
			
		||||
				<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" />
 | 
			
		||||
					<mk-cw-button v-model="showContent"/>
 | 
			
		||||
					<mk-cw-button v-model="showContent" :note="appearNote"/>
 | 
			
		||||
				</p>
 | 
			
		||||
				<div class="content" v-show="appearNote.cw == null || showContent">
 | 
			
		||||
					<div class="text">
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue