Merge branch 'moreUpgrading' into dataViz-annotations

1 files changed, 14 insertions, 8 deletions

diff --git a/src/client/views/AntimodeMenu.tsx b/src/client/views/AntimodeMenu.tsx
index 16e76694d..db7e64deb 100644
--- a/src/client/views/AntimodeMenu.tsx
+++ b/src/client/views/AntimodeMenu.tsx
@@ -1,21 +1,25 @@
-import React = require('react');
-import { observable, action, runInAction } from 'mobx';
-import './AntimodeMenu.scss';
-import { StrCast } from '../../fields/Types';
-import { Doc } from '../../fields/Doc';
+import { action, makeObservable, observable, runInAction } from 'mobx';
+import * as React from 'react';
 import { SettingsManager } from '../util/SettingsManager';
+import './AntimodeMenu.scss';
+import { ObservableReactComponent } from './ObservableReactComponent';
 export interface AntimodeMenuProps {}
 
 /**
  * This is an abstract class that serves as the base for a PDF-style or Marquee-style
  * menu. To use this class, look at PDFMenu.tsx or MarqueeOptionsMenu.tsx for an example.
  */
-export abstract class AntimodeMenu<T extends AntimodeMenuProps> extends React.Component<T, {}> {
+export abstract class AntimodeMenu<T extends AntimodeMenuProps> extends ObservableReactComponent<T> {
     protected _offsetY: number = 0;
     protected _offsetX: number = 0;
     protected _mainCont: React.RefObject<HTMLDivElement> = React.createRef();
     protected _dragging: boolean = false;
 
+    constructor(props: any) {
+        super(props);
+        makeObservable(this);
+    }
+
     @observable protected _top: number = -300;
     @observable protected _left: number = -300;
     @observable protected _opacity: number = 0;
@@ -139,10 +143,12 @@ export abstract class AntimodeMenu<T extends AntimodeMenuProps> extends React.Co
         return <div className="antimodeMenu-dragger" key="dragger" onPointerDown={this.dragStart} style={{ width: '20px' }} />;
     };
 
-    protected getElement(buttons: JSX.Element) {
+    protected getElement(buttons: JSX.Element, expanded: boolean = false) {
+        const containerClass = expanded ? 'antimodeMenu-cont expanded' : 'antimodeMenu-cont';
+
         return (
             <div
-                className="antimodeMenu-cont"
+                className={containerClass}
                 onPointerLeave={this.pointerLeave}
                 onPointerEnter={this.pointerEntered}
                 ref={this._mainCont}