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>
<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>

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

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