Tweaking the UI

roman-r-m · Feb 9, 2021 · 5dd8a6d · 5dd8a6d
1 parent bcbb15b
commit 5dd8a6d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/src/webview/index.ts b/src/webview/index.ts
@@ -86,6 +86,8 @@ class SearchDialog {
                 row.setAttribute('class', 'search-result-row');
                 searchResults.appendChild(row);
 
+                row.addEventListener('click', _e => this.select(i));
+
                 const resourceName = document.createElement('div');
                 resourceName.setAttribute('class', 'resource-name-cell');
                 resourceName.innerText = searchResult.title;
@@ -100,9 +102,7 @@ class SearchDialog {
                 includedIn.appendChild(referencingNotesList);
 
                 searchResult.notes.forEach(n => {
-                    const noteLink = document.createElement('a');
-                    noteLink.setAttribute('href', '#');
-                    noteLink.addEventListener('click', _e => this.select(i));
+                    const noteLink = document.createElement('div');
                     noteLink.innerText = `In: ${n.title}`;
                     referencingNotesList.appendChild(noteLink);
                 });

diff --git a/src/webview/resource-search-view.css b/src/webview/resource-search-view.css
@@ -2,8 +2,6 @@
     width: fit-content;
 	background-color: var(--joplin-background-color);
 	color: var(--joplin-color);
-	font-size: var(--joplin-font-size);
-	font-family: var(--joplin-font-family);
 }
 
 #resource-search {
@@ -19,6 +17,8 @@
     width: 100%;
     box-sizing: border-box;
     border-radius: 8px;
+    font-size: var(--joplin-font-size);
+	font-family: var(--joplin-font-family);
 }
 
 #search-results {
@@ -52,21 +52,31 @@
     display: table-row-group;
     padding: 12px 12px 12px 48px;
     border: 1px solid rgba(0, 0, 0, 0.12);
+    margin: 10px 0;
+}
+
+.search-result-row:hover {
+    background-color: rgba(0, 0, 0, 0.06);
 }
 
-.search-result-row:hover,
 .search-result-row[selected="true"] {
-  background-color: rgba(0, 0, 0, 0.06);
+  background-color: rgba(0, 0, 0, 0.144);
 }
 
 .resource-name-cell {
+    cursor: pointer;
     text-align: start;
     display: table-cell;
+    font-size: var(--joplin-font-size);
+	font-family: var(--joplin-font-family);
 }
 
 .referencing-notes-cell {
+    cursor: pointer;
     text-align: end;
     display: table-cell;
+    font-size: var(--joplin-font-size);
+	font-family: var(--joplin-font-family);
 }
 
 .referencing-notes-list {