admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-18 10:31:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(editor): Unify Callout components (#3798)

Browse Source 
* ✨ Implemented a single Callout component

* ✔️ Updating test snapshots and fixing lint warnings
This commit is contained in:
Milorad FIlipović
2022-08-02 10:36:11 +02:00
committed by GitHub
parent 0ecbb4a19d
commit ad8d662976
13 changed files with 320 additions and 566 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
packages/design-system/src/components/N8nCallout/Callout.vue
View File

@@ -1,11 +1,18 @@
<template>
<div :class="classes" role="alert">
<div :class="$style.icon">
<n8n-icon v-bind="$attrs" :icon="getIcon" size="large"/>
</div>
<div :class="$style.message" >
<n8n-text size="small" v-bind="$attrs"><span v-html="message"></span></n8n-text>
<div :class="$style['message-section']">
<div :class="$style.icon">
<n8n-icon
:icon="getIcon"
:size="theme === 'secondary' ? 'medium' : 'large'"
/>
</div>
<slot />&nbsp;
<slot name="actions" />
</div>
<slot name="trailingContent" />
</div>
</template>
@@ -14,37 +21,30 @@ import Vue from 'vue';
import N8nIcon from '../N8nIcon';
import N8nText from '../N8nText';
const CALLOUT_DEFAULT_ICONS = {
info: 'info-circle',
success: 'check-circle',
warning: 'exclamation-triangle',
danger: 'times-circle',
};
export default Vue.extend({
name: 'n8n-callout',
components: {
N8nIcon,
N8nText
N8nText,
},
props: {
theme: {
type: String,
required: true,
validator: (value: string): boolean =>
['info', 'success', 'warning', 'danger', 'custom'].includes(value),
},
message: {
type: String,
required: true
['info', 'success', 'secondary', 'warning', 'danger', 'custom'].includes(value),
},
icon: {
type: String,
default: 'info-circle'
}
},
data() {
return {
defaultIcons: {
'info': 'info-circle',
'success': 'check-circle',
'warning': 'exclamation-triangle',
'danger': 'times-circle',
}
}
},
},
computed: {
classes(): string[] {
@@ -54,50 +54,65 @@ export default Vue.extend({
];
},
getIcon(): string {
if(this.theme === 'custom') {
return this.icon;
if (Object.keys(CALLOUT_DEFAULT_ICONS).includes(this.theme)) {
return CALLOUT_DEFAULT_ICONS[this.theme];
}
return this.defaultIcons[this.theme];
return this.icon;
},
}
});
</script>
<style lang="scss" module>
.callout {
display: flex;
font-size: var(--font-size-2xs);
padding: var(--spacing-xs);
border: var(--border-width-base) var(--border-style-base);
border-radius: var(--border-radius-base);
align-items: center;
}
.callout {
display: flex;
justify-content: space-between;
font-size: var(--font-size-2xs);
padding: var(--spacing-xs);
border: var(--border-width-base) var(--border-style-base);
border-radius: var(--border-radius-base);
align-items: center;
line-height: var(--font-line-height-loose);
}
.info, .custom {
border-color: var(--color-foreground-base);
background-color: var(--color-background-light);
color: var(--color-info);
}
.message-section {
display: flex;
}
.warning {
border-color: var(--color-warning-tint-1);
background-color: var(--color-warning-tint-2);
color: var(--color-warning);
}
.info, .custom {
border-color: var(--color-foreground-base);
background-color: var(--color-background-light);
color: var(--color-info);
}
.success {
border-color: var(--color-success-tint-1);
background-color: var(--color-success-tint-2);
color: var(--color-success);
}
.warning {
border-color: var(--color-warning-tint-1);
background-color: var(--color-warning-tint-2);
color: var(--color-warning);
}
.danger {
border-color: var(--color-danger-tint-1);
background-color: var(--color-danger-tint-2);
color: var(--color-danger);
}
.success {
border-color: var(--color-success-tint-1);
background-color: var(--color-success-tint-2);
color: var(--color-success);
}
.icon {
margin-right: var(--spacing-xs);
}
.danger {
border-color: var(--color-danger-tint-1);
background-color: var(--color-danger-tint-2);
color: var(--color-danger);
}
.icon {
margin-right: var(--spacing-xs);
}
.secondary {
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-bold);
color: var(--color-secondary);
background-color: var(--color-secondary-tint-2);
border-color: var(--color-secondary-tint-1);
}
</style>