diff --git a/packages/design-system/src/components/index.js b/packages/design-system/src/components/index.js
index b588407055..0d09311c45 100644
--- a/packages/design-system/src/components/index.js
+++ b/packages/design-system/src/components/index.js
@@ -29,6 +29,7 @@ import Loading from 'element-ui/lib/loading';
import MessageBox from 'element-ui/lib/message-box';
import Message from 'element-ui/lib/message';
import Notification from 'element-ui/lib/notification';
+import Popover from 'element-ui/lib/popover';
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
import N8nActionBox from './N8nActionBox';
@@ -128,6 +129,7 @@ export {
Message,
Notification,
CollapseTransition,
+ Popover,
locale,
};
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 7601159af1..95a143287d 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -10,7 +10,6 @@
@@ -577,6 +576,7 @@ export default mixins(
> * {
padding: 0 var(--spacing-s) var(--spacing-2xs) var(--spacing-s);
padding-bottom: var(--spacing-2xs);
+ font-size: var(--font-size-s);
cursor: pointer;
&:hover {
color: var(--color-primary);
@@ -623,7 +623,7 @@ export default mixins(
}
.header-side-menu {
- padding: var(--spacing-s) var(--spacing-s) var(--spacing-l) var(--spacing-s);
+ padding: var(--spacing-s) var(--spacing-s) var(--spacing-2xs) var(--spacing-s);
font-size: var(--font-size-l);
display: flex;
diff --git a/packages/editor-ui/src/components/NodeTitle.vue b/packages/editor-ui/src/components/NodeTitle.vue
index 91bff2269d..94a7960bc1 100644
--- a/packages/editor-ui/src/components/NodeTitle.vue
+++ b/packages/editor-ui/src/components/NodeTitle.vue
@@ -1,7 +1,22 @@
-
+
- {{name}}
+
+ Rename node
+
+
+
+
+
+
+ {{name}}
+
+
+
@@ -17,6 +32,22 @@ export default Vue.extend({
nodeType: {
},
},
+ data() {
+ return {
+ editName: false,
+ newName: '',
+ };
+ },
+ methods: {
+ onEdit() {
+ this.newName = this.name;
+ this.editName = true;
+ },
+ onRename() {
+ this.$emit('update', this.newName);
+ this.editName = false;
+ },
+ },
});
@@ -26,10 +57,37 @@ export default Vue.extend({
display: flex;
font-size: var(--font-size-m);
line-height: var(--font-line-height-compact);
+ overflow-wrap: anywhere;
+ height: 60px;
+ overflow: hidden;
+}
+
+.title {
+ text-overflow: ellipsis;
+
+ &:hover {
+ .editIcon {
+ display: inline-block;
+ }
+ }
}
.iconWrapper {
display: inline-flex;
margin-right: var(--spacing-2xs);
}
+
+.editIcon {
+ display: none;
+ font-size: var(--font-size-2xs);
+}
+
+.editButtons {
+ text-align: right;
+ margin-top: var(--spacing-s);
+
+ > * {
+ margin-left: var(--spacing-4xs);
+ }
+}
diff --git a/packages/editor-ui/src/plugins/components.ts b/packages/editor-ui/src/plugins/components.ts
index 9a6cca9964..c6ac92877d 100644
--- a/packages/editor-ui/src/plugins/components.ts
+++ b/packages/editor-ui/src/plugins/components.ts
@@ -41,6 +41,7 @@ import {
Message,
Notification,
CollapseTransition,
+ Popover,
N8nActionBox,
N8nAvatar,
@@ -130,6 +131,8 @@ Vue.use(Badge);
Vue.use(Card);
Vue.use(ColorPicker);
Vue.use(Container);
+Vue.use(Popover);
+
Vue.use(VueAgile);
Vue.component(CollapseTransition.name, CollapseTransition);
diff --git a/packages/editor-ui/src/plugins/icons.ts b/packages/editor-ui/src/plugins/icons.ts
index 22908d518d..f7c86d9ec4 100644
--- a/packages/editor-ui/src/plugins/icons.ts
+++ b/packages/editor-ui/src/plugins/icons.ts
@@ -61,6 +61,7 @@ import {
faPause,
faPauseCircle,
faPen,
+ faPencilAlt,
faPlay,
faPlayCircle,
faPlus,
@@ -158,6 +159,7 @@ addIcon(faNetworkWired);
addIcon(faPause);
addIcon(faPauseCircle);
addIcon(faPen);
+addIcon(faPencilAlt);
addIcon(faPlay);
addIcon(faPlayCircle);
addIcon(faPlus);