Fine tune change markers

This commit is contained in:
Johannes Zillmann 2021-03-09 19:14:56 +01:00
parent 3b0584d94b
commit d8bfee23d2
3 changed files with 19 additions and 7 deletions

View File

@ -1,12 +1,13 @@
<script>
import type ChangeIndex from '@core/debug/ChangeIndex';
import type Item from '@core/Item';
import { Addition, ContentChange, PositionChange, Direction } from '../../../core/src/debug/ChangeIndex';
import { Addition, Removal, ContentChange, PositionChange, Direction } from '../../../core/src/debug/ChangeIndex';
import ComponentDefinition from '../components/ComponentDefinition';
import {
PlusCircle as Plus,
Adjustments as Changed,
ExclamationCircle as Changed,
MinusCircle as Minus,
ArrowCircleUp as Up,
ArrowCircleDown as Down,
} from 'svelte-hero-icons';
@ -33,6 +34,9 @@
case Addition.name:
iconComp = new ComponentDefinition(Plus, args);
break;
case Removal.name:
iconComp = new ComponentDefinition(Minus, args);
break;
case ContentChange.name:
iconComp = new ComponentDefinition(Changed, args);
break;

View File

@ -44,7 +44,7 @@
{:else}
<td id="page" />
{/if}
<td class="align-baseline">
<td class="align-middle">
<ChangeSymbol {changes} item={itemGroup.top} />
</td>
<span class="contents" on:click={() => itemGroup.hasMany() && toggleRow(pageIdx, itemIdx)}>
@ -118,12 +118,12 @@
}
tr.changePlus td:not(#page) {
@apply text-green-800;
@apply text-green-700;
}
tr.changeMinus td:not(#page) {
@apply text-red-800;
@apply text-red-700;
}
tr.changeNeutral td:not(#page) {
@apply text-yellow-800;
@apply text-yellow-500;
}
</style>

View File

@ -1,6 +1,8 @@
<script>
import { scale } from 'svelte/transition';
import { PresentationChartLine } from 'svelte-hero-icons';
import type AnnotatedColumn from '@core/debug/AnnotatedColumn';
import type ChangeIndex from '@core/debug/ChangeIndex';
import type Page from '@core/debug/Page';
@ -53,7 +55,13 @@
<!-- Sticky header -->
<thead class="">
<th />
<th class="bg-gray-50" />
{#if changes.changeCount() > 0}
<th class="bg-gray-300 shadow">
<PresentationChartLine size="1x" />
</th>
{:else}
<th class="bg-gray-50" />
{/if}
<th class="bg-gray-300 shadow">#</th>
{#each schema as column (column.name)}
<th