diff --git a/javascript/sdnext.css b/javascript/sdnext.css index 0738d7988..76e60d1d2 100644 --- a/javascript/sdnext.css +++ b/javascript/sdnext.css @@ -294,7 +294,7 @@ table.settings-value-table td { padding: 0.4em; border: 1px solid #ccc; max-widt #tab-gallery-files { display: block; overflow-x: hidden !important; overflow-y: auto !important; height: 75vh; } #tab-gallery-image { height: 100%; } #tab-gallery-search { padding: 0; } -#tab-gallery-search textarea { height: 42px !important; } +#tab-gallery-search textarea { height: 42px !important; align-content: center; } #tab-gallery-sortby { padding: 0; } #tab-gallery-status { align-content: center; text-align: right; background: var(--input-background-fill); padding-right: 1em; margin-left: -0.6em; color: var(--block-title-text-color); } div:has(>#tab-gallery-folders) { flex-grow: 0 !important; background-color: var(--input-background-fill); min-width: max-content !important; } @@ -304,6 +304,8 @@ div:has(>#tab-gallery-folders) { flex-grow: 0 !important; background-color: var( #gallery_gallery .thumbnails { display: none; } #gallery_gallery .preview { display: grid; background: none; } #gallery_gallery img { object-fit: contain; } +.gallery-sort { background: var(--input-background-fill) !important; margin: 0 !important; padding: 6px !important; } +.gallery-sort:hover { background: var(--button-primary-background-fill-hover) !important; } /* loader */ .splash { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1000; display: block; text-align: center; } diff --git a/modules/ui_gallery.py b/modules/ui_gallery.py index d76373d41..6ab9b0630 100644 --- a/modules/ui_gallery.py +++ b/modules/ui_gallery.py @@ -17,8 +17,8 @@ def read_media(fn):

Video {w} x {h} | Codec {codec} | Frames {frames:,} - | FPS {fps} - | Duration {duration:,} + | FPS {fps:.2f} + | Duration {duration:.2f} | Size {stat.st_size:,} | Modified {datetime.fromtimestamp(stat.st_mtime)}


''' @@ -41,14 +41,14 @@ def create_ui(): with gr.Blocks() as tab: with gr.Row(): sort_buttons = [] - sort_buttons.append(ToolButton(value=ui_symbols.sort_alpha_asc, show_label=False)) - sort_buttons.append(ToolButton(value=ui_symbols.sort_alpha_dsc, show_label=False)) - sort_buttons.append(ToolButton(value=ui_symbols.sort_size_asc, show_label=False)) - sort_buttons.append(ToolButton(value=ui_symbols.sort_size_dsc, show_label=False)) - sort_buttons.append(ToolButton(value=ui_symbols.sort_num_asc, show_label=False)) - sort_buttons.append(ToolButton(value=ui_symbols.sort_num_dsc, show_label=False)) - sort_buttons.append(ToolButton(value=ui_symbols.sort_time_asc, show_label=False)) - sort_buttons.append(ToolButton(value=ui_symbols.sort_time_dsc, show_label=False)) + sort_buttons.append(ToolButton(value=ui_symbols.sort_alpha_asc, show_label=False, elem_classes=['gallery-sort'])) + sort_buttons.append(ToolButton(value=ui_symbols.sort_alpha_dsc, show_label=False, elem_classes=['gallery-sort'])) + sort_buttons.append(ToolButton(value=ui_symbols.sort_size_asc, show_label=False, elem_classes=['gallery-sort'])) + sort_buttons.append(ToolButton(value=ui_symbols.sort_size_dsc, show_label=False, elem_classes=['gallery-sort'])) + sort_buttons.append(ToolButton(value=ui_symbols.sort_num_asc, show_label=False, elem_classes=['gallery-sort'])) + sort_buttons.append(ToolButton(value=ui_symbols.sort_num_dsc, show_label=False, elem_classes=['gallery-sort'])) + sort_buttons.append(ToolButton(value=ui_symbols.sort_time_asc, show_label=False, elem_classes=['gallery-sort'])) + sort_buttons.append(ToolButton(value=ui_symbols.sort_time_dsc, show_label=False, elem_classes=['gallery-sort'])) gr.Textbox(show_label=False, placeholder='Search', elem_id='tab-gallery-search') gr.HTML('', elem_id='tab-gallery-status') for btn in sort_buttons: