wow this almost drove me crazy but swipey swipes on five fingers

1 files changed, 17 insertions, 3 deletions

diff --git a/src/client/views/Palette.tsx b/src/client/views/Palette.tsx
index aca1811a4..811c24f53 100644
--- a/src/client/views/Palette.tsx
+++ b/src/client/views/Palette.tsx
@@ -9,8 +9,8 @@ import { DocumentView } from "./nodes/DocumentView";
 import { emptyPath, returnFalse, emptyFunction, returnOne, returnEmptyString, returnTrue } from "../../Utils";
 import { CurrentUserUtils } from "../../server/authentication/models/current_user_utils";
 import { Transform } from "../util/Transform";
-import { computed, action } from "mobx";
-import { FieldValue, Cast } from "../../new_fields/Types";
+import { computed, action, IReactionDisposer, reaction, observable } from "mobx";
+import { FieldValue, Cast, NumCast } from "../../new_fields/Types";
 import { observer } from "mobx-react";
 import { DocumentContentsView } from "./nodes/DocumentContentsView";
 import { CollectionStackingView } from "./collections/CollectionStackingView";
@@ -28,12 +28,26 @@ export interface PaletteProps {
 
 @observer
 export default class Palette extends React.Component<PaletteProps> {
+    private _selectedDisposer?: IReactionDisposer;
+    @observable private _selectedIndex: number = 0;
+
+    componentDidMount = () => {
+        this._selectedDisposer = reaction(
+            () => NumCast(this.props.thumbDoc.selectedIndex),
+            (i) => this._selectedIndex = i,
+            { fireImmediately: true }
+        );
+    }
+
+    componentWillUnmount = () => {
+        this._selectedDisposer && this._selectedDisposer();
+    }
 
     render() {
         return (
             <div className="palette-container" style={{ transform: `translate(${this.props.x}px, ${this.props.y}px)` }}>
                 <div className="palette-thumb" style={{ transform: `translate(${this.props.thumb[0] - this.props.x}px, ${this.props.thumb[1] - this.props.y}px)` }}>
-                    <div className="palette-thumbContent">
+                    <div className="palette-thumbContent" style={{ transform: `translate(-${(this._selectedIndex * 50) + 10}px, 0px)` }}>
                         <DocumentView
                             Document={this.props.thumbDoc}
                             DataDoc={undefined}