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>
<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" />

32
src/main.js
View file

@ -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 })),

49
src/styles.css
View file

@ -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);
}