modify parameters styling

n8n-io · Nov 7, 2024 · 7752658 · 7752658
1 parent 499c54b
commit 7752658
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 122 deletions.
diff --git a/packages/design-system/src/css/_tokens.dark.scss b/packages/design-system/src/css/_tokens.dark.scss
@@ -462,6 +462,8 @@
 	--color-configurable-node-name: var(--color-text-dark);
 	--color-secondary-link: var(--prim-color-secondary-tint-200);
 	--color-secondary-link-hover: var(--prim-color-secondary-tint-100);
+	//Params
+	--color-icon-base: var(--prim-gray-320);
 }
 
 body[data-theme='dark'] {

diff --git a/packages/design-system/src/css/_tokens.scss b/packages/design-system/src/css/_tokens.scss
@@ -615,6 +615,9 @@
 	--spacing-3xl: 4rem;
 	--spacing-4xl: 8rem;
 	--spacing-5xl: 16rem;
+
+	//Params
+	--color-icon-base: var(--prim-gray-420);
 }
 
 :root {

diff --git a/packages/editor-ui/package.json b/packages/editor-ui/package.json
@@ -79,6 +79,7 @@
     "vue-markdown-render": "catalog:frontend",
     "vue-router": "catalog:frontend",
     "vue3-touch-events": "^4.1.3",
+    "vuedraggable": "4.1.0",
     "xss": "catalog:"
   },
   "devDependencies": {

diff --git a/packages/editor-ui/src/components/FixedCollectionParameter.vue b/packages/editor-ui/src/components/FixedCollectionParameter.vue
@@ -17,6 +17,7 @@ import {
 	N8nButton,
 } from 'n8n-design-system';
 import ParameterInputList from './ParameterInputList.vue';
+import Draggable from 'vuedraggable';
 
 const locale = useI18n();
 
@@ -126,42 +127,6 @@ const getOptionProperties = (optionName: string) => {
 	return undefined;
 };
 
-const moveOptionDown = (optionName: string, index: number) => {
-	if (Array.isArray(mutableValues.value[optionName])) {
-		mutableValues.value[optionName].splice(
-			index + 1,
-			0,
-			mutableValues.value[optionName].splice(index, 1)[0],
-		);
-	}
-
-	const parameterData: ValueChangedEvent = {
-		name: getPropertyPath(optionName),
-		value: mutableValues.value[optionName],
-		type: 'optionsOrderChanged',
-	};
-
-	emit('valueChanged', parameterData);
-};
-
-const moveOptionUp = (optionName: string, index: number) => {
-	if (Array.isArray(mutableValues.value[optionName])) {
-		mutableValues.value?.[optionName].splice(
-			index - 1,
-			0,
-			mutableValues.value[optionName].splice(index, 1)[0],
-		);
-	}
-
-	const parameterData: ValueChangedEvent = {
-		name: getPropertyPath(optionName),
-		value: mutableValues.value[optionName],
-		type: 'optionsOrderChanged',
-	};
-
-	emit('valueChanged', parameterData);
-};
-
 const optionSelected = (optionName: string) => {
 	const option = getOptionProperties(optionName);
 	if (option === undefined) {
@@ -219,6 +184,15 @@ const optionSelected = (optionName: string) => {
 const valueChanged = (parameterData: IUpdateInformation) => {
 	emit('valueChanged', parameterData);
 };
+const onDragChange = (optionName: string) => {
+	const parameterData: ValueChangedEvent = {
+		name: getPropertyPath(optionName),
+		value: mutableValues.value[optionName],
+		type: 'optionsOrderChanged',
+	};
+
+	emit('valueChanged', parameterData);
+};
 </script>
 
 <template>
@@ -246,55 +220,54 @@ const valueChanged = (parameterData: IUpdateInformation) => {
 				color="text-dark"
 			/>
 			<div v-if="multipleValues">
-				<div
-					v-for="(_, index) in mutableValues[property.name]"
-					:key="property.name + index"
-					class="parameter-item"
+				<Draggable
+					v-model="mutableValues[property.name]"
+					:options="{ handle: '.drag-handle' }"
+					@change="onDragChange(property.name)"
 				>
-					<div
-						:class="index ? 'border-top-dashed parameter-item-wrapper ' : 'parameter-item-wrapper'"
-					>
-						<div v-if="!isReadOnly" class="delete-option">
-							<N8nIconButton
-								type="tertiary"
-								text
-								size="mini"
-								icon="trash"
-								data-test-id="fixed-collection-delete"
-								:title="locale.baseText('fixedCollectionParameter.deleteItem')"
-								@click="deleteOption(property.name, index)"
-							></N8nIconButton>
-							<N8nIconButton
-								v-if="sortable && index !== 0"
-								type="tertiary"
-								text
-								size="mini"
-								icon="angle-up"
-								:title="locale.baseText('fixedCollectionParameter.moveUp')"
-								@click="moveOptionUp(property.name, index)"
-							></N8nIconButton>
-							<N8nIconButton
-								v-if="sortable && index !== mutableValues[property.name].length - 1"
-								type="tertiary"
-								text
-								size="mini"
-								icon="angle-down"
-								:title="locale.baseText('fixedCollectionParameter.moveDown')"
-								@click="moveOptionDown(property.name, index)"
-							></N8nIconButton>
+					<template #item="{ index }">
+						<div :key="property.name + '-' + index" class="parameter-item">
+							<div
+								:class="
+									index ? 'border-top-dashed parameter-item-wrapper ' : 'parameter-item-wrapper'
+								"
+							>
+								<div v-if="!isReadOnly" class="drag-option">
+									<N8nIconButton
+										v-if="sortable"
+										type="tertiary"
+										text
+										size="mini"
+										icon="grip-vertical"
+										:title="locale.baseText('fixedCollectionParameter.moveUp')"
+										class="drag-handle"
+									></N8nIconButton>
+								</div>
+								<Suspense>
+									<ParameterInputList
+										:parameters="property.values"
+										:node-values="nodeValues"
+										:path="getPropertyPath(property.name, index)"
+										:hide-delete="true"
+										:is-read-only="isReadOnly"
+										@value-changed="valueChanged"
+									/>
+								</Suspense>
+								<div v-if="!isReadOnly" class="delete-option">
+									<N8nIconButton
+										type="tertiary"
+										text
+										size="mini"
+										icon="trash"
+										data-test-id="fixed-collection-delete"
+										:title="locale.baseText('fixedCollectionParameter.deleteItem')"
+										@click="deleteOption(property.name, index)"
+									></N8nIconButton>
+								</div>
+							</div>
 						</div>
-						<Suspense>
-							<ParameterInputList
-								:parameters="property.values"
-								:node-values="nodeValues"
-								:path="getPropertyPath(property.name, index)"
-								:hide-delete="true"
-								:is-read-only="isReadOnly"
-								@value-changed="valueChanged"
-							/>
-						</Suspense>
-					</div>
-				</div>
+					</template>
+				</Draggable>
 			</div>
 			<div v-else class="parameter-item">
 				<div class="parameter-item-wrapper">
@@ -355,7 +328,8 @@ const valueChanged = (parameterData: IUpdateInformation) => {
 .fixed-collection-parameter {
 	padding-left: var(--spacing-s);
 
-	.delete-option {
+	.delete-option,
+	.drag-option {
 		display: flex;
 		flex-direction: column;
 	}
@@ -392,6 +366,7 @@ const valueChanged = (parameterData: IUpdateInformation) => {
 	margin: var(--spacing-xs) 0;
 }
 
+.parameter-item:hover > .parameter-item-wrapper > .drag-option,
 .parameter-item:hover > .parameter-item-wrapper > .delete-option {
 	opacity: 1;
 }

diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -520,16 +520,6 @@ function getParameterValue<T extends NodeParameterValueType = NodeParameterValue
 				v-else-if="['collection', 'fixedCollection'].includes(parameter.type)"
 				class="multi-parameter"
 			>
-				<N8nIconButton
-					v-if="hideDelete !== true && !isReadOnly && !parameter.isNodeSetting"
-					type="tertiary"
-					text
-					size="mini"
-					icon="trash"
-					class="delete-option"
-					:title="$locale.baseText('parameterInputList.delete')"
-					@click="deleteOption(parameter.name)"
-				></N8nIconButton>
 				<N8nInputLabel
 					:label="$locale.nodeText().inputLabelDisplayName(parameter, path)"
 					:tooltip-text="$locale.nodeText().inputLabelDescription(parameter, path)"
@@ -569,6 +559,16 @@ function getParameterValue<T extends NodeParameterValueType = NodeParameterValue
 					<N8nIcon icon="exclamation-triangle" size="xsmall" />
 					{{ $locale.baseText('parameterInputList.loadingError') }}
 				</N8nText>
+				<N8nIconButton
+					v-if="hideDelete !== true && !isReadOnly && !parameter.isNodeSetting"
+					type="tertiary"
+					text
+					size="mini"
+					icon="trash"
+					class="delete-option"
+					:title="$locale.baseText('parameterInputList.delete')"
+					@click="deleteOption(parameter.name)"
+				></N8nIconButton>
 			</div>
 			<ResourceMapper
 				v-else-if="parameter.type === 'resourceMapper'"
@@ -636,12 +636,25 @@ function getParameterValue<T extends NodeParameterValueType = NodeParameterValue
 
 <style lang="scss">
 .parameter-input-list-wrapper {
-	.delete-option {
+	.drag-option {
 		position: absolute;
 		opacity: 0;
-		top: 0;
+		top: 28px;
 		left: calc(-1 * var(--spacing-2xs));
 		transition: opacity 100ms ease-in;
+		color: var(--color-icon-base);
+	}
+	.delete-option {
+		position: absolute;
+		opacity: 0;
+		top: 28px;
+		right: calc(-1 * var(--spacing-2xs));
+		transition: opacity 100ms ease-in;
+		color: var(--color-icon-base);
+	}
+	.drag-option > Button:hover,
+	.delete-option > Button:hover {
+		color: var(--color-primary);
 	}
 
 	.indent > div {
@@ -660,7 +673,10 @@ function getParameterValue<T extends NodeParameterValueType = NodeParameterValue
 	.parameter-item {
 		position: relative;
 		margin: var(--spacing-xs) 0;
+		width: calc(100% - 28px);
 	}
+	.parameter-item:hover > .drag-option,
+	.multi-parameter:hover > .drag-option,
 	.parameter-item:hover > .delete-option,
 	.multi-parameter:hover > .delete-option {
 		opacity: 1;