From e4b4ff9fadc5d8abaff031038f2eddd75cadd0fc Mon Sep 17 00:00:00 2001
From: anapnoe <124302297+anapnoe@users.noreply.github.com>
Date: Fri, 3 Nov 2023 21:05:28 +0200
Subject: [PATCH] show labels for aside, main, page tabs option setting

---
 .../html/templates/template-app-root.html     |  1 +
 .../template-aside-extra-networks.html        |  6 ++-
 .../templates/template-extras-params.html     |  2 +-
 .../templates/template-img2img-params.html    |  2 +-
 .../html/templates/template-train-params.html |  2 +-
 .../templates/template-txt2img-params.html    |  2 +-
 .../javascript/anapnoe_sd_uiux_core.js        | 44 ++++++++++++++++++-
 .../scripts/anapnoe_sd_uiux.py                |  4 +-
 extensions-builtin/anapnoe-sd-uiux/style.css  | 24 ++++++++++
 9 files changed, 79 insertions(+), 8 deletions(-)

diff --git a/extensions-builtin/anapnoe-sd-uiux/html/templates/template-app-root.html b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-app-root.html
index 78e5e3fe..77cb6806 100644
--- a/extensions-builtin/anapnoe-sd-uiux/html/templates/template-app-root.html
+++ b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-app-root.html
@@ -9,6 +9,7 @@
                         <polygon
                             points="17.3,11.7 15.8,11.7 20.2,19.3 3.8,19.3 12,5.2 14.2,9 15.8,9 12,2.5 1.5,20.7 22.5,20.7 	" />
                     </svg>
+                    <span>Anapnoe</span>
                 </button>
             </div>
             <div id="main_nav_content" class="layout-content">
diff --git a/extensions-builtin/anapnoe-sd-uiux/html/templates/template-aside-extra-networks.html b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-aside-extra-networks.html
index 2a70aef9..a2a5ce9d 100644
--- a/extensions-builtin/anapnoe-sd-uiux/html/templates/template-aside-extra-networks.html
+++ b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-aside-extra-networks.html
@@ -1,6 +1,6 @@
 <div id="accordion-aside" iconTrigger="#mask-icon-acc-arrow" class="accordion accordion-vertical no-drag">
     <div class="accordion-bar">
-		<button id="ae-button" class="ae-button">
+		<button id="acc-arrow-button" class="ae-button">
 			<div id="mask-icon-acc-arrow" class="mask-icon accordion-icon icon-arrow-down">
 			</div>
 		</button>
@@ -10,24 +10,28 @@
 				<a title="Use via API" target="_blank" href="/docs" >
 					<div title ="Use via API" class="mask-icon icon-rocket">			
 					</div>
+                    <span>Use via API</span>
 				</a>
 			</button>
 			<button class="ae-button">
 				<a title="Github" target="_blank" href="https://github.com/anapnoe/stable-diffusion-webui-ux">
 					<div class="mask-icon icon-github">			
 					</div>
+                    <span>Github</span>
 				</a>
 			</button>
 			<button class="ae-button">
 				<a title="Gradio" target="_blank" href="https://gradio.app" >
 					<div class="mask-icon icon-gradio">			
 					</div>
+                    <span>Gradio</span>
 				</a>
 			</button>
 			<button class="ae-button">
 				<a title="Reload UI" href="/" onclick="javascript:gradioApp().getElementById('settings_restart_gradio').click(); return false">
 					<div class="mask-icon icon-reload">			
 					</div>
+                    <span>Reload UI</span>
 				</a>
 			</button>
 			<div class="flexbox col spacer-v">
diff --git a/extensions-builtin/anapnoe-sd-uiux/html/templates/template-extras-params.html b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-extras-params.html
index ad35a05c..b4893360 100644
--- a/extensions-builtin/anapnoe-sd-uiux/html/templates/template-extras-params.html
+++ b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-extras-params.html
@@ -10,7 +10,7 @@
                 <button title="Extras Results" tabItemId="#extras_results_mobile_tabitem" tabGroup="extras" id="extras_results_mobile" class="xtabs-tab mobile">
                     <div class="mask-icon icon-results">
                     </div>
-                    <span>Extras Results</span>
+                    <span>Results</span>
                 </button>
             </div>
             <div class="flexbox row flex-end">
