From e0d16e9b0c840504378fbcf2b29ea0f478342e88 Mon Sep 17 00:00:00 2001 From: anapnoe <124302297+anapnoe@users.noreply.github.com> Date: Fri, 12 May 2023 09:36:20 +0300 Subject: [PATCH] Added no sliders layout - compact mode --- extensions-builtin/sd_theme_editor/style.css | 168 +++++++++---------- javascript/ui.js | 15 ++ modules/shared.py | 1 + modules/ui.py | 12 +- style.css | 96 ++++++----- 5 files changed, 153 insertions(+), 139 deletions(-) diff --git a/extensions-builtin/sd_theme_editor/style.css b/extensions-builtin/sd_theme_editor/style.css index 870f6a5d..51f33101 100644 --- a/extensions-builtin/sd_theme_editor/style.css +++ b/extensions-builtin/sd_theme_editor/style.css @@ -1,117 +1,113 @@ -#theme_menu -{ - z-index: 9999; - background-color: var(--ae-input-bg-color); - position: relative; - width: 38px; - height: 38px; - border-radius: 100%; - cursor: pointer; - min-width: unset; - max-width: 38px; - align-self: center; +#theme_menu { + z-index: 9999; + background-color: var(--ae-input-bg-color); + position: relative; + width: 38px; + height: 38px; + border-radius: 100%; + cursor: pointer; + min-width: unset; + max-width: 38px; + align-self: center; } -#theme_menu::before -{ - content: ' '; - display: inline-block; - -webkit-mask-size: cover; - mask-size: cover; - background-color: var(--ae-icon-color); - width: var(--ae-icon-size); - height: var(--ae-icon-size); - -webkit-mask: url(./file=html/svg/contrast-drop-2-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/contrast-drop-2-line.svg) no-repeat 50% 50%; - cursor: pointer; - position: relative; - left: 50%; - top: 50%; - transform: translate(-50%, -50%) scale(1.0); +#theme_menu::before { + content: " "; + display: inline-block; + -webkit-mask-size: cover; + mask-size: cover; + background-color: var(--ae-icon-color); + width: var(--ae-icon-size); + height: var(--ae-icon-size); + -webkit-mask: url(./file=html/svg/contrast-drop-2-line.svg) no-repeat 50% 50%; + mask: url(./file=html/svg/contrast-drop-2-line.svg) no-repeat 50% 50%; + cursor: pointer; + position: relative; + left: 50%; + top: 50%; + transform: translate(-50%, -50%) scale(1); } -#theme_menu.fixed, #theme_menu:hover { - background-color: var(--ae-icon-color); +#theme_menu.fixed, +#theme_menu:hover { + background-color: var(--ae-icon-color); } #theme_menu.fixed::before, -#theme_menu:hover::before -{ - background-color: var(--ae-icon-hover-color); +#theme_menu:hover::before { + background-color: var(--ae-icon-hover-color); } -#theme_overflow_container{ - overflow-y: auto; - height: calc(100vh - var(--ae-top-header-height) - ( var(--ae-outside-gap-size) * 2 ) - ( var(--ae-inside-padding-size) * 4 ) - 96px ); +#theme_overflow_container { + overflow-y: auto; + height: calc( + 100vh - var(--ae-top-header-height) - (var(--ae-outside-gap-size) * 2) - + (var(--ae-inside-padding-size) * 4) - 96px + ); + overflow-x: hidden; } -#tab_ui_theme.open -{ - transform: translateX(0); - box-shadow: rgba(0,0,0,0.4) -30px 0 30px -30px; +#tab_ui_theme.open { + transform: translateX(0); + box-shadow: rgba(0, 0, 0, 0.4) -30px 0 30px -30px; } -#tab_ui_theme.aside{ - display: block !important; +#tab_ui_theme.aside { + display: block !important; } -#tab_ui_theme.aside -{ - position: fixed; - top: var(--ae-top-header-height); - width: 90%; - right: 0; - height: calc(100% - var(--ae-top-header-height)); - max-width: 480px; - z-index: 9999; - transform: translateX(100%); - transition: all 0.25s ease 0s; - box-shadow: rgba(0,0,0,0) -30px 0 30px -30px; - padding: calc(1rem - var(--ae-outside-gap-size)); - background-color: var(--ae-main-bg-color) !important; - +#tab_ui_theme.aside { + position: fixed; + top: var(--ae-top-header-height); + width: 90%; + right: 0; + height: calc(100% - var(--ae-top-header-height)); + max-width: 480px; + z-index: 9999; + transform: translateX(100%); + transition: all 0.25s ease 0s; + box-shadow: rgba(0, 0, 0, 0) -30px 0 30px -30px; + padding: calc(1rem - var(--ae-outside-gap-size)); + background-color: var(--ae-main-bg-color) !important; } -#tab_ui_theme.aside.open -{ - transform: translateX(0); - box-shadow: rgba(0,0,0,0.4) -30px 0 30px -30px; +#tab_ui_theme.aside.open { + transform: translateX(0); + box-shadow: rgba(0, 0, 0, 0.4) -30px 0 30px -30px; } #theme_hidden, #setting_ui_header_tabs .theme, -#setting_ui_hidden_tabs .theme{ - display:none !important; +#setting_ui_hidden_tabs .theme { + display: none !important; } -#tab_ui_theme [id*="color"] label{ - display:flex; - align-items: center; - pointer-events: none; +#tab_ui_theme [id*="color"] label { + display: flex; + align-items: center; + pointer-events: none; } -#tab_ui_theme [id*="color"] label span{ - min-width: 50% !important; +#tab_ui_theme [id*="color"] label span { + min-width: 50% !important; } -#tab_ui_theme [id*="color"] label input{ - flex-grow:1; - pointer-events: all; - cursor: pointer; +#tab_ui_theme [id*="color"] label input { + flex-grow: 1; + pointer-events: all; + cursor: pointer; } -#settings_ui_theme > div > div -{ - flex-direction: row; - flex-wrap: wrap; +#settings_ui_theme > div > div { + flex-direction: row; + flex-wrap: wrap; } -#settings_ui_theme > div > div > div -{ - max-width:30%; +#settings_ui_theme > div > div > div { + max-width: 30%; } -#tab_ui_theme > div{ - padding:16px !important; - padding-top:0!important; +#tab_ui_theme > div { + padding: 16px !important; + padding-top: 0 !important; } -#ui_theme_hsv + button{ - min-width:unset; -} \ No newline at end of file +#ui_theme_hsv + button { + min-width: unset; +} diff --git a/javascript/ui.js b/javascript/ui.js index 7f9d9182..f6cf5e1b 100644 --- a/javascript/ui.js +++ b/javascript/ui.js @@ -1489,6 +1489,21 @@ onUiUpdate(function () { }); ui_show_range_ticks(opts.ui_show_range_ticks); + const gradio_main = gradioApp().querySelector(".gradio-container > div.main"); + function ui_no_slider_layout(value) { + if (value) { + gradio_main.classList.add("no-slider-layout"); + } else { + gradio_main.classList.remove("no-slider-layout"); + } + } + gradioApp() + .querySelector("#setting_ui_no_slider_layout input") + .addEventListener("click", function (e) { + ui_no_slider_layout(e.target.checked, true); + }); + ui_no_slider_layout(opts.ui_no_slider_layout); + // draggable reordable quicksettings const container = gradioApp().querySelector( "#quicksettings_overflow_container" diff --git a/modules/shared.py b/modules/shared.py index ce96bfc8..2a3cf341 100644 --- a/modules/shared.py +++ b/modules/shared.py @@ -426,6 +426,7 @@ options_templates.update(options_section(('ui', "User interface"), { "ui_output_image_fit": OptionInfo("Scale-down", "Generated image fit method", gr.Radio, {"choices": ["Scale-down", "Contain"]}), "ui_show_range_ticks": OptionInfo(True, "Show ticks for range sliders"), "ui_dispatch_input_release": OptionInfo(True, "Dispatch event change on release, for slider and input number components"), + "ui_no_slider_layout": OptionInfo(False, "No sliders compact layout mode"), "localization": OptionInfo("None", "Localization (requires restart)", gr.Dropdown, lambda: {"choices": ["None"] + list(localization.localizations.keys())}, refresh=lambda: localization.list_localizations(cmd_opts.localizations_dir)), "gradio_theme": OptionInfo("Default", "Gradio theme (requires restart)", ui_components.DropdownEditable, lambda: {"choices": ["Default"] + gradio_hf_hub_themes}) })) diff --git a/modules/ui.py b/modules/ui.py index 8d563f9c..7fe61fd2 100644 --- a/modules/ui.py +++ b/modules/ui.py @@ -132,7 +132,7 @@ def calc_resolution_hires(enable, width, height, hr_scale, hr_resize_x, hr_resiz with devices.autocast(): p.init([""], [0], [0]) - return f"resize: from {p.width}x{p.height} to {p.hr_resize_x or p.hr_upscale_to_x}x{p.hr_resize_y or p.hr_upscale_to_y}" + return f"from {p.width}x{p.height} to {p.hr_resize_x or p.hr_upscale_to_x}x{p.hr_resize_y or p.hr_upscale_to_y}" def resize_from_to_html(width, height, scale_by): @@ -142,7 +142,7 @@ def resize_from_to_html(width, height, scale_by): if not target_width or not target_height: return "no image selected" - return f"resize: from {width}x{height} to {target_width}x{target_height}" + return f"from {width}x{height} to {target_width}x{target_height}" def apply_styles(prompt, prompt_neg, styles): @@ -523,9 +523,7 @@ def create_ui(): res_switch_btn = ToolButton(value=switch_values_symbol, elem_id="txt2img_res_switch_btn") height = gr.Slider(minimum=64, maximum=2048, step=8, label="Height", value=512, elem_id="txt2img_height") - - if opts.dimensions_and_batch_together: - + if opts.dimensions_and_batch_together: with gr.Row(elem_id="txt2img_column_batch"): batch_count = gr.Slider(minimum=1, step=1, label='Batch count', value=1, elem_id="txt2img_batch_count") batch_size = gr.Slider(minimum=1, maximum=8, step=1, label='Batch size', value=1, elem_id="txt2img_batch_size") @@ -538,7 +536,7 @@ def create_ui(): elif category == "checkboxes": #with FormRow(elem_id="txt2img_checkboxes", variant="compact"): - with gr.Row(): + with gr.Row(elem_id="txt2img_checkboxes"): restore_faces = gr.Checkbox(label='Restore faces', value=False, visible=len(shared.face_restorers) > 1, elem_id="txt2img_restore_faces") tiling = gr.Checkbox(label='Tiling', value=False, elem_id="txt2img_tiling") enable_hr = gr.Checkbox(label='Hires. fix', value=False, elem_id="txt2img_enable_hr") @@ -562,7 +560,7 @@ def create_ui(): elif category == "batch": if not opts.dimensions_and_batch_together: #with FormRow(elem_id="txt2img_column_batch"): - with gr.Row(): + with gr.Row(id="txt2img_column_batch"): batch_count = gr.Slider(minimum=1, step=1, label='Batch count', value=1, elem_id="txt2img_batch_count") batch_size = gr.Slider(minimum=1, maximum=8, step=1, label='Batch size', value=1, elem_id="txt2img_batch_size") diff --git a/style.css b/style.css index 9267c781..8f98bc3f 100644 --- a/style.css +++ b/style.css @@ -1,48 +1,4 @@ -: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*/ +: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 @@ -1258,6 +1214,54 @@ button.secondary { margin-bottom: var(--ae-inside-padding-size); } +.no-slider-layout .gradio-slider input[type="range"] { + display: none; +} +.no-slider-layout .gradio-slider input[type="number"] { + width: 100% !important; + margin-bottom: 0; + min-height: 34px; + padding-right: 8px !important; +} +.no-slider-layout .head.svelte-1cl284s { + flex-direction: column; +} +[id*="2img_toprow"] > div:first-child { + min-width: unset !important; +} +.no-slider-layout [id$="2img_settings"] { + min-width: min(320px, 100%) !important; +} + +.no-slider-layout div.block.padded.gradio-slider { + align-content: stretch; +} +[id*="2img_checkboxes"] > .form > div { + min-width: unset !important; + white-space: nowrap; +} +input.svelte-1ojmf70.svelte-1ojmf70.svelte-1ojmf70 { + align-self: flex-start; + margin-top: 2px; +} +.thumbnail-small.svelte-g4rw9 > img.svelte-g4rw9 { + object-fit: contain; + max-height: 54px !important; +} +.thumbnail-small.svelte-g4rw9.svelte-g4rw9 { + width: auto; + max-height: 56px; + max-width: 180px; +} +.no-slider-layout [id$="2img_res_switch_btn"] { + height: 34px; + align-self: flex-end; + margin-bottom: var(--ae-inside-padding-size) !important; +} +.no-slider-layout [id$="2img_dimensions_row"] > .form { + background-color: var(--ae-panel-bg-color) !important; +} + .gradio-dropdown:not(.multiselect) .wrap-inner { padding: 0px 5px !important; height: 32px !important; @@ -4199,4 +4203,4 @@ div[data-testid="image"] canvas { } } -/*BREAKPOINT_CSS_CONTENT*/ +/*BREAKPOINT_CSS_CONTENT*/ \ No newline at end of file