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

Fixes responsive images (omg finally), removes app padding

Browse Source
This commit is contained in:
psychedelicious 2022-10-29 12:22:07 +11:00
parent 6fb6bc6d7f
commit 9291fde960
13 changed files with 52 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/app/App.scss
View File

@ -2,20 +2,18 @@
.App {
display: grid;
width: max-content;
width: 100vw;
height: 100vh;
background-color: var(--background-color);
}
.app-content {
display: grid;
row-gap: 1rem;
margin: 0.6rem;
padding: 1rem;
border-radius: 0.5rem;
background-color: var(--background-color);
row-gap: 0.5rem;
padding: $app-padding;
grid-auto-rows: max-content;
width: $app-width;
height: $app-height;
min-width: min-content;
}
.app-console {

16
frontend/src/features/gallery/CurrentImageDisplay.scss
View File

@ -7,9 +7,6 @@
row-gap: 1rem;
background-color: var(--background-color-secondary);
border-radius: 0.5rem;
&[data-tab-name='txt2img'] {
height: $app-text-to-image-height;
}
}
.current-image-options {
@ -24,25 +21,22 @@
}
}
.current-image-viewer {
position: relative;
width: 100%;
height: 100%;
}
.current-image-preview {
position: relative;
justify-content: center;
align-items: center;
display: flex;
width: 100%;
// height: 100%;
height: $app-text-to-image-height;
height: 100%;
img {
background-color: var(--img2img-img-bg-color);
border-radius: 0.5rem;
object-fit: contain;
max-width: 100%;
max-height: 100%;
height: auto;
position: absolute;
}
}

12
frontend/src/features/gallery/CurrentImageDisplay.tsx
View File

