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 Inpainting Alerts Styling

Browse Source
This commit is contained in:
blessedcoolant 2022-11-02 03:02:35 +13:00 committed by Lincoln Stein
parent 871a8a5375
commit 9bafda6a15
5 changed files with 36 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/app/selectors/readinessSelector.ts
View File

@ -40,21 +40,17 @@ export const readinessSelector = createSelector(
// Cannot generate without a prompt
if (!prompt || Boolean(prompt.match(/^[\s\r\n]+$/))) {
isReady = false;
reasonsWhyNotReady.push('Missing a prompt.');
reasonsWhyNotReady.push('Missing prompt');
}
if (activeTabName === 'img2img' && !initialImage) {
isReady = false;
reasonsWhyNotReady.push(
'On ImageToImage tab, but no initial image is selected.'
);
reasonsWhyNotReady.push('No initial image selected');
}
if (activeTabName === 'inpainting' && !imageToInpaint) {
isReady = false;
reasonsWhyNotReady.push(
'On Inpainting tab, but no initial image is selected.'
);
reasonsWhyNotReady.push('No inpainting image selected');
}
// // We don't use mask paths now.
@ -70,13 +66,13 @@ export const readinessSelector = createSelector(
// Cannot generate if already processing an image
if (isProcessing) {
isReady = false;
reasonsWhyNotReady.push('System is already processing something.');
reasonsWhyNotReady.push('System Busy');
}
// Cannot generate if not connected
if (!isConnected) {
isReady = false;
reasonsWhyNotReady.push('System is disconnected.');
reasonsWhyNotReady.push('System Disconnected');
}
// Cannot generate variations without valid seed weights
@ -85,7 +81,7 @@ export const readinessSelector = createSelector(
(!(validateSeedWeights(seedWeights) || seedWeights === '') || seed === -1)
) {
isReady = false;
reasonsWhyNotReady.push('Seed-weight pairs are badly formatted.');
reasonsWhyNotReady.push('Seed-Weights badly formatted.');
}
// All good

18
frontend/src/features/tabs/Inpainting/Inpainting.scss
View File

@ -64,24 +64,6 @@
position: relative;
}
.inpainting-alerts {
position: absolute;
top: 0;
left: 0;
display: flex;
z-index: 2;
padding: 0.25rem;
pointer-events: none;
button {
&[data-selected='true'] {
svg {
fill: var(--accent-color);
}
}
}
}
.inpainting-canvas-stage {
border-radius: 0.5rem;
canvas {

21
frontend/src/features/tabs/Inpainting/InpaintingCanvasStatusIcons.scss
View File

@ -4,27 +4,32 @@
left: 0;
display: flex;
z-index: 2;
margin: 0.25rem;
padding: 0.25rem;
margin: 0.5rem;
pointer-events: none;
background-color: var(--text-color);
opacity: 0.7;
border-radius: 0.5rem;
background-color: var(--inpainting-alerts-bg);
border-radius: 0.2rem;
overflow: hidden;
button {
border-radius: 0;
height: 100%;
vertical-align: top;
svg {
fill: var(--background-color);
fill: var(--inpainting-alerts-icon-color);
}
&[data-selected='true'] {
background-color: var(--inpainting-alerts-bg-active);
svg {
fill: var(--accent-color-hover);
fill: var(--inpainting-alerts-icon-active);
}
}
&[data-alert='true'] {
background-color: var(--inpainting-alerts-bg-alert);
svg {
fill: var(--destructive-color-hover);
fill: var(--inpainting-alerts-icon-alert);
}
}
}

8
frontend/src/styles/_Colors_Dark.scss
View File

@ -103,4 +103,12 @@
// Shadows
--floating-button-drop-shadow: drop-shadow(0 0 1rem rgba(140, 101, 255, 0.5));
// Canvas
--inpainting-alerts-bg: rgba(20, 20, 26, 0.75);
--inpainting-alerts-icon-color: rgb(255, 255, 255);
--inpainting-alerts-bg-active: rgb(80, 40, 200);
--inpainting-alerts-icon-active: rgb(255, 255, 255);
--inpainting-alerts-bg-alert: var(--invalid);
--inpainting-alerts-icon-alert: rgb(255, 255, 255);
}

8
frontend/src/styles/_Colors_Light.scss
View File

@ -104,4 +104,12 @@
// Shadows
--floating-button-drop-shadow: drop-shadow(0 0 1rem rgba(0, 0, 0, 0.3));
// Canvas
--inpainting-alerts-bg: rgba(220, 222, 224, 0.75);
--inpainting-alerts-icon-color: rgb(0, 0, 0);
--inpainting-alerts-bg-active: rgb(255, 200, 0);
--inpainting-alerts-icon-active: rgb(0, 0, 0);
--inpainting-alerts-bg-alert: var(--invalid);
--inpainting-alerts-icon-alert: rgb(0, 0, 0);
}