From 9ab150d7b32e4836fc3a33bcd9a00a1cfb1638c1 Mon Sep 17 00:00:00 2001 From: Rushikesh Patange <90703337+RushikeshPatange@users.noreply.github.com> Date: Thu, 1 Aug 2024 17:32:46 +0530 Subject: [PATCH] enhance before flash readme ui display (#67) Co-authored-by: Rushikesh Patange --- css/custom.css | 11 +++++----- css/styles.css | 2 +- index.html | 11 +++++++++- js/index.js | 55 +++++++++++++++++--------------------------------- 4 files changed, 35 insertions(+), 44 deletions(-) diff --git a/css/custom.css b/css/custom.css index f77733d..717c405 100644 --- a/css/custom.css +++ b/css/custom.css @@ -260,12 +260,6 @@ td img { word-wrap: break-word; } -.appinfocontainer { - max-height: 600px; - overflow-y: auto; - margin-top: 3rem; - width: 100%; -} .appinfo-flash-container { max-height: 600px; @@ -278,6 +272,11 @@ td img { max-height: 20rem; } +.app-info-trigger-container { + padding-top: 14px; + margin-left: 18px; +} + @media (min-width: 1400px) { .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 1320px; diff --git a/css/styles.css b/css/styles.css index 0a57079..e784db1 100644 --- a/css/styles.css +++ b/css/styles.css @@ -6323,7 +6323,7 @@ textarea.form-control-lg { .offcanvas-header { display: flex; - align-items: center; + align-items: flex-start; justify-content: space-between; padding: 1rem 1rem; } diff --git a/index.html b/index.html index c4ef0e0..fb931df 100644 --- a/index.html +++ b/index.html @@ -230,8 +230,17 @@
Choose from some of ESP's pre-bui
+ + + +
+
+

Application Information

+
- diff --git a/js/index.js b/js/index.js index 3dc7ae1..aeb7e5c 100644 --- a/js/index.js +++ b/js/index.js @@ -29,7 +29,6 @@ const setupLogoContainer = document.getElementById("setupLogoContainer"); const setupLogoContainerQS = document.getElementById("setupLogoContainerQS"); const appDescriptionContainer = document.getElementById("appDescriptionContainer"); const appDescription = document.getElementById("appDescription"); -const appInfoContainer = document.getElementById("appInfoContainer"); const appInfoFlashContainer = document.getElementById("appInfoFlashContainer"); const terminalContainer = document.getElementById("terminalContainer"); const appInfo = document.getElementById("appInfo"); @@ -39,6 +38,8 @@ const appConfigInfoContainer = document.getElementById("appConfigInfoContainer") const appConfigInfo = document.getElementById("appConfigInfo"); const progressMsgContainerQS = document.getElementById("progressMsgContainerQS"); const developKitsContainer = document.getElementById("developKitsContainer"); +const appInfoTriggerContainer = document.getElementById("appInfoTriggerContainer"); +const rightOffCanvasContainer = document.getElementById("offcanvasRight"); let resizeTimeout = false; @@ -175,17 +176,9 @@ async function buildQuickTryUI_v1_0() { let mdContent = await response.text(); let htmlText = utilities.mdToHtmlConverter(mdContent); + appInfoTriggerContainer.style.display = ''; appInfo.innerHTML = htmlText; - appInfoContainer.style.display = "block"; - appInfoContainer.classList.add("slide-up"); - setTimeout(() => { - appInfoContainer.classList.add("bounce"); - }, 2500); - - setTimeout(() => { - clearAppInfoHistory("handleFlashCleanup"); - }, 5000); utilities.resizeTerminal(fitAddon); } @@ -363,18 +356,9 @@ $('#device').on('change', function() { let htmlText = utilities.mdToHtmlConverter(mdContent); appInfo.innerHTML = htmlText; - appInfoContainer.style.display = "block"; - appInfoContainer.classList.add("slide-up"); - - setTimeout(() => { - appInfoContainer.classList.add("bounce"); - }, 2500); - - setTimeout(() => { - clearAppInfoHistory("handleFlashCleanup"); - }, 5000); utilities.resizeTerminal(fitAddon); + appInfoTriggerContainer.style.display = ''; }) .catch(error => { console.error('Error fetching data:', error); @@ -383,7 +367,7 @@ $('#device').on('change', function() { } else { markdown_payload_url = ""; - clearAppInfoHistory(); + appInfoTriggerContainer.style.display = 'none'; } if (config[deviceTypeSelect.value].console_baudrate) { @@ -834,18 +818,6 @@ function cleanUpOldFlashHistory() { } -function clearAppInfoHistory(triggeringAction = "") { - switch (triggeringAction) { - case "handleFlashCleanup": - appInfoContainer.classList.remove("slide-up", "bounce"); - break; - default: - appInfo.innerHTML = ""; - appInfoContainer.style.display = "none"; - appInfoContainer.classList.remove("slide-up", "bounce"); - break; - } -} function clearAppInfoFlashHistory(triggeringAction = "") { switch (triggeringAction) { @@ -962,12 +934,10 @@ function removeClassesOnMediaQuery() { const mediaQuery = window.matchMedia("(max-width: 992px)"); function handleMediaQueryChange(mediaQuery) { if (mediaQuery.matches) { - appInfoContainer.classList.remove("col-6"); appInfoFlashContainer.classList.remove("col-6"); terminalContainer.classList.remove("col-6"); consolePageWrapper.classList.add("flex-column-reverse"); } else { - appInfoContainer.classList.add("col-6"); appInfoFlashContainer.classList.add("col-6"); terminalContainer.classList.add("col-6"); consolePageWrapper.classList.remove("flex-column-reverse"); @@ -977,4 +947,17 @@ function removeClassesOnMediaQuery() { mediaQuery.addListener(handleMediaQueryChange); } -removeClassesOnMediaQuery(); \ No newline at end of file +removeClassesOnMediaQuery(); + +const mutationObserverCallback = (mutationList) => { + mutationList.forEach((mutation) => { + if (mutation.type === 'attributes' && mutation.attributeName === 'class') { + appInfoTriggerContainer.style.display = Array.from(mutation.target.classList).includes('show') ? 'none' : ''; + } + }) +} + +const classChangeObserver = new MutationObserver(mutationObserverCallback) +classChangeObserver.observe(rightOffCanvasContainer, { + attributes: true +}) \ No newline at end of file