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

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

Browse source 
* 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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

1
packages/design-system/src/types/menu.ts
View file

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

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

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

2
packages/editor-ui/src/plugins/icons/index.ts
View file

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