Added visual toplevel setting change indicators

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;

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 {