3 files changed, 32 insertions, 8 deletions
diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts
index 574e43ba3..fb4a107ad 100644
--- a/src/client/views/GlobalKeyHandler.ts
+++ b/src/client/views/GlobalKeyHandler.ts
@@ -65,6 +65,7 @@ export default class KeyManager {
                         SelectionManager.DeselectAll();
                     }
                 }
+                MainView.Instance.toggleColorPicker(true);
                 break;
         }
 
diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx
index ec228ce98..0461d7299 100644
--- a/src/client/views/InkingControl.tsx
+++ b/src/client/views/InkingControl.tsx
@@ -1,4 +1,4 @@
-import { observable, action, computed } from "mobx";
+import { observable, action, computed, runInAction } from "mobx";
 import { ColorResult } from 'react-color';
 import React = require("react");
 import { observer } from "mobx-react";
@@ -8,6 +8,8 @@ import { faPen, faHighlighter, faEraser, faBan } from '@fortawesome/free-solid-s
 import { SelectionManager } from "../util/SelectionManager";
 import { InkTool } from "../../new_fields/InkField";
 import { Doc } from "../../new_fields/Doc";
+import { undoBatch, UndoManager } from "../util/UndoManager";
+import { StrCast } from "../../new_fields/Types";
 
 library.add(faPen, faHighlighter, faEraser, faBan);
 
@@ -36,11 +38,27 @@ export class InkingControl extends React.Component {
         return number.toString(16).toUpperCase();
     }
 
-    @action
-    switchColor = (color: ColorResult): void => {
+    @undoBatch
+    switchColor = action((color: ColorResult): void => {
         this._selectedColor = color.hex + (color.rgb.a !== undefined ? this.decimalToHexString(Math.round(color.rgb.a * 255)) : "ff");
-        if (InkingControl.Instance.selectedTool === InkTool.None) SelectionManager.SelectedDocuments().forEach(doc => (doc.props.Document.isTemplate ? doc.props.Document : Doc.GetProto(doc.props.Document)).backgroundColor = this._selectedColor);
-    }
+        if (InkingControl.Instance.selectedTool === InkTool.None) {
+            let selected = SelectionManager.SelectedDocuments();
+            let oldColors = selected.map(view => {
+                let targetDoc = view.props.Document.isTemplate ? view.props.Document : Doc.GetProto(view.props.Document);
+                let oldColor = StrCast(targetDoc.backgroundColor);
+                targetDoc.backgroundColor = this._selectedColor;
+                return {
+                    target: targetDoc,
+                    previous: oldColor
+                };
+            });
+            let captured = this._selectedColor;
+            UndoManager.AddEvent({
+                undo: () => oldColors.forEach(pair => pair.target.backgroundColor = pair.previous),
+                redo: () => oldColors.forEach(pair => pair.target.backgroundColor = captured)
+            });
+        }
+    });
 
     @action
     switchWidth = (width: string): void => {
@@ -57,6 +75,11 @@ export class InkingControl extends React.Component {
         return this._selectedColor;
     }
 
+    @action
+    updateSelectedColor(value: string) {
+        this._selectedColor = value;
+    }
+
     @computed
     get selectedWidth() {
         return this._selectedWidth;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 787e240b9..62377a3b0 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -291,7 +291,7 @@ export class MainView extends React.Component {
             } else {
                 CollectionDockingView.Instance.AddRightSplit(doc, dataDoc);
             }
-        }
+        };
         let flyout = <DocumentView
             Document={CurrentUserUtils.UserDocument}
             DataDoc={undefined}
@@ -392,8 +392,8 @@ export class MainView extends React.Component {
 
 
     @action
-    toggleColorPicker = () => {
-        this._colorPickerDisplay = !this._colorPickerDisplay;
+    toggleColorPicker = (close = false) => {
+        this._colorPickerDisplay = close ? false : !this._colorPickerDisplay;
     }
 
     /* @TODO this should really be moved into a moveable toolbar component, but for now let's put it here to meet the deadline */