mirror of
https://github.com/n8n-io/n8n.git
synced 2024-11-14 00:24:07 -08:00
Design feedback + fix e2e tests
This commit is contained in:
Oleg Ivaniv
parent
d460c9292a
commit
860c59778e
|
|
@ -269,6 +269,7 @@ function adjustHeight(event: Event) {
|
|||
background: var(--chat--input--background, white);
|
||||
color: var(--chat--input--text-color, initial);
|
||||
outline: none;
|
||||
line-height: var(--chat--input--line-height, 1.5);
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ body {
|
|||
4. Prevent font size adjustment after orientation changes (IE, iOS)
|
||||
5. Prevent overflow from long words (all)
|
||||
*/
|
||||
font-size: 125%; /* 2 */
|
||||
font-size: 110%; /* 2 */
|
||||
line-height: 1.6; /* 3 */
|
||||
-webkit-text-size-adjust: 100%; /* 4 */
|
||||
word-break: break-word; /* 5 */
|
||||
|
|
@ -596,7 +596,7 @@ body {
|
|||
|
||||
pre code {
|
||||
display: block;
|
||||
padding: 0.3em 0.7em;
|
||||
padding: 0 0 0.5rem 0.5rem;
|
||||
word-break: normal;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -100,12 +100,14 @@ watch(defaultLocale, (newLocale) => {
|
|||
<router-view name="sidebar"></router-view>
|
||||
</div>
|
||||
<div id="content" :class="$style.content">
|
||||
<router-view v-slot="{ Component }">
|
||||
<keep-alive v-if="$route.meta.keepWorkflowAlive" include="NodeViewSwitcher" :max="1">
|
||||
<component :is="Component" />
|
||||
</keep-alive>
|
||||
<component :is="Component" v-else />
|
||||
</router-view>
|
||||
<div :class="$style.contentWrapper">
|
||||
<router-view v-slot="{ Component }">
|
||||
<keep-alive v-if="$route.meta.keepWorkflowAlive" include="NodeViewSwitcher" :max="1">
|
||||
<component :is="Component" />
|
||||
</keep-alive>
|
||||
<component :is="Component" v-else />
|
||||
</router-view>
|
||||
</div>
|
||||
<div v-if="hasContentFooter" :class="$style.contentFooter">
|
||||
<router-view name="footer" />
|
||||
</div>
|
||||
|
|
@ -147,8 +149,25 @@ watch(defaultLocale, (newLocale) => {
|
|||
grid-area: banners;
|
||||
z-index: var(--z-index-top-banners);
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.contentFooter {
|
||||
height: auto;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
display: none;
|
||||
|
||||
// Only show footer if there's content
|
||||
&:has(*) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.contentWrapper {
|
||||
display: flex;
|
||||
grid-area: content;
|
||||
position: relative;
|
||||
|
|
@ -156,19 +175,11 @@ watch(defaultLocale, (newLocale) => {
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.contentFooter {
|
||||
height: auto;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
|
|
|
|||
|
|
@ -168,8 +168,8 @@ const handleRefreshSession = () => {
|
|||
});
|
||||
};
|
||||
|
||||
const closeLogs = () => {
|
||||
workflowsStore.setPanelOpen('logs', false);
|
||||
const closePanel = () => {
|
||||
workflowsStore.setPanelOpen('chat', false);
|
||||
};
|
||||
|
||||
async function onRunChatWorkflow(payload: RunWorkflowChatPayload) {
|
||||
|
|
@ -276,7 +276,7 @@ watchEffect(() => {
|
|||
data-test-id="canvas-chat-logs"
|
||||
:node="connectedNode"
|
||||
:slim="logsWidth < 700"
|
||||
@close="closeLogs"
|
||||
@close="closePanel"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -50,8 +50,8 @@ const locale = useI18n();
|
|||
|
||||
<style lang="scss" module>
|
||||
.logsHeader {
|
||||
font-size: var(--font-size-m);
|
||||
font-weight: 400;
|
||||
font-size: var(--font-size-s);
|
||||
font-weight: var(--font-weight-bold);
|
||||
height: 2.6875rem;
|
||||
line-height: 18px;
|
||||
text-align: left;
|
||||
|
|
@ -66,9 +66,8 @@ const locale = useI18n();
|
|||
border: none;
|
||||
}
|
||||
|
||||
> span {
|
||||
font-size: var(--font-size-s);
|
||||
color: var(--color-text-base);
|
||||
span {
|
||||
font-weight: 100;
|
||||
}
|
||||
}
|
||||
.logsWrapper {
|
||||
|
|
|
|||
|
|
@ -149,7 +149,7 @@ function copySessionId() {
|
|||
<template #content>
|
||||
{{ sessionId }}
|
||||
</template>
|
||||
<span :class="$style.sessionId" @click="copySessionId" data-test-id="chat-session-id">{{
|
||||
<span :class="$style.sessionId" data-test-id="chat-session-id" @click="copySessionId">{{
|
||||
sessionId
|
||||
}}</span>
|
||||
</n8n-tooltip>
|
||||
|
|
@ -159,7 +159,7 @@ function copySessionId() {
|
|||
type="tertiary"
|
||||
text
|
||||
size="mini"
|
||||
icon="redo"
|
||||
icon="undo"
|
||||
:title="locale.baseText('chat.window.session.reset.confirm')"
|
||||
@click="onRefreshSession"
|
||||
/>
|
||||
|
|
@ -230,7 +230,8 @@ function copySessionId() {
|
|||
.chat {
|
||||
--chat--spacing: var(--spacing-xs);
|
||||
--chat--message--padding: var(--spacing-xs);
|
||||
--chat--message--font-size: var(--font-size-2xs);
|
||||
--chat--message--font-size: var(--font-size-s);
|
||||
--chat--input--font-size: var(--font-size-s);
|
||||
--chat--message--bot--background: transparent;
|
||||
--chat--message--user--background: var(--color-text-lighter);
|
||||
--chat--message--bot--color: var(--color-text-dark);
|
||||
|
|
@ -239,6 +240,7 @@ function copySessionId() {
|
|||
--chat--message--user--border: none;
|
||||
--chat--color-typing: var(--color-text-light);
|
||||
--chat--textarea--max-height: calc(var(--panel-height) * 0.5);
|
||||
--chat--message--pre--background: var(--color-foreground-light);
|
||||
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
|
@ -247,7 +249,7 @@ function copySessionId() {
|
|||
background-color: var(--color-background-light);
|
||||
}
|
||||
.chatHeader {
|
||||
font-size: var(--font-size-m);
|
||||
font-size: var(--font-size-s);
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
text-align: left;
|
||||
|
|
|
|||
|
|
@ -150,7 +150,7 @@ onMounted(() => {
|
|||
<div :class="$style.block">
|
||||
<header :class="$style.blockHeader" @click="onBlockHeaderClick">
|
||||
<button :class="$style.blockToggle">
|
||||
<font-awesome-icon :icon="isExpanded ? 'angle-down' : 'angle-up'" size="lg" />
|
||||
<font-awesome-icon :icon="isExpanded ? 'angle-down' : 'angle-right'" size="lg" />
|
||||
</button>
|
||||
<p :class="$style.blockTitle">{{ capitalize(runData.inOut) }}</p>
|
||||
<n8n-radio-buttons
|
||||
|
|
@ -279,6 +279,7 @@ onMounted(() => {
|
|||
}
|
||||
.rawSwitch {
|
||||
height: fit-content;
|
||||
margin-left: auto;
|
||||
}
|
||||
.blockHeader {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -236,7 +236,7 @@ watch(() => props.runIndex, selectFirst, { immediate: true });
|
|||
:class="$style.treeToggle"
|
||||
@click="toggleTreeItem(node)"
|
||||
>
|
||||
<font-awesome-icon :icon="node.expanded ? 'angle-down' : 'angle-up'" />
|
||||
<font-awesome-icon :icon="node.expanded ? 'angle-down' : 'angle-right'" />
|
||||
</button>
|
||||
<n8n-tooltip :disabled="!slim" placement="right">
|
||||
<template #content>
|
||||
|
|
@ -276,7 +276,7 @@ watch(() => props.runIndex, selectFirst, { immediate: true });
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else :class="$style.noData">Waiting for input…</div>
|
||||
<div v-else :class="$style.noData">{{ $locale.baseText('ndv.output.ai.waiting') }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -134,13 +134,6 @@ const outputTypeParsers: {
|
|||
} else if (content.id.includes('SystemMessage')) {
|
||||
message = `**System Message:** ${message}`;
|
||||
}
|
||||
if (
|
||||
execData.action &&
|
||||
typeof execData.action !== 'object' &&
|
||||
execData.action !== 'getMessages'
|
||||
) {
|
||||
message = `## Action: ${execData.action}\n\n${message}`;
|
||||
}
|
||||
|
||||
return message;
|
||||
}
|
||||
|
|
@ -148,6 +141,9 @@ const outputTypeParsers: {
|
|||
})
|
||||
.join('\n\n');
|
||||
|
||||
if (responseText.length === 0) {
|
||||
return fallbackParser(execData);
|
||||
}
|
||||
return {
|
||||
type: 'markdown',
|
||||
data: responseText,
|
||||
|
|
|
|||
|
|
@ -188,9 +188,9 @@
|
|||
"chat.window.chat.unpinAndExecute.cancel": "Cancel",
|
||||
"chat.window.chat.response.empty": "[No response. Make sure the last executed node outputs the content to display here]",
|
||||
"chat.window.session.title": "Session",
|
||||
"chat.window.session.reset.warning": "Are you sure you want to refresh the session? This will clear all messages and current execution data.",
|
||||
"chat.window.session.reset.title": "Confirm to refresh the session",
|
||||
"chat.window.session.reset.confirm": "Refresh Session",
|
||||
"chat.window.session.reset.title": "Reset session?",
|
||||
"chat.window.session.reset.warning": "This will clear all chat messages and the current execution data",
|
||||
"chat.window.session.reset.confirm": "Reset",
|
||||
"chatEmbed.infoTip.description": "Add chat to external applications using the n8n chat package.",
|
||||
"chatEmbed.infoTip.link": "More info",
|
||||
"chatEmbed.title": "Embed Chat in your website",
|
||||
|
|
@ -955,7 +955,8 @@
|
|||
"ndv.input.disabled": "The '{nodeName}' node is disabled and won’t execute.",
|
||||
"ndv.input.disabled.cta": "Enable it",
|
||||
"ndv.output": "Output",
|
||||
"ndv.output.ai.empty": "👈 This is {node}’s AI Logs. Click on a node to see the input it received and data it outputted.",
|
||||
"ndv.output.ai.empty": "👈 Use these logs to see information on how the {node} node completed processing. You can click on a node to see the input it received and data it output.",
|
||||
"ndv.output.ai.waiting": "Waiting for message",
|
||||
"ndv.output.outType.logs": "Logs",
|
||||
"ndv.output.outType.regular": "Output",
|
||||
"ndv.output.edit": "Edit Output",
|
||||
|
|
|
|||
Loading…
Reference in a new issue