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): improve embed button styles (#3676)

Browse Source 
![image](https://github.com/invoke-ai/InvokeAI/assets/4822129/33bfc9c1-f554-459c-934b-c02d2817525f)

![image](https://github.com/invoke-ai/InvokeAI/assets/4822129/7ee2d020-ebea-437c-8b92-f13e4cb148b9)
This commit is contained in:
blessedcoolant 2023-07-08 03:24:04 +12:00 committed by GitHub
commit d368a1de0c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 33 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
invokeai/frontend/web/src/features/embedding/components/AddEmbeddingButton.tsx
View File

@ -1,6 +1,6 @@
import IAIIconButton from 'common/components/IAIIconButton'; import IAIIconButton from 'common/components/IAIIconButton';
import { memo } from 'react'; import { memo } from 'react';
import { BiCode } from 'react-icons/bi'; import { FaCode } from 'react-icons/fa';
type Props = { type Props = {
onClick: () => void; onClick: () => void;
@ -13,15 +13,24 @@ const AddEmbeddingButton = (props: Props) => {
size="sm" size="sm"
aria-label="Add Embedding" aria-label="Add Embedding"
tooltip="Add Embedding" tooltip="Add Embedding"
icon={<BiCode />} icon={<FaCode />}
sx={{ sx={{
p: 2, p: 2,
color: 'base.700', color: 'base.500',
_hover: { _hover: {
color: 'base.550', color: 'base.600',
}, },
_active: { _active: {
color: 'base.700',
},
_dark: {
color: 'base.500', color: 'base.500',
_hover: {
color: 'base.400',
},
_active: {
color: 'base.300',
},
}, },
}} }}
variant="link" variant="link"

17
invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx
View File

@ -1,11 +1,10 @@
import { Box, FormControl, useDisclosure } from '@chakra-ui/react'; import { Box, FormControl, useDisclosure } from '@chakra-ui/react';
import { RootState } from 'app/store/store'; import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { ChangeEvent, KeyboardEvent, useCallback, useRef } from 'react'; import { ChangeEvent, KeyboardEvent, useCallback, useRef } from 'react';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { import {
GenerationState,
clampSymmetrySteps, clampSymmetrySteps,
setPositivePrompt, setPositivePrompt,
} from 'features/parameters/store/generationSlice'; } from 'features/parameters/store/generationSlice';
@ -22,10 +21,11 @@ import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
const promptInputSelector = createSelector( const promptInputSelector = createSelector(
[(state: RootState) => state.generation, activeTabNameSelector], [stateSelector, activeTabNameSelector],
(parameters: GenerationState, activeTabName) => { ({ generation, ui }, activeTabName) => {
return { return {
prompt: parameters.positivePrompt, shouldPinParametersPanel: ui.shouldPinParametersPanel,
prompt: generation.positivePrompt,
activeTabName, activeTabName,
}; };
}, },
@ -41,7 +41,8 @@ const promptInputSelector = createSelector(
*/ */
const ParamPositiveConditioning = () => { const ParamPositiveConditioning = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { prompt, activeTabName } = useAppSelector(promptInputSelector); const { prompt, shouldPinParametersPanel, activeTabName } =
useAppSelector(promptInputSelector);
const isReady = useIsReadyToInvoke(); const isReady = useIsReadyToInvoke();
const promptRef = useRef<HTMLTextAreaElement>(null); const promptRef = useRef<HTMLTextAreaElement>(null);
const { isOpen, onClose, onOpen } = useDisclosure(); const { isOpen, onClose, onOpen } = useDisclosure();
@ -120,7 +121,7 @@ const ParamPositiveConditioning = () => {
// }; // };
return ( return (
<Box> <Box position="relative">
<FormControl> <FormControl>
<ParamEmbeddingPopover <ParamEmbeddingPopover
isOpen={isOpen} isOpen={isOpen}
@ -144,7 +145,7 @@ const ParamPositiveConditioning = () => {
<Box <Box
sx={{ sx={{
position: 'absolute', position: 'absolute',
top: 6, top: shouldPinParametersPanel ? 6 : 0,
insetInlineEnd: 0, insetInlineEnd: 0,
}} }}
> >

13
invokeai/frontend/web/src/features/ui/components/PinParametersPanelButton.tsx
View File

@ -33,12 +33,21 @@ const PinParametersPanelButton = (props: PinParametersPanelButtonProps) => {
variant="ghost" variant="ghost"
size="sm" size="sm"
sx={{ sx={{
color: 'base.700', color: 'base.500',
_hover: { _hover: {
color: 'base.550', color: 'base.600',
}, },
_active: { _active: {
color: 'base.700',
},
_dark: {
color: 'base.500', color: 'base.500',
_hover: {
color: 'base.400',
},
_active: {
color: 'base.300',
},
}, },
...sx, ...sx,
}} }}