main.go

@@ -23,7 +23,7 @@ import (
 	"text/template"
 )
 
-const VERSION = "v9"
+const VERSION = "v8"
 const CONTEXT_USER = 1
 const SYNC_PAGINATION = 200
 

static/css/notes2.css

@@ -10,7 +10,8 @@
 	*/
 	--colorize: invert(59%) sepia(71%) saturate(3270%) hue-rotate(327deg) brightness(100%) contrast(99%);
 
-	--tree-expander: 0px;
+
+	--show-tree: 0px;
 }
 
 html {
@@ -21,98 +22,35 @@ html {
 	filter: var(--colorize);
 }
 
-/* ------------------------------------- *
-* Default application grid in wide mode *
-* ------------------------------------- */
 #notes2 {
 	min-height: 100vh;
 
 	display: grid;
 	grid-template-areas:
-		"tree-expander tree pad1 crumbs  crumbs    pad2"
+		"show-tree tree hum crumbs  crumbs    ding"
-		"tree-expander tree pad1 name    name      pad2"
+		"show-tree tree hum name    name      ding"
-		"tree-expander tree pad1 sync    functions pad2"
+		"show-tree tree hum sync    functions ding"
-		"tree-expander tree pad1 content content   pad2"
+		"show-tree tree hum content content   ding"
+		"show-tree tree hum blank   blank     ding"
 	;
 
-	grid-template-columns:
+	grid-template-columns: var(--show-tree) min-content minmax(32px, 1fr) minmax(min-content, calc(900px - 156px)) 156px minmax(32px, 1fr);
-		/* Tree-expander */
-		var(--tree-expander)
-		/* Tree */
-		min-content minmax(32px, 1fr)
-		/* Sync */
-		minmax(min-content, calc(900px - 156px))
-		/* Functions */
-		156px
-		/* Content */
-		minmax(32px, 1fr);
-
 	grid-template-rows:
-		/* Crumbs */
+		min-content min-content 48px 1fr;
-		min-content
-		/* Name */
-		min-content
-		/* Sync */
-		48px
-		/* Content */
-		1fr;
-
-	/* Tree expander is collapsed as default */
-	--tree-expander: 0px;
 
 	&.hide-tree {
-		--tree-expander: 32px;
+		--show-tree: 32px;
-
 		#tree {
 			border-right: none;
 		}
-
 		n2-tree {
 			display: none;
 
 		}
 	}
-}
 
-/* ------------------------------- *
- * Application grid in narrow mode *
- * ------------------------------- */
-@media only screen and (max-width: 800px) {
-	#notes2 {
-		grid-template-areas:
-			"tree-expander pad1 crumbs    pad2"
-			"tree-expander pad1 name      pad2"
-			"tree-expander pad1 functions pad2"
-			"tree-expander pad1 content   pad2"
-			"tree-expander pad1 blank     pad2"
-			"tree-expander pad1 sync      pad2"
-		;
-		grid-template-columns: 32px 16px 1fr 16px;
-
-		&.show-tree {
-			grid-template-areas: "tree";
-			grid-template-columns: 100%;
-			grid-template-rows: 1fr;
-
-			#tree {
-				display: grid;
-				width: 100%;
-			}
-
-			#main-page,
 	#show-tree {
-				display: none;
+		grid-area: show-tree;
-			}
-		}
-
-		#tree {
-			display: none;
-		}
-	}
-}
-
-#tree-expander {
-	grid-area: tree-expander;
 		color: #333;
 		font-weight: bold;
 		border-right: 2px solid #ddd;
@@ -131,6 +69,75 @@ html {
 		}
 	}
 
+	n2-nodeui {
+		.el-functions {
+			width: calc(100% - 32px);
+		}
+
+		.el-node-markdown {
+			overflow-wrap: anywhere;
+			width: calc(100% - 32px);
+		}
+	}
+
+
+
+}
+
+@media only screen and (max-width: 800px) {
+	#notes2 {
+		grid-template-areas:
+			"show-tree hum crumbs    ding"
+			"show-tree hum name      ding"
+			"show-tree hum functions ding"
+			"show-tree hum content   ding"
+			"show-tree hum blank     ding"
+			"show-tree hum sync      ding"
+		;
+		grid-template-columns: 32px 16px 1fr 16px;
+
+		&.show-tree {
+
+			grid-template-areas:
+				"tree"
+			;
+			grid-template-columns: 100%;
+			grid-template-rows:
+				1fr;
+
+			#tree {
+				display: grid;
+				width: 100%;
+			}
+			
+			#main-page, #show-tree {
+				display: none;
+			}
+		}
+
+		#tree {
+			display: none;
+		}
+
+		n2-syncprogress {
+			.el-count {
+				top: 4px;
+			}
+		}
+
+		n2-nodeui {
+			.el-functions {
+				width: calc(100% - 32px);
+			}
+
+			.el-node-markdown {
+				overflow-wrap: anywhere;
+				width: calc(100% - 32px);
+			}
+		}
+	}
+}
+
 #tree {
 	grid-area: tree;
 	display: grid;
