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

feat(ui): IAICustomSelect tweak styles

Browse Source
This commit is contained in:
psychedelicious 2023-06-03 20:39:14 +10:00
parent aa3a969bd2
commit d0406024e3
2 changed files with 79 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
invokeai/frontend/web/src/common/components/IAICustomSelect.tsx
View File

@ -1,4 +1,4 @@
import { CheckIcon } from '@chakra-ui/icons'; import { CheckIcon, ChevronUpIcon } from '@chakra-ui/icons';
import { import {
Box, Box,
Flex, Flex,
@ -10,7 +10,6 @@ import {
GridItem, GridItem,
List, List,
ListItem, ListItem,
Select,
Text, Text,
Tooltip, Tooltip,
TooltipProps, TooltipProps,
@ -20,6 +19,7 @@ import { useSelect } from 'downshift';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'; import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import { memo } from 'react'; import { memo } from 'react';
import { getInputOutlineStyles } from 'theme/util/getInputOutlineStyles';
export type ItemTooltips = { [key: string]: string }; export type ItemTooltips = { [key: string]: string };
@ -82,16 +82,20 @@ const IAICustomSelect = (props: IAICustomSelectProps) => {
</FormLabel> </FormLabel>
)} )}
<Tooltip label={tooltip} {...tooltipProps}> <Tooltip label={tooltip} {...tooltipProps}>
<Select <Flex
{...getToggleButtonProps({ ref: refs.setReference })} {...getToggleButtonProps({ ref: refs.setReference })}
{...buttonProps} {...buttonProps}
as={Flex}
sx={{ sx={{
alignItems: 'center', alignItems: 'center',
userSelect: 'none', userSelect: 'none',
cursor: 'pointer', cursor: 'pointer',
overflow: 'hidden', overflow: 'hidden',
width: 'full', width: 'full',
py: 1,
px: 2,
gap: 2,
justifyContent: 'space-between',
...getInputOutlineStyles(),
}} }}
> >
<Text <Text
@ -106,7 +110,15 @@ const IAICustomSelect = (props: IAICustomSelectProps) => {
> >
{selectedItem} {selectedItem}
</Text> </Text>
</Select> <ChevronUpIcon
sx={{
color: 'base.300',
transform: isOpen ? 'rotate(0deg)' : 'rotate(180deg)',
transitionProperty: 'common',
transitionDuration: 'normal',
}}
/>
</Flex>
</Tooltip> </Tooltip>
<Box {...getMenuProps()}> <Box {...getMenuProps()}>
{isOpen && ( {isOpen && (
@ -115,9 +127,8 @@ const IAICustomSelect = (props: IAICustomSelectProps) => {
ref={refs.setFloating} ref={refs.setFloating}
sx={{ sx={{
...floatingStyles, ...floatingStyles,
width: 'full',
top: 0, top: 0,
left: 0, insetInlineStart: 0,
flexDirection: 'column', flexDirection: 'column',
zIndex: 2, zIndex: 2,
bg: 'base.800', bg: 'base.800',
@ -133,58 +144,68 @@ const IAICustomSelect = (props: IAICustomSelectProps) => {
}} }}
> >
<OverlayScrollbarsComponent> <OverlayScrollbarsComponent>
{items.map((item, index) => ( {items.map((item, index) => {
<Tooltip const isSelected = selectedItem === item;
isDisabled={!itemTooltips} const isHighlighted = highlightedIndex === index;
key={`${item}${index}`} const fontWeight = isSelected ? 700 : 500;
label={itemTooltips?.[item]} const bg = isHighlighted
hasArrow ? 'base.700'
placement="right" : isSelected
> ? 'base.750'
<ListItem : undefined;
sx={{ return (
bg: highlightedIndex === index ? 'base.700' : undefined, <Tooltip
py: 1, isDisabled={!itemTooltips}
paddingInlineStart: 3,
paddingInlineEnd: 6,
cursor: 'pointer',
transitionProperty: 'common',
transitionDuration: '0.15s',
}}
key={`${item}${index}`} key={`${item}${index}`}
{...getItemProps({ item, index })} label={itemTooltips?.[item]}
hasArrow
placement="right"
> >
{withCheckIcon ? ( <ListItem
<Grid gridTemplateColumns="1.25rem auto"> sx={{
<GridItem> bg,
{selectedItem === item && <CheckIcon boxSize={2} />} py: 1,
</GridItem> paddingInlineStart: 3,
<GridItem> paddingInlineEnd: 6,
<Text cursor: 'pointer',
sx={{ transitionProperty: 'common',
fontSize: 'sm', transitionDuration: '0.15s',
color: 'base.100', }}
fontWeight: 500, key={`${item}${index}`}
}} {...getItemProps({ item, index })}
> >
{item} {withCheckIcon ? (
</Text> <Grid gridTemplateColumns="1.25rem auto">
</GridItem> <GridItem>
</Grid> {isSelected && <CheckIcon boxSize={2} />}
) : ( </GridItem>
<Text <GridItem>
sx={{ <Text
fontSize: 'sm', sx={{
color: 'base.100', fontSize: 'sm',
fontWeight: 500, color: 'base.100',
}} fontWeight,
> }}
{item} >
</Text> {item}
)} </Text>
</ListItem> </GridItem>
</Tooltip> </Grid>
))} ) : (
<Text
sx={{
fontSize: 'sm',
color: 'base.50',
fontWeight,
}}
>
{item}
</Text>
)}
</ListItem>
</Tooltip>
);
})}
</OverlayScrollbarsComponent> </OverlayScrollbarsComponent>
</List> </List>
)} )}

2
invokeai/frontend/web/src/theme/util/getInputOutlineStyles.ts
View File

@ -1,6 +1,6 @@
import { StyleFunctionProps } from '@chakra-ui/theme-tools'; import { StyleFunctionProps } from '@chakra-ui/theme-tools';
export const getInputOutlineStyles = (_props: StyleFunctionProps) => ({ export const getInputOutlineStyles = (_props?: StyleFunctionProps) => ({
outline: 'none', outline: 'none',
borderWidth: 2, borderWidth: 2,
borderStyle: 'solid', borderStyle: 'solid',