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

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

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