From 8c9f7b9f2f57bddd69569e3afc3cf9a84d5fc685 Mon Sep 17 00:00:00 2001
From: fennghuang <89014758+fennghuang@users.noreply.github.com>
Date: Sat, 12 Aug 2023 07:14:07 +0000
Subject: [PATCH] feat: update ui style

---
 scripts/image_browser.py | 6 +++---
 style.css                | 7 ++++++-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/scripts/image_browser.py b/scripts/image_browser.py
index 080c7fd..d0a38a6 100644
--- a/scripts/image_browser.py
+++ b/scripts/image_browser.py
@@ -1174,7 +1174,7 @@ def create_tab(tab: ImageBrowserTab, current_gr_tab: gr.Tab):
                             gr.HTML("<h3>Additional Generation Info</h3>")
                             img_file_info_add = gr.HTML()
 
-                with gr.Column(scale=1): 
+                with gr.Column(scale=1, elem_classes="right-column-panel"): 
                     with gr.Row(elem_classes="sort-panel") as sort_panel:
                         sort_by = gr.Dropdown(value="date", choices=["path name", "date", "aesthetic_score", "random", "cfg scale", "steps", "seed", "sampler", "size", "model", "model hash", "ranking"], label="Sort by")
                         sort_order = ToolButton(value=down_symbol)
@@ -1192,9 +1192,9 @@ def create_tab(tab: ImageBrowserTab, current_gr_tab: gr.Tab):
                             ranking_filter = gr.Radio(value="All", choices=["All", "1", "2", "3", "4", "5", "None", "Min-max"], label="Ranking filter", interactive=True)
                         with gr.Row():
                             with gr.Column(scale=2, min_width=20):
-                                ranking_filter_min = gr.Textbox(value="1", label="Minimum ranking", interactive=False)
+                                ranking_filter_min = gr.Number(value="1", label="Minimum ranking", interactive=False, elem_classes="ranking-filter-input")
                             with gr.Column(scale=2, min_width=20):
-                                ranking_filter_max = gr.Textbox(value="5", label="Maximum ranking", interactive=False)
+                                ranking_filter_max = gr.Number(value="5", label="Maximum ranking", interactive=False, elem_classes="ranking-filter-input")
                         with gr.Row():
                             with gr.Column():
                                 gr.HTML("<p class='no-gap-top mb-0 text-subdued'>Choose Min-max to activate these controls<p>")
diff --git a/style.css b/style.css
index d55ca67..a4eb07c 100644
--- a/style.css
+++ b/style.css
@@ -65,10 +65,15 @@ button[id$='_image_browser_del_img_btn'] {
 }
 
 #tab_image_browser div[id$='_control_image_browser_page_index'],
-#tab_image_browser .sort-panel .form>div {
+#tab_image_browser .right-column-panel {
   margin-top: calc(var(--body-text-size) * var(--line-sm) * -1) !important
 }
 
 #tab_image_browser .sort-panel button {
+  margin-top: calc(var(--body-text-size) * var(--line-sm));
   align-self: center
 }
+
+#tab_image_browser .ranking-filter-input input:disabled{
+  cursor: not-allowed
+}