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

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

* デザイン調整

* 🎨

Co-authored-by: syuilo <syuilotan@yahoo.co.jp>
This commit is contained in:
Xeltica 2020-06-04 22:06:38 +09:00 committed by GitHub
parent 83ec906ee7
commit 265d6bda15
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 61 additions and 19 deletions

View file

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

View file

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

View file

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