show labels for aside, main, page tabs option setting

This commit is contained in:
anapnoe
2023-11-03 21:05:28 +02:00
parent 8f008768e8
commit e4b4ff9fad
9 changed files with 79 additions and 8 deletions
@@ -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">
@@ -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">
@@ -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">
@@ -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">
@@ -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>
@@ -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">
@@ -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){
@@ -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"),
}))
@@ -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 {