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

Rework Gallery DIsplay

Browse Source
This commit is contained in:
blessedcoolant 2022-10-09 08:34:27 +13:00 committed by Lincoln Stein
parent 3473669458
commit 542ceb051b
12 changed files with 56 additions and 509 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/dist/assets/index.22ee377a.css vendored
View File

File diff suppressed because one or more lines are too long

1
frontend/dist/assets/index.3c84aaa4.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

483
frontend/dist/assets/index.bfda55e5.js vendored
View File

File diff suppressed because one or more lines are too long

4
frontend/dist/index.html vendored
View File

@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>InvokeAI - A Stable Diffusion Toolkit</title> <title>InvokeAI - A Stable Diffusion Toolkit</title>
<link rel="shortcut icon" type="icon" href="/assets/favicon.0d253ced.ico" /> <link rel="shortcut icon" type="icon" href="/assets/favicon.0d253ced.ico" />
<script type="module" crossorigin src="/assets/index.bfda55e5.js"></script> <script type="module" crossorigin src="/assets/index.43106324.js"></script>
<link rel="stylesheet" href="/assets/index.22ee377a.css"> <link rel="stylesheet" href="/assets/index.3c84aaa4.css">
</head> </head>
<body> <body>

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

@ -2,6 +2,7 @@
.App { .App {
display: grid; display: grid;
width: max-content;
} }
.app-content { .app-content {
@ -14,6 +15,7 @@
grid-auto-rows: max-content; grid-auto-rows: max-content;
width: $app-width; width: $app-width;
height: $app-height; height: $app-height;
min-width: min-content;
} }
.app-console { .app-console {

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

@ -2,10 +2,15 @@
.image-gallery-area { .image-gallery-area {
.image-gallery-popup-btn { .image-gallery-popup-btn {
position: absolute;
top: 50%;
right: 1rem;
border-radius: 0.5rem 0 0 0.5rem;
padding: 0 0.5rem;
@include Button( @include Button(
$btn-width: 3rem, $btn-width: 1rem,
$btn-height: 3rem, $btn-height: 6rem,
$icon-size: 22px, $icon-size: 20px,
$btn-color: var(--btn-grey), $btn-color: var(--btn-grey),
$btn-color-hover: var(--btn-grey-hover) $btn-color-hover: var(--btn-grey-hover)
); );
@ -14,15 +19,14 @@
.image-gallery-popup { .image-gallery-popup {
background-color: var(--tab-color); background-color: var(--tab-color);
position: fixed !important;
top: 0;
right: 0;
padding: 1rem; padding: 1rem;
animation: slideOut 0.3s ease-out; animation: slideOut 0.3s ease-out;
display: grid; display: grid;
grid-auto-rows: max-content; grid-auto-rows: max-content;
row-gap: 1rem; row-gap: 1rem;
border-radius: 0.5rem;
border-left-width: 0.2rem; border-left-width: 0.2rem;
min-width: 300px;
border-color: var(--gallery-resizeable-color); border-color: var(--gallery-resizeable-color);
} }

6
frontend/src/features/gallery/ImageGallery.tsx
View File

@ -21,6 +21,10 @@ export default function ImageGallery() {
shouldShowGallery, shouldShowGallery,
} = useAppSelector((state: RootState) => state.gallery); } = useAppSelector((state: RootState) => state.gallery);
const activeTab = useAppSelector(
(state: RootState) => state.options.activeTab
);
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const handleShowGalleryToggle = () => { const handleShowGalleryToggle = () => {
@ -77,8 +81,10 @@ export default function ImageGallery() {
<Resizable <Resizable
defaultSize={{ width: '300', height: '100%' }} defaultSize={{ width: '300', height: '100%' }}
minWidth={'300'} minWidth={'300'}
maxWidth={activeTab == 1 ? '300' : '600'}
className="image-gallery-popup" className="image-gallery-popup"
> >
{/* <div className="image-gallery-popup"></div> */}
<div className="image-gallery-header"> <div className="image-gallery-header">
<h1>Your Invocations</h1> <h1>Your Invocations</h1>
<IconButton <IconButton

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

@ -18,17 +18,11 @@
.image-to-image-display-area { .image-to-image-display-area {
display: grid; display: grid;
grid-template-areas: 'image-to-image-display-area'; column-gap: 0.5rem;
.image-to-image-display {
grid-area: image-to-image-display-area;
}
.image-gallery-area { .image-gallery-area {
grid-area: image-to-image-display-area;
z-index: 2; z-index: 2;
place-self: end; height: 100%;
margin: 1rem;
} }
} }
@ -45,6 +39,7 @@
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: var(--background-color-secondary); background-color: var(--background-color-secondary);
display: grid; display: grid;
height: $app-content-height;
.current-image-options { .current-image-options {
grid-auto-columns: max-content; grid-auto-columns: max-content;
@ -68,7 +63,7 @@
.image-to-image-dual-preview { .image-to-image-dual-preview {
grid-area: img2img-preview; grid-area: img2img-preview;
display: grid; display: grid;
grid-template-columns: max-content max-content; grid-template-columns: 1fr 1fr;
column-gap: 0.5rem; column-gap: 0.5rem;
padding: 0 1rem; padding: 0 1rem;
place-content: center; place-content: center;

14
frontend/src/features/tabs/ImageToImage/ImageToImage.tsx
View File

@ -2,12 +2,24 @@ import React from 'react';
import ImageToImagePanel from './ImageToImagePanel'; import ImageToImagePanel from './ImageToImagePanel';
import ImageToImageDisplay from './ImageToImageDisplay'; import ImageToImageDisplay from './ImageToImageDisplay';
import ImageGallery from '../../gallery/ImageGallery'; import ImageGallery from '../../gallery/ImageGallery';
import { RootState, useAppSelector } from '../../../app/store';
export default function ImageToImage() { export default function ImageToImage() {
const shouldShowGallery = useAppSelector(
(state: RootState) => state.gallery.shouldShowGallery
);
return ( return (
<div className="image-to-image-workarea"> <div className="image-to-image-workarea">
<ImageToImagePanel /> <ImageToImagePanel />
<div className="image-to-image-display-area"> <div
className="image-to-image-display-area"
style={
shouldShowGallery
? { gridTemplateColumns: 'auto max-content' }
: { gridTemplateColumns: 'auto' }
}
>
<ImageToImageDisplay /> <ImageToImageDisplay />
<ImageGallery /> <ImageGallery />
</div> </div>

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

@ -18,16 +18,17 @@
.text-to-image-display { .text-to-image-display {
display: grid; display: grid;
grid-template-areas: 'text-to-image-display'; grid-template-areas: 'text-to-image-display';
column-gap: 0.5rem;
.current-image-display, .current-image-display,
.current-image-display-placeholder { .current-image-display-placeholder {
grid-area: text-to-image-display; grid-area: text-to-image-display;
height: $app-content-height;
} }
.image-gallery-area { .image-gallery-area {
grid-area: text-to-image-display; height: 100%;
z-index: 2; z-index: 2;
place-self: end; place-self: end;
margin: 1rem;
} }
} }

14
frontend/src/features/tabs/TextToImage/TextToImage.tsx
View File

@ -2,12 +2,24 @@ import React from 'react';
import TextToImagePanel from './TextToImagePanel'; import TextToImagePanel from './TextToImagePanel';
import CurrentImageDisplay from '../../gallery/CurrentImageDisplay'; import CurrentImageDisplay from '../../gallery/CurrentImageDisplay';
import ImageGallery from '../../gallery/ImageGallery'; import ImageGallery from '../../gallery/ImageGallery';
import { RootState, useAppSelector } from '../../../app/store';
export default function TextToImage() { export default function TextToImage() {
const shouldShowGallery = useAppSelector(
(state: RootState) => state.gallery.shouldShowGallery
);
return ( return (
<div className="text-to-image-workarea"> <div className="text-to-image-workarea">
<TextToImagePanel /> <TextToImagePanel />
<div className="text-to-image-display"> <div
className="text-to-image-display"
style={
shouldShowGallery
? { gridTemplateColumns: 'auto max-content' }
: { gridTemplateColumns: 'auto' }
}
>
<CurrentImageDisplay /> <CurrentImageDisplay />
<ImageGallery /> <ImageGallery />
</div> </div>

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

@ -8,9 +8,7 @@ $app-width: calc(100vw - $app-cutoff);
$app-height: calc(100vh - $app-cutoff); $app-height: calc(100vh - $app-cutoff);
$app-content-height: calc(100vh - $app-content-height-cutoff); $app-content-height: calc(100vh - $app-content-height-cutoff);
$app-gallery-height: calc(100vh - ($app-content-height-cutoff + 6rem)); $app-gallery-height: calc(100vh - ($app-content-height-cutoff + 6rem));
$app-gallery-popover-height: calc( $app-gallery-popover-height: calc(100vh - ($app-content-height-cutoff + 6rem));
100vh - ($app-content-height-cutoff - 2.5rem)
);
$app-metadata-height: calc(100vh - ($app-content-height-cutoff + 4.4rem)); $app-metadata-height: calc(100vh - ($app-content-height-cutoff + 4.4rem));
// option bar // option bar