From 54cdd4e1f4168697f32882c0b33842e767b66884 Mon Sep 17 00:00:00 2001 From: xmodar Date: Wed, 26 Oct 2022 22:49:45 +0300 Subject: Add LTR checkpoint lists and updated Arabic localization --- style.css | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) (limited to 'style.css') diff --git a/style.css b/style.css index 13a9fb07..f4d37e72 100644 --- a/style.css +++ b/style.css @@ -522,18 +522,28 @@ If you change anything above, you need to make sure it is RTL compliant by just your changes through converters like https://cssjanus.github.io/ or https://rtlcss.com/. Then, you will need to add the RTL counterpart only if needed in the rtl section below.*/ @media rtl { - /* this part was manualy added */ + /* this part was added manually */ :host { direction: rtl; } - .output-html:has(.performance), .gr-text-input { + .file-preview, + .gr-text-input, + .output-html:has(.performance), + #txt2img_style_index > label > select, + #txt2img_style2_index > label > select, + #img2img_style_index > label > select, + #img2img_style2_index > label > select, + #setting_sd_model_checkpoint > label > select, + #modelmerger_primary_model_name > label > select, + #modelmerger_secondary_model_name > label > select, + #modelmerger_tertiary_model_name > label > select { direction: ltr; } .gr-radio, .gr-checkbox{ margin-left: 0.25em; } - /* this part was automatically generated with few manual modifications */ + /* automatically generated with few manual modifications */ .performance .time { margin-right: unset; margin-left: 0; -- cgit v1.2.3 From 3de036514138d7cdcba9729c975f1683a8e06b16 Mon Sep 17 00:00:00 2001 From: xmodar Date: Wed, 26 Oct 2022 23:56:11 +0300 Subject: Add id access to scripts list in the css --- modules/scripts.py | 2 +- style.css | 17 ++++++----------- 2 files changed, 7 insertions(+), 12 deletions(-) (limited to 'style.css') diff --git a/modules/scripts.py b/modules/scripts.py index 9323af3e..a7f36012 100644 --- a/modules/scripts.py +++ b/modules/scripts.py @@ -236,7 +236,7 @@ class ScriptRunner: with gr.Group(): create_script_ui(script, inputs, inputs_alwayson) - dropdown = gr.Dropdown(label="Script", choices=["None"] + self.titles, value="None", type="index") + dropdown = gr.Dropdown(label="Script", elem_id="script_list", choices=["None"] + self.titles, value="None", type="index") dropdown.save_to_config = True inputs[0] = dropdown diff --git a/style.css b/style.css index f4d37e72..c49954e0 100644 --- a/style.css +++ b/style.css @@ -526,19 +526,14 @@ Then, you will need to add the RTL counterpart only if needed in the rtl section :host { direction: rtl; } - .file-preview, - .gr-text-input, - .output-html:has(.performance), - #txt2img_style_index > label > select, - #txt2img_style2_index > label > select, - #img2img_style_index > label > select, - #img2img_style2_index > label > select, - #setting_sd_model_checkpoint > label > select, - #modelmerger_primary_model_name > label > select, - #modelmerger_secondary_model_name > label > select, - #modelmerger_tertiary_model_name > label > select { + select, .file-preview, .gr-text-input, .output-html:has(.performance) { direction: ltr; } + #script_list > label > select, + #x_type > label > select, + #y_type > label > select { + direction: rtl; + } .gr-radio, .gr-checkbox{ margin-left: 0.25em; } -- cgit v1.2.3 From 0995e879cea8ce871489ea8e393bb0eba6edc09c Mon Sep 17 00:00:00 2001 From: Florian Horn Date: Thu, 27 Oct 2022 16:20:01 +0200 Subject: added save button and shortcut (s) to Modal View --- javascript/imageviewer.js | 29 +++++++++++++++++++++++++++++ modules/ui.py | 8 +++++--- style.css | 18 ++++++++++++++++-- 3 files changed, 50 insertions(+), 5 deletions(-) (limited to 'style.css') diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js index 9e380c65..3aa3b29e 100644 --- a/javascript/imageviewer.js +++ b/javascript/imageviewer.js @@ -81,6 +81,25 @@ function modalImageSwitch(offset) { } } +function saveImage(){ + const tabTxt2Img = gradioApp().getElementById("tab_txt2img") + const tabImg2Img = gradioApp().getElementById("tab_img2img") + const saveTxt2Img = "save_txt2img" + const saveImg2Img = "save_img2img" + if (tabTxt2Img.style["display"] != "none") { + gradioApp().getElementById(saveTxt2Img).click() + } else if (tabImg2Img.style["display"] != "none") { + gradioApp().getElementById(saveImg2Img).click() + } else { + console.error("missing implementation for saving modal of this type") + } +} + +function modalSaveImage(event) { + saveImage() + event.stopPropagation() +} + function modalNextImage(event) { modalImageSwitch(1) event.stopPropagation() @@ -93,6 +112,9 @@ function modalPrevImage(event) { function modalKeyHandler(event) { switch (event.key) { + case "s": + saveImage() + break; case "ArrowLeft": modalPrevImage(event) break; @@ -198,6 +220,13 @@ document.addEventListener("DOMContentLoaded", function() { modalTileImage.title = "Preview tiling"; modalControls.appendChild(modalTileImage) + const modalSave = document.createElement("span") + modalSave.className = "modalSave cursor" + modalSave.innerHTML = "🖫" + modalSave.addEventListener("click", modalSaveImage, true) + modalSave.title = "Save Image(s)" + modalControls.appendChild(modalSave) + const modalClose = document.createElement('span') modalClose.className = 'modalClose cursor'; modalClose.innerHTML = '×' diff --git a/modules/ui.py b/modules/ui.py index 0a63e357..1332e265 100644 --- a/modules/ui.py +++ b/modules/ui.py @@ -630,7 +630,7 @@ def create_ui(wrap_gradio_gpu_call): import modules.img2img import modules.txt2img - + with gr.Blocks(analytics_enabled=False) as txt2img_interface: txt2img_prompt, roll, txt2img_prompt_style, txt2img_negative_prompt, txt2img_prompt_style2, submit, _, _, txt2img_prompt_style_apply, txt2img_save_style, txt2img_paste, token_counter, token_button = create_toprow(is_img2img=False) dummy_component = gr.Label(visible=False) @@ -683,7 +683,8 @@ def create_ui(wrap_gradio_gpu_call): with gr.Column(): with gr.Row(): - save = gr.Button('Save') + saveButtonId = 'save_txt2img' + save = gr.Button('Save', elem_id=saveButtonId) send_to_img2img = gr.Button('Send to img2img') send_to_inpaint = gr.Button('Send to inpaint') send_to_extras = gr.Button('Send to extras') @@ -901,7 +902,8 @@ def create_ui(wrap_gradio_gpu_call): with gr.Column(): with gr.Row(): - save = gr.Button('Save') + saveButtonId = 'save_img2img' + save = gr.Button('Save', elem_id=saveButtonId) img2img_send_to_img2img = gr.Button('Send to img2img') img2img_send_to_inpaint = gr.Button('Send to inpaint') img2img_send_to_extras = gr.Button('Send to extras') diff --git a/style.css b/style.css index 13a9fb07..fa357a49 100644 --- a/style.css +++ b/style.css @@ -314,8 +314,8 @@ input[type="range"]{ .modalControls { display: grid; - grid-template-columns: 32px auto 1fr 32px; - grid-template-areas: "zoom tile space close"; + grid-template-columns: 32px auto 32px 1fr 32px; + grid-template-areas: "zoom tile save space close"; position: absolute; top: 0; left: 0; @@ -333,6 +333,10 @@ input[type="range"]{ grid-area: zoom; } +.modalSave { + grid-area: save; +} + .modalTileImage { grid-area: tile; } @@ -346,8 +350,18 @@ input[type="range"]{ cursor: pointer; } +.modalSave { + color: white; + font-size: 30px; + margin-top: 6px; + font-weight: bold; + cursor: pointer; +} + .modalClose:hover, .modalClose:focus, +.modalSave:hover, +.modalSave:focus, .modalZoom:hover, .modalZoom:focus { color: #999; -- cgit v1.2.3 From bf25b51c3167426d3a340d2a3facea58813d4914 Mon Sep 17 00:00:00 2001 From: Florian Horn Date: Thu, 27 Oct 2022 16:38:55 +0200 Subject: fixed position to be in line with the other icons --- style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'style.css') diff --git a/style.css b/style.css index fa357a49..7b3ad050 100644 --- a/style.css +++ b/style.css @@ -314,7 +314,7 @@ input[type="range"]{ .modalControls { display: grid; - grid-template-columns: 32px auto 32px 1fr 32px; + grid-template-columns: 32px 32px 32px 1fr 32px; grid-template-areas: "zoom tile save space close"; position: absolute; top: 0; @@ -352,8 +352,8 @@ input[type="range"]{ .modalSave { color: white; - font-size: 30px; - margin-top: 6px; + font-size: 28px; + margin-top: 8px; font-weight: bold; cursor: pointer; } -- cgit v1.2.3 From 68760a48cb537e08e58014819bb8f83dbd30e831 Mon Sep 17 00:00:00 2001 From: xmodar Date: Thu, 27 Oct 2022 17:46:00 +0300 Subject: Add forced LTR for training progress --- style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'style.css') diff --git a/style.css b/style.css index c49954e0..8dd483ef 100644 --- a/style.css +++ b/style.css @@ -526,7 +526,7 @@ Then, you will need to add the RTL counterpart only if needed in the rtl section :host { direction: rtl; } - select, .file-preview, .gr-text-input, .output-html:has(.performance) { + select, .file-preview, .gr-text-input, .output-html:has(.performance), #ti_progress { direction: ltr; } #script_list > label > select, -- cgit v1.2.3