diff --git a/extensions-builtin/sd_theme_editor/themes/default.css b/extensions-builtin/sd_theme_editor/themes/default.css
index 72dc7c66..881d6bff 100644
--- a/extensions-builtin/sd_theme_editor/themes/default.css
+++ b/extensions-builtin/sd_theme_editor/themes/default.css
@@ -1 +1 @@
---main-bg-color:#1a1a1a;--primary-color:#03d0a8;--input-bg-color:#202124;--input-border-color:#494c50;--panel-bg-color:#292a2d;--panel-border-color:#494c50;--panel-border-radius:0px;--subgroup-bg-color:#1a1a1a;--subgroup-input-bg-color:#202124;--subgroup-input-border-color:#494c50;--subpanel-bg-color:#222325;--subpanel-border-color:#494c50;--subpanel-border-radius:8px;--textarea-focus-color:#5a5d60;--input-focus-color:#03d0a8;--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:#ef4444;--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:#caccce;--icon-hover-color:#1a1a1a;--icon-size:22px;--nav-bg-color:#202124;--icon-color:#caccce;--icon-hover-color:#1a1a1a;--icon-size:22px;--nav-bg-color:#0a0a0a;--nav-color:#caccce;--nav-hover-color:#0a0a0a;--input-color:#caccce;--label-color:#caccce;--subgroup-input-color:#000000;--subgroup-label-color:#000000;--placeholder-color:#494c50;--text-color:#caccce;
\ No newline at end of file
+--main-bg-color:hsl(0deg 0% 10%);--primary-color:hsl(168deg 97% 41%);--input-bg-color:hsl(225deg 6% 13%);--input-border-color:hsl(214deg 5% 30%);--panel-bg-color:hsl(225deg 5% 17%);--panel-border-color:hsl(214deg 5% 30%);--panel-border-radius:0px;--subgroup-bg-color:hsl(0deg 0% 10%);--subgroup-input-bg-color:hsl(225deg 6% 13%);--subgroup-input-border-color:hsl(214deg 5% 30%);--subpanel-bg-color:hsl(220deg 4% 14%);--subpanel-border-color:hsl(214deg 5% 30%);--subpanel-border-radius:8px;--textarea-focus-color:hsl(210deg 3% 36%);--input-focus-color:hsl(168deg 97% 41%);--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:hsl(0deg 84% 60%);--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:hsl(168deg 97% 41%);--icon-hover-color:hsl(0deg 0% 10%);--icon-size:22px;--nav-bg-color:hsl(0deg 0% 4%);--nav-color:hsl(210deg 4% 80%);--nav-hover-color:hsl(0deg 0% 4%);--input-color:hsl(210deg 4% 80%);--label-color:hsl(210deg 4% 80%);--subgroup-input-color:hsl(0deg 0% 0%);--placeholder-color:hsl(214deg 5% 30%);--text-color:hsl(210deg 4% 80%);--mobile-outside-gap-size:2px;--mobile-inside-padding-size:2px;
\ No newline at end of file
diff --git a/extensions-builtin/sd_theme_editor/themes/ogxBGreen.css b/extensions-builtin/sd_theme_editor/themes/ogxBGreen.css
index 09c5aa82..24dea19b 100644
--- a/extensions-builtin/sd_theme_editor/themes/ogxBGreen.css
+++ b/extensions-builtin/sd_theme_editor/themes/ogxBGreen.css
@@ -1 +1 @@
---main-bg-color:hsl(195deg 22% 8%);--primary-color:hsl(159deg 96% 55%);--input-bg-color:hsl(202deg 25% 12%);--input-border-color:hsl(200deg 24% 32%);--panel-bg-color:hsl(200deg 24% 20%);--panel-border-color:hsl(200deg 24% 32%);--panel-border-radius:4px;--subgroup-bg-color:hsl(195deg 22% 8%);--subgroup-input-bg-color:hsl(200deg 24% 8%);--subgroup-input-border-color:hsl(200deg 24% 32%);--subpanel-bg-color:hsl(202deg 25% 12%);--subpanel-border-color:hsl(200deg 24% 32%);--subpanel-border-radius:8px;--textarea-focus-color:hsl(152deg 3% 36%);--input-focus-color:hsl(159deg 96% 55%);--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:hsl(200deg 24% 32%);--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:hsl(201deg 24% 77%);--icon-hover-color:hsl(195deg 22% 8%);--icon-size:22px;--nav-bg-color:hsl(194deg 24% 4%);--nav-color:hsl(201deg 24% 77%);--nav-hover-color:hsl(194deg 24% 4%);--input-color:hsl(159deg 96% 55%);--label-color:hsl(201deg 24% 77%);--subgroup-input-color:hsl(302deg 100% 100%);--placeholder-color:hsl(200deg 24% 32%);--text-color:hsl(201deg 24% 77%);
\ No newline at end of file
+--main-bg-color:hsl(195deg 22% 8%);--primary-color:hsl(159deg 96% 55%);--input-bg-color:hsl(202deg 25% 12%);--input-border-color:hsl(200deg 24% 32%);--panel-bg-color:hsl(200deg 24% 20%);--panel-border-color:hsl(200deg 24% 32%);--panel-border-radius:4px;--subgroup-bg-color:hsl(195deg 22% 8%);--subgroup-input-bg-color:hsl(200deg 24% 8%);--subgroup-input-border-color:hsl(200deg 24% 32%);--subpanel-bg-color:hsl(202deg 25% 12%);--subpanel-border-color:hsl(200deg 24% 32%);--subpanel-border-radius:8px;--textarea-focus-color:hsl(152deg 3% 36%);--input-focus-color:hsl(159deg 96% 55%);--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:hsl(200deg 24% 32%);--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:hsl(159deg 96% 55%);--icon-hover-color:hsl(195deg 22% 8%);--icon-size:22px;--nav-bg-color:hsl(194deg 24% 4%);--nav-color:hsl(201deg 24% 77%);--nav-hover-color:hsl(194deg 24% 4%);--input-color:hsl(159deg 96% 55%);--label-color:hsl(201deg 24% 77%);--subgroup-input-color:hsl(302deg 100% 100%);--placeholder-color:hsl(200deg 24% 32%);--text-color:hsl(201deg 24% 77%);--mobile-outside-gap-size:3px;--mobile-inside-padding-size:3px;
\ No newline at end of file
diff --git a/extensions-builtin/sd_theme_editor/themes/ogxGreen.css b/extensions-builtin/sd_theme_editor/themes/ogxGreen.css
index 278d49b5..79e0a760 100644
--- a/extensions-builtin/sd_theme_editor/themes/ogxGreen.css
+++ b/extensions-builtin/sd_theme_editor/themes/ogxGreen.css
@@ -1 +1 @@
---main-bg-color:#121019;--primary-color:#1efa89;--input-bg-color:#1c1726;--input-border-color:#4a3e65;--panel-bg-color:#2e273f;--panel-border-color:#4a3e65;--panel-border-radius:4px;--subgroup-bg-color:#121019;--subgroup-input-bg-color:#13101a;--subgroup-input-border-color:#4a3e65;--subpanel-bg-color:#1c1726;--subpanel-border-color:#4a3e65;--subpanel-border-radius:8px;--textarea-focus-color:#5a5d60;--input-focus-color:#1efa89;--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:#4a3e65;--max-padding: max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:#bfb6d2;--icon-hover-color:#121019;--icon-size:22px;--nav-bg-color:#09080d;--nav-color: #bfb6d2;--nav-hover-color:#09080d;--input-color:#1efa89;--label-color:#bfb6d2;--subgroup-input-color:#ffffff;--subgroup-label-color:#ffffff;--placeholder-color:#4a3e65;--text-color:#bfb6d2;
\ No newline at end of file
+--main-bg-color:hsl(253deg 22% 8%);--primary-color:hsl(149deg 96% 55%);--input-bg-color:hsl(260deg 25% 12%);--input-border-color:hsl(258deg 24% 32%);--panel-bg-color:hsl(258deg 24% 20%);--panel-border-color:hsl(258deg 24% 32%);--panel-border-radius:4px;--subgroup-bg-color:hsl(253deg 22% 8%);--subgroup-input-bg-color:hsl(258deg 24% 8%);--subgroup-input-border-color:hsl(258deg 24% 32%);--subpanel-bg-color:hsl(260deg 25% 12%);--subpanel-border-color:hsl(258deg 24% 32%);--subpanel-border-radius:8px;--textarea-focus-color:hsl(210deg 3% 36%);--input-focus-color:hsl(149deg 96% 55%);--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:hsl(258deg 24% 32%);--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:hsl(259deg 24% 77%);--icon-hover-color:hsl(253deg 22% 8%);--icon-size:22px;--nav-bg-color:hsl(252deg 24% 4%);--nav-color:hsl(259deg 24% 77%);--nav-hover-color:hsl(252deg 24% 4%);--input-color:hsl(149deg 96% 55%);--label-color:hsl(259deg 24% 77%);--subgroup-input-color:hsl(0deg 100% 100%);--placeholder-color:hsl(258deg 24% 32%);--text-color:hsl(259deg 24% 77%);--mobile-outside-gap-size:3px;--mobile-inside-padding-size:3px;
\ No newline at end of file
diff --git a/javascript/ui.js b/javascript/ui.js
index a293ad89..ef1a5686 100644
--- a/javascript/ui.js
+++ b/javascript/ui.js
@@ -213,6 +213,8 @@ function recalculate_prompts_img2img(){
}
+
+
opts = {}
onUiUpdate(function(){
if(Object.keys(opts).length != 0) return;
@@ -534,63 +536,166 @@ onUiUpdate(function(){
//hidden ui tabs
- let radio_html="";
- let styletabs={};
+ let radio_hidden_html="";
+ let radio_header_html="";
+ let hiddentabs={};
+ let headertabs={};
const setting_ui_hidden_tabs = gradioApp().querySelector('#setting_ui_hidden_tabs textarea');
- setting_ui_hidden_tabs.style.display = "none";
+ const setting_ui_header_tabs = gradioApp().querySelector('#setting_ui_header_tabs textarea');
+ const parent_header_tabs = gradioApp().querySelector('#nav_menu_header_tabs');
- function tabsHiddenNthMarkup() {
- const keys = Object.keys(styletabs);
+ setting_ui_hidden_tabs.style.display = "none";
+ setting_ui_header_tabs.style.display = "none";
+
+ function tabOpsSave(setting){
+ const iEvent = new Event("input");
+ Object.defineProperty(iEvent, "target", {value: setting})
+ setting.dispatchEvent(iEvent);
+ }
+
+ function tabsHiddenChange() {
+ const keys = Object.keys(hiddentabs);
setting_ui_hidden_tabs.value = "";
keys.forEach((key, index) => {
- //console.log(`${key}: ${styletabs[key]} ${index}`);
- if(styletabs[key] == true){
- styleobj[key] = "#tabs > div > button:nth-child("+(index+1)+"){display:none;}";
+ //console.log(`${key}: ${hiddentabs[key]} ${index}`);
+ if(hiddentabs[key] == true){
+ styleobj[key] = "#tabs > div:first-child > button:nth-child("+(index+1)+"){display:none;}";
setting_ui_hidden_tabs.value += key + ",";
- }else{
- delete styleobj[key];
+ }else{
+ styleobj[key] = "#tabs > div:first-child > button:nth-child("+(index+1)+"){display:block;}";
}
})
- const iEvent = new Event("input");
- Object.defineProperty(iEvent, "target", {value: setting_ui_hidden_tabs})
- setting_ui_hidden_tabs.dispatchEvent(iEvent);
- //updateOpStyles();
+ tabOpsSave(setting_ui_hidden_tabs);
+ tabsHeaderChange();
+
}
- gradioApp().querySelectorAll('#tabs > div > button').forEach(function (elem) {
- let tabvalue = elem.innerText.replace(" ", "");
- styletabs[tabvalue] = false;
- let checked = "";
- if(setting_ui_hidden_tabs.value.indexOf(tabvalue) != -1){
- styletabs[tabvalue] = true;
- checked = "checked";
- }
- radio_html += '';
- })
-
- let div = document.createElement("div")
- div.id = "hidden_radio_tabs_container"
- div.classList.add("flex", "flex-wrap", "gap-2");
- div.innerHTML = radio_html;
- setting_ui_hidden_tabs.parentElement.appendChild(div);
- tabsHiddenNthMarkup();
+ function tabsHeaderChange() {
+ const keys = Object.keys(headertabs);
+ setting_ui_header_tabs.value = "";
+ keys.forEach((key, index) => {
+ //console.log(`${key}: ${hiddentabs[key]} ${index}`);
+ let nkey = key+"_hr";
+ if(headertabs[key] == true && hiddentabs[key] == false){
+ styleobj[nkey] = "#nav_menu_header_tabs > button:nth-child("+(index+1)+"){display:block;}";
+ setting_ui_header_tabs.value += key + ",";
+ }else{
+ styleobj[nkey] = "#nav_menu_header_tabs > button:nth-child("+(index+1)+"){display:none;}";
+ }
+ })
+
+ tabOpsSave(setting_ui_header_tabs);
+ }
+
+ const Observe = (sel, opt, cb) => {
+ const Obs = new MutationObserver((m) => [...m].forEach(cb));
+ gradioApp().querySelectorAll(sel).forEach(el => Obs.observe(el, opt));
+ }
+
+ Observe("#tabs > div.tabitem", {
+ attributesList: ["style"], attributeOldValue: false, }, (m) => {
+
+ if(m.target.style.display === 'block'){
+ let idx = m.target.getAttribute("tab-item");
+ tabSelected(idx);
+ }
+ })
+
+ function tabSelected(idx){
+
+ gradioApp().querySelectorAll('#tabs > div > button.bg-white').forEach(function (tab){
+ tab.classList.remove("bg-white");
+ })
+
+ gradioApp().querySelectorAll('#tabs > div > button:nth-child('+(parseInt(idx)+1)+')').forEach(function (tab){
+ tab.classList.add("bg-white");
+ })
+ }
+
+ function navigate2Tab(idx){
+
+ gradioApp().querySelectorAll('#tabs > div.tabitem').forEach(function (tabitem, index){
+ if(parseInt(idx) === index){
+ tabitem.style.display = "block";
+ }else{
+ tabitem.style.display = "none";
+ }
+ })
+ }
+
+ const maintabs = gradioApp().querySelectorAll('#tabs > div:first-child > button');
+ const tabitem = gradioApp().querySelectorAll('#tabs > div.tabitem');
+
+ maintabs.forEach(function (elem, index) {
+ let tabvalue = elem.innerText.replaceAll(" ", "");
+ hiddentabs[tabvalue] = false;
+ headertabs[tabvalue] = false;
+ let checked_hidden = "";
+ let checked_header = "";
+ if(setting_ui_hidden_tabs.value.indexOf(tabvalue) != -1){
+ hiddentabs[tabvalue] = true;
+ checked_hidden = "checked";
+ }
+ if(setting_ui_header_tabs.value.indexOf(tabvalue) != -1){
+ headertabs[tabvalue] = true;
+ checked_header = "checked";
+ }
+ radio_hidden_html += '';
+ radio_header_html += '';
+
+ tabitem[index].setAttribute("tab-item", index);
+
+ let clonetab = elem.cloneNode(true);
+ clonetab.id = tabvalue+"_clone";
+ parent_header_tabs.append(clonetab);
+ clonetab.setAttribute("tab-id", index);
+
+ clonetab.addEventListener('click', function (e) {
+ const idx = e.currentTarget.getAttribute("tab-id");
+ navigate2Tab(idx);
+ })
+
+ })
+
+
+ let div = document.createElement("div");
+ div.id = "hidden_radio_tabs_container";
+ div.classList.add("flex", "flex-wrap", "gap-2");
+ div.innerHTML = radio_hidden_html;
+ setting_ui_hidden_tabs.parentElement.appendChild(div);
+
+ div = document.createElement("div");
+ div.id = "header_radio_tabs_container";
+ div.classList.add("flex", "flex-wrap", "gap-2");
+ div.innerHTML = radio_header_html;
+ setting_ui_header_tabs.parentElement.appendChild(div);
+
+
+ // hidden tabs
gradioApp().querySelector("#hidden_radio_tabs_container").addEventListener('click', function (e) {
if (e.target && e.target.matches("input[type='checkbox']")) {
- let tabvalue = e.target.value.replace(" ", "");
- if(e.target.checked){
- styletabs[tabvalue] = true;
- }else{
- styletabs[tabvalue] = false;
- }
- tabsHiddenNthMarkup();
+ let tabvalue = e.target.value.replaceAll(" ", "");
+ hiddentabs[tabvalue] = e.target.checked
+ tabsHiddenChange();
+ updateOpStyles();
+ }
+ })
+ // header tabs
+ gradioApp().querySelector("#header_radio_tabs_container").addEventListener('click', function (e) {
+ if (e.target && e.target.matches("input[type='checkbox']")) {
+ let tabvalue = e.target.value.replaceAll(" ", "");
+ headertabs[tabvalue] = e.target.checked;
+ tabsHeaderChange();
updateOpStyles();
}
})
+ tabsHiddenChange();
+ // add to quick settings
const settings_submit = gradioApp().querySelector('#settings_submit');
const quick_parent = gradioApp().querySelector("#quicksettings_overflow");
@@ -598,19 +703,14 @@ onUiUpdate(function(){
const setting_quicksettings = gradioApp().querySelector('#setting_quicksettings textarea');
let field_settings = setting_quicksettings.value.replace(" ", "");
if(checked){
- field_settings += ","+id;
-
- let setting_row = gradioApp().querySelector('#row_setting_'+id);
- //setting_row.id = setting_row.id.replace("row_setting", "quick_row");
+ field_settings += ","+id;
+ let setting_row = gradioApp().querySelector('#row_setting_'+id);
quick_parent.append(setting_row);
-
}else{
- field_settings = field_settings.replaceAll(id, ",");
-
+ field_settings = field_settings.replaceAll(id, ",");
const setting_parent = gradioApp().querySelector("#"+section+"_settings_2img_settings");
let quick_row = gradioApp().querySelector('#row_setting_'+id);
- console.log(quick_row);
- //quick_row.id = quick_row.id.replace("quick_row","row_setting");
+ console.log(quick_row);
setting_parent.append(quick_row);
}
@@ -625,10 +725,8 @@ onUiUpdate(function(){
Object.defineProperty(cEvent, "target", {value: settings_submit})
settings_submit.dispatchEvent(cEvent);
//settings_submit.click();
-
- console.log(section + " - "+ id + " - " + checked);
-
-
+
+ //console.log(section + " - "+ id + " - " + checked);
}
gradioApp().querySelectorAll('[id*="add2quick_"]').forEach(function (elem){
let trg = elem.id.split('_add2quick_setting_');
diff --git a/modules/shared.py b/modules/shared.py
index 69440be4..e83bd19c 100644
--- a/modules/shared.py
+++ b/modules/shared.py
@@ -467,6 +467,7 @@ options_templates.update(options_section(('ui', "User interface"), {
"quicksettings": OptionInfo("sd_model_checkpoint", "Quicksettings list"),
"ui_reorder": OptionInfo(", ".join(ui_reorder_categories), "txt2img/img2img UI item order"),
"ui_hidden_tabs": OptionInfo("", "Hidden Tabs"),
+ "ui_header_tabs": OptionInfo("", "Header Tabs"),
"ui_offcanvas_menu": OptionInfo(True, "Use always offcanvas menu otherwise use only on mobile"),
"ui_views_order": OptionInfo("row-reverse", "Interface order input/parameters | output/preview", gr.Radio, {"choices": ["row", "row-reverse"]}),
"ui_extra_networks_tab_reorder": OptionInfo("", "Extra networks tab order"),
diff --git a/modules/ui.py b/modules/ui.py
index 74aef17f..586db54b 100644
--- a/modules/ui.py
+++ b/modules/ui.py
@@ -1705,6 +1705,11 @@ def create_ui():
extensions_interface = ui_extensions.create_ui()
interfaces += [(extensions_interface, "Extensions", "extensions")]
+
+ # it doesn't work for all tabs only for txt2img and img2img :( js to the rescue
+ # def change_tab(selected):
+ # print(selected)
+ # return gr.Tabs.update(selected=selected)
with gr.Blocks(css=css, analytics_enabled=False, title="Stable Diffusion") as demo:
with gr.Row(elem_id="quicksettings"):
@@ -1721,10 +1726,17 @@ def create_ui():
gr.Row(elem_id="quick_menu")
parameters_copypaste.connect_paste_params_buttons()
-
+
+
with gr.Tabs(elem_id="tabs") as tabs:
gr.Row(elem_id="nav_menu")
- for interface, label, ifid in interfaces:
+ gr.Row(elem_id="nav_menu_header_tabs")
+ # with gr.Row(elem_id="nav_menu_header_tabs"):
+ # for interface, label, ifid in interfaces:
+ # btn = gr.Button(label, elem_id='tab_clone_' + ifid)
+ # btn.click(change_tab, btn, tabs)
+
+ for interface, label, ifid in interfaces:
with gr.TabItem(label, id=ifid, elem_id='tab_' + ifid):
interface.render()
diff --git a/style.css b/style.css
index 8165c61b..f26b0b77 100644
--- a/style.css
+++ b/style.css
@@ -1718,7 +1718,30 @@ canvas[key=mask] {
display:none;
}
+#top_row_sd_model_checkpoint {
+ margin-right: 50px;
+ margin-left: 50px;
+ max-width: 290px;
+}
+#nav_menu_header_tabs{
+ position:absolute;
+ height: 34px;
+ top:0;
+ left:50px;
+}
+#nav_menu_header_tabs button{
+ font-size: 14px;
+ flex: 1 1 auto;
+ flex-grow: 0;
+ min-width: unset;
+ padding-bottom: 0;
+ border: 0;
+ color:var(--nav-color);
+}
+#nav_menu_header_tabs button.bg-white{
+ color:var(--primary-color);
+}
/*
[id$="settings_2img_settings"] button {