From 7f6daf562cc62e44aa7e81c7336e6e7fe6c83037 Mon Sep 17 00:00:00 2001
From: Philipp Schaad <schaad.phil@gmail.com>
Date: Tue, 18 Oct 2022 14:26:28 +0200
Subject: [PATCH] Improve positioning of info tray and related controls

Closes #202.
---
 media/components/sdfv/index.html              |  2 +-
 src/components/sdfg_viewer.ts                 |  4 +++
 .../components/sdfv/vscode_sdfv.css           | 10 ++++++-
 src/webclients/components/sdfv/vscode_sdfv.ts | 28 +++++++++++++++++--
 4 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/media/components/sdfv/index.html b/media/components/sdfv/index.html
index 2b7b945..1b02a72 100644
--- a/media/components/sdfv/index.html
+++ b/media/components/sdfv/index.html
@@ -165,7 +165,7 @@
                 </div>
             </div>
         </div>
-        <div id="expand-info-btn" title="Expand Tray">
+        <div id="expand-info-btn" title="Expand Tray" class="expand-info-btn-top">
             <span><i class="material-icons">menu_open</i></span>
         </div>
     </div>
diff --git a/src/components/sdfg_viewer.ts b/src/components/sdfg_viewer.ts
index 03f156f..7336493 100644
--- a/src/components/sdfg_viewer.ts
+++ b/src/components/sdfg_viewer.ts
@@ -556,6 +556,10 @@ export class SdfgViewerProvider
                 'offcanvas offcanvas-end',
                 'offcanvas offcanvas-bottom'
             );
+            baseHtml = baseHtml.replace(
+                'expand-info-btn-top',
+                'expand-info-btn-bottom'
+            );
             baseHtml = baseHtml.replace(
                 'id="layout-toggle-btn" class="vertical"',
                 'id="layout-toggle-btn" class="horizontal"'
diff --git a/src/webclients/components/sdfv/vscode_sdfv.css b/src/webclients/components/sdfv/vscode_sdfv.css
index 95ad3bb..78ec617 100644
--- a/src/webclients/components/sdfv/vscode_sdfv.css
+++ b/src/webclients/components/sdfv/vscode_sdfv.css
@@ -311,9 +311,17 @@ pre.code {
 #expand-info-btn {
   cursor: pointer;
   position: absolute;
+  margin: .4rem;
+}
+
+#expand-info-btn.expand-info-btn-top {
+  top: 0;
+  right: 0;
+}
+
+#expand-info-btn.expand-info-btn-bottom {
   bottom: 0;
   right: 0;
-  margin: .4rem;
 }
 
 #info-contents {
diff --git a/src/webclients/components/sdfv/vscode_sdfv.ts b/src/webclients/components/sdfv/vscode_sdfv.ts
index eeaed08..7a7afce 100644
--- a/src/webclients/components/sdfv/vscode_sdfv.ts
+++ b/src/webclients/components/sdfv/vscode_sdfv.ts
@@ -165,8 +165,11 @@ export class VSCodeSDFV extends SDFV {
      * Show the info box and its necessary components.
      */
     public infoBoxShow(overrideHidden: boolean = false): void {
-        if (!this.infoTrayExplicitlyHidden || overrideHidden)
-            $('#info-container').addClass('show');
+        if (!this.infoTrayExplicitlyHidden || overrideHidden) {
+            const infoBox = $('#info-container');
+            infoBoxCheckUncoverTopBar(infoBox, $('#top-bar'));
+            infoBox.addClass('show');
+        }
     }
 
     /**
@@ -856,12 +859,26 @@ export function vscodeHandleEvent(event: string, data: any): void {
     }
 }
 
+function infoBoxCheckUncoverTopBar(
+    infoContainer: JQuery<HTMLElement>, topBar: JQuery<HTMLElement>
+): void {
+    // If the info container is to the side, ensure it doesn't cover up the
+    // top bar when shown.
+    if (infoContainer.hasClass('offcanvas-end')) {
+        const topBarHeight = topBar.outerHeight(false);
+        infoContainer.css('top', topBarHeight + 'px');
+    } else {
+        infoContainer.css('top', '');
+    }
+}
+
 $(() => {
     const infoContainer = $('#info-container');
     const layoutToggleBtn = $('#layout-toggle-btn');
     const infoDragBar = $('#info-drag-bar');
     const expandInfoBtn = $('#expand-info-btn');
     const infoCloseBtn = $('#info-close-btn');
+    const topBar = $('#top-bar');
 
     // Set up resizing of the info drawer.
     let draggingDragInfoBar = false;
@@ -912,8 +929,11 @@ $(() => {
         if (oldDir === 'vertical') {
             infoContainer.removeClass('offcanvas-end');
             infoContainer.addClass('offcanvas-bottom');
+            infoBoxCheckUncoverTopBar(infoContainer, topBar);
             infoDragBar.removeClass('gutter-vertical');
             infoDragBar.addClass('gutter-horizontal');
+            expandInfoBtn.removeClass('expand-info-btn-top');
+            expandInfoBtn.addClass('expand-info-btn-bottom');
             $(document).off('mousemove', infoChangeWidthHandler);
             $(document).on('mousemove', infoChangeHeightHandler);
             infoContainer.width('100%');
@@ -921,8 +941,11 @@ $(() => {
         } else {
             infoContainer.removeClass('offcanvas-bottom');
             infoContainer.addClass('offcanvas-end');
+            infoBoxCheckUncoverTopBar(infoContainer, topBar);
             infoDragBar.removeClass('gutter-horizontal');
             infoDragBar.addClass('gutter-vertical');
+            expandInfoBtn.removeClass('expand-info-btn-bottom');
+            expandInfoBtn.addClass('expand-info-btn-top');
             $(document).off('mousemove', infoChangeHeightHandler);
             $(document).on('mousemove', infoChangeWidthHandler);
             infoContainer.height('100%');
@@ -942,6 +965,7 @@ $(() => {
     });
     expandInfoBtn.on('click', () => {
         expandInfoBtn.hide();
+        infoBoxCheckUncoverTopBar(infoContainer, topBar);
         infoContainer.addClass('show');
         VSCodeSDFV.getInstance().infoTrayExplicitlyHidden = false;
     });