mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-11-15 00:54:06 -08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Refine UI for TestItem and TestsList components in WorkflowEvaluation

Browse source 
• Adjust padding and cursor for TestItem
• Update button sizes and spacing
• Modify TestItem title styling
• Remove size and type from TestsList button
This commit is contained in:
Oleg Ivaniv 2024-11-12 16:42:54 +01:00
parent 44b8fab493
commit 4155ae8d5a
No known key found for this signature in database
2 changed files with 6 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/editor-ui/src/components/WorkflowEvaluation/ListEvaluation/TestItem.vue
View file

@ -71,7 +71,7 @@ const actions = [
:is="n8nIconButton" :is="n8nIconButton"
:icon="action.icon" :icon="action.icon"
type="tertiary" type="tertiary"
size="small" size="mini"
@click.stop="action.event" @click.stop="action.event"
/> />
</n8n-tooltip> </n8n-tooltip>
@ -83,10 +83,11 @@ const actions = [
.testItem { .testItem {
display: flex; display: flex;
align-items: center; align-items: center;
padding: var(--spacing-s) var(--spacing-m); padding: var(--spacing-s) var(--spacing-s) var(--spacing-s) var(--spacing-xl);
border: 1px solid var(--color-foreground-base); border: 1px solid var(--color-foreground-base);
border-radius: var(--border-radius-base); border-radius: var(--border-radius-base);
background-color: var(--color-background-light); background-color: var(--color-background-light);
cursor: pointer;
&:hover { &:hover {
background-color: var(--color-background-base); background-color: var(--color-background-base);
@ -105,6 +106,7 @@ const actions = [
gap: var(--spacing-2xs); gap: var(--spacing-2xs);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
margin-bottom: var(--spacing-4xs); margin-bottom: var(--spacing-4xs);
font-size: var(--font-size-s);
} }
.testCases { .testCases {
@ -129,7 +131,7 @@ const actions = [
.actions { .actions {
display: flex; display: flex;
gap: var(--spacing-s); gap: var(--spacing-xs);
--color-button-secondary-font: var(--color-callout-info-icon); --color-button-secondary-font: var(--color-callout-info-icon);
} }
</style> </style>

7
packages/editor-ui/src/components/WorkflowEvaluation/ListEvaluation/TestsList.vue
View file

@ -11,12 +11,7 @@ defineProps<TestListProps>();
<template> <template>
<div :class="$style.testsList"> <div :class="$style.testsList">
<div :class="$style.testsHeader"> <div :class="$style.testsHeader">
<n8n-button <n8n-button label="Create new test" @click="$emit('create-test')" />
size="small"
type="tertiary"
label="Create new test"
@click="$emit('create-test')"
/>
</div> </div>
<TestItem v-for="test in tests" :key="test.id" :test="test" v-bind="$attrs" /> <TestItem v-for="test in tests" :key="test.id" :test="test" v-bind="$attrs" />
</div> </div>