@@ -174,8 +181,10 @@ html {
 
 	&:focus-within {
 		n2-tree {}
+
 	}
 
+
 	.node {
 		display: grid;
 		grid-template-columns: 40px min-content;
@@ -224,9 +233,6 @@ html {
 	}
 }
 
-n2-nodeui {
-}
-
 [id^="page-"] {
 	display: none;
 }
@@ -397,7 +403,6 @@ n2-nodeui {
 
 	.el-functions {
 		grid-area: functions;
-		width: calc(100% - 32px);
 	}
 
 	.el-node-content {
@@ -433,9 +438,6 @@ n2-nodeui {
 		border-top: 1px solid #e0e0e0;
 		border-bottom: 1px solid #e0e0e0;
 		margin-bottom: 32px;
-
-		overflow-wrap: anywhere;
-		width: calc(100% - 32px);
 	}
 
 	&.show-markdown {

static/images/icon_search.svg

@@ -35,7 +35,7 @@
      inkscape:window-width="1916"
      inkscape:window-height="1161"
      inkscape:window-x="0"
-     inkscape:window-y="0"
+     inkscape:window-y="18"
      inkscape:window-maximized="1"
      inkscape:showpageshadow="true"
      inkscape:pagecheckerboard="0"
@@ -62,6 +62,6 @@
     <path
        d="m 78.736803,96.575592 a 40.634474,40.634474 0 0 1 40.634477,40.634438 c 0,10.06486 -3.68838,19.31694 -9.75227,26.44372 l 1.68795,1.68701 h 4.93863 l 31.2573,31.25736 -9.37719,9.37731 -31.25729,-31.25737 v -4.93863 l -1.68795,-1.68701 c -7.126666,6.06378 -16.378815,9.75204 -26.443681,9.75204 A 40.634474,40.634474 0 0 1 38.102322,137.21003 40.634474,40.634474 0 0 1 78.736803,96.575592 m 0,12.502758 c -15.628636,0 -28.131559,12.50299 -28.131559,28.13168 0,15.62868 12.502923,28.13144 28.131559,28.13144 15.628635,0 28.131557,-12.50276 28.131557,-28.13144 0,-15.62869 -12.502922,-28.13168 -28.131557,-28.13168 z"
        id="path1"
-       style="stroke-width:6.25145;fill:#000000;fill-opacity:1" />
+       style="stroke-width:6.25145;fill:#fe5f55;fill-opacity:1" />
   </g>
 </svg>

static/js/app.mjs

@@ -206,7 +206,6 @@ export class App {
 		_mbus.dispatch('CRUMBS_SET', ancestors, () => this.crumbsElement.replaceChildren(this.crumbs.render()))
 		_mbus.dispatch('NODE_UI_OPEN', node)
 		_mbus.dispatch('NODE_UNMODIFIED')
-		_mbus.dispatch('TREE_EXPANSION', { expand: false, when: 'narrow' })
 
 		// Scrolls node into view.
 		this.tree.makeVisible(node)

static/js/tree.mjs

@@ -2,62 +2,6 @@ import { ROOT_NODE } from 'node_store'
 import { CustomHTMLElement } from './lib/custom_html_element.mjs'
 import { Color, Solver } from './lib/css_colorize.mjs'
 
-// TreeExpandedHandler is responsible for collapsing or expanding
-// the node tree, wide view or narrow "mobile" view.
-class TreeExpansionHandler {// {{{
-	constructor() {
-		this.isNarrow = false
-		this.initializeMediaHandler()
-		this.initializeBusEvents()
-	}
-
-	initializeBusEvents() {
-		_mbus.subscribe('TREE_EXPANSION', ({ detail }) => {
-			// When a node is selected on the screen and the screen
-			// is narrow the tree is automatically hidden.
-			//
-			// Can't always hide the tree automatically when a node
-			// is selected since the wide mode shows the tree as standard.
-			if (detail.data?.when == 'narrow' && !this.isNarrow)
-				return
-
-			this.treeExpansion(detail.data?.expand)
-		})
-	}
-
-	initializeMediaHandler() {
-		const query = window.matchMedia('(max-width: 800px)')
-		query.addEventListener('change', event => this.screenNarrowHandler(event))
-
-		// Run once to set initial state, instead of needing to toggle state.
-		this.screenNarrowHandler(query)
-	}
-
-	// When screen becomes narrow, the tree is automatically hidden.
-	// Primary purpose is to read content, not browse, which is why
-	// the tree is hidden as standard.
-	screenNarrowHandler(event) {
-		this.isNarrow = event.matches
-
-		if (this.isNarrow)
-			this.treeExpansion(false)
-		else
-			this.treeExpansion(true)
-	}
-
-	treeExpansion(expanded) {
-		const notes2 = document.getElementById('notes2')
-
-		if (expanded) {
-			notes2.classList.remove('hide-tree')
-			notes2.classList.add('show-tree')
-		} else {
-			notes2.classList.add('hide-tree')
-			notes2.classList.remove('show-tree')
-		}
-	}
-}// }}}
-
 export class N2Tree extends CustomHTMLElement {
 	static {// {{{
 		this.tmpl = document.createElement('template')
@@ -78,7 +22,7 @@ export class N2Tree extends CustomHTMLElement {
 			</div>
 			<div class="icons">
 				<img data-el="sync"     class='sync colorize'     src="/images/${_VERSION}/icon_refresh.svg"  />
-				<img data-el="search"   class='search colorize'   src="/images/${_VERSION}/icon_search.svg" style="height: 22px" />
+				<img data-el="search" class='search' src="/images/${_VERSION}/icon_search.svg" style="height: 22px" />
 				<img data-el="settings" class='settings colorize' src="/images/${_VERSION}/icon_settings.svg" />
 			</div>
 			<div data-el="treenodes"></div>
@@ -97,15 +41,14 @@ export class N2Tree extends CustomHTMLElement {
 		this.selectedNode = null
 		this.rendered = false
 
-		new TreeExpansionHandler()
-
 		this.addEventListener('keydown', event => this.keyHandler(event))
 		this.elSearch.addEventListener('click', () => _mbus.dispatch('op-search'))
 		this.elSync.addEventListener('click', () => _sync.run())
 		this.elLogo.addEventListener('click', () => _app.goToNode(ROOT_NODE, false, false))
 		this.elHideTree.addEventListener('click', event=>{
 			event.stopPropagation()
-			_mbus.dispatch('TREE_EXPANSION', { expand: false })
+			document.getElementById('notes2').classList.add('hide-tree')
+			document.getElementById('notes2').classList.remove('show-tree')
 		})
 
 		_mbus.subscribe('NODE_MODIFIED', ({ detail }) => {

static/service_worker.js

@@ -10,17 +10,12 @@ const CACHED_ASSETS = [
 
 	'/images/{{ .VERSION }}/collapsed.svg',
 	'/images/{{ .VERSION }}/expanded.svg',
-	'/images/{{ .VERSION }}/icon_history.svg',
 	'/images/{{ .VERSION }}/icon_markdown_hollow.svg',
 	'/images/{{ .VERSION }}/icon_markdown.svg',
 	'/images/{{ .VERSION }}/icon_refresh.svg',
 	'/images/{{ .VERSION }}/icon_save_disabled.svg',
-	'/images/{{ .VERSION }}/icon_save.svg',
 	'/images/{{ .VERSION }}/icon_search.svg',
-	'/images/{{ .VERSION }}/icon_settings.svg',
-	'/images/{{ .VERSION }}/icon_table.svg',
 	'/images/{{ .VERSION }}/leaf.svg',
-	'/images/{{ .VERSION }}/logo_small.svg',
 	'/images/{{ .VERSION }}/logo.svg',
 
 	'/js/{{ .VERSION }}/api.mjs',
@@ -29,7 +24,7 @@ const CACHED_ASSETS = [
 	'/js/{{ .VERSION }}/crypto.mjs',
 	'/js/{{ .VERSION }}/file.mjs',
 	'/js/{{ .VERSION }}/key.mjs',
-	'/js/{{ .VERSION }}/lib/css_colorize.mjs',
+	'/js/{{ .VERSION }}/lib/css_colorize.js',
 	'/js/{{ .VERSION }}/lib/custom_html_element.mjs',
 	'/js/{{ .VERSION }}/lib/node_modules/marked/lib/marked.esm.js',
 	'/js/{{ .VERSION }}/lib/node_modules/marked-token-position/lib/index.esm.js',

views/pages/notes2.gotmpl

@@ -1,6 +1,14 @@
 {{ define "page" }}
+<script>
+	function showTree() {
+		const notes2 = document.getElementById('notes2')
+		notes2.classList.remove('hide-tree')
+		notes2.classList.add('show-tree')
+	}
+</script>
+
 <div id="notes2">
-	<div id="tree-expander" onclick="window._mbus.dispatch('TREE_EXPANSION', { expand: true })">&gt;</div>
+	<div id="show-tree" onclick="showTree()">&gt;</div>
 	<div id="tree" tabindex=0></div>
 
 	<div id="main-page">