Update parameter inputs to be multi-line (#2299)

* introduce analytics

* add user survey backend

* add user survey backend

* set answers on survey submit

Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>

* change name to personalization

* lint

Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>

* N8n 2495 add personalization modal (#2280)

* update modals

* add onboarding modal

* implement questions

* introduce analytics

* simplify impl

* implement survey handling

* add personalized cateogry

* update modal behavior

* add thank you view

* handle empty cases

* rename modal

* standarize modal names

* update image, add tags to headings

* remove unused file

* remove unused interfaces

* clean up footer spacing

* introduce analytics

* refactor to fix bug

* update endpoint

* set min height

* update stories

* update naming from questions to survey

* remove spacing after core categories

* fix bug in logic

* sort nodes

* rename types

* merge with be

* rename userSurvey

* clean up rest api

* use constants for keys

* use survey keys

* clean up types

* move personalization to its own file

Co-authored-by: ahsan-virani <ahsan.virani@gmail.com>

* update parameter inputs to be multiline

* update spacing

* Survey new options (#2300)

* split up options

* fix quotes

* remove unused import

* refactor node credentials

* add user created workflow event (#2301)

* update multi params

* simplify env vars

* fix versionCli on FE

* update personalization env

* clean up node detail settings

* fix event User opened Credentials panel

* fix font sizes across modals

* clean up input spacing

* fix select modal spacing

* increase spacing

* fix input copy

* fix webhook, tab spacing, retry button

* fix button sizes

* fix button size

* add mini xlarge sizes

* fix webhook spacing

* fix nodes panel event

* fix workflow id in workflow execute event

* improve telemetry error logging

* fix config and stop process events

* add flush call on n8n stop

* ready for release

* fix input error highlighting

* revert change

* update toggle spacing

* fix delete positioning

* keep tooltip while focused

* set strict size

* increase left spacing

* fix sort icons

* remove unnessary margin

* clean unused functionality

* remove unnessary css

* remove duplicate tracking

* only show tooltip when hovering over label

* update credentials section

* use includes

Co-authored-by: ahsan-virani <ahsan.virani@gmail.com>
Co-authored-by: Jan Oberhauser <jan.oberhauser@gmail.com>
This commit is contained in:
Mutasem Aldmour
2021-10-27 21:55:37 +02:00
committed by GitHub
parent 3e1fb3e0c9
commit 171f5a458c
35 changed files with 443 additions and 459 deletions

View File

@@ -1,6 +1,6 @@
<template>
<div class="paramter-input-list-wrapper">
<div v-for="parameter in filteredParameters" :key="parameter.name">
<div v-for="parameter in filteredParameters" :key="parameter.name" :class="{indent}">
<div
v-if="multipleValues(parameter) === true && parameter.type !== 'fixedCollection'"
class="parameter-item"
@@ -14,28 +14,31 @@
/>
</div>
<div v-else-if="parameter.type === 'notice'" v-html="parameter.displayName" class="parameter-item parameter-notice"></div>
<div v-else-if="parameter.type === 'notice'" class="parameter-item parameter-notice">
<n8n-text size="small">
<span v-html="parameter.displayName"></span>
</n8n-text>
</div>
<div
v-else-if="['collection', 'fixedCollection'].includes(parameter.type)"
class="multi-parameter"
>
<div class="parameter-name" :title="parameter.displayName">
<div class="delete-option clickable" title="Delete" v-if="hideDelete !== true && !isReadOnly">
<font-awesome-icon
icon="trash"
class="reset-icon clickable"
title="Parameter Options"
@click="deleteOption(parameter.name)"
/>
</div>
{{parameter.displayName}}:
<n8n-tooltip placement="top" class="parameter-info" v-if="parameter.description" >
<div slot="content" v-html="addTargetBlank(parameter.description)"></div>
<font-awesome-icon icon="question-circle"/>
</n8n-tooltip>
<div class="delete-option clickable" title="Delete" v-if="hideDelete !== true && !isReadOnly">
<font-awesome-icon
icon="trash"
class="reset-icon clickable"
title="Parameter Options"
@click="deleteOption(parameter.name)"
/>
</div>
<div>
<n8n-input-label
:label="parameter.displayName"
:tooltipText="parameter.description"
size="small"
:underline="true"
:labelHoverableOnly="true"
>
<collection-parameter
v-if="parameter.type === 'collection'"
:parameter="parameter"
@@ -52,7 +55,7 @@
:path="getPath(parameter.name)"
@valueChanged="valueChanged"
/>
</div>
</n8n-input-label>
</div>
<div v-else-if="displayNodeParameter(parameter)" class="parameter-item">
@@ -93,8 +96,6 @@ import { genericHelpers } from '@/components/mixins/genericHelpers';
import { workflowHelpers } from '@/components/mixins/workflowHelpers';
import ParameterInputFull from '@/components/ParameterInputFull.vue';
import { addTargetBlank } from './helpers';
import { get, set } from 'lodash';
import mixins from 'vue-typed-mixins';
@@ -114,6 +115,7 @@ export default mixins(
'parameters', // INodeProperties
'path', // string
'hideDelete', // boolean
'indent',
],
computed: {
filteredParameters (): INodeProperties[] {
@@ -124,7 +126,6 @@ export default mixins(
},
},
methods: {
addTargetBlank,
multipleValues (parameter: INodeProperties): boolean {
if (this.getArgument('multipleValues', parameter) === true) {
return true;
@@ -260,50 +261,42 @@ export default mixins(
position: absolute;
z-index: 999;
color: #f56c6c;
font-size: var(--font-size-2xs);
&:hover {
color: #ff0000;
}
}
.indent > div {
padding-left: var(--spacing-s);
}
.multi-parameter {
position: relative;
margin: 0.5em 0;
padding: 0.5em 0;
margin: var(--spacing-xs) 0;
>.parameter-name {
font-weight: 600;
border-bottom: 1px solid #999;
&:hover {
.parameter-info {
display: inline;
}
}
.delete-option {
top: 0;
left: -0.9em;
}
.parameter-info {
display: none;
}
.delete-option {
top: 0;
left: 0;
}
.parameter-info {
display: none;
}
}
.parameter-item {
position: relative;
margin: 8px 0;
margin: var(--spacing-xs) 0;
>.delete-option {
left: -0.9em;
top: 0.6em;
top: var(--spacing-5xs);
left: 0;
}
}
.parameter-item:hover > .delete-option,
.parameter-name:hover > .delete-option {
.multi-parameter:hover > .delete-option {
display: block;
}
@@ -311,9 +304,7 @@ export default mixins(
background-color: #fff5d3;
color: $--custom-font-black;
margin: 0.3em 0;
padding: 0.8em;
line-height: 1.5;
word-break: normal;
padding: 0.7em;
a {
font-weight: var(--font-weight-bold);