From 7cd0acb5ed9b25849ebd1840f86465a9c2ecadf0 Mon Sep 17 00:00:00 2001 From: LEv145 Date: Wed, 5 Jul 2023 14:58:50 +0200 Subject: [PATCH 1/2] Update TODO --- style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style.css b/style.css index 7cac559..f747441 100644 --- a/style.css +++ b/style.css @@ -29,7 +29,7 @@ button#arc_hide_logic_button { padding: var(--size-0-5) var(--size-2) !important; } -/* TODO: Use gradio instead */ +/* TODO: Use gradio instead if posible */ #arc_ar_display_text { height: 22px; overflow: hidden !important; From 2a4c13c2112858042ab0b95cd9c3ec6ed75a78b2 Mon Sep 17 00:00:00 2001 From: LEv145 Date: Wed, 5 Jul 2023 15:03:49 +0200 Subject: [PATCH 2/2] Add prefix for element ids (For CSS and JS) --- javascript/sd-webui-ar.js | 22 +++++++++++----------- scripts/sd-webui-ar.py | 22 +++++++++++----------- style.css | 30 +++++++++++++++--------------- 3 files changed, 37 insertions(+), 37 deletions(-) diff --git a/javascript/sd-webui-ar.js b/javascript/sd-webui-ar.js index 97bd5e9..998cbfc 100644 --- a/javascript/sd-webui-ar.js +++ b/javascript/sd-webui-ar.js @@ -1,18 +1,18 @@ -if ("undefined" === typeof ar_button_titles) { - ar_button_titles = {}; +if ("undefined" === typeof arsp__ar_button_titles) { + arsp__ar_button_titles = {}; } -ar_button_titles["Calc"] = "Show or hide the aspect ratio calculator"; -ar_button_titles["\u{21c5}"] = "Swap width and height values"; -ar_button_titles["\u2B07\ufe0f"] = "Get dimensions from txt2img/img2img sliders"; -ar_button_titles["\u{1f5bc}"] = "Get dimensions from image on current img2img tab"; -ar_button_titles["Calculate Height"] = "Calculate new height based on source aspect ratio"; -ar_button_titles["Calculate Width"] = "Calculate new width based on source aspect ratio"; -ar_button_titles["Apply"] = "Apply calculated width and height to txt2img/img2img sliders"; +arsp__ar_button_titles["Calc"] = "Show or hide the aspect ratio calculator"; +arsp__ar_button_titles["\u{21c5}"] = "Swap width and height values"; +arsp__ar_button_titles["\u2B07\ufe0f"] = "Get dimensions from txt2img/img2img sliders"; +arsp__ar_button_titles["\u{1f5bc}"] = "Get dimensions from image on current img2img tab"; +arsp__ar_button_titles["Calculate Height"] = "Calculate new height based on source aspect ratio"; +arsp__ar_button_titles["Calculate Width"] = "Calculate new width based on source aspect ratio"; +arsp__ar_button_titles["Apply"] = "Apply calculated width and height to txt2img/img2img sliders"; onUiUpdate(function(){ - gradioApp().querySelectorAll('#txt2img_container_aspect_ratio button, #img2img_container_aspect_ratio button').forEach(function(elem){ - tooltip = ar_button_titles[elem.textContent]; + gradioApp().querySelectorAll('#arsp__txt2img_container_aspect_ratio button, #arsp__img2img_container_aspect_ratio button').forEach(function(elem){ + tooltip = arsp__ar_button_titles[elem.textContent]; if(tooltip){ elem.title = tooltip; } diff --git a/scripts/sd-webui-ar.py b/scripts/sd-webui-ar.py index dedc0b9..eb9e247 100644 --- a/scripts/sd-webui-ar.py +++ b/scripts/sd-webui-ar.py @@ -157,7 +157,7 @@ def write_js_titles_file(button_titles): content = [ "// Do not put custom titles here. This file is overwritten each time the WebUI is started.\n" ] - content.append("ar_button_titles = {\n") + content.append("arsp__ar_button_titles = {\n") counter = 0 while counter < len(button_titles[0]): content.append( @@ -238,23 +238,23 @@ class AspectRatioScript(scripts.Script): def ui(self, is_img2img): with gr.Column( - elem_id=f'{"img" if is_img2img else "txt"}2img_container_aspect_ratio' + elem_id=f'arsp__{"img" if is_img2img else "txt"}2img_container_aspect_ratio' ): self.read_aspect_ratios() with gr.Row( - elem_id=f'{"img" if is_img2img else "txt"}2img_row_aspect_ratio' + elem_id=f'arsp__{"img" if is_img2img else "txt"}2img_row_aspect_ratio' ): arc_show_logic = ToolButton( value=REVERSE_LOGIC_SYMBOL, visible=True, variant="secondary", - elem_id="arc_show_logic_button", + elem_id="arsp__arc_show_logic_button", ) arc_hide_logic = ToolButton( value=REVERSE_LOGIC_SYMBOL, visible=False, variant="primary", - elem_id="arc_hide_logic_button", + elem_id="arsp__arc_hide_logic_button", ) # Aspect Ratio buttons @@ -281,20 +281,20 @@ class AspectRatioScript(scripts.Script): self.read_resolutions() with gr.Row( - elem_id=f'{"img" if is_img2img else "txt"}2img_row_resolutions' + elem_id=f'arsp__{"img" if is_img2img else "txt"}2img_row_resolutions' ): # Toggle calculator display button arc_show_calculator = ToolButton( value=CALCULATOR_SYMBOL, visible=True, variant="secondary", - elem_id="arc_show_calculator_button", + elem_id="arsp__arc_show_calculator_button", ) arc_hide_calculator = ToolButton( value=CALCULATOR_SYMBOL, visible=False, variant="primary", - elem_id="arc_hide_calculator_button", + elem_id="arsp__arc_hide_calculator_button", ) btns = [ @@ -326,7 +326,7 @@ class AspectRatioScript(scripts.Script): # Aspect Ratio Calculator with gr.Column( - visible=False, variant="panel", elem_id="arc_panel" + visible=False, variant="panel", elem_id="arsp__arc_panel" ) as arc_panel: arc_title_heading = gr.Markdown(value="#### Aspect Ratio Calculator") with gr.Row(): @@ -339,9 +339,9 @@ class AspectRatioScript(scripts.Script): arc_desired_height = gr.Number(label="Height 2") with gr.Column(min_width=150): - arc_ar_display = gr.Markdown(value="Aspect Ratio:", elem_id="arc_ar_display_text") + arc_ar_display = gr.Markdown(value="Aspect Ratio:", elem_id="arsp__arc_ar_display_text") with gr.Row( - elem_id=f'{"img" if is_img2img else "txt"}2img_arc_tool_buttons' + elem_id=f'arsp__{"img" if is_img2img else "txt"}2img_arc_tool_buttons' ): # Switch resolution values button arc_swap = ToolButton(value=SWITCH_VALUES_SYMBOL) diff --git a/style.css b/style.css index f747441..865bc4b 100644 --- a/style.css +++ b/style.css @@ -1,36 +1,36 @@ -#txt2img_container_aspect_ratio, -#img2img_container_aspect_ratio { +#arsp__txt2img_container_aspect_ratio, +#arsp__img2img_container_aspect_ratio { gap: 5px !important; margin-top: 3px; margin-bottom: 3px; } -#txt2img_row_aspect_ratio, -#txt2img_row_resolutions, -#img2img_row_aspect_ratio, -#img2img_row_resolutions { +#arsp__txt2img_row_aspect_ratio, +#arsp__txt2img_row_resolutions, +#arsp__img2img_row_aspect_ratio, +#arsp__img2img_row_resolutions { gap: 8px; } -#txt2img_row_aspect_ratio button, -#txt2img_row_resolutions button, -#img2img_row_aspect_ratio button, -#img2img_row_resolutions button { +#arsp__txt2img_row_aspect_ratio button, +#arsp__txt2img_row_resolutions button, +#arsp__img2img_row_aspect_ratio button, +#arsp__img2img_row_resolutions button { gap: 10px !important; max-width: unset !important; } -button#arc_show_calculator_button, -button#arc_hide_calculator_button, -button#arc_show_logic_button, -button#arc_hide_logic_button { +button#arsp__arc_show_calculator_button, +button#arsp__arc_hide_calculator_button, +button#arsp__arc_show_logic_button, +button#arsp__arc_hide_logic_button { max-width: 40px !important; min-width: unset !important; padding: var(--size-0-5) var(--size-2) !important; } /* TODO: Use gradio instead if posible */ -#arc_ar_display_text { +#arsp__arc_ar_display_text { height: 22px; overflow: hidden !important; }