fix up modal

packages/editor-ui/src/components/Drawer.vue

@@ -1,36 +0,0 @@
-<template>
-	<SlideTransition>
-		<div>
-			<slot></slot>
-		</div>
-	</SlideTransition>
-</template>
-
-<script lang="ts">
-import Vue from "vue";
-import SlideTransition from "./transitions/SlideTransition.vue";
-
-export default Vue.extend({
-	name: "Modal",
-	props: ['name'],
-	components: {
-		SlideTransition,
-	},
-	computed: {
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-/deep/ *, *:before, *:after {
-	box-sizing: border-box;
-}
-
-div {
-	position: fixed;
-	width: 480px;
-	height: 100%;
-	background-color: $--drawer-background-color;
-	z-index: 200;
-}
-</style>

packages/editor-ui/src/components/Modal.vue

@@ -3,6 +3,7 @@
 		<el-drawer
 			v-if="drawer"
 			:direction="drawerDirection"
+			:before-close="closeDialog"
 			:visible="dialogVisible"
 			:size="drawerWidth"
 			>
@@ -37,7 +38,6 @@
 
 <script lang="ts">
 import Vue from "vue";
-import Drawer from "./Drawer.vue";
 
 const sizeMap: {[size: string]: string} = {
 	xl: '80%',
@@ -47,9 +47,6 @@ const sizeMap: {[size: string]: string} = {
 
 export default Vue.extend({
 	name: "Modal",
-	components: {
-		Drawer,
-	},
 	props: ['name', 'title', 'eventBus', 'size', 'drawer', 'drawerDirection', 'drawerWidth'],
 	mounted() {
 		window.addEventListener('keydown', this.onWindowKeydown);
@@ -107,6 +104,10 @@ export default Vue.extend({
 	padding: 30px 30px 0 30px;; //todo
 }
 
+.el-drawer__body {
+	overflow: hidden;
+}
+
 .dialog-wrapper {
 	* {
 		box-sizing: border-box;

packages/editor-ui/src/components/VersionCard.vue

@@ -1,5 +1,5 @@
 <template>
-	<a :href="version.documentationUrl" :class="$style.card">
+	<a :href="version.documentationUrl" target="_blank" :class="$style.card">
 		<div :class="$style.header">
 			<div :class="$style.name">
 				Version {{version.name}}
@@ -47,6 +47,7 @@ export default Vue.extend({
 		border-radius: 8px;
 		display: block;
 		padding: 15px;
+		text-decoration: none;
 	}
 
 	.header {

packages/editor-ui/src/components/VersionsModal.vue

@@ -11,7 +11,11 @@
 		<template slot="content">
 			<section :class="$style['header-content']">
 				<p>You’re on {{ currentVersion.name }}, which is <strong>{{currentReleaseDate}}</strong> and {{ nextVersions.length }} version{{nextVersions.length > 1 ? 's' : ''}} behind the latest and greatest n8n</p>	
-				<a><font-awesome-icon icon="info-circle"></font-awesome-icon>How to update your n8n version</a>
+
+				<a :class="$style.update" :href="UPDATE_INFO_URL" v-if="UPDATE_INFO_URL" target="_blank">
+					<font-awesome-icon icon="info-circle"></font-awesome-icon>
+					<span>How to update your n8n version</span>
+				</a>
 			</section>
 			<section :class="$style.versions">
 				<VersionCard 
@@ -32,6 +36,7 @@ import { format } from 'timeago.js';
 
 import Modal from './Modal.vue';
 import VersionCard from './VersionCard.vue';
+import { UPDATE_INFO_URL } from '@/constants';
 
 export default Vue.extend({
 	name: 'VersionsModal',
@@ -40,6 +45,11 @@ export default Vue.extend({
 		VersionCard,
 	},
 	props: ['modalName'],
+	data() {
+		return {
+			UPDATE_INFO_URL,
+		};
+	},
 	computed: {
 		...mapGetters('versions', [
 			'nextVersions',
@@ -76,14 +86,34 @@ export default Vue.extend({
 		font-weight: 400;
 	}
 
+	.content {
+		overflow: hidden;
+	}
+
 	.versions {
 		background-color: #F8F9FB;
 		border-top: 1px #DBDFE7 solid;
 		height: 100%;
 		padding: 30px;
+		overflow-y: scroll;
+		padding-bottom: 140px;
 	}
 
 	.versions-card {
 		margin-bottom: 15px;
 	}
+
+	.update {
+		text-decoration: none;
+
+		svg {
+			color: #909399;
+			margin-right: 5px;
+		}
+
+		span {
+			color: $--color-primary;
+			font-weight: 600;
+		}
+	}
 </style>

packages/editor-ui/src/constants.ts

@@ -52,3 +52,4 @@ export const REQUEST_NODE_FORM_URL = 'https://n8n-community.typeform.com/to/K1fB
 
 // versions
 export const VERSIONS_BASE_URL = `https://api-staging.n8n.io/versions/`;
+export const UPDATE_INFO_URL = 'https://docs.n8n.io/';