diff --git a/javascript/ui.js b/javascript/ui.js index 5de80382..3dc4880e 100644 --- a/javascript/ui.js +++ b/javascript/ui.js @@ -869,9 +869,7 @@ onUiUpdate(function(){ const tabitems = gradioApp().querySelectorAll('#tabs > div.tabitem'); function tabOpsSave(setting){ - const iEvent = new Event("input"); - Object.defineProperty(iEvent, "target", {value: setting}) - setting.dispatchEvent(iEvent); + updateInput(setting); } function tabsHiddenChange() { @@ -1024,9 +1022,7 @@ onUiUpdate(function(){ const quick_parent = gradioApp().querySelector("#quicksettings_overflow_container"); const setting_quicksettings = gradioApp().querySelector('#setting_quicksettings textarea'); function saveQuickSettings(){ - const iEvent = new Event("input"); - Object.defineProperty(iEvent, "target", {value: setting_quicksettings}) - setting_quicksettings.dispatchEvent(iEvent); + updateInput(setting_quicksettings); const cEvent = new Event("click");//submit Object.defineProperty(cEvent, "target", {value: settings_submit}) settings_submit.dispatchEvent(cEvent); @@ -1129,7 +1125,7 @@ onUiUpdate(function(){ }) clone_range.addEventListener('change', function (e) { elem.value = clone_range.value; - updateInput(elem); + updateInput(elem); }) clone_num.addEventListener('input', function (e) { clone_range.value = e.target.value; @@ -1146,15 +1142,15 @@ onUiUpdate(function(){ clone_range.value = ( percent * (this.max - this.min)) + parseFloat(this.min); clone_num.value = clone_range.value; } - }, {passive: true}); + }, {passive: true}) clone_range.addEventListener('touchstart', function(e) { if( e.touches[0].pageY > yoffset_min && e.touches[0].pageY < yoffset_max){ drag_clone_range = true; } - }, {passive: true}); + }, {passive: true}) clone_range.addEventListener('touchend', function(e) { drag_clone_range = false; - }, {passive: true}); + }, {passive: true}) } @@ -1434,9 +1430,7 @@ onUiUpdate(function(){ //console.log(order_settings); const setting_quicksettings = gradioApp().querySelector('#setting_quicksettings textarea'); setting_quicksettings.value = order_settings; - const iEvent = new Event("input"); - Object.defineProperty(iEvent, "target", {value: setting_quicksettings}) - setting_quicksettings.dispatchEvent(iEvent); + updateInput(setting_quicksettings); const cEvent = new Event("click");//submit Object.defineProperty(cEvent, "target", {value: settings_submit}) @@ -1613,9 +1607,12 @@ function restart_reload(){ // Simulate an `input` DOM event for Gradio Textbox component. Needed after you edit its contents in javascript, otherwise your edits // will only visible on web page and not sent to python. function updateInput(target){ - let e = new Event("input", { bubbles: true }) + const e = new Event("input", { bubbles: true }) Object.defineProperty(e, "target", {value: target}) target.dispatchEvent(e); + const eb = new Event("blur"); + Object.defineProperty(eb, "target", {value: target}) + target.dispatchEvent(eb); } var desiredCheckpointName = null; diff --git a/modules/ui.py b/modules/ui.py index e7fe3361..8d563f9c 100644 --- a/modules/ui.py +++ b/modules/ui.py @@ -822,7 +822,7 @@ def create_ui(): #with gr.Column(elem_id="img2img_column_size"): selected_scale_tab = gr.State(value=0) - with gr.Tabs(): + with gr.Tabs(elem_id="scale_tabs"): with gr.Tab(label="Resize to") as tab_scale_to: with gr.Row(): width = gr.Slider(minimum=64, maximum=2048, step=8, label="Width", value=512, elem_id="img2img_width") diff --git a/style.css b/style.css index 47b77e75..ce877e69 100644 --- a/style.css +++ b/style.css @@ -1,4 +1,4 @@ -:root{--ae-main-bg-color:hsl(0deg 0% 10%);--ae-primary-color:hsl(168deg 96% 42%);--ae-input-bg-color:hsl(225deg 6% 13%);--ae-input-border-color:hsl(214deg 5% 30%);--ae-panel-bg-color:hsl(225deg 5% 17%);--ae-panel-border-color:hsl(214deg 5% 30%);--ae-panel-border-radius:0px;--ae-subgroup-bg-color:hsl(0deg 0% 10%);--ae-subgroup-input-bg-color:hsl(225deg 6% 13%);--ae-subgroup-input-border-color:hsl(214deg 5% 30%);--ae-subpanel-bg-color:hsl(220deg 4% 14%);--ae-subpanel-border-color:hsl(214deg 5% 30%);--ae-subpanel-border-radius:8px;--ae-textarea-focus-color:hsl(210deg 3% 36%);--ae-input-focus-color:hsl(168deg 97% 41%);--ae-outside-gap-size:8px;--ae-inside-padding-size:8px;--ae-tool-button-size:34px;--ae-tool-button-radius:16px;--ae-generate-button-height:70px;--ae-cancel-color:hsl(0deg 84% 60%);--ae-max-padding:max(var(--ae-outside-gap-size),var(--ae-inside-padding-size));--ae-icon-color:hsl(168deg 96% 42%);--ae-icon-hover-color:hsl(0deg 0% 10%);--ae-icon-size:22px;--ae-nav-bg-color:hsl(0deg 0% 4%);--ae-nav-color:hsl(210deg 4% 80%);--ae-nav-hover-color:hsl(0deg 0% 4%);--ae-input-color:hsl(210deg 4% 80%);--ae-label-color:hsl(210deg 4% 80%);--ae-subgroup-input-color:hsl(0deg 100% 100%);--ae-placeholder-color:hsl(214deg 5% 30%);--ae-text-color:hsl(210deg 4% 80%);--ae-mobile-outside-gap-size:3px;--ae-mobile-inside-padding-size:3px;--ae-frame-bg-color:hsl(225deg 6% 13%);--ae-modal-bg-color:hsl(0deg 0% 10%);--ae-modal-icon-color:hsl(168deg 97% 41%);}/*BREAKPOINT_CSS_CONTENT*/ +:root{--ae-main-bg-color:hsl(0deg 0% 10%);--ae-primary-color:hsl(168deg 97% 41%);--ae-input-bg-color:hsl(225deg 6% 13%);--ae-input-border-color:hsl(214deg 5% 30%);--ae-panel-bg-color:hsl(225deg 5% 17%);--ae-panel-border-color:hsl(214deg 5% 30%);--ae-panel-border-radius:0px;--ae-subgroup-bg-color:hsl(0deg 0% 10%);--ae-subgroup-input-bg-color:hsl(225deg 6% 13%);--ae-subgroup-input-border-color:hsl(214deg 5% 30%);--ae-subpanel-bg-color:hsl(220deg 4% 14%);--ae-subpanel-border-color:hsl(214deg 5% 30%);--ae-subpanel-border-radius:8px;--ae-textarea-focus-color:hsl(210deg 3% 36%);--ae-input-focus-color:hsl(168deg 97% 41%);--ae-outside-gap-size:8px;--ae-inside-padding-size:8px;--ae-tool-button-size:34px;--ae-tool-button-radius:16px;--ae-generate-button-height:70px;--ae-cancel-color:hsl(0deg 84% 60%);--ae-max-padding:max(var(--ae-outside-gap-size),var(--ae-inside-padding-size));--ae-icon-color:hsl(168deg 97% 41%);--ae-icon-hover-color:hsl(0deg 0% 10%);--ae-icon-size:22px;--ae-nav-bg-color:hsl(0deg 0% 4%);--ae-nav-color:hsl(210deg 4% 80%);--ae-nav-hover-color:hsl(0deg 0% 4%);--ae-input-color:hsl(210deg 4% 80%);--ae-label-color:hsl(210deg 4% 80%);--ae-subgroup-input-color:hsl(210deg 4% 80%);--ae-placeholder-color:hsl(214deg 5% 30%);--ae-text-color:hsl(210deg 4% 80%);--ae-mobile-outside-gap-size:2px;--ae-mobile-inside-padding-size:2px;--ae-frame-bg-color:hsl(225deg 6% 13%);--ae-modal-bg-color:hsl(0deg 0% 10%);--ae-modal-icon-color:hsl(168deg 97% 41%);}/*BREAKPOINT_CSS_CONTENT*/ /* Theme Name: DarkUX @@ -1077,6 +1077,7 @@ div.gradio-row>.form{ border-color: var(--ae-panel-border-color) !important; border-radius: var(--ae-panel-border-radius) !important; background: var(--ae-panel-border-color) !important; + box-shadow: none !important; /*width: 100%; line-height: var(--line-sm);*/ } @@ -1421,6 +1422,16 @@ div.svelte-15lo0d8>.form>* { min-width: min(100px,100%); } +label { + pointer-events:none!important; +} +label > * { + pointer-events:all; +} +span.ml-2 { + margin-left: 0 !important; + padding-left: var(--size-2); +} /* gradio preloader*/ .svelte-j1gjts { pointer-events: none!important; @@ -1480,7 +1491,7 @@ display:none !important; } [id*="2img_toprow"], [id*="2img_toprow"] .gap { - gap: var(--ae-inside-padding-size) !important; + gap: 1px !important; } .script-group, [id*="_sub-group"]{ @@ -2388,6 +2399,9 @@ height: calc(var(--ae-container-height-gap) - 150px) !important; /*padding-bottom: var(--ae-inside-padding-size);*/ } +#dim_controls > div:first-child{ + margin-bottom:max(7px, var(--ae-outside-gap-size)) !important; +} /*****************/ /* Quicksettings */ /*****************/