diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/computer-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/computer-line.svg new file mode 100644 index 00000000..ed7d6069 --- /dev/null +++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/computer-line.svg @@ -0,0 +1 @@ + \ No newline at end of file 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 b6356bcc..2d43f1cb 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 @@ -86,6 +86,63 @@ let loggerUiUx; const split_instances = []; const anapnoe_app_id = "#anapnoe_app"; +function detectMobile() { + return ( ( window.innerWidth <= 768 ) );//&& ( window.innerHeight <= 600 ) ); +} +function debounce(func){ + var timer; + return function(event){ + if(timer) clearTimeout(timer); + timer = setTimeout(func,100,event); + }; +} + +function applyDefaultLayout(isMobile){ + anapnoe_app.querySelectorAll("[mobile]").forEach((tabItem) => { + if(isMobile){ + if(tabItem.childElementCount === 0){ + const mobile_attr = tabItem.getAttribute("mobile"); + if(mobile_attr){ + const mobile_target = anapnoe_app.querySelector(mobile_attr); + if(mobile_target){ + tabItem.setAttribute("mobile-restore", `#${mobile_target.parentElement.id}`); + tabItem.append(mobile_target); + + } + } + } + }else{ + if(tabItem.childElementCount > 0){ + const mobile_attr = tabItem.getAttribute("mobile-restore"); + if(mobile_attr){ + const mobile_target = anapnoe_app.querySelector(mobile_attr); + if(mobile_target){ + mobile_target.append(tabItem.firstElementChild); + } + } + } + } + }); +} + +function switchMobile(){ + const optslayout = window.opts.uiux_default_layout; + //console.log(optslayout); + anapnoe_app.classList.add(`default-${optslayout.toLowerCase()}`); + if(optslayout === "Auto"){ + window.addEventListener("resize",debounce(function(e){ + const isMobile = detectMobile(); + applyDefaultLayout(isMobile); + })); + }else if(optslayout === "Mobile"){ + applyDefaultLayout(true); + }else{ + applyDefaultLayout(false); + } + +} + + function getRootContainer() { return document.getElementById('tab_anapnoe_sd_uiux_core'); @@ -384,13 +441,19 @@ function updateExtraNetworksCards(el){ } function setupAnimationEventListeners(){ + document.addEventListener('animationend', function (e) { if (e.animationName === 'fade-out') { e.target.classList.add('hidden'); } }); + const notransition = window.opts.uiux_disable_transitions; + document.addEventListener('animationstart', function (e) { + if (notransition) { + e.target.classList.add("notransition"); + } if (e.animationName === 'fade-out') { if (e.target.className.indexOf('notransition') !== -1) { e.target.classList.add('hidden'); @@ -531,6 +594,8 @@ function onUiUxReady(content_div){ sdMaxOutputResolution(intvalue); }) sdMaxOutputResolution(window.opts.uiux_max_resolution_output); + + //switchMobile(); @@ -584,6 +649,8 @@ function setupGenerateObservers(){ } + + function initDefaultComponents(content_div) { const anapnoe_app = document.querySelector(anapnoe_app_id); content_div.querySelectorAll(`div.split`).forEach((el) => { @@ -763,14 +830,6 @@ function initDefaultComponents(content_div) { tabItem.classList.remove('fade-out'); tabItem.classList.add('fade-in'); //console.log('tab', tids, tabItem); - const mobile_attr = tabItem.getAttribute("mobile"); - if(mobile_attr){ - const mobile_target = anapnoe_app.querySelector(mobile_attr); - if(mobile_target){ - tabItem.append(mobile_target); - } - } - }); el.classList.add('active'); @@ -1244,8 +1303,9 @@ function setupLogger() { console.log("Maximum resolution output: ", window.opts.uiux_max_resolution_output); console.log("Ignore overrides: ", window.opts.uiux_ignore_overrides); 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); - 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 f509e1d0..19b44624 100644 --- a/extensions-builtin/anapnoe-sd-uiux/scripts/anapnoe_sd_uiux.py +++ b/extensions-builtin/anapnoe-sd-uiux/scripts/anapnoe_sd_uiux.py @@ -10,7 +10,9 @@ shared.options_templates.update(shared.options_section(('uiux_core', "Anapnoe UI "uiux_enable_console_log": shared.OptionInfo(False, "Enable console log"), "uiux_max_resolution_output": shared.OptionInfo(2048, "Max resolution output for txt2img and img2img"), "uiux_show_input_range_ticks": shared.OptionInfo(True, "Show ticks for input range slider"), - "uiux_no_slider_layout": shared.OptionInfo(False, "No input range sliders"), + "uiux_no_slider_layout": shared.OptionInfo(False, "No input range sliders"), + "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]}), })) diff --git a/extensions-builtin/anapnoe-sd-uiux/style.css b/extensions-builtin/anapnoe-sd-uiux/style.css index dbb80db0..ed47c2d6 100644 --- a/extensions-builtin/anapnoe-sd-uiux/style.css +++ b/extensions-builtin/anapnoe-sd-uiux/style.css @@ -1856,6 +1856,12 @@ button.active .icon-sort { -webkit-mask-image: url(./html/svg/team-line.svg); } +.icon-results{ + -webkit-mask-image: url(./html/svg/computer-line.svg); +} + + + #contributors_grid { gap: 5px; align-items: flex-start; @@ -2222,7 +2228,7 @@ button:hover svg { *.notransition.fade-in { display: flex !important; - position: initial !important; + /* position: initial !important; */ } *.notransition.fade-out { display: none !important; @@ -3202,10 +3208,38 @@ input[type="checkbox"] { } } +.default-desktop .mobile, +.default-auto .mobile{ + display:none; +} +.default-mobile .mobile{ + display: flex; +} +.default-mobile .split-container.params{ + min-width:100% !important; +} +.default-mobile .split-container.params ~ div{ + display:none; +} + +#txt2img_generate_group .generate{ + flex-grow: 1; +} + @media (max-width: 768px) { .xtabs-tab span { display: none; } + + .default-auto .mobile{ + display: flex; + } + .default-auto .split-container.params{ + min-width:100% !important; + } + .default-auto .split-container.params ~ div{ + display:none; + } } /* Firefox */