From 2759fa5891bc7bf851afb9781eb786fdcb9aa2c2 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Thu, 14 Jul 2022 23:31:01 +0900
Subject: [PATCH] use MkStickyContainer (#9000)

---
 packages/client/src/directives/index.ts       |  2 --
 .../client/src/directives/sticky-container.ts | 17 -----------
 .../client/src/pages/user/index.timeline.vue  | 28 +++++++++----------
 3 files changed, 14 insertions(+), 33 deletions(-)
 delete mode 100644 packages/client/src/directives/sticky-container.ts

diff --git a/packages/client/src/directives/index.ts b/packages/client/src/directives/index.ts
index fc9b6f86d..401a917cb 100644
--- a/packages/client/src/directives/index.ts
+++ b/packages/client/src/directives/index.ts
@@ -8,7 +8,6 @@ import tooltip from './tooltip';
 import hotkey from './hotkey';
 import appear from './appear';
 import anim from './anim';
-import stickyContainer from './sticky-container';
 import clickAnime from './click-anime';
 import panel from './panel';
 import adaptiveBorder from './adaptive-border';
@@ -24,7 +23,6 @@ export default function(app: App) {
 	app.directive('appear', appear);
 	app.directive('anim', anim);
 	app.directive('click-anime', clickAnime);
-	app.directive('sticky-container', stickyContainer);
 	app.directive('panel', panel);
 	app.directive('adaptive-border', adaptiveBorder);
 }
diff --git a/packages/client/src/directives/sticky-container.ts b/packages/client/src/directives/sticky-container.ts
deleted file mode 100644
index 3cf813054..000000000
--- a/packages/client/src/directives/sticky-container.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Directive } from 'vue';
-
-export default {
-	mounted(src, binding, vn) {
-		//const query = binding.value;
-
-		const header = src.children[0];
-		const body = src.children[1];
-		const currentStickyTop = getComputedStyle(src).getPropertyValue('--stickyTop') || '0px';
-		src.style.setProperty('--stickyTop', `calc(${currentStickyTop} + ${header.offsetHeight}px)`);
-		if (body) body.dataset.stickyContainerHeaderHeight = header.offsetHeight.toString();
-		header.style.setProperty('--stickyTop', currentStickyTop);
-		header.style.position = 'sticky';
-		header.style.top = 'var(--stickyTop)';
-		header.style.zIndex = '1';
-	},
-} as Directive;
diff --git a/packages/client/src/pages/user/index.timeline.vue b/packages/client/src/pages/user/index.timeline.vue
index a1329a741..1bcc0a1b8 100644
--- a/packages/client/src/pages/user/index.timeline.vue
+++ b/packages/client/src/pages/user/index.timeline.vue
@@ -1,12 +1,14 @@
 <template>
-<div v-sticky-container class="yrzkoczt">
-	<MkTab v-model="include" class="tab">
-		<option :value="null">{{ $ts.notes }}</option>
-		<option value="replies">{{ $ts.notesAndReplies }}</option>
-		<option value="files">{{ $ts.withFiles }}</option>
-	</MkTab>
+<MkStickyContainer>
+	<template #header>
+		<MkTab v-model="include" :class="$style.tab">
+			<option :value="null">{{ $ts.notes }}</option>
+			<option value="replies">{{ $ts.notesAndReplies }}</option>
+			<option value="files">{{ $ts.withFiles }}</option>
+		</MkTab>
+	</template>
 	<XNotes :no-gap="true" :pagination="pagination"/>
-</div>
+</MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
@@ -33,12 +35,10 @@ const pagination = {
 };
 </script>
 
-<style lang="scss" scoped>
-.yrzkoczt {
-	> .tab {
-		margin: calc(var(--margin) / 2) 0;
-		padding: calc(var(--margin) / 2) 0;
-		background: var(--bg);
-	}
+<style lang="scss" module>
+.tab {
+	margin: calc(var(--margin) / 2) 0;
+	padding: calc(var(--margin) / 2) 0;
+	background: var(--bg);
 }
 </style>