Iaphetes/Apographe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

started work on search dialog

Browse source
This commit is contained in:
Iaphetes 2025-01-06 20:34:41 +01:00
parent 174c6c661a
commit 749a0322bc
3 changed files with 69 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/index.html
View file

@ -19,12 +19,13 @@
</head> </head>
<body> <body>
<div class="main"> <dialog id="search_dialog">
<dialog>
<button autofocus>Close</button>
<p>This modal dialog has a groovy backdrop!</p>
</dialog>
<div id="search_dialog_input" contenteditable></div>
</dialog>
<div class="main">
<div class="top-bar"> <div class="top-bar">
<button class="topbar_button" id="hide-sidebar"> <button class="topbar_button" id="hide-sidebar">
<img class="topbar_icon" src="images/menu_button.svg" /> <img class="topbar_icon" src="images/menu_button.svg" />

30
src/main.js
View file

@ -14,23 +14,35 @@ let path_template = convertFileSrc(placeholder_path);
let textarea = document.getElementById('markdown_input'); let textarea = document.getElementById('markdown_input');
export function render_markdown(){ export function render_markdown() {
text = textarea.innerText; text = textarea.innerText;
invoke("parse_markdown", { document: text, pathtemplate: path_template, basepath: "$HOME/Documents/Knowledgebase"}).then( invoke("parse_markdown", { document: text, pathtemplate: path_template, basepath: "$HOME/Documents/Knowledgebase" }).then(
(ret)=>{ (ret) => {
var tag_id = document.getElementById('rendered_markdown'); var tag_id = document.getElementById('rendered_markdown');
tag_id.innerHTML = "<pre>".concat("", ret).concat("", "</pre>"); 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(); 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 N = 300;
// const gData = { // const gData = {
// nodes: [...Array(N).keys()].map(i => ({ id: i })), // nodes: [...Array(N).keys()].map(i => ({ id: i })),

45
src/styles.css
View file

@ -4,9 +4,9 @@
:root { :root {
--main-bg-color: #2f2f2f; --main-bg-color: #2f2f2f;
--highlight-color: #5f5f5f; --highlight-color: #3f3f3f;
--text-color: #f6f6f6; --text-color: #f6f6f6;
--accent-color: #5f5f5f;
--sidebar-width: 3em; --sidebar-width: 3em;
--filetree-width: 10em; --filetree-width: 10em;
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;
@ -63,6 +63,7 @@
border-color: var(--highlight-color); border-color: var(--highlight-color);
/* border-radius: .5em; */ /* border-radius: .5em; */
} }
#markdown_input { #markdown_input {
grid-column: 1; grid-column: 1;
grid-row: 1; grid-row: 1;
@ -79,9 +80,11 @@
text-align: left; text-align: left;
color: var(--text-color); color: var(--text-color);
background-color: var(--main-bg-color); background-color: var(--main-bg-color);
img { img {
width: 100%; width: 100%;
} }
overflow-x: wrap; overflow-x: wrap;
overflow-y: scroll; overflow-y: scroll;
} }
@ -151,8 +154,10 @@ li {
border-color: var(--highlight-color); border-color: var(--highlight-color);
width: var(--filetree-width); width: var(--filetree-width);
overflow-x: scroll; overflow-x: scroll;
overflow-y: scroll; /* overflow-y: scroll; */
resize: width; overflow-y: hidden;
text-overflow: ellipsis;
resize: horizontal;
} }
.filetree-directory-button, .filetree-directory-button,
@ -164,13 +169,19 @@ li {
text-align: left; text-align: left;
transition: all 0.01s ease-out; transition: all 0.01s ease-out;
white-space: nowrap; white-space: nowrap;
overflow-y: visible; /* overflow-y: visible; */
overflow-y: hidden;
overflow: hidden;
color: var(--text-color); color: var(--text-color);
text-overflow: ellipsis;
} }
.filetree-node{
.filetree-node {
margin-left: 1em; margin-left: 1em;
overflow-y: hidden;
} }
.filetree-icon { .filetree-icon {
height: 1em; height: 1em;
background-color: transparent; background-color: transparent;
@ -188,3 +199,25 @@ li {
background-color: var(--highlight-color); background-color: var(--highlight-color);
/* Green */ /* 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);
}