Updating the tooltip button to have an info icon like the labels on the right instead.

This commit is contained in:
mike12345567 2022-02-08 17:17:00 +00:00
parent d13985af3f
commit 6199f06ea9
2 changed files with 20 additions and 4 deletions

View File

@ -45,6 +45,18 @@
{#if $$slots} {#if $$slots}
<span class="spectrum-Button-label"><slot /></span> <span class="spectrum-Button-label"><slot /></span>
{/if} {/if}
{#if !disabled && tooltip}
<div class="tooltip-icon">
<svg
class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
focusable="false"
aria-hidden="true"
aria-label="Info"
>
<use xlink:href="#spectrum-icon-18-InfoOutline" />
</svg>
</div>
{/if}
</button> </button>
{#if showTooltip && tooltip} {#if showTooltip && tooltip}
<div class="position"> <div class="position">
@ -84,4 +96,8 @@
width: 0; width: 0;
height: 0; height: 0;
} }
.tooltip-icon {
padding-left: var(--spacing-m);
line-height: 0;
}
</style> </style>

View File

@ -59,7 +59,9 @@
$: schemaReadOnly = !responseSuccess $: schemaReadOnly = !responseSuccess
$: variablesReadOnly = !responseSuccess $: variablesReadOnly = !responseSuccess
$: showVariablesTab = shouldShowVariables(dynamicVariables, variablesReadOnly) $: showVariablesTab = shouldShowVariables(dynamicVariables, variablesReadOnly)
$: hasSchema = !!query?.schema $: hasSchema =
Object.keys(schema || {}).length !== 0 ||
Object.keys(query?.schema || {}).length !== 0
function getSelectedQuery() { function getSelectedQuery() {
return cloneDeep( return cloneDeep(
@ -318,10 +320,8 @@
<Button primary disabled={!url} on:click={runQuery}>Send</Button> <Button primary disabled={!url} on:click={runQuery}>Send</Button>
<Button <Button
disabled={!query.name} disabled={!query.name}
cta={hasSchema} cta
warning={!hasSchema}
on:click={saveQuery} on:click={saveQuery}
icon={!hasSchema && query.name ? "Alert" : null}
tooltip={!hasSchema tooltip={!hasSchema
? "Saving a query before sending will mean no schema is generated" ? "Saving a query before sending will mean no schema is generated"
: null}>Save</Button : null}>Save</Button