magnus/Notes
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases 4 Packages Wiki Activity

Mobile layout and tree toggling

Browse source
This commit is contained in:
Magnus Åhall 2023-06-27 15:08:48 +02:00
parent 58ddc86635
commit f308764816
5 changed files with 277 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

3
static/js/app.mjs
View file

@ -28,7 +28,6 @@ class App extends Component {
this.setStartNode()
}//}}}
render() {//{{{
console.log('render', 'app')
if(!this.session.initialized) {
return html`<div>Validating session</div>`
}
@ -229,7 +228,6 @@ class Tree extends Component {
.catch(this.responseError)
}//}}}
render({ app }) {//{{{
console.log('render', 'tree')
let renderedTreeTrunk = this.treeTrunk.map(node=>{
this.treeNodeComponents[node.ID] = createRef()
return html`<${TreeNode} key=${"treenode_"+node.ID} tree=${this} node=${node} ref=${this.treeNodeComponents[node.ID]} selected=${node.ID == app.startNode.ID} />`
@ -272,7 +270,6 @@ class TreeNode extends Component {
this.expanded = signal(this.props.node._expanded)
}//}}}
render({ tree, node }) {//{{{
console.log('render', 'treenode', node.Name)
let children = node.Children.map(node=>{
tree.treeNodeComponents[node.ID] = createRef()

8
static/js/node.mjs
View file

@ -21,8 +21,6 @@ export class NodeUI extends Component {
window.addEventListener('keydown', evt=>this.keyHandler(evt))
}//}}}
render() {//{{{
console.log('render', 'nodeUI')
if(this.node.value === null)
return
@ -60,7 +58,7 @@ export class NodeUI extends Component {
${menu}
${upload}
<header class="${modified}" onclick=${()=>this.saveNode()}>
<div class="tree"><img src="/images/${window._VERSION}/tree.svg" /></div>
<div class="tree"><img src="/images/${window._VERSION}/tree.svg" onclick=${()=>document.getElementById('app').classList.toggle('toggle-tree')} /></div>
<div class="name">Notes</div>
<div class="add" onclick=${evt=>this.createNode(evt)}>+</div>
<div class="menu" onclick=${evt=>this.showMenu(evt)}>☰</div>
@ -150,6 +148,10 @@ export class NodeUI extends Component {
// Tree needs to know another node is selected, in order to render any
// previously selected node not selected.
this.props.app.tree.setSelected(node)
// Hide tree toggle, as this would be the next natural action to do manually anyway.
// At least in mobile mode.
document.getElementById('app').classList.remove('toggle-tree');
})
}//}}}
createNode(evt) {//{{{