mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-02-02 07:01:30 -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"/>
<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-icon">
<font-awesome-icon icon="gift"/>
@ -328,8 +328,8 @@ export default mixins(
openTagManager() {
this.$store.dispatch('ui/openTagsManagerModal');
},
openVersionsModal() {
this.$store.dispatch('ui/openVersionsModal');
openUpdatesPanel() {
this.$store.dispatch('ui/openUpdatesPanel');
},
async stopExecution () {
const executionId = this.$store.getters.activeExecutionId;

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

@ -26,7 +26,7 @@
</ModalRoot>
<ModalRoot :name="VERSIONS_MODAL_KEY" :keepAlive="true">
<template v-slot="{ modalName, open }">
<VersionsModal
<UpdatesPanel
:modalName="modalName"
:visible="open"
/>
@ -43,7 +43,7 @@ import TagsManager from "@/components/TagsManager/TagsManager.vue";
import DuplicateWorkflowDialog from "@/components/DuplicateWorkflowDialog.vue";
import WorkflowOpen from "@/components/WorkflowOpen.vue";
import ModalRoot from "./ModalRoot.vue";
import VersionsModal from "./VersionsModal.vue";
import UpdatesPanel from "./UpdatesPanel.vue";
export default Vue.extend({
name: "Modals",
@ -52,7 +52,7 @@ export default Vue.extend({
DuplicateWorkflowDialog,
WorkflowOpen,
ModalRoot,
VersionsModal,
UpdatesPanel,
},
data: () => ({
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"
:visible="visible"
drawerDirection="ltr"
drawerWidth="480px"
drawerWidth="520px"
>
<template slot="header">
<p :class="$style.title"> We’ve been busy ✨</p>
</template>
<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>
<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';
export default Vue.extend({
name: 'VersionsModal',
name: 'UpdatesPanel',
components: {
Modal,
VersionCard,
@ -65,14 +65,15 @@ export default Vue.extend({
</script>
<style module lang="scss">
.header-content {
.description {
padding: 0px 30px;
margin-bottom: 30px;
p {
font-size: 16px;
font-size: 14px;
line-height: 22px;
color: #7D7D87;
font-weight: 400;
}
div {
@ -98,7 +99,7 @@ export default Vue.extend({
height: 100%;
padding: 30px;
overflow-y: scroll;
padding-bottom: 140px;
padding-bottom: 220px;
}
.versions-card {
@ -107,6 +108,7 @@ export default Vue.extend({
.update {
text-decoration: none;
font-size: 14px;
svg {
color: #909399;

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

@ -5,12 +5,12 @@
<div :class="$style.name">
Version {{version.name}}
</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>
<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']">Security Update</el-tag>
<el-tag v-if="version.hasBreakingChange" size="small" :class="$style['breaking-change']">Breaking Change</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 changes</el-tag>
</div>
<div :class="$style.released">
Released {{releaseDate}}
@ -20,7 +20,6 @@
<div v-html="version.description" :class="$style.description"></div>
<div :class="$style.nodes" v-if="version.nodes && version.nodes.length > 0">
<NodeIcon
:class="$style['node-icon']"
v-for="node in version.nodes"
:key="node.name"
:nodeType="node"
@ -38,7 +37,7 @@ import NodeIcon from './NodeIcon.vue';
export default Vue.extend({
components: { NodeIcon },
name: 'VersionsModal',
name: 'UpdatesPanel',
props: ['version'],
computed: {
releaseDate() {
@ -57,6 +56,10 @@ export default Vue.extend({
padding: 15px;
padding-bottom: 10px;
text-decoration: none;
&:hover {
box-shadow: 0px 2px 10px rgba(109, 48, 40, 0.07);
}
}
.header {
@ -88,6 +91,7 @@ export default Vue.extend({
.description {
font-size: 14px;
font-weight: 400;
line-height: 19px;
color: #7D7D87;
margin-top: 15px;
@ -103,6 +107,11 @@ export default Vue.extend({
display: flex;
margin-top: 20px;
flex-wrap: wrap;
> div {
margin-right: 15px;
margin-bottom: 5px;
}
}
.security-update {
@ -110,11 +119,6 @@ export default Vue.extend({
max-height: 18px;
}
.node-icon {
margin-right: 15px;
margin-bottom: 5px;
}
.breaking-change {
background-color: rgba(255, 229, 100, 0.3);
color: #6B5900;
@ -128,6 +132,8 @@ export default Vue.extend({
}
.security-flag {
color: red;
font-size: 14px;
height: 18px;
color: #ff8080;
}
</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>) => {
context.commit('openModal', DUPLICATE_MODAL_KEY);
},
openVersionsModal: async (context: ActionContext<IUiState, IRootState>) => {
openUpdatesPanel: async (context: ActionContext<IUiState, IRootState>) => {
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 = `${message}<br/><a class="primary-color">More info</a>`;
message = `${message} <a class="primary-color">More info</a>`;
this.$showWarning('Critical Update', message, {
onClick: () => {
this.$store.dispatch('ui/openVersionsModal');
this.$store.dispatch('ui/openUpdatesPanel');
},
closeOnClick: true,
customClass: 'clickable',