Add Invoke AI Logo to unpinned Options

This commit is contained in:
blessedcoolant 2022-11-01 01:35:53 +13:00 committed by psychedelicious
parent 88203d8db2
commit c73a61b785
7 changed files with 69 additions and 40 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

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

View File

@ -3,6 +3,7 @@
.progress-bar {
background-color: var(--root-bg-color);
height: $progress-bar-thickness !important;
z-index: 99;
div {
background-color: var(--progress-bar-color);

View File

@ -23,6 +23,7 @@
height: $app-content-height;
width: $options-bar-max-width;
max-width: $options-bar-max-width;
flex-shrink: 0;
position: relative;
overflow-y: scroll;
@ -70,3 +71,20 @@
}
}
}
.invoke-ai-logo-wrapper {
display: flex;
align-items: center;
column-gap: 0.7rem;
padding-left: 0.5rem;
padding-top: $progress-bar-thickness;
img {
width: 32px;
height: 32px;
}
h1 {
font-size: 1.4rem;
}
}

View File

@ -15,6 +15,7 @@ import {
setShouldShowOptionsPanel,
} from '../options/optionsSlice';
import { setNeedsCache } from './Inpainting/inpaintingSlice';
import InvokeAILogo from '../../assets/images/logo.png';
type Props = { children: ReactNode };
@ -161,6 +162,15 @@ const InvokeOptionsPanel = (props: Props) => {
{shouldPinOptionsPanel ? <BsPinAngleFill /> : <BsPinAngle />}
</div>
</Tooltip>
{!shouldPinOptionsPanel && (
<div className="invoke-ai-logo-wrapper">
<img src={InvokeAILogo} alt="invoke-ai-logo" />
<h1>
invoke <strong>ai</strong>
</h1>
</div>
)}
{children}
</div>
</div>