extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2025-05-02 15:24:30 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #458 from mdiller/mdiller_ui_reorganize

Browse Source 
UI Reorganization & Adding Tabs
This commit is contained in:
cmdr2 2022-11-09 12:22:38 +05:30 committed by GitHub
commit aa4d97e8df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 260 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
ui/index.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Stable Diffusion UI</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/media/images/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/media/images/favicon-32x32.png" sizes="32x32">
@ -20,28 +21,26 @@
<div id="logo"> <div id="logo">
<h1>Stable Diffusion UI <small>v2.3.10 <span id="updateBranchLabel"></span></small></h1> <h1>Stable Diffusion UI <small>v2.3.10 <span id="updateBranchLabel"></span></small></h1>
</div> </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">
<span><i class="fa fa-gear icon"></i> Settings</span>
</li>
</ul>
</div>
<div class="flex-container">
<div id="editor" class="col-fixed-10">
<div id="server-status"> <div id="server-status">
<div id="server-status-color">●</div> <div id="server-status-color">●</div>
<span id="server-status-msg">Stable Diffusion is starting..</span> <span id="server-status-msg">Stable Diffusion is starting..</span>
</div> </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>
</span>
<span id="tab-about" class="tab">
<span><i class="fa fa-comments icon"></i> Help & Community</span>
</span>
</div>
</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">
<div id="editor-inputs-prompt" class="row"> <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> <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> <button id="stopImage" class="secondaryButton">Stop All</button>
</div> </div>
<div class="line-separator">&nbsp;</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"> <h4 class="collapsible">
Image Settings Image Settings
<i id="reset-image-settings" class="fa-solid fa-arrow-rotate-left"> <i id="reset-image-settings" class="fa-solid fa-arrow-rotate-left section-button">
<span class="simple-tooltip right"> <span class="simple-tooltip left">
Reset Image Settings Reset Image Settings
</span> </span>
</i> </i>
</h4> </h4>
<ul id="editor-settings-entries" class="collapsible-content"> <div id="editor-settings-entries" class="collapsible-content">
<li><table> <div><table>
<tr><b class="settings-subheader">Image Settings</b></tr> <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="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> <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> <option value="png">png</option>
</select> </select>
</td></tr> </td></tr>
</li></table> </table></div>
<br/>
<div><ul>
<li><b class="settings-subheader">Render Settings</b></li> <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="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> <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> </select>
</li> </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> <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>
<div id="editor-modifiers" class="panel-box"> <span class="line-separator"></span>
<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> <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" class="collapsible-content">
<div id="editor-modifiers-entries-toolbar"> <div id="editor-modifiers-entries-toolbar">
<label for="preview-image">Image Style:</label> <label for="preview-image">Image Style:</label>
@ -230,13 +237,25 @@
</div> </div>
</div> </div>
<div id="system-settings" class="popup"> <div id="tab-content-settings" class="tab-content">
<div> <div id="system-settings" class="tab-content-inner">
<i class="close-button fa-solid fa-xmark"></i>
<h1>System Settings</h1> <h1>System Settings</h1>
<table class="form-table"></table> <table class="form-table"></table>
</div> </div>
</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 id="save-settings-config" class="popup">
<div> <div>
@ -258,9 +277,9 @@
</div> </div>
</div> </div>
<div id="footer-spacer"></div>
<div id="footer">
<div class="line-separator">&nbsp;</div> <div class="line-separator">&nbsp;</div>
<div id="footer" class="panel-box">
<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>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> <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"> <div id="footer-legal">

17
ui/media/css/auto-save.css
View File

@ -30,23 +30,6 @@
color: rgb(153, 153, 153); 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 { #system-settings .form-table td {
height: 24px; height: 24px;
} }

222
ui/media/css/main.css
View File

