ローカルのみボタンを公開範囲ピッカーに統合 (#6428)

* ローカルのみを公開範囲ピッカーに統合

* デザイン調整

* 🎨

Co-authored-by: syuilo <syuilotan@yahoo.co.jp>

locales/ja-JP.yml

@@ -687,6 +687,7 @@ _visibility:
   specified: "ダイレクト"
   specifiedDescription: "指定したユーザーのみに公開"
   localOnly: "ローカルのみ"
+  localOnlyDescription: "リモートユーザーには非公開"
 
 _postForm:
   replyPlaceholder: "このノートに返信..."

src/client/components/post-form.vue

@@ -8,6 +8,7 @@
 	<header>
 		<button v-if="!fixed" class="cancel _button" @click="cancel"><fa :icon="faTimes"/></button>
 		<div>
+			<span class="local-only" v-if="localOnly" v-text="$t('_visibility.localOnly')" />
 			<span class="text-count" :class="{ over: trimmedLength(text) > max }">{{ max - trimmedLength(text) }}</span>
 			<button class="_button visibility" @click="setVisibility" ref="visibilityButton" v-tooltip="$t('visibility')">
 				<span v-if="visibility === 'public'"><fa :icon="faGlobe"/></span>
@@ -15,7 +16,6 @@
 				<span v-if="visibility === 'followers'"><fa :icon="faUnlock"/></span>
 				<span v-if="visibility === 'specified'"><fa :icon="faEnvelope"/></span>
 			</button>
-			<button class="_button localOnly" v-if="visibility !== 'specified'" @click="localOnly = !localOnly" :class="{ active: localOnly }" v-tooltip="$t('_visibility.localOnly')"><fa :icon="faBiohazard"/></button>
 			<button class="submit _buttonPrimary" :disabled="!canPost" @click="post">{{ submitText }}<fa :icon="reply ? faReply : renote ? faQuoteRight : faPaperPlane"/></button>
 		</div>
 	</header>
@@ -397,10 +397,12 @@ export default Vue.extend({
 		setVisibility() {
 			const w = this.$root.new(MkVisibilityChooser, {
 				source: this.$refs.visibilityButton,
-				currentVisibility: this.visibility
+				currentVisibility: this.visibility,
+				currentLocalOnly: this.localOnly
 			});
-			w.$once('chosen', v => {
-				this.applyVisibility(v);
+			w.$once('chosen', ({ visibility, localOnly }) => {
+				this.applyVisibility(visibility);
+				this.localOnly = localOnly;
 			});
 		},
 
@@ -629,14 +631,8 @@ export default Vue.extend({
 				}
 			}
 			
-			> .localOnly {
-				height: 34px;
-				width: 34px;
+			.local-only {
 				margin: 0 8px;
-
-				&.active {
-					color: var(--accent);
-				}
 			}
 
 			> .submit {

src/client/components/visibility-chooser.vue

@@ -1,5 +1,5 @@
 <template>
-<x-popup :source="source" ref="popup" @closed="() => { $emit('closed'); destroyDom(); }">
+<x-popup :source="source" ref="popup" @closed="closed">
 	<div class="gqyayizv">
 		<button class="_button" @click="choose('public')" :class="{ active: v == 'public' }" data-index="1" key="public">
 			<div><fa :icon="faGlobe"/></div>
@@ -22,20 +22,29 @@
 				<span>{{ $t('_visibility.followersDescription') }}</span>
 			</div>
 		</button>
-		<button class="_button" @click="choose('specified')" :class="{ active: v == 'specified' }" data-index="4" key="specified">
+		<button :disabled="localOnly" class="_button" @click="choose('specified')" :class="{ active: v == 'specified' }" data-index="4" key="specified">
 			<div><fa :icon="faEnvelope"/></div>
 			<div>
 				<span>{{ $t('_visibility.specified') }}</span>
 				<span>{{ $t('_visibility.specifiedDescription') }}</span>
 			</div>
 		</button>
+		<div class="divider"></div>
+		<button class="_button localOnly" @click="localOnly = !localOnly" :class="{ active: localOnly }" data-index="5" key="localOnly">
+			<div><fa :icon="faBiohazard"/></div>
+			<div>
+				<span>{{ $t('_visibility.localOnly') }}</span>
+				<span>{{ $t('_visibility.localOnlyDescription') }}</span>
+			</div>
+			<div><fa :icon="localOnly ? faToggleOn : faToggleOff"/></div>
+		</button>
 	</div>
 </x-popup>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import { faGlobe, faUnlock, faHome } from '@fortawesome/free-solid-svg-icons';
+import { faGlobe, faUnlock, faHome, faBiohazard, faToggleOn, faToggleOff } from '@fortawesome/free-solid-svg-icons';
 import { faEnvelope } from '@fortawesome/free-regular-svg-icons';
 import XPopup from './popup.vue';
 
@@ -50,12 +59,17 @@ export default Vue.extend({
 		currentVisibility: {
 			type: String,
 			required: false
+		},
+		currentLocalOnly: {
+			type: Boolean,
+			required: false
 		}
 	},
 	data() {
 		return {
 			v: this.$store.state.settings.rememberNoteVisibility ? this.$store.state.deviceUser.visibility : (this.currentVisibility || this.$store.state.settings.defaultNoteVisibility),
-			faGlobe, faUnlock, faEnvelope, faHome
+			localOnly: this.currentLocalOnly,
+			faGlobe, faUnlock, faEnvelope, faHome, faBiohazard, faToggleOn, faToggleOff
 		}
 	},
 	methods: {
@@ -63,9 +77,15 @@ export default Vue.extend({
 			if (this.$store.state.settings.rememberNoteVisibility) {
 				this.$store.commit('deviceUser/setVisibility', visibility);
 			}
-			this.$emit('chosen', visibility);
+			this.$emit('chosen', { visibility, localOnly: this.localOnly });
 			this.destroyDom();
 		},
+		closed() {
+			this.$emit('closed');
+			// localOnly フラグの更新の為に chosen イベントも呼ぶ
+			this.choose(this.v);
+			this.destroyDom();
+		}
 	}
 });
 </script>
@@ -75,6 +95,11 @@ export default Vue.extend({
 	width: 240px;
 	padding: 8px 0;
 
+	> .divider {
+		margin: 8px 0;
+		border-top: solid 1px var(--divider);
+	}
+
 	> button {
 		display: flex;
 		padding: 8px 14px;
@@ -96,7 +121,12 @@ export default Vue.extend({
 			background: var(--accent);
 		}
 
-		> *:first-child {
+		&.localOnly.active {
+			color: var(--accent);
+			background: inherit;
+		}
+
+		> *:nth-child(1) {
 			display: flex;
 			justify-content: center;
 			align-items: center;
@@ -108,8 +138,11 @@ export default Vue.extend({
 			margin-bottom: auto;
 		}
 
-		> *:last-child {
+		> *:nth-child(2) {
 			flex: 1 1 auto;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
 
 			> span:first-child {
 				display: block;
@@ -120,6 +153,18 @@ export default Vue.extend({
 				opacity: 0.6;
 			}
 		}
+
+		> *:nth-child(3) {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			margin-left: 10px;
+			width: 16px;
+			top: 0;
+			bottom: 0;
+			margin-top: auto;
+			margin-bottom: auto;
+		}
 	}
 }
 </style>