tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixes issue with sorting metadata close to compound metadata.

This commit is contained in:
mateuswetah 2024-05-09 10:42:29 -03:00
parent 24b19cb915
commit 4718e3500d
2 changed files with 26 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/views/admin/components/lists/collection-metadata-list.vue
View File

@ -260,7 +260,7 @@
<!-- The Metadata list, inside each metadata section --> <!-- The Metadata list, inside each metadata section -->
<template v-if="metadataSection.metadata_object_list && Array.isArray(metadataSection.metadata_object_list)"> <template v-if="metadataSection.metadata_object_list && Array.isArray(metadataSection.metadata_object_list)">
<sortable <sortable
:list="metadataSection.metadata_object_list" :list="metadataSection.metadata_object_list.filter((metadatum) => metadatum != undefined && metadatum.parent == 0)"
item-key="id" item-key="id"
class="active-metadata-area" class="active-metadata-area"
:options="{ :options="{
@ -284,7 +284,6 @@
@remove="handleChange($event, sectionIndex)"> @remove="handleChange($event, sectionIndex)">
<template #item="{ element: metadatum, index }"> <template #item="{ element: metadatum, index }">
<div <div
v-if="metadatum != undefined && metadatum.parent == 0"
v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)" v-show="(metadataNameFilterString == '' || filterByMetadatumName(metadatum)) && filterByMetadatumType(metadatum)"
:key="metadatum.id" :key="metadatum.id"
:data-metadatum-id="metadatum.id" :data-metadatum-id="metadatum.id"
@ -461,7 +460,6 @@
v-if="isCollapseOpen(metadatum.id) && openedMetadatumId !== metadatum.id" v-if="isCollapseOpen(metadatum.id) && openedMetadatumId !== metadatum.id"
:metadatum="metadatum" /> :metadatum="metadatum" />
</transition> </transition>
</div>
<!-- Child metadata list, inside each compound metadata --> <!-- Child metadata list, inside each compound metadata -->
<child-metadata-list <child-metadata-list
@ -474,9 +472,10 @@
:is-repository-level="false" :is-repository-level="false"
:collapse-all="collapseAll" :collapse-all="collapseAll"
:section-id="metadataSection.id + ''" /> :section-id="metadataSection.id + ''" />
</div>
<!-- Metadata edition form, for each metadata --> <!-- Metadata edition form, for each metadata -->
<b-modal <b-modal
v-if="openedMetadatumId == metadatum.id"
:model-value="openedMetadatumId == metadatum.id" :model-value="openedMetadatumId == metadatum.id"
trap-focus trap-focus
aria-modal aria-modal
@ -492,8 +491,8 @@
@on-edition-finished="onEditionFinished()" @on-edition-finished="onEditionFinished()"
@on-edition-canceled="onEditionCanceled()" /> @on-edition-canceled="onEditionCanceled()" />
</b-modal> </b-modal>
</template> </template>
</sortable><!-- End of .active-metadata-area --> </sortable><!-- End of .active-metadata-area -->
</template> </template>
@ -679,7 +678,6 @@ export default {
handleChange($event, sectionIndex) { handleChange($event, sectionIndex) {
switch ( $event.type ) { switch ( $event.type ) {
case 'add': case 'add':
if ( !$event.from.classList.contains('active-metadata-area') ) { if ( !$event.from.classList.contains('active-metadata-area') ) {
this.addNewMetadatum(this.getMetadatumTypes()[$event.oldIndex], $event.newIndex, sectionIndex); this.addNewMetadatum(this.getMetadatumTypes()[$event.oldIndex], $event.newIndex, sectionIndex);
$event.to.removeChild($event.item) $event.to.removeChild($event.item)

22
src/views/admin/pages/lists/metadata-page.vue
View File

@ -294,16 +294,12 @@ export default {
margin-left: 1.5em; margin-left: 1.5em;
padding-right: 1em; padding-right: 1em;
min-height: 330px; min-height: 330px;
.active-metadata-area {
margin-left: 0.5rem;
}
} }
.active-metadatum-item, .active-metadatum-item,
.active-metadata-sections-item { .active-metadata-sections-item {
background-color: var(--tainacan-white); background-color: var(--tainacan-white);
padding: 0.7em 0.9em; padding: 0;
margin: 0px 4px; margin: 0px 4px;
min-height: 2.8571em; min-height: 2.8571em;
display: block; display: block;
@ -316,7 +312,7 @@ export default {
} }
.handle { .handle {
padding-right: 6em; padding: 0.7em 6.9em 0.7em 0.9em;
white-space: nowrap; white-space: nowrap;
display: flex; display: flex;
} }
@ -410,13 +406,11 @@ export default {
} }
} }
} }
&:not(.not-sortable-item):hover { &:not(.not-sortable-item) .handle:hover >.sorting-buttons {
.sorting-buttons {
opacity: 1.0; opacity: 1.0;
visibility: visible; visibility: visible;
left: -2em left: -2em
} }
}
&.is-compact-item .metadatum-name { &.is-compact-item .metadatum-name {
text-overflow: ellipsis; text-overflow: ellipsis;
@ -453,8 +447,8 @@ export default {
.active-filter-item:hover.not-sortable-item .icon-level-identifier .tainacan-icon::before { .active-filter-item:hover.not-sortable-item .icon-level-identifier .tainacan-icon::before {
color: var(--tainacan-gray3) !important; color: var(--tainacan-gray3) !important;
} }
.active-metadatum-item:hover:not(.not-sortable-item), .active-metadatum-item:not(.not-sortable-item) .handle:hover,
.active-metadata-sections-item:hover:not(.not-sortable-item) { .active-metadata-sections-item:hover:not(.not-sortable-item) .handle:hover {
background-color: var(--tainacan-turquoise1); background-color: var(--tainacan-turquoise1);
border-color: var(--tainacan-turquoise1); border-color: var(--tainacan-turquoise1);
@ -487,8 +481,8 @@ export default {
&::before { background-color: var(--tainacan-blue5); } &::before { background-color: var(--tainacan-blue5); }
} }
&.active-metadatum-item:hover:not(.not-sortable-item), &.active-metadatum-item:not(.not-sortable-item) .handle:hover,
&.active-metadata-sections-item:hover:not(.not-sortable-item) { &.active-metadata-sections-item:not(.not-sortable-item) .handle:hover {
background-color: var(--tainacan-blue1); background-color: var(--tainacan-blue1);
border-color: var(--tainacan-blue1); border-color: var(--tainacan-blue1);
@ -496,7 +490,7 @@ export default {
color: var(--tainacan-blue5) !important; color: var(--tainacan-blue5) !important;
} }
} }
.sorting-buttons button { & > .sorting-buttons button {
background: var(--tainacan-blue1); background: var(--tainacan-blue1);
&:hover { &:hover {
color: var(--tainacan-blue5); color: var(--tainacan-blue5);