♻️ (popup): Title tooltip now uses tables

vict0rsch · Dec 13, 2023 · 0f88477 · 0f88477
1 parent 2af9688
commit 0f88477
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 23 deletions.
diff --git a/src/popup/css/popup.css b/src/popup/css/popup.css
@@ -662,6 +662,10 @@ code {
     width: max-content;
     max-width: 350px;
 }
+.title-tooltip tr,
+.title-popup-tooltip tr {
+    vertical-align: top;
+}
 .expand-memory-authors {
     cursor: pointer;
 }

diff --git a/src/popup/js/popup.js b/src/popup/js/popup.js
@@ -322,7 +322,7 @@ const popupMain = async (url, is, manualTrigger = false, tab = null) => {
         log("Popup paper:", paper);
         setHTML("popup-memory-edit", getPopupEditFormHTML(paper));
         setHTML("popup-copy-icons", getPopupPaperIconsHTML(paper, url, is));
-        setHTML("popup-title-tooltip", getPaperinfoTitle(paper));
+        setHTML("popup-title-tooltip", getPaperInfoTable(paper));
         findEl(`checkFavorite--${id}`).checked = paper.favorite;
         let extraDivWidth = 0;
         for (const p of [

diff --git a/src/popup/js/templates.js b/src/popup/js/templates.js
@@ -6,23 +6,36 @@ const infoSpan = (k, ml) =>
  * @param {object} paper A paper object
  * @returns {string} HTML string
  */
-const getPaperinfoTitle = (paper) => {
+const getPaperInfoTable = (paper) => {
     const addDate = new Date(paper.addDate).toLocaleString().replace(",", "");
     const lastOpenDate = new Date(paper.lastOpenDate).toLocaleString().replace(",", "");
     const ml = "Publication".length + 1;
-    let infoTitle = `${infoSpan("Added", ml)} ${addDate}\n`;
-    infoTitle += `${infoSpan("Last open", ml)} ${lastOpenDate}\n`;
-    infoTitle += `${infoSpan("Visits", ml)} ${paper.count}\n`;
-    infoTitle += `${infoSpan("Source", ml)} ${
-        global.knownPaperPages[paper.source].name
-    }\n`;
-    if (paper.venue) {
-        infoTitle += `${infoSpan("Publication", ml)} <strong>${paper.venue} ${
-            paper.year
-        }</strong>`;
-    }
-    infoTitle = infoTitle.replaceAll("\n", "<br/>");
-    return infoTitle;
+    const tableData = [
+        ["Added", addDate],
+        ["Last open", lastOpenDate],
+        ["Visits", paper.count],
+        ["Source", global.knownPaperPages[paper.source].name],
+    ];
+    if (paper.venue)
+        tableData.push([
+            "Publication",
+            `<strong>${paper.venue} ${paper.year}</strong>`,
+        ]);
+    return /*html*/ `
+        <table class="paper-info-table">
+            ${tableData
+                .map((row) => {
+                    return /*html*/ `
+                        <tr>
+                            <td>${infoSpan(row[0], ml)}</td>
+                            <td>:</td>
+                            <td>${row[1]}</td>
+                        </tr>
+                    `;
+                })
+                .join("")}
+        </table>
+    `;
 };
 
 /**
@@ -133,7 +146,7 @@ const getMemoryItemHTML = (paper, titles) => {
         </div>`;
     }
 
-    const infoTitle = getPaperinfoTitle(paper);
+    const titleInfoTable = getPaperInfoTable(paper);
 
     return /*html*/ `
         <div
@@ -150,7 +163,7 @@ const getMemoryItemHTML = (paper, titles) => {
                 </span>
                 ${paper.title}
                 <div class="title-tooltip" style="display: none;">
-                    ${infoTitle}
+                    ${titleInfoTable}
                 </div>
             </h4>
             <div class="my-1 mx-0">