extern/kalker
1
0
Fork 0
mirror of https://github.com/PaddiM8/kalker.git synced 2025-06-24 03:31:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

Created ConsoleLine component and put a slot in KalkCalculator

Browse Source
This commit is contained in:
PaddiM8 2021-01-04 20:44:33 +01:00
parent 86800838af
commit ced63a84de
2 changed files with 24 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
kalk_web/src/ConsoleLine.svelte Normal file
View File

@ -0,0 +1,20 @@
<script lang="ts">
export let byUser = false;
</script>
<style>
p {
margin-top: 0;
margin-bottom: 5px;
word-wrap: break-word;
}
.result {
margin-bottom: 10px;
}
</style>
<svelte:options tag="console-line" />
<p class:result={!byUser}>
<slot />
</p>

21
kalk_web/src/KalkCalculator.svelte
View File

@ -1,12 +1,12 @@
<script lang="ts"> <script lang="ts">
import { afterUpdate } from "svelte"; import { afterUpdate } from "svelte";
import ConsoleLine from "./ConsoleLine.svelte";
import type { Context } from "@paddim8/kalk"; import type { Context } from "@paddim8/kalk";
export let identifierColor = "cornflowerblue"; export let identifierColor = "cornflowerblue";
export let operatorColor = "darkorange"; export let operatorColor = "darkorange";
export let promptColor = "mediumseagreen"; export let promptColor = "mediumseagreen";
export let errorColor = "tomato"; export let errorColor = "tomato";
export let hintColor = "#9c9c9c";
export let linkColor = "cornflowerblue"; export let linkColor = "cornflowerblue";
type Kalk = typeof import("@paddim8/kalk"); type Kalk = typeof import("@paddim8/kalk");
@ -258,16 +258,6 @@
margin-top: auto; margin-top: auto;
} }
.consoleLine {
margin-top: 0;
margin-bottom: 5px;
word-wrap: break-word;
}
.result {
margin-bottom: 10px;
}
.input-area { .input-area {
background-color: inherit; background-color: inherit;
display: flex; display: flex;
@ -296,17 +286,14 @@
<svelte:options tag="kalk-calculator" /> <svelte:options tag="kalk-calculator" />
<div class="calculator"> <div class="calculator">
<div class="output" bind:this={outputElement}> <div class="output" bind:this={outputElement}>
<p class="consoleLine">kalk</p> <slot />
<p class="consoleLine">
<span style="color: {hintColor}">Type 'help' for instructions.</span>
</p>
{#each outputLines as line} {#each outputLines as line}
<p class="consoleLine" class:result={!line[1]}> <console-line byUser={line[1]}>
{#if line[1]} {#if line[1]}
<span style="color: {promptColor}">&gt;&gt;</span> <span style="color: {promptColor}">&gt;&gt;</span>
{/if} {/if}
{@html line[0]} {@html line[0]}
</p> </console-line>
{/each} {/each}
</div> </div>
<div class="input-area"> <div class="input-area">