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

fix: fix drawer visibility

Browse source
This commit is contained in:
Alex Grozav 2023-07-19 16:57:38 +03:00
parent f93b821bbb
commit 284feb0c2b
12 changed files with 38 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/design-system/src/components/N8nBlockUi/BlockUi.vue
View file

@ -38,7 +38,7 @@ withDefaults(defineProps<BlockUiProps>(), {
.fade-leave-active { .fade-leave-active {
transition: opacity 200ms; transition: opacity 200ms;
} }
.fade-enter, .fade-enter-from,
.fade-leave-to { .fade-leave-to {
opacity: 0; opacity: 0;
} }

2
packages/design-system/src/css/alert.scss
View file

@ -141,7 +141,7 @@
} }
} }
.el-alert-fade-enter, .el-alert-fade-enter-from,
.el-alert-fade-leave-active { .el-alert-fade-leave-active {
opacity: 0; opacity: 0;
} }

4
packages/design-system/src/css/carousel.scss
View file

@ -148,13 +148,13 @@
} }
} }
.carousel-arrow-left-enter, .carousel-arrow-left-enter-from,
.carousel-arrow-left-leave-active { .carousel-arrow-left-leave-active {
transform: translateY(-50%) translateX(-10px); transform: translateY(-50%) translateX(-10px);
opacity: 0; opacity: 0;
} }
.carousel-arrow-right-enter, .carousel-arrow-right-enter-from,
.carousel-arrow-right-leave-active { .carousel-arrow-right-leave-active {
transform: translateY(-50%) translateX(10px); transform: translateY(-50%) translateX(10px);
opacity: 0; opacity: 0;

4
packages/design-system/src/css/common/popup.scss
View file

@ -1,11 +1,11 @@
@use './var.scss'; @use './var.scss';
@use '../mixins/mixins'; @use '../mixins/mixins';
.v-modal-enter { .v-modal-enter-from {
animation: v-modal-in 0.2s ease; animation: v-modal-in 0.2s ease;
} }
.v-modal-leave { .v-modal-leave-to {
animation: v-modal-out 0.2s ease forwards; animation: v-modal-out 0.2s ease forwards;
} }

9
packages/design-system/src/css/drawer.scss
View file

@ -100,10 +100,11 @@
} }
} }
@include drawer-animation(rtl); // @TODO Fix drawer animations
@include drawer-animation(ltr); //@include drawer-animation(rtl);
@include drawer-animation(ttb); //@include drawer-animation(ltr);
@include drawer-animation(btt); //@include drawer-animation(ttb);
//@include drawer-animation(btt);
$directions: rtl, ltr, ttb, btt; $directions: rtl, ltr, ttb, btt;

2
packages/design-system/src/css/loading.scss
View file

@ -69,7 +69,7 @@
} }
} }
.el-loading-fade-enter, .el-loading-fade-enter-from,
.el-loading-fade-leave-active { .el-loading-fade-leave-active {
opacity: 0; opacity: 0;
} }

2
packages/design-system/src/css/message.scss
View file

@ -117,7 +117,7 @@
} }
} }
.el-message-fade-enter, .el-message-fade-enter-from,
.el-message-fade-leave-active { .el-message-fade-leave-active {
opacity: 0; opacity: 0;
transform: translate(-50%, -100%); transform: translate(-50%, -100%);

2
packages/design-system/src/css/notification.scss
View file

@ -84,7 +84,7 @@
} }
} }
.el-notification-fade-enter { .el-notification-fade-enter-from {
&.right { &.right {
right: 0; right: 0;
transform: translateX(100%); transform: translateX(100%);

2
packages/design-system/src/css/switch.scss
View file

@ -109,7 +109,7 @@
} }
} }
& .label-fade-enter, & .label-fade-enter-from,
& .label-fade-leave-active { & .label-fade-leave-active {
opacity: 0; opacity: 0;
} }

8
packages/design-system/src/css/tabs.scss
View file

@ -517,19 +517,19 @@
.slideInLeft-transition { .slideInLeft-transition {
display: inline-block; display: inline-block;
} }
.slideInRight-enter { .slideInRight-enter-from {
animation: slideInRight-enter 0.3s; animation: slideInRight-enter 0.3s;
} }
.slideInRight-leave { .slideInRight-leave-to {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
animation: slideInRight-leave 0.3s; animation: slideInRight-leave 0.3s;
} }
.slideInLeft-enter { .slideInLeft-enter-from {
animation: slideInLeft-enter 0.3s; animation: slideInLeft-enter 0.3s;
} }
.slideInLeft-leave { .slideInLeft-leave-to {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;

6
packages/editor-ui/src/components/ModalDrawer.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<el-drawer <el-drawer
:direction="direction" :direction="direction"
:visible="uiStore.isModalOpen(this.name)" :modelValue="uiStore.isModalOpen(this.name)"
:size="width" :size="width"
:before-close="close" :before-close="close"
:modal="modal" :modal="modal"
@ -22,9 +22,13 @@ import { mapStores } from 'pinia';
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import type { PropType } from 'vue'; import type { PropType } from 'vue';
import type { EventBus } from 'n8n-design-system'; import type { EventBus } from 'n8n-design-system';
import { ElDrawer } from 'element-plus';
export default defineComponent({ export default defineComponent({
name: 'ModalDrawer', name: 'ModalDrawer',
components: {
ElDrawer,
},
props: { props: {
name: { name: {
type: String, type: String,

12
packages/editor-ui/src/components/UpdatesPanel.vue
View file

@ -13,16 +13,20 @@
interpolate: { currentVersionName: currentVersion.name }, interpolate: { currentVersionName: currentVersion.name },
}) })
}} }}
<strong><TimeAgo :date="currentVersion.createdAt" /></strong <strong>
>{{ $locale.baseText('updatesPanel.andIs') }} <TimeAgo :date="currentVersion.createdAt" />
<strong>{{ </strong>
{{ $locale.baseText('updatesPanel.andIs') }}
<strong>
{{
$locale.baseText('updatesPanel.version', { $locale.baseText('updatesPanel.version', {
interpolate: { interpolate: {
numberOfVersions: nextVersions.length, numberOfVersions: nextVersions.length,
howManySuffix: nextVersions.length > 1 ? 's' : '', howManySuffix: nextVersions.length > 1 ? 's' : '',
}, },
}) })
}}</strong> }}
</strong>
{{ $locale.baseText('updatesPanel.behindTheLatest') }} {{ $locale.baseText('updatesPanel.behindTheLatest') }}
</p> </p>