1
0
Fork 0
mirror of synced 2024-07-03 21:40:55 +12:00

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 832e3bd76e
commit ea1b65fde8
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