From 265d6bda155696c23b3e932fb220871297758ba6 Mon Sep 17 00:00:00 2001
From: Xeltica <7106976+Xeltica@users.noreply.github.com>
Date: Thu, 4 Jun 2020 22:06:38 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=AD=E3=83=BC=E3=82=AB=E3=83=AB=E3=81=AE?=
=?UTF-8?q?=E3=81=BF=E3=83=9C=E3=82=BF=E3=83=B3=E3=82=92=E5=85=AC=E9=96=8B?=
=?UTF-8?q?=E7=AF=84=E5=9B=B2=E3=83=94=E3=83=83=E3=82=AB=E3=83=BC=E3=81=AB?=
=?UTF-8?q?=E7=B5=B1=E5=90=88=20(#6428)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* ローカルのみを公開範囲ピッカーに統合
* デザイン調整
* :art:
Co-authored-by: syuilo <syuilotan@yahoo.co.jp>
---
locales/ja-JP.yml | 1 +
src/client/components/post-form.vue | 20 +++----
src/client/components/visibility-chooser.vue | 59 +++++++++++++++++---
3 files changed, 61 insertions(+), 19 deletions(-)
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index c97aad482e..7748023790 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -687,6 +687,7 @@ _visibility:
specified: "ダイレクト"
specifiedDescription: "指定したユーザーのみに公開"
localOnly: "ローカルのみ"
+ localOnlyDescription: "リモートユーザーには非公開"
_postForm:
replyPlaceholder: "このノートに返信..."
diff --git a/src/client/components/post-form.vue b/src/client/components/post-form.vue
index ee6148a355..07f6f0b5d6 100644
--- a/src/client/components/post-form.vue
+++ b/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;
});
},
@@ -628,15 +630,9 @@ export default Vue.extend({
margin-left: 0 !important;
}
}
-
- > .localOnly {
- height: 34px;
- width: 34px;
+
+ .local-only {
margin: 0 8px;
-
- &.active {
- color: var(--accent);
- }
}
> .submit {
diff --git a/src/client/components/visibility-chooser.vue b/src/client/components/visibility-chooser.vue
index 0f7e37a088..75368cd60d 100644
--- a/src/client/components/visibility-chooser.vue
+++ b/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>