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: Progress Bar being broken

Browse Source
This commit is contained in:
blessedcoolant 2023-07-02 18:49:24 +12:00
parent a6334750cb
commit f399b36ae6
4 changed files with 61 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
invokeai/frontend/web/src/features/nodes/components/ui/NodeInvokeButton.tsx
View File

@ -43,6 +43,21 @@ export default function NodeInvokeButton(props: InvokeButton) {
return (
<Box style={{ flexGrow: 4 }} position="relative">
<Box style={{ position: 'relative' }}>
{!isReady && (
<Box
borderRadius="base"
style={{
position: 'absolute',
bottom: '0',
left: '0',
right: '0',
height: '100%',
overflow: 'clip',
}}
>
<ProgressBar />
</Box>
)}
{iconButton ? (
<IAIIconButton
aria-label={t('parameters.invoke')}
@ -56,6 +71,12 @@ export default function NodeInvokeButton(props: InvokeButton) {
tooltipProps={{ placement: 'bottom' }}
colorScheme="accent"
id="invoke-button"
_disabled={{
background: 'none',
_hover: {
background: 'none',
},
}}
{...rest}
/>
) : (
@ -69,25 +90,17 @@ export default function NodeInvokeButton(props: InvokeButton) {
colorScheme="accent"
id="invoke-button"
fontWeight={700}
_disabled={{
background: 'none',
_hover: {
background: 'none',
},
}}
{...rest}
>
Invoke
</IAIButton>
)}
{!isReady && (
<Box
style={{
position: 'absolute',
bottom: '0',
left: '0',
right: '0',
height: '15%',
overflow: 'clip',
}}
>
<ProgressBar />
</Box>
)}
</Box>
</Box>
);

42
invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx
View File

@ -46,6 +46,22 @@ export default function InvokeButton(props: InvokeButton) {
return (
<Box style={{ flexGrow: 4 }} position="relative">
<Box style={{ position: 'relative' }}>
{!isReady && (
<Box
borderRadius="base"
style={{
position: 'absolute',
bottom: '0',
left: '0',
right: '0',
height: '100%',
overflow: 'clip',
}}
{...rest}
>
<ProgressBar />
</Box>
)}
{iconButton ? (
<IAIIconButton
aria-label={t('parameters.invoke')}
@ -59,6 +75,12 @@ export default function InvokeButton(props: InvokeButton) {
tooltipProps={{ placement: 'top' }}
colorScheme="accent"
id="invoke-button"
_disabled={{
background: 'none',
_hover: {
background: 'none',
},
}}
{...rest}
/>
) : (
@ -72,25 +94,17 @@ export default function InvokeButton(props: InvokeButton) {
colorScheme="accent"
id="invoke-button"
fontWeight={700}
_disabled={{
background: 'none',
_hover: {
background: 'none',
},
}}
{...rest}
>
Invoke
</IAIButton>
)}
{!isReady && (
<Box
style={{
position: 'absolute',
bottom: '0',
left: '0',
right: '0',
height: '15%',
overflow: 'clip',
}}
>
<ProgressBar />
</Box>
)}
</Box>
</Box>
);

1
invokeai/frontend/web/src/features/system/components/ProgressBar.tsx
View File

@ -35,6 +35,7 @@ const ProgressBar = () => {
aria-label={t('accessibility.invokeProgressBar')}
isIndeterminate={isProcessing && !currentStatusHasSteps}
height="full"
colorScheme="accent"
/>
);
};

9
invokeai/frontend/web/src/theme/components/progress.ts
View File

@ -3,25 +3,26 @@ import {
createMultiStyleConfigHelpers,
defineStyle,
} from '@chakra-ui/styled-system';
import { mode } from '@chakra-ui/theme-tools';
const { defineMultiStyleConfig, definePartsStyle } =
createMultiStyleConfigHelpers(parts.keys);
const invokeAIFilledTrack = defineStyle((_props) => ({
bg: 'accent.600',
bg: 'accent.500',
// TODO: the animation is nice but looks weird bc it is substantially longer than each step
// so we get to 100% long before it finishes
// transition: 'width 0.2s ease-in-out',
_indeterminate: {
bgGradient:
'linear(to-r, transparent 0%, accent.600 50%, transparent 100%);',
'linear(to-r, transparent 0%, accent.500 50%, transparent 100%);',
},
}));
const invokeAITrack = defineStyle((_props) => {
const { colorScheme: c } = _props;
return {
bg: 'none',
borderBottomRadius: '5px',
bg: mode(`${c}.200`, `${c}.700`)(_props),
};
});