enhance before flash readme ui display (#67)

Co-authored-by: Rushikesh Patange <[email protected]>
espressif · Aug 1, 2024 · 9ab150d · 9ab150d
1 parent 34b1cf1
commit 9ab150d
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 44 deletions.
diff --git 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
@@ -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
@@ -230,8 +230,17 @@ <h5 class="pt-4 pb-2 lh-lg"><span id="qtLabel">Choose from some of ESP's pre-bui
                             <div class="field-container" title="Click on 'Connect' button in top Menu" style="display:inline-block" data-toggle="tooltip" id="flashWrapper">
                                 <button class="app-button submit-form-button btn btn-outline-dark" id="flashButton" disabled>Flash</button>
                             </div>
+                            <div id="appInfoTriggerContainer" class="field-container app-info-trigger-container" style="display: none;">
+                                <a href="#" role="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Show Application Information</a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="offcanvas offcanvas-end w-50" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
+                        <div class="offcanvas-header">
+                          <h2 id="offcanvasRightLabel">Application Information</h2>
+                          <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                         </div>
-                        <div class="appinfocontainer col-6" id="appInfoContainer" style="display:none;">
+                        <div class="offcanvas-body">
                             <div id="appInfo"></div>
                         </div>
                     </div>

diff --git 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();
+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
+})