3 files changed, 37 insertions, 10 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 cc39dc04c..19a04595a 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -285,7 +285,7 @@ export class MainView extends React.Component {
         document.removeEventListener("pointerup", this.onPointerUp);
     }
     @computed
-    get mainContent() {
+    get flyout() {
         let addDocTab = (doc: Doc, dataDoc: Doc | undefined, location: string) => {
             if (doc.dockingConfig) {
                 this.openWorkspace(doc);
@@ -293,7 +293,7 @@ export class MainView extends React.Component {
                 CollectionDockingView.Instance.AddRightSplit(doc, dataDoc);
             }
         };
-        let flyout = <DocumentView
+        return <DocumentView
             Document={CurrentUserUtils.UserDocument}
             DataDoc={undefined}
             addDocument={undefined}
@@ -313,6 +313,9 @@ export class MainView extends React.Component {
             zoomToScale={emptyFunction}
             getScale={returnOne}>
         </DocumentView>;
+    }
+    @computed
+    get mainContent() {
         return <div>
             <div className="mainView-libraryHandle"
                 style={{ left: `${this.flyoutWidth - 10}px` }}
@@ -320,7 +323,7 @@ export class MainView extends React.Component {
                 <span title="library View Dragger" style={{ width: "100%", height: "100%", position: "absolute" }} />
             </div>
             <div className="mainView-libraryFlyout" style={{ width: `${this.flyoutWidth}px` }}>
-                {flyout}
+                {this.flyout}
             </div>
             {this.dockingContent}
         </div>;
@@ -393,8 +396,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 */