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

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

@ -64,24 +64,6 @@
position: relative; 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 { .inpainting-canvas-stage {
border-radius: 0.5rem; border-radius: 0.5rem;
canvas { canvas {

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

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

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

@ -57,7 +57,7 @@
--tab-color: rgb(30, 32, 42); --tab-color: rgb(30, 32, 42);
--tab-hover-color: rgb(36, 38, 48); --tab-hover-color: rgb(36, 38, 48);
--tab-list-bg: var(--accent-color); --tab-list-bg: var(--accent-color);
--tab-list-text: rgb(202,204,216); --tab-list-text: rgb(202, 204, 216);
--tab-list-text-inactive: rgb(92, 94, 114); --tab-list-text-inactive: rgb(92, 94, 114);
--tab-panel-bg: rgb(20, 22, 28); --tab-panel-bg: rgb(20, 22, 28);
@ -103,4 +103,12 @@
// Shadows // Shadows
--floating-button-drop-shadow: drop-shadow(0 0 1rem rgba(140, 101, 255, 0.5)); --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 // Shadows
--floating-button-drop-shadow: drop-shadow(0 0 1rem rgba(0, 0, 0, 0.3)); --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);
} }