From beff34013d8cf6c7ee550ab3ef0b6b4d0e602a32 Mon Sep 17 00:00:00 2001
From: anapnoe <124302297+anapnoe@users.noreply.github.com>
Date: Tue, 21 Feb 2023 09:10:50 +0200
Subject: [PATCH] added ui hidden tabs in settings

---
 .../sd_theme_editor/javascript/ui_theme.js    |  5 +-
 javascript/ui.js                              | 82 +++++++++++++++----
 modules/shared.py                             |  1 +
 3 files changed, 71 insertions(+), 17 deletions(-)

diff --git a/extensions-builtin/sd_theme_editor/javascript/ui_theme.js b/extensions-builtin/sd_theme_editor/javascript/ui_theme.js
index 4fc69b62..149675b4 100644
--- a/extensions-builtin/sd_theme_editor/javascript/ui_theme.js
+++ b/extensions-builtin/sd_theme_editor/javascript/ui_theme.js
@@ -217,11 +217,12 @@ function updateTheme(vars){
 	if(preview_styles){
 		preview_styles.innerHTML = ':host {'+ inner_styles +'}';
 	}else{
-		const r = gradioApp().querySelector('style');			
+		
+		const r = gradioApp();		
 		const style = document.createElement('style');
 		style.id="preview-styles";
 		style.innerHTML = ':host {'+ inner_styles +'}';
-		r.appendChild(style);		
+		r.appendChild(style);
 	}
 	
 	const vars_textarea = gradioApp().querySelector('#theme_vars textarea');
diff --git a/javascript/ui.js b/javascript/ui.js
index 64ebb9b7..fd9cfe8f 100644
--- a/javascript/ui.js
+++ b/javascript/ui.js
@@ -435,25 +435,22 @@ onUiUpdate(function(){
 	}	
     quick_menu.addEventListener('click', toggleQuickMenu);
 	
+	
 	// additional ui styles 
 	let styleobj = {};
-	function updateOpStyles() {	
-
+	const r = gradioApp();		
+	const style = document.createElement('style');
+	style.id="ui-styles";
+	r.appendChild(style);
+	
+	function updateOpStyles() {		
 		let ops_styles = "";	
 		for (const key in styleobj) {		
 			ops_styles += styleobj[key];
-		}
-		
-		const ui_styles = gradioApp().querySelector('ui_styles');
-		if(ui_styles){
-			ui_styles.innerHTML = ops_styles; 					
-		}else{
-			const r = gradioApp().querySelector('style');			
-			const style = document.createElement('style');
-			style.id="ui-styles";
-			style.innerHTML = ops_styles; 
-			r.appendChild(style);
-		}   
+		}	
+		const ui_styles = gradioApp().getElementById('ui-styles');		
+		ui_styles.innerHTML = ops_styles; 
+		//console.log(ui_styles);
 	}
 	
 	function imagePreviewFitMethod(value) {
@@ -469,10 +466,65 @@ onUiUpdate(function(){
 	
 	imagePreviewFitMethod(opts.live_preview_image_fit.toLowerCase());
 	
-	/* anapnoe ui end */	
 
+	//hidden ui tabs
+	let radio_html="";
+	let styletabs={};
+	const setting_ui_hidden_tabs = gradioApp().querySelector('#setting_ui_hidden_tabs textarea');
+	setting_ui_hidden_tabs.style.display = "none";
+	
+	function tabsHiddenNthMarkup() {		
+		const keys = Object.keys(styletabs);
+		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;}";
+				setting_ui_hidden_tabs.value += key + ",";
+			}else{				
+				delete styleobj[key];
+			}
+		})
+		
+		const iEvent = new Event("input");		
+		Object.defineProperty(iEvent, "target", {value: setting_ui_hidden_tabs})		
+		setting_ui_hidden_tabs.dispatchEvent(iEvent);
+		
+		updateOpStyles();
+	}
+	
+	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 += '<label class="gr-input-label flex items-center text-gray-700 text-sm space-x-2 border py-1.5 px-3 rounded-lg cursor-pointer bg-white shadow-sm checked:shadow-inner"><input type="checkbox" name="uihb" class="gr-check-radio gr-radio" '+checked+' value="'+elem.innerText+'"><span class="ml-2" title="">'+elem.innerText+'</span></label>';
+	})
+
+	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();
+	
+	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();	
+		}
+	})
 	
 	
+	/* anapnoe ui end */	
 
 	
 })
diff --git a/modules/shared.py b/modules/shared.py
index 681547e8..eb8e16be 100644
--- a/modules/shared.py
+++ b/modules/shared.py
@@ -461,6 +461,7 @@ options_templates.update(options_section(('ui', "User interface"), {
     "keyedit_precision_extra": OptionInfo(0.05, "Ctrl+up/down precision when editing <extra networks:0.9>", gr.Slider, {"minimum": 0.01, "maximum": 0.2, "step": 0.001}),
     "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_extra_networks_tab_reorder": OptionInfo("", "Extra networks tab order"),
     "localization": OptionInfo("None", "Localization (requires restart)", gr.Dropdown, lambda: {"choices": ["None"] + list(localization.localizations.keys())}, refresh=lambda: localization.list_localizations(cmd_opts.localizations_dir)),
 }))