mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-26 05:04:05 -08:00
Code Issues Actions 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="$style.header">
<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
v-if="!isReadOnly"
class="execute-node-button"
@ -372,6 +372,13 @@ export default mixins(
this.$externalHooks().run('nodeSettings.credentialSelected', { updateInformation });
},
nameChanged(name: string) {
// @ts-ignore
this.valueChanged({
value: name,
name: 'name',
});
},
valueChanged (parameterData: IUpdateInformation) {
let newValue: NodeParameterValue;
if (parameterData.hasOwnProperty('value')) {

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

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