aboutsummaryrefslogtreecommitdiff
path: root/source/library/components/Toolbar.svelte
diff options
context:
space:
mode:
Diffstat (limited to 'source/library/components/Toolbar.svelte')
-rw-r--r--source/library/components/Toolbar.svelte130
1 files changed, 91 insertions, 39 deletions
diff --git a/source/library/components/Toolbar.svelte b/source/library/components/Toolbar.svelte
index 9882b7d..37cc7ce 100644
--- a/source/library/components/Toolbar.svelte
+++ b/source/library/components/Toolbar.svelte
@@ -1,7 +1,10 @@
<script lang="ts">
- import type { OperationInfo } from "../graphql/operations.ts";
+ /*** IMPORT ------------------------------------------- ***/
import type { Snippet } from "svelte";
+ /*** UTILITY ------------------------------------------ ***/
+ import type { OperationInfo } from "../graphql/operations.ts";
+
type Props = {
disabled: boolean;
docsAvailable?: boolean;
@@ -38,6 +41,7 @@
const namedOperations = $derived(operations.filter((o) => o.name !== null));
+ /*** HELPER ------------------------------------------- ***/
function onPick(event: Event) {
const value = (event.currentTarget as HTMLSelectElement).value;
onSelectOperation?.(value || null);
@@ -47,41 +51,70 @@
<style lang="scss">
.toolbar {
align-items: center;
- background: var(--graphiql-panel, #252526);
- border-bottom: 1px solid var(--graphiql-border, #333);
+ background-color: var(--uchu-yang);
display: flex;
gap: 0.75rem;
padding: 0.5rem 0.75rem;
}
- .run {
- background: var(--graphiql-accent, #0e639c);
+ .run,
+ .toggle {
+ align-items: center;
border: none;
- border-radius: 3px;
- color: #fff;
- cursor: pointer;
- font-size: 0.875rem;
- padding: 0.375rem 1rem;
+ display: flex;
+ flex-direction: row;
+ font-size: 0.8rem;
+ padding: 0.2rem 0.75rem 0.2rem 0.5rem;
+
+ &:not(:disabled) {
+ cursor: pointer;
+ }
&:disabled {
cursor: not-allowed;
opacity: 0.5;
}
+
+ svg {
+ width: 1rem; height: 1rem;
+
+ fill: currentColor;
+ margin-right: 0.25rem;
+ }
+ }
+
+ .run {
+ background-color: var(--uchu-orange-5);
+ color: var(--uchu-yang);
+
+ &:hover:not(:disabled) {
+ color: var(--uchu-orange-1);
+ }
}
.hint {
- color: var(--graphiql-muted, #858585);
+ color: var(--uchu-yin-5);
font-size: 0.75rem;
}
.picker {
- background: var(--graphiql-bg, #1e1e1e);
- border: 1px solid var(--graphiql-border, #333);
- border-radius: 3px;
- color: var(--graphiql-fg, #d4d4d4);
- font-family: inherit;
- font-size: 0.8125rem;
- padding: 0.25rem 0.5rem;
+ border: none;
+ border-radius: 0;
+ font-size: 0.8rem;
+ padding: 0.2rem 0.75rem 0.2rem 0.5rem;
+
+ &:not(:focus-visible) {
+ background-color: var(--uchu-gray-1);
+ color: var(--uchu-yin-5);
+ }
+
+ &:focus-visible {
+ background-color: var(--uchu-orange-5);
+ color: var(--uchu-yang);
+ outline-color: var(--uchu-orange-5);
+ outline-offset: -1px;
+ outline-style: solid;
+ }
}
.spacer {
@@ -89,35 +122,28 @@
}
.toggle {
- background: none;
- border: 1px solid var(--graphiql-border, #333);
- border-radius: 3px;
- color: var(--graphiql-muted, #858585);
- cursor: pointer;
- font-family: inherit;
- font-size: 0.75rem;
- padding: 0.25rem 0.625rem;
+ background-color: var(--uchu-gray-1);
+ color: var(--uchu-yin-5);
&.active {
- background: var(--graphiql-bg, #1e1e1e);
- color: var(--graphiql-fg, #d4d4d4);
- }
-
- &:disabled {
- cursor: not-allowed;
- opacity: 0.4;
+ background-color: var(--uchu-yin);
+ color: var(--uchu-yang);
}
- &:hover:not(:disabled) {
- color: var(--graphiql-fg, #d4d4d4);
+ &:not(.active):hover:not(:disabled) {
+ color: var(--uchu-yin-8);
}
}
</style>
<div class="toolbar">
<button class="run" {disabled} onclick={onRun}>
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+ <path d="M4 3.53711V20.4642L20.927 12.0006L4 3.53711Z"/>
+ </svg>
{running ? "Running…" : "Run"}
</button>
+
{#if namedOperations.length > 1}
<select
aria-label="Operation"
@@ -130,23 +156,43 @@
{/each}
</select>
{/if}
+
{#if onFormat}
- <button class="toggle" {disabled} onclick={onFormat} type="button">Format</button>
+ <button class="toggle" {disabled} onclick={onFormat} type="button">
+ <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+ <path d="M20.646 3.36267C20.0461 2.75178 19.7917 1.83922 19.7917 1H19.2083C19.2083 1.83575 18.9563 2.74893 18.3526 3.35264C17.7489 3.95635 16.8358 4.20833 16 4.20833V4.79167C16.8392 4.79167 17.7518 5.04611 18.3627 5.64596C18.9822 6.25433 19.2083 7.15499 19.2083 8H19.7917C19.7917 7.15156 20.0203 6.25159 20.6359 5.63594C21.2516 5.02029 22.1516 4.79167 23 4.79167V4.20833C22.155 4.20833 21.2543 3.98225 20.646 3.36267Z"/>
+ <path d="M2 13.75C5.03345 13.75 7.04641 14.4196 8.31342 15.6866C9.58043 16.9536 10.25 18.9666 10.25 22H11.75C11.75 18.9666 12.4196 16.9536 13.6866 15.6866C14.9536 14.4196 16.9666 13.75 20 13.75V12.25C16.9666 12.25 14.9536 11.5804 13.6866 10.3134C12.4196 9.04641 11.75 7.03345 11.75 4H10.25C10.25 7.03345 9.58043 9.04641 8.31342 10.3134C7.04641 11.5804 5.03345 12.25 2 12.25V13.75Z"/>
+ </svg>
+ Format
+ </button>
{/if}
+
{#if extras}{@render extras()}{/if}
- <span class="hint">⌘/Ctrl + Enter</span>
+
{#if schemaLoading}
<span class="hint">Loading schema…</span>
{/if}
+
<span class="spacer"></span>
+
{#if onToggleHistory}
<button
aria-pressed={historyOpen}
class="toggle"
class:active={historyOpen}
onclick={onToggleHistory}
- type="button">History</button>
+ type="button">
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path d="M7 8C7 8.55228 6.55228 9 6 9C5.44772 9 5 8.55228 5 8C5 7.44772 5.44772 7 6 7C6.55228 7 7 7.44772 7 8Z"/>
+ <path d="M10 8C10 8.55228 9.55228 9 9 9C8.44772 9 8 8.55228 8 8C8 7.44772 8.44772 7 9 7C9.55228 7 10 7.44772 10 8Z"/>
+ <path d="M12 9C12.5523 9 13 8.55228 13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9Z"/>
+ <path d="M2 4V20H11V18.5H3.5V5.5H20.5V9H22V4H2Z"/>
+ <path d="M13 16.75C14.6446 16.75 15.6575 17.114 16.2718 17.7282C16.886 18.3425 17.25 19.3554 17.25 21H18.75C18.75 19.3554 19.114 18.3425 19.7282 17.7282C20.3425 17.114 21.3554 16.75 23 16.75V15.25C21.3554 15.25 20.3425 14.886 19.7282 14.2718C19.114 13.6575 18.75 12.6446 18.75 11H17.25C17.25 12.6446 16.886 13.6575 16.2718 14.2718C15.6575 14.886 14.6446 15.25 13 15.25V16.75Z"/>
+ </svg>
+ History
+ </button>
{/if}
+
{#if onToggleDocs}
<button
aria-pressed={docsOpen}
@@ -154,6 +200,12 @@
class:active={docsOpen}
disabled={!docsAvailable}
onclick={onToggleDocs}
- type="button">Docs</button>
+ type="button">
+ <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 4V5L16.5 6.5L18 9.5H19L20.5 6.5L21 6.25V21H3V3H15.5L13.5 4ZM7 16.5H14V15H7V16.5ZM7 12.75H10.5V11.25H7V12.75ZM12 12.75H17V11.25H12V12.75ZM7 9H13V7.5H7V9Z"/>
+ <path d="M18.5 1L19.4453 3.55468L22 4.5L19.4453 5.44532L18.5 8L17.5547 5.44532L15 4.5L17.5547 3.55468L18.5 1Z"/>
+ </svg>
+ Docs
+ </button>
{/if}
</div>