mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2025-02-23 05:42:01 +01:00
Merge pull request #458 from mdiller/mdiller_ui_reorganize
UI Reorganization & Adding Tabs
This commit is contained in:
cmdr2
GitHub
commit
aa4d97e8df
103
ui/index.html
103
ui/index.html
@ -1,6 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Stable Diffusion UI</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" type="image/png" href="/media/images/favicon-16x16.png" sizes="16x16">
|
||||
<link rel="icon" type="image/png" href="/media/images/favicon-32x32.png" sizes="32x32">
|
||||
@ -20,28 +21,26 @@
|
||||
<div id="logo">
|
||||
<h1>Stable Diffusion UI <small>v2.3.10 <span id="updateBranchLabel"></span></small></h1>
|
||||
</div>
|
||||
<ul id="top-nav-items">
|
||||
<li class="dropdown">
|
||||
<span><i class="fa fa-comments icon"></i> Help & Community</span>
|
||||
<ul id="community-links" class="dropdown-content">
|
||||
<li><a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" target="_blank"><i class="fa-solid fa-circle-question fa-fw"></i> Usual problems and solutions</a></li>
|
||||
<li><a href="https://discord.com/invite/u9yhsFmEkB" target="_blank"><i class="fa-brands fa-discord fa-fw"></i> Discord user community</a></li>
|
||||
<li><a href="https://www.reddit.com/r/StableDiffusionUI/" target="_blank"><i class="fa-brands fa-reddit fa-fw"></i> Reddit community</a></li>
|
||||
<li><a href="https://github.com/cmdr2/stable-diffusion-ui" target="_blank"><i class="fa-brands fa-github fa-fw"></i> Source code on GitHub</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="settings-button" class="dropdown">
|
||||
<div id="server-status">
|
||||
<div id="server-status-color">●</div>
|
||||
<span id="server-status-msg">Stable Diffusion is starting..</span>
|
||||
</div>
|
||||
<div id="tab-container">
|
||||
<span id="tab-main" class="tab active">
|
||||
<span><i class="fa fa-image icon"></i> Generate</span>
|
||||
</span>
|
||||
<span id="tab-settings" class="tab">
|
||||
<span><i class="fa fa-gear icon"></i> Settings</span>
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
<span id="tab-about" class="tab">
|
||||
<span><i class="fa fa-comments icon"></i> Help & Community</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-container">
|
||||
<div id="editor" class="col-fixed-10">
|
||||
<div id="server-status">
|
||||
<div id="server-status-color">●</div>
|
||||
<span id="server-status-msg">Stable Diffusion is starting..</span>
|
||||
</div>
|
||||
<div id="tab-content-wrapper">
|
||||
<div id="tab-content-main" class="tab-content active flex-container">
|
||||
<div id="editor">
|
||||
<div id="editor-inputs">
|
||||
<div id="editor-inputs-prompt" class="row">
|
||||
<label for="prompt"><b>Enter Prompt</b></label> <small>or</small> <button id="promptsFromFileBtn">Load from a file</button>
|
||||
@ -88,19 +87,19 @@
|
||||
<button id="stopImage" class="secondaryButton">Stop All</button>
|
||||
</div>
|
||||
|
||||
<div class="line-separator"> </div>
|
||||
<span class="line-separator"></span>
|
||||
|
||||
<div id="editor-settings" class="panel-box settings-box">
|
||||
<div id="editor-settings" class="settings-box">
|
||||
<h4 class="collapsible">
|
||||
Image Settings
|
||||
<i id="reset-image-settings" class="fa-solid fa-arrow-rotate-left">
|
||||
<span class="simple-tooltip right">
|
||||
<i id="reset-image-settings" class="fa-solid fa-arrow-rotate-left section-button">
|
||||
<span class="simple-tooltip left">
|
||||
Reset Image Settings
|
||||
</span>
|
||||
</i>
|
||||
</h4>
|
||||
<ul id="editor-settings-entries" class="collapsible-content">
|
||||
<li><table>
|
||||
<div id="editor-settings-entries" class="collapsible-content">
|
||||
<div><table>
|
||||
<tr><b class="settings-subheader">Image Settings</b></tr>
|
||||
<tr class="pl-5"><td><label for="seed">Seed:</label></td><td><input id="seed" name="seed" size="10" value="30000" onkeypress="preventNonNumericalInput(event)"> <input id="random_seed" name="random_seed" type="checkbox" checked><label for="random_seed">Random</label></td></tr>
|
||||
<tr class="pl-5"><td><label for="num_outputs_total">Number of Images:</label></td><td><input id="num_outputs_total" name="num_outputs_total" value="1" size="1" onkeypress="preventNonNumericalInput(event)"> <label><small>(total)</small></label> <input id="num_outputs_parallel" name="num_outputs_parallel" value="1" size="1" onkeypress="preventNonNumericalInput(event)"> <label for="num_outputs_parallel"><small>(in parallel)</small></label></td></tr>
|
||||
@ -184,10 +183,9 @@
|
||||
<option value="png">png</option>
|
||||
</select>
|
||||
</td></tr>
|
||||
</li></table>
|
||||
|
||||
<br/>
|
||||
</table></div>
|
||||
|
||||
<div><ul>
|
||||
<li><b class="settings-subheader">Render Settings</b></li>
|
||||
<li class="pl-5"><input id="stream_image_progress" name="stream_image_progress" type="checkbox"> <label for="stream_image_progress">Show a live preview <small>(uses more VRAM, and slower image creation)</small></label></li>
|
||||
<li class="pl-5"><input id="use_face_correction" name="use_face_correction" type="checkbox"> <label for="use_face_correction">Fix incorrect faces and eyes <small>(uses GFPGAN)</small></label></li>
|
||||
@ -199,12 +197,21 @@
|
||||
</select>
|
||||
</li>
|
||||
<li class="pl-5"><input id="show_only_filtered_image" name="show_only_filtered_image" type="checkbox" checked> <label for="show_only_filtered_image">Show only the corrected/upscaled image</label></li>
|
||||
</ul>
|
||||
</ul></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="editor-modifiers" class="panel-box">
|
||||
<button id="modifier-settings-btn" title="Add custom modifiers"><i class="fa fa-gear"></i></button>
|
||||
<h4 class="collapsible">Image Modifiers (art styles, tags etc)</h4>
|
||||
<span class="line-separator"></span>
|
||||
|
||||
<div id="editor-modifiers">
|
||||
<h4 class="collapsible">
|
||||
Image Modifiers
|
||||
<i id="modifier-settings-btn" class="fa-solid fa-gear section-button">
|
||||
<span class="simple-tooltip left">
|
||||
Add Custom Modifiers
|
||||
</span>
|
||||
</i>
|
||||
</h4>
|
||||
<div id="editor-modifiers-entries" class="collapsible-content">
|
||||
<div id="editor-modifiers-entries-toolbar">
|
||||
<label for="preview-image">Image Style:</label>
|
||||
@ -228,15 +235,27 @@
|
||||
<button id="clear-all-previews" class="secondaryButton"><i class="fa-solid fa-trash-can"></i> Clear All</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="system-settings" class="popup">
|
||||
<div>
|
||||
<i class="close-button fa-solid fa-xmark"></i>
|
||||
<h1>System Settings</h1>
|
||||
<table class="form-table"></table>
|
||||
</div>
|
||||
|
||||
<div id="tab-content-settings" class="tab-content">
|
||||
<div id="system-settings" class="tab-content-inner">
|
||||
<h1>System Settings</h1>
|
||||
<table class="form-table"></table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tab-content-about" class="tab-content">
|
||||
<div class="tab-content-inner">
|
||||
<h1>Help & Community</h1>
|
||||
<ul id="community-links">
|
||||
<li><a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting" target="_blank"><i class="fa-solid fa-circle-question fa-fw"></i> Usual problems and solutions</a></li>
|
||||
<li><a href="https://discord.com/invite/u9yhsFmEkB" target="_blank"><i class="fa-brands fa-discord fa-fw"></i> Discord user community</a></li>
|
||||
<li><a href="https://www.reddit.com/r/StableDiffusionUI/" target="_blank"><i class="fa-brands fa-reddit fa-fw"></i> Reddit community</a></li>
|
||||
<li><a href="https://github.com/cmdr2/stable-diffusion-ui" target="_blank"><i class="fa-brands fa-github fa-fw"></i> Source code on GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="save-settings-config" class="popup">
|
||||
<div>
|
||||
@ -258,9 +277,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="line-separator"> </div>
|
||||
|
||||
<div id="footer" class="panel-box">
|
||||
<div id="footer-spacer"></div>
|
||||
<div id="footer">
|
||||
<div class="line-separator"> </div>
|
||||
<p>If you found this project useful and want to help keep it alive, please <a href="https://ko-fi.com/cmdr2_stablediffusion_ui" target="_blank"><img src="/media/images/kofi.png" id="coffeeButton"></a> to help cover the cost of development and maintenance! Thank you for your support!</p>
|
||||
<p>Please feel free to join the <a href="https://discord.com/invite/u9yhsFmEkB" target="_blank">discord community</a> or <a href="https://github.com/cmdr2/stable-diffusion-ui/issues" target="_blank">file an issue</a> if you have any problems or suggestions in using this interface.</p>
|
||||
<div id="footer-legal">
|
||||
|
||||
@ -30,23 +30,6 @@
|
||||
color: rgb(153, 153, 153);
|
||||
}
|
||||
|
||||
#reset-image-settings {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
padding: 8px;
|
||||
opacity: 1;
|
||||
transition: opacity 0.5;
|
||||
}
|
||||
|
||||
.collapsible:not(.active) #reset-image-settings {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#reset-image-settings.hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#system-settings .form-table td {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
@ -8,8 +8,9 @@ html {
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-size: 11pt;
|
||||
background-color: var(--background-color1);
|
||||
background-color: var(--background-color2);
|
||||
color: var(--text-color);
|
||||
}
|
||||
a {
|
||||
@ -28,7 +29,6 @@ label {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.image_preview_container {
|
||||
/* display: none; */
|
||||
margin-top: 10pt;
|
||||
}
|
||||
.image_clear_btn {
|
||||
@ -66,12 +66,15 @@ label {
|
||||
}
|
||||
#footer {
|
||||
font-size: small;
|
||||
padding-left: 10pt;
|
||||
padding: 10pt;
|
||||
background: none;
|
||||
}
|
||||
#footer-legal {
|
||||
font-size: 8pt;
|
||||
}
|
||||
#footer-spacer {
|
||||
flex: 1
|
||||
}
|
||||
.imgSeedLabel {
|
||||
font-size: 0.8em;
|
||||
background-color: var(--background-color2);
|
||||
@ -104,37 +107,42 @@ label {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
#container {
|
||||
width: 95%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
@media screen and (max-width: 1800px) {
|
||||
#container {
|
||||
width: 100%;
|
||||
}
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
margin: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#logo small {
|
||||
font-size: 11pt;
|
||||
}
|
||||
#editor {
|
||||
padding: 5px;
|
||||
background: var(--background-color2);
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#editor label {
|
||||
font-weight: normal;
|
||||
}
|
||||
#editor h4 {
|
||||
margin: 0px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#editor .collapsible-content {
|
||||
width: 100%;
|
||||
}
|
||||
.settings-box label small {
|
||||
color: rgb(153, 153, 153);
|
||||
margin-right: 10px;
|
||||
}
|
||||
#preview {
|
||||
padding: 5px;
|
||||
padding: 8px;
|
||||
background: var(--background-color1);
|
||||
}
|
||||
#preview .collapsible-content {
|
||||
padding: 0px 15px;
|
||||
}
|
||||
#editor-inputs {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#editor-inputs-prompt {
|
||||
flex: 1;
|
||||
}
|
||||
@ -176,12 +184,6 @@ label {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
.col-50 {
|
||||
flex: 50%;
|
||||
}
|
||||
.col-fixed-10 {
|
||||
flex: 0 0 350pt;
|
||||
}
|
||||
.col-free {
|
||||
flex: 1;
|
||||
}
|
||||
@ -189,7 +191,7 @@ label {
|
||||
cursor: pointer;
|
||||
}
|
||||
.collapsible-content {
|
||||
display: none;
|
||||
display: block;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.collapsible-content h5 {
|
||||
@ -201,50 +203,40 @@ label {
|
||||
color: white;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.panel-box {
|
||||
background: var(--background-color2);
|
||||
border: 1px solid var(--background-color3);
|
||||
border-radius: 7px;
|
||||
padding: 5px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
|
||||
.collapsible:not(.active) ~ .collapsible-content {
|
||||
display: none !important;
|
||||
}
|
||||
.panel-box h4 {
|
||||
margin: 0;
|
||||
padding: 2px 0;
|
||||
#editor-modifiers {
|
||||
max-width: 600px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
#editor-modifiers .editor-modifiers-leaf {
|
||||
padding-top: 10pt;
|
||||
padding-bottom: 10pt;
|
||||
}
|
||||
#preview {
|
||||
margin-left: 10pt;
|
||||
}
|
||||
img {
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.line-separator {
|
||||
background: rgb(56, 56, 56);
|
||||
height: 1pt;
|
||||
margin: 15pt 0;
|
||||
background: var(--background-color3);
|
||||
height: 8px;
|
||||
margin: 16px 0px;
|
||||
}
|
||||
#editor-inputs-tags-container {
|
||||
margin-top: 5pt;
|
||||
display: none;
|
||||
}
|
||||
#server-status {
|
||||
display: inline;
|
||||
float: right;
|
||||
transform: translateY(-5pt);
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
text-align: right;
|
||||
}
|
||||
#server-status-color {
|
||||
/* width: 8pt;
|
||||
height: 8pt;
|
||||
border-radius: 4pt; */
|
||||
font-size: 14pt;
|
||||
color: rgb(200, 139, 0);
|
||||
/* background-color: rgb(197, 1, 1); */
|
||||
/* transform: translateY(15%); */
|
||||
display: inline;
|
||||
}
|
||||
#server-status-msg {
|
||||
@ -288,16 +280,19 @@ img {
|
||||
}
|
||||
|
||||
#top-nav {
|
||||
padding-top: 3pt;
|
||||
padding-bottom: 15pt;
|
||||
position: relative;
|
||||
background: var(--background-color4);
|
||||
display: flex;
|
||||
}
|
||||
#top-nav .icon {
|
||||
.tab .icon {
|
||||
padding-right: 4pt;
|
||||
font-size: 14pt;
|
||||
transform: translateY(1pt);
|
||||
}
|
||||
#logo {
|
||||
display: inline;
|
||||
padding: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#logo h1 {
|
||||
display: inline;
|
||||
@ -327,11 +322,11 @@ img {
|
||||
padding-left: 5pt;
|
||||
}
|
||||
#community-links {
|
||||
display: inline-block;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 12pt;
|
||||
padding-bottom: 0pt;
|
||||
transform: translateX(-15%);
|
||||
text-align: left;
|
||||
margin: auto;
|
||||
padding: 0px;
|
||||
}
|
||||
#community-links li {
|
||||
padding-bottom: 12pt;
|
||||
@ -371,6 +366,9 @@ img {
|
||||
border-radius: 5pt;
|
||||
box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.imageTaskContainer > div > .collapsible-handle {
|
||||
display: none;
|
||||
}
|
||||
.taskStatusLabel {
|
||||
float: left;
|
||||
font-size: 8pt;
|
||||
@ -421,6 +419,8 @@ img {
|
||||
#init_image_preview {
|
||||
max-width: 150px;
|
||||
max-height: 150px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
border-radius: 6px;
|
||||
transition: all 1s ease-in-out;
|
||||
@ -429,6 +429,7 @@ img {
|
||||
#init_image_preview:hover {
|
||||
max-width: 500px;
|
||||
max-height: 1000px;
|
||||
|
||||
transition: all 1s 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
@ -450,6 +451,20 @@ img {
|
||||
border-radius: 6px 0px;
|
||||
}
|
||||
|
||||
#editor-settings-entries {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#editor-settings-entries > div {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
#editor-settings-entries ul {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
#editor-settings-entries table td {
|
||||
padding: 0px;
|
||||
line-height: 28px;
|
||||
@ -465,6 +480,7 @@ img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* INPUTS STYLING */
|
||||
button,
|
||||
input[type="file"],
|
||||
input[type="checkbox"],
|
||||
@ -524,13 +540,16 @@ input::file-selector-button {
|
||||
height: 19px;
|
||||
}
|
||||
|
||||
/* MOBILE SUPPORT */
|
||||
@media screen and (max-width: 700px) {
|
||||
#top-nav {
|
||||
flex-direction: column;
|
||||
}
|
||||
body {
|
||||
margin: 0px;
|
||||
}
|
||||
#container {
|
||||
margin: 0px;
|
||||
padding: 10px
|
||||
}
|
||||
.flex-container {
|
||||
flex-direction: column;
|
||||
@ -559,6 +578,21 @@ input::file-selector-button {
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
#editor {
|
||||
padding: 16px 8px;
|
||||
}
|
||||
.tab-content-inner {
|
||||
margin: 0px;
|
||||
}
|
||||
.tab {
|
||||
font-size: 0;
|
||||
}
|
||||
.tab .icon {
|
||||
padding-right: 0px;
|
||||
}
|
||||
#server-status {
|
||||
display: none;
|
||||
}
|
||||
.popup > div {
|
||||
padding-left: 5px !important;
|
||||
padding-right: 5px !important;
|
||||
@ -580,14 +614,22 @@ input::file-selector-button {
|
||||
transform: translate(100%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 700px) {
|
||||
#editor {
|
||||
max-width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
.help-btn {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#promptsFromFileBtn {
|
||||
font-size: 9pt;
|
||||
}
|
||||
|
||||
#reset-image-settings {
|
||||
.section-button {
|
||||
position: relative;
|
||||
transform: translateY(-13%);
|
||||
}
|
||||
@ -606,6 +648,27 @@ input::file-selector-button {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.section-button {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
padding: 8px;
|
||||
opacity: 1;
|
||||
transition: opacity 0.5;
|
||||
}
|
||||
|
||||
.section-button {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
padding: 8px;
|
||||
opacity: 1;
|
||||
transition: opacity 0.5;
|
||||
}
|
||||
|
||||
.collapsible:not(.active) .section-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* SIMPLE TOOTIP */
|
||||
.simple-tooltip {
|
||||
border-radius: 3px;
|
||||
font-weight: bold;
|
||||
@ -628,8 +691,6 @@ input::file-selector-button {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
/* position specific */
|
||||
.simple-tooltip.right {
|
||||
right: 0px;
|
||||
top: 50%;
|
||||
@ -665,6 +726,8 @@ input::file-selector-button {
|
||||
:hover > .simple-tooltip.bottom {
|
||||
transform: translate(-50%, 100%);
|
||||
}
|
||||
|
||||
/* PROGRESS BAR */
|
||||
.progress-bar {
|
||||
background: var(--background-color3);
|
||||
border-radius: 4px;
|
||||
@ -683,7 +746,6 @@ input::file-selector-button {
|
||||
width: 0%;
|
||||
transition: width 1s ease-in-out;
|
||||
}
|
||||
/* animated progress-bar */
|
||||
.progress-bar.active {
|
||||
background: repeating-linear-gradient(-65deg,
|
||||
var(--background-color2),
|
||||
@ -703,13 +765,14 @@ input::file-selector-button {
|
||||
100% { background-position: 0 0; }
|
||||
}
|
||||
|
||||
/* POPUPS */
|
||||
.popup:not(.active) {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.popup {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
background: rgba(32, 33, 36, 50%);
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
@ -748,6 +811,43 @@ input::file-selector-button {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
#settings-button {
|
||||
cursor: pointer;
|
||||
/* TABS */
|
||||
#tab-container {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px 4px 0px 0px;
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
background: var(--background-color2);
|
||||
opacity: 50%;
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
.tab:hover {
|
||||
opacity: 75%;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
opacity: 100%;
|
||||
}
|
||||
|
||||
.tab-content:not(.active) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#tab-content-wrapper {
|
||||
border-top: 8px solid var(--background-color2);
|
||||
}
|
||||
|
||||
.tab-content-inner {
|
||||
margin: auto;
|
||||
max-width: 600px;
|
||||
text-align: center;
|
||||
padding: 20px 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -71,7 +71,8 @@ async function initSettings() {
|
||||
SETTINGS_SECTIONS.forEach(section => {
|
||||
var name = section.name
|
||||
var element = document.getElementById(section.id)
|
||||
var children = Array.from(element.querySelectorAll(unsorted_settings_ids.map(id => `#${id}`).join(",")))
|
||||
var unsorted_ids = unsorted_settings_ids.map(id => `#${id}`).join(",")
|
||||
var children = unsorted_ids == "" ? [] : Array.from(element.querySelectorAll(unsorted_ids));
|
||||
section.keys = []
|
||||
children.forEach(e => {
|
||||
section.keys.push(e.id)
|
||||
|
||||
@ -75,7 +75,6 @@ function createModifierGroup(modifierGroup, initiallyExpanded) {
|
||||
|
||||
if (initiallyExpanded === true) {
|
||||
titleEl.className += ' active'
|
||||
modifiersEl.style.display = 'block'
|
||||
}
|
||||
|
||||
modifiers.forEach(modObj => {
|
||||
|
||||
@ -842,13 +842,15 @@ function createTask(task) {
|
||||
|
||||
let taskEntry = document.createElement('div')
|
||||
taskEntry.className = 'imageTaskContainer'
|
||||
taskEntry.innerHTML = ` <div class="taskStatusLabel">Enqueued</div>
|
||||
<button class="secondaryButton stopTask"><i class="fa-solid fa-trash-can"></i> Remove</button>
|
||||
<div class="preview-prompt collapsible active"></div>
|
||||
<div class="taskConfig">${taskConfig}</div>
|
||||
<div class="collapsible-content" style="display: block">
|
||||
taskEntry.innerHTML = ` <div class="header-content panel collapsible active">
|
||||
<div class="taskStatusLabel">Enqueued</div>
|
||||
<button class="secondaryButton stopTask"><i class="fa-solid fa-trash-can"></i> Remove</button>
|
||||
<div class="preview-prompt collapsible active"></div>
|
||||
<div class="taskConfig">${taskConfig}</div>
|
||||
<div class="outputMsg"></div>
|
||||
<div class="progress-bar active"><div></div></div>
|
||||
</div>
|
||||
<div class="collapsible-content">
|
||||
<div class="img-preview">
|
||||
</div>`
|
||||
|
||||
@ -1328,4 +1330,28 @@ document.querySelectorAll('.popup').forEach(popup => {
|
||||
}
|
||||
})
|
||||
|
||||
var tabElements = [];
|
||||
document.querySelectorAll(".tab").forEach(tab => {
|
||||
var name = tab.id.replace("tab-", "");
|
||||
var content = document.getElementById(`tab-content-${name}`)
|
||||
tabElements.push({
|
||||
name: name,
|
||||
tab: tab,
|
||||
content: content
|
||||
})
|
||||
|
||||
tab.addEventListener("click", event => {
|
||||
if (!tab.classList.contains("active")) {
|
||||
tabElements.forEach(tabInfo => {
|
||||
if (tabInfo.tab.classList.contains("active")) {
|
||||
tabInfo.tab.classList.toggle("active")
|
||||
tabInfo.content.classList.toggle("active")
|
||||
}
|
||||
})
|
||||
tab.classList.toggle("active")
|
||||
content.classList.toggle("active")
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
createCollapsibles()
|
||||
|
||||
@ -48,7 +48,7 @@ var PARAMETERS = [
|
||||
type: ParameterType.custom,
|
||||
label: "Save Location",
|
||||
render: (parameter) => {
|
||||
return `<input id="${parameter.id}" name="${parameter.id}" size="40" disabled>`
|
||||
return `<input id="${parameter.id}" name="${parameter.id}" size="30" disabled>`
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -68,7 +68,7 @@ var PARAMETERS = [
|
||||
{
|
||||
id: "use_cpu",
|
||||
type: ParameterType.checkbox,
|
||||
label: "Use CPU instead of GPU",
|
||||
label: "Use CPU (not GPU)",
|
||||
note: "warning: this will be *very* slow",
|
||||
default: false,
|
||||
},
|
||||
@ -127,6 +127,3 @@ function initParameters() {
|
||||
|
||||
initParameters();
|
||||
|
||||
document.getElementById("settings-button").addEventListener('click', event => {
|
||||
document.getElementById("system-settings").classList.add("active")
|
||||
})
|
||||
|
||||
@ -29,7 +29,7 @@ function toggleCollapsible(element) {
|
||||
var handle = element.querySelector(".collapsible-handle");
|
||||
collapsibleHeader.classList.toggle("active")
|
||||
let content = getNextSibling(collapsibleHeader, '.collapsible-content')
|
||||
if (content.style.display === "block") {
|
||||
if (!collapsibleHeader.classList.contains("active")) {
|
||||
content.style.display = "none"
|
||||
if (handle != null) { // render results don't have a handle
|
||||
handle.innerHTML = '➕' // plus
|
||||
@ -69,7 +69,7 @@ function createCollapsibles(node) {
|
||||
let handle = document.createElement('span')
|
||||
handle.className = 'collapsible-handle'
|
||||
|
||||
if (c.className.indexOf('active') !== -1) {
|
||||
if (c.classList.contains("active")) {
|
||||
handle.innerHTML = '➖' // minus
|
||||
} else {
|
||||
handle.innerHTML = '➕' // plus
|
||||
|
||||
Loading…
Reference in New Issue
Block a user