altoiddealer/--sd-webui-ar-plusplus
1
0
Fork 0
mirror of https://github.com/altoiddealer/--sd-webui-ar-plusplus.git synced 2026-01-26 19:19:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #8 from LEv145/dev

Browse Source 
Add prefix for element ids (For CSS and JS)
This commit is contained in:
LEv145
2023-07-06 02:32:14 +02:00
committed by GitHub
parent 953b31ac57 2a4c13c211
commit 5f73433927
3 changed files with 38 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
javascript/sd-webui-ar.js
View File

@@ -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;
}

22
scripts/sd-webui-ar.py
View File

@@ -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)

32
style.css
View File

@@ -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 */
#arc_ar_display_text {
/* TODO: Use gradio instead if posible */
#arsp__arc_ar_display_text {
height: 22px;
overflow: hidden !important;
}