Infi
4b94c6e30e
- Switch to IconId field name - Add unique id to every message - Automate nodejs build step via csproj - Add unread color to tab opener - Add unread number to tab name - Update ImageSharp dep
38 lines
1.2 KiB
Svelte
38 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import {tabPaneState, tabPaneAnimationState, openTabPane, knownTabs} from "$lib/shared.svelte";
|
|
|
|
function onclick() {
|
|
tabPaneAnimationState.noAnimation = false;
|
|
openTabPane();
|
|
}
|
|
</script>
|
|
|
|
<button type="button" aria-label="Open tab pane" class:visible={!tabPaneState.visible} class:unread={knownTabs.some((tab) => tab.unreadCount > 0)} {onclick} disabled={tabPaneState.visible}>
|
|
<!-- "chevron-right" icon from https://github.com/feathericons/feather, under MIT license -->
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
|
|
</button>
|
|
|
|
<style>
|
|
button {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
padding: 25px 0;
|
|
border: none;
|
|
background-color: transparent;
|
|
transform: translateY(-50%);
|
|
z-index: 100;
|
|
opacity: 0;
|
|
transition: opacity 250ms ease;
|
|
}
|
|
|
|
button.visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
button.unread svg {
|
|
stroke: var(--unread-color);
|
|
filter: drop-shadow(0 0 2px var(--unread-color));
|
|
}
|
|
</style>
|