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

address design feedback

Browse source
This commit is contained in:
Mutasem 2021-07-07 14:51:24 +02:00
parent 570eb4a5dd
commit 55c6bdab25
6 changed files with 34 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -128,7 +128,7 @@
<MenuItemsIterator :items="sidebarMenuBottomItems" :root="true"/> <MenuItemsIterator :items="sidebarMenuBottomItems" :root="true"/>
<div class="foot-menu-items"> <div class="foot-menu-items">
<el-menu-item index="updates" class="updates" v-if="hasVersionUpdates" @click="openVersionsModal"> <el-menu-item index="updates" class="updates" v-if="hasVersionUpdates" @click="openUpdatesPanel">
<div class="gift-container"> <div class="gift-container">
<div class="gift-icon"> <div class="gift-icon">
<font-awesome-icon icon="gift"/> <font-awesome-icon icon="gift"/>
@ -328,8 +328,8 @@ export default mixins(
openTagManager() { openTagManager() {
this.$store.dispatch('ui/openTagsManagerModal'); this.$store.dispatch('ui/openTagsManagerModal');
}, },
openVersionsModal() { openUpdatesPanel() {
this.$store.dispatch('ui/openVersionsModal'); this.$store.dispatch('ui/openUpdatesPanel');
}, },
async stopExecution () { async stopExecution () {
const executionId = this.$store.getters.activeExecutionId; const executionId = this.$store.getters.activeExecutionId;

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

@ -26,7 +26,7 @@
</ModalRoot> </ModalRoot>
<ModalRoot :name="VERSIONS_MODAL_KEY" :keepAlive="true"> <ModalRoot :name="VERSIONS_MODAL_KEY" :keepAlive="true">
<template v-slot="{ modalName, open }"> <template v-slot="{ modalName, open }">
<VersionsModal <UpdatesPanel
:modalName="modalName" :modalName="modalName"
:visible="open" :visible="open"
/> />
@ -43,7 +43,7 @@ import TagsManager from "@/components/TagsManager/TagsManager.vue";
import DuplicateWorkflowDialog from "@/components/DuplicateWorkflowDialog.vue"; import DuplicateWorkflowDialog from "@/components/DuplicateWorkflowDialog.vue";
import WorkflowOpen from "@/components/WorkflowOpen.vue"; import WorkflowOpen from "@/components/WorkflowOpen.vue";
import ModalRoot from "./ModalRoot.vue"; import ModalRoot from "./ModalRoot.vue";
import VersionsModal from "./VersionsModal.vue"; import UpdatesPanel from "./UpdatesPanel.vue";
export default Vue.extend({ export default Vue.extend({
name: "Modals", name: "Modals",
@ -52,7 +52,7 @@ export default Vue.extend({
DuplicateWorkflowDialog, DuplicateWorkflowDialog,
WorkflowOpen, WorkflowOpen,
ModalRoot, ModalRoot,
VersionsModal, UpdatesPanel,
}, },
data: () => ({ data: () => ({
DUPLICATE_MODAL_KEY, DUPLICATE_MODAL_KEY,

14
packages/editor-ui/src/components/VersionsModal.vue → packages/editor-ui/src/components/UpdatesPanel.vue
View file

@ -5,13 +5,13 @@
:drawer="true" :drawer="true"
:visible="visible" :visible="visible"
drawerDirection="ltr" drawerDirection="ltr"
drawerWidth="480px" drawerWidth="520px"
> >
<template slot="header"> <template slot="header">
<p :class="$style.title"> We’ve been busy ✨</p> <p :class="$style.title"> We’ve been busy ✨</p>
</template> </template>
<template slot="content"> <template slot="content">
<section :class="$style['header-content']"> <section :class="$style['description']">
<p>You’re on {{ currentVersion.name }}, which was released <strong>{{currentReleaseDate}}</strong> and is {{ nextVersions.length }} version{{nextVersions.length > 1 ? 's' : ''}} behind the latest and greatest n8n</p> <p>You’re on {{ currentVersion.name }}, which was released <strong>{{currentReleaseDate}}</strong> and is {{ nextVersions.length }} version{{nextVersions.length > 1 ? 's' : ''}} behind the latest and greatest n8n</p>
<a :class="$style.update" :href="UPDATE_INFO_URL" v-if="UPDATE_INFO_URL" target="_blank"> <a :class="$style.update" :href="UPDATE_INFO_URL" v-if="UPDATE_INFO_URL" target="_blank">
@ -41,7 +41,7 @@ import VersionCard from './VersionCard.vue';
import { UPDATE_INFO_URL } from '@/constants'; import { UPDATE_INFO_URL } from '@/constants';
export default Vue.extend({ export default Vue.extend({
name: 'VersionsModal', name: 'UpdatesPanel',
components: { components: {
Modal, Modal,
VersionCard, VersionCard,
@ -65,14 +65,15 @@ export default Vue.extend({
</script> </script>
<style module lang="scss"> <style module lang="scss">
.header-content { .description {
padding: 0px 30px; padding: 0px 30px;
margin-bottom: 30px; margin-bottom: 30px;
p { p {
font-size: 16px; font-size: 14px;
line-height: 22px; line-height: 22px;
color: #7D7D87; color: #7D7D87;
font-weight: 400;
} }
div { div {
@ -98,7 +99,7 @@ export default Vue.extend({
height: 100%; height: 100%;
padding: 30px; padding: 30px;
overflow-y: scroll; overflow-y: scroll;
padding-bottom: 140px; padding-bottom: 220px;
} }
.versions-card { .versions-card {
@ -107,6 +108,7 @@ export default Vue.extend({
.update { .update {
text-decoration: none; text-decoration: none;
font-size: 14px;
svg { svg {
color: #909399; color: #909399;

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

@ -5,12 +5,12 @@
<div :class="$style.name"> <div :class="$style.name">
Version {{version.name}} Version {{version.name}}
</div> </div>
<el-tooltip class="item" effect="light" content=" " placement="top" v-if="version.hasSecurityIssue"> <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> <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> <font-awesome-icon :class="$style['security-flag']" icon="exclamation-triangle"></font-awesome-icon>
</el-tooltip> </el-tooltip>
<el-tag type="danger" v-if="version.hasSecurityFix" size="small" :class="$style['security-update']">Security Update</el-tag> <el-tag type="danger" v-if="version.hasSecurityFix" size="small" :class="$style['security-update']">Security update</el-tag>
<el-tag v-if="version.hasBreakingChange" size="small" :class="$style['breaking-change']">Breaking Change</el-tag> <el-tag v-if="version.hasBreakingChange" size="small" :class="$style['breaking-change']">Breaking changes</el-tag>
</div> </div>
<div :class="$style.released"> <div :class="$style.released">
Released {{releaseDate}} Released {{releaseDate}}
@ -20,7 +20,6 @@
<div v-html="version.description" :class="$style.description"></div> <div v-html="version.description" :class="$style.description"></div>
<div :class="$style.nodes" v-if="version.nodes && version.nodes.length > 0"> <div :class="$style.nodes" v-if="version.nodes && version.nodes.length > 0">
<NodeIcon <NodeIcon
:class="$style['node-icon']"
v-for="node in version.nodes" v-for="node in version.nodes"
:key="node.name" :key="node.name"
:nodeType="node" :nodeType="node"
@ -38,7 +37,7 @@ import NodeIcon from './NodeIcon.vue';
export default Vue.extend({ export default Vue.extend({
components: { NodeIcon }, components: { NodeIcon },
name: 'VersionsModal', name: 'UpdatesPanel',
props: ['version'], props: ['version'],
computed: { computed: {
releaseDate() { releaseDate() {
@ -57,6 +56,10 @@ export default Vue.extend({
padding: 15px; padding: 15px;
padding-bottom: 10px; padding-bottom: 10px;
text-decoration: none; text-decoration: none;
&:hover {
box-shadow: 0px 2px 10px rgba(109, 48, 40, 0.07);
}
} }
.header { .header {
@ -88,6 +91,7 @@ export default Vue.extend({
.description { .description {
font-size: 14px; font-size: 14px;
font-weight: 400;
line-height: 19px; line-height: 19px;
color: #7D7D87; color: #7D7D87;
margin-top: 15px; margin-top: 15px;
@ -103,6 +107,11 @@ export default Vue.extend({
display: flex; display: flex;
margin-top: 20px; margin-top: 20px;
flex-wrap: wrap; flex-wrap: wrap;
> div {
margin-right: 15px;
margin-bottom: 5px;
}
} }
.security-update { .security-update {
@ -110,11 +119,6 @@ export default Vue.extend({
max-height: 18px; max-height: 18px;
} }
.node-icon {
margin-right: 15px;
margin-bottom: 5px;
}
.breaking-change { .breaking-change {
background-color: rgba(255, 229, 100, 0.3); background-color: rgba(255, 229, 100, 0.3);
color: #6B5900; color: #6B5900;
@ -128,6 +132,8 @@ export default Vue.extend({
} }
.security-flag { .security-flag {
color: red; font-size: 14px;
height: 18px;
color: #ff8080;
} }
</style> </style>

2
packages/editor-ui/src/modules/ui.ts
View file

@ -64,7 +64,7 @@ const module: Module<IUiState, IRootState> = {
openDuplicateModal: async (context: ActionContext<IUiState, IRootState>) => { openDuplicateModal: async (context: ActionContext<IUiState, IRootState>) => {
context.commit('openModal', DUPLICATE_MODAL_KEY); context.commit('openModal', DUPLICATE_MODAL_KEY);
}, },
openVersionsModal: async (context: ActionContext<IUiState, IRootState>) => { openUpdatesPanel: async (context: ActionContext<IUiState, IRootState>) => {
context.commit('openModal', VERSIONS_MODAL_KEY); context.commit('openModal', VERSIONS_MODAL_KEY);
}, },
}, },

4
packages/editor-ui/src/views/NodeView.vue
View file

@ -2247,10 +2247,10 @@ export default mixins(
message = `Please update to version ${fixVersion} or higher.`; message = `Please update to version ${fixVersion} or higher.`;
} }
message = `${message}<br/><a class="primary-color">More info</a>`; message = `${message} <a class="primary-color">More info</a>`;
this.$showWarning('Critical Update', message, { this.$showWarning('Critical Update', message, {
onClick: () => { onClick: () => {
this.$store.dispatch('ui/openVersionsModal'); this.$store.dispatch('ui/openUpdatesPanel');
}, },
closeOnClick: true, closeOnClick: true,
customClass: 'clickable', customClass: 'clickable',