1580158
/
stable-diffusion-webui-images-browser
mirror of https://github.com/AlUlkesh/stable-diffusion-webui-images-browser.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: update ui style

pull/222/head
fennghuang 2023-08-12 08:43:50 +00:00
parent 8c9f7b9f2f
commit fd68d7a167
2 changed files with 23 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
scripts/image_browser.py
View File

@ -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") 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=2, 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.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") 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") 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=2, 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")

34
style.css
View File

@ -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*/ /* 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-top: -20px !important;
margin-left: 10px !important;
display: grid; display: grid;
justify-content: end; justify-content: end;
} }
button[id$='_control_image_browser_refresh_index']{ button[id$='_control_image_browser_refresh_index']{
align-self: start !important; align-self: center !important;
height: 2em !important; height: 2em !important;
cursor: pointer;
} }
button[id$='_image_browser_del_img_btn'] { 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 /* 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; height: auto !important;
} }
#tab_image_browser .exif-search-panel { #tab_image_browser .exif-search-panel,
margin-top: calc(var(--layout-gap) * -1);
}
#tab_image_browser .no-gap-top { #tab_image_browser .no-gap-top {
margin-top: calc(var(--layout-gap) * -1); margin-top: calc(var(--layout-gap) * -1);
} }
@ -53,10 +50,6 @@ button[id$='_image_browser_del_img_btn'] {
color: var(--body-text-color-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_first_page'],
#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'],
@ -77,3 +70,20 @@ button[id$='_image_browser_del_img_btn'] {
#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{
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
}