Merge branch 'master' into presentation_updates

3 files changed, 212 insertions, 191 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 65cd28742..f2ad0ba58 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1258,7 +1258,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
         this.props.ContainingCollectionView &&
             optionItems.push({ description: "Promote Collection", event: this.promoteCollection, icon: "table" });
         optionItems.push({ description: this.layoutDoc._lockedTransform ? "Unlock Transform" : "Lock Transform", event: this.toggleLockTransform, icon: this.layoutDoc._lockedTransform ? "unlock" : "lock" });
-        appearanceItems.push({ description: "Use Background Color as Default", event: () => Cast(Doc.UserDoc().emptyCollection, Doc, null)._backgroundColor = StrCast(this.layoutDoc._backgroundColor), icon: "palette" });
+        optionItems.push({ description: "Use Background Color as Default", event: () => Cast(Doc.UserDoc().emptyCollection, Doc, null)._backgroundColor = StrCast(this.layoutDoc._backgroundColor), icon: "palette" });
         if (!Doc.UserDoc().noviceMode) {
             optionItems.push({ description: (!this.layoutDoc._nativeWidth || !this.layoutDoc._nativeHeight ? "Freeze" : "Unfreeze") + " Aspect", event: this.toggleNativeDimensions, icon: "snowflake" });
             optionItems.push({ description: `${this.Document._freeformLOD ? "Enable LOD" : "Disable LOD"}`, event: () => this.Document._freeformLOD = !this.Document._freeformLOD, icon: "table" });
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index 89124129b..5b41db90e 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -41,7 +41,7 @@
         font-size: 12.5px;
 
         &:hover {
-            cursor: pointer;
+            cursor: text;
         }
     }
 
@@ -617,6 +617,7 @@
 
         display: flex;
         margin-bottom: 3px;
