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

Icons and keybindings for creating sub-documents and sibling documents

Browse source
This commit is contained in:
Magnus Åhall 2026-06-12 08:47:24 +02:00
parent ffb7f4ac53
commit 9af733be64
4 changed files with 81 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

2
static/css/notes2.css
View file

@ -9,7 +9,7 @@
--line-color: #ccc;
--tree-expander: 0px;
--functions-width: 150px;
--functions-width: 180px;
}
html {

49
static/images/icon_new_document.svg Normal file
View file

@ -0,0 +1,49 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="21.714331"
height="24"
viewBox="0 0 5.7452499 6.35"
version="1.1"
id="svg1"
inkscape:version="1.4.2 (ebf0e94, 2025-05-08)"
sodipodi:docname="icon_new_document.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
inkscape:zoom="0.74118967"
inkscape:cx="8.769685"
inkscape:cy="10.793459"
inkscape:window-width="1916"
inkscape:window-height="1041"
inkscape:window-x="1920"
inkscape:window-y="1080"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs1" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-102.65833,-145.78542)">
<title
id="title1">file-document-plus-outline</title>
<path
d="m 108.40358,150.62351 h -0.90715 v -0.90714 h -0.60476 v 0.90714 h -0.90715 v 0.60477 h 0.90715 v 0.90714 h 0.60476 v -0.90714 h 0.90715 m -5.14048,-5.44286 c -0.33565,0 -0.60477,0.27214 -0.60477,0.60475 v 4.83811 c 0,0.33563 0.26912,0.60475 0.60477,0.60475 h 2.3616 c -0.10892,-0.18747 -0.18446,-0.3931 -0.22075,-0.60475 h -2.14085 v -4.83811 h 2.11666 v 1.51191 h 1.51191 v 1.23372 c 0.0998,-0.0151 0.20259,-0.0242 0.30237,-0.0242 0.10286,0 0.2026,0.009 0.30239,0.0242 v -1.53609 l -1.81428,-1.81429 m -1.81429,3.02381 v 0.60476 h 2.41904 v -0.60476 m -2.41904,1.20952 v 0.60476 h 1.5119 v -0.60476 z"
id="path1"
style="stroke-width:0.302381" />
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

35
static/js/app.mjs
View file

@ -82,19 +82,18 @@ export class App {
keyHandler(event) {//{{{
let handled = true
if (event.key == 'F2') {
this.nodeUI.renameNode()
return
}
// All keybindings is Alt+Shift, since the popular browsers at the time (2023) allows to override thees.
// Most 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 (!(event.shiftKey && event.altKey) && !(event.key.toUpperCase() === 'S' && event.ctrlKey))
return
const SHIFT_ALT = event.shiftKey && !event.ctrlKey && event.altKey
const SHIFT_CTRL_ALT = event.shiftKey && event.ctrlKey && event.altKey
switch (event.key.toUpperCase()) {
case 'F2':
this.nodeUI.renameNode()
break
case 'T':
if (!SHIFT_ALT) break
if (document.activeElement.id === 'tree-nodes')
this.nodeUI.takeFocus()
else
@ -102,18 +101,25 @@ export class App {
break
case 'F':
if (!SHIFT_ALT) break
_mbus.dispatch('op-search')
break
case 'M':
if (!SHIFT_ALT) break
globalThis._mbus.dispatch('MARKDOWN_TOGGLE')
break
case 'N':
this.createNode()
if (SHIFT_ALT)
this.createNode()
else if (SHIFT_CTRL_ALT) {
this.createNode(this.currentNode?.ParentUUID)
}
break
case 'S':
if (!SHIFT_ALT) break
this.nodeUI.saveNode()
break
@ -142,17 +148,20 @@ export class App {
async saveNode() {//{{{
}//}}}
async createNode() {//{{{
let name = prompt("Name")
async createNode(createUnderUUID) {//{{{
const parentUUID = createUnderUUID ? createUnderUUID : this.currentNode.UUID
const p = createUnderUUID ? 'Name for sibling document' : 'Name for sub-document'
let name = prompt(p)
if (!name)
return
const nn = Node.create(name, this.currentNode.UUID)
const nn = Node.create(name, parentUUID)
await nn.save()
// Treenode is forcefully rerendered and children refetched to both show the new node
// and to get it resorted.
const parentTreenode = this.sidebar.getTreeNode(this.currentNode.UUID)
const parentTreenode = this.sidebar.getTreeNode(parentUUID)
await parentTreenode.render(true, true)
_mbus.dispatch('GO_TO_NODE', { nodeUUID: nn.UUID })
}//}}}

10
static/js/page_node.mjs
View file

@ -9,10 +9,11 @@ export class N2PageNodeUI extends CustomHTMLElement {
<style>
.el-functions {
display: grid;
grid-template-columns: 1fr repeat(3, min-content);
grid-template-columns: 1fr repeat(4, min-content);
grid-gap: 8px;
align-items: center;
justify-items: end;
cursor: pointer;
img {
height: 24px;
@ -29,6 +30,7 @@ export class N2PageNodeUI extends CustomHTMLElement {
<img data-el="icon-markdown">
<img data-el="icon-table-format" class="colorize" src="/images/${_VERSION}/icon_table.svg">
<img data-el="icon-history" class="colorize" src="/images/${_VERSION}/icon_history.svg">
<img data-el="icon-new-document" class="colorize" src="/images/${_VERSION}/icon_new_document.svg">
</div>
`
}// }}}
@ -83,6 +85,12 @@ export class N2PageNodeUI extends CustomHTMLElement {
})
this.elIconHistory.addEventListener('click', () => _mbus.dispatch('SHOW_PAGE', { page: 'history' }))
this.elIconSave.addEventListener('click', () => this.saveNode())
this.elIconNewDocument.addEventListener('click', event => {
if (event.shiftKey)
_app.createNode(this.node.ParentUUID)
else
_app.createNode()
})
this.showMarkdown(true)
}// }}}