diff --git a/extensions-builtin/anapnoe-sd-uiux/html/templates/template-img2img-params.html b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-img2img-params.html
index f4c548d8..9db9c8fd 100644
--- a/extensions-builtin/anapnoe-sd-uiux/html/templates/template-img2img-params.html
+++ b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-img2img-params.html
@@ -30,7 +30,7 @@
                 <button title="img2img Results" tabItemId="#img2img_results_mobile_tabitem" tabGroup="img2img" id="img2img_results_mobile" class="xtabs-tab mobile">
                     <div class="mask-icon icon-results">
                     </div>
-                    <span>img2img Results</span>
+                    <span>Results</span>
                 </button>
              <!--    <button tabItemId="#img2img_temp_tabitem" tabGroup="img2img" class="xtabs-tab">
                     <div id="mask-icon-28i" class="mask-icon icon-bug">
diff --git a/extensions-builtin/anapnoe-sd-uiux/html/templates/template-train-params.html b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-train-params.html
index b17180d8..0e7d558c 100644
--- a/extensions-builtin/anapnoe-sd-uiux/html/templates/template-train-params.html
+++ b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-train-params.html
@@ -10,7 +10,7 @@
                 <button title="train Results" tabItemId="#train_results_mobile_tabitem" tabGroup="train" id="train_results_mobile" class="xtabs-tab mobile">
                     <div class="mask-icon icon-results">
                     </div>
-                    <span>Train Results</span>
+                    <span>Results</span>
                 </button>
             </div>
             
diff --git a/extensions-builtin/anapnoe-sd-uiux/html/templates/template-txt2img-params.html b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-txt2img-params.html
index ed6bc1d8..d452bc8d 100644
--- a/extensions-builtin/anapnoe-sd-uiux/html/templates/template-txt2img-params.html
+++ b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-txt2img-params.html
@@ -26,7 +26,7 @@
                 <button title="txt2img Results" tabItemId="#txt2img_results_mobile_tabitem" tabGroup="txt2img" id="txt2img_results_mobile" class="xtabs-tab mobile">
                     <div class="mask-icon icon-results">
                     </div>
-                    <span>txt2img Results</span>
+                    <span>Results</span>
                 </button>
                <!--  <button tabItemId="#txt2img_temp_tabitem" tabGroup="txt2img" class="xtabs-tab">
                     <div class="mask-icon icon-bug">
diff --git a/extensions-builtin/anapnoe-sd-uiux/javascript/anapnoe_sd_uiux_core.js b/extensions-builtin/anapnoe-sd-uiux/javascript/anapnoe_sd_uiux_core.js
index 8f5030a1..b3bd9045 100644
--- a/extensions-builtin/anapnoe-sd-uiux/javascript/anapnoe_sd_uiux_core.js
+++ b/extensions-builtin/anapnoe-sd-uiux/javascript/anapnoe_sd_uiux_core.js
@@ -1024,8 +1024,45 @@ function initDefaultComponents(content_div) {
     });
 
     uiux_no_slider_layout(window.opts.uiux_no_slider_layout);
-    
 
+    function uiux_show_labels_aside(value) {
+        if (value) {
+            anapnoe_app.classList.add("aside-labels");
+        } else {
+            anapnoe_app.classList.remove("aside-labels");
+        }
+    }
+    gradioApp().querySelector("#setting_uiux_show_labels_aside input").addEventListener("click", function (e) {
+        uiux_show_labels_aside(e.target.checked, true);
+    });
+    uiux_show_labels_aside(window.opts.uiux_show_labels_aside);
+
+
+    function uiux_show_labels_main(value) {
+        if (value) {
+            anapnoe_app.classList.add("main-labels");
+        } else {
+            anapnoe_app.classList.remove("main-labels");
+        }
+    }
+    gradioApp().querySelector("#setting_uiux_show_labels_main input").addEventListener("click", function (e) {
+        uiux_show_labels_main(e.target.checked, true);
+    });
+    uiux_show_labels_main(window.opts.uiux_show_labels_main);
+
+
+    function uiux_show_labels_tabs(value) {
+        if (value) {
+            anapnoe_app.classList.add("tab-labels");
+        } else {
+            anapnoe_app.classList.remove("tab-labels");
+        }
+    }
+    gradioApp().querySelector("#setting_uiux_show_labels_tabs input").addEventListener("click", function (e) {
+        uiux_show_labels_tabs(e.target.checked, true);
+    });
+    uiux_show_labels_tabs(window.opts.uiux_show_labels_tabs);
+    
 
 	// try to attach Logger Screen to main before full UIUXReady
 	const asideconsole = document.querySelector("#layout-console-log");
