diff options
Diffstat (limited to 'src/client/views/collections/CollectionMenu.tsx')
| -rw-r--r-- | src/client/views/collections/CollectionMenu.tsx | 45 |
1 files changed, 25 insertions, 20 deletions
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 3edf4135f..f8e80ed87 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -33,7 +33,7 @@ interface CollectionMenuProps { export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> { @observable static Instance: CollectionMenu; - @observable SelectedCollection: DocumentView | undefined; + @observable SelectedCollection: DocumentView | undefined = undefined; @observable FieldKey: string; private _docBtnRef = React.createRef<HTMLDivElement>(); @@ -41,7 +41,7 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> { constructor(props: any) { super(props); this.FieldKey = ''; - runInAction(() => (CollectionMenu.Instance = this)); + CollectionMenu.Instance = this; this._canFade = false; // don't let the inking menu fade away runInAction(() => (this.Pinned = Cast(Doc.UserDoc()['menuCollections-pinned'], 'boolean', true))); this.jumpTo(300, 300); @@ -69,19 +69,19 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> { @action toggleTopBar = () => { - if (SettingsManager.headerBarHeight > 0) { - SettingsManager.headerBarHeight = 0; + if (SettingsManager.Instance.headerBarHeight > 0) { + SettingsManager.Instance.headerBarHeight = 0; } else { - SettingsManager.headerBarHeight = 60; + SettingsManager.Instance.headerBarHeight = 60; } }; @action toggleProperties = () => { if (MainView.Instance.propertiesWidth() > 0) { - SettingsManager.propertiesWidth = 0; + SettingsManager.Instance.propertiesWidth = 0; } else { - SettingsManager.propertiesWidth = 300; + SettingsManager.Instance.propertiesWidth = 300; } }; @@ -94,7 +94,7 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> { @computed get contMenuButtons() { const selDoc = Doc.MyContextMenuBtns; return !(selDoc instanceof Doc) ? null : ( - <div className="collectionMenu-contMenuButtons" ref={this._docBtnRef} style={{ height: this.props.panelHeight() }}> + <div className="collectionMenu-contMenuButtons" ref={this._docBtnRef} style={{ height: this._props.panelHeight() }}> <CollectionLinearView Document={selDoc} fieldKey="data" @@ -113,8 +113,8 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> { pinToPres={emptyFunction} removeDocument={returnFalse} ScreenToLocalTransform={this.buttonBarXf} - PanelWidth={this.props.panelWidth} - PanelHeight={this.props.panelHeight} + PanelWidth={this._props.panelWidth} + PanelHeight={this._props.panelHeight} renderDepth={0} focus={emptyFunction} whenChildContentsActiveChanged={emptyFunction} @@ -127,10 +127,10 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> { } render() { - const headerIcon = SettingsManager.headerBarHeight > 0 ? 'angle-double-up' : 'angle-double-down'; - const headerTitle = SettingsManager.headerBarHeight > 0 ? 'Close Header Bar' : 'Open Header Bar'; - const propIcon = SettingsManager.propertiesWidth > 0 ? 'angle-double-right' : 'angle-double-left'; - const propTitle = SettingsManager.propertiesWidth > 0 ? 'Close Properties' : 'Open Properties'; + const headerIcon = SettingsManager.Instance.headerBarHeight > 0 ? 'angle-double-up' : 'angle-double-down'; + const headerTitle = SettingsManager.Instance.headerBarHeight > 0 ? 'Close Header Bar' : 'Open Header Bar'; + const propIcon = SettingsManager.Instance.propertiesWidth > 0 ? 'angle-double-right' : 'angle-double-left'; + const propTitle = SettingsManager.Instance.propertiesWidth > 0 ? 'Close Properties' : 'Open Properties'; const hardCodedButtons = ( <div className={`hardCodedButtons`}> @@ -139,7 +139,7 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> { type={Type.PRIM} color={SettingsManager.userColor} onClick={this.toggleTopBar} - toggleStatus={SettingsManager.headerBarHeight > 0} + toggleStatus={SettingsManager.Instance.headerBarHeight > 0} icon={<FontAwesomeIcon icon={headerIcon} size="lg" />} tooltip={headerTitle} /> @@ -148,7 +148,7 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> { type={Type.PRIM} color={SettingsManager.userColor} onClick={this.toggleProperties} - toggleStatus={SettingsManager.propertiesWidth > 0} + toggleStatus={SettingsManager.Instance.propertiesWidth > 0} icon={<FontAwesomeIcon icon={propIcon} size="lg" />} tooltip={propTitle} /> @@ -185,7 +185,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewMenu //(!)?\(\(\(doc.(\w+) && \(doc.\w+ as \w+\).includes\(\"(\w+)\"\) get document() { - return this.props.docView?.props.Document; + return this.props.docView?.Document; } get target() { return this.document; @@ -577,13 +577,18 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewMenu return this.props.docView.props.Document; } + @computed get panelWidth() { + return this.props.docView.props.PanelWidth(); + } + componentDidMount() { runInAction(() => (this.resize = this.props.docView.props.PanelWidth() < 700)); // listener to reduce text on chrome resize (panel resize) - this.resizeListenerDisposer = computed(() => this.props.docView.props.PanelWidth()).observe(({ newValue }) => { - runInAction(() => (this.resize = newValue < 700)); - }); + this.resizeListenerDisposer = reaction( + () => this.panelWidth, + newValue => (this.resize = newValue < 700) + ); } componentWillUnmount() { |