From 47dae0b18d245a201cb5e5a601c930d0dc3b494a Mon Sep 17 00:00:00 2001 From: anapnoe <124302297+anapnoe@users.noreply.github.com> Date: Wed, 22 Feb 2023 17:24:58 +0200 Subject: [PATCH] Extras page added ui_views_order default in settings --- javascript/ui.js | 50 +++++++----- modules/shared.py | 4 +- modules/ui_postprocessing.py | 39 +++++---- style.css | 149 +++++++++++++++++++++++++++-------- 4 files changed, 171 insertions(+), 71 deletions(-) diff --git a/javascript/ui.js b/javascript/ui.js index fd9cfe8f..034a030e 100644 --- a/javascript/ui.js +++ b/javascript/ui.js @@ -391,33 +391,31 @@ onUiUpdate(function(){ function enableScroll() { window.onscroll = function() {} - } - - function toggleMenu(isopen, icon, panel, close, owner) { + } + + function toggleMenu(isopen, icon, panel, func) { if(isopen){ panel.classList.add("open"); icon.classList.add("fixed"); - close.addEventListener('click', owner); + gradioApp().addEventListener('click', func); disableScroll(); }else{ panel.classList.remove("open"); icon.classList.remove("fixed"); - close.removeEventListener('click', owner); - enableScroll(); + gradioApp().removeEventListener('click', func); + enableScroll(); } } // 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(e) { - e.preventDefault(); + //e.preventDefault(); e.stopPropagation(); menu_open = !menu_open; - toggleMenu(menu_open, nav_menu, tabs_menu, gcontainer, toggleNavMenu); + toggleMenu(menu_open, nav_menu, tabs_menu, toggleNavMenu); } nav_menu.addEventListener('click', toggleNavMenu); @@ -425,13 +423,16 @@ onUiUpdate(function(){ let quick_menu_open = false; const quicksettings_overflow = gradioApp().querySelector('#quicksettings_overflow'); const quick_menu = gradioApp().querySelector('#quick_menu'); - const qparent = gradioApp().querySelector('#tabs'); - - function toggleQuickMenu(e) { - e.preventDefault(); - e.stopPropagation(); + function toggleQuickMenu(e) { quick_menu_open = !quick_menu_open; - toggleMenu(quick_menu_open, quick_menu, quicksettings_overflow, qparent, toggleQuickMenu); + const withinBoundaries = e.composedPath().includes(quicksettings_overflow); + if(!quick_menu_open && withinBoundaries){ + quick_menu_open = true; + }else{ + e.preventDefault(); + e.stopPropagation(); + toggleMenu(quick_menu_open, quick_menu, quicksettings_overflow, toggleQuickMenu); + } } quick_menu.addEventListener('click', toggleQuickMenu); @@ -453,19 +454,30 @@ onUiUpdate(function(){ //console.log(ui_styles); } + // livePreview contain - scale function imagePreviewFitMethod(value) { styleobj.ui_fit = ".livePreview img {object-fit:" + value + ";}"; updateOpStyles(); - } - + } gradioApp().querySelector("#setting_live_preview_image_fit").addEventListener('click', function (e) { if (e.target && e.target.matches("input[type='radio']")) { imagePreviewFitMethod(e.target.value.toLowerCase()); } }) - imagePreviewFitMethod(opts.live_preview_image_fit.toLowerCase()); + // views order left - right + function viewportOrder(value) { + styleobj.ui_views_order = "[id$=_prompt_image] + div {flex-direction:" + value + ";}"; + updateOpStyles(); + } + gradioApp().querySelector("#setting_ui_views_order").addEventListener('click', function (e) { + if (e.target && e.target.matches("input[type='radio']")) { + viewportOrder(e.target.value.toLowerCase()); + } + }) + viewportOrder(opts.ui_views_order.toLowerCase()); + //hidden ui tabs let radio_html=""; diff --git a/modules/shared.py b/modules/shared.py index eb8e16be..c5311d13 100644 --- a/modules/shared.py +++ b/modules/shared.py @@ -462,6 +462,8 @@ options_templates.update(options_section(('ui', "User interface"), { "quicksettings": OptionInfo("sd_model_checkpoint", "Quicksettings list"), "ui_reorder": OptionInfo(", ".join(ui_reorder_categories), "txt2img/img2img UI item order"), "ui_hidden_tabs": OptionInfo("", "Hidden Tabs"), + "ui_offcanvas_menu": OptionInfo(True, "Use always offcanvas menu otherwise use only on mobile"), + "ui_views_order": OptionInfo("row-reverse", "Interface order input/parameters | output/preview", gr.Radio, {"choices": ["row", "row-reverse"]}), "ui_extra_networks_tab_reorder": OptionInfo("", "Extra networks tab order"), "localization": OptionInfo("None", "Localization (requires restart)", gr.Dropdown, lambda: {"choices": ["None"] + list(localization.localizations.keys())}, refresh=lambda: localization.list_localizations(cmd_opts.localizations_dir)), })) @@ -474,7 +476,7 @@ options_templates.update(options_section(('ui', "Live previews"), { "show_progress_type": OptionInfo("Approx NN", "Image creation progress preview mode", gr.Radio, {"choices": ["Full", "Approx NN", "Approx cheap"]}), "live_preview_content": OptionInfo("Prompt", "Live preview subject", gr.Radio, {"choices": ["Combined", "Prompt", "Negative prompt"]}), "live_preview_refresh_period": OptionInfo(1000, "Progressbar/preview update period, in milliseconds"), - "live_preview_image_fit": OptionInfo("Scale-down", "Live preview image fit method", gr.Radio, {"choices": ["Scale-down", "Contain"]}) + "live_preview_image_fit": OptionInfo("Scale-down", "Live preview image fit method", gr.Radio, {"choices": ["Scale-down", "Contain"]}), })) options_templates.update(options_section(('sampler-params', "Sampler parameters"), { diff --git a/modules/ui_postprocessing.py b/modules/ui_postprocessing.py index 7414562f..9ef620d8 100644 --- a/modules/ui_postprocessing.py +++ b/modules/ui_postprocessing.py @@ -5,27 +5,32 @@ import modules.generation_parameters_copypaste as parameters_copypaste def create_ui(): tab_index = gr.State(value=0) - + gr.Row(elem_id="extras_2img_prompt_image", visible=False) with gr.Row(): - with gr.Column(): - with gr.Tabs(elem_id="mode_extras"): - with gr.TabItem('Single Image', elem_id="extras_single_tab") as tab_single: - extras_image = gr.Image(label="Source", source="upload", interactive=True, type="pil", elem_id="extras_image") + + with gr.Column(elem_id="extras_2img_results"): + result_images, html_info_x, html_info, html_log = ui_common.create_output_panel("extras_2img", shared.opts.outdir_extras_samples) + + gr.Row(elem_id="extras_2img_splitter") + + with gr.Column(variant='panel', elem_id="extras_2img_settings"): + submit = gr.Button('Generate', elem_id="extras_generate", variant='primary') + with gr.Column(elem_id="extras_2img_settings_scroll"): + with gr.Accordion("Image Source", elem_id="extras_accordion", open=True): + with gr.Tabs(elem_id="mode_extras"): + with gr.TabItem('Single Image', elem_id="extras_single_tab") as tab_single: + extras_image = gr.Image(label="Source", source="upload", interactive=True, type="pil", elem_id="extras_image") - with gr.TabItem('Batch Process', elem_id="extras_batch_process_tab") as tab_batch: - image_batch = gr.File(label="Batch Process", file_count="multiple", interactive=True, type="file", elem_id="extras_image_batch") + with gr.TabItem('Batch Process', elem_id="extras_batch_process_tab") as tab_batch: + image_batch = gr.File(label="Batch Process", file_count="multiple", interactive=True, type="file", elem_id="extras_image_batch") - with gr.TabItem('Batch from Directory', elem_id="extras_batch_directory_tab") as tab_batch_dir: - extras_batch_input_dir = gr.Textbox(label="Input directory", **shared.hide_dirs, placeholder="A directory on the same machine where the server is running.", elem_id="extras_batch_input_dir") - extras_batch_output_dir = gr.Textbox(label="Output directory", **shared.hide_dirs, placeholder="Leave blank to save images to the default path.", elem_id="extras_batch_output_dir") - show_extras_results = gr.Checkbox(label='Show result images', value=True, elem_id="extras_show_extras_results") + with gr.TabItem('Batch from Directory', elem_id="extras_batch_directory_tab") as tab_batch_dir: + extras_batch_input_dir = gr.Textbox(label="Input directory", **shared.hide_dirs, placeholder="A directory on the same machine where the server is running.", elem_id="extras_batch_input_dir") + extras_batch_output_dir = gr.Textbox(label="Output directory", **shared.hide_dirs, placeholder="Leave blank to save images to the default path.", elem_id="extras_batch_output_dir") + show_extras_results = gr.Checkbox(label='Show result images', value=True, elem_id="extras_show_extras_results") - submit = gr.Button('Generate', elem_id="extras_generate", variant='primary') - - script_inputs = scripts.scripts_postproc.setup_ui() - - with gr.Column(): - result_images, html_info_x, html_info, html_log = ui_common.create_output_panel("extras", shared.opts.outdir_extras_samples) + script_inputs = scripts.scripts_postproc.setup_ui() + tab_single.select(fn=lambda: 0, inputs=[], outputs=[tab_index]) tab_batch.select(fn=lambda: 1, inputs=[], outputs=[tab_index]) diff --git a/style.css b/style.css index 55b0a900..3b68c90f 100644 --- a/style.css +++ b/style.css @@ -1,4 +1,4 @@ -:host{--main-bg-color:hsl(0deg 0% 10%);--primary-color:hsl(16deg 77% 60%);--input-bg-color:hsl(225deg 6% 13%);--input-border-color:hsl(214deg 5% 30%);--panel-bg-color:hsl(225deg 5% 17%);--panel-border-color:hsl(214deg 5% 30%);--panel-border-radius:8px;--subgroup-bg-color:hsl(0deg 0% 10%);--subgroup-input-bg-color:hsl(225deg 6% 13%);--subgroup-input-border-color:hsl(214deg 5% 30%);--subpanel-bg-color:hsl(220deg 4% 14%);--subpanel-border-color:hsl(214deg 5% 30%);--subpanel-border-radius:8px;--textarea-focus-color:hsl(210deg 3% 36%);--input-focus-color:hsl(16deg 77% 60%);--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:hsl(193deg 54% 55%);--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:hsl(210deg 4% 80%);--icon-hover-color:hsl(0deg 0% 10%);--icon-size:22px;--nav-bg-color:hsl(0deg 0% 4%);--nav-color:hsl(210deg 4% 80%);--nav-hover-color:hsl(0deg 0% 4%);--input-color:hsl(210deg 4% 80%);--label-color:hsl(210deg 4% 80%);--subgroup-input-color:hsl(0deg 0% 0%);--placeholder-color:hsl(214deg 5% 30%);--text-color:hsl(210deg 4% 80%);}/*BREAKPOINT_CSS_CONTENT*/ +:host{--main-bg-color:hsl(195deg 22% 8%);--primary-color:hsl(159deg 96% 55%);--input-bg-color:hsl(202deg 25% 12%);--input-border-color:hsl(200deg 24% 32%);--panel-bg-color:hsl(200deg 24% 20%);--panel-border-color:hsl(200deg 24% 32%);--panel-border-radius:4px;--subgroup-bg-color:hsl(195deg 22% 8%);--subgroup-input-bg-color:hsl(200deg 24% 8%);--subgroup-input-border-color:hsl(200deg 24% 32%);--subpanel-bg-color:hsl(202deg 25% 12%);--subpanel-border-color:hsl(200deg 24% 32%);--subpanel-border-radius:8px;--textarea-focus-color:hsl(152deg 3% 36%);--input-focus-color:hsl(159deg 96% 55%);--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:hsl(200deg 24% 32%);--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:hsl(201deg 24% 77%);--icon-hover-color:hsl(195deg 22% 8%);--icon-size:22px;--nav-bg-color:hsl(194deg 24% 4%);--nav-color:hsl(201deg 24% 77%);--nav-hover-color:hsl(194deg 24% 4%);--input-color:hsl(159deg 96% 55%);--label-color:hsl(201deg 24% 77%);--subgroup-input-color:hsl(302deg 100% 100%);--placeholder-color:hsl(200deg 24% 32%);--text-color:hsl(201deg 24% 77%);}/*BREAKPOINT_CSS_CONTENT*/ /* Theme Name: DarkUX @@ -699,6 +699,19 @@ div.svelte-10ogue4>:not(.absolute) { margin-bottom: var(--outside-gap-size); } +[id$="2img_settings_scroll"] div.svelte-10ogue4>*:first-child{ + border-radius: var(--panel-border-radius) !important; +} + +[id$="2img_settings_scroll"] div.svelte-10ogue4>*:last-child { + border-radius: var(--panel-border-radius) !important; +} + +#script_list{ + border-radius: var(--panel-border-radius) !important; + border-top: 1px solid var(--panel-border-color) !important; +} + /* div.svelte-10ogue4>*:first-child{ border-radius: var(--panel-border-radius) !important; @@ -747,6 +760,7 @@ div.svelte-10ogue4 #script-list { .dark .gr-input-label { --tw-gradient-from: unset; background-color: var(--input-bg-color); + max-height: 34px; } .gr-input-label, label.bg-white { @@ -855,6 +869,7 @@ label.block span { /* outmost panel */ .gr-panel { padding: var(--outside-gap-size); + border-radius: var(--panel-border-radius); } .dark .dark\:bg-gray-950 { @@ -1002,11 +1017,11 @@ input border:none; } */ - +/* .gr-block.gr-box.relative > .flex.row.gap-4 { margin-top: var(--inside-padding-size); } - +*/ /***********/ /* Inpaint */ @@ -1069,7 +1084,8 @@ dark .gr-button-secondary:hover { /**********************/ -[id$="2img_settings_scroll"] > div:last-child > div:not(:first-child), +/*[id$="2img_settings_scroll"] > div:last-child > div:not(:first-child).svelte-10ogue4,*/ +#script_list ~ div, [id*="_sub-group"] { padding: var(--outside-gap-size) var(--outside-gap-size) 0; @@ -1080,10 +1096,18 @@ dark .gr-button-secondary:hover { border-radius: var(--panel-border-radius) !important; } -/* reavaluate below at some point*/ +#script_list{ + border-bottom-right-radius: 0!important; + border-bottom-left-radius: 0!important; +} -[id*="2img_settings_scroll"] > div:last-child div:not(:first-child) .gr-box, -[id*="2img_settings_scroll"] > div:last-child div:not(:first-child) .gr-form, +#script_list ~ div{ + border-top-right-radius: 0!important; + border-top-left-radius: 0!important; +} + +#script_list ~ div .gr-box, +#script_list ~ div .gr-form, [id*="_sub-group"] .gr-box, [id*="_sub-group"] .gr-form { @@ -1092,9 +1116,9 @@ dark .gr-button-secondary:hover { border-radius: var(--subpanel-border-radius) !important; } -[id$="2img_settings_scroll"] > div:last-child div:not(:first-child) .gr-input, -[id*="2img_settings_scroll"] > div:last-child div:not(:first-child) .gr-button, -[id*="2img_settings_scroll"] > div:last-child div:not(:first-child) input, +#script_list ~ div .gr-input, +#script_list ~ div .gr-button, +#script_list ~ div input, [id*="_sub-group"] .gr-input, [id*="_sub-group"] .gr-button, [id*="_sub-group"] input @@ -1104,17 +1128,20 @@ dark .gr-button-secondary:hover { border-radius: var(--subpanel-border-radius) !important; } -[id*="2img_settings_scroll"] > div:last-child div:not(:first-child) .gr-button, + +#script_list ~ div .gr-button, [id*="_sub-group"] .gr-button:hover{ background-color: var(--primary-color) !important; } -[id*="2img_settings_scroll"] > div:last-child div:not(:first-child) .bg-gray-200, +#script_list ~ div .bg-gray-200, [id*="_sub-group"] .bg-gray-200 { background-color: var(--subpanel-border-color) !important; } + + [id*="_sub-group"] .output-html { padding: var(--outside-gap-size) var(--outside-gap-size) 0 !important; @@ -1194,7 +1221,7 @@ textarea:focus /* Generate Interrupt Skip */ /***************************/ -[id$="2img_generate"] +[id$="_generate"] { min-height: var(--generate-button-height); } @@ -1301,9 +1328,6 @@ textarea:focus padding-top: var(--outside-gap-size); } - - - [id*="2img_copy_to_"] { background-color: var(--main-bg-color); @@ -1411,16 +1435,15 @@ div[data-testid="image"] input[type=range] border-radius: 0 !important; } -/* -.dark .gr-compact { - border-radius: 0 !important; -} -*/ + .gr-compact>*, .gr-compact .gr-box { border-radius: var(--panel-border-radius) !important; } +.dark .gr-compact { + border-radius: 0 !important; +} /* small tool buttons */ .dark .dark\:bg-gray-900 { @@ -1436,9 +1459,11 @@ div[data-testid="image"] input[type=range] .dark .dark\:ring-gray-600 { border:none !important; } - - - +/* +.gr-compact .gr-box { + border: 1px solid #ff0000 !important; +} +*/ /*div[title^="custom-marker-wqs-tailrace"][title$="bbu-l2"]*/ @@ -1491,27 +1516,33 @@ canvas[key=mask] { { overflow-x: hidden !important; max-height: calc(100vh - 151px); - overflow-y: auto !important; + overflow-y: auto !important; + height: 100%; } - -[id$=_gallery] div, +/* +[id$=_gallery] div { background: 0 !important; - position: relative; + position: relative; +} +*/ + +[id$="2img_gallery"].gr-box:not(.border-dashed) +{ + border-radius: 0!important; } [id$="2img_gallery"] { display: flex; flex-direction: row; overflow: hidden !important; + } -/* -#img2img_gallery .modify-upload, -#txt2img_gallery .modify-upload { - position: absolute; +.dark .gr-box:not(.border-dashed) { + /* border-radius: var(--panel-border-radius) !important; */ } -*/ + [id$="2img_gallery"] .overflow-y-auto { @@ -2092,10 +2123,60 @@ ul.list-none { cursor: pointer; } +/******************/ +/* extras tab */ +/******************/ +#mode_extras > div:not(first-child){ + padding-left:0; + padding-right:0; + padding-bottom:0; + +} +#extras_2img_settings_scroll > div.gr-box.gr-padded { + padding:0; + border:0; + background: transparent; + margin-top: calc(var(--outside-gap-size) * -1); +} +#extras_2img_settings_scroll > div.gr-box.gr-padded > div { + margin:0; +} +#extras_2img_settings_scroll > div.gr-box.gr-padded > div > div { + margin-bottom: var(--outside-gap-size); +} + +#extras_resize_mode { + padding: 0; + margin: 0; + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +#extras_scale_to_tab, +#extras_scale_by_tab{ + /*min-height: 81px; */ + margin: -2px !important; + margin-top: calc(var(--outside-gap-size) * -1) !important; + background-color: transparent !important; + margin-bottom: calc(var(--outside-gap-size) - 2px) !important; + padding: 0; +} +#extras_resize_mode > div:first-child{ + padding-top: var(--outside-gap-size); + /*margin-top:2px;*/ + margin-top: var(--outside-gap-size); + border-top-left-radius: var(--panel-border-radius); + border-top-right-radius: var(--panel-border-radius); +} +#extras_scale_to_tab div, +#extras_scale_by_tab div{ + border-top-left-radius: 0 !important; + border-top-right-radius: 0 !important; +} /******************/ @@ -2225,7 +2306,7 @@ ul.list-none { #lightboxModal { display: none; position: fixed; - z-index: 1001; + z-index: 10001; padding-top: 100px; left: 0; top: 0;