1 files changed, 50 insertions, 4 deletions

diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index fbcd55c47..7a83295c7 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -79,6 +79,12 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     @computed get titleButton() {
         return this.propertyToggleBtn("Title", "_showTitle", on => "Switch between title styles", on => "text-width", (dv, doc) => (dv?.rootDoc || doc)._showTitle = !(dv?.rootDoc || doc)._showTitle ? "title" : (dv?.rootDoc || doc)._showTitle === "title" ? "title:hover" : undefined);
     }
+    @computed get autoHeightButton() {
+        return this.propertyToggleBtn("Auto\xA0Size", "_autoHeight", on => `Automatical vertical sizing to show all content`, on => "arrows-alt-v");
+    }
+    @computed get gridButton() {
+        return this.propertyToggleBtn("Grid", "_backgroundGrid-show", on => `Display background grid in collection`, on => "border-all");
+    }
 
     @computed
     get onClickButton() {
@@ -95,6 +101,27 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             </div>
         </Tooltip>;
     }
+    @computed
+    get perspectiveButton() {
+        return !this.selectedDoc ? (null) : <Tooltip title={<div className="dash-tooltip">Choose view perspective</div>} placement="top">
+            <div>
+                <div className="propertiesButtons-linkFlyout">
+                    <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={this.onPerspectiveFlyout}>
+                        <div className={"propertiesButtons-linkButton-empty"} onPointerDown={e => e.stopPropagation()} >
+                            <FontAwesomeIcon className="documentdecorations-icon" icon="mouse-pointer" size="lg" />
+                        </div>
+                    </Flyout>
+                </div>
+                <div className="propertiesButtons-title"> Perspective </div>
+            </div>
+        </Tooltip>;
+    }
+
+    @undoBatch
+    handlePerspectiveChange = (e: any) => {
+        this.selectedDoc && (this.selectedDoc._viewType = e.target.value);
+        SelectionManager.Views().filter(dv => dv.docView).map(dv => dv.docView!).forEach(docView => docView.layoutDoc._viewType = e.target.value);
+    }
 
     @undoBatch
     @action
@@ -136,12 +163,28 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             {Doc.UserDoc().noviceMode ? (null) : <div onPointerDown={this.editOnClickScript} className="onClickFlyout-editScript"> Edit onClick Script</div>}
         </div>;
     }
+    @computed
+    get onPerspectiveFlyout() {
+        const excludedViewTypes = Doc.UserDoc().noviceMode ? [CollectionViewType.Invalid, CollectionViewType.Docking, CollectionViewType.Pile, CollectionViewType.StackedTimeline, CollectionViewType.Stacking, CollectionViewType.Map, CollectionViewType.Linear] :
+            [CollectionViewType.Invalid, CollectionViewType.Docking, CollectionViewType.Pile, CollectionViewType.StackedTimeline, CollectionViewType.Linear];
+
+        const makeLabel = (value: string, label: string) => <div className="radio">
+            <label>
+                <input type="radio" value={value} checked={(this.selectedDoc?._viewType ?? "invalid") === value} onChange={this.handlePerspectiveChange} />
+                {label}
+            </label>
+        </div>;
+        return <form>
+            {Object.values(CollectionViewType).filter(type => !excludedViewTypes.includes(type)).map(type => makeLabel(type, type))}
+        </form>;
+    }
 
     render() {
         const layoutField = this.selectedDoc?.[Doc.LayoutFieldKey(this.selectedDoc)];
         const isText = layoutField instanceof RichTextField;
         const isInk = layoutField instanceof InkField;
         const isCollection = this.selectedDoc?.type === DocumentType.COL;
+        const isStacking = this.selectedDoc?._viewType === CollectionViewType.Stacking;
         const isFreeForm = this.selectedDoc?._viewType === CollectionViewType.Freeform;
         const toggle = (ele: JSX.Element | null, style?: React.CSSProperties) => <div className="propertiesButtons-button" style={style}> {ele} </div>;
 
@@ -149,15 +192,18 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             <div className="propertiesButtons">
                 {toggle(this.titleButton)}
                 {toggle(this.captionButton)}
-                {toggle(this.chromeButton, { display: isCollection ? "" : "none" })}
                 {toggle(this.lockButton)}
                 {toggle(this.dictationButton)}
                 {toggle(this.onClickButton)}
-                {toggle(this.clustersButton, { display: !isFreeForm ? "none" : "" })}
-                {toggle(this.panButton, { display: !isFreeForm ? "none" : "" })}
-                {toggle(this.fitContentButton, { display: !isFreeForm && !isText ? "none" : "" })}
                 {toggle(this.fitWidthButton)}
+                {toggle(this.fitContentButton, { display: !isFreeForm ? "none" : "" })}
+                {toggle(this.autoHeightButton, { display: !isText && !isStacking ? "none" : "" })}
                 {toggle(this.maskButton, { display: !isInk ? "none" : "" })}
+                {toggle(this.chromeButton, { display: isCollection ? "" : "none" })}
+                {toggle(this.gridButton, { display: isCollection ? "" : "none" })}
+                {toggle(this.clustersButton, { display: !isFreeForm ? "none" : "" })}
+                {toggle(this.panButton, { display: !isFreeForm ? "none" : "" })}
+                {toggle(this.perspectiveButton, { display: !isCollection ? "none" : "" })}
             </div>;
     }
 }
\ No newline at end of file