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

♻️ Made use of n8n-card in existing components.

Browse source
This commit is contained in:
Alex Grozav 2022-04-28 13:11:26 +03:00
parent 065b50b2ff
commit f98813cdc6
3 changed files with 12 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
packages/editor-ui/src/components/Card.vue
View file

@ -1,20 +1,19 @@
<template> <template>
<div <n8n-card
:class="$style.card" :class="$style.card"
@click="(e) => $emit('click', e)" v-on="$listeners"
> >
<div :class="$style.container"> <template #header v-if="!loading">
<span <span
v-if="!loading"
v-text="title" v-text="title"
:class="$style.title" :class="$style.title"
/> />
<n8n-loading :loading="loading" :rows="3" variant="p" /> </template>
<div :class="$style.footer"> <n8n-loading :loading="loading" :rows="3" variant="p" />
<slot name="footer"></slot> <template #footer v-if="!loading">
</div> <slot name="footer" />
</div> </template>
</div> </n8n-card>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -38,11 +37,7 @@ export default mixins(genericHelpers).extend({
.card { .card {
width: 240px !important; width: 240px !important;
height: 140px; height: 140px;
border-radius: var(--border-radius-large);
border: $--version-card-border;
margin-right: var(--spacing-2xs); margin-right: var(--spacing-2xs);
background-color: var(--color-background-xlight);
padding: var(--spacing-s);
cursor: pointer; cursor: pointer;
&:last-child { &:last-child {
@ -64,17 +59,4 @@ export default mixins(genericHelpers).extend({
overflow: hidden; overflow: hidden;
white-space: normal; white-space: normal;
} }
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.footer {
display: flex;
justify-content: space-between;
}
</style> </style>

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

@ -1,4 +1,4 @@
<template> <template>
<!-- eslint-disable-next-line vue/no-mutating-props --> <!-- eslint-disable-next-line vue/no-mutating-props -->
<a v-if="version" :set="version = version" :href="version.documentationUrl" target="_blank" :class="$style.card"> <a v-if="version" :set="version = version" :href="version.documentationUrl" target="_blank" :class="$style.card">
<div :class="$style.header"> <div :class="$style.header">

3
packages/editor-ui/src/plugins/components.ts
View file

@ -48,7 +48,7 @@ import {
N8nAvatar, N8nAvatar,
N8nActionToggle, N8nActionToggle,
N8nButton, N8nButton,
N8nHeading, N8nCard,
N8nIcon, N8nIcon,
N8nIconButton, N8nIconButton,
N8nInfoTip, N8nInfoTip,
@ -84,6 +84,7 @@ Vue.use(N8nActionBox);
Vue.use(N8nActionToggle); Vue.use(N8nActionToggle);
Vue.use(N8nAvatar); Vue.use(N8nAvatar);
Vue.use(N8nButton); Vue.use(N8nButton);
Vue.component('n8n-card', N8nCard);
Vue.component('n8n-form-box', N8nFormBox); Vue.component('n8n-form-box', N8nFormBox);
Vue.component('n8n-form-inputs', N8nFormInputs); Vue.component('n8n-form-inputs', N8nFormInputs);
Vue.component('n8n-icon', N8nIcon); Vue.component('n8n-icon', N8nIcon);