From ab8abbc12cc7b32fc94f198914707d0254295207 Mon Sep 17 00:00:00 2001 From: fennghuang <89014758+fennghuang@users.noreply.github.com> Date: Sat, 12 Aug 2023 06:35:52 +0000 Subject: [PATCH 1/4] feat: update ui style --- scripts/image_browser.py | 17 +++++++++-------- style.css | 36 ++++++++++++++++++++++++++++++++++++ 2 files changed, 45 insertions(+), 8 deletions(-) diff --git a/scripts/image_browser.py b/scripts/image_browser.py index 0f829a9..080c7fd 100644 --- a/scripts/image_browser.py +++ b/scripts/image_browser.py @@ -1150,7 +1150,7 @@ def create_tab(tab: ImageBrowserTab, current_gr_tab: gr.Tab): prev_page = gr.Button("Prev Page", elem_id=f"{tab.base_tag}_control_image_browser_prev_page") with gr.Column(scale=2, min_width=20): page_index = gr.Number(value=1, label="Page Index", elem_id=f"{tab.base_tag}_control_image_browser_page_index") - with gr.Column(scale=1, min_width=20): + with gr.Column(scale=1, min_width=20, elem_classes="refresh-btn"): refresh_index_button = ToolButton(value=refresh_symbol, elem_id=f"{tab.base_tag}_control_image_browser_refresh_index") with gr.Column(scale=2, min_width=20): next_page = gr.Button("Next Page", elem_id=f"{tab.base_tag}_control_image_browser_next_page") @@ -1175,19 +1175,19 @@ def create_tab(tab: ImageBrowserTab, current_gr_tab: gr.Tab): img_file_info_add = gr.HTML() with gr.Column(scale=1): - with gr.Row() as sort_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) with gr.Row() as filename_search_panel: filename_keyword_search = gr.Textbox(value="", label="Filename keyword search") - with gr.Box() as exif_search_panel: + with gr.Blocks() as exif_search_panel: with gr.Row(): exif_keyword_search = gr.Textbox(value="", label="EXIF keyword search") negative_prompt_search = gr.Radio(value="No", choices=["No", "Yes", "Only"], label="Search negative prompt", interactive=True) - with gr.Row(): + with gr.Row(elem_classes="exif-search-panel"): case_sensitive = gr.Checkbox(value=False, label="case sensitive") use_regex = gr.Checkbox(value=False, label=r"regex - e.g. ^(?!.*Hires).*$") - with gr.Box() as ranking_filter_panel: + with gr.Blocks() as ranking_filter_panel: with gr.Row(): ranking_filter = gr.Radio(value="All", choices=["All", "1", "2", "3", "4", "5", "None", "Min-max"], label="Ranking filter", interactive=True) with gr.Row(): @@ -1195,9 +1195,10 @@ def create_tab(tab: ImageBrowserTab, current_gr_tab: gr.Tab): ranking_filter_min = gr.Textbox(value="1", label="Minimum ranking", interactive=False) with gr.Column(scale=2, min_width=20): ranking_filter_max = gr.Textbox(value="5", label="Maximum ranking", interactive=False) - with gr.Column(scale=4, min_width=20): - gr.Textbox(value="Choose Min-max to activate these controls", label="", interactive=False) - with gr.Box() as aesthetic_score_filter_panel: + with gr.Row(): + with gr.Column(): + gr.HTML("

Choose Min-max to activate these controls

") + with gr.Blocks() as aesthetic_score_filter_panel: with gr.Row(): aes_filter_min = gr.Textbox(value="", label="Minimum score") aes_filter_max = gr.Textbox(value="", label="Maximum score") diff --git a/style.css b/style.css index ba3ff92..d55ca67 100644 --- a/style.css +++ b/style.css @@ -36,3 +36,39 @@ button[id$='_image_browser_del_img_btn'] { width: auto !important; height: auto !important; } + +#tab_image_browser .exif-search-panel { + margin-top: calc(var(--layout-gap) * -1); +} + +#tab_image_browser .no-gap-top { + margin-top: calc(var(--layout-gap) * -1); +} + +#tab_image_browser .mb-0 { + margin-bottom: 0; +} + +#tab_image_browser .text-subdued { + color: var(--body-text-color-subdued); +} + +#tab_image_browser .refresh-btn { + align-self: center !important +} + +#tab_image_browser button[id$='_control_image_browser_first_page'], +#tab_image_browser button[id$='_control_image_browser_prev_page'], +#tab_image_browser button[id$='_control_image_browser_next_page'], +#tab_image_browser button[id$='_control_image_browser_end_page'] { + cursor: pointer !important +} + +#tab_image_browser div[id$='_control_image_browser_page_index'], +#tab_image_browser .sort-panel .form>div { + margin-top: calc(var(--body-text-size) * var(--line-sm) * -1) !important +} + +#tab_image_browser .sort-panel button { + align-self: center +} 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 2/4] 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("

Additional Generation Info

") 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("

Choose Min-max to activate these controls

") 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 +} From fd68d7a167378c0260c316963d9cdb30d0c3ab76 Mon Sep 17 00:00:00 2001 From: fennghuang <89014758+fennghuang@users.noreply.github.com> Date: Sat, 12 Aug 2023 08:43:50 +0000 Subject: [PATCH 3/4] feat: update ui style --- scripts/image_browser.py | 3 +-- style.css | 34 ++++++++++++++++++++++------------ 2 files changed, 23 insertions(+), 14 deletions(-) diff --git a/scripts/image_browser.py b/scripts/image_browser.py index d0a38a6..0d75ae4 100644 --- a/scripts/image_browser.py +++ b/scripts/image_browser.py @@ -1148,9 +1148,8 @@ def create_tab(tab: ImageBrowserTab, current_gr_tab: gr.Tab): first_page = gr.Button("First Page", elem_id=f"{tab.base_tag}_control_image_browser_first_page") with gr.Column(scale=2, min_width=20): prev_page = gr.Button("Prev Page", elem_id=f"{tab.base_tag}_control_image_browser_prev_page") - with gr.Column(scale=2, min_width=20): + with gr.Row(scale=2, min_width=20, elem_classes="page-index-panel"): page_index = gr.Number(value=1, label="Page Index", elem_id=f"{tab.base_tag}_control_image_browser_page_index") - with gr.Column(scale=1, min_width=20, elem_classes="refresh-btn"): refresh_index_button = ToolButton(value=refresh_symbol, elem_id=f"{tab.base_tag}_control_image_browser_refresh_index") with gr.Column(scale=2, min_width=20): next_page = gr.Button("Next Page", elem_id=f"{tab.base_tag}_control_image_browser_next_page") diff --git a/style.css b/style.css index a4eb07c..7f38fdb 100644 --- a/style.css +++ b/style.css @@ -15,18 +15,18 @@ div[id^="image_browser_tab"][id$="image_browser_gallery"].hide_loading > .svelte } /* hack to fix the alignment of the page index, refresh, and delete buttons*/ -div[id$='control_image_browser_page_index'] { +div[id$='_control_image_browser_page_index'] { margin-top: -20px !important; - margin-left: 10px !important; display: grid; justify-content: end; } button[id$='_control_image_browser_refresh_index']{ - align-self: start !important; + align-self: center !important; height: 2em !important; + cursor: pointer; } button[id$='_image_browser_del_img_btn'] { - margin-top: 22px !important; + margin-top: calc(var(--body-text-size) * var(--line-sm)); } /* Workaround until gradio version is updated to a version that fixes it @@ -37,10 +37,7 @@ button[id$='_image_browser_del_img_btn'] { height: auto !important; } -#tab_image_browser .exif-search-panel { - margin-top: calc(var(--layout-gap) * -1); -} - +#tab_image_browser .exif-search-panel, #tab_image_browser .no-gap-top { margin-top: calc(var(--layout-gap) * -1); } @@ -53,10 +50,6 @@ button[id$='_image_browser_del_img_btn'] { color: var(--body-text-color-subdued); } -#tab_image_browser .refresh-btn { - align-self: center !important -} - #tab_image_browser button[id$='_control_image_browser_first_page'], #tab_image_browser button[id$='_control_image_browser_prev_page'], #tab_image_browser button[id$='_control_image_browser_next_page'], @@ -77,3 +70,20 @@ button[id$='_image_browser_del_img_btn'] { #tab_image_browser .ranking-filter-input input:disabled{ cursor: not-allowed } + +#tab_image_browser .thumbnails .thumbnail-item:first-child{ + margin-left: var(--spacing-lg); +} + +#tab_image_browser .thumbnails .thumbnail-item:last-child{ + margin-right: var(--spacing-lg); +} + +#tab_image_browser .page-index-panel > div { + flex-wrap: nowrap; + align-self: flex-start; +} + +#tab_image_browser .page-index-panel > div > div { + min-width: auto +} From 2a934343594af302248ac781c2c13b6113d30752 Mon Sep 17 00:00:00 2001 From: fennghuang <89014758+fennghuang@users.noreply.github.com> Date: Sat, 12 Aug 2023 08:47:57 +0000 Subject: [PATCH 4/4] feat: update ui style --- style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style.css b/style.css index 7f38fdb..6484016 100644 --- a/style.css +++ b/style.css @@ -23,7 +23,7 @@ div[id$='_control_image_browser_page_index'] { button[id$='_control_image_browser_refresh_index']{ align-self: center !important; height: 2em !important; - cursor: pointer; + cursor: pointer !important; } button[id$='_image_browser_del_img_btn'] { margin-top: calc(var(--body-text-size) * var(--line-sm));