fix: refresh button is overlayed by other button

pull/237/head
AlUlkesh 2023-08-22 09:08:11 +02:00
parent 65618f3e07
commit 15c337914d
2 changed files with 15 additions and 10 deletions

View File

@ -1137,16 +1137,17 @@ def create_tab(tab: ImageBrowserTab, current_gr_tab: gr.Tab):
with gr.Row(): with gr.Row():
with gr.Column(scale=2): with gr.Column(scale=2):
with gr.Row(elem_id=f"{tab.base_tag}_image_browser_gallery_controls") as gallery_controls_panel: with gr.Row(elem_id=f"{tab.base_tag}_image_browser_gallery_controls") as gallery_controls_panel:
with gr.Column(scale=2, min_width=20): with gr.Column(scale=4, min_width=20):
first_page = gr.Button("First Page", elem_id=f"{tab.base_tag}_control_image_browser_first_page") 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): with gr.Column(scale=4, min_width=20):
prev_page = gr.Button("Prev Page", elem_id=f"{tab.base_tag}_control_image_browser_prev_page") prev_page = gr.Button("Prev Page", elem_id=f"{tab.base_tag}_control_image_browser_prev_page")
with gr.Row(elem_classes="page-index-panel"): with gr.Row(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") 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-index-panel"):
refresh_index_button = ToolButton(value=refresh_symbol, elem_id=f"{tab.base_tag}_control_image_browser_refresh_index") 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): with gr.Column(scale=4, min_width=20):
next_page = gr.Button("Next Page", elem_id=f"{tab.base_tag}_control_image_browser_next_page") next_page = gr.Button("Next Page", elem_id=f"{tab.base_tag}_control_image_browser_next_page")
with gr.Column(scale=2, min_width=20): with gr.Column(scale=4, min_width=20):
end_page = gr.Button("End Page", elem_id=f"{tab.base_tag}_control_image_browser_end_page") end_page = gr.Button("End Page", elem_id=f"{tab.base_tag}_control_image_browser_end_page")
with gr.Row(visible=False) as ranking_panel: with gr.Row(visible=False) as ranking_panel:
with gr.Column(scale=1, min_width=20): with gr.Column(scale=1, min_width=20):

View File

@ -54,21 +54,21 @@ button[id$='_image_browser_del_img_btn'] {
#tab_image_browser button[id$='_control_image_browser_prev_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_next_page'],
#tab_image_browser button[id$='_control_image_browser_end_page'] { #tab_image_browser button[id$='_control_image_browser_end_page'] {
cursor: pointer !important cursor: pointer !important;
} }
#tab_image_browser div[id$='_control_image_browser_page_index'], #tab_image_browser div[id$='_control_image_browser_page_index'],
#tab_image_browser .right-column-panel { #tab_image_browser .right-column-panel {
margin-top: calc(var(--body-text-size) * var(--line-sm) * -1) !important margin-top: calc(var(--body-text-size) * var(--line-sm) * -1) !important;
} }
#tab_image_browser .sort-panel button { #tab_image_browser .sort-panel button {
margin-top: calc(var(--body-text-size) * var(--line-sm)); margin-top: calc(var(--body-text-size) * var(--line-sm));
align-self: center align-self: center;
} }
#tab_image_browser .ranking-filter-input input:disabled{ #tab_image_browser .ranking-filter-input input:disabled{
cursor: not-allowed cursor: not-allowed;
} }
#tab_image_browser .thumbnails .thumbnail-item:first-child{ #tab_image_browser .thumbnails .thumbnail-item:first-child{
@ -85,10 +85,14 @@ button[id$='_image_browser_del_img_btn'] {
} }
#tab_image_browser .page-index-panel > div > div { #tab_image_browser .page-index-panel > div > div {
min-width: auto min-width: auto;
}
#tab_image_browser .refresh-index-panel > div {
margin-top: var(--spacing-sm);
} }
#tab_image_browser .gradio-dropdown ul.options li.item { #tab_image_browser .gradio-dropdown ul.options li.item {
white-space: wrap; white-space: wrap;
word-break: break-all word-break: break-all;
} }