Tweaking the dialog appearance

roman-r-m · Feb 7, 2021 · 2c8d9fc · 2c8d9fc
1 parent 777adf6
commit 2c8d9fc
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 21 deletions.
diff --git a/src/plugin/index.ts b/src/plugin/index.ts
@@ -51,7 +51,6 @@ async function transformResult(searchResult: any[]): Promise<SearchResult[]> {
 
 joplin.plugins.register({
 	onStart: async function() {
-		try {
 		const dbPath = await joplin.plugins.dataDir();
 		const db = await initDb(dbPath, joplin.plugins.require('sqlite3'));
 
@@ -64,9 +63,9 @@ joplin.plugins.register({
 		joplin.views.dialogs.addScript(resourceSearch, './resource-search-view.css')
 
 		joplin.views.dialogs.setHtml(resourceSearch, `
-		<div id="resource-search" style="display: flex; flex-direction: column; min-width: 400px; resize: both;">
+		<div id="resource-search">
 			<input id="query-input" type="text">
-			<div id="search-results" style="overflow: hidden auto;"></div>
+			<div id="search-results"></div>
 		</div>
 		`);
 
@@ -93,6 +92,5 @@ joplin.plugins.register({
 			},
 		})
 		await joplin.views.menuItems.create('Search in attachments', 'searchAttachments', MenuItemLocation.Edit);
-	} catch (e) { console.error(e)}
 	},
 });
diff --git a/src/webview/index.ts b/src/webview/index.ts
@@ -20,16 +20,15 @@ const getResources = debounce(async query => {
     searchResults.innerText = '';
 
     if (results.length > 0) {
-        searchResults.innerHTML = `
-            <div id="results-header">
-                <div id="file-title">Name</div><div id="referencing-notes">Included in</div>
-            </div>`;
+        // searchResults.innerHTML = `
+        //     <div id="results-header">
+        //         <div id="file-title">Name</div><div id="referencing-notes">Included in</div>
+        //     </div>`;
 
         for (let i = 0; i < results.length; i++) {
             const searchResult = results[i];
             const row = document.createElement('div');
             row.setAttribute('class', 'search-result-row');
-            row.setAttribute('style', 'display: flex; flex-direction: row;');
             searchResults.appendChild(row);
 
             const resourceName = document.createElement('div');
@@ -39,7 +38,6 @@ const getResources = debounce(async query => {
 
             const includedIn = document.createElement('div');
             includedIn.setAttribute('class', 'referencing-notes-cell');
-            includedIn.setAttribute('style', 'display: flex; flex-direction: column;');
             row.appendChild(includedIn);
             searchResult.notes.forEach(n =>{
                 const noteLink = document.createElement('a');

diff --git a/src/webview/resource-search-view.css b/src/webview/resource-search-view.css
@@ -1,36 +1,38 @@
 #joplin-plugin-content {
-    min-width: 400px;
+    width: fit-content;
 }
 
 #resource-search {
+    width: fit-content;
+    display: block;
+    flex-direction: column;
     min-width: 400px;
 }
 
 #query-input {
     width: 100%;
+    box-sizing: border-box;
 }
 
 #search-results {
     display: table;
+    width: 100%;
 }
 
 #results-header {
     display: table-header-group;
 }
 
-.results-row {
-    display: table-row;
+.search-result-row {
+    display: table-row-group;
 }
 
-#file-title,
-#referencing-notes {
-    text-align: center;
-    background-color: lightgray;
+.resource-name-cell {
+    text-align: start;
+    display: table-cell;
 }
 
-#file-title,
-#referencing-notes,
-.resource-name-cell,
 .referencing-notes-cell {
+    text-align: end;
     display: table-cell;
-    padding: 2px;
+}