mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-08 15:03:14 +00:00
137c6f8a75
# Pull Request Template ## Description This PR adds smart positioning to prevent context menu and submenu from overflowing screen boundaries. The context menu and its submenu now dynamically adjust their position when there isn't enough space. Fixes https://linear.app/chatwoot/issue/CW-3936/assign-to-agent-ui-element-is-drawn-off-canvas https://github.com/chatwoot/chatwoot/issues/10727 ## Type of change - [x] Bug fix (non-breaking change which fixes an issue) ## How Has This Been Tested? **Loom video** **Before** https://www.loom.com/share/6c267dde103c4f2281ed5b4d006a43b1?sid=047966f5-d6d3-4de6-ade8-270141e6e215 **After** https://www.loom.com/share/5599c6061bb74c3ea527dd06960d3189?sid=ffb01149-bb7a-449e-b0ec-02cc191f472b ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [x] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules
72 lines
2.0 KiB
Vue
72 lines
2.0 KiB
Vue
<script setup>
|
|
import { computed, useTemplateRef } from 'vue';
|
|
import { useWindowSize, useElementBounding } from '@vueuse/core';
|
|
|
|
defineProps({
|
|
option: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
subMenuAvailable: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
});
|
|
|
|
const menuRef = useTemplateRef('menuRef');
|
|
const { width: windowWidth, height: windowHeight } = useWindowSize();
|
|
const { bottom, right } = useElementBounding(menuRef);
|
|
|
|
// Vertical position
|
|
const verticalPosition = computed(() => {
|
|
const SUBMENU_HEIGHT = 240; // 15rem in pixels
|
|
const spaceBelow = windowHeight.value - bottom.value;
|
|
return spaceBelow < SUBMENU_HEIGHT ? 'bottom-0' : 'top-0';
|
|
});
|
|
|
|
// Horizontal position
|
|
const horizontalPosition = computed(() => {
|
|
const SUBMENU_WIDTH = 240;
|
|
const spaceRight = windowWidth.value - right.value;
|
|
return spaceRight < SUBMENU_WIDTH ? 'right-full' : 'left-full';
|
|
});
|
|
|
|
const submenuPosition = computed(() => [
|
|
verticalPosition.value,
|
|
horizontalPosition.value,
|
|
]);
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
ref="menuRef"
|
|
class="text-slate-800 dark:text-slate-100 menu-with-submenu min-width-calc w-full p-1 flex items-center h-7 rounded-md relative bg-n-alpha-3/50 backdrop-blur-[100px] justify-between hover:bg-n-brand/10 cursor-pointer dark:hover:bg-n-solid-3"
|
|
:class="!subMenuAvailable ? 'opacity-50 cursor-not-allowed' : ''"
|
|
>
|
|
<div class="flex items-center h-4">
|
|
<fluent-icon :icon="option.icon" size="14" class="menu-icon" />
|
|
<p class="my-0 mx-2 text-xs">{{ option.label }}</p>
|
|
</div>
|
|
<fluent-icon icon="chevron-right" size="12" />
|
|
<div
|
|
v-if="subMenuAvailable"
|
|
class="submenu bg-n-alpha-3 backdrop-blur-[100px] p-1 shadow-lg rounded-md absolute hidden max-h-[15rem] overflow-y-auto overflow-x-hidden cursor-pointer"
|
|
:class="submenuPosition"
|
|
>
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.menu-with-submenu {
|
|
min-width: calc(6.25rem * 2);
|
|
|
|
&:hover {
|
|
.submenu {
|
|
@apply block;
|
|
}
|
|
}
|
|
}
|
|
</style>
|