magnus/Notes2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Toggle focus between tree and text.

Browse source
This commit is contained in:
Magnus Åhall 2025-02-09 20:22:26 +01:00
parent 8f15664b88
commit 4ce8ed9a08
3 changed files with 13 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
static/css/notes2.css
View file

@ -19,10 +19,14 @@ html {
}
#tree {
grid-area: tree;
padding: 16px;
padding: 16px 32px;
background-color: #333;
color: #ddd;
z-index: 100;
border-left: 2px solid #333;
}
#tree:focus {
border-left: 2px solid #FE5F55;
}
#tree #logo {
display: grid;
@ -188,7 +192,6 @@ html {
max-width: 900px;
white-space: pre-wrap;
word-wrap: break-word;
color: #f0f;
background: rgba(0, 255, 255, 0.5);
justify-self: center;
/* Hidden from view, clicks, and screen readers */

8
static/js/node.mjs
View file

@ -205,12 +205,15 @@ export class NodeUI extends Component {
// All keybindings is Alt+Shift, since the popular browsers at the time (2023) allows to override thees.
// Ctrl+S is the exception to using Alt+Shift, since it is overridable and in such widespread use for saving.
// Thus, the exception is acceptable to consequent use of alt+shift.
if (!(evt.shiftKey && evt.altKey) && !(evt.key.toUpperCase() == 'S' && evt.ctrlKey))
if (!(evt.shiftKey && evt.altKey) && !(evt.key.toUpperCase() === 'S' && evt.ctrlKey))
return
switch (evt.key.toUpperCase()) {
case 'T':
_notes2.current.tree.treeDiv.current?.focus()
if (document.activeElement.id === 'tree')
document.getElementById('node-content').focus()
else
document.getElementById('tree').focus()
break
/*
case 'C':
@ -260,7 +263,6 @@ export class NodeUI extends Component {
evt.stopPropagation()
}
}//}}}
}
class NodeContent extends Component {

6
static/less/notes2.less
View file

@ -48,13 +48,14 @@ html {
#tree {
grid-area: tree;
padding: 16px;
padding: 16px 32px;
background-color: #333;
color: #ddd;
z-index: 100; // Over crumbs shadow
border-left: 2px solid #333;
&:focus {
//background-color: #f0f;
border-left: 2px solid #FE5F55;
}
#logo {
@ -256,7 +257,6 @@ html {
max-width: 900px;
white-space: pre-wrap;
word-wrap: break-word;
color: #f0f;
background: rgba(0, 255, 255, 0.5);
justify-self: center;