Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): fix node opacity slider hitbox

Browse Source
This commit is contained in:
psychedelicious 2023-08-20 21:55:14 +10:00
parent f9fc89b3c5
commit 6d111aac90
2 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/NodeOpacitySlider.tsx
View File

@ -1,13 +1,13 @@
import {
Box,
Flex,
Slider,
SliderFilledTrack,
SliderThumb,
SliderTrack,
} from '@chakra-ui/react';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { useCallback } from 'react';
import { nodeOpacityChanged } from 'features/nodes/store/nodesSlice';
import { useCallback } from 'react';
export default function NodeOpacitySlider() {
const dispatch = useAppDispatch();
@ -21,7 +21,7 @@ export default function NodeOpacitySlider() {
);
return (
<Box>
<Flex alignItems="center">
<Slider
aria-label="Node Opacity"
value={nodeOpacity}
@ -31,12 +31,13 @@ export default function NodeOpacitySlider() {
onChange={handleChange}
orientation="vertical"
defaultValue={30}
h="calc(100% - 0.5rem)"
>
<SliderTrack>
<SliderFilledTrack />
</SliderTrack>
<SliderThumb />
</Slider>
</Box>
</Flex>
);
}

4
invokeai/frontend/web/src/theme/components/slider.ts
View File

@ -22,8 +22,8 @@ const invokeAIFilledTrack = defineStyle((props) => {
const invokeAIThumb = defineStyle((props) => {
return {
w: 2,
h: 4,
w: props.orientation === 'horizontal' ? 2 : 4,
h: props.orientation === 'horizontal' ? 4 : 2,
bg: mode('base.50', 'base.100')(props),
};
});