Mobile layout and tree toggling
This commit is contained in:
Magnus Åhall
parent
58ddc86635
commit
f308764816
@ -30,48 +30,6 @@ h1 {
|
||||
.layout-crumbs #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%;
|
||||
}
|
||||
.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 {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
@ -383,8 +341,76 @@ header .menu {
|
||||
white-space: nowrap;
|
||||
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) {
|
||||
#app {
|
||||
/* 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;
|
||||
@ -393,6 +419,36 @@ header .menu {
|
||||
#app #tree {
|
||||
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 {
|
||||
margin-left: 16px;
|
||||
padding: 16px;
|
||||
|
||||
94
static/images/tree.svg
Normal file
94
static/images/tree.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
@ -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()
|
||||
|
||||
@ -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) {//{{{
|
||||
|
||||
@ -48,55 +48,6 @@ h1 {
|
||||
#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 {
|
||||
position: absolute;
|
||||
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) {
|
||||
#app {
|
||||
.layout-crumbs();
|
||||
|
||||
&.toggle-tree {
|
||||
.layout-tree-only();
|
||||
}
|
||||
}
|
||||
|
||||
.node-content {
|
||||
@ -482,3 +511,5 @@ header {
|
||||
justify-self: start;
|
||||
}
|
||||
}
|
||||
|
||||
// vim: foldmethod=marker
|
||||
|
||||
Loading…
Reference in New Issue
Block a user