DDMAL · yinanazhou · Jul 5, 2023 · Jun 21, 2023 · Jun 22, 2023 · Jun 22, 2023
diff --git a/assets/style.css b/assets/style.css
@@ -1,12 +1,14 @@
 /* 
-    Note: Bulma styles are a mess. We need to get rid of it eventually. 
-    In the meantime, we use !important occasionally to override Bulma.
+    Note: Bulma styles are outdated and are not up to industry standards. 
+    We need to get rid of it eventually. 
+    In the meantime, we use '!important' occasionally to override Bulma.
 */
 
 @import url("https://unpkg.com/[email protected]/build/diva.css");
 
-
-/* Section: General styles */
+/* ----------------------- */
+/* General styles
+/* ----------------------- */
 
 html {
     overflow: hidden;
@@ -21,6 +23,7 @@ body {
     margin: 0px;
     display: flex;
     flex-direction: column;
+    overflow: scroll;
 }
 
 a {
@@ -36,8 +39,10 @@ a:hover {
     justify-content: flex-end;
 }
 
+/* ----------------------- */
+/* Section: Top Navbar 
+/* ----------------------- */
 
-/* Section: Top Navbar */
 /* CSS in here could use a little clean-up */
 
 .navbar.is-light {
@@ -209,45 +214,80 @@ a:hover {
     display: block;
 }
 
-/* Tablet and mobile styles for navbar */
-@media screen and (max-width: 1023px) {
+/* Tov navbar styles styles for smaller devices */
+@media screen and (max-width: 1023px) {    
     .navbar-menu.is-active {
         display: flex;
         flex-direction: column;
         background-color: #e2e2e2;
+        min-height: 91vh;
+        justify-content: space-between;
+        overflow: scroll;
+        gap: 30px;
+        padding: 0;
+    }
+    .navbar-start {
+        gap: 20px;
     }
     .navbar-main-content-container {
         display: flex;
-        flex-direction: column;
-        height: 50%;
+        flex-direction: row;
+        height: fit-content;
+        flex-wrap: wrap;
+        justify-content: space-evenly;
+        align-content: space-between;
+        gap: 40px 0px;
+    }
+    #unsaved-changes-container {
+        transform: scale(0.5);
     }
     .navbar-item.has-dropdown.is-hoverable {
         color: #68A7AD;
-        margin-top: 3vh;
+        flex-grow: 1;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+        align-items: flex-start;
     }
     .navbar-item.has-dropdown.is-hoverable:hover {
         background-color: #e2e2e2 !important;
         color: #68A7AD !important;
         border-radius: 0px;
     }
+    .navbar-element.navbar-btn {
+        cursor: pointer;
+        overflow: hidden;
+        border-bottom: 1px solid #7cb1b7;
+        font-size: 1.2rem;
+        width: 100%;
+    }
+    .navbar-btn-text {
+        font-weight: bold;
+    }
     .navbar-dropdown {
-        border-top: 1px solid #7cb1b7;
+        border-top: none;
         box-shadow: none;
         min-width: 13vw;
+        gap: 5px;
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        padding: 0;
     }
-    .navbar-element.navbar-btn:hover {
-        background-color: #e2e2e2;
-        color: #7cb1b7 !important;
-        cursor: auto;
+    .navbar-dropdown-item {
+        font-size: 1rem;
     }
-}
-@media only screen and (max-width: 900px) {
-    #navMenu {
-        height: 100%;
+    #feedback-form-btn-container {
+        margin: 0;
+        border: none;
+        border-radius: 0;
     }
 }
 
-/* Section: Editor Main Body */
+/* ----------------------- */
+/* Editor Main Body
+/* ----------------------- */
 
 #editor-body-container {
     overflow: hidden;
@@ -294,8 +334,10 @@ a:hover {
     height: 100%;
 }
 
+/* ----------------------- */
+/* Section: Editor Panel
+/* ----------------------- */
 
-/* Section: Editor Panel */
 /* Could use a little clean-up */
 
 #right-column {
@@ -325,7 +367,6 @@ a:hover {
 .panel-heading.focused {
     text-decoration: underline;
     text-decoration-thickness: 2px;
-    /* background-color: #b6d8f2; */
 }
 .panel-heading-title {
     max-width: 0px;
@@ -455,6 +496,7 @@ a:hover {
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
+    flex-wrap: wrap;
 }
 #display-options-separator {
     border-right: 2px solid rgb(232 232 232);
@@ -527,6 +569,7 @@ a:hover {
     font-size: 0.875em;
     justify-content: center;
     width: 100%;
+    flex-wrap: wrap;
 }
 #displayContents .button {
     width: 10.5em;
@@ -646,30 +689,44 @@ a:hover {
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    width: 95%;
+    width: 98%;
+    flex-wrap: wrap;
     margin: 5px 0px;
+    gap: 10px;
 }
 .notification-wrapper {
-    /* padding-left: 10px; */
-    /* padding-right: 10px; */
     padding: 10px;
-    /* border: 1px solid lightgray; */
     background-color: #efefef;
     border-radius: 4px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 85%;
+    flex-grow: 1;
 }
 .remove-notif-icon-wrapper {
-    height: 100%;
-    width: 7%;
+    /* height: 100%; */
+    width: 30px;
 }
 .remove-notif-icon {
     cursor: pointer;
 }
 
-/* Section: Neon Notifications */
+/* Navigation panel styles for smaller devices */
+@media screen and (max-width: 1023px) {
+    .notification-container {
+        justify-content: center;
+        gap: 7px;
+    }
+    .remove-notif-icon-wrapper {
+        min-width: 30px;
+    }
+}
+
+
+/* ----------------------- */
+/* Neon Notifications
+/* ----------------------- */
 
 /* notification keyframes */
 @keyframes slideInFromLeft {
@@ -708,16 +765,16 @@ a:hover {
 }
 
 .neon-notification-warning {
-    /* background: #fae095; */
     background: #f5c144;
 }
 
 .neon-notification-success {
     background: #6dc492;
 }
 
-
-/* Section: Loading Animation */ 
+/* ---------------------------- */
+/* Section: Loading Animation
+/* ---------------------------- */ 
 
 /* loading animation keyframes */
 @keyframes spin {
@@ -750,7 +807,9 @@ a:hover {
     animation: spin 2s linear infinite;
 }
 
-/* Section: Modal Windows */
+/* ----------------------- */
+/* Section: Modal Windows
+/* ----------------------- */
 
 /* neon modal veil */
 #neon-modal-window-container {

diff --git a/assets/template.html b/assets/template.html
@@ -20,7 +20,7 @@
       <div class="navbar-main-content-container" id="navbar-main-content-container-top">
         <div class="navbar-element" id="filename"></div>
         <div id="unsaved-changes-container">
-          <img class="navbar-element" id="file-saved" src="/Neon/assets/img/saved-icon.svg">
+          <img class="navbar-element" id="file-saved" src="/Neon/assets/img/saved-icon.svg" alt="Your work is saved">
         </div>
         <div class="navbar-element" id="file-status"></div>
       </div>
@@ -151,7 +151,7 @@
   <div id="left-column">
     <div id="container"></div>
   </div>
-  <div class="is-hidden-mobile" id="right-column">
+  <div id="right-column">
       <div id="display_controls"></div>
       <div id="insert_controls"></div>
       <div id="edit_controls"></div>

diff --git a/cypress/e2e/drag/custos.cy.ts b/cypress/e2e/drag/custos.cy.ts
@@ -13,6 +13,7 @@ function drag (selector: string, offsetX = 0, offsetY = 0): void {
 }
 
 beforeEach(() => {
+  cy.viewport('macbook-11');
   cy.visit('http://localhost:8080/editor.html?manifest=test', {
     onBeforeLoad(win) {
       cy.stub(win.console, 'log').as('consoleLog');

diff --git a/deployment/server/editor.html b/deployment/server/editor.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width">
   <head>
     <title>Neon</title>
     <script

diff --git a/src/SquareEdit/Contents.ts b/src/SquareEdit/Contents.ts
@@ -458,6 +458,14 @@ export const hotkeysModal = `
                 </div>
                 <div class="hotkey-entry-description">Hide Glyph</div>
             </div>
+            <div class="hotkey-entry-container">
+                <div class="hotkey-container">
+                    <div class="hotkey-entry">Shift</div>
+                    <div>+</div>
+                    <div class="hotkey-entry">T</div>
+                </div>
+                <div class="hotkey-entry-description">Scroll To Syllable Text</div>
+            </div>
         </div>
 
         <!-- "Edit" hotkeys -->
@@ -501,10 +509,10 @@ export const hotkeysModal = `
             </div>
             <div class="hotkey-entry-container">
                 <div class="hotkey-container">
-                    <div class="hotkey-entry">1/2/3/4</div>
+                    <div class="hotkey-entry">1/2/3/4/5/6</div>
                 </div>
                 <div class="hotkey-entry-description">
-                    Select by Syllable/Neume/Neume Component/Staff
+                    Select by Syllable/Neume/Neume Component/Staff/Layer Element/BBox
                 </div>
             </div>
             <div class="hotkey-entry-container">
@@ -553,4 +561,4 @@ export const errorLogsPanelContents =
             <use id="toggleErrorLog" xlink:href="${__ASSET_PREFIX__}/assets/img/icons.svg#dropdown-down"></use>
         </svg>
     </div>
-    <div class="panel-contents" id="errorLogContents" style="overflow: visible; padding: 0.5em 0.75em;"><div>`;
+    <div class="panel-contents" id="errorLogContents" style="overflow: scroll; padding: 0.5em 0.75em;"><div>`;
diff --git a/src/SquareEdit/Controls.ts b/src/SquareEdit/Controls.ts
@@ -190,7 +190,7 @@ export function initSelectionButtons (): void {
   const selByStaff = document.getElementById('selByStaff');
   const selByLayerElement = document.getElementById('selByLayerElement');
 
-  selBySyllable.addEventListener('click', selectBySylHandler);
+  selBySyllable.addEventListener('click', selectBySyllableHandler);
   selByNeume.addEventListener('click', selectByNeumeHandler);
   selByNc.addEventListener('click', selectByNcHandler);
   selByStaff.addEventListener('click', selectByStaffHandler);
@@ -205,7 +205,7 @@ export function initSelectionButtons (): void {
   });
 
 
-  function selectBySylHandler () {
+  function selectBySyllableHandler () {
     if (!selBySyllable.classList.contains('is-active')) {
       setSettings({ selectionMode: 'selBySyllable' });
 

diff --git a/src/SquareEdit/InsertHandler.ts b/src/SquareEdit/InsertHandler.ts
@@ -3,6 +3,7 @@ import { EditorAction, InsertAction } from '../Types';
 import * as d3 from 'd3';
 import { getSVGRelCoords, isOutOfSVGBounds, Point } from '../utils/Coordinates';
 import { queueNotification } from '../utils/Notification';
+import { setSettings } from '../utils/LocalSettings';
 
 /**
  * Class that handles insert mode, events, and actions.
@@ -160,6 +161,8 @@ class InsertHandler {
 
     insertPanel.querySelector('.side-panel-btn.insertel.is-active').classList.add('unfocused');
     editPanel.querySelector('.side-panel-btn.sel-by.is-active').classList.remove('unfocused');
+
+    setSettings({ userMode: 'edit' });
 
   }).bind(this);
 

diff --git a/src/SquareEdit/SingleEditMode.ts b/src/SquareEdit/SingleEditMode.ts
@@ -59,14 +59,13 @@ class SingleEditMode implements NeumeEditInterface {
     document.getElementById(insertMode).classList.add('is-active');
     document.getElementById(selectionMode).classList.add('is-active');
     switch (userMode) {
-      case 'edit':
-        document.getElementById(selectionMode).click();
-        break;
       case 'insert':
         document.getElementById(insertMode).click();
         break;
+      case 'edit':
       default:
-        return;
+        document.getElementById(selectionMode).click();
+        break;
     }
   }
 

diff --git a/src/TextEditMode.ts b/src/TextEditMode.ts
@@ -107,6 +107,15 @@ export default class TextEditMode implements TextEditInterface {
       span.removeEventListener('click', selectSylText);
       span.addEventListener('click', selectSylText);
     });
+
+    document.addEventListener('keydown', (event) => {
+      if (event.shiftKey && event.key === 'T') {
+        const selectedSylText = document.querySelector('.text-select');
+        if (selectedSylText) {
+          selectedSylText.scrollIntoView({ behavior: 'smooth' });
+        }
+      }
+    });
   }
 
 

diff --git a/src/TextView.ts b/src/TextView.ts
@@ -92,7 +92,7 @@ class TextView implements TextViewInterface {
       document.querySelectorAll('.syl.selected .sylTextRect-display')
         .forEach((rect: HTMLElement) => { rect.style.fill = 'red'; });
 
-      if (this.neonView.TextEdit !== undefined) {
+      if (this.neonView.getUserMode() !== 'viewer' && this.neonView.TextEdit !== undefined) {
         this.neonView.TextEdit.initSelectByBBoxButton();
       }