github
/
halo
mirror of https://github.com/halo-dev/halo
1
0
Fork 0
Code Issues Releases Wiki Activity

fix: toolbar menu being obscured after overflowing (#5930) 

#### What type of PR is this?

/kind bug
/area editor
/milestone 2.16.x

#### What this PR does / why we need it:

当工具栏菜单出现溢出时，由于 `justify-content` 会始终保持居中状态，因此会导致溢出的内容被遮挡。

考虑到 [justify-content:safe](https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-content#safe) 在 safari 上具有兼容性问题，因此修改 HTML 结构，使用 `text-align` 来使菜单居中。

#### How to test it?

测试在菜单栏溢出时，溢出的内容是否被遮挡。

#### Which issue(s) this PR fixes:

Fixes #5926 

#### Does this PR introduce a user-facing change?
```release-note
解决默认编辑器中顶部工具栏菜单溢出后被遮挡的问题
```
pull/5956/head
Takagi 2024-05-20 16:54:42 +08:00 committed by GitHub
parent 2a7900cca9
commit c5d63b1a8f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 40 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
ui/packages/editor/src/components/EditorHeader.vue
View File

@ -59,9 +59,9 @@ function getToolboxItemsFromExtensions() {
</script> </script>
<template> <template>
<div <div
class="editor-header flex items-center py-1 space-x-1 justify-start px-1 overflow-auto sm:!justify-center border-b drop-shadow-sm bg-white" class="editor-header py-1 space-x-1 px-1 overflow-auto border-b drop-shadow-sm bg-white text-center"
> >
<div class="inline-flex items-center justify-center"> <div class="h-full inline-flex items-center">
<VMenu> <VMenu>
<button class="p-1.5 rounded-md hover:bg-gray-100" tabindex="-1"> <button class="p-1.5 rounded-md hover:bg-gray-100" tabindex="-1">
<MdiPlusCircle class="text-[#4CCBA0]" /> <MdiPlusCircle class="text-[#4CCBA0]" />
@ -80,47 +80,46 @@ function getToolboxItemsFromExtensions() {
</div> </div>
</template> </template>
</VMenu> </VMenu>
</div> <div class="h-5 bg-gray-100 w-[1px] !mx-1"></div>
<div class="h-5 bg-gray-100 w-[1px] !mx-1"></div> <div
<div v-for="(item, index) in getToolbarItemsFromExtensions()"
v-for="(item, index) in getToolbarItemsFromExtensions()" :key="index"
:key="index" >
class="inline-flex items-center justify-center" <component
> :is="item.component"
<component v-if="!item.children?.length"
:is="item.component" v-bind="item.props"
v-if="!item.children?.length"
v-bind="item.props"
tabindex="-1"
/>
<template v-else>
<VDropdown
class="inline-flex"
tabindex="-1" tabindex="-1"
:triggers="['click']" />
:popper-triggers="['click']" <template v-else>
> <VDropdown
<component class="inline-flex"
:is="item.component"
v-bind="item.props"
:children="item.children"
tabindex="-1" tabindex="-1"
/> :triggers="['click']"
<template #popper> :popper-triggers="['click']"
<div >
class="relative rounded-md bg-white overflow-hidden drop-shadow w-56 p-1 max-h-96 overflow-y-auto space-y-1.5" <component
> :is="item.component"
<component v-bind="item.props"
v-bind="child.props" :children="item.children"
:is="child.component" tabindex="-1"
v-for="(child, childIndex) in item.children" />
:key="childIndex" <template #popper>
tabindex="-1" <div
/> class="relative rounded-md bg-white overflow-hidden drop-shadow w-56 p-1 max-h-96 overflow-y-auto space-y-1.5"
</div> >
</template> <component
</VDropdown> v-bind="child.props"
</template> :is="child.component"
v-for="(child, childIndex) in item.children"
:key="childIndex"
tabindex="-1"
/>
</div>
</template>
</VDropdown>
</template>
</div>
</div> </div>
</div> </div>
</template> </template>