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

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">
Version {{version.name}}
</div>
<el-tooltip effect="light" content=" " placement="top" v-if="version.hasSecurityIssue">
<div slot="content">This version has a security issue.<br/>It is listed here for completeness.</div>
<font-awesome-icon :class="$style['security-flag']" icon="exclamation-triangle"></font-awesome-icon>
</el-tooltip>
<el-tag type="danger" v-if="version.hasSecurityFix" size="small" :class="`${$style['security-update']} ${$style['badge']}`">Security update</el-tag>
<el-tag v-if="version.hasBreakingChange" size="small" :class="`${$style['breaking-change']} ${$style['badge']}`">Breaking changes</el-tag>
<WarningTooltip v-if="version.hasSecurityIssue">
<template>
This version has a security issue.<br/>It is listed here for completeness.
</template>
</WarningTooltip>
<Badge
v-if="version.hasSecurityFix"
text="Security update"
type="danger"
/>
<Badge
v-if="version.hasSecurityFix"
text="Breaking changes"
type="warning"
/>
</div>
<div :class="$style.released">
Released&nbsp;<TimeAgo :date="version.createdAt" />
@ -34,10 +43,12 @@ import Vue from 'vue';
import NodeIcon from './NodeIcon.vue';
import { IVersion } from '@/Interface';
import TimeAgo from './TimeAgo.vue';
import Badge from './Badge.vue';
import WarningTooltip from './WarningTooltip.vue';
export default Vue.extend({
components: { NodeIcon, TimeAgo },
components: { NodeIcon, TimeAgo, Badge, WarningTooltip },
name: 'UpdatesPanel',
props: ['version'],
computed: {
@ -115,32 +126,4 @@ export default Vue.extend({
.expanded {
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>

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>