Merge pull request #1024 from DDMAL/doc-upload-btn

✨ Add delete button for unpaired doc & adjust style

deployment/server/css/dashboard.css

@@ -354,12 +354,13 @@
 .unpaired_item_container {
     width: 95%;
     min-height: 30px;
-    cursor: pointer;
     white-space: nowrap;
+    display: flex;
+    justify-content: space-between;
+    vertical-align: middle;
 }
 
 .unpaired_item_radio {
-  width: 10%;
   cursor: pointer;
 }
 
@@ -368,6 +369,13 @@
   cursor: pointer;
 }
 
+.unpaired_del_btn {
+  width: 7%;
+  opacity: 0.4;
+  margin-left: auto;
+  cursor: pointer;
+}
+
 #generate-pair-button-container {
   width: 100%;
   height: 10%;
@@ -378,13 +386,13 @@
   border-top: 1px solid #dfdfdf;
 }
 
-.tile_list {
+.folio_list {
   height: 80%;
   width: 100%;
   overflow: scroll;
 }
 
-.tile_item {
+.folio_item {
   border: 1px solid #d5d5d5;
   border-radius: 4px;
   height: 30px;
@@ -395,18 +403,18 @@
   align-items: center;
 }
 
-.tile-filename {
+.folio-filename {
   width: 100%;
   font-size: 12px;
 }
 
-.delete_button {
+.unpair_btn {
+  width: 9%;
   border: none;
-  color: rgb(255, 0, 187);
   font-weight: 100;
   font-size: large;
   cursor: pointer;
-  background-color: transparent;
+  opacity: 0.4;
 }
 
 #upload_button_container {
@@ -424,9 +432,10 @@
 
 #uploading_spinner {
   opacity: 0;
-  color: rgb(255, 0, 187);
+  color: gray;
   font-size: x-large;
   font-weight: 100; 
+  margin-left: 1em;
 }
 
 #uploading_spinner.visible {

src/Dashboard/DocumentSelector.ts

@@ -69,8 +69,8 @@ class shiftSelection {
 
 const shift = new shiftSelection();
 
-// Gets user selected document tile elements
-function getSelectionTiles() {
+// Gets user selected document folio elements
+function getSelectionFolios() {
   return getSelectionFilenames().map(filename => document.getElementById(filename));
 }
 
@@ -88,10 +88,10 @@ function openEditorTab(filename: string, isUploaded: boolean) {
   window.open(`./editor.html?${query}`, '_blank');
 }
 
-// Opens editor tab given a document tile element
-function openTile(tile: Element) {
-  const isUploaded = (tile.classList.contains('uploaded-doc')) ? true : false;
-  const filename = tile.id;
+// Opens editor tab given a document folio element
+function openFolio(folio: Element) {
+  const isUploaded = (folio.classList.contains('uploaded-doc')) ? true : false;
+  const filename = folio.id;
   openEditorTab(filename, isUploaded);
 }
 
@@ -101,33 +101,33 @@ function makeQuery(obj): string {
   }).join('&');
 }
 
-function unselect(tile: Element, idx?: number) {
-  if (tile != null) {
-    idx = (idx != undefined) ? idx : orderedDocuments.indexOf(tile.id);
+function unselect(folio: Element, idx?: number) {
+  if (folio != null) {
+    idx = (idx != undefined) ? idx : orderedDocuments.indexOf(folio.id);
   }
   else if (idx != undefined) {
-    tile = document.getElementById(orderedDocuments[idx]);
+    folio = document.getElementById(orderedDocuments[idx]);
   }
   else return;
-  tile.classList.remove('selected');
+  folio.classList.remove('selected');
   orderedSelection[idx] = false;
 }
 
 function unselectAll() {
   Array.from(document.querySelectorAll('.document-entry.selected'))
-    .forEach((tile) => tile.classList.remove('selected'));
+    .forEach((folio) => folio.classList.remove('selected'));
   orderedSelection.fill(false);
 }
 
-function select(tile: Element, idx?: number) {
-  if (tile != null) {
-    idx = (idx != undefined) ? idx : orderedDocuments.indexOf(tile.id);
+function select(folio: Element, idx?: number) {
+  if (folio != null) {
+    idx = (idx != undefined) ? idx : orderedDocuments.indexOf(folio.id);
   }
   else if (idx != undefined) {
-    tile = document.getElementById(orderedDocuments[idx]);
+    folio = document.getElementById(orderedDocuments[idx]);
   }
   else return;
-  tile.classList.add('selected');
+  folio.classList.add('selected');
   orderedSelection[idx] = true;
 }
 
@@ -208,30 +208,30 @@ export async function updateDocumentSelector(): Promise<void> {
 
   // add onclick event listener to docs
   orderedDocuments.forEach((filename, idx) => {
-    const tile = document.getElementById(`${filename}`);
+    const folio = document.getElementById(`${filename}`);
 
     // double click event immediately opens document
-    tile.addEventListener('dblclick', handleOpenDocuments, false);
+    folio.addEventListener('dblclick', handleOpenDocuments, false);
 
     // Single click selects document or adds document to existing selection
-    tile.addEventListener('click', function(e) {
+    folio.addEventListener('click', function(e) {
       // No Shift or Meta pressed
       if (!metaKeyIsPressed && !shiftKeyIsPressed) {
-        // Selected or not selected -> clear selection and select cur tile
+        // Selected or not selected -> clear selection and select cur folio
         unselectAll();
-        select(tile, idx);
+        select(folio, idx);
         shift.setStart(idx); // Track start of shift selection
         setSidebarActions();
       }
       // Meta key pressed (default behaviour if both meta and shift are pressed)
       else if (metaKeyIsPressed) {
         if (orderedSelection[idx]) {
-          unselect(tile, idx);
+          unselect(folio, idx);
           shift.setStart(orderedSelection.lastIndexOf(true)); // MacOS behaviour: shift start goes to largest idx selected item
         }
-        // Tile is not selected -> Add to selection
+        // Folio is not selected -> Add to selection
         else {
-          select(tile, idx);
+          select(folio, idx);
           shift.setStart(idx); // Track start of shift selection
         }
         setSidebarActions();
@@ -255,8 +255,8 @@ export async function updateDocumentSelector(): Promise<void> {
 
 function handleOpenDocuments() {
   if (!openButton.classList.contains('active')) return;
-  getSelectionTiles().forEach(tile => {
-    openTile(tile);
+  getSelectionFolios().forEach(folio => {
+    openFolio(folio);
   });
   shift.reset();
   unselectAll();

src/Dashboard/FileManager.ts

@@ -114,7 +114,7 @@ class FileManager {
 export default FileManager;
 
 type folio = {
-    filename: string,
-    mei_filename: string,
-    image_filename: string
-}
+  filename: string,
+  mei_filename: string,
+  image_filename: string
+};

src/Dashboard/UploadManager.ts

@@ -25,8 +25,8 @@ export function addNewFiles( files: File[] ): File[] {
     }
     else if ( ext === 'jsonld' ) {
       // // remove manuscript support for the immediate future!
-      // const manuscriptTile = createManuscriptTile(file.name);
-      // manuscript_container.appendChild(manuscriptTile);
+      // const manuscriptFolio = createManuscriptFolio(file.name);
+      // manuscript_container.appendChild(manuscriptFolio);
       // fm.addFile(file);
       // fm.addManuscript(file.name);
     }
@@ -58,10 +58,22 @@ function createUnpairedItem(filename: string, group: string): HTMLDivElement {
 
   const text = document.createElement('span');
   text.innerText = formatFilename(filename, 28);
+  text.setAttribute('style', 'margin-top: auto');
+
+  const delBtn = document.createElement('img');
+  delBtn.className = 'unpaired_del_btn';
+  delBtn.src = `${__ASSET_PREFIX__}assets/img/unpaired-remove-doc.svg`;
+  delBtn.title = 'delete';
 
   label.appendChild(radio);
   label.appendChild(text);
   node.appendChild(label);
+  node.appendChild(delBtn);
+
+  delBtn.addEventListener('click', function() {
+    node.remove();
+  });
+
   return node;
 }
 
@@ -77,7 +89,7 @@ export function handleMakePair(): void {
   const image_filename = selectedImageElement.value;
   const filename = mei_filename.substring(0, mei_filename.length-4);
   // make and append UI element
-  const paired_el = createPairedTile(filename, mei_filename, image_filename);
+  const paired_el = createPairedFolio(filename, mei_filename, image_filename);
   paired_container.appendChild(paired_el);
   // reflect in file manager
   fm.addFolio(filename, mei_filename, image_filename);
@@ -86,23 +98,23 @@ export function handleMakePair(): void {
   selectedImageElement.parentElement.parentElement.remove();
 }
 
-function createPairedTile(filename: string, mei_filename: string, image_filename: string): HTMLDivElement {
+function createPairedFolio(filename: string, mei_filename: string, image_filename: string): HTMLDivElement {
   const mei_container: HTMLDivElement = document.querySelector('#mei_list');
   const image_container: HTMLDivElement = document.querySelector('#image_list');
 
-  const tile = document.createElement('div');
-  tile.className = 'tile_item';
-  tile.setAttribute('mei', mei_filename);
-  tile.setAttribute('image', image_filename);
+  const folio = document.createElement('div');
+  folio.className = 'folio_item';
+  folio.setAttribute('mei', mei_filename);
+  folio.setAttribute('image', image_filename);
 
-  const tile_filename = document.createElement('div');
-  tile_filename.classList.add('tile-filename');
-  tile_filename.innerHTML = formatFilename(filename, 25);
-  tile.appendChild(tile_filename); 
+  const folio_filename = document.createElement('div');
+  folio_filename.classList.add('folio-filename');
+  folio_filename.innerHTML = formatFilename(filename, 25);
+  folio.appendChild(folio_filename); 
 
   function handleUnpair() {
-    // remove tile from UI
-    tile.remove();
+    // remove folio from UI
+    folio.remove();
     // remove folio from file manager
     fm.removeFolio(filename);
     // add items back to unpaired containers
@@ -112,13 +124,14 @@ function createPairedTile(filename: string, mei_filename: string, image_filename
     image_container.appendChild(imageItem);
   }
 
-  const deleteButton = document.createElement('button');
-  deleteButton.innerText = '⌫';
-  deleteButton.className = 'delete_button';
-  deleteButton.addEventListener('click', handleUnpair);
-  tile.appendChild(deleteButton);
+  const unpairBtn = document.createElement('img');
+  unpairBtn.className = 'unpair_btn';
+  unpairBtn.src = `${__ASSET_PREFIX__}assets/img/unpair-doc.svg`;
+  unpairBtn.title = 'unpair';
+  unpairBtn.addEventListener('click', handleUnpair);
+  folio.appendChild(unpairBtn);
 
-  return tile;
+  return folio;
 }
 
 export async function handleUploadAllDocuments(): Promise<any> {

src/Dashboard/dashboard_components.ts

@@ -37,7 +37,7 @@ export const uploadAreaHTML =
 
         <div class="file-container-title">Paired Folios</div>
         
-        <div class="tile_list" id="paired_list"></div>
+        <div class="folio_list" id="paired_list"></div>
 
         <div id="upload_button_container">
           <div class="action_button" id="upload_button">
@@ -51,7 +51,7 @@ export const uploadAreaHTML =
       <!--
       <div class="file_container" id="manuscripts_container">
         <h2 class="file_heading">Manuscripts</h2>
-        <div class="tile_list" id="manuscript_list"></div>
+        <div class="folio_list" id="manuscript_list"></div>
       </div>
       -->