✨ 💄 UI-fix: add edit/insert mode visual cues & change highlight mode …

…menu & jump to view for display info

assets/style.css

@@ -260,6 +260,22 @@ a:hover {
     align-items: center;
     justify-content: space-between;
 }
+.panel-heading.focused {
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    /* background-color: #b6d8f2; */
+}
+.panel-heading-title {
+    max-width: 0px;
+    overflow: visible;
+    border-bottom: 2px solid transparent;
+    transition: max-width 0.5s ease-in-out, border-bottom 0.1s ease-in-out;
+}
+.panel-heading-title.focused {
+    max-width: 500px;
+    border-bottom: 2px solid #589ed5;
+    overflow: visible;
+}
 .panel-contents {
     max-height: 60vh;
     transition: max-height 0.2s ease-in-out;
@@ -391,6 +407,9 @@ a:hover {
 .side-panel-btn.is-active {
     border: 2px solid #7cb1b7;
 }
+.side-panel-btn.is-active.unfocused {
+    border: 1px solid #7cb1b7;
+}
 .panel-tabs {
     border: none !important;
     align-items: flex-end;
@@ -455,7 +474,8 @@ a:hover {
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
+    min-height: 60vh;
 }
 .info-bubble-container {
     width: 100%;

src/DisplayPanel/DisplayControls.ts

@@ -318,25 +318,26 @@ export function initDisplayControls (meiClassName: string, background: string):
 
   const displayContents = document.getElementById('displayContents');
   const toggleDisplay = document.getElementById('toggleDisplay');
+  const displayHeader = document.getElementById('displayHeader');
 
-  document.getElementById('displayHeader').addEventListener('click', () => {
+  displayHeader.addEventListener('click', () => {
+    // if display panel is closed, open it
     if (displayContents.classList.contains('closed')) {
-
       displayContents.classList.remove('closed');
       displayContents.style.padding = '0.5em 0.75em';
       setTimeout(() => {
         displayContents.style.overflow = 'visible';
       }, 200);
-      toggleDisplay.setAttribute('xlink:href', __ASSET_PREFIX__ + 'assets/img/icons.svg' + '#dropdown-down');
-
-    } else {
-
+      toggleDisplay.setAttribute('xlink:href', `${__ASSET_PREFIX__}assets/img/icons.svg#dropdown-down`);
+    } 
+    // if display panel is open, close it
+    else {
       displayContents.classList.add('closed');
       displayContents.style.overflow = 'hidden';
       setTimeout(() => {
         displayContents.style.padding = '0px';
       }, 200);
-      toggleDisplay.setAttribute('xlink:href', __ASSET_PREFIX__ + 'assets/img/icons.svg' + '#dropdown-side');
+      toggleDisplay.setAttribute('xlink:href', `${__ASSET_PREFIX__}assets/img/icons.svg#dropdown-side`);
 
     }
   });

src/DisplayPanel/DisplayPanel.ts

@@ -9,11 +9,12 @@ import { DisplayInterface, ViewInterface } from '../Interfaces';
  */
 function displayControlsPanel (handleZoom: ZoomHandler): string {
   let contents = `
-    <p class="panel-heading" id="displayHeader">DISPLAY
+    <div class="panel-heading" id="displayHeader">
+      <div class="panel-heading-title">DISPLAY</div>
       <svg class="icon is-pulled-right">
         <use id="toggleDisplay" class="panel-dropdown-icon" xlink:href="${__ASSET_PREFIX__}assets/img/icons.svg#dropdown-down"></use>
       </svg>
-    </p>
+    </div>
     <div id="displayContents" class="panel-contents">
       <div class="panel-content-subsection first-subsection">
   `;

src/InfoModule.ts

@@ -14,7 +14,8 @@ const neumeGroups = new Map(
 );
 
 function startInfoVisibility (): void {
-  document.getElementById('neume_info').innerHTML =
+  const neumeInfo = document.getElementById('neume_info');
+  neumeInfo.innerHTML =
     `<div class="info-bubble-container">
       <div class="info-bubble-header">Element Info</div>
       <div class="info-bubble-body"><i>Hover over any element to see its metadata</i></div>
@@ -29,6 +30,8 @@ function updateInfoVisibility (): void {
   const neumeInfo = document.getElementById('neume_info');
   if ((document.getElementById('displayInfo') as HTMLInputElement).checked) {
     neumeInfo.setAttribute('style', '');
+    // scroll neume info into view
+    neumeInfo.scrollIntoView({ behavior: 'smooth' });
   } else {
     neumeInfo.setAttribute('style', 'display: none');
   }

src/SquareEdit/Contents.ts

@@ -30,9 +30,6 @@ export const insertTabHtml: Record<string, string> = {
         <p class="insert-element-container">
             <button id="liquescentC" class="side-panel-btn insertel smallel" aria-label="Liquescent C" title="Liquescent C"><img src="${__ASSET_PREFIX__}assets/img/liquescentC.png" class="image"></button>
         </p>
-        <p class="insert-element-container">
-            <button id="virgaReversed" class="side-panel-btn insertel smallel" aria-label="Reversed Virga" title="Reversed Virga"><img src="${__ASSET_PREFIX__}assets/img/virga_reversed.png" class="image"></button>
-        </p>
         <p class="insert-element-container">
             <button id="flat" class="side-panel-btn insertel smallel" aria-label="Flat" title="Flat"><img src="${__ASSET_PREFIX__}assets/img/accidFlat.png" class="image"></button>
         </p>
@@ -83,9 +80,12 @@ export const insertTabHtml: Record<string, string> = {
  * Structure of insert panel with basic grouping tabs.
  */
 export const insertControlsPanel =
-    `<p class="panel-heading" id="insertMenu">INSERT
-        <svg class="icon is-pulled-right"><use id="toggleInsert" xlink:href="${__ASSET_PREFIX__}assets/img/icons.svg#dropdown-down"></use></svg>
-    </p>
+    `<div class="panel-heading" id="insertMenu">
+        <div class="panel-heading-title">INSERT</div>
+        <svg class="icon is-pulled-right">
+            <use id="toggleInsert" xlink:href="${__ASSET_PREFIX__}assets/img/icons.svg#dropdown-down"></use>
+        </svg>
+    </div>
 	<div class="panel-content-subsection first-subsection">
         <div id="insertContents" class="panel-contents" style="overflow-y: hidden;">
             <p class="panel-tabs">
@@ -101,11 +101,12 @@ export const insertControlsPanel =
  * Contents of edit panel with buttons.
  */
 export const editControlsPanel =
-    `<p class="panel-heading" id="editMenu">EDIT
+    `<div class="panel-heading" id="editMenu">
+        <div class="panel-heading-title focused">EDIT</div>
         <svg class="icon is-pulled-right">
             <use id="toggleEdit" xlink:href="${__ASSET_PREFIX__}assets/img/icons.svg#dropdown-down"></use>
         </svg>
-    </p>
+    </div>
     <div id="editContents" class="panel-contents">
         <div class="panel-content-subsection first-subsection">
             <div id="selection-mode-container">

src/SquareEdit/Controls.ts

@@ -45,47 +45,85 @@ export function bindInsertTabs (insertHandler: InsertHandler): void {
  * Initialize Edit and Insert control panels.
  */
 export function initInsertEditControls (): void {
+
+  const insertPanel = document.getElementById('insert_controls');
   const insertHeading = document.getElementById('insertMenu');
+  const insertHeadingTitle = insertHeading.querySelector('.panel-heading-title');
   const insertContents = document.getElementById('insertContents');
   const insertDropdownIcon = insertHeading.querySelector('svg > use');
 
+  const editPanel = document.getElementById('edit_controls');
   const editHeading = document.getElementById('editMenu');
+  const displayHeadingTitle = editHeading.querySelector('.panel-heading-title');
   const editContents = document.getElementById('editContents');
   const editDropdownIcon = editHeading.querySelector('svg > use');
 
+
+  // event listener for when user clicks inside Insert panel
+  // insert mode is activated
+  insertPanel.addEventListener('click', () => {
+    displayHeadingTitle.classList.remove('focused');
+    insertHeadingTitle.classList.add('focused');
+
+    (<HTMLButtonElement> document.querySelector('.insertel.is-active')).click();
+    editPanel.querySelector('.side-panel-btn.sel-by.is-active').classList.add('unfocused');
+    insertPanel.querySelector('.side-panel-btn.insertel.is-active').classList.remove('unfocused');
+  });
+
+  // event listener for when user clicks inside Edit panel
+  // edit mode is activated
+  editPanel.addEventListener('click', () => {
+    insertHeadingTitle.classList.remove('focused');
+    displayHeadingTitle.classList.add('focused');
+
+    insertPanel.querySelector('.side-panel-btn.insertel.is-active').classList.add('unfocused');
+    editPanel.querySelector('.side-panel-btn.sel-by.is-active').classList.remove('unfocused');
+  });
+
+
   insertHeading.addEventListener('click', () => {
+    // if insert panel is closed, open it
     if (insertContents.classList.contains('closed')) {
+      // set classes and styles for an open panel
       insertContents.classList.remove('closed');
       insertContents.style.padding = '0.5em 0.75em';
       setTimeout(() => {
         insertContents.style.overflow = 'visible';
       }, 200);
-      insertDropdownIcon.setAttribute('xlink:href', __ASSET_PREFIX__ + 'assets/img/icons.svg' + '#dropdown-down');
-    } else {
+      insertDropdownIcon.setAttribute('xlink:href', `${__ASSET_PREFIX__}assets/img/icons.svg#dropdown-down`);
+    } 
+    // if insert panel is open, close it
+    else {
+      // set classes and styles for a closed panel
       insertContents.classList.add('closed');
       insertContents.style.overflow = 'hidden';
       setTimeout(() => {
         insertContents.style.padding = '0px';
       }, 200);
-      insertDropdownIcon.setAttribute('xlink:href', __ASSET_PREFIX__ + 'assets/img/icons.svg' + '#dropdown-side');
+      insertDropdownIcon.setAttribute('xlink:href', `${__ASSET_PREFIX__}assets/img/icons.svg#dropdown-side`);
     }
   });
 
   editHeading.addEventListener('click', () => {
+    // if edit panel is open, close it
     if (editContents.classList.contains('closed')) {
+      // set classes and styles for an open panel
       editContents.classList.remove('closed');
       editContents.style.padding = '0.5em 0.75em';
       setTimeout(() => {
         editContents.style.overflow = 'visible';
       }, 200);
-      editDropdownIcon.setAttribute('xlink:href', __ASSET_PREFIX__ + 'assets/img/icons.svg' + '#dropdown-down');
-    } else {
+      editDropdownIcon.setAttribute('xlink:href', `${__ASSET_PREFIX__}assets/img/icons.svg#dropdown-down`);
+    }
+    // if edit panel is closed, open it
+    else {
+      // set classes and styles for a closed panel
       editContents.classList.add('closed');
       editContents.style.overflow = 'hidden';
       setTimeout(() => {
         editContents.style.padding = '0px';
       }, 200);
-      editDropdownIcon.setAttribute('xlink:href', __ASSET_PREFIX__ + 'assets/img/icons.svg' + '#dropdown-side');
+      editDropdownIcon.setAttribute('xlink:href', `${__ASSET_PREFIX__}assets/img/icons.svg#dropdown-side`);
     }
   });
 }
@@ -94,8 +132,9 @@ export function initInsertEditControls (): void {
  * Activate a certain insert action.
  * @param id - The ID of the insert action tab.
  */
-function activate (id: string, insertHandler: InsertHandler) {
-  document.getElementById(id).classList.add('is-active');
+function activate (id: string, insertHandler: InsertHandler): void {
+  const selectedTab = document.getElementById(id);
+  selectedTab.classList.add('is-active');
   if (document.getElementById(id).classList.contains('insertel')) {
     insertHandler.insertActive(id);
   }

src/SquareEdit/DivaEditMode.ts

@@ -43,6 +43,8 @@ class DivaEdit implements NeumeEditInterface {
     setHighlightSelectionControls();
 
     this.neonView.view.addUpdateCallback(this.setSelectListeners.bind(this));
+
+    document.getElementById('edit_controls').click(); // focus display panel
   }
 
   /**

src/SquareEdit/InsertHandler.ts

@@ -114,7 +114,6 @@ class InsertHandler {
     // Disable edit mode listeners
     document.body.addEventListener('keydown', this.keydownListener);
     document.body.addEventListener('keyup', this.resetInsertHandler);
-    document.body.addEventListener('click', this.clickawayHandler);
 
     // Add 'return to edit mode' button
     if (!alreadyInInsertMode) {
@@ -125,6 +124,8 @@ class InsertHandler {
       document.getElementById('redo').parentNode.appendChild(editModeButton);
       editModeButton.addEventListener('click', this.insertDisabled);
     }
+
+    document.getElementById('editContents').addEventListener('click', this.clickawayHandler);
   }
 
   /**
@@ -136,16 +137,28 @@ class InsertHandler {
     document.body.removeEventListener('keydown', this.keydownListener);
     document.body.removeEventListener('keyup', this.resetInsertHandler);
     document.body.removeEventListener('click', this.clickawayHandler);
-    const selected = document.querySelector('.insertel.is-active');
-    if (selected !== null) {
-      selected.classList.remove('is-active');
-    }
+
     this.firstClick = true;
     try {
       document.getElementById('returnToEditMode').remove();
     } catch (e) {
       // console.debug(e);
     }
+
+    const insertPanel = document.getElementById('insert_controls');
+    const insertHeading = document.getElementById('insertMenu');
+    const insertHeadingTitle = insertHeading.querySelector('.panel-heading-title');
+
+    const editPanel = document.getElementById('edit_controls');
+    const editHeading = document.getElementById('editMenu');
+    const displayHeadingTitle = editHeading.querySelector('.panel-heading-title');
+
+    insertHeadingTitle.classList.remove('focused');
+    displayHeadingTitle.classList.add('focused');
+
+    insertPanel.querySelector('.side-panel-btn.insertel.is-active').classList.add('unfocused');
+    editPanel.querySelector('.side-panel-btn.sel-by.is-active').classList.remove('unfocused');
+
   }).bind(this);
 
   /**

src/SquareEdit/SingleEditMode.ts

@@ -41,8 +41,8 @@ class SingleEditMode implements NeumeEditInterface {
     selectionHighlight.classList.add('dropdown-item');
     selectionHighlight.id = 'highlight-selection';
     selectionHighlight.textContent = 'By Selection Mode';
-    (document.getElementsByClassName('dropdown-content'))[0].appendChild(divider);
-    (document.getElementsByClassName('dropdown-content'))[0].appendChild(selectionHighlight);
+    document.getElementsByClassName('dropdown-content')[0].prepend(divider);
+    document.getElementsByClassName('dropdown-content')[0].prepend(selectionHighlight);
 
     document.getElementById('insert_controls').innerHTML += Contents.insertControlsPanel;
     document.getElementById('edit_controls').innerHTML += Contents.editControlsPanel;
@@ -52,7 +52,6 @@ class SingleEditMode implements NeumeEditInterface {
     this.insertHandler = new InsertHandler(this.neonView, '#svg_group');
     bindInsertTabs(this.insertHandler);
     document.getElementById('primitiveTab').click();
-    document.getElementById('selBySyllable').click(); //unfocus insert panel
     Select.setSelectHelperObjects(this.neonView, this.dragHandler);
     this.setSelectListeners();
 
@@ -62,6 +61,8 @@ class SingleEditMode implements NeumeEditInterface {
     initUndoRedoPanel(this.neonView);
     setHighlightSelectionControls();
     this.neonView.view.addUpdateCallback(this.setSelectListeners.bind(this));
+
+    document.getElementById('edit_controls').click(); // focus display panel
   }
 
   /**

src/TextView.ts

@@ -154,6 +154,9 @@ class TextView implements TextViewInterface {
       if (this.neonView.getUserMode() !== 'viewer' && this.neonView.TextEdit !== undefined) {
         this.neonView.TextEdit.initTextEdit();
       }
+
+      // scroll the syllable text bubble into view
+      sylText.scrollIntoView({ behavior: 'smooth' });
     } else {
       document.getElementById('syl_text').style.display = 'none';
     }