Merge branch 'develop' into broken-link-checker

DDMAL · Jul 12, 2023 · 93bf8e6 · 93bf8e6
2 parents e4ad613 + 6b11712
commit 93bf8e6
Show file tree

Hide file tree

Showing 28 changed files with 423 additions and 184 deletions.
diff --git a/assets/img/logos.png b/assets/img/logos.png
diff --git a/assets/js/verovio-toolkit.js b/assets/js/verovio-toolkit.js
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/css/dashboard.css b/deployment/server/css/dashboard.css
@@ -300,11 +300,13 @@
 
 #unpaired_container {
   margin-right: 5%;
-  width: 65%
+  width: 65%;
 }
 
 #paired_container {
-  width: 30%
+  width: 30%;
+  display: flex;
+  flex-direction: column;
 }
 
 
@@ -345,6 +347,21 @@
   border-bottom: 1px solid #dfdfdf;
 }
 
+.file_sort_name {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color:rgba(123, 177, 183, 0.1);
+  border-bottom: 1px solid #dfdfdf;
+  font-size: 80%;
+}
+
+.arrow_btn {
+  margin-left: 4px;
+  cursor: pointer;
+  font-weight: bold;
+}
+
 .file_list {
   height: 100%;
   width: 98%;

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/deployment/server/index.html b/deployment/server/index.html
@@ -233,7 +233,7 @@
               <a href="http://ddmal.music.mcgill.ca/" target="_blank" class="ddmal"></a>
               <a href="http://www.cirmmt.org" target="_blank" class="cirmmt"></a>
               <a href="http://www.frqsc.gouv.qc.ca" target="_blank" class="frqsc"></a>
-              <a href="https://www.computecanada.ca/home/" target="_blank" class="computecanada"></a>
+              <a href="https://alliancecan.ca/en" target="_blank" class="alliancecan"></a>
               <a href="https://www.westgrid.ca/" target="_blank" class="westgrid"></a>
             </div>
 

diff --git a/src/Dashboard/UploadArea.ts b/src/Dashboard/UploadArea.ts
@@ -1,6 +1,6 @@
 import { addNewFiles } from './UploadManager';
 import { ModalWindow, ModalWindowView } from '../utils/ModalWindow';
-import { handleUploadAllDocuments, handleMakePair } from './UploadManager';
+import { handleUploadAllDocuments, handleMakePair, sortFileByName } from './UploadManager';
 import { updateDocumentSelector } from './DocumentSelector';
 import { fm } from '../../deployment/scripts/dashboard';
 
@@ -77,4 +77,10 @@ export function InitUploadArea(): void {
       window.alert(`The following files are not .mei, .png, .jpeg, or .jsonld files: \n\n${filenames.join('\n')}`);
     }
   };
+
+  // Listener for sorting file/folio
+  const sortByNameBtns = document.querySelectorAll('.sort_name');
+  sortByNameBtns.forEach(sortByNameBtn => {
+    sortByNameBtn.addEventListener('click', () => sortFileByName(sortByNameBtn));
+  });
 }
diff --git a/src/Dashboard/UploadManager.ts b/src/Dashboard/UploadManager.ts
@@ -170,4 +170,35 @@ async function uploadFolio(name: string, mei: File, image: File): Promise<boolea
 
 // async function uploadManuscript(manuscript: File): Promise<boolean> {
 //   return addEntry(manuscript.name, manuscript, false);
-// }
+// }
+
+export async function sortFileByName(sortByNameBtn: Element): Promise<void>  {
+  const fileList = sortByNameBtn.parentElement.nextElementSibling;
+  const fileElements = Array.from(fileList.children);
+
+  let isAscending = sortByNameBtn.classList.contains('arrow-up');
+
+  if (isAscending) {
+    sortByNameBtn.classList.remove('arrow-up');
+    sortByNameBtn.classList.add('arrow-down');
+    sortByNameBtn.innerHTML = '&#x22C1;';
+  } else {
+    sortByNameBtn.classList.remove('arrow-down');
+    sortByNameBtn.classList.add('arrow-up');
+    sortByNameBtn.innerHTML = '&#x22C0;';
+  }
+
+  isAscending = !isAscending;
+
+  fileElements.sort((a, b) => {
+    const nameA = a.textContent.trim();
+    const nameB = b.textContent.trim();
+    return isAscending ? nameA.localeCompare(nameB) : nameB.localeCompare(nameA);
+  });
+
+  fileElements.forEach(element => {
+    fileList.appendChild(element);
+  });
+
+  sortByNameBtn.setAttribute('style', 'color: black');
+}