0ct0pu5/webvm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rename buttonIcon to buttomImage

Browse source 
In preparation for supporting actual icons
This commit is contained in:
Alessandro Pignotti 2024-10-18 11:41:19 +02:00
parent 4fc2577819
commit 236863a0b0
5 changed files with 10 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/lib/CpuTab.svelte
View file

@ -4,7 +4,7 @@
</script>
<h1 class="text-lg font-bold">Engine</h1>
<PanelButton buttonIcon="assets/cheerpx.svg" clickUrl="https://cheerpx.io/docs" buttonText="Explore CheerpX">
<PanelButton buttonImage="assets/cheerpx.svg" clickUrl="https://cheerpx.io/docs" buttonText="Explore CheerpX">
</PanelButton>
<p><span class="font-bold">Load: </span>{$cpuPercentage}%</p>
<p>CheerpX is a x86 virtualization engine in WebAssembly</p>

2
src/lib/DiscordTab.svelte
View file

@ -4,7 +4,7 @@
</script>
<h1 class="text-lg font-bold">Discord</h1>
<PanelButton buttonIcon="assets/discord-mark-blue.svg" clickUrl="https://discord.gg/yTNZgySKGa" buttonText="Join our Discord">
<PanelButton buttonImage="assets/discord-mark-blue.svg" clickUrl="https://discord.gg/yTNZgySKGa" buttonText="Join our Discord">
<i class='fas fa-circle fa-xs ml-auto text-green-500'></i>
<span class="ml-1"><DiscordPresenceCount /></span>
</PanelButton>

2
src/lib/GitHubTab.svelte
View file

@ -4,7 +4,7 @@
</script>
<h1 class="text-lg font-bold">GitHub</h1>
<PanelButton buttonIcon="assets/github-mark-white.svg" clickUrl="https://github.com/leaningtech/webvm" buttonText="GitHub repo">
<PanelButton buttonImage="assets/github-mark-white.svg" clickUrl="https://github.com/leaningtech/webvm" buttonText="GitHub repo">
<i class='fas fa-star fa-xs ml-auto'></i>
<span class="ml-1"><GitHubStarCount repo="leaningtech/webvm"/></span>
</PanelButton>

2
src/lib/NetworkingTab.svelte
View file

@ -99,7 +99,7 @@
}
</script>
<h1 class="text-lg font-bold">Networking</h1>
<PanelButton buttonIcon="assets/tailscale.svg" clickUrl={getClickUrl($connectionState)} clickHandler={getClickHandler($connectionState)} rightClickHandler={getRightClickHandler($connectionState)} buttonTooltip={getButtonTooltip($connectionState)} buttonText={getButtonText($connectionState)}>
<PanelButton buttonImage="assets/tailscale.svg" clickUrl={getClickUrl($connectionState)} clickHandler={getClickHandler($connectionState)} rightClickHandler={getRightClickHandler($connectionState)} buttonTooltip={getButtonTooltip($connectionState)} buttonText={getButtonText($connectionState)}>
{#if $connectionState == "CONNECTED"}
<i class='fas fa-circle fa-xs ml-auto {$exitNode ? 'text-green-500' : 'text-amber-500'}' title={$exitNode ? 'Ready' : 'No exit node'}></i>
{/if}

8
src/lib/PanelButton.svelte
View file

@ -3,8 +3,12 @@
export let clickHandler = null;
export let rightClickHandler = null;
export let buttonTooltip = null;
export let buttonImage = null;
export let buttonText;
export let buttonIcon;
</script>
<a href={clickUrl} target="_blank" on:click={clickHandler} on:contextmenu={rightClickHandler}><p class="flex flex-row items-center bg-neutral-700 p-2 rounded-md shadow-md shadow-neutral-900 {(clickUrl != null || clickHandler != null) ? "hover:bg-neutral-500 cursor-pointer" : ""}" title={buttonTooltip}><img src={buttonIcon} class="inline w-8 h-8"/><span class="ml-1">{buttonText}</span><slot></slot></p></a>
<a href={clickUrl} target="_blank" on:click={clickHandler} on:contextmenu={rightClickHandler}><p class="flex flex-row items-center bg-neutral-700 p-2 rounded-md shadow-md shadow-neutral-900 {(clickUrl != null || clickHandler != null) ? "hover:bg-neutral-500 cursor-pointer" : ""}" title={buttonTooltip}>
{#if buttonImage}
<img src={buttonImage} class="inline w-8 h-8"/>
{/if}
<span class="ml-1">{buttonText}</span><slot></slot></p></a>