Smoother messages display

This commit is contained in:
Johannes Zillmann 2021-03-07 22:51:44 +01:00
parent 1a02c41059
commit dc11204bb1

View File

@ -1,5 +1,6 @@
<script> <script>
import { slide } from 'svelte/transition'; import { slide, blur } from 'svelte/transition';
import { flip } from 'svelte/animate';
import type Debugger from '@core/Debugger'; import type Debugger from '@core/Debugger';
@ -39,11 +40,9 @@
bind:pinnedPage /> bind:pinnedPage />
<!-- Stage Messages --> <!-- Stage Messages -->
<ul <ul class="messages list-disc list-inside mb-2 p-2 bg-blue-50 rounded shadow text-sm">
class="messages list-disc list-inside mb-2 p-2 bg-blue-50 rounded shadow text-sm" {#each stageResult.messages as message (message)}
style="max-height:{stageResult.messages.length * 40}px"> <li animate:flip in:slide>{message}</li>
{#each stageResult.messages as message}
<li in:slide={{ delay: 200 }} out:slide>{message}</li>
{/each} {/each}
</ul> </ul>
@ -53,27 +52,27 @@
{:else} {:else}
<!-- No items visible --> <!-- No items visible -->
<div class="flex space-x-1 items-center justify-center text-xl"> <div class="flex space-x-1 items-center justify-center text-xl">
<div>No visible changes from the transformation.</div> <div in:blur={{ delay: 500 }}>No visible changes from the transformation.</div>
{#if supportsRelevanceFiltering && onlyRelevantItems} {#if supportsRelevanceFiltering && onlyRelevantItems}
<div>Disabled the</div> <div in:blur={{ delay: 900 }}>Disable the</div>
<div class="font-bold cursor-pointer hover:underline" on:click={() => (onlyRelevantItems = false)}> <div
in:blur={{ delay: 950 }}
class="font-bold cursor-pointer hover:underline"
on:click={() => (onlyRelevantItems = false)}>
relevance filter relevance filter
</div> </div>
<div>?</div> <div in:blur={{ delay: 990 }}>?</div>
{/if} {/if}
{#if supportsGrouping && !groupingEnabled} {#if supportsGrouping && !groupingEnabled}
<div>Enable</div> <div in:blur={{ delay: 1000 }}>Enable</div>
<div class="font-bold cursor-pointer hover:underline" on:click={() => (groupingEnabled = true)}> <div
in:blur={{ delay: 1050 }}
class="font-bold cursor-pointer hover:underline"
on:click={() => (groupingEnabled = true)}>
grouping grouping
</div> </div>
<div>?</div> <div in:blur={{ delay: 1090 }}>?</div>
{/if} {/if}
</div> </div>
{/if} {/if}
</div> </div>
<style>
.messages {
transition: max-height 0.15s ease-in-out;
}
</style>