mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-09-17 23:38:06 +08:00
85c635f92d
* Add cancel hint to Eyedropper tool * Improve eyedropper overlay CSS * Make CSS for transparent checkered background reusable * Add color choice preview to color picker * Draw text and markers as contrasting white or black * Add reactive color updating and new/initial swapping * Add Hex, RGB, HSV, and Opacity inputs * Add none color and preset buttons * Add eyedropper button and fix alignment (now visually done) * Wire up none colors through the backend and style the ColorInput widget * Add color info chip to ColorInput widget * Fix all UX bugs * Add more tooltips * Fix FloatingMenu recursive loop * Prevent mouse stray from closing color picker while dragging pickers Closes #703 * Fix deselect all layers shortcut * Add temporary eyedropper for Chromium browsers and a coming soon fallback
38 lines
786 B
Vue
38 lines
786 B
Vue
<template>
|
|
<div
|
|
class="layout-col"
|
|
:class="{ 'scrollable-x': scrollableX, 'scrollable-y': scrollableY }"
|
|
:data-scrollable-x="scrollableX || undefined"
|
|
:data-scrollable-y="scrollableY || undefined"
|
|
:title="tooltip"
|
|
>
|
|
<slot></slot>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.layout-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
|
|
.spacer {
|
|
flex: 1 1 100%;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, type PropType } from "vue";
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
scrollableX: { type: Boolean as PropType<boolean>, default: false },
|
|
scrollableY: { type: Boolean as PropType<boolean>, default: false },
|
|
tooltip: { type: String as PropType<string | undefined>, required: false },
|
|
},
|
|
});
|
|
</script>
|