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

View File

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

View File

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