Add unsaved changes indicator

The “save” icon changes to red to indicate that there are unsaved
changes.

core/language/en-GB/Docs/PaletteColours.multids

@@ -6,6 +6,7 @@ alert-highlight: Alert highlight
 alert-muted-foreground: Alert muted foreground
 background: General background
 blockquote-bar: Blockquote bar
+dirty-indicator: Unsaved changes indicator
 code-background: Code background
 code-border: Code border
 code-foreground: Code foreground

core/modules/syncer.js

@@ -71,6 +71,7 @@ Syncer.prototype.throttleInterval = 1 * 1000; // Defer saving tiddlers if they'v
 Syncer.prototype.fallbackInterval = 10 * 1000; // Unless the task is older than 10s
 Syncer.prototype.pollTimerInterval = 60 * 1000; // Interval for polling for changes from the adaptor
 
+
 /*
 Read (or re-read) the latest tiddler info from the store
 */
@@ -155,6 +156,7 @@ Syncer.prototype.saveWiki = function(options) {
 			if(method !== "download") {
 				this.readTiddlerInfo();
 				this.taskQueue = {};
+				this.updateDirtyStatus();
 			}
 			return true;
 		}
@@ -169,6 +171,15 @@ Syncer.prototype.isDirty = function() {
 	return (this.numTasksInQueue() > 0) || (this.numTasksInProgress() > 0);
 };
 
+/*
+Update the document body with the class "tw-dirty" if the wiki has unsaved/unsynced changes
+*/
+Syncer.prototype.updateDirtyStatus = function() {
+	if($tw.browser) {
+		$tw.utils.toggleClass(document.body,"tw-dirty",this.isDirty());
+	}
+};
+
 /*
 Save an incoming tiddler in the store, and updates the associated tiddlerInfo
 */
@@ -401,6 +412,7 @@ Syncer.prototype.enqueueSyncTask = function(task) {
 		// this.logger.log("Queuing up sync task with type:",task.type,"title:",task.title);
 		// If it is not in the queue, insert it
 		this.taskQueue[task.title] = task;
+		this.updateDirtyStatus();
 	}
 	// Process the queue
 	if(this.syncadaptor) {
@@ -449,6 +461,7 @@ Syncer.prototype.processTaskQueue = function() {
 			// Remove the task from the queue and add it to the in progress list
 			delete this.taskQueue[task.title];
 			this.taskInProgress[task.title] = task;
+			this.updateDirtyStatus();
 			// Dispatch the task
 			this.dispatchTask(task,function(err) {
 				if(err) {
@@ -456,6 +469,7 @@ Syncer.prototype.processTaskQueue = function() {
 				}
 				// Mark that this task is no longer in progress
 				delete self.taskInProgress[task.title];
+				self.updateDirtyStatus();
 				// Process the next task
 				self.processTaskQueue.call(self);
 			});

core/palettes/Blanca.tid

@@ -13,6 +13,7 @@ blockquote-bar: <<colour muted-foreground>>
 code-background: #f7f7f9
 code-border: #e1e1e8
 code-foreground: #dd1144
+dirty-indicator: #ff0000
 download-background: #66cccc
 download-foreground: <<colour background>>
 dragger-background: <<colour foreground>>

core/palettes/Blue.tid

@@ -13,6 +13,7 @@ blockquote-bar: <<colour muted-foreground>>
 code-background: #f7f7f9
 code-border: #e1e1e8
 code-foreground: #dd1144
+dirty-indicator: #ff0000
 download-background: #34c734
 download-foreground: <<colour foreground>>
 dragger-background: <<colour foreground>>

core/palettes/BrightMute.tid

@@ -13,6 +13,7 @@ blockquote-bar: <<colour muted-foreground>>
 code-background: #f7f7f9
 code-border: #e1e1e8
 code-foreground: #dd1144
+dirty-indicator: #ff0000
 download-background: #34c734
 download-foreground: <<colour background>>
 dragger-background: <<colour foreground>>

core/palettes/Contrast.tid

@@ -13,6 +13,7 @@ blockquote-bar: <<colour muted-foreground>>
 code-background: #f7f7f9
 code-border: #e1e1e8
 code-foreground: #dd1144
+dirty-indicator: #ff0000
 download-background: #34c734
 download-foreground: <<colour background>>
 dragger-background: <<colour foreground>>

core/palettes/Rocker.tid

@@ -13,6 +13,7 @@ blockquote-bar: <<colour muted-foreground>>
 code-background: #f7f7f9
 code-border: #e1e1e8
 code-foreground: #dd1144
+dirty-indicator: #ff0000
 download-background: #34c734
 download-foreground: <<colour background>>
 dragger-background: <<colour foreground>>

core/palettes/Vanilla.tid

@@ -13,6 +13,7 @@ blockquote-bar: <<colour muted-foreground>>
 code-background: #f7f7f9
 code-border: #e1e1e8
 code-foreground: #dd1144
+dirty-indicator: #ff0000
 download-background: #34c734
 download-foreground: <<colour background>>
 dragger-background: <<colour foreground>>

core/ui/PageControls/savewiki.tid

@@ -4,7 +4,9 @@ caption: {{$:/core/images/save-button}} {{$:/language/Buttons/SaveWiki/Caption}}
 
 <$button message="tw-save-wiki" title={{$:/language/Buttons/SaveWiki/Hint}} aria-label={{$:/language/Buttons/SaveWiki/Caption}} class=<<tw-config-toolbar-class>>>
 <$list filter="[<tw-config-toolbar-icons>prefix[yes]]">
+<span class="tw-dirty-indicator">
 {{$:/core/images/save-button}}
+</span>
 </$list>
 <$list filter="[<tw-config-toolbar-text>prefix[yes]]">
 <$text text={{$:/language/Buttons/SaveWiki/Caption}}/>

themes/tiddlywiki/vanilla/base.tid

@@ -1317,3 +1317,11 @@ canvas.tw-edit-bitmapeditor  {
 	font-size: 0.95em;
 	font-weight: 200;
 }
+
+/*
+** Dirty indicator
+*/
+
+body.tw-dirty .tw-dirty-indicator svg {
+	fill: <<colour dirty-indicator>>;
+}