Sync shows/disappears

static/css/markdown.css

@@ -4,53 +4,69 @@
 	.heading-container {
 		display: grid;
 		grid-template-columns: min-content 1fr;
-		grid-gap: 16px;
+		grid-gap: 12px;
 		white-space: nowrap;
 		align-items: center;
-		margin-top: 32px;
+		margin-bottom: 16px;
-		margin-bottom: 8px;
 
 		&:first-child {
-			margin-top: 32px;
+			margin-top: 32px !important;
+			.line {
+				display: none !important;
+			}
 		}
 
 		.line {
 			border-bottom: 1px solid var(--line-color);
 		}
-	}
 
-	h1 {
+		&[data-heading="1"] {
-		border-bottom: 1px solid #ccc;
+			margin-top: 64px;
+		}
 
-		display: inline-block;
+		&[data-heading="2"],
-		font-size: 1.25em;
+		&[data-heading="3"] {
+			margin-top: 16px;
 
-		border-radius: 8px;
+			.line {
-		color: #fff;
+				display: none;
-		background-color: var(--color1);
+			}
-		padding: 4px 12px;
+		}
 
-		margin-top: 0px;
+		h1 {
-		margin-bottom: 0px;
+			border-bottom: 1px solid #ccc;
 
-	}
+			display: inline-block;
+			font-size: 1.25em;
 
-	h2 {
+			clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
-		font-size: 1.25em;
-		margin-top: 0px;
-		margin-bottom: 0px;
-		color: var(--color1);
-	}
 
-	h2+.line,
+			color: #fff;
-	h3+.line {
+			background-color: var(--color1);
-		border-bottom: none !important;
+			padding: 4px 24px 4px 16px;
-	}
+
+			margin-top: 0px;
+			margin-bottom: 0px;
+
+		}
+
+		h2 {
+			font-size: 1.25em;
+			margin-top: 16px;
+			margin-bottom: 0px;
+			color: var(--color1);
+		}
+
+		h3 {
+			margin: 0;
+
+			&:before {
+				font-size: 1.0em;
+				content: "> ";
+				color: var(--color1);
+			}
+		}
 
-	h3:before {
-		font-size: 1.0em;
-		content: "> ";
-		color: var(--color1);
 	}
 
 	a {

static/css/notes2.css

@@ -307,7 +307,8 @@ button {
 }
 
 n2-syncprogress {
-	position: absolute;
+	display: grid;
+	position: fixed;
 	top: 8px;
 	right: 8px;
 	padding: 8px 16px;
@@ -316,8 +317,15 @@ n2-syncprogress {
 	font-weight: bold;
 	background-color: var(--color1);
 	color: #fff;
+	box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
+
+	opacity: 0;
+	transition: opacity 250ms;
+
+	&.show {
+		opacity: 1;
+	}
 
-	display: grid;
 	grid-template-columns: min-content repeat(3, min-content);
 	grid-gap: 8px 8px;
 	white-space: nowrap;

static/js/marked_position.mjs

@@ -115,7 +115,7 @@ export class MarkedPosition {
 				heading(token) {
 					const content = this.parser.parseInline(token.tokens)
 					return `
-						<div class="heading-container">
+						<div class="heading-container" data-heading="${token.depth}">
 							<h${token.depth} ondblclick="setpos(event)" data-offset-start="${token.position.start.offset}" data-offset-end="${token.position.end.offset}">${content}</h${token.depth}>\n
 							<div class="line"></div>\n
 						</div>

static/js/sync.mjs

@@ -19,7 +19,6 @@ export class Sync {
 
 			let nodeCountDownload = await this.getNodeCount(oldMax)
 			let nodeCountUpload = await nodeStore.sendQueue.count()
-			console.log(nodeCountUpload)
 
 			_mbus.dispatch('SYNC_DOWNLOAD_COUNT', { count: nodeCountDownload })
 			_mbus.dispatch('SYNC_UPLOAD_COUNT', { count: nodeCountUpload })
@@ -81,11 +80,11 @@ export class Sync {
 
 					handled++
 					if (handled % 100 === 0)
-						_mbus.dispatch('SYNC_HANDLED', { handled })
+						_mbus.dispatch('SYNC_DOWNLOADED', { handled })
 				}
 
 			} while (res.Continue)
-			_mbus.dispatch('SYNC_HANDLED', { handled })
+			_mbus.dispatch('SYNC_DOWNLOADED', { handled })
 
 			nodeStore.setAppState('latest_sync_node', currMax)
 		} catch (e) {
@@ -178,11 +177,12 @@ export class N2SyncProgress extends CustomHTMLElement {
 		super()
 
 		this.reset()
+
 		_mbus.subscribe('SYNC_DOWNLOAD_COUNT', event => this.progressHandler(event))
 		_mbus.subscribe('SYNC_UPLOAD_COUNT', event => this.progressHandler(event))
-		_mbus.subscribe('SYNC_HANDLED', event => this.progressHandler(event))
+		_mbus.subscribe('SYNC_DOWNLOADED', event => this.progressHandler(event))
-		_mbus.subscribe('SYNC_DONE', event => this.progressHandler(event))
 		_mbus.subscribe('SYNC_UPLOADED', event => this.progressHandler(event))
+		_mbus.subscribe('SYNC_DONE', event => this.progressHandler(event))
 	}//}}}
 	reset() {//{{{
 		this.state = {
@@ -205,11 +205,14 @@ export class N2SyncProgress extends CustomHTMLElement {
 				this.setSyncState(true)
 				break
 
-			case 'SYNC_HANDLED':
+			case 'SYNC_DOWNLOADED':
-				console.log('SYNC_HANDLED', eventData.handled)
 				this.state.nodesSynced = eventData.handled
 				break
 
+			case 'SYNC_UPLOADED':
+				this.state.nodesUploaded += eventData.count
+				break
+
 			case 'SYNC_DONE':
 				// Hides the progress bar.
 				this.setSyncState(false)
@@ -221,10 +224,6 @@ export class N2SyncProgress extends CustomHTMLElement {
 				// Reload the tree nodes to reflect the new/updated nodes.
 				window._app.tree.reset()
 				break
-
-			case 'SYNC_UPLOADED':
-				this.state.nodesUploaded += eventData.count
-				break
 		}
 		this.render()
 	}//}}}