mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
Adds asCheckbox to IAIIconButton
Rough draft of this. Not happy with the styling but it's clearer than having them look just like buttons.
This commit is contained in:
parent
f1ae6dae4c
commit
42a02bbb80
@ -1,6 +1,6 @@
|
|||||||
@use '../../styles/Mixins/' as *;
|
@use '../../styles/Mixins/' as *;
|
||||||
|
|
||||||
.icon-button {
|
.invokeai__icon-button {
|
||||||
background-color: var(--btn-grey);
|
background-color: var(--btn-grey);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
@ -14,15 +14,33 @@
|
|||||||
background-color: var(--accent-color-hover);
|
background-color: var(--accent-color-hover);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&[disabled] {
|
&[disabled] {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
&[data-variant='link'] {
|
&[data-variant='link'] {
|
||||||
background-color: none !important;
|
background: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-as-checkbox='true'] {
|
||||||
|
border: 2px solid var(--switch-bg-color);
|
||||||
|
background: none !important;
|
||||||
|
svg {
|
||||||
|
fill: var(--input-checkbox-bg);
|
||||||
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: none !important;
|
svg {
|
||||||
background: none !important;
|
fill: var(--text-color-secondary);
|
||||||
|
}
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-selected='true'] {
|
||||||
|
border-color: var(--accent-color);
|
||||||
|
&:hover {
|
||||||
|
border-color: var(--accent-color-hover);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -2,36 +2,39 @@ import {
|
|||||||
IconButtonProps,
|
IconButtonProps,
|
||||||
IconButton,
|
IconButton,
|
||||||
Tooltip,
|
Tooltip,
|
||||||
PlacementWithLogical,
|
TooltipProps,
|
||||||
|
ResponsiveValue,
|
||||||
|
ThemingProps,
|
||||||
|
isChakraTheme,
|
||||||
} from '@chakra-ui/react';
|
} from '@chakra-ui/react';
|
||||||
|
import { Variant } from 'framer-motion';
|
||||||
|
|
||||||
interface Props extends IconButtonProps {
|
interface Props extends IconButtonProps {
|
||||||
tooltip?: string;
|
|
||||||
tooltipPlacement?: PlacementWithLogical | undefined;
|
|
||||||
styleClass?: string;
|
styleClass?: string;
|
||||||
|
tooltip?: string;
|
||||||
|
tooltipProps?: Omit<TooltipProps, 'children'>;
|
||||||
|
asCheckbox?: boolean;
|
||||||
|
isChecked?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Reusable customized button component. Originally was more customized - now probably unecessary.
|
|
||||||
*/
|
|
||||||
const IAIIconButton = (props: Props) => {
|
const IAIIconButton = (props: Props) => {
|
||||||
const {
|
const {
|
||||||
tooltip = '',
|
tooltip = '',
|
||||||
tooltipPlacement = 'bottom',
|
|
||||||
styleClass,
|
styleClass,
|
||||||
onClick,
|
tooltipProps,
|
||||||
cursor,
|
asCheckbox,
|
||||||
|
isChecked,
|
||||||
...rest
|
...rest
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Tooltip label={tooltip} hasArrow placement={tooltipPlacement}>
|
<Tooltip label={tooltip} hasArrow {...tooltipProps}>
|
||||||
<IconButton
|
<IconButton
|
||||||
className={`icon-button ${styleClass}`}
|
className={`invokeai__icon-button ${styleClass}`}
|
||||||
data-variant={props.variant}
|
data-as-checkbox={asCheckbox}
|
||||||
|
data-selected={isChecked !== undefined ? isChecked : undefined}
|
||||||
|
style={props.onClick ? { cursor: 'pointer' } : {}}
|
||||||
{...rest}
|
{...rest}
|
||||||
cursor={cursor ? cursor : onClick ? 'pointer' : 'unset'}
|
|
||||||
onClick={onClick}
|
|
||||||
/>
|
/>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
);
|
);
|
||||||
|
@ -44,7 +44,7 @@ export default function InvokeButton(props: InvokeButton) {
|
|||||||
onClick={handleClickGenerate}
|
onClick={handleClickGenerate}
|
||||||
className="invoke-btn invoke"
|
className="invoke-btn invoke"
|
||||||
tooltip="Invoke"
|
tooltip="Invoke"
|
||||||
tooltipPlacement="bottom"
|
tooltipProps={{ placement: 'bottom' }}
|
||||||
{...rest}
|
{...rest}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
|
@ -15,9 +15,10 @@ const LoopbackButton = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<IAIIconButton
|
<IAIIconButton
|
||||||
aria-label="Loopback"
|
aria-label="Toggle Loopback"
|
||||||
tooltip="Loopback"
|
tooltip="Toggle Loopback"
|
||||||
data-selected={shouldLoopback}
|
asCheckbox={true}
|
||||||
|
isChecked={shouldLoopback}
|
||||||
icon={<FaRecycle />}
|
icon={<FaRecycle />}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
dispatch(setShouldLoopback(!shouldLoopback));
|
dispatch(setShouldLoopback(!shouldLoopback));
|
||||||
|
@ -13,7 +13,7 @@ const FloatingGalleryButton = () => {
|
|||||||
return (
|
return (
|
||||||
<IAIIconButton
|
<IAIIconButton
|
||||||
tooltip="Show Gallery (G)"
|
tooltip="Show Gallery (G)"
|
||||||
tooltipPlacement="top"
|
tooltipProps={{ placement: 'top' }}
|
||||||
aria-label="Show Gallery"
|
aria-label="Show Gallery"
|
||||||
styleClass="floating-show-hide-button right"
|
styleClass="floating-show-hide-button right"
|
||||||
onMouseOver={handleShowGallery}
|
onMouseOver={handleShowGallery}
|
||||||
|
@ -36,7 +36,7 @@ const FloatingOptionsPanelButtons = () => {
|
|||||||
<div className="show-hide-button-options">
|
<div className="show-hide-button-options">
|
||||||
<IAIIconButton
|
<IAIIconButton
|
||||||
tooltip="Show Options Panel (O)"
|
tooltip="Show Options Panel (O)"
|
||||||
tooltipPlacement="top"
|
tooltipProps={{ placement: 'top' }}
|
||||||
aria-label="Show Options Panel"
|
aria-label="Show Options Panel"
|
||||||
onClick={handleShowOptionsPanel}
|
onClick={handleShowOptionsPanel}
|
||||||
>
|
>
|
||||||
|
Loading…
Reference in New Issue
Block a user