@@ -1307,7 +1344,10 @@ function setupLogger() {
     console.log("Show ticks for input range slider: ", window.opts.uiux_show_input_range_ticks);
     console.log("Default layout: ", window.opts.uiux_default_layout);
     console.log("Disable transitions: ", window.opts.uiux_disable_transitions);
-    
+    console.log("Aside labels: ", window.opts.uiux_show_labels_aside);
+    console.log("Main labels: ", window.opts.uiux_show_labels_main);
+    console.log("Tabs labels: ", window.opts.uiux_show_labels_tabs);
+
 
 	const isFirefox = navigator.userAgent.toLowerCase().includes('firefox');
 	if(isFirefox){
diff --git a/extensions-builtin/anapnoe-sd-uiux/scripts/anapnoe_sd_uiux.py b/extensions-builtin/anapnoe-sd-uiux/scripts/anapnoe_sd_uiux.py
index 19b44624..6d3871ad 100644
--- a/extensions-builtin/anapnoe-sd-uiux/scripts/anapnoe_sd_uiux.py
+++ b/extensions-builtin/anapnoe-sd-uiux/scripts/anapnoe_sd_uiux.py
@@ -14,7 +14,9 @@ shared.options_templates.update(shared.options_section(('uiux_core', "Anapnoe UI
     "uiux_disable_transitions": shared.OptionInfo(False, "Disable transitions"),
     "uiux_default_layout": shared.OptionInfo("Auto", "Layout", gr.Radio, {"choices": ["Auto","Desktop", "Mobile"]}),    
     "uiux_ignore_overrides": shared.OptionInfo([], "Ignore Overrides", gr.CheckboxGroup, lambda: {"choices": [x[0] for x in infotext_to_setting_name_mapping]}),
-    
+    "uiux_show_labels_aside": shared.OptionInfo(False, "Show labels for aside tabs"),
+    "uiux_show_labels_main": shared.OptionInfo(False, "Show labels for main tabs"),
+    "uiux_show_labels_tabs": shared.OptionInfo(False, "Show labels for page tabs"),
  }))
 
 
diff --git a/extensions-builtin/anapnoe-sd-uiux/style.css b/extensions-builtin/anapnoe-sd-uiux/style.css
index 20d2c5c7..4ceeafcd 100644
--- a/extensions-builtin/anapnoe-sd-uiux/style.css
+++ b/extensions-builtin/anapnoe-sd-uiux/style.css
@@ -2936,6 +2936,9 @@ iframe{
     padding: 0;
     background-color: transparent;
     line-height: 0;
+    display: flex;
+    align-items: center;
+    gap: 5px;
 }
 
 div#workspaces_tabitem > div {
@@ -3208,6 +3211,7 @@ input[type="checkbox"] {
     }
 }
 
+#sidebar_secondary_tabs a span,
 .default-desktop .mobile,
 .default-auto .mobile{
     display:none;
@@ -3226,6 +3230,26 @@ input[type="checkbox"] {
 #img2img_results_generate_tabitem .generate{
     flex-grow: 1;
 }
+.aside-labels #sidebar_secondary_tabs a span,
+.main-labels #main-nav .xtabs-tab span,
+.tab-labels [id$="2img_header"] span ,
+.aside-labels #accordion-aside .xtabs-tab span {
+    display: flex !important;
+}
+.main-labels #main-nav .xtabs-tab,
+.tab-labels [id$="2img_header"] .xtabs-tab,
+.aside-labels #accordion-aside .xtabs-tab {
+    justify-content: flex-start;
+}
+#acc-arrow-button,
+.aside-labels .accordion-bar > div{
+    width:100%;
+}
+
+.aside-labels div#sidebar_secondary_tabs button {
+    width: 100%;
+    justify-content: flex-start;
+}
 
 @media (max-width: 768px) {
     .xtabs-tab span {