wip

src/client/components/visibility-chooser.vue

@@ -1,5 +1,4 @@
 <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>
@@ -39,20 +38,15 @@
 		<div><fa :icon="localOnly ? faToggleOn : faToggleOff"/></div>
 	</button>
 </div>
-</XModal>
 </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>

src/client/directives/user-preview.ts

@@ -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: {
+			self.close = os.popup(MkUserPreview, {
 				user: self.user,
+			}, null, {
 				source: el
-				}
-			}).$mount();
+			});
 
-			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;