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

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

12
src/main.js
View file

@ -29,7 +29,19 @@ textarea.addEventListener('input', ()=> {
});
const dialog = document.querySelector("dialog");
function showSearch() {
dialog.show();
}
document
.addEventListener("keydown",
function(event) {
if (event.key === "a") {
event.preventDefault();
showSearch();
}
});
// Random tree
// const N = 300;
// const gData = {

43
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;
@ -63,6 +63,7 @@
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;
}
@ -151,8 +154,10 @@ li {
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 {
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);
}