Mostly working
This commit is contained in:
Magnus Åhall
parent
eaf5e2fb95
commit
58ddc86635
4
main.go
4
main.go
@ -20,7 +20,7 @@ import (
|
|||||||
_ "embed"
|
_ "embed"
|
||||||
)
|
)
|
||||||
|
|
||||||
const VERSION = "v0.1.5";
|
const VERSION = "v0.2.1";
|
||||||
const LISTEN_HOST = "0.0.0.0";
|
const LISTEN_HOST = "0.0.0.0";
|
||||||
const DB_SCHEMA = 6
|
const DB_SCHEMA = 6
|
||||||
|
|
||||||
@ -496,7 +496,7 @@ func nodeDownload(w http.ResponseWriter, r *http.Request) {// {{{
|
|||||||
}
|
}
|
||||||
|
|
||||||
w.Header().Add("Content-Type", files[0].MIME)
|
w.Header().Add("Content-Type", files[0].MIME)
|
||||||
w.Header().Add("Content-Disposition", fmt.Sprintf(`attachment; filename="%s"`, files[0].Filename))
|
w.Header().Add("Content-Disposition", fmt.Sprintf(`inline; filename="%s"`, files[0].Filename))
|
||||||
w.Header().Add("Content-Length", strconv.Itoa(int(finfo.Size())))
|
w.Header().Add("Content-Length", strconv.Itoa(int(finfo.Size())))
|
||||||
|
|
||||||
read := 1
|
read := 1
|
||||||
|
|||||||
@ -16,13 +16,61 @@ body {
|
|||||||
font-family: 'Liberation Mono', monospace;
|
font-family: 'Liberation Mono', monospace;
|
||||||
font-size: 14pt;
|
font-size: 14pt;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
h1 {
|
h1 {
|
||||||
color: #abc837;
|
color: #abc837;
|
||||||
}
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.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 {
|
#app {
|
||||||
display: grid;
|
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;
|
color: #fff;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
#blackout {
|
#blackout {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -109,16 +157,31 @@ h1 {
|
|||||||
}
|
}
|
||||||
header {
|
header {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr min-content min-content;
|
grid-area: header;
|
||||||
|
grid-template-columns: min-content 1fr min-content min-content;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: #abc837;
|
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
color: #333c11;
|
color: #333c11;
|
||||||
|
background: linear-gradient(to right, #009fff, #ec2f4b);
|
||||||
|
background: linear-gradient(to right, #f5af19, #f12711);
|
||||||
|
background: linear-gradient(to right, #fdc830, #f37335);
|
||||||
|
background: linear-gradient(to right, #8a2387, #e94057, #f27121);
|
||||||
|
background: linear-gradient(to right, #659999, #f4791f);
|
||||||
|
background: linear-gradient(to right, #3e5151, #decba4);
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
header.modified {
|
header.modified {
|
||||||
background: #c84a37;
|
background: #c84a37;
|
||||||
color: #faedeb;
|
color: #faedeb;
|
||||||
}
|
}
|
||||||
|
header .tree {
|
||||||
|
padding-left: 16px;
|
||||||
|
}
|
||||||
|
header .tree img {
|
||||||
|
display: block;
|
||||||
|
height: 24px;
|
||||||
|
width: 24px;
|
||||||
|
}
|
||||||
header .name {
|
header .name {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
padding-left: 16px;
|
padding-left: 16px;
|
||||||
@ -135,12 +198,54 @@ header .menu {
|
|||||||
user-select: none;
|
user-select: none;
|
||||||
-webkit-tap-highlight-color: transparent;
|
-webkit-tap-highlight-color: transparent;
|
||||||
}
|
}
|
||||||
|
#tree {
|
||||||
|
grid-area: tree;
|
||||||
|
padding: 16px;
|
||||||
|
background-color: #333;
|
||||||
|
color: #ddd;
|
||||||
|
font-size: 0.85em;
|
||||||
|
}
|
||||||
|
#tree .node {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 24px min-content;
|
||||||
|
grid-template-rows: min-content 1fr;
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
#tree .node .expand-toggle img {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
#tree .node .name {
|
||||||
|
white-space: nowrap;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
#tree .node .name:hover {
|
||||||
|
color: #ecbf00;
|
||||||
|
}
|
||||||
|
#tree .node .name.selected {
|
||||||
|
color: #ecbf00;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
#tree .node .children {
|
||||||
|
padding-left: 24px;
|
||||||
|
margin-left: 8px;
|
||||||
|
border-left: 1px solid #555;
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
}
|
||||||
|
#tree .node .children.collapsed {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#crumbs {
|
||||||
|
grid-area: crumbs;
|
||||||
|
background: linear-gradient(to right, #fdc830, #f37335);
|
||||||
|
}
|
||||||
.crumbs {
|
.crumbs {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
padding: 16px;
|
padding: 8px 16px;
|
||||||
background: #333;
|
background: #505050;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
box-shadow: 0px 5px 8px 0px rgba(128, 128, 128, 0.5);
|
||||||
}
|
}
|
||||||
.crumbs .crumb {
|
.crumbs .crumb {
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
@ -162,15 +267,15 @@ header .menu {
|
|||||||
margin-left: 0px;
|
margin-left: 0px;
|
||||||
}
|
}
|
||||||
.child-nodes {
|
.child-nodes {
|
||||||
|
grid-area: child-nodes;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
padding: 16px 16px 0px 16px;
|
padding: 16px 16px 0px 16px;
|
||||||
background-color: #505050;
|
|
||||||
}
|
}
|
||||||
.child-nodes .child-node {
|
.child-nodes .child-node {
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background-color: #2f2f2f;
|
background-color: #333;
|
||||||
margin-right: 12px;
|
margin-right: 12px;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@ -180,33 +285,78 @@ header .menu {
|
|||||||
-webkit-tap-highlight-color: transparent;
|
-webkit-tap-highlight-color: transparent;
|
||||||
}
|
}
|
||||||
.node-name {
|
.node-name {
|
||||||
margin: 32px 0 16px 0;
|
grid-area: name;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
color: #000;
|
color: #000;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
margin-top: 32px;
|
||||||
|
margin-bottom: 32px;
|
||||||
}
|
}
|
||||||
.node-content {
|
.node-content {
|
||||||
|
grid-area: content;
|
||||||
justify-self: center;
|
justify-self: center;
|
||||||
padding: 16px 32px;
|
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
font-size: 0.85em;
|
font-size: 0.85em;
|
||||||
color: #333;
|
color: #333;
|
||||||
width: 900px;
|
width: calc(100% - 32px);
|
||||||
|
max-width: 900px;
|
||||||
resize: none;
|
resize: none;
|
||||||
border: none;
|
border: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
.node-content:invalid {
|
.node-content:invalid {
|
||||||
background: #f5f5f5;
|
background: #f5f5f5;
|
||||||
|
padding-top: 16px;
|
||||||
}
|
}
|
||||||
#file-section {
|
/* ============================================================= *
|
||||||
|
* Textarea replicates the height of an element expanding height *
|
||||||
|
* ============================================================= */
|
||||||
|
.grow-wrap {
|
||||||
|
/* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
|
||||||
|
display: grid;
|
||||||
|
grid-area: content;
|
||||||
|
}
|
||||||
|
.grow-wrap::after {
|
||||||
|
/* Note the weird space! Needed to preventy jumpy behavior */
|
||||||
|
content: attr(data-replicated-value) " ";
|
||||||
|
/* This is how textarea text behaves */
|
||||||
|
width: calc(100% - 32px);
|
||||||
|
max-width: 900px;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-wrap: break-word;
|
||||||
|
color: #f0f;
|
||||||
|
background: rgba(0, 255, 255, 0.5);
|
||||||
justify-self: center;
|
justify-self: center;
|
||||||
width: 900px;
|
/* Hidden from view, clicks, and screen readers */
|
||||||
margin-top: 16px;
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
.grow-wrap > textarea {
|
||||||
|
/* You could leave this, but after a user resizes, then it ruins the auto sizing */
|
||||||
|
resize: none;
|
||||||
|
/* Firefox shows scrollbar on growth, you can hide like this. */
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.grow-wrap > textarea,
|
||||||
|
.grow-wrap::after {
|
||||||
|
/* Identical styling required!! */
|
||||||
|
padding: 0.5rem;
|
||||||
|
font: inherit;
|
||||||
|
/* Place on top of each other */
|
||||||
|
grid-area: 1 / 1 / 2 / 2;
|
||||||
|
}
|
||||||
|
/* ============================================================= */
|
||||||
|
#file-section {
|
||||||
|
grid-area: files;
|
||||||
|
justify-self: center;
|
||||||
|
width: calc(100% - 32px);
|
||||||
|
max-width: 900px;
|
||||||
padding: 32px;
|
padding: 32px;
|
||||||
background: #f5f5f5;
|
background: #f5f5f5;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-top: 32px;
|
||||||
|
margin-bottom: 32px;
|
||||||
}
|
}
|
||||||
#file-section .header {
|
#file-section .header {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@ -233,12 +383,17 @@ header .menu {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
.tree {
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
@media only screen and (max-width: 932px) {
|
@media only screen and (max-width: 932px) {
|
||||||
|
#app {
|
||||||
|
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 #tree {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
.node-content {
|
.node-content {
|
||||||
width: calc(100% - 32px);
|
|
||||||
margin-left: 16px;
|
margin-left: 16px;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
justify-self: start;
|
justify-self: start;
|
||||||
|
|||||||
74
static/images/collapsed.svg
Normal file
74
static/images/collapsed.svg
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="399.99997"
|
||||||
|
height="399.99997"
|
||||||
|
viewBox="0 0 105.83332 105.83333"
|
||||||
|
version="1.1"
|
||||||
|
id="svg8"
|
||||||
|
inkscape:version="1.2.1 (9c6d41e, 2022-07-14)"
|
||||||
|
sodipodi:docname="collapsed.svg"
|
||||||
|
xml:space="preserve"
|
||||||
|
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="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="1.4142136"
|
||||||
|
inkscape:cx="304.05591"
|
||||||
|
inkscape:cy="298.39905"
|
||||||
|
inkscape:document-units="px"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
showgrid="false"
|
||||||
|
units="px"
|
||||||
|
inkscape:window-width="1916"
|
||||||
|
inkscape:window-height="1404"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="16"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
inkscape:showpageshadow="true"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d6d6d6"
|
||||||
|
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(-42.756321,-24.613384)"><rect
|
||||||
|
style="color:#000000;overflow:visible;fill:#537979;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.264583;paint-order:markers stroke fill;stop-color:#000000"
|
||||||
|
id="rect5470"
|
||||||
|
width="105.83333"
|
||||||
|
height="105.83333"
|
||||||
|
x="42.756321"
|
||||||
|
y="24.613384"
|
||||||
|
rx="21.166666"
|
||||||
|
ry="21.166666" /><rect
|
||||||
|
style="color:#000000;overflow:visible;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.264583;paint-order:markers stroke fill;stop-color:#000000"
|
||||||
|
id="rect6360"
|
||||||
|
width="63.5"
|
||||||
|
height="18.520834"
|
||||||
|
x="63.922985"
|
||||||
|
y="68.26963"
|
||||||
|
rx="5.2916665"
|
||||||
|
ry="5.2916665" /><rect
|
||||||
|
style="color:#000000;overflow:visible;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.264583;paint-order:markers stroke fill;stop-color:#000000"
|
||||||
|
id="rect10171"
|
||||||
|
width="63.5"
|
||||||
|
height="18.520834"
|
||||||
|
x="-109.28004"
|
||||||
|
y="86.412567"
|
||||||
|
rx="5.2916665"
|
||||||
|
ry="5.2916665"
|
||||||
|
transform="rotate(-90)" /></g></svg>
|
||||||
|
After Width: | Height: | Size: 2.7 KiB |
65
static/images/expanded.svg
Normal file
65
static/images/expanded.svg
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="399.99997"
|
||||||
|
height="399.99997"
|
||||||
|
viewBox="0 0 105.83332 105.83333"
|
||||||
|
version="1.1"
|
||||||
|
id="svg8"
|
||||||
|
inkscape:version="1.2.1 (9c6d41e, 2022-07-14)"
|
||||||
|
sodipodi:docname="expanded.svg"
|
||||||
|
xml:space="preserve"
|
||||||
|
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="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="1.4142136"
|
||||||
|
inkscape:cx="304.05591"
|
||||||
|
inkscape:cy="298.39905"
|
||||||
|
inkscape:document-units="px"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
showgrid="false"
|
||||||
|
units="px"
|
||||||
|
inkscape:window-width="1916"
|
||||||
|
inkscape:window-height="1404"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="16"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
inkscape:showpageshadow="true"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d6d6d6"
|
||||||
|
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(-42.756321,-24.613384)"><rect
|
||||||
|
style="color:#000000;overflow:visible;fill:#537979;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.264583;paint-order:markers stroke fill;stop-color:#000000"
|
||||||
|
id="rect5470"
|
||||||
|
width="105.83333"
|
||||||
|
height="105.83333"
|
||||||
|
x="42.756321"
|
||||||
|
y="24.613384"
|
||||||
|
rx="21.166666"
|
||||||
|
ry="21.166666" /><rect
|
||||||
|
style="color:#000000;overflow:visible;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.264583;paint-order:markers stroke fill;stop-color:#000000"
|
||||||
|
id="rect6360"
|
||||||
|
width="63.5"
|
||||||
|
height="18.520834"
|
||||||
|
x="63.922985"
|
||||||
|
y="68.26963"
|
||||||
|
rx="5.2916665"
|
||||||
|
ry="5.2916665" /></g></svg>
|
||||||
|
After Width: | Height: | Size: 2.4 KiB |
57
static/images/leaf.svg
Normal file
57
static/images/leaf.svg
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="399.99997"
|
||||||
|
height="399.99997"
|
||||||
|
viewBox="0 0 105.83332 105.83333"
|
||||||
|
version="1.1"
|
||||||
|
id="svg8"
|
||||||
|
inkscape:version="1.2.1 (9c6d41e, 2022-07-14)"
|
||||||
|
sodipodi:docname="leaf.svg"
|
||||||
|
xml:space="preserve"
|
||||||
|
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="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="1.4142136"
|
||||||
|
inkscape:cx="303.34881"
|
||||||
|
inkscape:cy="297.69195"
|
||||||
|
inkscape:document-units="px"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
showgrid="false"
|
||||||
|
units="px"
|
||||||
|
inkscape:window-width="1916"
|
||||||
|
inkscape:window-height="1404"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="16"
|
||||||
|
inkscape:window-maximized="0"
|
||||||
|
inkscape:showpageshadow="true"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d6d6d6"
|
||||||
|
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(-42.756321,-24.613384)"><rect
|
||||||
|
style="color:#000000;overflow:visible;fill:#555555;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.264583;paint-order:markers stroke fill;stop-color:#000000"
|
||||||
|
id="rect5470"
|
||||||
|
width="105.83333"
|
||||||
|
height="105.83333"
|
||||||
|
x="42.756321"
|
||||||
|
y="24.613384"
|
||||||
|
rx="21.166666"
|
||||||
|
ry="21.166666" /></g></svg>
|
||||||
|
After Width: | Height: | Size: 2.0 KiB |
@ -3,7 +3,7 @@ import { signal } from 'preact/signals'
|
|||||||
import { h, Component, render, createRef } from 'preact'
|
import { h, Component, render, createRef } from 'preact'
|
||||||
import htm from 'htm'
|
import htm from 'htm'
|
||||||
import { Session } from 'session'
|
import { Session } from 'session'
|
||||||
import { NodeUI } from 'node'
|
import { Node, NodeUI } from 'node'
|
||||||
const html = htm.bind(h)
|
const html = htm.bind(h)
|
||||||
|
|
||||||
class App extends Component {
|
class App extends Component {
|
||||||
@ -19,10 +19,16 @@ class App extends Component {
|
|||||||
this.session = new Session(this)
|
this.session = new Session(this)
|
||||||
this.session.initialize()
|
this.session.initialize()
|
||||||
this.login = createRef()
|
this.login = createRef()
|
||||||
|
this.tree = null
|
||||||
this.nodeUI = createRef()
|
this.nodeUI = createRef()
|
||||||
this.nodeModified = signal(false)
|
this.nodeModified = signal(false)
|
||||||
|
|
||||||
|
this.startNode = null
|
||||||
|
|
||||||
|
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>`
|
||||||
}
|
}
|
||||||
@ -31,7 +37,10 @@ class App extends Component {
|
|||||||
return html`<${Login} ref=${this.login} />`
|
return html`<${Login} ref=${this.login} />`
|
||||||
}
|
}
|
||||||
|
|
||||||
return html`<${NodeUI} app=${this} ref=${this.nodeUI} />`
|
return html`
|
||||||
|
<${Tree} app=${this} ref=${this.tree} />
|
||||||
|
<${NodeUI} app=${this} ref=${this.nodeUI} />
|
||||||
|
`
|
||||||
}//}}}
|
}//}}}
|
||||||
|
|
||||||
wsLoop() {//{{{
|
wsLoop() {//{{{
|
||||||
@ -131,6 +140,11 @@ class App extends Component {
|
|||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}//}}}
|
}//}}}
|
||||||
|
setStartNode() {//{{{
|
||||||
|
let urlParams = new URLSearchParams(window.location.search)
|
||||||
|
let nodeID = urlParams.get('node')
|
||||||
|
this.startNode = new Node(this, nodeID ? parseInt(nodeID) : 0)
|
||||||
|
}//}}}
|
||||||
}
|
}
|
||||||
|
|
||||||
class Login extends Component {
|
class Login extends Component {
|
||||||
@ -168,6 +182,125 @@ class Login extends Component {
|
|||||||
}//}}}
|
}//}}}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
class Tree extends Component {
|
||||||
|
constructor(props) {//{{{
|
||||||
|
super(props)
|
||||||
|
this.treeNodes = {}
|
||||||
|
this.treeNodeComponents = {}
|
||||||
|
this.treeTrunk = []
|
||||||
|
this.selectedTreeNode = null
|
||||||
|
|
||||||
|
this.props.app.tree = this
|
||||||
|
|
||||||
|
this.props.app.request('/node/tree', { StartNodeID: 0 })
|
||||||
|
.then(res=>{
|
||||||
|
// A tree of nodes is built. This requires the list of nodes
|
||||||
|
// returned from the server to be sorted in such a way that
|
||||||
|
// a parent node always appears before a child node.
|
||||||
|
// The server uses a recursive SQL query delivering this.
|
||||||
|
res.Nodes.forEach(nodeData=>{
|
||||||
|
let node = new Node(
|
||||||
|
this,
|
||||||
|
nodeData.ID,
|
||||||
|
)
|
||||||
|
node.Children = []
|
||||||
|
node.Crumbs = []
|
||||||
|
node.Files = []
|
||||||
|
node.Level = nodeData.Level
|
||||||
|
node.Name = nodeData.Name
|
||||||
|
node.ParentID = nodeData.ParentID
|
||||||
|
node.Updated = nodeData.Updated
|
||||||
|
node.UserID = nodeData.UserID
|
||||||
|
|
||||||
|
this.treeNodes[node.ID] = node
|
||||||
|
|
||||||
|
if(node.ParentID == 0)
|
||||||
|
this.treeTrunk.push(node)
|
||||||
|
else if(this.treeNodes[node.ParentID] !== undefined)
|
||||||
|
this.treeNodes[node.ParentID].Children.push(node)
|
||||||
|
})
|
||||||
|
// When starting with an explicit node value, expanding all nodes
|
||||||
|
// on its path gives the user a sense of location. Not necessarily working
|
||||||
|
// as the start node isn't guaranteed to have returned data yet.
|
||||||
|
this.crumbsUpdateNodes()
|
||||||
|
this.forceUpdate()
|
||||||
|
|
||||||
|
})
|
||||||
|
.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} />`
|
||||||
|
})
|
||||||
|
return html`<div id="tree">${renderedTreeTrunk}</div>`
|
||||||
|
}//}}}
|
||||||
|
|
||||||
|
setSelected(node) {//{{{
|
||||||
|
if(this.selectedTreeNode)
|
||||||
|
this.selectedTreeNode.selected.value = false
|
||||||
|
|
||||||
|
this.selectedTreeNode = this.treeNodeComponents[node.ID].current
|
||||||
|
this.selectedTreeNode.selected.value = true
|
||||||
|
this.selectedTreeNode.expanded.value = true
|
||||||
|
}//}}}
|
||||||
|
crumbsUpdateNodes(node) {//{{{
|
||||||
|
this.props.app.startNode.Crumbs.forEach(crumb=>{
|
||||||
|
// Start node is loaded before the tree.
|
||||||
|
let node = this.treeNodes[crumb.ID]
|
||||||
|
if(node)
|
||||||
|
node._expanded = true
|
||||||
|
|
||||||
|
// Tree is done before the start node.
|
||||||
|
let component = this.treeNodeComponents[crumb.ID]
|
||||||
|
if(component && component.current)
|
||||||
|
component.current.expanded.value = true
|
||||||
|
})
|
||||||
|
|
||||||
|
// Will be undefined when called from tree initialization
|
||||||
|
// (as tree nodes aren't rendered yet)
|
||||||
|
if(node !== undefined)
|
||||||
|
this.setSelected(node)
|
||||||
|
}//}}}
|
||||||
|
}
|
||||||
|
|
||||||
|
class TreeNode extends Component {
|
||||||
|
constructor(props) {//{{{
|
||||||
|
super(props)
|
||||||
|
this.selected = signal(props.selected)
|
||||||
|
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()
|
||||||
|
return html`<${TreeNode} key=${"treenode_"+node.ID} tree=${tree} node=${node} ref=${tree.treeNodeComponents[node.ID]} selected=${node.ID == tree.props.app.startNode.ID} />`
|
||||||
|
})
|
||||||
|
|
||||||
|
let expandImg = ''
|
||||||
|
if(node.Children.length == 0)
|
||||||
|
expandImg = html`<img src="/images/${window._VERSION}/leaf.svg" />`
|
||||||
|
else {
|
||||||
|
if(this.expanded.value)
|
||||||
|
expandImg = html`<img src="/images/${window._VERSION}/expanded.svg" />`
|
||||||
|
else
|
||||||
|
expandImg = html`<img src="/images/${window._VERSION}/collapsed.svg" />`
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
let selected = (this.selected.value ? 'selected' : '')
|
||||||
|
|
||||||
|
return html`
|
||||||
|
<div class="node">
|
||||||
|
<div class="expand-toggle" onclick=${()=>this.expanded.value ^= true}>${expandImg}</div>
|
||||||
|
<div class="name ${selected}" onclick=${()=>window._app.current.nodeUI.current.goToNode(node.ID)}>${node.Name}</div>
|
||||||
|
<div class="children ${node.Children.length > 0 && this.expanded.value ? 'expanded' : 'collapsed'}">${children}</div>
|
||||||
|
</div>`
|
||||||
|
}//}}}
|
||||||
|
}
|
||||||
|
|
||||||
// Init{{{
|
// Init{{{
|
||||||
window._app = createRef()
|
window._app = createRef()
|
||||||
window._resourceModels = []
|
window._resourceModels = []
|
||||||
|
|||||||
@ -7,28 +7,26 @@ export class NodeUI extends Component {
|
|||||||
constructor() {//{{{
|
constructor() {//{{{
|
||||||
super()
|
super()
|
||||||
this.menu = signal(false)
|
this.menu = signal(false)
|
||||||
this.tree = signal(null)
|
|
||||||
this.node = signal(null)
|
this.node = signal(null)
|
||||||
this.nodeContent = createRef()
|
this.nodeContent = createRef()
|
||||||
this.upload = signal(false)
|
this.upload = signal(false)
|
||||||
|
|
||||||
window.addEventListener('popstate', evt=>{
|
window.addEventListener('popstate', evt=>{
|
||||||
if(evt.state && evt.state.hasOwnProperty('nodeID'))
|
if(evt.state && evt.state.hasOwnProperty('nodeID'))
|
||||||
this.goToNode(evt.state.nodeID, true)
|
this.goToNode(evt.state.nodeID, true)
|
||||||
else
|
else
|
||||||
this.goToNode(0, true)
|
this.goToNode(0, true)
|
||||||
})
|
})
|
||||||
|
|
||||||
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
|
||||||
|
|
||||||
let node = this.node.value
|
let node = this.node.value
|
||||||
let tree = this.tree.value
|
|
||||||
|
|
||||||
let treeHTML = html`Tree`
|
|
||||||
if(tree !== null)
|
|
||||||
treeHTML = this.renderTree(tree)
|
|
||||||
|
|
||||||
let crumbs = [
|
let crumbs = [
|
||||||
html`<div class="crumb" onclick=${()=>this.goToNode(0)}>Start</div>`
|
html`<div class="crumb" onclick=${()=>this.goToNode(0)}>Start</div>`
|
||||||
@ -62,12 +60,15 @@ 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="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>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
<div id="crumbs">
|
||||||
<div class="crumbs">${crumbs}</crumbs>
|
<div class="crumbs">${crumbs}</crumbs>
|
||||||
|
</div>
|
||||||
|
|
||||||
${children.length > 0 ? html`<div class="child-nodes">${children}</div>` : html``}
|
${children.length > 0 ? html`<div class="child-nodes">${children}</div>` : html``}
|
||||||
|
|
||||||
@ -80,12 +81,12 @@ export class NodeUI extends Component {
|
|||||||
`
|
`
|
||||||
}//}}}
|
}//}}}
|
||||||
componentDidMount() {//{{{
|
componentDidMount() {//{{{
|
||||||
let urlParams = new URLSearchParams(window.location.search)
|
this.props.app.startNode.retrieve(node=>{
|
||||||
let nodeID = urlParams.get('node')
|
|
||||||
let root = new Node(this.props.app, nodeID ? parseInt(nodeID) : 0)
|
|
||||||
|
|
||||||
root.retrieve(node=>{
|
|
||||||
this.node.value = node
|
this.node.value = node
|
||||||
|
|
||||||
|
// The tree isn't guaranteed to have loaded yet. This is also run from
|
||||||
|
// the tree code, in case the node hasn't loaded.
|
||||||
|
this.props.app.tree.crumbsUpdateNodes(node)
|
||||||
})
|
})
|
||||||
}//}}}
|
}//}}}
|
||||||
|
|
||||||
@ -138,10 +139,17 @@ export class NodeUI extends Component {
|
|||||||
|
|
||||||
if(!dontPush)
|
if(!dontPush)
|
||||||
history.pushState({ nodeID }, '', `/?node=${nodeID}`)
|
history.pushState({ nodeID }, '', `/?node=${nodeID}`)
|
||||||
|
|
||||||
|
// New node is fetched in order to retrieve content and files.
|
||||||
|
// Such data is unnecessary to transfer for tree/navigational purposes.
|
||||||
let node = new Node(this.props.app, nodeID)
|
let node = new Node(this.props.app, nodeID)
|
||||||
node.retrieve(node=>{
|
node.retrieve(node=>{
|
||||||
this.props.app.nodeModified.value = false
|
this.props.app.nodeModified.value = false
|
||||||
this.node.value = node
|
this.node.value = node
|
||||||
|
|
||||||
|
// Tree needs to know another node is selected, in order to render any
|
||||||
|
// previously selected node not selected.
|
||||||
|
this.props.app.tree.setSelected(node)
|
||||||
})
|
})
|
||||||
}//}}}
|
}//}}}
|
||||||
createNode(evt) {//{{{
|
createNode(evt) {//{{{
|
||||||
@ -174,12 +182,6 @@ export class NodeUI extends Component {
|
|||||||
this.menu.value = false
|
this.menu.value = false
|
||||||
})
|
})
|
||||||
}//}}}
|
}//}}}
|
||||||
retrieveTree() {//{{{
|
|
||||||
this.node.value.children(children=>this.tree.value = children)
|
|
||||||
}//}}}
|
|
||||||
renderTree(tree) {//{{{
|
|
||||||
return tree.map(node=>html`<div class="node" style="margin-left: ${(node.Level+1) * 32}px">${node.Name}</div>`)
|
|
||||||
}//}}}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
class NodeContent extends Component {
|
class NodeContent extends Component {
|
||||||
@ -193,11 +195,14 @@ class NodeContent extends Component {
|
|||||||
}//}}}
|
}//}}}
|
||||||
render({ content }) {//{{{
|
render({ content }) {//{{{
|
||||||
return html`
|
return html`
|
||||||
<textarea class="node-content" ref=${this.contentDiv} oninput=${()=>this.contentChanged()} required rows=1>${content}</textarea>
|
<div class="grow-wrap">
|
||||||
|
<textarea id="node-content" class="node-content" ref=${this.contentDiv} oninput=${()=>this.contentChanged()} required rows=1>${content}</textarea>
|
||||||
|
</div>
|
||||||
`
|
`
|
||||||
}//}}}
|
}//}}}
|
||||||
componentDidMount() {//{{{
|
componentDidMount() {//{{{
|
||||||
this.resize()
|
this.resize()
|
||||||
|
window.addEventListener('resize', ()=>this.resize())
|
||||||
}//}}}
|
}//}}}
|
||||||
componentDidUpdate() {//{{{
|
componentDidUpdate() {//{{{
|
||||||
this.resize()
|
this.resize()
|
||||||
@ -207,9 +212,9 @@ class NodeContent extends Component {
|
|||||||
this.resize()
|
this.resize()
|
||||||
}//}}}
|
}//}}}
|
||||||
resize() {//{{{
|
resize() {//{{{
|
||||||
let textarea = this.contentDiv.current;
|
let textarea = document.getElementById('node-content')
|
||||||
textarea.style.height = "auto";
|
if(textarea)
|
||||||
textarea.style.height = textarea.scrollHeight + 16 + "px";
|
textarea.parentNode.dataset.replicatedValue = textarea.value
|
||||||
}//}}}
|
}//}}}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -249,7 +254,7 @@ class NodeFiles extends Component {
|
|||||||
}//}}}
|
}//}}}
|
||||||
}
|
}
|
||||||
|
|
||||||
class Node {
|
export class Node {
|
||||||
constructor(app, nodeID) {//{{{
|
constructor(app, nodeID) {//{{{
|
||||||
this.app = app
|
this.app = app
|
||||||
this.ID = nodeID
|
this.ID = nodeID
|
||||||
@ -260,6 +265,9 @@ class Node {
|
|||||||
this.Children = []
|
this.Children = []
|
||||||
this.Crumbs = []
|
this.Crumbs = []
|
||||||
this.Files = []
|
this.Files = []
|
||||||
|
this._expanded = false // start value for the TreeNode component,
|
||||||
|
// it doesn't control it afterwards.
|
||||||
|
// Used to expand the crumbs upon site loading.
|
||||||
}//}}}
|
}//}}}
|
||||||
retrieve(callback) {//{{{
|
retrieve(callback) {//{{{
|
||||||
this.app.request('/node/retrieve', { ID: this.ID })
|
this.app.request('/node/retrieve', { ID: this.ID })
|
||||||
@ -340,13 +348,6 @@ class Node {
|
|||||||
a.remove(); //afterwards we remove the element again
|
a.remove(); //afterwards we remove the element again
|
||||||
})
|
})
|
||||||
}//}}}
|
}//}}}
|
||||||
children(callback) {//{{{
|
|
||||||
this.app.request('/node/tree', { StartNodeID: this.ID })
|
|
||||||
.then(res=>{
|
|
||||||
callback(res.Nodes)
|
|
||||||
})
|
|
||||||
.catch(this.app.responseError)
|
|
||||||
}//}}}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
class Menu extends Component {
|
class Menu extends Component {
|
||||||
|
|||||||
@ -19,15 +19,82 @@ html, body {
|
|||||||
font-size: @fontsize;
|
font-size: @fontsize;
|
||||||
|
|
||||||
background-color: @background;
|
background-color: @background;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
color: @accent_1;
|
color: @accent_1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#app {
|
.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 }
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-tree {
|
||||||
display: grid;
|
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;
|
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 {
|
||||||
@ -129,17 +196,34 @@ h1 {
|
|||||||
|
|
||||||
header {
|
header {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr min-content min-content;
|
grid-area: header;
|
||||||
|
grid-template-columns: min-content 1fr min-content min-content;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: @accent_1;
|
//background: @accent_1;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
color: darken(@accent_1, 35%);
|
color: darken(@accent_1, 35%);
|
||||||
|
background: linear-gradient(to right, #009fff, #ec2f4b);
|
||||||
|
background: linear-gradient(to right, #f5af19, #f12711);
|
||||||
|
background: linear-gradient(to right, #fdc830, #f37335);
|
||||||
|
background: linear-gradient(to right, #8a2387, #e94057, #f27121);
|
||||||
|
background: linear-gradient(to right, #659999, #f4791f);
|
||||||
|
background: linear-gradient(to right, #3e5151, #decba4);
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
&.modified {
|
&.modified {
|
||||||
background: @accent_3;
|
background: @accent_3;
|
||||||
color: lighten(@accent_3, 45%);
|
color: lighten(@accent_3, 45%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tree {
|
||||||
|
padding-left: 16px;
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
height: 24px;
|
||||||
|
width: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
padding-left: 16px;
|
padding-left: 16px;
|
||||||
@ -160,12 +244,68 @@ header {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#tree {
|
||||||
|
grid-area: tree;
|
||||||
|
padding: 16px;
|
||||||
|
background-color: #333;
|
||||||
|
color: #ddd;
|
||||||
|
font-size: 0.85em;
|
||||||
|
|
||||||
|
.node {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 24px min-content;
|
||||||
|
grid-template-rows:
|
||||||
|
min-content
|
||||||
|
1fr;
|
||||||
|
margin-top: 12px;
|
||||||
|
|
||||||
|
|
||||||
|
.expand-toggle {
|
||||||
|
img {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
white-space: nowrap;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: @accent_2;
|
||||||
|
}
|
||||||
|
&.selected {
|
||||||
|
color: @accent_2;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.children {
|
||||||
|
padding-left: 24px;
|
||||||
|
margin-left: 8px;
|
||||||
|
border-left: 1px solid #555;
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
|
||||||
|
&.collapsed {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#crumbs {
|
||||||
|
grid-area: crumbs;
|
||||||
|
background: linear-gradient(to right, #fdc830, #f37335);
|
||||||
|
}
|
||||||
|
|
||||||
.crumbs {
|
.crumbs {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
padding: 16px;
|
padding: 8px 16px;
|
||||||
background: #333;
|
background: #505050;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
box-shadow: 0px 5px 8px 0px rgba(128, 128, 128, 0.5);
|
||||||
|
|
||||||
.crumb {
|
.crumb {
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
@ -192,16 +332,15 @@ header {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.child-nodes {
|
.child-nodes {
|
||||||
|
grid-area: child-nodes;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
||||||
padding: 16px 16px 0px 16px;
|
padding: 16px 16px 0px 16px;
|
||||||
background-color: #505050;
|
|
||||||
|
|
||||||
.child-node {
|
.child-node {
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background-color: #2f2f2f;
|
background-color: #333;
|
||||||
margin-right: 12px;
|
margin-right: 12px;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@ -213,36 +352,86 @@ header {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.node-name {
|
.node-name {
|
||||||
margin: 32px 0 16px 0;
|
grid-area: name;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
color: #000;
|
color: #000;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
margin-top: 32px;
|
||||||
|
margin-bottom: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.node-content {
|
.node-content {
|
||||||
|
grid-area: content;
|
||||||
justify-self: center;
|
justify-self: center;
|
||||||
padding: 16px 32px;
|
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
font-size: 0.85em;
|
font-size: 0.85em;
|
||||||
color: #333;
|
color: #333;
|
||||||
width: 900px;
|
width: calc(100% - 32px);
|
||||||
|
max-width: 900px;
|
||||||
resize: none;
|
resize: none;
|
||||||
border: none;
|
border: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|
||||||
&:invalid {
|
&:invalid {
|
||||||
background: #f5f5f5;
|
background: #f5f5f5;
|
||||||
|
padding-top: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#file-section {
|
/* ============================================================= *
|
||||||
|
* Textarea replicates the height of an element expanding height *
|
||||||
|
* ============================================================= */
|
||||||
|
.grow-wrap {
|
||||||
|
/* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
|
||||||
|
display: grid;
|
||||||
|
grid-area: content;
|
||||||
|
}
|
||||||
|
.grow-wrap::after {
|
||||||
|
/* Note the weird space! Needed to preventy jumpy behavior */
|
||||||
|
content: attr(data-replicated-value) " ";
|
||||||
|
|
||||||
|
/* This is how textarea text behaves */
|
||||||
|
width: calc(100% - 32px);
|
||||||
|
max-width: 900px;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-wrap: break-word;
|
||||||
|
color: #f0f;
|
||||||
|
background: rgba(0, 255, 255, 0.5);
|
||||||
justify-self: center;
|
justify-self: center;
|
||||||
width: 900px;
|
|
||||||
margin-top: 16px;
|
/* Hidden from view, clicks, and screen readers */
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
.grow-wrap > textarea {
|
||||||
|
/* You could leave this, but after a user resizes, then it ruins the auto sizing */
|
||||||
|
resize: none;
|
||||||
|
|
||||||
|
/* Firefox shows scrollbar on growth, you can hide like this. */
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.grow-wrap > textarea,
|
||||||
|
.grow-wrap::after {
|
||||||
|
/* Identical styling required!! */
|
||||||
|
padding: 0.5rem;
|
||||||
|
font: inherit;
|
||||||
|
|
||||||
|
/* Place on top of each other */
|
||||||
|
grid-area: 1 / 1 / 2 / 2;
|
||||||
|
}
|
||||||
|
/* ============================================================= */
|
||||||
|
|
||||||
|
#file-section {
|
||||||
|
grid-area: files;
|
||||||
|
justify-self: center;
|
||||||
|
width: calc(100% - 32px);
|
||||||
|
max-width: 900px;
|
||||||
padding: 32px;
|
padding: 32px;
|
||||||
background: #f5f5f5;
|
background: #f5f5f5;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-top: 32px;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@ -275,13 +464,12 @@ header {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tree {
|
@media only screen and (max-width: 932px) {
|
||||||
padding: 16px;
|
#app {
|
||||||
|
.layout-crumbs();
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 932px) {
|
|
||||||
.node-content {
|
.node-content {
|
||||||
width: calc(100% - 32px);
|
|
||||||
margin-left: 16px;
|
margin-left: 16px;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
justify-self: start;
|
justify-self: start;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user