diff --git a/javascript/ui.js b/javascript/ui.js index 27acf1ae5..fd2ed1ee3 100644 --- a/javascript/ui.js +++ b/javascript/ui.js @@ -259,6 +259,26 @@ onOptionsChanged(function(){ }) }) +onUiLoaded(function(){ + tab_nav_element = gradioApp().querySelector('#settings > .tab-nav') + tab_nav_buttons = gradioApp().querySelectorAll('#settings > .tab-nav > button') + tab_elements = gradioApp().querySelectorAll('#settings > [id^="settings_"]') + + tab_elements.forEach(function(elem, index){ + // Add a modification indicator to the toplevel tab button + let new_indicator = document.createElement('button') + new_indicator.id = "modification_indicator_"+elem.id.replace("setting_", "") + new_indicator.className = "modification-indicator" + new_indicator.disabled = true + + // Add a modification indicator to the toplevel tab button + tab_nav_element.insertBefore(new_indicator, tab_nav_buttons[index]) + }) + // Add the dirtyable class to the tab nav element + tab_nav_element.classList.add('dirtyable') +}) + + function markIfModified(setting_name, value) { elem = gradioApp().getElementById("modification_indicator_"+setting_name) if(elem == null) return; diff --git a/style.css b/style.css index ffb8f2dbe..1d0d8b030 100644 --- a/style.css +++ b/style.css @@ -219,14 +219,14 @@ div#extras_scale_to_tab div.form{ #settings > div{ border: none; - margin-left: 10em; + margin-left: 11em; } #settings > div.tab-nav{ float: left; - display: block; margin-left: 0; - width: 10em; + display: grid; + grid-template-columns: .3em 10em; } #settings > div.tab-nav button{ @@ -234,10 +234,16 @@ div#extras_scale_to_tab div.form{ border: none; text-align: left; white-space: initial; + padding: 0; +} + +#settings > div.tab-nav > #settings_show_all_pages { + grid-column: 2; + padding: var(--size-2) var(--size-4); } #settings > div.tabitem { - padding-top: var(--size-1); + padding-top: 0; } #settings .block.gradio-checkbox {