diff options
| -rw-r--r-- | src/client/views/PropertiesView.tsx | 49 |
1 files changed, 14 insertions, 35 deletions
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index b9a6a5518..301936219 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -1,5 +1,6 @@ import React = require("react"); import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faAnchor } 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"; @@ -12,7 +13,7 @@ import { List } from "../../fields/List"; import { ComputedField } from "../../fields/ScriptField"; import { BoolCast, Cast, NumCast, StrCast } from "../../fields/Types"; import { denormalizeEmail, GetEffectiveAcl, SharingPermissions } from "../../fields/util"; -import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from "../../Utils"; +import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents } from "../../Utils"; import { DocumentType } from "../documents/DocumentTypes"; import { CurrentUserUtils } from "../util/CurrentUserUtils"; import { DocumentManager } from "../util/DocumentManager"; @@ -1076,15 +1077,6 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { </div>; } - toggleAnchor = () => { - this.selectedDoc.anchor = !this.selectedDoc.anchor - } - - toggleArrow = () => { - this.selectedDoc.arrow = !this.selectedDoc.arrow - } - - @observable description = Field.toString(LinkManager.currentLink?.description as any as Field); @@ -1102,23 +1094,11 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { @undoBatch changeFollowBehavior = action((follow: string) => { if (LinkManager.currentLink) { - Doc.GetProto(LinkManager.currentLink).followLinkLocation = follow; + this.selectedDoc.followLinkLocation = follow; return true; } }); - getCurrLink = () => { - if (LinkManager.currentLink) { - return Doc.GetProto(LinkManager.currentLink); - } - } - - getCurrentFollow = () => { - if (LinkManager.currentLink) { - return StrCast(Doc.GetProto(LinkManager.currentLink).followLinkLocation); - } - } - onSelectOut = () => { this.setDescripValue(this.description); document.getElementById('input')?.blur(); @@ -1131,6 +1111,10 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { } } + toggleAnchor = (e: React.PointerEvent) => { + setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action(() => this.selectedDoc.linkAutoMove = !this.selectedDoc.linkAutoMove))); + } + @computed get editDescription() { return <input @@ -1194,7 +1178,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { name="selectList" id="selectList" onChange={e => this.changeFollowBehavior(e.currentTarget.value)} - value={this.getCurrentFollow()}> + value={StrCast(this.selectedDoc.followLinkLocation, "default")}> <option value="default">Default</option> <option value="add:left">Open in new left pane</option> <option value="add:right">Open in new right pane</option> @@ -1203,7 +1187,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { <option value="fullScreen">Open full screen</option> <option value="add">Open in new tab</option> <option value="replace">Replace current tab</option> - {this.getCurrLink()?.linksToAnnotation + {this.selectedDoc.linksToAnnotation ? <option value="openExternal">Open in external page</option> : null} </select> @@ -1211,16 +1195,11 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { <div className="propertiesView-input inline" id="propertiesView-anchor"> <p>Auto-move anchor</p> <button - style={{ backgroundColor: this.selectedDoc.anchor ? 'blue' : 'white', width: '2rem', height: '2rem' }} - onClick={this.toggleAnchor} - /> - </div> - <div className="propertiesView-input inline" id="propertiesView-arrow"> - <p>Auto-move arrow</p> - <button - style={{ backgroundColor: this.selectedDoc.arrow ? 'blue' : 'white', width: '2rem', height: '2rem' }} - onClick={this.toggleArrow} - /> + style={{ background: this.selectedDoc.hidden ? "gray" : !this.selectedDoc.linkAutoMove ? "" : "#4476f7", borderRadius: 3 }} + onPointerDown={this.toggleAnchor} onClick={e => e.stopPropagation()} + > + <FontAwesomeIcon className="fa-icon" icon={faAnchor} size="lg" /> + </button> </div> </div> </div >; |