added arrow toggling functionality

1 files changed, 16 insertions, 1 deletions

diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 2d461f7ef..936003dce 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -1,6 +1,6 @@
 import React = require("react");
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faAnchor } from '@fortawesome/free-solid-svg-icons'
+import { faAnchor, faArrowRight } from '@fortawesome/free-solid-svg-icons'
 import { Checkbox, Tooltip } from "@material-ui/core";
 import { intersection } from "lodash";
 import { action, autorun, computed, Lambda, observable } from "mobx";
@@ -1187,6 +1187,10 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => this.selectedDoc.linkAutoMove = !this.selectedDoc.linkAutoMove)));
     }
 
+    toggleArrow = (e: React.PointerEvent) => {
+        setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => this.selectedDoc.displayArrow = !this.selectedDoc.displayArrow)));
+    }
+
     @computed
     get editRelationship() {
         return <input
@@ -1279,10 +1283,21 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                             <button
                                 style={{ background: this.selectedDoc.hidden ? "gray" : !this.selectedDoc.linkAutoMove ? "" : "#4476f7", borderRadius: 3 }}
                                 onPointerDown={this.toggleAnchor} onClick={e => e.stopPropagation()}
+                                className="propertiesButton"
                             >
                                 <FontAwesomeIcon className="fa-icon" icon={faAnchor} size="lg" />
                             </button>
                         </div>
+                        <div className="propertiesView-input inline" id="propertiesView-displayArrow">
+                            <p>Display arrow</p>
+                            <button
+                                style={{ background: this.selectedDoc.hidden ? "gray" : !this.selectedDoc.displayArrow ? "" : "#4476f7", borderRadius: 3 }}
+                                onPointerDown={this.toggleArrow} onClick={e => e.stopPropagation()}
+                                className="propertiesButton"
+                            >
+                                <FontAwesomeIcon className="fa-icon" icon={faArrowRight} size="lg" />
+                            </button>
+                        </div>
                     </div>
                 </div >;
             }