|
|
<script lang="ts"> |
|
|
import type { FrontendGraphDataType } from "@graphite/messages"; |
|
|
|
|
|
import LayoutRow from "@graphite/components/layout/LayoutRow.svelte"; |
|
|
|
|
|
export let exposed: boolean; |
|
|
export let dataType: FrontendGraphDataType; |
|
|
export let tooltip: string | undefined = undefined; |
|
|
|
|
|
export let action: (e?: MouseEvent) => void; |
|
|
</script> |
|
|
|
|
|
<LayoutRow class="parameter-expose-button"> |
|
|
<button |
|
|
class:exposed |
|
|
style:--data-type-color={`var(--color-data-${dataType.toLowerCase()})`} |
|
|
style:--data-type-color-dim={`var(--color-data-${dataType.toLowerCase()}-dim)`} |
|
|
on:click={action} |
|
|
title={tooltip} |
|
|
tabindex="-1" |
|
|
> |
|
|
{#if !exposed} |
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"> |
|
|
<circle class="interior" r="3" cx="4" cy="4" /> |
|
|
<path |
|
|
class="outline" |
|
|
d="M4,1C5.656,1 7,2.344 7,4C7,5.656 5.656,7 4,7C2.344,7 1,5.656 1,4C1,2.344 2.344,1 4,1ZM4,2C2.896,2 2,2.896 2,4C2,5.104 2.896,6 4,6C5.104,6 6,5.104 6,4C6,2.896 5.104,2 4,2z" |
|
|
/> |
|
|
</svg> |
|
|
{:else} |
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"> |
|
|
<path class="interior" d="M0,6.306L0,1.694C0,0.228 1.06,-0.41 2.356,0.276L7.028,2.752C8.324,3.438 8.324,4.562 7.028,5.248L2.356,7.723C1.06,8.41 0,7.771 0,6.306z" /> |
|
|
<path |
|
|
class="outline" |
|
|
d="M1.364,8C0.56,8 0,7.372 0,6.306L0,1.694C0,0.228 1.06,-0.41 2.356,0.276L7.028,2.752C8.324,3.439 8.324,4.561 7.028,5.248L2.356,7.724C2.002,7.911 1.666,8 1.364,8ZM1.364,7.2C1.542,7.2 1.756,7.137 1.981,7.017L6.653,4.541C7.031,4.341 7.2,4.125 7.2,4C7.2,3.875 7.031,3.659 6.653,3.459L1.982,0.983C1.756,0.863 1.542,0.8 1.364,0.8C0.873,0.8 0.8,1.36 0.8,1.694L0.8,6.306C0.8,6.64 0.873,7.2 1.364,7.2z" |
|
|
/> |
|
|
</svg> |
|
|
{/if} |
|
|
</button> |
|
|
</LayoutRow> |
|
|
|
|
|
<style lang="scss" global> |
|
|
.parameter-expose-button { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
flex: 0 0 auto; |
|
|
max-height: 24px; |
|
|
|
|
|
button { |
|
|
flex: 0 0 auto; |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
border: none; |
|
|
background: none; |
|
|
fill: none; |
|
|
stroke: none; |
|
|
|
|
|
.outline { |
|
|
fill: none; |
|
|
} |
|
|
|
|
|
.interior { |
|
|
fill: var(--data-type-color); |
|
|
} |
|
|
|
|
|
&:hover { |
|
|
.outline { |
|
|
fill: var(--data-type-color); |
|
|
} |
|
|
|
|
|
.interior { |
|
|
fill: var(--data-type-color-dim); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</style> |
|
|
|
