From 0691dc220f52643f4fd5fa9a29a5c52ef59321aa Mon Sep 17 00:00:00 2001
From: Lauren Choi <laurenchoi@gmail.com>
Date: Fri, 29 Oct 2021 10:30:48 -0400
Subject: toggle properties on selection

---
 src/client/views/PropertiesView.tsx | 88 +++++++++++++++++++++++++++++++------
 1 file changed, 75 insertions(+), 13 deletions(-)

(limited to 'src/client/views/PropertiesView.tsx')

diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index ab9022a84..334a44b3b 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -57,6 +57,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     @computed get isPres(): boolean {
         return this.selectedDoc?.type === DocumentType.PRES;
     }
+    @computed get isLink(): boolean {
+        return this.selectedDoc?.type === DocumentType.LINK;
+    }
     @computed get dataDoc() { return this.selectedDoc?.[DataSym]; }
 
     @observable layoutFields: boolean = false;
@@ -146,8 +149,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 if (key[0] === "#") {
                     rows.push(<div style={{ display: "flex", overflowY: "visible", marginBottom: "2px" }} key={key}>
                         <span style={{ fontWeight: "bold", whiteSpace: "nowrap" }}>{key}</span>
-                    &nbsp;
-                </div>);
+                        &nbsp;
+                    </div>);
                 } else {
                     const contentElement = <EditableView key="editableView"
                         contents={contents !== undefined ? Field.toString(contents as Field) : "null"}
@@ -214,8 +217,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
 
                         rows.push(<div style={{ display: "flex", overflowY: "visible", marginBottom: "-1px" }} key={key}>
                             <span style={{ fontWeight: "bold", whiteSpace: "nowrap" }}>{key + ":"}</span>
-                        &nbsp;
-                        {contentElement}
+                            &nbsp;
+                            {contentElement}
                         </div>);
                     }
                 }
@@ -855,7 +858,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 onPointerDown={action(() => this.openOptions = !this.openOptions)}
                 style={{ backgroundColor: this.openOptions ? "black" : "" }}>
                 Options
-                        <div className="propertiesView-settings-title-icon">
+                <div className="propertiesView-settings-title-icon">
                     <FontAwesomeIcon icon={this.openOptions ? "caret-down" : "caret-right"} size="lg" color="white" />
                 </div>
             </div>
@@ -872,7 +875,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 onPointerDown={action(() => this.openSharing = !this.openSharing)}
                 style={{ backgroundColor: this.openSharing ? "black" : "" }}>
                 Sharing {"&"} Permissions
-                        <div className="propertiesView-sharing-title-icon">
+                <div className="propertiesView-sharing-title-icon">
                     <FontAwesomeIcon icon={this.openSharing ? "caret-down" : "caret-right"} size="lg" color="white" />
                 </div>
             </div>
@@ -948,7 +951,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 onPointerDown={action(() => this.openFilters = !this.openFilters)}
                 style={{ backgroundColor: this.openFilters ? "black" : "" }}>
                 Filters
-                        <div className="propertiesView-filters-title-icon">
+                <div className="propertiesView-filters-title-icon">
                     <FontAwesomeIcon icon={this.openFilters ? "caret-down" : "caret-right"} size="lg" color="white" />
                 </div>
             </div>
@@ -997,7 +1000,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                         onPointerDown={action(() => this.openAppearance = !this.openAppearance)}
                         style={{ backgroundColor: this.openAppearance ? "black" : "" }}>
                         Appearance
-                            <div className="propertiesView-appearance-title-icon">
+                        <div className="propertiesView-appearance-title-icon">
                             <FontAwesomeIcon icon={this.openAppearance ? "caret-down" : "caret-right"} size="lg" color="white" />
                         </div>
                     </div>
@@ -1012,7 +1015,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     onPointerDown={action(() => this.openTransform = !this.openTransform)}
                     style={{ backgroundColor: this.openTransform ? "black" : "" }}>
                     Transform
-                        <div className="propertiesView-transform-title-icon">
+                    <div className="propertiesView-transform-title-icon">
                         <FontAwesomeIcon icon={this.openTransform ? "caret-down" : "caret-right"} size="lg" color="white" />
                     </div>
                 </div>
@@ -1029,7 +1032,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 onPointerDown={action(() => this.openFields = !this.openFields)}
                 style={{ backgroundColor: this.openFields ? "black" : "" }}>
                 Fields {"&"} Tags
