mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-26 21:19:43 -08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix component styles

Browse source
This commit is contained in:
Mutasem 2022-03-28 13:10:10 +02:00
parent b4a49b2681
commit c3e9cbcfd6
2 changed files with 29 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
packages/editor-ui/src/components/NodeSettings.vue
View file

@ -2,7 +2,7 @@
<div class="node-settings" @keydown.stop> <div class="node-settings" @keydown.stop>
<div :class="$style.header"> <div :class="$style.header">
<div class="header-side-menu"> <div class="header-side-menu">
<NodeTitle class="node-name" :name="node.name" :nodeType="nodeType" @valueChanged="valueChanged"></NodeTitle> <NodeTitle class="node-name" :value="node.name" :nodeType="nodeType" @input="nameChanged"></NodeTitle>
<div <div
v-if="!isReadOnly" v-if="!isReadOnly"
class="execute-node-button" class="execute-node-button"
@ -372,6 +372,13 @@ export default mixins(
this.$externalHooks().run('nodeSettings.credentialSelected', { updateInformation }); this.$externalHooks().run('nodeSettings.credentialSelected', { updateInformation });
}, },
nameChanged(name: string) {
// @ts-ignore
this.valueChanged({
value: name,
name: 'name',
});
},
valueChanged (parameterData: IUpdateInformation) { valueChanged (parameterData: IUpdateInformation) {
let newValue: NodeParameterValue; let newValue: NodeParameterValue;
if (parameterData.hasOwnProperty('value')) { if (parameterData.hasOwnProperty('value')) {

30
packages/editor-ui/src/components/NodeTitle.vue
View file

@ -6,14 +6,16 @@
width="200" width="200"
:value="editName" :value="editName"
> >
<p>Rename node</p> <div :class="$style.editContainer" @keydown.enter="onRename" @keydown.stop @keydown.esc="editName = false">
<n8n-input size="small" v-model="newName" /> <n8n-text :bold="true" color="text-base">Rename node</n8n-text>
<div :class="$style.editButtons"> <n8n-input ref="input" size="small" v-model="newName" />
<n8n-button type="outline" size="small" @click="editName = false" label="Cancel" /> <div :class="$style.editButtons">
<n8n-button type="primary" size="small" @click="onRename" label="Rename" /> <n8n-button type="outline" size="small" @click="editName = false" label="Cancel" />
<n8n-button type="primary" size="small" @click="onRename" label="Rename" />
</div>
</div> </div>
<span :class="$style.title" slot="reference"> <span :class="$style.title" slot="reference">
{{name}} {{value}}
<font-awesome-icon :class="$style.editIcon" icon="pencil-alt" /> <font-awesome-icon :class="$style.editIcon" icon="pencil-alt" />
</span> </span>
</el-popover> </el-popover>
@ -26,7 +28,7 @@ import Vue from 'vue';
export default Vue.extend({ export default Vue.extend({
name: 'NodeTitle', name: 'NodeTitle',
props: { props: {
name: { value: {
type: String, type: String,
}, },
nodeType: { nodeType: {
@ -40,11 +42,17 @@ export default Vue.extend({
}, },
methods: { methods: {
onEdit() { onEdit() {
this.newName = this.name; this.newName = this.value;
this.editName = true; this.editName = true;
this.$nextTick(() => {
const input = this.$refs.input;
if (input) {
(input as HTMLInputElement).focus();
}
});
}, },
onRename() { onRename() {
this.$emit('update', this.newName); this.$emit('input', this.newName);
this.editName = false; this.editName = false;
}, },
}, },
@ -90,4 +98,8 @@ export default Vue.extend({
margin-left: var(--spacing-4xs); margin-left: var(--spacing-4xs);
} }
} }
.editContainer {
text-align: left;
}
</style> </style>