Move change symbol to own column

This commit is contained in:
Johannes Zillmann 2021-03-04 08:09:34 +01:00
parent 6f51f30e44
commit 4854844cb0

View File

@ -54,13 +54,14 @@
<!-- Item table --> <!-- Item table -->
<table class="w-full text-left"> <table class="w-full text-left">
<!-- Sticky header --> <!-- Sticky header -->
<thead class=" "> <thead class="">
<th /> <th />
<th>#</th> <th class="bg-gray-50" />
<th class="bg-gray-300 shadow">#</th>
{#each schema as column (column.name)} {#each schema as column (column.name)}
<th <th
transition:scale transition:scale
class="{column.annotation === ColumnAnnotation.ADDED ? 'text-green-800' : column.annotation === ColumnAnnotation.REMOVED ? 'text-red-800' : ''} transition-colors duration-300 delay-200"> class="bg-gray-300 shadow {column.annotation === ColumnAnnotation.ADDED ? 'text-green-800' : column.annotation === ColumnAnnotation.REMOVED ? 'text-red-800' : ''} transition-colors duration-300 delay-200">
{column.name} {column.name}
</th> </th>
{/each} {/each}
@ -89,11 +90,13 @@
{:else} {:else}
<td id="page" /> <td id="page" />
{/if} {/if}
<td class="align-baseline">
<ChangeSymbol {changes} item={itemGroup.top} />
</td>
<span class="contents" on:click={() => itemGroup.hasMany() && toggleRow(page.index, itemIdx)}> <span class="contents" on:click={() => itemGroup.hasMany() && toggleRow(page.index, itemIdx)}>
<!-- ID & change marker column --> <!-- ID & change marker column -->
<td> <td class="align-top">
<div class="flex space-x-0.5 items-center"> <div class="flex space-x-0.5 items-center">
<ChangeSymbol {changes} item={itemGroup.top} />
<div>{itemIdx}{itemGroup.hasMany() ? '…' : ''}</div> <div>{itemIdx}{itemGroup.hasMany() ? '…' : ''}</div>
</div> </div>
</td> </td>
@ -114,10 +117,12 @@
class:changeNeutral={changes.isNeutralChange(child)} class:changeNeutral={changes.isNeutralChange(child)}
class:changeMinus={changes.isMinusChange(child)}> class:changeMinus={changes.isMinusChange(child)}>
<td id="page" /> <td id="page" />
<td class="align-baseline">
<ChangeSymbol {changes} item={child} />
</td>
<td class="whitespace-nowrap"> <td class="whitespace-nowrap">
<div class="flex space-x-1"> <div class="flex space-x-1">
<div class="w-8">{'└ ' + childIdx}</div> <div class="w-8">{'└ ' + childIdx}</div>
<ChangeSymbol {changes} item={child} />
</div> </div>
</td> </td>
{#each schema as column} {#each schema as column}
@ -158,10 +163,6 @@
top: 2.6em; top: 2.6em;
z-index: 2; z-index: 2;
} }
th:not(:first-child) {
@apply bg-gray-300;
@apply shadow;
}
td:not(#page) { td:not(#page) {
@apply px-1; @apply px-1;
@apply border-b; @apply border-b;