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 { memo } from 'react';
import { BiCode } from 'react-icons/bi';
import { FaCode } from 'react-icons/fa';
type Props = {
onClick: () => void;
@ -13,15 +13,24 @@ const AddEmbeddingButton = (props: Props) => {
size="sm"
aria-label="Add Embedding"
tooltip="Add Embedding"
icon={<BiCode />}
icon={<FaCode />}
sx={{
p: 2,
color: 'base.700',
color: 'base.500',
_hover: {
color: 'base.550',
color: 'base.600',
},
_active: {
color: 'base.700',
},
_dark: {
color: 'base.500',
_hover: {
color: 'base.400',
},
_active: {
color: 'base.300',
},
},
}}
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 { RootState } from 'app/store/store';
import { stateSelector } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { ChangeEvent, KeyboardEvent, useCallback, useRef } from 'react';
import { createSelector } from '@reduxjs/toolkit';
import {
GenerationState,
clampSymmetrySteps,
setPositivePrompt,
} from 'features/parameters/store/generationSlice';
@ -22,10 +21,11 @@ import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next';
const promptInputSelector = createSelector(
[(state: RootState) => state.generation, activeTabNameSelector],
(parameters: GenerationState, activeTabName) => {
[stateSelector, activeTabNameSelector],
({ generation, ui }, activeTabName) => {
return {
prompt: parameters.positivePrompt,
shouldPinParametersPanel: ui.shouldPinParametersPanel,
prompt: generation.positivePrompt,
activeTabName,
};
},
@ -41,7 +41,8 @@ const promptInputSelector = createSelector(
*/
const ParamPositiveConditioning = () => {
const dispatch = useAppDispatch();
const { prompt, activeTabName } = useAppSelector(promptInputSelector);
const { prompt, shouldPinParametersPanel, activeTabName } =
useAppSelector(promptInputSelector);
const isReady = useIsReadyToInvoke();
const promptRef = useRef<HTMLTextAreaElement>(null);
const { isOpen, onClose, onOpen } = useDisclosure();
@ -120,7 +121,7 @@ const ParamPositiveConditioning = () => {
// };
return (
<Box>
<Box position="relative">
<FormControl>
<ParamEmbeddingPopover
isOpen={isOpen}
@ -144,7 +145,7 @@ const ParamPositiveConditioning = () => {
<Box
sx={{
position: 'absolute',
top: 6,
top: shouldPinParametersPanel ? 6 : 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"
size="sm"
sx={{
color: 'base.700',
color: 'base.500',
_hover: {
color: 'base.550',
color: 'base.600',
},
_active: {
color: 'base.700',
},
_dark: {
color: 'base.500',
_hover: {
color: 'base.400',
},
_active: {
color: 'base.300',
},
},
...sx,
}}