extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2024-11-22 16:23:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

updated so tabs work now, and we have a settings tab and an about tab

Browse Source
This commit is contained in:
Malcolm Diller 2022-11-08 19:54:41 -08:00
parent f216ee739a
commit e175b87384
4 changed files with 66 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
ui/index.html
View File

@ -26,25 +26,20 @@
<span id="server-status-msg">Stable Diffusion is starting..</span>
</div>
<div id="tab-container">
<span class="active">
<span id="tab-main" class="tab active">
<span><i class="fa fa-image icon"></i> Generate</span>
</span>
<span id="settings-button" class="dropdown">
<span id="tab-settings" class="tab">
<span><i class="fa fa-gear icon"></i> Settings</span>
</span>
<span class="dropdown">
<span id="tab-about" class="tab">
<span><i class="fa fa-circle-info icon"></i> About</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>
</span>
</div>
</div>
<div id="tab-content" class="flex-container">
<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">
@ -223,15 +218,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>About</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>

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

@ -316,10 +316,6 @@ img {
}
#community-links {
list-style-type: none;
margin: 0;
padding: 12pt;
padding-bottom: 0pt;
transform: translateX(-15%);
}
#community-links li {
padding-bottom: 12pt;
@ -571,6 +567,9 @@ input::file-selector-button {
#editor {
padding: 16px 8px;
}
.tab-content-inner {
margin: 0px;
}
}
@media (min-width: 700px) {
#editor {
@ -750,7 +749,7 @@ input::file-selector-button {
align-items: flex-end;
}
#tab-container > span {
.tab {
padding: 8px 16px;
border-radius: 4px 4px 0px 0px;
margin-left: 8px;
@ -760,18 +759,29 @@ input::file-selector-button {
transition: opacity 0.25s;
}
#tab-container > span:hover {
.tab:hover {
opacity: 75%;
}
#tab-container > span.active {
.tab.active {
opacity: 100%;
}
#tab-content {
.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;
}
/* FLOATING FIXED STUFF */
/*

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

@ -1331,4 +1331,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()

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

@ -132,6 +132,3 @@ function initParameters() {
initParameters();
document.getElementById("settings-button").addEventListener('click', event => {
document.getElementById("system-settings").classList.add("active")
})