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

fix(frontend): 子メニューの最大長調整が行われていない問題を修正

This commit is contained in:
kakkokari-gtyih 2024-06-15 16:35:29 +09:00
parent 34458d767b
commit ea58bf7a53
1 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/frontend/src/components/MkMenu.child.vue
View File

@ -5,12 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<div ref="el" :class="$style.root"> <div ref="el" :class="$style.root">
<MkMenu :items="items" :align="align" :width="width" :asDrawer="false" @close="onChildClosed"/> <MkMenu :items="items" :align="align" :width="width" :maxHeight="maxHeight" :asDrawer="false" @close="onChildClosed"/>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { nextTick, onMounted, onUnmounted, shallowRef, watch } from 'vue'; import { nextTick, onMounted, onUnmounted, shallowRef, ref, watch } from 'vue';
import MkMenu from './MkMenu.vue'; import MkMenu from './MkMenu.vue';
import { MenuItem } from '@/types/menu.js'; import { MenuItem } from '@/types/menu.js';
@ -29,6 +29,7 @@ const emit = defineEmits<{
const el = shallowRef<HTMLElement>(); const el = shallowRef<HTMLElement>();
const align = 'left'; const align = 'left';
const maxHeight = ref<number | undefined>(undefined);
const SCROLLBAR_THICKNESS = 16; const SCROLLBAR_THICKNESS = 16;
@ -40,6 +41,9 @@ function setPosition() {
let left = props.targetElement.offsetWidth; let left = props.targetElement.offsetWidth;
let top = (parentRect.top - rootRect.top) - 8; let top = (parentRect.top - rootRect.top) - 8;
maxHeight.value = window.innerHeight - rootRect.top - SCROLLBAR_THICKNESS;
if (rootRect.left + left + myRect.width >= (window.innerWidth - SCROLLBAR_THICKNESS)) { if (rootRect.left + left + myRect.width >= (window.innerWidth - SCROLLBAR_THICKNESS)) {
left = -myRect.width; left = -myRect.width;
} }