Formatting of history

static/css/notes2.css

@@ -5,9 +5,6 @@
 	--thumbnail-width: 300px;
 	--thumbnail-height: 100px;
 
-	/*
-	--colorize: invert(10%) sepia(61%) saturate(5017%) hue-rotate(323deg) brightness(90%) contrast(109%);
-	*/
 	--colorize: invert(59%) sepia(71%) saturate(3270%) hue-rotate(327deg) brightness(100%) contrast(99%);
 
 	--line-color: #ccc;
@@ -538,8 +535,43 @@ n2-pagehistory {
 			grid-column: 1 / -1;
 
 			display: grid;
-			grid-template-columns: min-content 1fr;
+			grid-template-columns: min-content minmax(min-content, max-content) min-content 1fr;
-			grid-gap: 4px 8px;
+
+			background-color: var(--line-color);
+			gap: 1px;
+			border: 1px solid var(--line-color);
+
+			&>div>div {
+				padding: 8px 12px;
+				background-color: #fff;
+				white-space: nowrap;
+
+				&.index {
+					text-align: right;
+				}
+
+				&.updated {
+					white-space: initial;
+				}
+
+				.date {
+					white-space: nowrap;
+					font-weight: bold;
+				}
+
+				.time {
+					white-space: nowrap;
+					color: #555;
+				}
+
+				&.name {
+					white-space: initial;
+					/*overflow-wrap: anywhere;*/
+					word-break: break-all;
+					color: var(--color1);
+
+				}
+			}
 
 			.history-node {
 				display: contents;

static/js/node_store.mjs

@@ -462,7 +462,7 @@ class NodeHistoryStore extends SimpleNodeStore {
 				.transaction(['nodes', this.storeName], 'readonly')
 				.objectStore(this.storeName)
 				.index('byUUID')
-				.openCursor(uuid)
+				.openCursor(uuid, 'prev')
 
 			let retrieved = 0
 			let first = true

static/js/page_history.mjs

@@ -1,7 +1,7 @@
 import { CustomHTMLElement } from './lib/custom_html_element.mjs'
 
 export class N2PageHistory extends CustomHTMLElement {
-	static PAGESIZE = 10
+	static PAGESIZE = 25
 
 	static {
 		this.tmpl = document.createElement('template')
@@ -24,7 +24,6 @@ export class N2PageHistory extends CustomHTMLElement {
 
 				<div data-el="nodes"></div>
 
-
 				<div class="pagination">
 					<div data-el="prev">&lt;</div>
 					<div data-el="page"></div>
@@ -37,11 +36,14 @@ export class N2PageHistory extends CustomHTMLElement {
 	constructor() {
 		super()
 
+		this.setAttribute('tabindex', '-1')
+		this.addEventListener('keydown', event => this.keyHandler(event))
+
 		// Connect back icon and text to give the user a way back to the node.
 		this.elBackImage.addEventListener('click', () => _mbus.dispatch('SHOW_PAGE', { page: 'node' }))
 		this.elBackText.addEventListener('click', () => _mbus.dispatch('SHOW_PAGE', { page: 'node' }))
-		this.elPrev.addEventListener('click', ()=>this.prevPage())
+		this.elPrev.addEventListener('click', () => this.prevPage())
-		this.elNext.addEventListener('click', ()=>this.nextPage())
+		this.elNext.addEventListener('click', () => this.nextPage())
 
 		_mbus.subscribe('NODE_UI_OPEN', async (event) => {
 			await this.useNode(event.detail.data)
@@ -57,6 +59,16 @@ export class N2PageHistory extends CustomHTMLElement {
 		this.pages = Math.ceil(this.nodesTotal / N2PageHistory.PAGESIZE)
 	}
 
+	keyHandler(event) {
+		switch (event.key) {
+			case 'ArrowLeft':
+				this.prevPage()
+				break
+			case 'ArrowRight':
+				this.nextPage()
+				break
+		}
+	}
 
 	prevPage() {
 		if (this.page == 1)
@@ -72,23 +84,45 @@ export class N2PageHistory extends CustomHTMLElement {
 		this.render()
 	}
 
+	formatSize(s) {
+		let div = 1
+		let unit = 'B'
+		if (s >= 1048576) {
+			div = 1048576
+			unit = 'MB'
+		} else if (s >= 1024) {
+			div = 1024
+			unit = 'kB'
+		}
+
+		return new Intl.NumberFormat(undefined, {
+			maximumFractionDigits: 0
+		}).format(Math.round(s / div)) + ' ' + unit
+	}
+
 	async render() {
 		this.elNodeName.innerText = this.node.get('Name')
 		this.elPage.innerText = `${this.page} / ${this.pages}`
 
-		this.elNodes.innerHTML = ''
 		let nodes = await nodeStore.nodesHistory.retrievePage(this.node.UUID, N2PageHistory.PAGESIZE, this.page)
 		let i = 0
-		for (const n of nodes) {
+		let divs = nodes.map(n => {
 			i++
+
+			const date = n.get('Updated').slice(0, 10)
+			const time = n.get('Updated').slice(11, 19)
+
 			const div = document.createElement('div')
 			div.innerHTML = `
-				<div>${N2PageHistory.PAGESIZE * (this.page - 1) + i}</div>
+				<div class="index">${1 + this.nodesTotal - (N2PageHistory.PAGESIZE * (this.page - 1) + i)}</div>
-				<div>${n.get('Updated').replace('T', ' ')}</div>
+				<div class="updated"><span class="date">${date}</span> <span class="time">${time}</span></div>
+				<div class="size">${this.formatSize(n.get('Content').length)}</div>
+				<div class="name">${n.get('Name')}</div>
 			`
 			div.classList.add('history-node')
-			this.elNodes.append(div)
+			return div
-		}
+		})
+		this.elNodes.replaceChildren(...divs)
 	}
 }
 customElements.define('n2-pagehistory', N2PageHistory)