drag help box when config empty and small styling improvements

This commit is contained in:
Tako 2023-06-01 10:49:27 +00:00
parent fbdc221652
commit 6c89bb8513

View File

@ -36,7 +36,11 @@
First entry in the pairlist must be a Generating pairlist, like StaticPairList or
VolumePairList.
</b-alert>
<div ref="pairlistConfigsEl" class="flex-grow-1">
<div
ref="pairlistConfigsEl"
class="d-flex flex-column flex-grow-1 position-relative"
:class="{ empty: configEmpty }"
>
<PairlistConfigItem
v-for="(pairlist, i) in pairlistsComp"
:key="pairlist.id"
@ -84,6 +88,10 @@ const pairlistsComp = computed(() =>
}),
);
const configEmpty = computed(() => {
return pairlistStore.config.pairlists.length == 0;
});
useSortable(availablePairlistsEl, availablePairlists.value, {
group: {
name: 'configurator',
@ -92,6 +100,7 @@ useSortable(availablePairlistsEl, availablePairlists.value, {
},
sort: false,
filter: '.no-drag',
dragClass: 'dragging',
});
useSortable(pairlistConfigsEl, pairlistStore.config.pairlists, {
@ -124,22 +133,32 @@ onMounted(async () => {
<style lang="scss" scoped>
.pairlist {
border: 1px solid white;
}
.pairlist.no-drag {
color: gray;
}
.pairlist.no-drag:hover {
cursor: default;
}
.pairlist:hover {
&:hover {
cursor: grab;
}
&.no-drag {
color: gray;
}
&.no-drag:hover {
cursor: default;
}
&.dragging {
border: 1px solid white;
border-radius: 0;
}
}
[data-theme='light'] .pairlist {
border-color: black;
.empty {
border: 3px dashed rgba(255, 255, 255, 0.65);
&:after {
content: 'Drag pairlist here';
position: absolute;
align-self: center;
font-size: 1.1rem;
text-transform: uppercase;
line-height: 0;
top: 50%;
}
}
</style>