1 files changed, 41 insertions, 3 deletions
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 80c2c7705..aefc91751 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -2,7 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@material-ui/core';
 import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
-import { Doc, Opt } from '../../fields/Doc';
+import { Doc, DocListCast, Opt } from '../../fields/Doc';
 import { Id } from '../../fields/FieldSymbols';
 import { InkField } from '../../fields/InkField';
 import { RichTextField } from '../../fields/RichTextField';
@@ -93,6 +93,14 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             on => 'lock'
         );
     }
+    @computed get forceActiveButton() {
+        return this.propertyToggleBtn(
+            'Active',
+            '_forceActive',
+            on => `${on ? 'Select to activate' : 'Contents always active'} `,
+            on => 'eye'
+        );
+    }
     @computed get fitContentButton() {
         return this.propertyToggleBtn(
             'View All',
@@ -101,6 +109,34 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             on => 'eye'
         );
     }
+    // this implments a container pattern by marking the targetDoc (collection) as an inPlace container,
+    // and then making the contained collection be a "menu" such that when any of its contents are clicked,
+    // they will open their targets in the outer container.  To get back to the "menu", you click on the main container.
+    @computed get inPlaceContainerButton() {
+        return this.propertyToggleBtn(
+            'In Place',
+            'isInPlaceContainer',
+            on => `${on ? 'Make' : 'Remove'} in place container flag`,
+            on => 'window',
+            onClick => {
+                SelectionManager.Views().forEach(dv => {
+                    const containerDoc = dv.rootDoc;
+                    containerDoc._isLinkButton = containerDoc._fitContentsToBox = containerDoc._forceActive = containerDoc._isInPlaceContainer = !containerDoc._isInPlaceContainer;
+                    containerDoc.followLinkLocation = containerDoc._isInPlaceContainer ? 'inPlace' : undefined;
+                    containerDoc._xPadding = containerDoc._yPadding = containerDoc._isInPlaceContainer ? 10 : undefined;
+                    const menuDoc = DocListCast(dv.dataDoc[dv.props.fieldKey ?? Doc.LayoutFieldKey(containerDoc)]).lastElement();
+                    if (menuDoc) {
+                        menuDoc._forceActive = menuDoc._fitContentsToBox = menuDoc._isLinkButton = true;
+                        DocUtils.MakeLink({ doc: dv.rootDoc }, { doc: menuDoc }, 'back link to container');
+                        DocListCast(menuDoc[Doc.LayoutFieldKey(menuDoc)]).forEach(menuItem => {
+                            menuItem._isLinkButton = true;
+                            menuItem._followLinkLocation = 'inPlace';
+                        });
+                    }
+                });
+            }
+        );
+    }
     @computed get fitWidthButton() {
         return this.propertyToggleBtn(
             'Fit\xA0Width',
@@ -256,7 +292,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                         docView.setToggleDetail();
                         break;
                     case 'linkInPlace':
-                        docView.toggleFollowLink('inPlace', true, false);
+                        docView.toggleFollowLink('inPlace', false, false);
                         break;
                     case 'linkOnRight':
                         docView.toggleFollowLink('add:right', false, false);
@@ -277,7 +313,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             ['nothing', 'Select Document'],
             ['enterPortal', 'Enter Portal'],
             ['toggleDetail', 'Toggle Detail'],
-            ['linkInPlace', 'Follow Link'],
+            ['linkInPlace', 'Open in Place'],
             ['linkOnRight', 'Open Link on Right'],
         ];
         const currentSelection = this.selectedDoc.onClickBehavior;
@@ -360,7 +396,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                 {toggle(this.onClickButton)}
                 {toggle(this.fitWidthButton)}
                 {toggle(this.freezeThumb)}
+                {toggle(this.forceActiveButton, { display: !isFreeForm && !isMap ? 'none' : '' })}
                 {toggle(this.fitContentButton, { display: !isFreeForm && !isMap ? 'none' : '' })}
+                {toggle(this.inPlaceContainerButton, { display: !isFreeForm && !isMap ? 'none' : '' })}
                 {toggle(this.autoHeightButton, { display: !isText && !isStacking && !isTree ? 'none' : '' })}
                 {toggle(this.maskButton, { display: !isInk ? 'none' : '' })}
                 {toggle(this.chromeButton, { display: !isCollection || isNovice ? 'none' : '' })}