diff --git a/main.go b/main.go
index 156b916..d927b23 100644
--- a/main.go
+++ b/main.go
@@ -23,7 +23,7 @@ import (
"text/template"
)
-const VERSION = "v9"
+const VERSION = "v8"
const CONTEXT_USER = 1
const SYNC_PAGINATION = 200
diff --git a/static/css/notes2.css b/static/css/notes2.css
index 14f475e..ad07770 100644
--- a/static/css/notes2.css
+++ b/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,86 +22,95 @@ 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"
- "tree-expander tree pad1 name name pad2"
- "tree-expander tree pad1 sync functions pad2"
- "tree-expander tree pad1 content content pad2"
+ "show-tree tree hum crumbs crumbs ding"
+ "show-tree tree hum name name ding"
+ "show-tree tree hum sync functions ding"
+ "show-tree tree hum content content ding"
+ "show-tree tree hum blank blank ding"
;
- grid-template-columns:
- /* 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-columns: var(--show-tree) min-content minmax(32px, 1fr) minmax(min-content, calc(900px - 156px)) 156px minmax(32px, 1fr);
grid-template-rows:
- /* Crumbs */
- min-content
- /* Name */
- min-content
- /* Sync */
- 48px
- /* Content */
- 1fr;
-
- /* Tree expander is collapsed as default */
- --tree-expander: 0px;
+ min-content min-content 48px 1fr;
&.hide-tree {
- --tree-expander: 32px;
-
+ --show-tree: 32px;
#tree {
border-right: none;
}
-
n2-tree {
display: none;
}
}
+
+ #show-tree {
+ grid-area: show-tree;
+ color: #333;
+ font-weight: bold;
+ border-right: 2px solid #ddd;
+
+ display: grid;
+ justify-items: center;
+ align-items: start;
+
+ padding-top: 8px;
+ font-size: 1.25em;
+
+ div div {
+ display: inline-block;
+ writing-mode: vertical-rl;
+ transform: rotate(180deg);
+ }
+ }
+
+ n2-nodeui {
+ .el-functions {
+ width: calc(100% - 32px);
+ }
+
+ .el-node-markdown {
+ overflow-wrap: anywhere;
+ width: calc(100% - 32px);
+ }
+ }
+
+
+
}
-/* ------------------------------- *
- * 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"
+ "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-areas:
+ "tree"
+ ;
grid-template-columns: 100%;
- grid-template-rows: 1fr;
+ grid-template-rows:
+ 1fr;
#tree {
display: grid;
width: 100%;
}
-
- #main-page,
- #show-tree {
+
+ #main-page, #show-tree {
display: none;
}
}
@@ -108,26 +118,23 @@ html {
#tree {
display: none;
}
- }
-}
-#tree-expander {
- grid-area: tree-expander;
- color: #333;
- font-weight: bold;
- border-right: 2px solid #ddd;
+ n2-syncprogress {
+ .el-count {
+ top: 4px;
+ }
+ }
- display: grid;
- justify-items: center;
- align-items: start;
+ n2-nodeui {
+ .el-functions {
+ width: calc(100% - 32px);
+ }
- padding-top: 8px;
- font-size: 1.25em;
-
- div div {
- display: inline-block;
- writing-mode: vertical-rl;
- transform: rotate(180deg);
+ .el-node-markdown {
+ overflow-wrap: anywhere;
+ width: calc(100% - 32px);
+ }
+ }
}
}
@@ -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 {
diff --git a/static/images/icon_search.svg b/static/images/icon_search.svg
index 7b05f5c..6de83dd 100644
--- a/static/images/icon_search.svg
+++ b/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 @@
+ style="stroke-width:6.25145;fill:#fe5f55;fill-opacity:1" />
diff --git a/static/js/app.mjs b/static/js/app.mjs
index 8ff6229..feeec3a 100644
--- a/static/js/app.mjs
+++ b/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)
diff --git a/static/js/tree.mjs b/static/js/tree.mjs
index 04555f6..55a37ee 100644
--- a/static/js/tree.mjs
+++ b/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 {
@@ -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 => {
+ 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 }) => {
diff --git a/static/service_worker.js b/static/service_worker.js
index 55a5f09..b01d9cc 100644
--- a/static/service_worker.js
+++ b/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',
diff --git a/views/pages/notes2.gotmpl b/views/pages/notes2.gotmpl
index f15bbb5..fe74240 100644
--- a/views/pages/notes2.gotmpl
+++ b/views/pages/notes2.gotmpl
@@ -1,6 +1,14 @@
{{ define "page" }}
+
+
- 
+ 