diff options
Diffstat (limited to 'src/client/views/PropertiesView.tsx')
| -rw-r--r-- | src/client/views/PropertiesView.tsx | 88 |
1 files changed, 75 insertions, 13 deletions
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> - - </div>); + + </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> - - {contentElement} + + {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" : "" }}> <FontAwesomeIcon style={{ alignSelf: "center" }} icon={"rocket"} /> 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> |