fix(editor): Add secondary icon to menu items (#6351)

* fix(editor): Add secondary icon to menu items

* empty
This commit is contained in:
Csaba Tuncsik 2023-06-02 12:00:05 +02:00 committed by GitHub
parent f88029f308
commit 3dd260168e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 23 additions and 0 deletions

View file

@ -36,6 +36,9 @@
>
<n8n-icon v-if="child.icon" :class="$style.icon" :icon="child.icon" />
<span :class="$style.label">{{ child.label }}</span>
<span v-if="child.secondaryIcon" :class="$style.secondaryIcon">
<n8n-icon :icon="child.secondaryIcon.name" :size="child.secondaryIcon.size || 'small'" />
</span>
</el-menu-item>
</el-submenu>
<n8n-tooltip
@ -65,6 +68,9 @@
:size="item.customIconSize || 'large'"
/>
<span :class="$style.label">{{ item.label }}</span>
<span v-if="item.secondaryIcon" :class="$style.secondaryIcon">
<n8n-icon :icon="item.secondaryIcon.name" :size="item.secondaryIcon.size || 'small'" />
</span>
</el-menu-item>
</n8n-tooltip>
</div>
@ -264,6 +270,7 @@ export default defineComponent({
padding: var(--spacing-2xs) var(--spacing-xs) !important;
margin: 0 !important;
border-radius: var(--border-radius-base) !important;
overflow: hidden;
}
.icon {
@ -272,6 +279,13 @@ export default defineComponent({
text-align: center;
}
.secondaryIcon {
display: flex;
align-items: center;
justify-content: flex-end;
flex: 1;
}
.label {
overflow: hidden;
text-overflow: ellipsis;
@ -294,6 +308,9 @@ export default defineComponent({
.label {
display: none;
}
.secondaryIcon {
display: none;
}
}
.submenuPopper {

View file

@ -2,6 +2,7 @@ export type IMenuItem = {
id: string;
label: string;
icon?: string;
secondaryIcon?: { name: string; size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' };
customIconSize?: 'medium' | 'small';
available?: boolean;
position?: 'top' | 'bottom';

View file

@ -216,6 +216,9 @@ export default defineComponent({
{
id: 'workflows',
icon: 'network-wired',
secondaryIcon: this.versionControlStore.preferences.branchReadOnly
? { name: 'lock' }
: undefined,
label: this.$locale.baseText('mainSidebar.workflows'),
position: 'top',
activateOnRouteNames: [VIEWS.WORKFLOWS],

View file

@ -81,6 +81,7 @@ import {
faLink,
faList,
faLightbulb,
faLock,
faMapSigns,
faMousePointer,
faNetworkWired,
@ -219,6 +220,7 @@ addIcon(faKey);
addIcon(faLink);
addIcon(faList);
addIcon(faLightbulb);
addIcon(faLock);
addIcon(faMapSigns);
addIcon(faMousePointer);
addIcon(faNetworkWired);