This commit is contained in:
syuilo
2020-09-12 18:24:18 +09:00
parent 7d994ee1b1
commit 4c07cf74ef
2 changed files with 56 additions and 71 deletions

View File

@@ -1,58 +1,52 @@
<template>
<XModal :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>
<div>
<span>{{ $t('_visibility.public') }}</span>
<span>{{ $t('_visibility.publicDescription') }}</span>
</div>
</button>
<button class="_button" @click="choose('home')" :class="{ active: v == 'home' }" data-index="2" key="home">
<div><fa :icon="faHome"/></div>
<div>
<span>{{ $t('_visibility.home') }}</span>
<span>{{ $t('_visibility.homeDescription') }}</span>
</div>
</button>
<button class="_button" @click="choose('followers')" :class="{ active: v == 'followers' }" data-index="3" key="followers">
<div><fa :icon="faUnlock"/></div>
<div>
<span>{{ $t('_visibility.followers') }}</span>
<span>{{ $t('_visibility.followersDescription') }}</span>
</div>
</button>
<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>
</XModal>
<div class="gqyayizv">
<button class="_button" @click="choose('public')" :class="{ active: v == 'public' }" data-index="1" key="public">
<div><fa :icon="faGlobe"/></div>
<div>
<span>{{ $t('_visibility.public') }}</span>
<span>{{ $t('_visibility.publicDescription') }}</span>
</div>
</button>
<button class="_button" @click="choose('home')" :class="{ active: v == 'home' }" data-index="2" key="home">
<div><fa :icon="faHome"/></div>
<div>
<span>{{ $t('_visibility.home') }}</span>
<span>{{ $t('_visibility.homeDescription') }}</span>
</div>
</button>
<button class="_button" @click="choose('followers')" :class="{ active: v == 'followers' }" data-index="3" key="followers">
<div><fa :icon="faUnlock"/></div>
<div>
<span>{{ $t('_visibility.followers') }}</span>
<span>{{ $t('_visibility.followersDescription') }}</span>
</div>
</button>
<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>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { faGlobe, faUnlock, faHome, faBiohazard, faToggleOn, faToggleOff } from '@fortawesome/free-solid-svg-icons';
import { faEnvelope } from '@fortawesome/free-regular-svg-icons';
import XModal from './modal.vue';
import * as os from '@/os';
export default defineComponent({
components: {
XModal
},
emits: ['done'],
props: {
source: {
required: true
@@ -78,15 +72,8 @@ export default defineComponent({
if (this.$store.state.settings.rememberNoteVisibility) {
this.$store.commit('deviceUser/setVisibility', visibility);
}
this.$emit('chosen', { visibility, localOnly: this.localOnly });
this.destroyDom();
this.$emit('done', { visibility, localOnly: this.localOnly });
},
closed() {
this.$emit('closed');
// localOnly フラグの更新の為に chosen イベントも呼ぶ
this.choose(this.v);
this.destroyDom();
}
}
});
</script>