diff --git a/javascript/ui.js b/javascript/ui.js index aaa30cb2..ce9c7c48 100644 --- a/javascript/ui.js +++ b/javascript/ui.js @@ -302,7 +302,11 @@ onUiUpdate(function(){ }); - /* resizable split view */ + /* resizable split view */ + + const resizeEvent = window.document.createEvent('UIEvents'); + resizeEvent.initUIEvent('resize', true, false, window, 0); + gradioApp().querySelectorAll('[id $="2img_splitter"]').forEach((elem) => { elem.addEventListener("mousedown", function(e) { @@ -310,27 +314,38 @@ onUiUpdate(function(){ e.preventDefault(); let resizer = e.currentTarget; + let container = resizer.parentElement; + + let flexDir = window.getComputedStyle(container).getPropertyValue('flex-direction'); + let leftSide = resizer.previousElementSibling; let rightSide = resizer.nextElementSibling; - let container = resizer.parentElement; + let dir = 1.0; + + if(flexDir == "row-reverse"){ + dir = -1.0; + } let x = e.clientX; let y = e.clientY; - let leftWidth = leftSide.getBoundingClientRect().width; + let leftWidth = leftSide.getBoundingClientRect().width; + + function mouseMoveHandler(e) { resizer.style.cursor = 'col-resize'; container.style.cursor = 'col-resize'; - const dx = e.clientX - x; - const dy = e.clientY - y; + const dx = (e.clientX - x)*dir; + const dy = (e.clientY - y)*dir; - const newLeftWidth = ((leftWidth + dx) * 100) / resizer.parentNode.getBoundingClientRect().width; + const newLeftWidth = ((leftWidth + dx) * 100) / container.getBoundingClientRect().width; leftSide.style.flexBasis = `${newLeftWidth}%`; leftSide.style.userSelect = 'none'; leftSide.style.pointerEvents = 'none'; rightSide.style.userSelect = 'none'; rightSide.style.pointerEvents = 'none'; + window.dispatchEvent(resizeEvent); } function mouseUpHandler() { @@ -341,45 +356,70 @@ onUiUpdate(function(){ rightSide.style.removeProperty('user-select'); rightSide.style.removeProperty('pointer-events'); container.removeEventListener('mousemove', mouseMoveHandler); - container.removeEventListener('mouseup', mouseUpHandler); + container.removeEventListener('mouseup', mouseUpHandler); + window.dispatchEvent(resizeEvent); } container.addEventListener('mousemove', mouseMoveHandler); container.addEventListener('mouseup', mouseUpHandler); }) + + let flex_reverse = false; + elem.addEventListener("dblclick", function(e) { + flex_reverse = !flex_reverse; + e.preventDefault(); + + let resizer = e.currentTarget; + let container = resizer.parentElement; + //let flexDir = window.getComputedStyle(container).getPropertyValue('flex-direction'); + + if(flex_reverse){ + container.style.flexDirection = 'row-reverse'; + }else{ + container.style.flexDirection = 'row'; + } + + }) + + }) // mobile nav menu const tabs_menu = gradioApp().querySelector('#tabs > div:first-child'); const nav_menu = gradioApp().querySelector('#nav_menu'); + const gcontainer = gradioApp().querySelector('.mx-auto.container'); + let menu_open = false; - function toggleNavMenu() { - menu_open = !menu_open; + function toggleNavMenu(e) { + menu_open = !menu_open; + e.preventDefault(); + e.stopPropagation(); + if(menu_open){ tabs_menu.classList.add("open"); nav_menu.classList.add("fixed"); + gcontainer.addEventListener('click', toggleNavMenu); + + }else{ tabs_menu.classList.remove("open"); nav_menu.classList.remove("fixed"); + gcontainer.removeEventListener('click', toggleNavMenu); + } - } + + } + + nav_menu.addEventListener('click', toggleNavMenu); - tabs_menu.addEventListener("click", function(e) { - e.preventDefault(); - menu_open = false; - tabs_menu.classList.remove("open"); - nav_menu.classList.remove("fixed"); - }) - - - - - + //const doc = document.getElementsByTagName('gradio-app')[0].shadowRoot; + + }) diff --git a/modules/ui.py b/modules/ui.py index a5717f6e..e3d3095f 100644 --- a/modules/ui.py +++ b/modules/ui.py @@ -341,12 +341,12 @@ def create_toprow(is_img2img): create_refresh_button(prompt_styles, shared.prompt_styles.reload, lambda: {"choices": [k for k, v in shared.prompt_styles.styles.items()]}, f"refresh_{id_part}_style_index") with gr.Row(): - prompt = gr.Textbox(label="Prompt", elem_id=f"{id_part}_prompt", show_label=True, lines=5, + prompt = gr.Textbox(label="Prompt", elem_id=f"{id_part}_prompt", show_label=True, lines=3, placeholder="Prompt (press Ctrl+Enter or Alt+Enter to generate)" ) with gr.Row(): - negative_prompt = gr.Textbox(label="Negative prompt", elem_id=f"{id_part}_neg_prompt", show_label=True, lines=5, + negative_prompt = gr.Textbox(label="Negative prompt", elem_id=f"{id_part}_neg_prompt", show_label=True, lines=3, placeholder="Negative prompt (press Ctrl+Enter or Alt+Enter to generate)" ) @@ -496,14 +496,14 @@ def create_ui(): with gr.Blocks(analytics_enabled=False) as txt2img_interface: - + #submit = create_generate(is_img2img=False) + dummy_component = gr.Label(visible=False) txt_prompt_img = gr.File(label="", elem_id="txt2img_prompt_image", file_count="single", type="binary", visible=False) - + with gr.Row().style(equal_height=False): - txt2img_gallery, generation_info, html_info, html_log = create_output_panel("txt2img", opts.outdir_txt2img_samples) gr.Row(elem_id="txt2img_splitter") @@ -799,10 +799,25 @@ def create_ui(): img2img_batch_input_dir = gr.Textbox(label="Input directory", **shared.hide_dirs, elem_id="img2img_batch_input_dir") img2img_batch_output_dir = gr.Textbox(label="Output directory", **shared.hide_dirs, elem_id="img2img_batch_output_dir") img2img_batch_inpaint_mask_dir = gr.Textbox(label="Inpaint batch mask directory (required for inpaint batch processing only)", **shared.hide_dirs, elem_id="img2img_batch_inpaint_mask_dir") - + + for category in ordered_ui_categories(): - if category == "inpaint": + if category == "inpaint": + + with FormGroup(elem_id="dim_controls", visible=True): + with gr.Row(): + resize_mode = gr.Dropdown(label="Resize mode", elem_id="resize_mode", choices=["Just resize", "Crop and resize", "Resize and fill", "Just resize (latent upscale)"], type="index", value="Just resize") + + with gr.Row(): + #with gr.Column(elem_id="img2img_column_size", scale=4): + width = gr.Slider(minimum=64, maximum=2048, step=8, label="Width", value=512, elem_id="img2img_width") + res_switch_btn = ToolButton(value=switch_values_symbol, elem_id="img2img_res_switch_btn") + height = gr.Slider(minimum=64, maximum=2048, step=8, label="Height", value=512, elem_id="img2img_height") + + + with FormGroup(elem_id="inpaint_controls_sub-group-collapse", visible=False) as inpaint_controls: + with gr.Row(): mask_blur = gr.Slider(label='Mask blur', minimum=0, maximum=64, step=1, value=4, elem_id="img2img_mask_blur") mask_alpha = gr.Slider(label="Mask transparency", visible=False, elem_id="img2img_mask_alpha") @@ -844,20 +859,20 @@ def create_ui(): outputs=[], ) - with FormRow(): - resize_mode = gr.Dropdown(label="Resize mode", elem_id="resize_mode", choices=["Just resize", "Crop and resize", "Resize and fill", "Just resize (latent upscale)"], type="index", value="Just resize") + #with FormRow(): + # resize_mode = gr.Dropdown(label="Resize mode", elem_id="resize_mode", choices=["Just resize", "Crop and resize", "Resize and fill", "Just resize (latent upscale)"], type="index", value="Just resize") for category in ordered_ui_categories(): if category == "sampler": steps, sampler_index = create_sampler_and_steps_selection(samplers_for_img2img, "img2img") elif category == "dimensions": - with gr.Row(): + #with gr.Row(): #with gr.Column(elem_id="img2img_column_size", scale=4): - width = gr.Slider(minimum=64, maximum=2048, step=8, label="Width", value=512, elem_id="img2img_width") - res_switch_btn = ToolButton(value=switch_values_symbol, elem_id="img2img_res_switch_btn") - height = gr.Slider(minimum=64, maximum=2048, step=8, label="Height", value=512, elem_id="img2img_height") + # width = gr.Slider(minimum=64, maximum=2048, step=8, label="Width", value=512, elem_id="img2img_width") + # res_switch_btn = ToolButton(value=switch_values_symbol, elem_id="img2img_res_switch_btn") + # height = gr.Slider(minimum=64, maximum=2048, step=8, label="Height", value=512, elem_id="img2img_height") if opts.dimensions_and_batch_together: diff --git a/style.css b/style.css index 4384ac23..811bd8fe 100644 --- a/style.css +++ b/style.css @@ -60,7 +60,7 @@ /* test theme inspired from opera classic gx */ - /* + --main-bg-color: #121019; --primary-color: #fa1e4e; @@ -110,7 +110,7 @@ --placeholder-color: #4a3e65; --text-color: #bfb6d2; - */ + } @@ -490,6 +490,8 @@ .tabs>div>button { border-bottom: none;/*2px solid var(--input-bg-color);*/ + padding: var(--outside-gap-size); + padding-top: 0; } .tabs>div>.bg-white { @@ -531,15 +533,16 @@ width: 320px; text-align: left; background-color: transparent !important; - border-top: 2px !important; + border-top: 2px !important; + border-bottom: 2px !important; border-left: 0; border-right: 0; border-radius: 0 !important; - border-bottom: 2px !important; - padding-left: 20px; - color: var(--nav-color); + padding: 0px; + padding-left: 20px; + min-height: 37px; + color: var(--nav-color); } - @@ -596,8 +599,11 @@ /* footer to bottom of page */ .min-h-screen > .mx-auto.container{ - display:flex; flex-direction:column; - min-height: 100vh; margin:0; + display:flex; + flex-direction:column; + min-height: 100vh; + margin:0; + min-width: 300px; } .min-h-screen > .mx-auto.container > div{ @@ -685,6 +691,16 @@ div.svelte-10ogue4>:not(.absolute) { margin-bottom: var(--outside-gap-size); } +/* +div.svelte-10ogue4>*:first-child{ + border-radius: var(--panel-border-radius) !important; +} + +div.svelte-10ogue4>*:last-child { + border-radius: var(--panel-border-radius) !important; +} +*/ + div.svelte-10ogue4>*+:not(.absolute) { border-top-width: 1px !important; } @@ -846,13 +862,13 @@ label.block span { } .dark .gr-box:not(.border-dashed){ - border-radius: var(--panel-border-radius) !important; + border-radius: var(--panel-border-radius); } [id*="_sub-group"] .gr-box:not(.border-dashed) { - border-radius: var(--subpanel-border-radius) !important; + border-radius: var(--subpanel-border-radius); } .dark .gr-input, @@ -950,15 +966,17 @@ input border-radius: var(--panel-border-radius) !important; padding:0; } - - - +/* +[id$=_prompt_image] + div { + flex-direction: row-reverse; +} +*/ /***********************/ /* Equal flexbox width */ /***********************/ -.flex.row>div { +.flex.row>div:not([id$="2img_results"]) { flex-grow: 1; flex-shrink: 1; flex-basis: 10%; @@ -1170,6 +1188,17 @@ textarea:focus padding: 0; } +/* align left */ +#quicksettings { + align-items: center; + flex-direction: row; + width: auto; + /*align-self: flex-start;*/ + background: 0; + padding: 0; + margin-left: 50px; +} + #quicksettings div { border: 0; background: 0; @@ -1182,8 +1211,10 @@ display:none; #quicksettings .gr-input { padding-right: 37px; +/* width: auto; max-width: 245px; +*/ min-height: 34px; } @@ -1310,7 +1341,7 @@ min-height: 34px; [id*="2img_copy_to_"] button { - min-width: fit-content; + /*min-width: fit-content;*/ border: 1px solid var(--panel-border-color) !important; } @@ -1342,18 +1373,75 @@ min-height: 34px; margin-bottom: 0; } -div[data-testid="image"], -div[data-testid="image"] img -{ - background-color: var(--main-bg-color); - overflow: hidden; + + +div[data-testid="image"]{ + position: relative; + max-height: 50vh; + height:auto; + background-color: var(--main-bg-color); } +div[data-testid="image"] > div +{ + position: relative; + max-height: 50vh; + height:auto; + background-color: var(--main-bg-color); +} + +div[data-testid="image"] img +{ + max-height: 50vh; + position: relative !important; + background-color: var(--main-bg-color); +} + +div[data-testid="image"] .touch-none { + width: 100% !important; + height: auto !important; + position: absolute !important; + top: unset !important; + left: unset !important; +} + +canvas { + object-fit: contain !important; + max-height: 50vh !important; + width: 100% !important; + height: auto !important; + position: absolute !important; + top: 0 !important; + left: 0 !important; +} + + +#dim_controls > div:last-child{ + margin-bottom:0; +} +#dim_controls > div:first-child{ + margin-top:var(--outside-gap-size); +} + +.cropper-view-box > img { + display: none; +} + + + + div[data-testid="image"] input[type=range] { min-width:100px; } +[id$="_image"] { + border-radius: 0 !important; +} + +.dark .gr-compact { + border-radius: 0 !important; +} /* small tool buttons */ .dark .dark\:bg-gray-900 { @@ -1371,11 +1459,7 @@ div[data-testid="image"] input[type=range] } -canvas{ - object-fit: scale-down !important; - width: 100% !important; - height: auto !important; -} + /*div[title^="custom-marker-wqs-tailrace"][title$="bbu-l2"]*/ @@ -1428,7 +1512,7 @@ canvas[key=mask] { { overflow-x: hidden !important; max-height: calc(100vh - 151px); - overflow-y: auto !important; + overflow-y: auto !important; } [id$=_gallery] div, @@ -1814,6 +1898,7 @@ ul.list-none { } + /* fix issue with canvas */ /* #img2img_sketch, #img2img_sketch>.h-60, #img2img_sketch>.h-60>div, #img2img_sketch>.h-60>div>img, #img2maskimg, #inpaint_sketch {