diff --git a/ui/index.html b/ui/index.html index b42f7406..0ad1c795 100644 --- a/ui/index.html +++ b/ui/index.html @@ -389,6 +389,8 @@ const USE_CPU_KEY = "useCPU" const USE_FULL_PRECISION_KEY = "useFullPrecision" const USE_TURBO_MODE_KEY = "useTurboMode" const DISK_PATH_KEY = "diskPath" +const ADVANCED_PANEL_OPEN_KEY = "advancedPanelOpen" +const MODIFIERS_PANEL_OPEN_KEY = "modifiersPanelOpen" const HEALTH_PING_INTERVAL = 5 // seconds const MAX_INIT_IMAGE_DIMENSION = 768 @@ -443,6 +445,9 @@ let soundToggle = document.querySelector('#sound_toggle') let serverStatusColor = document.querySelector('#server-status-color') let serverStatusMsg = document.querySelector('#server-status-msg') +let advancedPanelHandle = document.querySelector("#editor-settings .collapsible") +let modifiersPanelHandle = document.querySelector("#editor-modifiers .collapsible") + let serverStatus = 'offline' let activeTags = [] let lastPromptUsed = '' @@ -501,6 +506,14 @@ function getSavedDiskPath() { return getLocalStorageItem(DISK_PATH_KEY, '') } +function isAdvancedPanelOpenEnabled() { + return getLocalStorageBoolItem(ADVANCED_PANEL_OPEN_KEY, false) +} + +function isModifiersPanelOpenEnabled() { + return getLocalStorageBoolItem(MODIFIERS_PANEL_OPEN_KEY, false) +} + function setStatus(statusType, msg, msgType) { if (statusType !== 'server') { return; @@ -863,6 +876,20 @@ saveToDiskField.addEventListener('click', function(e) { handleBoolSettingChange(SAVE_TO_DISK_KEY)(e) }) +function setPanelOpen(panelHandle) { + let panelContents = panelHandle.nextElementSibling + panelHandle.classList.add('active') + panelContents.style.display = 'block' +} + +if (isAdvancedPanelOpenEnabled()) { + setPanelOpen(advancedPanelHandle) +} + +if (isModifiersPanelOpenEnabled()) { + setPanelOpen(modifiersPanelHandle) +} + makeImageBtn.addEventListener('click', makeImage) @@ -970,7 +997,12 @@ function createCollapsibles(node) { collapsibles.forEach(function(c) { let handle = document.createElement('span') handle.className = 'collapsible-handle' - handle.innerHTML = '➕' + + if (c.className.indexOf('active') !== -1) { + handle.innerHTML = '➖' // minus + } else { + handle.innerHTML = '➕' // plus + } c.insertBefore(handle, c.firstChild) c.addEventListener('click', function() { @@ -983,6 +1015,14 @@ function createCollapsibles(node) { content.style.display = "block" handle.innerHTML = '➖' // minus } + + if (this == advancedPanelHandle) { + let state = (content.style.display === 'block' ? 'true' : 'false') + localStorage.setItem(ADVANCED_PANEL_OPEN_KEY, state) + } else if (this == modifiersPanelHandle) { + let state = (content.style.display === 'block' ? 'true' : 'false') + localStorage.setItem(MODIFIERS_PANEL_OPEN_KEY, state) + } }) }) }