Files
Graphite/frontend/src/components/widgets/buttons/ParameterExposeButton.vue
0HyperCube 2732492307 Make Imaginate into a node (#878)
* Simplify document node input defenitions

* Remove imaginate layer

* Imaginate node properties

* Fix serde feature gate

* Add Proc Macro for Protonode implementation

* Fix incorrect type

* Add cargo.toml metadata

* Send imaginate params to frontend

* Fix image_creativity range

* Finish imaginate implementation

* Fix the imaginate draw tool

* Remove node-graph/rpco-macro

* Cargo fmt

* Fix missing workspace member

* Changes to the resolution

* Add checkbox for Imaginate auto resolution; improve Properties panel layouts

And fix bugs in panel resizing

* Implement the Rescale button

* Reorder imports

* Update Rust deps

Co-authored-by: Keavon Chambers <keavon@keavon.com>
2022-12-20 22:51:38 +00:00

60 lines
1.3 KiB
Vue

<template>
<LayoutRow class="parameter-expose-button">
<button :class="{ exposed }" :style="{ '--data-type-color': `var(--color-data-${dataType})` }" @click="(e: MouseEvent) => action(e)" :title="tooltip" :tabindex="0"></button>
</LayoutRow>
</template>
<style lang="scss">
.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;
border-radius: 50%;
&:not(.exposed) {
background: none;
border: 1px solid var(--data-type-color);
&:hover {
background: var(--color-6-lowergray);
}
}
&.exposed {
background: var(--data-type-color);
&:hover {
border: 1px solid var(--color-f-white);
}
}
}
}
</style>
<script lang="ts">
import { defineComponent, type PropType } from "vue";
import LayoutRow from "@/components/layout/LayoutRow.vue";
export default defineComponent({
props: {
exposed: { type: Boolean as PropType<boolean>, required: true },
dataType: { type: String as PropType<string>, required: true },
tooltip: { type: String as PropType<string | undefined>, required: false },
// Callbacks
action: { type: Function as PropType<(e?: MouseEvent) => void>, required: true },
},
components: { LayoutRow },
});
</script>