magnus/Notes
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases 4 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
static/css/main.css
View File

@ -30,48 +30,6 @@ h1 {
.layout-crumbs #tree { .layout-crumbs #tree {
display: none; display: none;
} }
.layout-tree {
display: grid;
grid-template-areas: "header header" "tree crumbs" "tree child-nodes" "tree name" "tree content" "tree files" "tree blank";
grid-template-columns: min-content 1fr;
grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* files */ 1fr;
/* blank */
color: #fff;
height: 100%;
}
.layout-tree-only {
display: grid;
grid-template-areas: "header" "tree";
grid-template-columns: 1fr;
grid-template-rows: min-content /* header */ 1fr;
/* blank */
color: #fff;
height: 100%;
}
.layout-tree-only #crumbs {
display: none;
}
.layout-tree-only .child-nodes {
display: none;
}
.layout-tree-only .node-name {
display: none;
}
.layout-tree-only .node-content {
display: none;
}
.layout-tree-only #file-section {
display: none;
}
#app {
display: grid;
grid-template-areas: "header header" "tree crumbs" "tree child-nodes" "tree name" "tree content" "tree files" "tree blank";
grid-template-columns: min-content 1fr;
grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* files */ 1fr;
/* blank */
color: #fff;
height: 100%;
}
#blackout { #blackout {
position: absolute; position: absolute;
left: 0px; left: 0px;
@ -383,8 +341,76 @@ header .menu {
white-space: nowrap; white-space: nowrap;
text-align: right; text-align: right;
} }
.layout-tree {
display: grid;
grid-template-areas: "header header" "tree crumbs" "tree child-nodes" "tree name" "tree content" "tree files" "tree blank";
grid-template-columns: min-content 1fr;
grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* files */ 1fr;
/* blank */
color: #fff;
height: 100%;
}
.layout-tree-only {
display: grid;
grid-template-areas: "header" "tree";
grid-template-columns: 1fr;
grid-template-rows: min-content /* header */ 1fr;
/* blank */
color: #fff;
height: 100%;
}
.layout-tree-only #crumbs {
display: none;
}
.layout-tree-only .child-nodes {
display: none;
}
.layout-tree-only .node-name {
display: none;
}
.layout-tree-only .grow-wrap {
display: none;
}
.layout-tree-only #file-section {
display: none;
}
.layout-tree-only #tree {
display: block;
}
.layout-crumbs {
grid-template-areas: "header" "crumbs" "child-nodes" "name" "content" "files" "blank";
grid-template-columns: 1fr;
grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* files */ 1fr;
/* blank */
}
.layout-crumbs #tree {
display: none;
}
#app {
display: grid;
grid-template-areas: "header header" "tree crumbs" "tree child-nodes" "tree name" "tree content" "tree files" "tree blank";
grid-template-columns: min-content 1fr;
grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* files */ 1fr;
/* blank */
color: #fff;
height: 100%;
}
#app.toggle-tree {
/* blank */
grid-template-areas: "header" "crumbs" "child-nodes" "name" "content" "files" "blank";
grid-template-columns: 1fr;
grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* files */ 1fr;
/* blank */
}
#app.toggle-tree #tree {
display: none;
}
#app.toggle-tree #tree {
display: none;
}
@media only screen and (max-width: 932px) { @media only screen and (max-width: 932px) {
#app { #app {
/* blank */
grid-template-areas: "header" "crumbs" "child-nodes" "name" "content" "files" "blank"; grid-template-areas: "header" "crumbs" "child-nodes" "name" "content" "files" "blank";
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* files */ 1fr; grid-template-rows: min-content /* header */ min-content /* crumbs */ min-content /* child-nodes */ min-content /* name */ min-content /* content */ min-content /* files */ 1fr;
@ -393,6 +419,36 @@ header .menu {
#app #tree { #app #tree {
display: none; display: none;
} }
#app #tree {
display: none;
}
#app.toggle-tree {
display: grid;
grid-template-areas: "header" "tree";
grid-template-columns: 1fr;
grid-template-rows: min-content /* header */ 1fr;
/* blank */
color: #fff;
height: 100%;
}
#app.toggle-tree #crumbs {
display: none;
}
#app.toggle-tree .child-nodes {
display: none;
}
#app.toggle-tree .node-name {
display: none;
}
#app.toggle-tree .grow-wrap {
display: none;
}
#app.toggle-tree #file-section {
display: none;
}
#app.toggle-tree #tree {
display: block;
}
.node-content { .node-content {
margin-left: 16px; margin-left: 16px;
padding: 16px; padding: 16px;

94
static/images/tree.svg Normal file
View File

@ -0,0 +1,94 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="200"
height="200"
viewBox="0 0 52.916665 52.916668"
version="1.1"
id="svg8"
inkscape:version="1.2.1 (9c6d41e, 2022-07-14)"
sodipodi:docname="tree.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"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#000000"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:zoom="2.8284271"
inkscape:cx="119.67782"
inkscape:cy="85.206367"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="2190"
inkscape:window-height="1404"
inkscape:window-x="1463"
inkscape:window-y="16"
inkscape:window-maximized="0"
inkscape:showpageshadow="true"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#ffffff"
showborder="true" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-28.056879,-73.804949)">
<path
style="color:#000000;overflow:visible;fill:#ffffff;fill-rule:evenodd;stroke:#ffffff;stroke-width:3.175;stroke-dasharray:none;paint-order:markers stroke fill;stop-color:#000000"
d="M 38.344064,101.80647 H 56.43766"
id="path1042" />
<rect
style="color:#000000;overflow:visible;fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:3.175;stroke-dasharray:none;paint-order:markers stroke fill;stop-color:#000000"
id="rect1034"
width="22.225"
height="9.41115"
x="57.161045"
y="97.100899" />
<path
style="color:#000000;overflow:visible;fill:#ffffff;fill-rule:evenodd;stroke:#ffffff;stroke-width:3.175;stroke-dasharray:none;paint-order:markers stroke fill;stop-color:#000000"
d="m 37.513651,120.52082 h 18.91386"
id="path1040" />
<path
style="color:#000000;overflow:visible;fill:#ffffff;fill-rule:evenodd;stroke:#ffffff;stroke-width:3.17499999;stroke-dasharray:none;paint-order:markers stroke fill;stop-color:#000000"
d="M 39.101151,121.31457 V 84.009843"
id="path1038" />
<rect
style="color:#000000;overflow:visible;fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:3.175;stroke-dasharray:none;paint-order:markers stroke fill;stop-color:#000000"
id="rect478"
width="22.225"
height="9.41115"
x="29.644379"
y="75.392448" />
<rect
style="color:#000000;overflow:visible;fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:3.175;stroke-dasharray:none;paint-order:markers stroke fill;stop-color:#000000"
id="rect1036"
width="22.225"
height="9.41115"
x="57.161045"
y="115.72297" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

3
static/js/app.mjs
View File

@ -28,7 +28,6 @@ class App extends Component {
this.setStartNode() this.setStartNode()
}//}}} }//}}}
render() {//{{{ render() {//{{{
console.log('render', 'app')
if(!this.session.initialized) { if(!this.session.initialized) {
return html`<div>Validating session</div>` return html`<div>Validating session</div>`
} }
@ -229,7 +228,6 @@ class Tree extends Component {
.catch(this.responseError) .catch(this.responseError)
}//}}} }//}}}
render({ app }) {//{{{ render({ app }) {//{{{
console.log('render', 'tree')
let renderedTreeTrunk = this.treeTrunk.map(node=>{ let renderedTreeTrunk = this.treeTrunk.map(node=>{
this.treeNodeComponents[node.ID] = createRef() 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} />` 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) this.expanded = signal(this.props.node._expanded)
}//}}} }//}}}
render({ tree, node }) {//{{{ render({ tree, node }) {//{{{
console.log('render', 'treenode', node.Name)
let children = node.Children.map(node=>{ let children = node.Children.map(node=>{
tree.treeNodeComponents[node.ID] = createRef() 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)) window.addEventListener('keydown', evt=>this.keyHandler(evt))
}//}}} }//}}}
render() {//{{{ render() {//{{{
console.log('render', 'nodeUI')
if(this.node.value === null) if(this.node.value === null)
return return
@ -60,7 +58,7 @@ export class NodeUI extends Component {
${menu} ${menu}
${upload} ${upload}
<header class="${modified}" onclick=${()=>this.saveNode()}> <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="name">Notes</div>
<div class="add" onclick=${evt=>this.createNode(evt)}>+</div> <div class="add" onclick=${evt=>this.createNode(evt)}>+</div>
<div class="menu" onclick=${evt=>this.showMenu(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 // Tree needs to know another node is selected, in order to render any
// previously selected node not selected. // previously selected node not selected.
this.props.app.tree.setSelected(node) 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) {//{{{ createNode(evt) {//{{{

129
static/less/main.less
View File

@ -48,55 +48,6 @@ h1 {
#tree { display: none } #tree { display: none }
} }
.layout-tree {
display: grid;
grid-template-areas:
"header header"
"tree crumbs"
"tree child-nodes"
"tree name"
"tree content"
"tree files"
"tree blank"
;
grid-template-columns: min-content 1fr;
grid-template-rows:
min-content /* header */
min-content /* crumbs */
min-content /* child-nodes */
min-content /* name */
min-content /* content */
min-content /* files */
1fr; /* blank */
color: #fff;
height: 100%;
}
.layout-tree-only {
display: grid;
grid-template-areas:
"header"
"tree"
;
grid-template-columns: 1fr;
grid-template-rows:
min-content /* header */
1fr; /* blank */
color: #fff;
height: 100%;
#crumbs { display: none }
.child-nodes { display: none }
.node-name { display: none }
.node-content { display: none }
#file-section { display: none }
}
#app {
.layout-tree();
}
#blackout { #blackout {
position: absolute; position: absolute;
left: 0px; left: 0px;
@ -464,9 +415,87 @@ header {
} }
} }
.layout-tree {// {{{
display: grid;
grid-template-areas:
"header header"
"tree crumbs"
"tree child-nodes"
"tree name"
"tree content"
"tree files"
"tree blank"
;
grid-template-columns: min-content 1fr;
grid-template-rows:
min-content /* header */
min-content /* crumbs */
min-content /* child-nodes */
min-content /* name */
min-content /* content */
min-content /* files */
1fr; /* blank */
color: #fff;
height: 100%;
}// }}}
.layout-tree-only {// {{{
display: grid;
grid-template-areas:
"header"
"tree"
;
grid-template-columns: 1fr;
grid-template-rows:
min-content /* header */
1fr; /* blank */
color: #fff;
height: 100%;
#crumbs { display: none }
.child-nodes { display: none }
.node-name { display: none }
.grow-wrap { display: none }
#file-section { display: none }
#tree { display: block }
}// }}}
.layout-crumbs {// {{{
grid-template-areas:
"header"
"crumbs"
"child-nodes"
"name"
"content"
"files"
"blank"
;
grid-template-columns: 1fr;
grid-template-rows:
min-content /* header */
min-content /* crumbs */
min-content /* child-nodes */
min-content /* name */
min-content /* content */
min-content /* files */
1fr; /* blank */
#tree { display: none }
}// }}}
#app {
.layout-tree();
&.toggle-tree {
.layout-crumbs();
}
}
@media only screen and (max-width: 932px) { @media only screen and (max-width: 932px) {
#app { #app {
.layout-crumbs(); .layout-crumbs();
&.toggle-tree {
.layout-tree-only();
}
} }
.node-content { .node-content {
@ -482,3 +511,5 @@ header {
justify-self: start; justify-self: start;
} }
} }
// vim: foldmethod=marker