mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-11-14 00:24:07 -08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Style the draggable component

Browse source 
Co-authored-by: Elias Meire <elsmr@users.noreply.github.com>
This commit is contained in:
Shireen Missi 2024-11-13 10:26:18 +00:00
parent 7752658d33
commit 291df28ad4
No known key found for this signature in database
GPG key ID: D213F10998FACC51
2 changed files with 22 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
packages/editor-ui/src/components/FixedCollectionParameter.vue
View file

@ -222,7 +222,12 @@ const onDragChange = (optionName: string) => {
<div v-if="multipleValues">
<Draggable
v-model="mutableValues[property.name]"
:options="{ handle: '.drag-handle' }"
:options="{
handle: '.drag-handle',
}"
drag-class="dragging"
ghost-class="ghost"
chosen-class="chosen"
@change="onDragChange(property.name)"
>
<template #item="{ index }">
@ -364,6 +369,7 @@ const onDragChange = (optionName: string) => {
.fixed-collection-parameter-property {
margin: var(--spacing-xs) 0;
margin-bottom: 0;
}
.parameter-item:hover > .parameter-item-wrapper > .drag-option,
@ -373,7 +379,7 @@ const onDragChange = (optionName: string) => {
.parameter-item {
position: relative;
padding: 0 0 0 1em;
padding: 0 0 var(--spacing-s) var(--spacing-s);
+ .parameter-item {
.parameter-item-wrapper {
@ -391,4 +397,17 @@ const onDragChange = (optionName: string) => {
.no-items-exist {
margin: var(--spacing-xs) 0;
}
.chosen {
// background-color: var(--color-background-base);
}
.ghost {
background-color: var(--color-background-base);
}
.dragging {
background-color: var(--color-background-xlight);
.parameter-item-wrapper {
border: none;
}
}
</style>

2
packages/editor-ui/src/components/ParameterInputList.vue
View file

@ -673,7 +673,7 @@ function getParameterValue<T extends NodeParameterValueType = NodeParameterValue
.parameter-item {
position: relative;
margin: var(--spacing-xs) 0;
width: calc(100% - 28px);
// width: calc(100% - 28px);
}
.parameter-item:hover > .drag-option,
.multi-parameter:hover > .drag-option,