usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

wip

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
src/client/components/visibility-chooser.vue
View File

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

32
src/client/directives/user-preview.ts
View File

@ -2,48 +2,46 @@ import { Directive } from 'vue';
import MkUserPreview from '@/components/user-preview.vue'; import MkUserPreview from '@/components/user-preview.vue';
export default { export default {
// modal側でcontentのmouseoverイベントなどを発行してもらう必要がありそう
/*
mounted(el: HTMLElement, binding, vn) { mounted(el: HTMLElement, binding, vn) {
// TODO: 新たにプロパティを作るのをやめMapを使う // TODO: 新たにプロパティを作るのをやめMapを使う
// ただメモリ的には↓の方が省メモリかもしれないので検討中 // ただメモリ的には↓の方が省メモリかもしれないので検討中
const self = (el as any)._userPreviewDirective_ = {} as any; const self = (el as any)._userPreviewDirective_ = {} as any;
self.user = binding.value; self.user = binding.value;
self.tag = null; self.close = null;
self.showTimer = null; self.showTimer = null;
self.hideTimer = null; self.hideTimer = null;
self.checkTimer = null; self.checkTimer = null;
self.close = () => { self.close = () => {
if (self.tag) { if (self.close) {
clearInterval(self.checkTimer); clearInterval(self.checkTimer);
self.tag.close(); self.close.close();
self.tag = null; self.close = null;
} }
}; };
const show = () => { const show = () => {
if (!document.body.contains(el)) return; if (!document.body.contains(el)) return;
if (self.tag) return; if (self.close) return;
self.tag = new MkUserPreview({ self.close = os.popup(MkUserPreview, {
parent: vn.context, user: self.user,
propsData: { }, null, {
user: self.user, source: el
source: el });
}
}).$mount();
self.tag.$on('mouseover', () => { self.close.$on('mouseover', () => {
clearTimeout(self.hideTimer); clearTimeout(self.hideTimer);
}); });
self.tag.$on('mouseleave', () => { self.close.$on('mouseleave', () => {
clearTimeout(self.showTimer); clearTimeout(self.showTimer);
self.hideTimer = setTimeout(self.close, 500); self.hideTimer = setTimeout(self.close, 500);
}); });
document.body.appendChild(self.tag.$el);
self.checkTimer = setInterval(() => { self.checkTimer = setInterval(() => {
if (!document.body.contains(el)) { if (!document.body.contains(el)) {
clearTimeout(self.showTimer); clearTimeout(self.showTimer);
@ -74,5 +72,5 @@ export default {
unmounted(el, binding, vn) { unmounted(el, binding, vn) {
const self = el._userPreviewDirective_; const self = el._userPreviewDirective_;
clearInterval(self.checkTimer); clearInterval(self.checkTimer);
} }*/
} as Directive; } as Directive;