mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor components

Browse source
This commit is contained in:
Mutasem 2021-07-08 19:36:08 +02:00
parent e3a40abda7
commit 5c8611cb9a
3 changed files with 82 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
packages/editor-ui/src/components/Badge.vue Normal file
View file

@ -0,0 +1,49 @@
<template functional>
<span>
<el-tag
v-if="props.type === 'danger'"
type="danger"
size="small"
:class="`${$style['danger']} ${$style['badge']}`"
>
{{ props.text }}
</el-tag>
<el-tag
v-else-if="props.type === 'warning'"
size="small"
:class="`${$style['warning']} ${$style['badge']}`"
>
{{ props.text }}
</el-tag>
</span>
</template>
<script lang="ts">
export default {
props: ["text", "type"],
};
</script>
<style lang="scss" module>
.badge {
font-size: 11px;
line-height: 18px;
max-height: 18px;
font-weight: 400;
display: flex;
align-items: center;
padding: 2px 4px;
}
.danger {
color: $--version-card-security-badge-color;
background-color: $--version-card-security-badge-background-color;
border-color: $--version-card-security-badge-border-color;
}
.warning {
background-color: $--version-card-breaking-change-background-color;
color: $--version-card-breaking-change-color;
border: none;
}
</style>

53
packages/editor-ui/src/components/VersionCard.vue
View file

@ -5,12 +5,21 @@
<div :class="$style.name"> <div :class="$style.name">
Version {{version.name}} Version {{version.name}}
</div> </div>
<el-tooltip effect="light" content=" " placement="top" v-if="version.hasSecurityIssue"> <WarningTooltip v-if="version.hasSecurityIssue">
<div slot="content">This version has a security issue.<br/>It is listed here for completeness.</div> <template>
<font-awesome-icon :class="$style['security-flag']" icon="exclamation-triangle"></font-awesome-icon> This version has a security issue.<br/>It is listed here for completeness.
</el-tooltip> </template>
<el-tag type="danger" v-if="version.hasSecurityFix" size="small" :class="`${$style['security-update']} ${$style['badge']}`">Security update</el-tag> </WarningTooltip>
<el-tag v-if="version.hasBreakingChange" size="small" :class="`${$style['breaking-change']} ${$style['badge']}`">Breaking changes</el-tag> <Badge
v-if="version.hasSecurityFix"
text="Security update"
type="danger"
/>
<Badge
v-if="version.hasSecurityFix"
text="Breaking changes"
type="warning"
/>
</div> </div>
<div :class="$style.released"> <div :class="$style.released">
Released&nbsp;<TimeAgo :date="version.createdAt" /> Released&nbsp;<TimeAgo :date="version.createdAt" />
@ -34,10 +43,12 @@ import Vue from 'vue';
import NodeIcon from './NodeIcon.vue'; import NodeIcon from './NodeIcon.vue';
import { IVersion } from '@/Interface'; import { IVersion } from '@/Interface';
import TimeAgo from './TimeAgo.vue'; import TimeAgo from './TimeAgo.vue';
import Badge from './Badge.vue';
import WarningTooltip from './WarningTooltip.vue';
export default Vue.extend({ export default Vue.extend({
components: { NodeIcon, TimeAgo }, components: { NodeIcon, TimeAgo, Badge, WarningTooltip },
name: 'UpdatesPanel', name: 'UpdatesPanel',
props: ['version'], props: ['version'],
computed: { computed: {
@ -115,32 +126,4 @@ export default Vue.extend({
.expanded { .expanded {
grid-row-gap: 8px; grid-row-gap: 8px;
} }
.badge {
font-size: 11px;
line-height: 18px;
max-height: 18px;
font-weight: 400;
display: flex;
align-items: center;
padding: 2px 4px;
}
.security-update {
color: $--version-card-security-badge-color;
background-color: $--version-card-security-badge-background-color;
border-color: $--version-card-security-badge-border-color;
}
.breaking-change {
background-color: $--version-card-breaking-change-background-color;
color: $--version-card-breaking-change-color;
border: none;
}
.security-flag {
font-size: 14px;
height: 18px;
color: $--version-card-security-flag-color;
}
</style> </style>

15
packages/editor-ui/src/components/WarningTooltip.vue Normal file
View file

@ -0,0 +1,15 @@
<template functional>
<el-tooltip effect="light" content=" " placement="top" >
<div slot="content"><slot /></div>
<font-awesome-icon :class="$style['icon']" icon="exclamation-triangle"></font-awesome-icon>
</el-tooltip>
</template>
<style lang="scss" module>
.icon {
font-size: 14px;
height: 18px;
color: $--version-card-security-flag-color;
}
</style>