From 240dcf173a276865b665e911141c7bc219632aa8 Mon Sep 17 00:00:00 2001 From: anapnoe <124302297+anapnoe@users.noreply.github.com> Date: Tue, 28 Feb 2023 12:55:06 +0200 Subject: [PATCH] Header tabs menu option added --- .../sd_theme_editor/themes/default.css | 2 +- .../sd_theme_editor/themes/ogxBGreen.css | 2 +- .../sd_theme_editor/themes/ogxGreen.css | 2 +- javascript/ui.js | 200 +++++++++++++----- modules/shared.py | 1 + modules/ui.py | 16 +- style.css | 23 ++ 7 files changed, 190 insertions(+), 56 deletions(-) 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 {