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

fix(editor): Update design system menu item component (#6659)

Browse source
This commit is contained in:
Csaba Tuncsik 2023-07-13 13:27:25 +02:00 committed by GitHub
parent e6a81f0008
commit 84466e9833
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 40 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
packages/design-system/src/components/N8nMenuItem/MenuItem.stories.ts
View file

@ -31,6 +31,33 @@ defaultMenuItem.args = {
},
};
export const withSecondaryIcon = template.bind({});
withSecondaryIcon.args = {
item: {
id: 'workflows',
icon: 'heart',
label: 'Workflows',
secondaryIcon: { name: 'lock', size: 'small' },
},
};
export const withSecondaryIconTooltip = template.bind({});
withSecondaryIconTooltip.args = {
item: {
id: 'workflows',
icon: 'heart',
label: 'Workflows',
secondaryIcon: {
name: 'lock',
size: 'small',
tooltip: {
content: 'Locked secret',
bindTo: 'secondaryIcon',
},
},
},
};
export const compact = template.bind({});
compact.args = {
item: {

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

@ -62,9 +62,9 @@
<n8n-tooltip
v-if="item.secondaryIcon"
:class="$style.secondaryIcon"
:placement="item.tooltip?.placement || 'right'"
:content="item.tooltip?.content"
:disabled="compact || !item.tooltip?.content || item.tooltip?.bindTo !== 'secondaryIcon'"
:placement="item.secondaryIcon?.tooltip?.placement || 'right'"
:content="item.secondaryIcon?.tooltip?.content"
:disabled="compact || !item.secondaryIcon?.tooltip?.content"
:open-delay="tooltipDelay"
>
<n8n-icon :icon="item.secondaryIcon.name" :size="item.secondaryIcon.size || 'small'" />

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

@ -4,7 +4,11 @@ export type IMenuItem = {
id: string;
label: string;
icon?: string;
secondaryIcon?: { name: string; size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' };
secondaryIcon?: {
name: string;
size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
tooltip?: Tooltip;
};
customIconSize?: 'medium' | 'small';
available?: boolean;
position?: 'top' | 'bottom';
@ -16,7 +20,6 @@ export type IMenuItem = {
// For more specific matching, we can use paths
activateOnRoutePaths?: string[];
children?: IMenuItem[];
tooltip?: Tooltip & { bindTo?: 'menuItem' | 'secondaryIcon' };
};
export type ILinkMenuItemProperties = {

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

@ -202,10 +202,11 @@ export default defineComponent({
};
if (this.sourceControlStore.preferences.branchReadOnly) {
workflows.secondaryIcon = { name: 'lock' };
workflows.tooltip = {
content: this.$locale.baseText('mainSidebar.workflows.readOnlyEnv.tooltip'),
bindTo: 'secondaryIcon',
workflows.secondaryIcon = {
name: 'lock',
tooltip: {
content: this.$locale.baseText('mainSidebar.workflows.readOnlyEnv.tooltip'),
},
};
}