Merge pull request #1187 from DDMAL/debug-switch

Init debug mode switch
DDMAL · Feb 1, 2024 · 1395c26 · 1395c26
2 parents 69fceff + 2c489e3
commit 1395c26
Show file tree

Hide file tree

Showing 10 changed files with 218 additions and 149 deletions.
diff --git a/assets/style.css b/assets/style.css
@@ -60,7 +60,7 @@ a:hover {
 }
 .navbar-end {
     display: flex;
-    align-items: center;
+    flex-direction: row;
 }
 .navbar-main-content-container {
     display: flex;
@@ -190,7 +190,7 @@ a:hover {
 .navbar-dropdown {
     border-top: 1px solid #7cb1b7;
     box-shadow: 0px 7px 10px 2px #00000052;
-    min-width: 13vw;
+    min-width: 15vw;
 }
 #default-zoom:hover #extendable-content {
     display: block;
@@ -213,6 +213,80 @@ a:hover {
 .dropdown-extendable-content-container:hover {
     display: block;
 }
+/* Styles for debug mode toggle switch */
+.debug-mode-container {
+    display: flex;
+    align-items: center;
+    color: #818181;
+}
+input[type=checkbox].debug-mode-toggle {
+    display: none;
+}
+input[type=checkbox].debug-mode-toggle + label {
+    display: inline-block;
+    height: 35px;
+    width: 70px;
+    position: relative;
+    border: 4px #68A7AD solid;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    box-sizing: border-box;
+    transition: all 0.3s ease;
+    border-radius: 35px;
+}
+input[type=checkbox].debug-mode-toggle + label::before {
+    position: absolute;
+    height: 25px;
+    width: 25px;
+    content: '';
+    transition: all 0.3s ease;
+    z-index: 3;
+    border-radius: 50%;
+}
+input[type=checkbox].debug-mode-toggle + label::after {
+    position: absolute;
+    width: 55px;
+    text-align: center;
+    z-index: 2;
+    text-transform: uppercase;
+    transform: translateY(-50%);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    border-radius: 50%;
+    top: 50%;
+}
+input[type=checkbox].debug-mode-toggle:not(:checked) + label {
+    background-color: transparent;
+    text-align: right;
+}
+input[type=checkbox].debug-mode-toggle:not(:checked)+label:after {
+    content: attr(data-unchecked);
+    left: 15px;
+    opacity: 1;
+    color: #68A7AD;
+}
+input[type=checkbox].debug-mode-toggle:not(:checked) + label:before {
+    left: 1px;
+    top: 1px;
+    background-color: #68A7AD;
+}
+
+input[type=checkbox].debug-mode-toggle:checked + label {
+    background-color: #68A7AD;
+    text-align: left;
+}
+input[type=checkbox].debug-mode-toggle:checked+label:after {
+    content: attr(data-checked);
+    opacity: 1;
+    color: white;
+    right: 15px;
+}
+input[type=checkbox].debug-mode-toggle:checked+label:before {
+    left: 37px;
+    top: 1px;
+    background-color: white;
+}
 
 /* Tov navbar styles styles for smaller devices */
 @media screen and (max-width: 1023px) {    

diff --git a/assets/template.html b/assets/template.html
@@ -22,7 +22,16 @@
         <div id="unsaved-changes-container">
           <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 class="navbar-element" id="file-status">
+          <div id="mei_version_container">
+            <span class="file_status_title">MEI Version: </span>
+            <span id="mei_version"></span>
+          </div>
+          <div id="validation_status_container">
+            <span class="file_status_title">MEI Status: </span>
+            <span id="validation_status"></span>
+          </div>
+        </div>
       </div>
 
       <div class="navbar-main-content-container" id="navbar-main-content-container-bottom">
@@ -45,58 +54,6 @@
           </div>   
         </div>
 
-        <!--
-        <div class="navbar-item has-dropdown is-hoverable">
-          <div class="navbar-element navbar-btn">
-            <div class="navbar-btn-text">View</div>
-          </div>
-          <div class="navbar-dropdown">
-
-            <div id="default-zoom" class="navbar-dropdown-item has-extendable-content">
-
-              <div class="navbar-dropdown-item-text-wrapper">
-                <div class="navbar-dropdown-item-text">Default Zoom</div>
-              </div>
-              <div class="navbar-dropdown-item-icon-wrapper flex-end">
-                <img src="/Neon/assets/img/right_arrow.svg" class="right-arrow">
-              </div>
-
-              
-              <div id="extendable-content" class="dropdown-extendable-content-container">
-                <div class="navbar-dropdown-item extendable">
-                  <div class="navbar-dropdown-item-icon-wrapper">
-                    <img src="/Neon/assets/img/checkmark.svg" id="zoom-fit-content-icon" class="checkmark-icon default-zoom selected navbar-item-icon">
-                  </div>
-                  <div class="navbar-dropdown-item-text-wrapper">
-                    <div class="navbar-dropdown-item-text checked" id="zoom-fit-content">Fit Content</div>
-                  </div>
-                </div>
-                <div class="navbar-dropdown-item extendable">
-                  <div class="navbar-dropdown-item-icon-wrapper">
-                    <img src="/Neon/assets/img/checkmark.svg" id="zoom-easy-edit-icon" class="checkmark-icon default-zoom navbar-item-icon">
-                  </div>
-                  <div class="navbar-dropdown-item-text-wrapper">
-                    <div class="navbar-dropdown-item-text" id="zoom-easy-edit">Easy Edit</div>
-                  </div>
-                </div>
-              </div>
-              
-
-            </div>
-
-            <div class="navbar-dropdown-item">
-
-              <div class="navbar-dropdown-item-icon-wrapper">
-                <img src="/Neon/assets/img/checkmark.svg" id="show-error-logs-checkmark-icon" class="checkmark-icon">
-              </div>
-              <div class="navbar-dropdown-item-text-wrapper">
-                <div class="navbar-dropdown-item-text" id="show-error-logs-btn">Show error logs</div>
-              </div>
-            </div>
-          </div>
-        </div>
-        -->
-
         <div class="navbar-item has-dropdown is-hoverable">
           <div class="navbar-element navbar-btn">
             <div class="navbar-btn-text">MEI Actions</div>
@@ -120,7 +77,7 @@
               <img class="external-link-icon">
             </a>
             <a class="navbar-dropdown-item" href="//github.com/DDMAL/Neon/wiki" target="_blank">
-              Wiki
+              Neon Wiki
               <img class="external-link-icon">
             </a>
             <a class="navbar-dropdown-item" href="//ddmal.music.mcgill.ca" target="_blank">
@@ -131,6 +88,7 @@
               <div id="navbar-item-hotkeys">Hotkeys</div>
             </div>
             <div class="navbar-dropdown-item">
+              Version:&nbsp;
               <div id="neon-version"></div>
             </div>
           </div>
@@ -139,6 +97,14 @@
     </div>
 
     <div class="navbar-end">
+      <div class="navbar-element">
+        <div class="debug-mode-container">
+          Debug Mode:&nbsp;
+          <input type="checkbox" class="debug-mode-toggle" id="debug-mode-checkbox">
+          <label for="debug-mode-checkbox" data-checked="ON" data-unchecked="OFF" class="debug-mode-on"></label>
+        </div>
+      </div>
+
       <a class="navbar-element navbar-btn" id="feedback-form-btn-container" href="https://forms.gle/vGUpvZKZxGX5QGJZ9" target="_blank">
         Feedback Form
         <img class="external-link-icon">

diff --git a/cypress/e2e/errorlog.cy.ts b/cypress/e2e/errorlog.cy.ts
@@ -9,6 +9,7 @@ describe('test: error log', () => {
     cy.clearLocalStorage();
     cy.visit('http://localhost:8080/editor.html?manifest=test');
     cy.get('#mei_output', { timeout: 10000 }).should('be.visible');
+    cy.get('#debug-mode-checkbox').click({ timeout: 100, force: true });
   });
 
   it('startup: error log should not be visible', () => {

diff --git a/src/DisplayPanel/DisplayControls.ts b/src/DisplayPanel/DisplayControls.ts
@@ -235,8 +235,7 @@ export function setBgOpacityFromSlider (background?: string): void {
 }
 
 /**
- * Set background image opacity button and slider listeners.
- * @param background - The background image selector.
+ * Set bbox adjustment circle size button and slider listeners.
  */
 export function setCircleSizeControls (): void {
   const circleSlider = document.getElementById('circleSlider') as HTMLInputElement;
@@ -461,7 +460,7 @@ function setDisplayAllListener(): void {
     if (selectAllBtn.classList.contains('selected')) {
       selectAllBtn.classList.remove('selected');
       selectAllBtn.innerHTML = 'Display All';
-      const options =  document.querySelectorAll('.checkbox-container > .checkbox');
+      const options =  document.querySelectorAll('.checkbox-container:not([style*="display: none;"]) > .checkbox');
 
       Array.from(options).forEach((option: HTMLInputElement) => {
         if (option.checked) option.click();
@@ -470,7 +469,7 @@ function setDisplayAllListener(): void {
     else {
       selectAllBtn.classList.add('selected');
       selectAllBtn.innerHTML = 'Hide All';
-      const options =  document.querySelectorAll('.checkbox-container > .checkbox');
+      const options =  document.querySelectorAll('.checkbox-container:not([style*="display: none;"]) > .checkbox');
 
       Array.from(options).forEach((option: HTMLInputElement) => {
         if (!option.checked) option.click();

diff --git a/src/NeonView.ts b/src/NeonView.ts
@@ -13,7 +13,7 @@ import {
   TextViewInterface,
   ViewInterface
 } from './Interfaces';
-import { initErrorLog } from '../src/utils/ErrorLog';
+import { setDebugMode } from './utils/DebugMode';
 import { setSavedStatus, listenUnsavedChanges } from './utils/Unsaved';
 import LocalSettings, { getSettings } from './utils/LocalSettings';
 
@@ -109,7 +109,7 @@ class NeonView {
       this.info = new this.params.Info(this);
       this.modal = new ModalWindow(this);
       Validation.init(this); // initialize validation
-      initErrorLog(); // initialize notifications logs
+      setDebugMode(); 
       listenUnsavedChanges();
 
       this.setupEdit(this.params);

diff --git a/src/Validation.ts b/src/Validation.ts
@@ -63,31 +63,13 @@ function statusOnClick(log: string) {
 export async function init (neonView: NeonView): Promise<void> {
   const fileStatusDiv = document.getElementById('file-status');
   if (fileStatusDiv !== null) {
-    const meiVersionDiv = document.createElement('div');
-    meiVersionDiv.id = 'mei_version_container';
-    const meiVersionTitle = document.createElement('span');
-    meiVersionTitle.classList.add('file_status_title');
-    meiVersionTitle.textContent = 'MEI Version: ';
-    const version = document.createElement('span');
-    version.id = 'mei_version';
-    version.textContent = 'unknown';
-    meiVersionDiv.appendChild(meiVersionTitle);
-    meiVersionDiv.appendChild(version);
-    fileStatusDiv.appendChild(meiVersionDiv);
-    versionField = document.getElementById('mei_version');
+    const meiVersion = document.getElementById('mei_version');
+    meiVersion.textContent = 'unknown';
+    versionField = meiVersion;
 
-    const meiStatusDiv = document.createElement('div');
-    meiStatusDiv.id = 'validation_status_container';
-    const meiStatusTitle = document.createElement('span');
-    meiStatusTitle.classList.add('file_status_title');
-    meiStatusTitle.textContent = 'MEI Status: ';
-    const status = document.createElement('span');
-    status.id = 'validation_status';
-    status.textContent = 'unknown';
-    meiStatusDiv.appendChild(meiStatusTitle);
-    meiStatusDiv.appendChild(status);
-    fileStatusDiv.appendChild(meiStatusDiv);
-    statusField = document.getElementById('validation_status');
+    const meiStatus = document.getElementById('validation_status');
+    meiStatus.textContent = 'unknown';
+    statusField = meiStatus;
     worker = new Worker(__ASSET_PREFIX__ + 'workers/Worker.js');
     worker.onmessage = updateStatusUI.bind(neonView);
   }