mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-11-09 22:24:05 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): fix bottom menu hover bug (#4349)

Browse source 
* fix menu bottom hover

* fix recrusion bug

* fix last item padding

* fix bottom padding

* remove unused class
This commit is contained in:
Mutasem Aldmour 2022-10-17 13:35:08 +02:00 committed by GitHub
parent b5c40e6294
commit 353a28bfe7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 56 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/design-system/src/components/N8nMenu/Menu.vue
View file

@ -22,7 +22,6 @@
:key="item.id"
:item="item"
:compact="collapsed"
:popperClass="$style.submenuPopper"
:tooltipDelay="tooltipDelay"
:mode="mode"
:activeTab="activeTab"
@ -30,7 +29,7 @@
/>
</el-menu>
</div>
<div :class="{[$style.lowerContent]: true, ['pb-xs']: $slots.menuSuffix }">
<div :class="[$style.lowerContent, 'pb-2xs']">
<el-menu
:defaultActive="defaultActive"
:collapse="collapsed"
@ -41,7 +40,6 @@
:key="item.id"
:item="item"
:compact="collapsed"
:popperClass="$style.submenuPopper"
:tooltipDelay="tooltipDelay"
:mode="mode"
:activeTab="activeTab"
@ -158,10 +156,6 @@ export default Vue.extend({
ul {
padding-top: 0 !important;
}
.submenuPopper {
bottom: auto !important;
top: 0 !important;
}
}
.lowerContent {

103
packages/design-system/src/components/N8nMenuItem/MenuItem.vue
View file

@ -1,54 +1,55 @@
<template>
<el-submenu
v-if="item.children && item.children.length > 0"
:id="item.id"
:class="{
[$style.submenu]: true,
[$style.item]: true,
[$style.compact]: compact,
[$style.active]: mode === 'router' && isItemActive(item)
}"
:index="item.id"
:popper-append-to-body="false"
:popper-class="`${$style.submenuPopper} ${popperClass}`"
>
<div :class="['n8n-menu-item', $style.item]">
<el-submenu
v-if="item.children && item.children.length > 0"
:id="item.id"
:class="{
[$style.submenu]: true,
[$style.compact]: compact,
[$style.active]: mode === 'router' && isItemActive(item)
}"
:index="item.id"
popper-append-to-body
:popper-class="`${$style.submenuPopper} ${popperClass}`"
>
<template slot="title">
<n8n-icon v-if="item.icon" :class="$style.icon" :icon="item.icon" :size="item.customIconSize || 'large'" />
<span :class="$style.label">{{ item.label }}</span>
</template>
<el-menu-item
v-for="child in availableChildren"
:key="child.id"
:id="child.id"
:class="{
[$style.menuItem]: true,
[$style.disableActiveStyle]: !isItemActive(child),
[$style.active]: isItemActive(child),
}"
:index="child.id"
@click="onItemClick(child)"
>
<n8n-icon v-if="child.icon" :class="$style.icon" :icon="child.icon" />
<span :class="$style.label">{{ child.label }}</span>
</el-menu-item>
</el-submenu>
<n8n-tooltip v-else placement="right" :content="item.label" :disabled="!compact" :open-delay="tooltipDelay">
<el-menu-item
:id="item.id"
:class="{
[$style.menuItem]: true,
[$style.item]: true,
[$style.disableActiveStyle]: !isItemActive(item),
[$style.active]: isItemActive(item),
[$style.compact]: compact
}"
:index="item.id"
@click="onItemClick(item)"
>
<n8n-icon v-if="item.icon" :class="$style.icon" :icon="item.icon" :size="item.customIconSize || 'large'" />
<span :class="$style.label">{{ item.label }}</span>
</el-menu-item>
</n8n-tooltip>
<el-menu-item
v-for="child in availableChildren"
:key="child.id"
:id="child.id"
:class="{
[$style.menuItem]: true,
[$style.disableActiveStyle]: !isItemActive(child),
[$style.active]: isItemActive(child),
}"
:index="child.id"
@click="onItemClick(child)"
>
<n8n-icon v-if="child.icon" :class="$style.icon" :icon="child.icon" />
<span :class="$style.label">{{ child.label }}</span>
</el-menu-item>
</el-submenu>
<n8n-tooltip v-else placement="right" :content="item.label" :disabled="!compact" :open-delay="tooltipDelay">
<el-menu-item
:id="item.id"
:class="{
[$style.menuItem]: true,
[$style.item]: true,
[$style.disableActiveStyle]: !isItemActive(item),
[$style.active]: isItemActive(item),
[$style.compact]: compact
}"
:index="item.id"
@click="onItemClick(item)"
>
<n8n-icon v-if="item.icon" :class="$style.icon" :icon="item.icon" :size="item.customIconSize || 'large'" />
<span :class="$style.label">{{ item.label }}</span>
</el-menu-item>
</n8n-tooltip>
</div>
</template>
<script lang="ts">
@ -155,6 +156,12 @@ export default Vue.extend({
.submenu {
background: none !important;
&.compact :global(.el-submenu__title) {
i {
display: none;
}
}
:global(.el-submenu__title) {
display: flex;
align-items: center;
@ -253,9 +260,6 @@ export default Vue.extend({
.submenuPopper {
display: block;
left: 40px !important;
bottom: 110px !important;
top: auto !important;
ul {
padding: 0 var(--spacing-xs) !important;
@ -263,6 +267,7 @@ export default Vue.extend({
.menuItem {
display: flex;
padding: var(--spacing-2xs) var(--spacing-xs) !important;
margin: var(--spacing-2xs) 0 !important;
}
.icon {

2
packages/editor-ui/src/components/MainSidebar.vue
View file

@ -9,7 +9,7 @@
:class="{ ['clickable']: true, [$style.sideMenuCollapseButton]: true, [$style.expandedButton]: !isCollapsed }"
@click="toggleCollapse">
</div>
<n8n-menu :items="mainMenuItems" :collapsed="isCollapsed" @select="handleSelect">
<n8n-menu :items="mainMenuItems" :collapsed="isCollapsed" @select="handleSelect">
<template #header>
<div :class="$style.logo">
<img :src="basePath + (isCollapsed ? 'n8n-logo-collapsed.svg' : 'n8n-logo-expanded.svg')" :class="$style.icon" alt="n8n"/>

4
packages/editor-ui/src/components/SettingsSidebar.vue
View file

@ -27,7 +27,6 @@ import { ABOUT_MODAL_KEY, VERSIONS_MODAL_KEY, VIEWS } from '@/constants';
import { userHelpers } from './mixins/userHelpers';
import { pushConnection } from "@/components/mixins/pushConnection";
import { IFakeDoor } from '@/Interface';
import GiftNotificationIcon from './GiftNotificationIcon.vue';
import { IMenuItem } from 'n8n-design-system';
import { BaseTextKey } from '@/plugins/i18n';
@ -36,9 +35,6 @@ export default mixins(
pushConnection,
).extend({
name: 'SettingsSidebar',
components: {
GiftNotificationIcon,
},
computed: {
...mapGetters('settings', ['versionCli']),
settingsFakeDoorFeatures(): IFakeDoor[] {