From 222fec1013fa9077133ff1a83197f488f036d9c0 Mon Sep 17 00:00:00 2001 From: anapnoe <124302297+anapnoe@users.noreply.github.com> Date: Mon, 6 Feb 2023 07:54:52 +0200 Subject: [PATCH] css refactoring --- javascript/ui.js | 7 ++-- modules/ui.py | 29 ++++++--------- style.css | 95 ++++++++++++++++++------------------------------ 3 files changed, 51 insertions(+), 80 deletions(-) diff --git a/javascript/ui.js b/javascript/ui.js index 86eb32c4..33eb605e 100644 --- a/javascript/ui.js +++ b/javascript/ui.js @@ -278,6 +278,8 @@ onUiUpdate(function(){ } } + + /* hack until gradio allows to add custom classes to components add elem_id= your_elem_id + "sub-group" @@ -292,7 +294,7 @@ onUiUpdate(function(){ elem.classList.add("sub-group"); }) - /* resizable textarea */ + /* auto grow textarea */ gradioApp().querySelectorAll('[id $= "_prompt"] textarea').forEach(function (elem) { elem.style.boxSizing = 'border-box'; var offset = elem.offsetHeight - elem.clientHeight; @@ -303,8 +305,7 @@ onUiUpdate(function(){ }); - - /* split view resize */ + /* resizable split view */ gradioApp().querySelectorAll('#txt2img_splitter, #img2img_splitter').forEach((elem) => { elem.addEventListener("mousedown", function(e) { diff --git a/modules/ui.py b/modules/ui.py index 7bb11323..1ff0bf9a 100644 --- a/modules/ui.py +++ b/modules/ui.py @@ -193,8 +193,8 @@ def create_seed_inputs(target_interface): random_seed = gr.Button(random_symbol, elem_id=target_interface + '_random_seed') reuse_seed = gr.Button(reuse_symbol, elem_id=target_interface + '_reuse_seed') - with gr.Box(elem_id='subseed_show_box'): - seed_checkbox = gr.Checkbox(label='Extra', elem_id=target_interface + '_subseed_show', value=False) + #with gr.Box(elem_id='subseed_show_box'): + seed_checkbox = gr.Checkbox(label='Extra', elem_id=target_interface + '_subseed_show', value=False) # Components to show/hide based on the 'Extra' checkbox @@ -496,10 +496,10 @@ def create_ui(): 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") - + with gr.Column(variant='panel', elem_id="txt2img_settings"): submit = create_generate(is_img2img=False) @@ -796,22 +796,17 @@ def create_ui(): for category in ordered_ui_categories(): if category == "inpaint": with FormGroup(elem_id="inpaint_controls", visible=False) as inpaint_controls: - with FormRow(): + 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") - with FormRow(): - inpainting_mask_invert = gr.Radio(label='Mask mode', choices=['Inpaint masked', 'Inpaint not masked'], value='Inpaint masked', type="index", elem_id="img2img_mask_mode") - - with FormRow(): - inpainting_fill = gr.Radio(label='Masked content', choices=['fill', 'original', 'latent noise', 'latent nothing'], value='original', type="index", elem_id="img2img_inpainting_fill") - - with FormRow(): - with gr.Column(): - inpaint_full_res = gr.Radio(label="Inpaint area", choices=["Whole picture", "Only masked"], type="index", value="Whole picture", elem_id="img2img_inpaint_full_res") - - with gr.Column(scale=4): - inpaint_full_res_padding = gr.Slider(label='Only masked padding, pixels', minimum=0, maximum=256, step=4, value=32, elem_id="img2img_inpaint_full_res_padding") + with gr.Row(): + inpainting_mask_invert = gr.Dropdown(label='Mask mode', choices=['Inpaint masked', 'Inpaint not masked'], value='Inpaint masked', type="index", elem_id="img2img_mask_mode") + inpainting_fill = gr.Dropdown(label='Masked content', choices=['fill', 'original', 'latent noise', 'latent nothing'], value='original', type="index", elem_id="img2img_inpainting_fill") + + with gr.Row(): + inpaint_full_res = gr.Dropdown(label="Inpaint area", choices=["Whole picture", "Only masked"], type="index", value="Whole picture", elem_id="img2img_inpaint_full_res") + inpaint_full_res_padding = gr.Slider(label='Only masked padding, pixels', minimum=0, maximum=256, step=4, value=32, elem_id="img2img_inpaint_full_res_padding") def select_img2img_tab(tab): return gr.update(visible=tab in [2, 3, 4]), gr.update(visible=tab == 3), diff --git a/style.css b/style.css index a0ea332b..82f09749 100644 --- a/style.css +++ b/style.css @@ -1003,29 +1003,7 @@ div#group-subseed>div>div>div>div { padding: 0; } -#seed_row, -#subseed_row { - gap: .5rem; -} -#subseed_show, -#subseed_show_box { - min-width: auto; - flex-grow: 0; -} - -#subseed_show_box>div { - border: 0; - height: 100%; -} - -#subseed_show { - padding: 0; -} - -#subseed_show label { - height: 100%; -} #img2img_seed_row, #txt2img_seed_row, @@ -1035,7 +1013,7 @@ div#group-subseed>div>div>div>div>div { } div.sub-group .gr-box { - background: #222325; + background-color: #222325; } #img2img_seed_row button, @@ -1211,7 +1189,7 @@ textarea { } .dark .gr-block { - min-width: 150px; + /*min-width: 150px;*/ } #toprow div { @@ -1320,7 +1298,7 @@ textarea { } .gr-form { - min-width: 150px; + /*min-width: 150px;*/ } #img2img_toprow, @@ -1812,7 +1790,9 @@ div#script_list { flex-basis: 10%; } -input:focus { +/*textarea:focus,*/ +input:focus +{ border-color: #03d0a8 !important; } @@ -1845,30 +1825,6 @@ input:focus { /*overflow: hidden !important; */ } -/* -#txt2img_prompt label { - display: grid; -} -#txt2img_prompt label::after { - content: attr(data-replicated-value) " "; - white-space: pre-wrap; - visibility: hidden; -} -#txt2img_prompt label > textarea { - resize: none; - overflow: hidden; -} -#txt2img_prompt label > textarea, -#txt2img_prompt label::after { - - border: 1px solid black; - padding: 0.5rem; - font: inherit; - grid-area: 1 / 1 / 2 / 2; -} -*/ - - @@ -1880,6 +1836,8 @@ pre { word-wrap: break-word; /* Internet Explorer 5.5+ */ } + + #settings .gr-button-tool { align-self: flex-end !important; margin-bottom: 10px; @@ -1889,27 +1847,35 @@ pre { height: 34px; } + +#inpaint_controls > div:last-child +{ + margin-bottom:0; +} + +/* splitter and views */ + #img2img_prompt_image + div, -#txt2img_prompt_image + div{ +#txt2img_prompt_image + div +{ flex-wrap:nowrap; } #txt2img_settings, -#img2img_settings { +#img2img_settings +{ flex-grow: 1; flex-shrink: 0; - /*flex-basis: 50%; initial status */ + overflow-x: auto; } - #txt2img_results, #img2img_results { flex-grow: 0 !important; flex-shrink: 1 !important; - overflow-x: auto; + flex-basis: 50%; } - #txt2img_splitter, #img2img_splitter { @@ -1932,6 +1898,14 @@ pre { height:auto !important; } +/* extra */ +#img2img_subgroup_seed > div + div, +#img2img_group_seed > div + div, +#txt2img_subgroup_seed > div + div, +#txt2img_group_seed > div + div { + flex-grow:0; +} + @media only screen and (max-width: 860px) { /* For tablets: */ @@ -1959,6 +1933,7 @@ pre { #txt2img_actions_column, #img2img_actions_column { flex-basis: 100%; + max-width: 100%; } .dark .gr-block { @@ -2025,8 +2000,6 @@ pre { min-width:90px; } - - #img2img_gallery, #txt2img_gallery { margin-bottom: 0px; } @@ -2035,7 +2008,6 @@ pre { margin-bottom: 3px; } - #img2img_tools, #txt2img_tools { gap: 2px; } @@ -2044,7 +2016,6 @@ pre { margin-top: 4px !important; } - #txt2img_results { flex-grow: 1 !important; flex-shrink: 1 !important; @@ -2060,6 +2031,10 @@ pre { flex-wrap: wrap; } + #txt2img_results, #img2img_results { + flex-grow: 1 !important; + } + }