@ -2,7 +2,6 @@ import { RootState, useAppSelector } from '../../app/store';
import CurrentImageButtons from './CurrentImageButtons';
import { MdPhoto } from 'react-icons/md';
import CurrentImagePreview from './CurrentImagePreview';
import ImageMetadataViewer from './ImageMetaDataViewer/ImageMetadataViewer';
import { tabMap } from '../tabs/InvokeTabs';
import { GalleryState } from './gallerySlice';
import { OptionsState } from '../options/optionsSlice';
@ -37,7 +36,6 @@ const CurrentImageDisplay = () => {
currentImage,
intermediateImage,
activeTabName,
shouldShowImageDetails,
} = useAppSelector(currentImageDisplaySelector);
const imageToDisplay = intermediateImage || currentImage;
@ -47,15 +45,7 @@ const CurrentImageDisplay = () => {
{imageToDisplay ? (
<>
<CurrentImageButtons image={imageToDisplay} />
<div className="current-image-viewer">
<CurrentImagePreview imageToDisplay={imageToDisplay} />
{shouldShowImageDetails && (
<ImageMetadataViewer
image={imageToDisplay}
styleClass="current-image-metadata"
/>
)}
</div>
<CurrentImagePreview imageToDisplay={imageToDisplay} />
</>
) : (
<div className="current-image-display-placeholder">

12
frontend/src/features/gallery/CurrentImagePreview.tsx
View File

@ -7,6 +7,7 @@ import * as InvokeAI from '../../app/invokeai';
import { createSelector } from '@reduxjs/toolkit';
import _ from 'lodash';
import { OptionsState } from '../options/optionsSlice';
import ImageMetadataViewer from './ImageMetaDataViewer/ImageMetadataViewer';
export const imagesSelector = createSelector(
[(state: RootState) => state.gallery, (state: RootState) => state.options],
@ -72,9 +73,8 @@ export default function CurrentImagePreview(props: CurrentImagePreviewProps) {
<div className={'current-image-preview'}>
<Image
src={imageToDisplay.url}
fit="contain"
maxWidth={'100%'}
maxHeight={'100%'}
width={imageToDisplay.width}
height={imageToDisplay.height}
/>
{!shouldShowImageDetails && (
<div className="current-image-next-prev-buttons">
@ -108,6 +108,12 @@ export default function CurrentImagePreview(props: CurrentImagePreviewProps) {
</div>
</div>
)}
{shouldShowImageDetails && (
<ImageMetadataViewer
image={imageToDisplay}
styleClass="current-image-metadata"
/>
)}
</div>
);
}

12
frontend/src/features/system/ProgressBar.scss
View File

@ -1,7 +1,19 @@
@use '../../styles/Mixins/' as *;
.progress-bar {
background-color: var(--root-bg-color);
height: $progress-bar-thickness !important;
div {
background-color: var(--progress-bar-color);
&[data-indeterminate] {
background-color: unset;
background-image: linear-gradient(
to right,
transparent 0%,
var(--progress-bar-color) 50%,
transparent 100%
);
}
}
}

1
frontend/src/features/system/ProgressBar.tsx
View File

@ -28,7 +28,6 @@ const ProgressBar = () => {
return (
<Progress
height="4px"
value={value}
isIndeterminate={isProcessing && !currentStatusHasSteps}
className="progress-bar"

9
frontend/src/features/system/SiteHeader.scss
View File

@ -4,10 +4,10 @@
}
.site-header-left-side {
display: grid;
grid-template-columns: repeat(2, max-content);
column-gap: 0.6rem;
display: flex;
align-items: center;
column-gap: 0.7rem;
padding-left: 0.5rem;
img {
width: 32px;
@ -20,8 +20,7 @@
}
.site-header-right-side {
display: grid;
grid-template-columns: repeat(7, max-content);
display: flex;
align-items: center;
column-gap: 0.5rem;
}

3
frontend/src/features/tabs/ImageToImage/ImageToImage.scss
View File

@ -39,16 +39,17 @@
}
.init-image-preview {
position: relative;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
height: $app-text-to-image-height;
img {
border-radius: 0.5rem;
object-fit: contain;
position: absolute;
}
}

2
frontend/src/features/tabs/InvokeTabs.scss
View File

@ -3,7 +3,7 @@
.app-tabs {
display: grid !important;
grid-template-columns: min-content auto;
column-gap: 1rem;
column-gap: 0.5rem;
}
.app-tabs-list {

6
frontend/src/features/tabs/InvokeWorkarea.scss
View File

@ -7,7 +7,7 @@
.workarea-main {
display: flex;
column-gap: 1rem;
column-gap: 0.5rem;
.workarea-options-panel {
width: $options-bar-max-width;
@ -19,14 +19,14 @@
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
height: $app-content-height;
// height: $app-content-height;
background-color: var(--background-color-secondary);
border-radius: 0.5rem;
}
.workarea-single-view {
width: 100%;
height: $app-content-height;
// height: $app-content-height;
background-color: var(--background-color-secondary);
border-radius: 0.5rem;
}

1
frontend/src/features/tabs/TextToImage/TextToImage.scss
View File

@ -2,6 +2,7 @@
.text-to-image-area {
padding: 1rem;
height: 100%;
}
.text-to-image-panel {

12
frontend/src/styles/Mixins/_Variables.scss
View File

@ -1,16 +1,20 @@
// Calc Values
$app-cutoff: 1.6rem;
$app-content-height-cutoff: 7rem; // default: 7rem
$app-cutoff: 0px;
$app-content-height-cutoff: 4rem; // default: 7rem
// Usage Variables
// app
$app-padding: 0.5rem;
$progress-bar-thickness: 0.3rem;
$app-width: calc(100vw - $app-cutoff);
$app-height: calc(100vh - $app-cutoff);
$app-height: calc(100vh - $progress-bar-thickness);
$app-content-height: calc(100vh - $app-content-height-cutoff);
$app-gallery-height: calc(100vh - ($app-content-height-cutoff + 5.5rem));
$app-gallery-popover-height: calc(100vh - ($app-content-height-cutoff + 6rem));
$app-metadata-height: calc(100vh - ($app-content-height-cutoff + 4.4rem));
$app-text-to-image-height: calc(100vh - 9.4375rem - 1.925rem - 1.15rem); // do not touch ffs
$app-text-to-image-height: calc(
100vh - 9.4375rem - 1.925rem - 1.15rem
); // do not touch ffs
// option bar
$options-bar-max-width: 22.5rem;

1
frontend/src/styles/index.scss
View File

@ -74,6 +74,7 @@ html,
body {
@include HideScrollbar;
background-color: var(--root-bg-color);
overflow: hidden;
}
#root {