@ -8,8 +8,9 @@ html {
} }
body { body {
margin: 0;
font-size: 11pt; font-size: 11pt;
background-color: var(--background-color1); background-color: var(--background-color2);
color: var(--text-color); color: var(--text-color);
} }
a { a {
@ -28,7 +29,6 @@ label {
margin-bottom: 6px; margin-bottom: 6px;
} }
.image_preview_container { .image_preview_container {
/* display: none; */
margin-top: 10pt; margin-top: 10pt;
} }
.image_clear_btn { .image_clear_btn {
@ -66,12 +66,15 @@ label {
} }
#footer { #footer {
font-size: small; font-size: small;
padding-left: 10pt; padding: 10pt;
background: none; background: none;
} }
#footer-legal { #footer-legal {
font-size: 8pt; font-size: 8pt;
} }
#footer-spacer {
flex: 1
}
.imgSeedLabel { .imgSeedLabel {
font-size: 0.8em; font-size: 0.8em;
background-color: var(--background-color2); background-color: var(--background-color2);
@ -104,37 +107,42 @@ label {
margin-bottom: 7px; margin-bottom: 7px;
} }
#container { #container {
width: 95%; min-height: 100vh;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 1800px) {
#container {
width: 100%; width: 100%;
} margin: 0px;
display: flex;
flex-direction: column;
} }
#logo small { #logo small {
font-size: 11pt; font-size: 11pt;
} }
#editor { #editor {
padding: 5px; background: var(--background-color2);
padding: 16px;
display: flex;
flex-direction: column;
} }
#editor label { #editor label {
font-weight: normal; font-weight: normal;
} }
#editor h4 {
margin: 0px;
white-space: nowrap;
}
#editor .collapsible-content {
width: 100%;
}
.settings-box label small { .settings-box label small {
color: rgb(153, 153, 153); color: rgb(153, 153, 153);
margin-right: 10px; margin-right: 10px;
} }
#preview { #preview {
padding: 5px; padding: 8px;
background: var(--background-color1);
} }
#preview .collapsible-content { #preview .collapsible-content {
padding: 0px 15px; padding: 0px 15px;
} }
#editor-inputs {
margin-bottom: 20px;
}
#editor-inputs-prompt { #editor-inputs-prompt {
flex: 1; flex: 1;
} }
@ -176,12 +184,6 @@ label {
display: flex; display: flex;
width: 100%; width: 100%;
} }
.col-50 {
flex: 50%;
}
.col-fixed-10 {
flex: 0 0 350pt;
}
.col-free { .col-free {
flex: 1; flex: 1;
} }
@ -189,7 +191,7 @@ label {
cursor: pointer; cursor: pointer;
} }
.collapsible-content { .collapsible-content {
display: none; display: block;
padding-left: 15px; padding-left: 15px;
} }
.collapsible-content h5 { .collapsible-content h5 {
@ -201,50 +203,40 @@ label {
color: white; color: white;
padding-right: 5px; padding-right: 5px;
} }
.panel-box { .collapsible:not(.active) ~ .collapsible-content {
background: var(--background-color2); display: none !important;
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);
} }
.panel-box h4 { #editor-modifiers {
margin: 0; max-width: 600px;
padding: 2px 0; overflow-y: auto;
overflow-x: hidden;
} }
#editor-modifiers .editor-modifiers-leaf { #editor-modifiers .editor-modifiers-leaf {
padding-top: 10pt; padding-top: 10pt;
padding-bottom: 10pt; padding-bottom: 10pt;
} }
#preview {
margin-left: 10pt;
}
img { img {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
} }
.line-separator { .line-separator {
background: rgb(56, 56, 56); background: var(--background-color3);
height: 1pt; height: 8px;
margin: 15pt 0; margin: 16px 0px;
} }
#editor-inputs-tags-container { #editor-inputs-tags-container {
margin-top: 5pt; margin-top: 5pt;
display: none; display: none;
} }
#server-status { #server-status {
display: inline; position: absolute;
float: right; right: 16px;
transform: translateY(-5pt); top: 50%;
transform: translateY(-50%);
text-align: right;
} }
#server-status-color { #server-status-color {
/* width: 8pt;
height: 8pt;
border-radius: 4pt; */
font-size: 14pt; font-size: 14pt;
color: rgb(200, 139, 0); color: rgb(200, 139, 0);
/* background-color: rgb(197, 1, 1); */
/* transform: translateY(15%); */
display: inline; display: inline;
} }
#server-status-msg { #server-status-msg {
@ -288,16 +280,19 @@ img {
} }
#top-nav { #top-nav {
padding-top: 3pt; position: relative;
padding-bottom: 15pt; background: var(--background-color4);
display: flex;
} }
#top-nav .icon { .tab .icon {
padding-right: 4pt; padding-right: 4pt;
font-size: 14pt; font-size: 14pt;
transform: translateY(1pt); transform: translateY(1pt);
} }
#logo { #logo {
display: inline; display: inline;
padding: 12px;
white-space: nowrap;
} }
#logo h1 { #logo h1 {
display: inline; display: inline;
@ -327,11 +322,11 @@ img {
padding-left: 5pt; padding-left: 5pt;
} }
#community-links { #community-links {
display: inline-block;
list-style-type: none; list-style-type: none;
margin: 0; text-align: left;
padding: 12pt; margin: auto;
padding-bottom: 0pt; padding: 0px;
transform: translateX(-15%);
} }
#community-links li { #community-links li {
padding-bottom: 12pt; padding-bottom: 12pt;
@ -371,6 +366,9 @@ img {
border-radius: 5pt; 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); 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 { .taskStatusLabel {
float: left; float: left;
font-size: 8pt; font-size: 8pt;
@ -421,6 +419,8 @@ img {
#init_image_preview { #init_image_preview {
max-width: 150px; max-width: 150px;
max-height: 150px; max-height: 150px;
height: 100%;
width: 100%;
object-fit: contain; object-fit: contain;
border-radius: 6px; border-radius: 6px;
transition: all 1s ease-in-out; transition: all 1s ease-in-out;
@ -429,6 +429,7 @@ img {
#init_image_preview:hover { #init_image_preview:hover {
max-width: 500px; max-width: 500px;
max-height: 1000px; max-height: 1000px;
transition: all 1s 0.5s ease-in-out; transition: all 1s 0.5s ease-in-out;
} }
@ -450,6 +451,20 @@ img {
border-radius: 6px 0px; 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 { #editor-settings-entries table td {
padding: 0px; padding: 0px;
line-height: 28px; line-height: 28px;
@ -465,6 +480,7 @@ img {
width: 100%; width: 100%;
} }
/* INPUTS STYLING */
button, button,
input[type="file"], input[type="file"],
input[type="checkbox"], input[type="checkbox"],
@ -524,13 +540,16 @@ input::file-selector-button {
height: 19px; height: 19px;
} }
/* MOBILE SUPPORT */
@media screen and (max-width: 700px) { @media screen and (max-width: 700px) {
#top-nav {
flex-direction: column;
}
body { body {
margin: 0px; margin: 0px;
} }
#container { #container {
margin: 0px; margin: 0px;
padding: 10px
} }
.flex-container { .flex-container {
flex-direction: column; flex-direction: column;
@ -559,6 +578,21 @@ input::file-selector-button {
left: 0px; left: 0px;
right: 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 { .popup > div {
padding-left: 5px !important; padding-left: 5px !important;
padding-right: 5px !important; padding-right: 5px !important;
@ -580,14 +614,22 @@ input::file-selector-button {
transform: translate(100%, -50%); transform: translate(100%, -50%);
} }
} }
@media (min-width: 700px) {
#editor {
max-width: 500px;
}
}
.help-btn { .help-btn {
position: relative; position: relative;
} }
#promptsFromFileBtn { #promptsFromFileBtn {
font-size: 9pt; font-size: 9pt;
} }
#reset-image-settings { .section-button {
position: relative; position: relative;
transform: translateY(-13%); transform: translateY(-13%);
} }
@ -606,6 +648,27 @@ input::file-selector-button {
pointer-events: none; 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 { .simple-tooltip {
border-radius: 3px; border-radius: 3px;
font-weight: bold; font-weight: bold;
@ -628,8 +691,6 @@ input::file-selector-button {
visibility: visible; visibility: visible;
} }
} }
/* position specific */
.simple-tooltip.right { .simple-tooltip.right {
right: 0px; right: 0px;
top: 50%; top: 50%;
@ -665,6 +726,8 @@ input::file-selector-button {
:hover > .simple-tooltip.bottom { :hover > .simple-tooltip.bottom {
transform: translate(-50%, 100%); transform: translate(-50%, 100%);
} }
/* PROGRESS BAR */
.progress-bar { .progress-bar {
background: var(--background-color3); background: var(--background-color3);
border-radius: 4px; border-radius: 4px;
@ -683,7 +746,6 @@ input::file-selector-button {
width: 0%; width: 0%;
transition: width 1s ease-in-out; transition: width 1s ease-in-out;
} }
/* animated progress-bar */
.progress-bar.active { .progress-bar.active {
background: repeating-linear-gradient(-65deg, background: repeating-linear-gradient(-65deg,
var(--background-color2), var(--background-color2),
@ -703,13 +765,14 @@ input::file-selector-button {
100% { background-position: 0 0; } 100% { background-position: 0 0; }
} }
/* POPUPS */
.popup:not(.active) { .popup:not(.active) {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
} }
.popup { .popup {
position: absolute; position: fixed;
background: rgba(32, 33, 36, 50%); background: rgba(32, 33, 36, 50%);
top: 0px; top: 0px;
left: 0px; left: 0px;
@ -748,6 +811,43 @@ input::file-selector-button {
padding: 24px; padding: 24px;
} }
#settings-button { /* TABS */
cursor: pointer; #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;
}

3
ui/media/js/auto-save.js
View File

@ -71,7 +71,8 @@ async function initSettings() {
SETTINGS_SECTIONS.forEach(section => { SETTINGS_SECTIONS.forEach(section => {
var name = section.name var name = section.name
var element = document.getElementById(section.id) 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 = [] section.keys = []
children.forEach(e => { children.forEach(e => {
section.keys.push(e.id) section.keys.push(e.id)

1
ui/media/js/image-modifiers.js
View File

@ -75,7 +75,6 @@ function createModifierGroup(modifierGroup, initiallyExpanded) {
if (initiallyExpanded === true) { if (initiallyExpanded === true) {
titleEl.className += ' active' titleEl.className += ' active'
modifiersEl.style.display = 'block'
} }
modifiers.forEach(modObj => { modifiers.forEach(modObj => {

30
ui/media/js/main.js
View File

@ -842,13 +842,15 @@ function createTask(task) {
let taskEntry = document.createElement('div') let taskEntry = document.createElement('div')
taskEntry.className = 'imageTaskContainer' taskEntry.className = 'imageTaskContainer'
taskEntry.innerHTML = ` <div class="taskStatusLabel">Enqueued</div> 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> <button class="secondaryButton stopTask"><i class="fa-solid fa-trash-can"></i> Remove</button>
<div class="preview-prompt collapsible active"></div> <div class="preview-prompt collapsible active"></div>
<div class="taskConfig">${taskConfig}</div> <div class="taskConfig">${taskConfig}</div>
<div class="collapsible-content" style="display: block">
<div class="outputMsg"></div> <div class="outputMsg"></div>
<div class="progress-bar active"><div></div></div> <div class="progress-bar active"><div></div></div>
</div>
<div class="collapsible-content">
<div class="img-preview"> <div class="img-preview">
</div>` </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() createCollapsibles()

7
ui/media/js/parameters.js
View File

@ -48,7 +48,7 @@ var PARAMETERS = [
type: ParameterType.custom, type: ParameterType.custom,
label: "Save Location", label: "Save Location",
render: (parameter) => { 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", id: "use_cpu",
type: ParameterType.checkbox, type: ParameterType.checkbox,
label: "Use CPU instead of GPU", label: "Use CPU (not GPU)",
note: "warning: this will be *very* slow", note: "warning: this will be *very* slow",
default: false, default: false,
}, },
@ -127,6 +127,3 @@ function initParameters() {
initParameters(); initParameters();
document.getElementById("settings-button").addEventListener('click', event => {
document.getElementById("system-settings").classList.add("active")
})

4
ui/media/js/utils.js
View File

@ -29,7 +29,7 @@ function toggleCollapsible(element) {
var handle = element.querySelector(".collapsible-handle"); var handle = element.querySelector(".collapsible-handle");
collapsibleHeader.classList.toggle("active") collapsibleHeader.classList.toggle("active")
let content = getNextSibling(collapsibleHeader, '.collapsible-content') let content = getNextSibling(collapsibleHeader, '.collapsible-content')
if (content.style.display === "block") { if (!collapsibleHeader.classList.contains("active")) {
content.style.display = "none" content.style.display = "none"
if (handle != null) { // render results don't have a handle if (handle != null) { // render results don't have a handle
handle.innerHTML = '&#x2795;' // plus handle.innerHTML = '&#x2795;' // plus
@ -69,7 +69,7 @@ function createCollapsibles(node) {
let handle = document.createElement('span') let handle = document.createElement('span')
handle.className = 'collapsible-handle' handle.className = 'collapsible-handle'
if (c.className.indexOf('active') !== -1) { if (c.classList.contains("active")) {
handle.innerHTML = '&#x2796;' // minus handle.innerHTML = '&#x2796;' // minus
} else { } else {
handle.innerHTML = '&#x2795;' // plus handle.innerHTML = '&#x2795;' // plus