mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-01-11 12:57:29 -08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix(editor): Minor styling improvements in project settings page (#12405)
Some checks are pending
Test Master / install-and-build (push) Waiting to run
Details
Test Master / Unit tests (18.x) (push) Blocked by required conditions
Details
Test Master / Unit tests (20.x) (push) Blocked by required conditions
Details
Test Master / Unit tests (22.4) (push) Blocked by required conditions
Details
Test Master / Lint (push) Blocked by required conditions
Details
Test Master / Notify Slack on failure (push) Blocked by required conditions
Details

Browse source
This commit is contained in:
Milorad FIlipović 2024-12-30 15:52:09 +01:00 committed by GitHub
parent 1674dd0f88
commit 09ddce0580
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 33 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
packages/editor-ui/src/components/Projects/ProjectHeader.vue
View file

@ -107,16 +107,18 @@ const onSelect = (action: string) => {
<template> <template>
<div> <div>
<div :class="[$style.projectHeader]"> <div :class="[$style.projectHeader]">
<ProjectIcon :icon="headerIcon" size="medium" /> <div :class="[$style.projectDetails]">
<div> <ProjectIcon :icon="headerIcon" :border-less="true" size="medium" />
<N8nHeading bold tag="h2" size="xlarge">{{ projectName }}</N8nHeading> <div>
<N8nText color="text-light"> <N8nHeading bold tag="h2" size="xlarge">{{ projectName }}</N8nHeading>
<slot name="subtitle"> <N8nText color="text-light">
<span v-if="!projectsStore.currentProject">{{ <slot name="subtitle">
i18n.baseText('projects.header.subtitle') <span v-if="!projectsStore.currentProject">{{
}}</span> i18n.baseText('projects.header.subtitle')
</slot> }}</span>
</N8nText> </slot>
</N8nText>
</div>
</div> </div>
<div v-if="route.name !== VIEWS.PROJECT_SETTINGS" :class="[$style.headerActions]"> <div v-if="route.name !== VIEWS.PROJECT_SETTINGS" :class="[$style.headerActions]">
<N8nTooltip <N8nTooltip
@ -148,25 +150,17 @@ const onSelect = (action: string) => {
.projectHeader { .projectHeader {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; justify-content: space-between;
padding-bottom: var(--spacing-m); padding-bottom: var(--spacing-m);
min-height: 64px; min-height: var(--spacing-3xl);
} }
.headerActions { .projectDetails {
margin-left: auto; display: flex;
} align-items: center;
.icon {
border: 1px solid var(--color-foreground-light);
padding: 6px;
border-radius: var(--border-radius-base);
} }
.actions { .actions {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: var(--spacing-2xs) 0 var(--spacing-l); padding: var(--spacing-2xs) 0 var(--spacing-l);
} }
</style> </style>

20
packages/editor-ui/src/components/Projects/ProjectIcon.vue
View file

@ -5,15 +5,23 @@ type Props = {
icon: ProjectIcon; icon: ProjectIcon;
size?: 'small' | 'medium' | 'large'; size?: 'small' | 'medium' | 'large';
round?: boolean; round?: boolean;
borderLess?: boolean;
}; };
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
size: 'medium', size: 'medium',
round: false, round: false,
borderLess: false,
}); });
</script> </script>
<template> <template>
<div :class="[$style.container, $style[props.size], { [$style.round]: props.round }]"> <div
:class="[
$style.container,
$style[props.size],
{ [$style.round]: props.round, [$style.borderless]: props.borderLess },
]"
>
<N8nIcon <N8nIcon
v-if="props.icon.type === 'icon'" v-if="props.icon.type === 'icon'"
:icon="props.icon.value" :icon="props.icon.value"
@ -36,10 +44,14 @@ const props = withDefaults(defineProps<Props>(), {
&.round { &.round {
border-radius: 50%; border-radius: 50%;
} }
&.borderless {
border: none;
}
} }
.small { .small {
width: var(--spacing-l); min-width: var(--spacing-l);
height: var(--spacing-l); height: var(--spacing-l);
.emoji { .emoji {
@ -48,7 +60,7 @@ const props = withDefaults(defineProps<Props>(), {
} }
.medium { .medium {
width: var(--spacing-xl); min-width: var(--spacing-xl);
height: var(--spacing-xl); height: var(--spacing-xl);
.emoji { .emoji {
@ -58,7 +70,7 @@ const props = withDefaults(defineProps<Props>(), {
.large { .large {
// Making this in line with user avatar size // Making this in line with user avatar size
width: 40px; min-width: 40px;
height: 40px; height: 40px;
.emoji { .emoji {