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

* fix(editor): Add secondary icon to menu items * empty
n8n-io · Jun 2, 2023 · 3dd2601 · 3dd2601
1 parent f88029f
commit 3dd2601
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 0 deletions.
diff --git a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
@@ -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 {

diff --git a/packages/design-system/src/types/menu.ts b/packages/design-system/src/types/menu.ts
@@ -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';

diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
@@ -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],

diff --git a/packages/editor-ui/src/plugins/icons/index.ts b/packages/editor-ui/src/plugins/icons/index.ts
@@ -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);