diff options
| author | tamaina <tamaina@hotmail.co.jp> | 2022-07-14 23:31:01 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-07-14 23:31:01 +0900 |
| commit | de241319933eeb2601d9bf535d60a3c6e32cb8d6 (patch) | |
| tree | ca16812c7d4d0bcf4f4012ce8c23becded2ae701 /packages/client | |
| parent | Update CHANGELOG.md (diff) | |
| download | misskey-de241319933eeb2601d9bf535d60a3c6e32cb8d6.tar.gz misskey-de241319933eeb2601d9bf535d60a3c6e32cb8d6.tar.bz2 misskey-de241319933eeb2601d9bf535d60a3c6e32cb8d6.zip | |
use MkStickyContainer (#9000)
Diffstat (limited to 'packages/client')
| -rw-r--r-- | packages/client/src/directives/index.ts | 2 | ||||
| -rw-r--r-- | packages/client/src/directives/sticky-container.ts | 17 | ||||
| -rw-r--r-- | packages/client/src/pages/user/index.timeline.vue | 28 |
3 files changed, 14 insertions, 33 deletions
diff --git a/packages/client/src/directives/index.ts b/packages/client/src/directives/index.ts index fc9b6f86da..401a917cba 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 3cf813054b..0000000000 --- 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 a1329a7411..1bcc0a1b85 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> |