From 2d82bc67d4a986764fb4235bf426d452ebd8bcb0 Mon Sep 17 00:00:00 2001
From: Alex Heller <st162467@stud.uni-stuttgart.de>
Date: Mon, 1 May 2023 03:38:44 +0200
Subject: [PATCH] Changed modification indicator to button element

The setting value now resets to previous when clicking on the indicator.
Furthermore, when hovering over the indicator it also shows what the last value was.
---
 javascript/ui.js | 10 +++++++---
 modules/ui.py    | 14 +++++++++++++-
 style.css        | 23 +++++++++++++----------
 3 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/javascript/ui.js b/javascript/ui.js
index 867ccdc7e..43596be3a 100644
--- a/javascript/ui.js
+++ b/javascript/ui.js
@@ -258,11 +258,15 @@ onOptionsChanged(function(){
 })
 
 function markIfModified(setting_name, value) {
-    elem = gradioApp().getElementById("setting_"+setting_name)
+    elem = gradioApp().getElementById("modification_indicator_"+setting_name)
     if(elem == null) return;
     // Use JSON.stringify to compare nested objects (e.g. arrays for checkbox-groups)
-    let is_new_value = JSON.stringify(value) != JSON.stringify(opts[setting_name])
-    elem.classList.toggle("modified", is_new_value)
+    let previous_value_json = JSON.stringify(opts[setting_name])
+    let is_new_value = JSON.stringify(value) != previous_value_json
+    elem.disabled = !is_new_value
+    if (is_new_value) {
+        elem.title = `Changed from previous value: ${previous_value_json}`
+    }
 }
 
 let txt2img_textarea, img2img_textarea = undefined;
diff --git a/modules/ui.py b/modules/ui.py
index 72164b5df..d31adcbf7 100644
--- a/modules/ui.py
+++ b/modules/ui.py
@@ -1212,6 +1212,16 @@ def create_ui():
         else:
             raise ValueError(f'bad options item type: {str(t)} for key {key}')
         elem_id = "setting_"+key
+
+        if not is_quicksettings:
+            dirtyable_setting = gr.Group(elem_classes="dirtyable")
+            dirtyable_setting.__enter__()
+            dirty_indicator = gr.Button(
+                "",
+                elem_classes="modification-indicator",
+                elem_id="modification_indicator_" + key
+            )
+
         if info.refresh is not None:
             if is_quicksettings:
                 res = comp(label=info.label, value=fun(), elem_id=elem_id, **(args or {}))
@@ -1224,7 +1234,9 @@ def create_ui():
             res = comp(label=info.label, value=fun(), elem_id=elem_id, **(args or {}))
 
         if not is_quicksettings:
-            res.change(fn=None, inputs=res, outputs=[], _js=f'(val) => markIfModified("{key}", val)')
+            res.change(fn=None, inputs=res, _js=f'(val) => markIfModified("{key}", val)')
+            dirty_indicator.click(fn=None, outputs=res, _js=f'() => opts["{key}"]')
+            dirtyable_setting.__exit__()
 
         return res
 
diff --git a/style.css b/style.css
index 8327bb1cc..ac0bf75ae 100644
--- a/style.css
+++ b/style.css
@@ -244,19 +244,22 @@ div#extras_scale_to_tab div.form{
     margin-top: 0;
 }
 
-#settings [id^="setting_"] {
-    margin-left: 1.2em;
+#settings .dirtyable {
+    display: grid;
+    grid-template-columns: .3em auto;
+    gap: .5em;
 }
 
-#settings [id^="setting_"].modified::before {
-    content: "";
-    width: .25em;
-    position: absolute;
+#settings .modification-indicator {
+    width: 100%;
     height: 100%;
-    left: -.75em;
-    background-color: var(--color-accent);
-    background-clip: content-box;
-    border-radius: 1em;
+    background: var(--color-accent);
+    border-radius: 1em !important;
+    padding: 0;
+}
+
+#settings .modification-indicator:disabled {
+    visibility: hidden;
 }
 
 #settings_result{