-                            <div className="propertiesView-fields-title-icon">
+                <div className="propertiesView-fields-title-icon">
                     <FontAwesomeIcon icon={this.openFields ? "caret-down" : "caret-right"} size="lg" color="white" />
                 </div>
             </div>
@@ -1050,7 +1053,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 onPointerDown={action(() => this.openContexts = !this.openContexts)}
                 style={{ backgroundColor: this.openContexts ? "black" : "" }}>
                 Contexts
-                        <div className="propertiesView-contexts-title-icon">
+                <div className="propertiesView-contexts-title-icon">
                     <FontAwesomeIcon icon={this.openContexts ? "caret-down" : "caret-right"} size="lg" color="white" />
                 </div>
             </div>
@@ -1064,7 +1067,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 onPointerDown={action(() => this.openLayout = !this.openLayout)}
                 style={{ backgroundColor: this.openLayout ? "black" : "" }}>
                 Layout
-                        <div className="propertiesView-layout-title-icon">
+                <div className="propertiesView-layout-title-icon">
                     <FontAwesomeIcon icon={this.openLayout ? "caret-down" : "caret-right"} size="lg" color="white" />
                 </div>
             </div>
@@ -1072,6 +1075,14 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         </div>;
     }
 
+    toggleAnchor = () => {
+        this.selectedDoc.anchor = !this.selectedDoc.anchor
+    }
+
+    toggleArrow = () => {
+        this.selectedDoc.arrow = !this.selectedDoc.arrow
+    }
+
 
 
     /**
@@ -1095,6 +1106,57 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             </div>;
 
         } else {
+            if (this.selectedDoc && this.isLink) {
+                return <div className="propertiesView">
+                    <div className="propertiesView-title">
+                        Linking
+                    </div>
+                    <div className="properties-grid col propertiesView-textInfo">
+                        Information
+                        <div className="row" id="propertiesView-label">
+                            <p>Label</p>
+                            <input type="text" />
+                        </div>
+                        <div className="row" id="propertiesView-category">
+                            <p>Label</p>
+                            <input type="text" />
+                        </div>
+                        <div className="row" id="propertiesView-description">
+                            <p>Description</p>
+                            <input type="text" />
+                        </div>
+                    </div>
+                    <div className="propertiesView-behavior">
+                        Behavior
+                        <div id="propertiesView-follow">
+                            Follow
+                            <select name="selectList" id="selectList">
+                                <option value="default">Default</option>
+                                <option value="newLeft">Open in new left pane</option>
+                                <option value="newRight">Open in new right pane</option>
+                                <option value="replaceLeft">Replace left tab</option>
+                                <option value="replaceRight">Replace right tab</option>
+                                <option value="openFull">Open full screen</option>
+                                <option value="openTab">Open in new tab</option>
+                            </select>
+                        </div>
+                        <div id="propertiesView-anchor">
+                            Auto-move anchor
+                            <button
+                                style={{ backgroundColor: this.selectedDoc.anchor ? 'blue' : 'white', width: 50, height: 50 }}
+                                onClick={this.toggleAnchor}
+                            />
+                        </div>
+                        <div id="propertiesView-arrow">
+                            Auto-move arrow
+                            <button
+                                style={{ backgroundColor: this.selectedDoc.arrow ? 'blue' : 'white', width: 50, height: 50 }}
+                                onClick={this.toggleArrow}
+                            />
+                        </div>
+                    </div>
+                </div>;
+            }
             if (this.selectedDoc && !this.isPres) {
                 return <div className="propertiesView" style={{
                     width: this.props.width,
@@ -1148,7 +1210,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                             onPointerDown={action(() => { this.openPresTransitions = !this.openPresTransitions; })}
                             style={{ backgroundColor: this.openPresTransitions ? "black" : "" }}>
                             &nbsp; <FontAwesomeIcon style={{ alignSelf: "center" }} icon={"rocket"} /> &nbsp; Transitions
-                        <div className="propertiesView-presTrails-title-icon">
+                            <div className="propertiesView-presTrails-title-icon">
                                 <FontAwesomeIcon icon={this.openPresTransitions ? "caret-down" : "caret-right"} size="lg" color="white" />
                             </div>
                         </div>
-- 
cgit v1.2.3-70-g09d2