mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-02-21 02:56:40 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

A few style tweaks

Browse source
This commit is contained in:
Giulio Andreini 2024-10-30 14:58:38 +01:00 committed by Ivan Atanasov
parent 825a700250
commit 00df04743f
No known key found for this signature in database
1 changed files with 26 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
packages/editor-ui/src/components/WorkflowStatistic.vue
View file

@ -8,29 +8,23 @@ const props = defineProps<{
const total = props.statistic ? props.statistic.successes + props.statistic.errors : 0; const total = props.statistic ? props.statistic.successes + props.statistic.errors : 0;
const tooltip = ` const tooltip = `
<p>${total} production executions since creation</p> ${total} production executions<br />
<p>${props.statistic?.successes || 0} successful</p> ${props.statistic?.successes || 0} successful, ${props.statistic?.errors || 0} failed
<p>${props.statistic?.errors || 0} failed</p>
`; `;
</script> </script>
<template> <template>
<n8n-tooltip v-if="statistic && total" placement="top"> <n8n-tooltip v-if="statistic && total" placement="top">
<div class="statusText"> <div class="statusText">
<span class="info-wrapper"> <span class="info-wrapper info-wrapper__total">
<n8n-icon icon="tasks" color="info" /> <n8n-icon icon="tasks" color="text-base" />
<n8n-text color="text-base" size="small" bold <n8n-text color="text-base" size="small" bold>{{ total }}</n8n-text>
>{{ total }}<span class="separator">|</span></n8n-text
>
</span> </span>
<span v-if="statistic?.successes" class="info-wrapper"> <span v-if="statistic?.successes" class="info-wrapper info-wrapper__success">
<n8n-icon icon="check-circle" color="success" /> <n8n-icon icon="check-circle" color="success" />
<n8n-text color="text-base" size="small" bold <n8n-text color="text-base" size="small" bold>{{ statistic.successes }}</n8n-text>
>{{ statistic.successes
}}<span v-if="statistic?.errors" class="separator">|</span></n8n-text
>
</span> </span>
<span v-if="statistic?.errors" class="info-wrapper"> <span v-if="statistic?.errors" class="info-wrapper info-wrapper__error">
<n8n-icon icon="exclamation-triangle" color="danger" /> <n8n-icon icon="exclamation-triangle" color="danger" />
<n8n-text color="text-base" size="small" bold> {{ statistic?.errors }} </n8n-text> <n8n-text color="text-base" size="small" bold> {{ statistic?.errors }} </n8n-text>
</span> </span>
@ -43,7 +37,7 @@ const tooltip = `
<style lang="scss" scoped> <style lang="scss" scoped>
.statusText { .statusText {
padding-right: var(--spacing-s); padding-right: var(--spacing-l);
box-sizing: border-box; box-sizing: border-box;
text-align: right; text-align: right;
display: flex; display: flex;
@ -56,9 +50,23 @@ const tooltip = `
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: var(--spacing-4xs); gap: var(--spacing-4xs);
&__total .n8n-icon {
color: var(--color-text-light);
} }
.separator { &__success .n8n-icon {
margin: 0 var(--spacing-3xs); color: var(--execution-card-border-success);
}
&__error .n8n-icon {
color: var(--execution-card-border-error);
}
&:not(:last-child) {
margin-right: var(--spacing-2xs);
padding-right: var(--spacing-2xs);
border-right: 1px solid var(--color-foreground-base);
}
} }
</style> </style>