mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -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" :key="item.id"
:item="item" :item="item"
:compact="collapsed" :compact="collapsed"
:popperClass="$style.submenuPopper"
:tooltipDelay="tooltipDelay" :tooltipDelay="tooltipDelay"
:mode="mode" :mode="mode"
:activeTab="activeTab" :activeTab="activeTab"
@ -30,7 +29,7 @@
/> />
</el-menu> </el-menu>
</div> </div>
<div :class="{[$style.lowerContent]: true, ['pb-xs']: $slots.menuSuffix }"> <div :class="[$style.lowerContent, 'pb-2xs']">
<el-menu <el-menu
:defaultActive="defaultActive" :defaultActive="defaultActive"
:collapse="collapsed" :collapse="collapsed"
@ -41,7 +40,6 @@
:key="item.id" :key="item.id"
:item="item" :item="item"
:compact="collapsed" :compact="collapsed"
:popperClass="$style.submenuPopper"
:tooltipDelay="tooltipDelay" :tooltipDelay="tooltipDelay"
:mode="mode" :mode="mode"
:activeTab="activeTab" :activeTab="activeTab"
@ -158,10 +156,6 @@ export default Vue.extend({
ul { ul {
padding-top: 0 !important; padding-top: 0 !important;
} }
.submenuPopper {
bottom: auto !important;
top: 0 !important;
}
} }
.lowerContent { .lowerContent {

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

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

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

@ -9,7 +9,7 @@
:class="{ ['clickable']: true, [$style.sideMenuCollapseButton]: true, [$style.expandedButton]: !isCollapsed }" :class="{ ['clickable']: true, [$style.sideMenuCollapseButton]: true, [$style.expandedButton]: !isCollapsed }"
@click="toggleCollapse"> @click="toggleCollapse">
</div> </div>
<n8n-menu :items="mainMenuItems" :collapsed="isCollapsed" @select="handleSelect"> <n8n-menu :items="mainMenuItems" :collapsed="isCollapsed" @select="handleSelect">
<template #header> <template #header>
<div :class="$style.logo"> <div :class="$style.logo">
<img :src="basePath + (isCollapsed ? 'n8n-logo-collapsed.svg' : 'n8n-logo-expanded.svg')" :class="$style.icon" alt="n8n"/> <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 { userHelpers } from './mixins/userHelpers';
import { pushConnection } from "@/components/mixins/pushConnection"; import { pushConnection } from "@/components/mixins/pushConnection";
import { IFakeDoor } from '@/Interface'; import { IFakeDoor } from '@/Interface';
import GiftNotificationIcon from './GiftNotificationIcon.vue';
import { IMenuItem } from 'n8n-design-system'; import { IMenuItem } from 'n8n-design-system';
import { BaseTextKey } from '@/plugins/i18n'; import { BaseTextKey } from '@/plugins/i18n';
@ -36,9 +35,6 @@ export default mixins(
pushConnection, pushConnection,
).extend({ ).extend({
name: 'SettingsSidebar', name: 'SettingsSidebar',
components: {
GiftNotificationIcon,
},
computed: { computed: {
...mapGetters('settings', ['versionCli']), ...mapGetters('settings', ['versionCli']),
settingsFakeDoorFeatures(): IFakeDoor[] { settingsFakeDoorFeatures(): IFakeDoor[] {