diff options
| -rw-r--r-- | src/client/views/MainView.tsx | 30 | ||||
| -rw-r--r-- | src/client/views/OverlayView.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/linking/LinkFollowBox.scss | 1 | ||||
| -rw-r--r-- | src/client/views/linking/LinkFollowBox.tsx | 12 |
4 files changed, 32 insertions, 13 deletions
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index aae67ffb2..b49274e7e 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -12,7 +12,7 @@ import { List } from '../../new_fields/List'; import { Id } from '../../new_fields/FieldSymbols'; import { InkTool } from '../../new_fields/InkField'; import { listSpec } from '../../new_fields/Schema'; -import { BoolCast, Cast, FieldValue, StrCast } from '../../new_fields/Types'; +import { BoolCast, Cast, FieldValue, StrCast, NumCast } from '../../new_fields/Types'; import { CurrentUserUtils } from '../../server/authentication/models/current_user_utils'; import { RouteStore } from '../../server/RouteStore'; import { emptyFunction, returnOne, returnTrue, Utils, returnEmptyString } from '../../Utils'; @@ -41,6 +41,7 @@ import { FilterBox } from './search/FilterBox'; import PresModeMenu from './presentationview/PresentationModeMenu'; import { PresBox } from './nodes/PresBox'; import { LinkFollowBox } from './linking/LinkFollowBox'; +import { DocumentManager } from '../util/DocumentManager'; @observer export class MainView extends React.Component { @@ -436,14 +437,27 @@ export class MainView extends React.Component { } } + toggleLinkFollowBox = () => { + if (LinkFollowBox.Instance) { + console.log("is instance!") + // if (LinkFollowBox.Instance.props && LinkFollowBox.Instance.props.removeDocument) LinkFollowBox.Instance.props.removeDocument(LinkFollowBox.Instance.props.Document); + } + else { + let overlayView = document.getElementById("overlayView"); + let overlayWidth = 0; + if (overlayView) overlayWidth = overlayView.offsetWidth; + let x: number = overlayWidth - 500; + let doc = Docs.Create.LinkFollowBoxDocument({ x: x, y: 20, width: 500, height: 370, title: "Link Follower" }); + Doc.AddDocToList(Cast(CurrentUserUtils.UserDocument.overlays, Doc) as Doc, "data", doc); + } + } + @observable private _colorPickerDisplay = false; /* for the expandable add nodes menu. Not included with the miscbuttons because once it expands it expands the whole div with it, making canvas interactions limited. */ nodesMenu() { - let imgurl = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg"; let addColNode = action(() => Docs.Create.FreeformDocument([], { width: this.pwidth * .7, height: this.pheight, title: "a freeform collection" })); - let addLinkFollowBox = action(() => Docs.Create.LinkFollowBoxDocument({ width: 500, height: 370, title: "Link Follower" })); let addPresNode = action(() => Doc.UserDoc().curPresentation = Docs.Create.PresDocument(new List<Doc>(), { width: 200, height: 500, title: "a presentation trail" })); let addWebNode = action(() => Docs.Create.WebDocument("https://en.wikipedia.org/wiki/Hedgehog", { width: 300, height: 300, title: "New Webpage" })); let addDragboxNode = action(() => Docs.Create.DragboxDocument({ width: 40, height: 40, title: "drag collection" })); @@ -459,7 +473,7 @@ export class MainView extends React.Component { [React.createRef<HTMLDivElement>(), "globe-asia", "Add Website", addWebNode], [React.createRef<HTMLDivElement>(), "bolt", "Add Button", addButtonDocument], [React.createRef<HTMLDivElement>(), "file", "Add Document Dragger", addDragboxNode], - [React.createRef<HTMLDivElement>(), "link", "Open Link Follow Box", addLinkFollowBox], + // [React.createRef<HTMLDivElement>(), "link", "Open Link Follow Box", addLinkFollowBox], [React.createRef<HTMLDivElement>(), "cloud-upload-alt", "Import Directory", addImportCollectionNode], //remove at some point in favor of addImportCollectionNode //[React.createRef<HTMLDivElement>(), "play", "Add Youtube Searcher", addYoutubeSearcher], ]; @@ -481,6 +495,7 @@ export class MainView extends React.Component { <FontAwesomeIcon icon={btn[1]} size="sm" /> </button> </div></li>)} + <li key="linkFollow"><button className="add-button round-button" title="Open Link Follower" onClick={this.toggleLinkFollowBox}><FontAwesomeIcon icon="link" size="sm" /></button></li> <li key="color"><button className="add-button round-button" title="Select Color" style={{ zIndex: 1000 }} onClick={() => this.toggleColorPicker()}><div className="toolbar-color-button" style={{ backgroundColor: InkingControl.Instance.selectedColor }} > <div className="toolbar-color-picker" onClick={this.onColorClick} style={this._colorPickerDisplay ? { color: "black", display: "block" } : { color: "black", display: "none" }}> <SketchPicker color={InkingControl.Instance.selectedColor} onChange={InkingControl.Instance.switchColor} /> @@ -503,12 +518,6 @@ export class MainView extends React.Component { this._colorPickerDisplay = close ? false : !this._colorPickerDisplay; } - @action - toggleLinkFollowBox = () => { - console.log("toggling link editor") - this._linkFollowBox = !this._linkFollowBox; - } - /* @TODO this should really be moved into a moveable toolbar component, but for now let's put it here to meet the deadline */ @computed get miscButtons() { @@ -517,7 +526,6 @@ export class MainView extends React.Component { return [ this.isSearchVisible ? <div className="main-searchDiv" key="search" style={{ top: '34px', right: '1px', position: 'absolute' }} > <FilterBox /> </div> : null, <div className="main-buttonDiv" key="logout" style={{ bottom: '0px', right: '1px', position: 'absolute' }} ref={logoutRef}> - <button onClick={this.toggleLinkFollowBox}>Open Link Editor</button> <button onClick={() => window.location.assign(Utils.prepend(RouteStore.logout))}>Log Out</button></div> ]; diff --git a/src/client/views/OverlayView.tsx b/src/client/views/OverlayView.tsx index a60dc591c..8d80ad1f1 100644 --- a/src/client/views/OverlayView.tsx +++ b/src/client/views/OverlayView.tsx @@ -140,7 +140,7 @@ export class OverlayView extends React.Component { render() { return ( - <div className="overlayView"> + <div className="overlayView" id="overlayView"> {this._elements} {CurrentUserUtils.UserDocument.overlays instanceof Doc && DocListCast(CurrentUserUtils.UserDocument.overlays.data).map(d => ( <CollectionFreeFormDocumentView key={d[Id]} diff --git a/src/client/views/linking/LinkFollowBox.scss b/src/client/views/linking/LinkFollowBox.scss index 7fad9ae93..a34285727 100644 --- a/src/client/views/linking/LinkFollowBox.scss +++ b/src/client/views/linking/LinkFollowBox.scss @@ -8,6 +8,7 @@ box-shadow: $intermediate-color 0.2vw 0.2vw 0.4vw; border: solid #BBBBBBBB 5px; pointer-events: all; + // transform-origin: top right; // overflow: hidden; .linkFollowBox-header { diff --git a/src/client/views/linking/LinkFollowBox.tsx b/src/client/views/linking/LinkFollowBox.tsx index 213022bc8..cf44ae649 100644 --- a/src/client/views/linking/LinkFollowBox.tsx +++ b/src/client/views/linking/LinkFollowBox.tsx @@ -16,6 +16,7 @@ import { Id } from "../../../new_fields/FieldSymbols"; import { listSpec } from "../../../new_fields/Schema"; import { DocServer } from "../../DocServer"; import { RefField } from "../../../new_fields/RefField"; +import { Docs } from "../../documents/Documents"; enum FollowModes { OPENTAB = "Open in Tab", @@ -59,6 +60,11 @@ export class LinkFollowBox extends React.Component<FieldViewProps> { this.collectionTypes = ["Invalid", "Freeform", "Schema", "Docking", "Tree", "Stacking", "Masonry"]; } + @computed + get getDoc() { + return this.props.Document; + } + componentDidMount = () => { this.resetVars(); @@ -322,6 +328,10 @@ export class LinkFollowBox extends React.Component<FieldViewProps> { currentLinkBehavior = () => { // this.resetPan(); if (LinkFollowBox.destinationDoc) { + if (this.selectedContextString === "") { + this.selectedContextString = "self"; + this.selectedContext = LinkFollowBox.destinationDoc; + } if (this.selectedOption === "") this.selectedOption = FollowOptions.NOZOOM; let shouldZoom: boolean = this.selectedOption === FollowOptions.NOZOOM ? false : true; let notOpenInContext: boolean = this.selectedContextString === "self" || this.selectedContextString === LinkFollowBox.destinationDoc[Id]; @@ -476,7 +486,7 @@ export class LinkFollowBox extends React.Component<FieldViewProps> { type="radio" disabled={LinkFollowBox.linkDoc ? false : true} name="context" value={LinkFollowBox.destinationDoc ? StrCast(LinkFollowBox.destinationDoc[Id]) : "self"} - checked={LinkFollowBox.destinationDoc ? this.selectedContextString === StrCast(LinkFollowBox.destinationDoc[Id]) : this.selectedContextString === "self"} + checked={LinkFollowBox.destinationDoc ? this.selectedContextString === StrCast(LinkFollowBox.destinationDoc[Id]) || this.selectedContextString === "self" : true} onChange={this.handleContextChange} /> Open Self </label><br /> |