+        margin-left: 4px;
 
         .arrows-head {
 
@@ -650,7 +651,7 @@
     .dashed {
 
         display: flex;
-        margin-left: 74px;
+        margin-left: 64px;
         margin-bottom: 6px;
 
         .dashed-title {
@@ -662,4 +663,15 @@
             margin-top: 2px;
         }
     }
+}
+
+.editable-title {
+    border: none;
+    padding: 6px;
+    padding-bottom: 2px;
+
+
+    &:hover {
+        border: 0.75px solid rgb(122, 28, 28);
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index dcbf8e989..89f48fc65 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -29,6 +29,9 @@ import "./FormatShapePane.scss";
 import { discovery_v1 } from "googleapis";
 import { PresBox } from "../../nodes/PresBox";
 import { DocumentManager } from "../../../util/DocumentManager";
+const higflyout = require("@hig/flyout");
+export const { anchorPoints } = higflyout;
+export const Flyout = higflyout.default;
 
 
 interface PropertiesViewProps {
@@ -74,6 +77,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     @observable openPresProgressivize: boolean = true;
     @observable openSlideOptions: boolean = true;
 
+    @observable inActions: boolean = false;
     @observable _controlBtn: boolean = false;
     @observable _lock: boolean = false;
 
@@ -174,7 +178,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             doc && Object.keys(doc).forEach(key => !(key in ids) && doc[key] !== ComputedField.undefined && (ids[key] = key));
             const rows: JSX.Element[] = [];
             for (const key of Object.keys(ids).slice().sort()) {
-                if ((key[0] === key[0].toUpperCase() && key.substring(0, 3) !== "ACL")
+                if ((key[0] === key[0].toUpperCase() && key.substring(0, 3) !== "ACL" && key !== "UseCors")
                     || key[0] === "#" || key === "author" ||
                     key === "creationDate" || key.indexOf("lastModified") !== -1) {
 
@@ -254,7 +258,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     rootSelected={returnFalse}
                     treeViewDoc={undefined}
                     backgroundColor={() => "lightgrey"}
-                    fitToBox={false}
+                    fitToBox={true}
                     FreezeDimensions={true}
                     NativeWidth={layoutDoc.type ===
                         StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : returnZero}
@@ -277,6 +281,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     bringToFront={returnFalse}
                     ContentScaling={returnOne}
                     dontRegisterView={true}
+                    dropAction={undefined}
                 />
             </div>;
         } else {
@@ -367,20 +372,19 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         />;
     }
 
-    @undoBatch
     @action
     toggleCheckbox = () => {
         this.layoutFields = !this.layoutFields;
     }
 
     @computed get editableTitle() {
-        return <EditableView
+        return <div className="editable-title"><EditableView
             key="editableView"
             contents={StrCast(this.selectedDoc?.title)}
             height={25}
             fontSize={14}
             GetValue={() => StrCast(this.selectedDoc?.title)}
-            SetValue={this.setTitle} />;
+            SetValue={this.setTitle} /> </div>;
     }
 
     @undoBatch
@@ -417,15 +421,14 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             var index = 0;
             if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) {
                 doc.rotation = Number(doc.rotation) + Number(angle);
-                const ink = Cast(doc.data, InkField)?.inkData;
-                if (ink) {
-
+                const inks = Cast(doc.data, InkField)?.inkData;
+                if (inks) {
                     const newPoints: { X: number, Y: number }[] = [];
-                    for (var i = 0; i < ink.length; i++) {
-                        const newX = Math.cos(angle) * (ink[i].X - _centerPoints[index].X) - Math.sin(angle) * (ink[i].Y - _centerPoints[index].Y) + _centerPoints[index].X;
-                        const newY = Math.sin(angle) * (ink[i].X - _centerPoints[index].X) + Math.cos(angle) * (ink[i].Y - _centerPoints[index].Y) + _centerPoints[index].Y;
+                    inks.forEach(ink => {
+                        const newX = Math.cos(angle) * (ink.X - _centerPoints[index].X) - Math.sin(angle) * (ink.Y - _centerPoints[index].Y) + _centerPoints[index].X;
+                        const newY = Math.sin(angle) * (ink.X - _centerPoints[index].X) + Math.cos(angle) * (ink.Y - _centerPoints[index].Y) + _centerPoints[index].Y;
                         newPoints.push({ X: newX, Y: newY });
-                    }
+                    });
                     doc.data = new InkField(newPoints);
                     const xs = newPoints.map(p => p.X);
                     const ys = newPoints.map(p => p.Y);
@@ -552,7 +555,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
 
     getField(key: string) {
         //if (this.selectedDoc) {
-        return Field.toString(this?.[key] as Field);
+        return Field.toString(this.selectedDoc?.[key] as Field);
         // } else {
         //     return undefined as Opt<string>;
         // }
@@ -594,14 +597,18 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     set colorFil(value) { value && (this._lastFill = value); this.selectedDoc && (this.selectedDoc.fillColor = value ? value : undefined); }
     set colorStk(value) { value && (this._lastLine = value); this.selectedDoc && (this.selectedDoc.color = value ? value : undefined); }
 
-    colorButton(value: string, setter: () => {}) {
-        return <div className="color-button" key="color" onPointerDown={undoBatch(action(e => setter()))}>
-            <div className="color-button-preview" style={{
-                backgroundColor: value ?? "121212", width: 15, height: 15,
-                display: value === "" || value === "transparent" ? "none" : ""
-            }} />
-            {value === "" || value === "transparent" ? <p style={{ fontSize: 25, color: "red", marginTop: -14, position: "fixed" }}>☒</p> : ""}
-        </div>;
+    colorButton(value: string, type: string, setter: () => {}) {
+        return <Flyout anchorPoint={anchorPoints.LEFT_TOP}
+            content={type === "fill" ? this.fillPicker : this.linePicker}>
+            <div className="color-button" key="color" onPointerDown={undoBatch(action(e => setter()))}>
+                <div className="color-button-preview" style={{
+                    backgroundColor: value ?? "121212", width: 15, height: 15,
+                    display: value === "" || value === "transparent" ? "none" : ""
+                }} />
+                {value === "" || value === "transparent" ? <p style={{ fontSize: 25, color: "red", marginTop: -14, position: "fixed" }}>☒</p> : ""}
+            </div>
+        </Flyout>;
+
     }
 
     @undoBatch
@@ -627,8 +634,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             color={type === "stk" ? this.colorStk : this.colorFil} />;
     }
 
-    @computed get fillButton() { return this.colorButton(this.colorFil, () => { this._fillBtn = !this._fillBtn; this._lineBtn = false; return true; }); }
-    @computed get lineButton() { return this.colorButton(this.colorStk, () => { this._lineBtn = !this._lineBtn; this._fillBtn = false; return true; }); }
+    @computed get fillButton() { return this.colorButton(this.colorFil, "fill", () => { this._fillBtn = !this._fillBtn; this._lineBtn = false; return true; }); }
+    @computed get lineButton() { return this.colorButton(this.colorStk, "line", () => { this._lineBtn = !this._lineBtn; this._fillBtn = false; return true; }); }
 
     @computed get fillPicker() { return this.colorPicker((color: string) => this.colorFil = color, "fil"); }
     @computed get linePicker() { return this.colorPicker((color: string) => this.colorStk = color, "stk"); }
@@ -645,8 +652,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     <div className="stroke-button">{this.lineButton}</div>
                 </div>
             </div>
-            {this._fillBtn ? this.fillPicker : ""}
-            {this._lineBtn ? this.linePicker : ""}
+            {/* {this._fillBtn ? this.fillPicker : ""}
+            {this._lineBtn ? this.linePicker : ""} */}
         </div>;
     }
 
@@ -753,201 +760,203 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             return <div className="propertiesView" style={{ width: this.props.width }}>
                 <div className="propertiesView-title" style={{ width: this.props.width }}>
                     No Document Selected
-                <div className="propertiesView-title-icon" onPointerDown={this.props.onDown}>
-                        <FontAwesomeIcon icon="times" color="black" size="xs" />
-                    </div>
                 </div>
             </div>;
-        }
 
-        const novice = Doc.UserDoc().noviceMode;
-
-        if (this.selectedDoc && !this.isPres) {
-            return <div className="propertiesView" style={{ width: this.props.width }} >
-                <div className="propertiesView-title" style={{ width: this.props.width }}>
-                    Properties
-                <div className="propertiesView-title-icon" onPointerDown={this.props.onDown}>
+        } else {
+            const novice = Doc.UserDoc().noviceMode;
+
+            if (this.selectedDoc && !this.isPres) {
+                return <div className="propertiesView" style={{
+                    width: this.props.width,
+                    // overflowY: this.inActions ? "visible" : "scroll"
+                }} >
+                    <div className="propertiesView-title" style={{ width: this.props.width }}>
+                        Properties
+                    {/* <div className="propertiesView-title-icon" onPointerDown={this.props.onDown}>
                         <FontAwesomeIcon icon="times" color="black" size="sm" />
+                    </div> */}
                     </div>
-                </div>
-                <div className="propertiesView-name">
-                    {this.editableTitle}
-                </div>
-                <div className="propertiesView-settings">
-                    <div className="propertiesView-settings-title"
-                        onPointerDown={() => runInAction(() => { this.openActions = !this.openActions; })}
-                        style={{ backgroundColor: this.openActions ? "black" : "" }}>
-                        Actions
-                    <div className="propertiesView-settings-title-icon">
-                            <FontAwesomeIcon icon={this.openActions ? "caret-down" : "caret-right"} size="lg" color="white" />
+                    <div className="propertiesView-name">
+                        {this.editableTitle}
+                    </div>
+                    <div className="propertiesView-settings" onPointerEnter={() => runInAction(() => { this.inActions = true; })}
+                        onPointerLeave={action(() => this.inActions = false)}>
+                        <div className="propertiesView-settings-title"
+                            onPointerDown={() => runInAction(() => { this.openActions = !this.openActions; })}
+                            style={{ backgroundColor: this.openActions ? "black" : "" }}>
+                            Actions
+                        <div className="propertiesView-settings-title-icon">
+                                <FontAwesomeIcon icon={this.openActions ? "caret-down" : "caret-right"} size="lg" color="white" />
+                            </div>
                         </div>
+                        {!this.openActions ? (null) :
+                            <div className="propertiesView-settings-content">
+                                <PropertiesButtons />
+                            </div>}
                     </div>
-                    {!this.openActions ? (null) :
-                        <div className="propertiesView-settings-content">
-                            <PropertiesButtons />
-                        </div>}
-                </div>
-                <div className="propertiesView-sharing">
-                    <div className="propertiesView-sharing-title"
-                        onPointerDown={() => runInAction(() => { this.openSharing = !this.openSharing; })}
-                        style={{ backgroundColor: this.openSharing ? "black" : "" }}>
-                        Sharing {"&"} Permissions
-                    <div className="propertiesView-sharing-title-icon">
-                            <FontAwesomeIcon icon={this.openSharing ? "caret-down" : "caret-right"} size="lg" color="white" />
+                    <div className="propertiesView-sharing">
+                        <div className="propertiesView-sharing-title"
+                            onPointerDown={() => runInAction(() => { this.openSharing = !this.openSharing; })}
+                            style={{ backgroundColor: this.openSharing ? "black" : "" }}>
+                            Sharing {"&"} Permissions
+                        <div className="propertiesView-sharing-title-icon">
+                                <FontAwesomeIcon icon={this.openSharing ? "caret-down" : "caret-right"} size="lg" color="white" />
+                            </div>
                         </div>
+                        {!this.openSharing ? (null) :
+                            <div className="propertiesView-sharing-content">
+                                {this.sharingTable}
+                            </div>}
                     </div>
-                    {!this.openSharing ? (null) :
-                        <div className="propertiesView-sharing-content">
-                            {this.sharingTable}
+
+                    {!this.isInk ? (null) :
+                        <div className="propertiesView-appearance">
+                            <div className="propertiesView-appearance-title"
+                                onPointerDown={() => runInAction(() => { this.openAppearance = !this.openAppearance; })}
+                                style={{ backgroundColor: this.openAppearance ? "black" : "" }}>
+                                Appearance
+                            <div className="propertiesView-appearance-title-icon">
+                                    <FontAwesomeIcon icon={this.openAppearance ? "caret-down" : "caret-right"} size="lg" color="white" />
+                                </div>
+                            </div>
+                            {!this.openAppearance ? (null) :
+                                <div className="propertiesView-appearance-content">
+                                    {this.appearanceEditor}
+                                </div>}
                         </div>}
-                </div>
 
-                {!this.isInk ? (null) :
-                    <div className="propertiesView-appearance">
-                        <div className="propertiesView-appearance-title"
-                            onPointerDown={() => runInAction(() => { this.openAppearance = !this.openAppearance; })}
-                            style={{ backgroundColor: this.openAppearance ? "black" : "" }}>
-                            Appearance
-                        <div className="propertiesView-appearance-title-icon">
-                                <FontAwesomeIcon icon={this.openAppearance ? "caret-down" : "caret-right"} size="lg" color="white" />
+                    {this.isInk ? <div className="propertiesView-transform">
+                        <div className="propertiesView-transform-title"
+                            onPointerDown={() => runInAction(() => { this.openTransform = !this.openTransform; })}
+                            style={{ backgroundColor: this.openTransform ? "black" : "" }}>
+                            Transform
+                        <div className="propertiesView-transform-title-icon">
+                                <FontAwesomeIcon icon={this.openTransform ? "caret-down" : "caret-right"} size="lg" color="white" />
                             </div>
                         </div>
-                        {!this.openAppearance ? (null) :
-                            <div className="propertiesView-appearance-content">
-                                {this.appearanceEditor}
-                            </div>}
-                    </div>}
-
-                {this.isInk ? <div className="propertiesView-transform">
-                    <div className="propertiesView-transform-title"
-                        onPointerDown={() => runInAction(() => { this.openTransform = !this.openTransform; })}
-                        style={{ backgroundColor: this.openTransform ? "black" : "" }}>
-                        Transform
-                    <div className="propertiesView-transform-title-icon">
-                            <FontAwesomeIcon icon={this.openTransform ? "caret-down" : "caret-right"} size="lg" color="white" />
-                        </div>
-                    </div>
-                    {this.openTransform ? <div className="propertiesView-transform-content">
-                        {this.transformEditor}
+                        {this.openTransform ? <div className="propertiesView-transform-content">
+                            {this.transformEditor}
+                        </div> : null}
                     </div> : null}
-                </div> : null}
-
-                <div className="propertiesView-fields">
-                    <div className="propertiesView-fields-title"
-                        onPointerDown={() => runInAction(() => { this.openFields = !this.openFields; })}
-                        style={{ backgroundColor: this.openFields ? "black" : "" }}>
-                        <div className="propertiesView-fields-title-name">
-                            Fields {"&"} Tags
-                        <div className="propertiesView-fields-title-icon">
-                                <FontAwesomeIcon icon={this.openFields ? "caret-down" : "caret-right"} size="lg" color="white" />
+
+                    <div className="propertiesView-fields">
+                        <div className="propertiesView-fields-title"
+                            onPointerDown={() => runInAction(() => { this.openFields = !this.openFields; })}
+                            style={{ backgroundColor: this.openFields ? "black" : "" }}>
+                            <div className="propertiesView-fields-title-name">
+                                Fields {"&"} Tags
+                            <div className="propertiesView-fields-title-icon">
+                                    <FontAwesomeIcon icon={this.openFields ? "caret-down" : "caret-right"} size="lg" color="white" />
+                                </div>
                             </div>
                         </div>
+                        {!novice && this.openFields ? <div className="propertiesView-fields-checkbox">
+                            {this.fieldsCheckbox}
+                            <div className="propertiesView-fields-checkbox-text">Layout</div>
+                        </div> : null}
+                        {!this.openFields ? (null) :
+                            <div className="propertiesView-fields-content">
+                                {novice ? this.noviceFields : this.expandedField}
+                            </div>}
                     </div>
-                    {!novice && this.openFields ? <div className="propertiesView-fields-checkbox">
-                        {this.fieldsCheckbox}
-                        <div className="propertiesView-fields-checkbox-text">Layout</div>
-                    </div> : null}
-                    {!this.openFields ? (null) :
-                        <div className="propertiesView-fields-content">
-                            {novice ? this.noviceFields : this.expandedField}
-                        </div>}
-                </div>
-                <div className="propertiesView-layout">
-                    <div className="propertiesView-layout-title"
-                        onPointerDown={() => runInAction(() => { this.openLayout = !this.openLayout; })}
-                        style={{ backgroundColor: this.openLayout ? "black" : "" }}>
-                        Layout
-                    <div className="propertiesView-layout-title-icon" onPointerDown={() => runInAction(() => { this.openLayout = !this.openLayout; })}>
-                            <FontAwesomeIcon icon={this.openLayout ? "caret-down" : "caret-right"} size="lg" color="white" />
+                    <div className="propertiesView-layout">
+                        <div className="propertiesView-layout-title"
+                            onPointerDown={() => runInAction(() => { this.openLayout = !this.openLayout; })}
+                            style={{ backgroundColor: this.openLayout ? "black" : "" }}>
+                            Layout
+                        <div className="propertiesView-layout-title-icon" onPointerDown={() => runInAction(() => { this.openLayout = !this.openLayout; })}>
+                                <FontAwesomeIcon icon={this.openLayout ? "caret-down" : "caret-right"} size="lg" color="white" />
+                            </div>
                         </div>
+                        {this.openLayout ? <div className="propertiesView-layout-content">{this.layoutPreview}</div> : null}
                     </div>
-                    {this.openLayout ? <div className="propertiesView-layout-content">{this.layoutPreview}</div> : null}
-                </div>
-            </div>;
-        }
-        if (this.isPres) {
-            return <div className="propertiesView" style={{ width: this.props.width }} >
-                <div className="propertiesView-title" style={{ width: this.props.width }}>
-                    Presentation
-                <div className="propertiesView-title-icon" onPointerDown={this.props.onDown}>
-                        <FontAwesomeIcon icon="times" color="black" size="sm" />
+                </div>;
+            }
+            if (this.isPres) {
+                return <div className="propertiesView" style={{ width: this.props.width }} >
+                    <div className="propertiesView-title" style={{ width: this.props.width }}>
+                        Presentation
+                    <div className="propertiesView-title-icon" onPointerDown={this.props.onDown}>
+                            <FontAwesomeIcon icon="times" color="black" size="sm" />
+                        </div>
                     </div>
-                </div>
-                <div className="propertiesView-name">
-                    {this.editableTitle}
-                    <div className="propertiesView-presSelected">
-                        {PresBox.Instance._selectedArray.length} selected
-                        <div className="propertiesView-selectedList">
-                            {PresBox.Instance.listOfSelected}
+                    <div className="propertiesView-name">
+                        {this.editableTitle}
+                        <div className="propertiesView-presSelected">
+                            {PresBox.Instance._selectedArray.length} selected
+                            <div className="propertiesView-selectedList">
+                                {PresBox.Instance.listOfSelected}
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div className="propertiesView-settings">
-                    <div className="propertiesView-settings-title"
-                        onPointerDown={() => runInAction(() => { this.openAddSlide = !this.openAddSlide; })}
-                        style={{ backgroundColor: this.openAddSlide ? "black" : "" }}>
-                        &nbsp; <FontAwesomeIcon icon={"plus"} /> &nbsp; Add new slide
-                    <div className="propertiesView-settings-title-icon">
-                            <FontAwesomeIcon icon={this.openAddSlide ? "caret-down" : "caret-right"} size="lg" color="white" />
+                    <div className="propertiesView-settings">
+                        <div className="propertiesView-settings-title"
+                            onPointerDown={() => runInAction(() => { this.openAddSlide = !this.openAddSlide; })}
+                            style={{ backgroundColor: this.openAddSlide ? "black" : "" }}>
+                            &nbsp; <FontAwesomeIcon icon={"plus"} /> &nbsp; Add new slide
+                        <div className="propertiesView-settings-title-icon">
+                                <FontAwesomeIcon icon={this.openAddSlide ? "caret-down" : "caret-right"} size="lg" color="white" />
+                            </div>
                         </div>
+                        {this.openAddSlide ? <div className="propertiesView-settings-content">
+                            {PresBox.Instance.newDocumentDropdown}
+                        </div> : null}
                     </div>
-                    {this.openAddSlide ? <div className="propertiesView-settings-content">
-                        {PresBox.Instance.newDocumentDropdown}
-                    </div> : null}
-                </div>
-                <div className="propertiesView-sharing">
-                    <div className="propertiesView-sharing-title"
-                        onPointerDown={() => runInAction(() => { this.openPresTransitions = !this.openPresTransitions; })}
-                        style={{ backgroundColor: this.openPresTransitions ? "black" : "" }}>
-                        &nbsp; <FontAwesomeIcon icon={"rocket"} /> &nbsp; Transitions
-                    <div className="propertiesView-sharing-title-icon">
-                            <FontAwesomeIcon icon={this.openPresTransitions ? "caret-down" : "caret-right"} size="lg" color="white" />
+                    <div className="propertiesView-sharing">
+                        <div className="propertiesView-sharing-title"
+                            onPointerDown={() => runInAction(() => { this.openPresTransitions = !this.openPresTransitions; })}
+                            style={{ backgroundColor: this.openPresTransitions ? "black" : "" }}>
+                            &nbsp; <FontAwesomeIcon icon={"rocket"} /> &nbsp; Transitions
+                        <div className="propertiesView-sharing-title-icon">
+                                <FontAwesomeIcon icon={this.openPresTransitions ? "caret-down" : "caret-right"} size="lg" color="white" />
+                            </div>
                         </div>
+                        {this.openPresTransitions ? <div className="propertiesView-sharing-content">
+                            {PresBox.Instance.transitionDropdown}
+                        </div> : null}
                     </div>
-                    {this.openPresTransitions ? <div className="propertiesView-sharing-content">
-                        {PresBox.Instance.transitionDropdown}
-                    </div> : null}
-                </div>
-                <div className="propertiesView-sharing">
-                    <div className="propertiesView-sharing-title"
-                        onPointerDown={() => runInAction(() => { this.openPresProgressivize = !this.openPresProgressivize; })}
-                        style={{ backgroundColor: this.openPresProgressivize ? "black" : "" }}>
-                        &nbsp; <FontAwesomeIcon icon={"tasks"} /> &nbsp; Progressivize
-                    <div className="propertiesView-sharing-title-icon">
-                            <FontAwesomeIcon icon={this.openPresProgressivize ? "caret-down" : "caret-right"} size="lg" color="white" />
+                    <div className="propertiesView-sharing">
+                        <div className="propertiesView-sharing-title"
+                            onPointerDown={() => runInAction(() => { this.openPresProgressivize = !this.openPresProgressivize; })}
+                            style={{ backgroundColor: this.openPresProgressivize ? "black" : "" }}>
+                            &nbsp; <FontAwesomeIcon icon={"tasks"} /> &nbsp; Progressivize
+                        <div className="propertiesView-sharing-title-icon">
+                                <FontAwesomeIcon icon={this.openPresProgressivize ? "caret-down" : "caret-right"} size="lg" color="white" />
+                            </div>
                         </div>
+                        {this.openPresProgressivize ? <div className="propertiesView-sharing-content">
+                            {PresBox.Instance.progressivizeDropdown}
+                        </div> : null}
                     </div>
-                    {this.openPresProgressivize ? <div className="propertiesView-sharing-content">
-                        {PresBox.Instance.progressivizeDropdown}
-                    </div> : null}
-                </div>
-                <div className="propertiesView-sharing">
-                    <div className="propertiesView-sharing-title"
-                        onPointerDown={() => runInAction(() => { this.openSlideOptions = !this.openSlideOptions; })}
-                        style={{ backgroundColor: this.openSlideOptions ? "black" : "" }}>
-                        &nbsp; <FontAwesomeIcon icon={"cog"} /> &nbsp; {PresBox.Instance.stringType} options
-                    <div className="propertiesView-sharing-title-icon">
-                            <FontAwesomeIcon icon={this.openSlideOptions ? "caret-down" : "caret-right"} size="lg" color="white" />
+                    <div className="propertiesView-sharing">
+                        <div className="propertiesView-sharing-title"
+                            onPointerDown={() => runInAction(() => { this.openSlideOptions = !this.openSlideOptions; })}
+                            style={{ backgroundColor: this.openSlideOptions ? "black" : "" }}>
+                            &nbsp; <FontAwesomeIcon icon={"cog"} /> &nbsp; {PresBox.Instance.stringType} options
+                        <div className="propertiesView-sharing-title-icon">
+                                <FontAwesomeIcon icon={this.openSlideOptions ? "caret-down" : "caret-right"} size="lg" color="white" />
+                            </div>
                         </div>
+                        {this.openSlideOptions ? <div className="propertiesView-sharing-content">
+                            {PresBox.Instance.optionsDropdown}
+                        </div> : null}
                     </div>
-                    {this.openSlideOptions ? <div className="propertiesView-sharing-content">
-                        {PresBox.Instance.optionsDropdown}
-                    </div> : null}
-                </div>
-                <div className="propertiesView-sharing">
-                    <div className="propertiesView-sharing-title"
-                        onPointerDown={() => runInAction(() => { this.openSharing = !this.openSharing; })}
-                        style={{ backgroundColor: this.openSharing ? "black" : "" }}>
-                        Sharing {"&"} Permissions
-                    <div className="propertiesView-sharing-title-icon">
-                            <FontAwesomeIcon icon={this.openSharing ? "caret-down" : "caret-right"} size="lg" color="white" />
+                    <div className="propertiesView-sharing">
+                        <div className="propertiesView-sharing-title"
+                            onPointerDown={() => runInAction(() => { this.openSharing = !this.openSharing; })}
+                            style={{ backgroundColor: this.openSharing ? "black" : "" }}>
+                            Sharing {"&"} Permissions
+                        <div className="propertiesView-sharing-title-icon">
+                                <FontAwesomeIcon icon={this.openSharing ? "caret-down" : "caret-right"} size="lg" color="white" />
+                            </div>
                         </div>
+                        {this.openSharing ? <div className="propertiesView-sharing-content">
+                            {this.sharingTable}
+                        </div> : null}
                     </div>
-                    {this.openSharing ? <div className="propertiesView-sharing-content">
-                        {this.sharingTable}
-                    </div> : null}
-                </div>
-            </div>;
+                </div>;
+            }
         }
     }
 }
\ No newline at end of file