From 749a0322bc1fd359f4821c572632b181e15439a4 Mon Sep 17 00:00:00 2001
From: Iaphetes <iaphetes@mailfence.com>
Date: Mon, 6 Jan 2025 20:34:41 +0100
Subject: [PATCH] started work on search dialog

---
 src/index.html | 11 ++++++-----
 src/main.js    | 32 ++++++++++++++++++++++----------
 src/styles.css | 49 +++++++++++++++++++++++++++++++++++++++++--------
 3 files changed, 69 insertions(+), 23 deletions(-)
diff --git a/src/index.html b/src/index.html
index 9f60d6f..eedc9c0 100644
--- a/src/index.html
+++ b/src/index.html
@@ -19,12 +19,13 @@
 </head>
 
 <body>
-  <div class="main">
-    <dialog>
-      <button autofocus>Close</button>
-      <p>This modal dialog has a groovy backdrop!</p>
-    </dialog>
+  <dialog id="search_dialog">
 
+    <div id="search_dialog_input" contenteditable></div>
+  </dialog>
+
+
+  <div class="main">
     <div class="top-bar">
       <button class="topbar_button" id="hide-sidebar">
         <img class="topbar_icon" src="images/menu_button.svg" />
diff --git a/src/main.js b/src/main.js
index f925725..9be492d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,23 +14,35 @@ let path_template = convertFileSrc(placeholder_path);
 let textarea = document.getElementById('markdown_input');
 
 
-export function render_markdown(){
+export function render_markdown() {
   text = textarea.innerText;
-    invoke("parse_markdown", { document: text, pathtemplate: path_template, basepath: "$HOME/Documents/Knowledgebase"}).then(
-        (ret)=>{    
-    var tag_id = document.getElementById('rendered_markdown');
+  invoke("parse_markdown", { document: text, pathtemplate: path_template, basepath: "$HOME/Documents/Knowledgebase" }).then(
+    (ret) => {
+      var tag_id = document.getElementById('rendered_markdown');
       tag_id.innerHTML = "<pre>".concat("", ret).concat("", "</pre>");
-   // tag_id.innerHTML = assetUrl.concat(" ", ' \n <img src="'.concat("", assetUrl).concat("", '" alt="Girl in a jacket" width="500" height="600">'))
-        }
-    );
+      // tag_id.innerHTML = assetUrl.concat(" ", ' \n <img src="'.concat("", assetUrl).concat("", '" alt="Girl in a jacket" width="500" height="600">'))
+    }
+  );
 }
-textarea.addEventListener('input', ()=> {
+textarea.addEventListener('input', () => {
   render_markdown();
-    
+
 
 });
+const dialog = document.querySelector("dialog");
+function showSearch() {
+  dialog.show();
+}
 
- // Random tree
+document
+  .addEventListener("keydown",
+    function(event) {
+      if (event.key === "a") {
+        event.preventDefault();
+        showSearch();
+      }
+    });
+// Random tree
 // const N = 300;
 // const gData = {
 //   nodes: [...Array(N).keys()].map(i => ({ id: i })),
diff --git a/src/styles.css b/src/styles.css
index b8e34af..cf629cd 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -4,9 +4,9 @@
 
 :root {
   --main-bg-color: #2f2f2f;
-  --highlight-color: #5f5f5f;
+  --highlight-color: #3f3f3f;
   --text-color: #f6f6f6;
-
+  --accent-color: #5f5f5f;
   --sidebar-width: 3em;
   --filetree-width: 10em;
   font-family: Avenir, Helvetica, Arial, sans-serif;
@@ -60,9 +60,10 @@
   /* margin: .1em; */
   margin-left: .1em;
   border: solid;
-  border-color: var(--highlight-color); 
+  border-color: var(--highlight-color);
   /* border-radius: .5em; */
 }
+
 #markdown_input {
   grid-column: 1;
   grid-row: 1;
@@ -79,9 +80,11 @@
   text-align: left;
   color: var(--text-color);
   background-color: var(--main-bg-color);
+
   img {
     width: 100%;
   }
+
   overflow-x: wrap;
   overflow-y: scroll;
 }
@@ -148,11 +151,13 @@ li {
 .filetree {
   float: left;
   border: solid;
-  border-color: var(--highlight-color); 
+  border-color: var(--highlight-color);
   width: var(--filetree-width);
   overflow-x: scroll;
-  overflow-y: scroll;
-  resize: width;
+  /* overflow-y: scroll; */
+  overflow-y: hidden;
+  text-overflow: ellipsis;
+  resize: horizontal;
 }
 
 .filetree-directory-button,
@@ -164,13 +169,19 @@ li {
   text-align: left;
   transition: all 0.01s ease-out;
   white-space: nowrap;
-  overflow-y: visible;
+  /* overflow-y: visible; */
+  overflow-y: hidden;
+  overflow: hidden;
   color: var(--text-color);
+  text-overflow: ellipsis;
 
 }
-.filetree-node{
+
+.filetree-node {
   margin-left: 1em;
+  overflow-y: hidden;
 }
+
 .filetree-icon {
   height: 1em;
   background-color: transparent;
@@ -188,3 +199,25 @@ li {
   background-color: var(--highlight-color);
   /* Green */
 }
+
+dialog {
+
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) !important;
+  background-color: var(--highlight-color);
+  border: none;
+  border-radius: 10px;
+  box-shadow: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  width: 50%;
+  height: 20%;
+  margin: auto;
+}
+#search_dialog_input{
+  border: solid;
+  border-color: var(--accent-color);
+  border-top-right-radius:10px;
+  border-top-left-radius:10px;
+  color: var(--text-color);
+}
