add compact view

.eslintrc.json

@@ -69,6 +69,7 @@
     "create_submit_args": "readonly",
     "restart_reload": "readonly",
     "updateInput": "readonly",
+    "toggleCompact": "readonly",
     // settings.js
     "register_drag_drop": "readonly",
     //extraNetworks.js

CHANGELOG.md

@@ -24,6 +24,7 @@ Upgrades are still possible and supported, but above is recommended for best exp
     see *System -> User interface -> Set menu states*  
   - new built-in theme **invokeai**  
     thanks @BinaryQuantumSoul
+  - add **compact view** option in settings -> user interface  
   - small visual indicator bottom right of page showing internal server job state  
 - **Extra networks**:  
   - **Details**

javascript/logMonitor.js

@@ -54,6 +54,7 @@ async function initLogMonitor() {
   el.style.display = 'none';
   jobStatusEl = document.createElement('div');
   jobStatusEl.className = 'jobStatus';
+  jobStatusEl.style.display = 'none';
   gradioApp().appendChild(jobStatusEl);
   fetch(`/sdapi/v1/start?agent=${encodeURI(navigator.userAgent)}`);
   logMonitor();

javascript/settings.js

@@ -6,6 +6,10 @@ const monitoredOpts = [
   { sd_backend: () => gradioApp().getElementById('refresh_sd_model_checkpoint')?.click() },
 ];
 
+const AppyOpts = [
+  { compact_view: (val) => toggleCompact(val) },
+];
+
 function updateOpts(json_string) {
   const settings_data = JSON.parse(json_string);
   for (const op of monitoredOpts) {
@@ -16,6 +20,11 @@ function updateOpts(json_string) {
       if (callback) callback();
     }
   }
+  for (const op of AppyOpts) {
+    const key = Object.keys(op)[0];
+    const callback = op[key];
+    if (callback) callback(settings_data.values[key]);
+  }
   opts = settings_data.values;
   opts_metadata = settings_data.metadata;
   Object.entries(opts_metadata).forEach(([opt, meta]) => {

javascript/style.css

@@ -34,6 +34,8 @@ div.gradio-html.min{ min-height: 0; }
 .small-accordion .label-wrap { padding: 16px 0px 8px 0px; margin: 0; border-top: 2px solid var(--button-secondary-border-color); }
 .small-accordion .label-wrap .icon { margin-right: 1.6em; margin-left: 0.6em; color: var(--button-primary-border-color); }
 .hidden { display: none; }
+.form-compact { margin-bottom: 0 !important; gap: 0.2em 1em !important; }
+.accordion-compact { padding: 8px 0px 4px 0px !important; }
 .flex-break { flex-basis: 100% !important; }
 footer { display: none; }
 table { overflow-x: auto !important; overflow-y: auto !important; }

javascript/ui.js

@@ -370,6 +370,21 @@ function create_theme_element() {
   return el;
 }
 
+function toggleCompact(val) {
+  log('toggleCompact', val);
+  if (val) {
+    gradioApp().style.setProperty('--layout-gap', 'var(--spacing-md)');
+    gradioApp().querySelectorAll('input[type=range]').forEach((el) => el.classList.add('hidden'));
+    gradioApp().querySelectorAll('div .form').forEach((el) => el.classList.add('form-compact'));
+    gradioApp().querySelectorAll('.small-accordion .label-wrap').forEach((el) => el.classList.add('accordion-compact'));
+  } else {
+    gradioApp().style.setProperty('--layout-gap', 'var(--spacing-xxl)');
+    gradioApp().querySelectorAll('input[type=range]').forEach((el) => el.classList.remove('hidden'));
+    gradioApp().querySelectorAll('div .form').forEach((el) => el.classList.remove('form-compact'));
+    gradioApp().querySelectorAll('.small-accordion .label-wrap').forEach((el) => el.classList.remove('accordion-compact'));
+  }
+}
+
 function previewTheme() {
   let name = gradioApp().getElementById('setting_gradio_theme').querySelectorAll('input')?.[0].value || '';
   fetch('/file=html/themes.json').then((res) => {

modules/shared.py

@@ -545,6 +545,7 @@ options_templates.update(options_section(('ui', "User Interface"), {
     "gradio_theme": OptionInfo("black-teal", "UI theme", gr.Dropdown, lambda: {"choices": list_themes()}, refresh=refresh_themes),
     "theme_style": OptionInfo("Auto", "Theme mode", gr.Radio, {"choices": ["Auto", "Dark", "Light"]}),
     "tooltips": OptionInfo("UI Tooltips", "UI tooltips", gr.Radio, {"choices": ["None", "Browser default", "UI tooltips"], "visible": False}),
+    "compact_view": OptionInfo(True, "Compact view"),
     "return_grid": OptionInfo(True, "Show grid in results"),
     "return_mask": OptionInfo(False, "For inpainting, include the greyscale mask in results"),
     "return_mask_composite": OptionInfo(False, "For inpainting, include masked composite in results"),