From 92ea47bc7c42966f68ccfed4f1da57eb9b352d40 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 25 Jun 2020 01:50:26 -0400 Subject: fixed placement of menus and interaction with input boxes. --- src/client/views/linking/LinkMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/client/views/linking') diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx index 0fcc0f0b9..de1d60a09 100644 --- a/src/client/views/linking/LinkMenu.tsx +++ b/src/client/views/linking/LinkMenu.tsx @@ -28,7 +28,7 @@ export class LinkMenu extends React.Component { @action onClick = (e: PointerEvent) => { - if (!Array.from(this._linkMenuRef?.getElementsByTagName((e.target as HTMLElement).tagName) || []).includes(e.target as any)) { + if (this._linkMenuRef?.contains(e.target as any)) { DocumentLinksButton.EditLink = undefined; } } -- cgit v1.2.3-70-g09d2 From d81d2e814d449043c1cb20512d5e0a61c9351cfc Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 29 Jun 2020 17:08:25 -0500 Subject: adjusting menu --- src/client/views/linking/LinkMenuItem.tsx | 10 +++++++++- src/client/views/nodes/DocumentLinksButton.tsx | 5 +++-- 2 files changed, 12 insertions(+), 3 deletions(-) (limited to 'src/client/views/linking') diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index edc18b6a9..10c542536 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -135,6 +135,12 @@ export class LinkMenuItem extends React.Component { DocumentManager.Instance.FollowLink(this.props.linkDoc, this.props.sourceDoc, doc => this.props.addDocTab(doc, "onRight"), false); } + @action + deleteLink = (): void => { + LinkManager.Instance.deleteLink(this.props.linkDoc); + //this.props.showLinks(); + } + render() { const keys = LinkManager.Instance.getMetadataKeysInGroup(this.props.groupType);//groupMetadataKeys.get(this.props.groupType); const canExpand = keys ? keys.length > 0 : false; @@ -147,7 +153,9 @@ export class LinkMenuItem extends React.Component {
{canExpand ?
this.toggleShowMore(e)}>
: <>} -
+ + {/*
*/} +
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index 0280b0b9b..69f25093a 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -53,10 +53,11 @@ export class DocumentLinksButton extends React.Component { + setupMoveUpEvents(this, e, this.onLinkButtonMoved, emptyFunction, action((e, doubleTap) => { - if (doubleTap && !this.props.InMenu) { + if (doubleTap) { DocumentLinksButton.StartLink = this.props.View; - } else { + } else if (!!!this.props.InMenu) { DocumentLinksButton.EditLink = this.props.View; DocumentLinksButton.EditLinkLoc = [e.clientX + 10, e.clientY]; } -- cgit v1.2.3-70-g09d2 From 087cc4516cb3389324bb0b42c2240face696bfd3 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 29 Jun 2020 18:06:42 -0500 Subject: UI changes to menu & prev --- src/client/views/linking/LinkMenuGroup.tsx | 4 ++-- src/client/views/linking/LinkMenuItem.tsx | 19 +++++++++++++++++-- src/client/views/nodes/DocumentLinksButton.tsx | 2 +- 3 files changed, 20 insertions(+), 5 deletions(-) (limited to 'src/client/views/linking') diff --git a/src/client/views/linking/LinkMenuGroup.tsx b/src/client/views/linking/LinkMenuGroup.tsx index 89deb3a55..7892d381b 100644 --- a/src/client/views/linking/LinkMenuGroup.tsx +++ b/src/client/views/linking/LinkMenuGroup.tsx @@ -80,11 +80,11 @@ export class LinkMenuGroup extends React.Component { return (
-
+ {/*

{this.props.groupType}:

{this.props.groupType === "*" || this.props.groupType === "" ? <> : this.viewGroupAsTable(this.props.groupType)} -
+
*/}
{groupItems}
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index 10c542536..e8db5aff8 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -13,6 +13,8 @@ import React = require("react"); import { DocumentManager } from '../../util/DocumentManager'; import { setupMoveUpEvents, emptyFunction } from '../../../Utils'; import { DocumentView } from '../nodes/DocumentView'; +import { DocumentLinksButton } from '../nodes/DocumentLinksButton'; +import { LinkDocPreview } from '../nodes/LinkDocPreview'; library.add(faEye, faEdit, faTimes, faArrowRight, faChevronDown, faChevronUp); @@ -124,7 +126,9 @@ export class LinkMenuItem extends React.Component { e.stopPropagation(); } + @action onContextMenu = (e: React.MouseEvent) => { + DocumentLinksButton.EditLink = undefined; e.preventDefault(); ContextMenu.Instance.addItem({ description: "Follow Default Link", event: () => this.followDefault(), icon: "arrow-right" }); ContextMenu.Instance.displayMenu(e.clientX, e.clientY); @@ -132,6 +136,7 @@ export class LinkMenuItem extends React.Component { @action.bound async followDefault() { + DocumentLinksButton.EditLink = undefined; DocumentManager.Instance.FollowLink(this.props.linkDoc, this.props.sourceDoc, doc => this.props.addDocTab(doc, "onRight"), false); } @@ -139,6 +144,7 @@ export class LinkMenuItem extends React.Component { deleteLink = (): void => { LinkManager.Instance.deleteLink(this.props.linkDoc); //this.props.showLinks(); + DocumentLinksButton.EditLink = undefined; } render() { @@ -148,14 +154,23 @@ export class LinkMenuItem extends React.Component { return (
-
+
LinkDocPreview.LinkInfo = undefined)} + onPointerEnter={action(e => this.props.linkDoc && (LinkDocPreview.LinkInfo = { + addDocTab: this.props.addDocTab, + linkSrc: this.props.sourceDoc, + linkDoc: this.props.linkDoc, + Location: [e.clientX, e.clientY + 20] + }))} + onPointerDown={this.onLinkButtonDown}>

{StrCast(this.props.destinationDoc.title)}

{canExpand ?
this.toggleShowMore(e)}>
: <>} {/*
*/} -
+
+
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index 69f25093a..c625c4cd6 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -95,7 +95,7 @@ export class DocumentLinksButton extends React.Component - {links.length ? links.length : } + {links.length && !!!this.props.InMenu ? links.length : }
{DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View ?
: (null)} {DocumentLinksButton.StartLink === this.props.View ?
: (null)} -- cgit v1.2.3-70-g09d2 From e11191876344b191c28a8cd6606df84e94f32104 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 29 Jun 2020 18:09:26 -0500 Subject: preview fix --- src/client/views/linking/LinkMenuItem.tsx | 3 +++ 1 file changed, 3 insertions(+) (limited to 'src/client/views/linking') diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index e8db5aff8..d5d31d1ba 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -129,6 +129,7 @@ export class LinkMenuItem extends React.Component { @action onContextMenu = (e: React.MouseEvent) => { DocumentLinksButton.EditLink = undefined; + LinkDocPreview.LinkInfo = undefined; e.preventDefault(); ContextMenu.Instance.addItem({ description: "Follow Default Link", event: () => this.followDefault(), icon: "arrow-right" }); ContextMenu.Instance.displayMenu(e.clientX, e.clientY); @@ -137,6 +138,7 @@ export class LinkMenuItem extends React.Component { @action.bound async followDefault() { DocumentLinksButton.EditLink = undefined; + LinkDocPreview.LinkInfo = undefined; DocumentManager.Instance.FollowLink(this.props.linkDoc, this.props.sourceDoc, doc => this.props.addDocTab(doc, "onRight"), false); } @@ -144,6 +146,7 @@ export class LinkMenuItem extends React.Component { deleteLink = (): void => { LinkManager.Instance.deleteLink(this.props.linkDoc); //this.props.showLinks(); + LinkDocPreview.LinkInfo = undefined; DocumentLinksButton.EditLink = undefined; } -- cgit v1.2.3-70-g09d2 From d662a26c9ef78581a823d14b56433950129b7ccb Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Tue, 30 Jun 2020 12:02:49 -0500 Subject: preview and movement adjustment --- src/client/views/linking/LinkMenu.tsx | 6 +- src/client/views/nodes/LinkDocPreview.tsx | 107 +++++++++++++++++++++--------- 2 files changed, 81 insertions(+), 32 deletions(-) (limited to 'src/client/views/linking') diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx index 0fcc0f0b9..6b24f96b1 100644 --- a/src/client/views/linking/LinkMenu.tsx +++ b/src/client/views/linking/LinkMenu.tsx @@ -28,9 +28,13 @@ export class LinkMenu extends React.Component { @action onClick = (e: PointerEvent) => { - if (!Array.from(this._linkMenuRef?.getElementsByTagName((e.target as HTMLElement).tagName) || []).includes(e.target as any)) { + if (this._linkMenuRef && !Array.from(this._linkMenuRef?.getElementsByTagName((e.target as HTMLElement).tagName) || []).includes(e.target as any)) { DocumentLinksButton.EditLink = undefined; } + + // if (this._linkMenuRef && !this._linkMenuRef.contains(e.target)) { + // DocumentLinksButton.EditLink = undefined; + // } } @action componentDidMount() { diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx index 92b443d3b..1d2c022a7 100644 --- a/src/client/views/nodes/LinkDocPreview.tsx +++ b/src/client/views/nodes/LinkDocPreview.tsx @@ -10,6 +10,11 @@ import { Transform } from "../../util/Transform"; import { ContentFittingDocumentView } from "./ContentFittingDocumentView"; import React = require("react"); import { DocumentView } from './DocumentView'; +import { sortAndDeduplicateDiagnostics } from 'typescript'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { LinkManager } from '../../util/LinkManager'; +import { DocumentLinksButton } from './DocumentLinksButton'; +import { ContextMenu } from '../ContextMenu'; interface Props { linkDoc?: Doc; @@ -24,6 +29,31 @@ export class LinkDocPreview extends React.Component { @observable public static LinkInfo: Opt<{ linkDoc?: Doc; addDocTab: (document: Doc, where: string) => boolean, linkSrc: Doc; href?: string; Location: number[] }>; @observable _targetDoc: Opt; @observable _toolTipText = ""; + _editRef = React.createRef(); + + @action + deleteLink = (): void => { + this.props.linkDoc ? LinkManager.Instance.deleteLink(this.props.linkDoc) : null; + //this.props.showLinks(); + LinkDocPreview.LinkInfo = undefined; + DocumentLinksButton.EditLink = undefined; + } + + @action + onContextMenu = (e: React.MouseEvent) => { + DocumentLinksButton.EditLink = undefined; + LinkDocPreview.LinkInfo = undefined; + e.preventDefault(); + ContextMenu.Instance.addItem({ description: "Follow Default Link", event: () => this.followDefault(), icon: "arrow-right" }); + ContextMenu.Instance.displayMenu(e.clientX, e.clientY); + } + + @action.bound + async followDefault() { + DocumentLinksButton.EditLink = undefined; + LinkDocPreview.LinkInfo = undefined; + this._targetDoc ? DocumentManager.Instance.FollowLink(this.props.linkDoc, this._targetDoc, doc => this.props.addDocTab(doc, "onRight"), false) : null; + } componentDidUpdate() { this.updatePreview(); } componentDidMount() { this.updatePreview(); } @@ -56,42 +86,57 @@ export class LinkDocPreview extends React.Component { this.props.addDocTab(Docs.Create.WebDocument(this.props.href, { title: this.props.href, _width: 200, _height: 400, UseCors: true }), "onRight"); } } - width = () => Math.min(350, NumCast(this._targetDoc?.[WidthSym](), 350)); - height = () => Math.min(350, NumCast(this._targetDoc?.[HeightSym](), 350)); + width = () => Math.min(225, NumCast(this._targetDoc?.[WidthSym](), 225)); + height = () => Math.min(225, NumCast(this._targetDoc?.[HeightSym](), 225)); @computed get targetDocView() { return !this._targetDoc ? -
+
{this._toolTipText}
: - ; +
+
{this._targetDoc.title} +
+
+
+
+ +
+
+
+
; } render() { @@ -99,7 +144,7 @@ export class LinkDocPreview extends React.Component { style={{ position: "absolute", left: this.props.location[0], top: this.props.location[1], width: this.width(), height: this.height(), - boxShadow: "black 2px 2px 1em" + boxShadow: "black 2px 2px 1em", zIndex: 1000 }}> {this.targetDocView}
; -- cgit v1.2.3-70-g09d2 From a4543fdc90f8c19e4a032294c2f7d16a3152662f Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Tue, 30 Jun 2020 13:33:04 -0500 Subject: working with linked text --- package-lock.json | 10 ++ package.json | 1 + src/client/views/MainView.tsx | 56 +++++----- src/client/views/linking/LinkMenu.tsx | 3 +- .../formattedText/FormattedTextBoxComment.tsx | 120 ++++++++++++++++----- 5 files changed, 133 insertions(+), 57 deletions(-) (limited to 'src/client/views/linking') diff --git a/package-lock.json b/package-lock.json index 53b2fc009..9118cd4b0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -853,6 +853,16 @@ "@types/prosemirror-view": "*" } }, + "@types/prosemirror-dev-tools": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@types/prosemirror-dev-tools/-/prosemirror-dev-tools-2.1.0.tgz", + "integrity": "sha512-OhnSaC4yrrEMLPRUkEWcHAIPVqgKlLkE4kISqL3cHeAYxASouSPvPMLqhBIbWkGwaozy43DjjVC1OXkxTo+y5Q==", + "dev": true, + "requires": { + "@types/prosemirror-state": "*", + "@types/prosemirror-view": "*" + } + }, "@types/prosemirror-history": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/prosemirror-history/-/prosemirror-history-1.0.1.tgz", diff --git a/package.json b/package.json index 8f67704cb..765002d37 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ "@types/passport-local": "^1.0.33", "@types/pdfjs-dist": "^2.1.4", "@types/prosemirror-commands": "^1.0.1", + "@types/prosemirror-dev-tools": "^2.1.0", "@types/prosemirror-history": "^1.0.1", "@types/prosemirror-inputrules": "^1.0.2", "@types/prosemirror-keymap": "^1.0.2", diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index cea664543..daf26cfd7 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -65,7 +65,7 @@ export class MainView extends React.Component { public static Instance: MainView; private _buttonBarHeight = 36; private _flyoutSizeOnDown = 0; - private _urlState: HistoryUtil.DocUrl; + private static _urlState: HistoryUtil.DocUrl; private _docBtnRef = React.createRef(); private _mainViewRef = React.createRef(); @@ -73,12 +73,12 @@ export class MainView extends React.Component { @observable private _panelHeight: number = 0; @observable private _flyoutTranslate: boolean = true; @observable public flyoutWidth: number = 250; - private get darkScheme() { return BoolCast(Cast(this.userDoc?.activeWorkspace, Doc, null)?.darkScheme); } + private get darkScheme() { return BoolCast(Cast(MainView.userDoc?.activeWorkspace, Doc, null)?.darkScheme); } - @computed private get userDoc() { return Doc.UserDoc(); } - @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeWorkspace, Doc)) : CurrentUserUtils.GuestWorkspace; } + @computed private static get userDoc() { return Doc.UserDoc(); } + @computed private get mainContainer() { return MainView.userDoc ? FieldValue(Cast(MainView.userDoc.activeWorkspace, Doc)) : CurrentUserUtils.GuestWorkspace; } @computed public get mainFreeform(): Opt { return (docs => (docs && docs.length > 1) ? docs[1] : undefined)(DocListCast(this.mainContainer!.data)); } - @computed public get sidebarButtonsDoc() { return Cast(this.userDoc["tabs-buttons"], Doc) as Doc; } + @computed public get sidebarButtonsDoc() { return Cast(MainView.userDoc["tabs-buttons"], Doc) as Doc; } public isPointerDown = false; @@ -119,7 +119,7 @@ export class MainView extends React.Component { constructor(props: Readonly<{}>) { super(props); MainView.Instance = this; - this._urlState = HistoryUtil.parseUrl(window.location) || {} as any; + MainView._urlState = HistoryUtil.parseUrl(window.location) || {} as any; // causes errors to be generated when modifying an observable outside of an action configure({ enforceActions: "observed" }); if (window.location.pathname !== "/home") { @@ -128,7 +128,7 @@ export class MainView extends React.Component { const type = pathname[0]; if (type === "doc") { CurrentUserUtils.MainDocId = pathname[1]; - if (!this.userDoc) { + if (!MainView.userDoc) { runInAction(() => this.flyoutWidth = 0); DocServer.GetRefField(CurrentUserUtils.MainDocId).then(action((field: Opt) => field instanceof Doc && (CurrentUserUtils.GuestTarget = field))); @@ -172,14 +172,14 @@ export class MainView extends React.Component { initAuthenticationRouters = async () => { // Load the user's active workspace, or create a new one if initial session after signup const received = CurrentUserUtils.MainDocId; - if (received && !this.userDoc) { + if (received && !MainView.userDoc) { reaction( () => CurrentUserUtils.GuestTarget, target => target && this.createNewWorkspace(), { fireImmediately: true } ); } else { - if (received && this._urlState.sharing) { + if (received && MainView._urlState.sharing) { reaction(() => CollectionDockingView.Instance && CollectionDockingView.Instance.initialized, initialized => initialized && received && DocServer.GetRefField(received).then(docField => { if (docField instanceof Doc && docField._viewType !== CollectionViewType.Docking) { @@ -188,9 +188,9 @@ export class MainView extends React.Component { }), ); } - const doc = this.userDoc && await Cast(this.userDoc.activeWorkspace, Doc); + const doc = MainView.userDoc && await Cast(MainView.userDoc.activeWorkspace, Doc); if (doc) { - this.openWorkspace(doc); + MainView.openWorkspace(doc); } else { this.createNewWorkspace(); } @@ -199,7 +199,7 @@ export class MainView extends React.Component { @action createNewWorkspace = async (id?: string) => { - const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc; + const workspaces = Cast(MainView.userDoc.myWorkspaces, Doc) as Doc; const workspaceCount = DocListCast(workspaces.data).length + 1; const freeformOptions: DocumentOptions = { x: 0, @@ -219,19 +219,19 @@ export class MainView extends React.Component { Doc.AddDocToList(workspaces, "data", workspaceDoc); // bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container) - setTimeout(() => this.openWorkspace(workspaceDoc), 0); + setTimeout(() => MainView.openWorkspace(workspaceDoc), 0); } @action - openWorkspace = (doc: Doc, fromHistory = false) => { + static openWorkspace = (doc: Doc, fromHistory = false) => { CurrentUserUtils.MainDocId = doc[Id]; if (doc) { // this has the side-effect of setting the main container since we're assigning the active/guest workspace !("presentationView" in doc) && (doc.presentationView = new List([Docs.Create.TreeDocument([], { title: "Presentation" })])); - this.userDoc ? (this.userDoc.activeWorkspace = doc) : (CurrentUserUtils.GuestWorkspace = doc); + MainView.userDoc ? (MainView.userDoc.activeWorkspace = doc) : (CurrentUserUtils.GuestWorkspace = doc); } - const state = this._urlState; - if (state.sharing === true && !this.userDoc) { + const state = MainView._urlState; + if (state.sharing === true && !MainView.userDoc) { DocServer.Control.makeReadOnly(); } else { fromHistory || HistoryUtil.pushState({ @@ -257,7 +257,7 @@ export class MainView extends React.Component { } // if there is a pending doc, and it has new data, show it (syip: we use a timeout to prevent collection docking view from being uninitialized) setTimeout(async () => { - const col = this.userDoc && await Cast(this.userDoc.rightSidebarCollection, Doc); + const col = MainView.userDoc && await Cast(MainView.userDoc.rightSidebarCollection, Doc); col && Cast(col.data, listSpec(Doc)) && runInAction(() => MainViewNotifs.NotifsCol = col); }, 100); return true; @@ -305,7 +305,7 @@ export class MainView extends React.Component { DataDoc={undefined} LibraryPath={emptyPath} addDocument={undefined} - addDocTab={this.addDocTabFunc} + addDocTab={MainView.addDocTabFunc} pinToPres={emptyFunction} rootSelected={returnTrue} onClick={undefined} @@ -378,15 +378,15 @@ export class MainView extends React.Component { document.removeEventListener("pointerup", this.onPointerUp); } flyoutWidthFunc = () => this.flyoutWidth; - addDocTabFunc = (doc: Doc, where: string, libraryPath?: Doc[]): boolean => { + static addDocTabFunc = (doc: Doc, where: string, libraryPath?: Doc[]): boolean => { return where === "close" ? CollectionDockingView.CloseRightSplit(doc) : - doc.dockingConfig ? this.openWorkspace(doc) : + doc.dockingConfig ? MainView.openWorkspace(doc) : CollectionDockingView.AddRightSplit(doc, libraryPath); } mainContainerXf = () => new Transform(0, -this._buttonBarHeight, 1); @computed get flyout() { - const sidebarContent = this.userDoc?.["tabs-panelContainer"]; + const sidebarContent = MainView.userDoc?.["tabs-panelContainer"]; if (!(sidebarContent instanceof Doc)) { return (null); } @@ -398,7 +398,7 @@ export class MainView extends React.Component { LibraryPath={emptyPath} addDocument={undefined} rootSelected={returnTrue} - addDocTab={this.addDocTabFunc} + addDocTab={MainView.addDocTabFunc} pinToPres={emptyFunction} removeDocument={undefined} onClick={undefined} @@ -424,7 +424,7 @@ export class MainView extends React.Component { DataDoc={undefined} LibraryPath={emptyPath} addDocument={undefined} - addDocTab={this.addDocTabFunc} + addDocTab={MainView.addDocTabFunc} pinToPres={emptyFunction} NativeHeight={returnZero} NativeWidth={returnZero} @@ -458,8 +458,8 @@ export class MainView extends React.Component { } @computed get mainContent() { - const sidebar = this.userDoc?.["tabs-panelContainer"]; - return !this.userDoc || !(sidebar instanceof Doc) ? (null) : ( + const sidebar = MainView.userDoc?.["tabs-panelContainer"]; + return !MainView.userDoc || !(sidebar instanceof Doc) ? (null) : (
MainView.Instance.openWorkspace(copiedWorkspace), 0); + setTimeout(() => MainView.openWorkspace(copiedWorkspace), 0); }); diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx index 6b24f96b1..9fd2b98b1 100644 --- a/src/client/views/linking/LinkMenu.tsx +++ b/src/client/views/linking/LinkMenu.tsx @@ -74,7 +74,8 @@ export class LinkMenu extends React.Component { render() { const sourceDoc = this.props.docView.props.Document; const groups: Map = LinkManager.Instance.getRelatedGroupedLinks(sourceDoc); - return
this._linkMenuRef = r} style={{ left: this.props.location[0], top: this.props.location[1] }}> + return
this._linkMenuRef = r} style={{ left: this.props.location[0], top: this.props.location[1] }}> {!this._editingLink ? this.renderAllGroups(groups) : this._editingLink = undefined)} /> diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx index 90f2c0aa6..a4153a40c 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx @@ -16,6 +16,13 @@ import React = require("react"); import { Docs } from "../../../documents/Documents"; import wiki from "wikijs"; import { DocumentType } from "../../../documents/DocumentTypes"; +import { computed, action, observable } from "mobx"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { LinkManager } from "../../../util/LinkManager"; +import { LinkDocPreview } from "../LinkDocPreview"; +import { DocumentLinksButton } from "../DocumentLinksButton"; +import { ContextMenu } from "../../ContextMenu"; +import { MainView } from "../../MainView"; export let formattedTextBoxCommentPlugin = new Plugin({ view(editorView) { return new FormattedTextBoxComment(editorView); } @@ -62,6 +69,10 @@ export class FormattedTextBoxComment { static mark: Mark; static textBox: FormattedTextBox | undefined; static linkDoc: Doc | undefined; + + static targetDoc: Doc | undefined; + static _editRef = React.createRef(); + constructor(view: any) { if (!FormattedTextBoxComment.tooltip) { const root = document.getElementById("root"); @@ -75,8 +86,8 @@ export class FormattedTextBoxComment { FormattedTextBoxComment.tooltip.appendChild(FormattedTextBoxComment.tooltipText); FormattedTextBoxComment.tooltip.className = "FormattedTextBox-tooltip"; FormattedTextBoxComment.tooltip.style.pointerEvents = "all"; - FormattedTextBoxComment.tooltip.style.maxWidth = "350px"; - FormattedTextBoxComment.tooltip.style.maxHeight = "250px"; + FormattedTextBoxComment.tooltip.style.maxWidth = "225px"; + FormattedTextBoxComment.tooltip.style.maxHeight = "225px"; FormattedTextBoxComment.tooltip.style.width = "100%"; FormattedTextBoxComment.tooltip.style.height = "100%"; FormattedTextBoxComment.tooltip.style.overflow = "hidden"; @@ -106,6 +117,31 @@ export class FormattedTextBoxComment { } } + @action + public static deleteLink = (): void => { + FormattedTextBoxComment.linkDoc ? LinkManager.Instance.deleteLink(FormattedTextBoxComment.linkDoc) : null; + //this.props.showLinks(); + LinkDocPreview.LinkInfo = undefined; + DocumentLinksButton.EditLink = undefined; + } + + @action + public static onContextMenu = (e: React.MouseEvent) => { + DocumentLinksButton.EditLink = undefined; + LinkDocPreview.LinkInfo = undefined; + e.preventDefault(); + ContextMenu.Instance.addItem({ description: "Follow Default Link", event: () => FormattedTextBoxComment.followDefault(), icon: "arrow-right" }); + ContextMenu.Instance.displayMenu(e.clientX, e.clientY); + } + + @action.bound + public static async followDefault() { + DocumentLinksButton.EditLink = undefined; + LinkDocPreview.LinkInfo = undefined; + FormattedTextBoxComment.targetDoc ? DocumentManager.Instance.FollowLink(FormattedTextBoxComment.linkDoc, FormattedTextBoxComment.targetDoc, + doc => MainView.addDocTabFunc(doc, "onRight"), false) : null; + } + public static Hide() { FormattedTextBoxComment.textBox = undefined; FormattedTextBoxComment.tooltip && (FormattedTextBoxComment.tooltip.style.display = "none"); @@ -119,6 +155,22 @@ export class FormattedTextBoxComment { FormattedTextBoxComment.tooltip && (FormattedTextBoxComment.tooltip.style.display = ""); } + @action + onClick = (e: PointerEvent) => { + if (FormattedTextBoxComment._editRef && !FormattedTextBoxComment._editRef.current?.contains(e.target as Node)) { + FormattedTextBoxComment.linkDoc = undefined; + FormattedTextBoxComment.targetDoc = undefined; + } + } + @action + componentDidMount() { + document.addEventListener("pointerdown", this.onClick); + } + + componentWillUnmount() { + document.removeEventListener("pointerdown", this.onClick); + } + static showCommentbox(set: string, view: EditorView, nbef: number) { const state = view.state; if (set !== "none") { @@ -157,6 +209,7 @@ export class FormattedTextBoxComment { (FormattedTextBoxComment.tooltipText as any).href = ""; FormattedTextBoxComment.tooltipText.style.whiteSpace = ""; FormattedTextBoxComment.tooltipText.style.overflow = ""; + // this section checks to see if the insertion point is over text entered by a different user. If so, it sets ths comment text to indicate the user and the modification date if (state.selection.$from) { nbef = findStartOfMark(state.selection.$from, view, findOtherUserMark); @@ -209,33 +262,44 @@ export class FormattedTextBoxComment { target._scrollY = NumCast(anchor?.y); } if (target?.author) { + + const docPreview =
{target.title} +
+
+
+
+ +
+
+ Math.min(350, NumCast(target._width, 350))} + PanelHeight={() => Math.min(250, NumCast(target._height, 250))} + focus={emptyFunction} + whenActiveChanged={returnFalse} + bringToFront={returnFalse} + ContentScaling={returnOne} + NativeWidth={returnZero} + NativeHeight={returnZero} + /> +
; FormattedTextBoxComment.showCommentbox("", view, nbef); - ReactDOM.render( Math.min(350, NumCast(target._width, 350))} - PanelHeight={() => Math.min(250, NumCast(target._height, 250))} - focus={emptyFunction} - whenActiveChanged={returnFalse} - bringToFront={returnFalse} - ContentScaling={returnOne} - NativeWidth={returnZero} - NativeHeight={returnZero} - />, FormattedTextBoxComment.tooltipText); + ReactDOM.render(docPreview, FormattedTextBoxComment.tooltipText); FormattedTextBoxComment.tooltip.style.width = NumCast(target._width) ? `${NumCast(target._width)}` : "100%"; FormattedTextBoxComment.tooltip.style.height = NumCast(target._height) ? `${NumCast(target._height)}` : "100%"; } -- cgit v1.2.3-70-g09d2 From 044c770b22f23709ac6a1b5429631e6633217282 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Wed, 1 Jul 2020 11:04:42 -0500 Subject: modifications to text previews --- package-lock.json | 44 +++++--- src/client/views/linking/LinkMenuItem.scss | 1 - .../formattedText/FormattedTextBoxComment.scss | 57 ++++++++-- .../formattedText/FormattedTextBoxComment.tsx | 117 +++++++++++---------- 4 files changed, 141 insertions(+), 78 deletions(-) (limited to 'src/client/views/linking') diff --git a/package-lock.json b/package-lock.json index 3136a9cc2..d42e286e2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2976,7 +2976,8 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true + "bundled": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -2994,11 +2995,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3011,15 +3014,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -3122,7 +3128,8 @@ }, "inherits": { "version": "2.0.4", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -3132,6 +3139,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3144,17 +3152,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "1.2.5", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.9.0", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3171,6 +3182,7 @@ "mkdirp": { "version": "0.5.3", "bundled": true, + "optional": true, "requires": { "minimist": "^1.2.5" } @@ -3226,7 +3238,8 @@ }, "npm-normalize-package-bin": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "npm-packlist": { "version": "1.4.8", @@ -3251,7 +3264,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -3261,6 +3275,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -3329,7 +3344,8 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true + "bundled": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -3359,6 +3375,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3376,6 +3393,7 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3414,11 +3432,13 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true + "bundled": true, + "optional": true }, "yallist": { "version": "3.1.1", - "bundled": true + "bundled": true, + "optional": true } } } diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss index fd0954f65..1669fc39d 100644 --- a/src/client/views/linking/LinkMenuItem.scss +++ b/src/client/views/linking/LinkMenuItem.scss @@ -61,7 +61,6 @@ margin: 0; margin-right: 6px; border-radius: 50%; - cursor: pointer; pointer-events: auto; background-color: $dark-color; color: $light-color; diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss b/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss index 2dd63ec21..d83583db1 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss +++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss @@ -8,10 +8,12 @@ margin-bottom: 7px; -webkit-transform: translateX(-50%); transform: translateX(-50%); - } - .FormattedTextBox-tooltip:before { +} + +.FormattedTextBox-tooltip:before { content: ""; - height: 0; width: 0; + height: 0; + width: 0; position: absolute; left: 50%; margin-left: -5px; @@ -19,10 +21,12 @@ border: 5px solid transparent; border-bottom-width: 0; border-top-color: silver; - } - .FormattedTextBox-tooltip:after { +} + +.FormattedTextBox-tooltip:after { content: ""; - height: 0; width: 0; + height: 0; + width: 0; position: absolute; left: 50%; margin-left: -5px; @@ -30,4 +34,43 @@ border: 5px solid transparent; border-bottom-width: 0; border-top-color: white; - } \ No newline at end of file +} + +.FormattedTextBox-buttons { + display: none; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + + .button { + width: 20px; + height: 20px; + margin: 0; + margin-right: 6px; + border-radius: 50%; + pointer-events: auto; + background-color: rgb(53, 146, 199); + color: rgb(150, 211, 248); + font-size: 65%; + transition: transform 0.2s; + text-align: center; + position: relative; + + .fa-icon { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + &:last-child { + margin-right: 0; + } + + &:hover { + background: rgb(53, 146, 199); + ; + } + } +} \ No newline at end of file diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx index 8eeeae051..15cd68c26 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx @@ -2,7 +2,7 @@ import { Mark, ResolvedPos } from "prosemirror-model"; import { EditorState, Plugin } from "prosemirror-state"; import { EditorView } from "prosemirror-view"; import * as ReactDOM from 'react-dom'; -import { Doc, DocCastAsync } from "../../../../fields/Doc"; +import { Doc, DocCastAsync, Opt } from "../../../../fields/Doc"; import { Cast, FieldValue, NumCast } from "../../../../fields/Types"; import { emptyFunction, returnEmptyString, returnFalse, Utils, emptyPath, returnZero, returnOne, returnEmptyFilter } from "../../../../Utils"; import { DocServer } from "../../../DocServer"; @@ -16,13 +16,11 @@ import React = require("react"); import { Docs } from "../../../documents/Documents"; import wiki from "wikijs"; import { DocumentType } from "../../../documents/DocumentTypes"; -import { computed, action, observable } from "mobx"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { LinkManager } from "../../../util/LinkManager"; -import { LinkDocPreview } from "../LinkDocPreview"; -import { DocumentLinksButton } from "../DocumentLinksButton"; -import { ContextMenu } from "../../ContextMenu"; -import { MainView } from "../../MainView"; +import { action } from "mobx"; +// import { LinkManager } from "../../../util/LinkManager"; +// import { LinkDocPreview } from "../LinkDocPreview"; +// import { DocumentLinksButton } from "../DocumentLinksButton"; export let formattedTextBoxCommentPlugin = new Plugin({ view(editorView) { return new FormattedTextBoxComment(editorView); } @@ -70,10 +68,8 @@ export class FormattedTextBoxComment { static textBox: FormattedTextBox | undefined; static linkDoc: Doc | undefined; - static targetDoc: Doc | undefined; - static _editRef = React.createRef(); - - static openDoc: any; + static _deleteRef: Opt; + static _followRef: Opt; constructor(view: any) { if (!FormattedTextBoxComment.tooltip) { @@ -88,8 +84,8 @@ export class FormattedTextBoxComment { FormattedTextBoxComment.tooltip.appendChild(FormattedTextBoxComment.tooltipText); FormattedTextBoxComment.tooltip.className = "FormattedTextBox-tooltip"; FormattedTextBoxComment.tooltip.style.pointerEvents = "all"; - FormattedTextBoxComment.tooltip.style.maxWidth = "225px"; - FormattedTextBoxComment.tooltip.style.maxHeight = "225px"; + FormattedTextBoxComment.tooltip.style.maxWidth = "350px"; + FormattedTextBoxComment.tooltip.style.maxHeight = "250px"; FormattedTextBoxComment.tooltip.style.width = "100%"; FormattedTextBoxComment.tooltip.style.height = "100%"; FormattedTextBoxComment.tooltip.style.overflow = "hidden"; @@ -100,13 +96,25 @@ export class FormattedTextBoxComment { const textBox = FormattedTextBoxComment.textBox; if (FormattedTextBoxComment.linkDoc && !keep && textBox) { if (FormattedTextBoxComment.linkDoc.author) { + + // if (FormattedTextBoxComment._deleteRef && FormattedTextBoxComment._deleteRef.contains(e.target as any)) { + // FormattedTextBoxComment.deleteLink(); + // } else if (FormattedTextBoxComment._followRef && FormattedTextBoxComment._followRef.contains(e.target as any)) { + // if (FormattedTextBoxComment.linkDoc.type !== DocumentType.LINK) { + // textBox.props.addDocTab(FormattedTextBoxComment.linkDoc, e.ctrlKey ? "inTab" : "onRight"); + // } else { + // DocumentManager.Instance.FollowLink(FormattedTextBoxComment.linkDoc, textBox.props.Document, + // (doc: Doc, followLinkLocation: string) => textBox.props.addDocTab(doc, e.ctrlKey ? "inTab" : followLinkLocation)); + // } + // } else { if (FormattedTextBoxComment.linkDoc.type !== DocumentType.LINK) { - FormattedTextBoxComment.openDoc = textBox.props.addDocTab(FormattedTextBoxComment.linkDoc, e.ctrlKey ? "inTab" : "onRight"); textBox.props.addDocTab(FormattedTextBoxComment.linkDoc, e.ctrlKey ? "inTab" : "onRight"); } else { DocumentManager.Instance.FollowLink(FormattedTextBoxComment.linkDoc, textBox.props.Document, (doc: Doc, followLinkLocation: string) => textBox.props.addDocTab(doc, e.ctrlKey ? "inTab" : followLinkLocation)); } + //} + } } else if (textBox && (FormattedTextBoxComment.tooltipText as any).href) { textBox.props.addDocTab(Docs.Create.WebDocument((FormattedTextBoxComment.tooltipText as any).href, { title: (FormattedTextBoxComment.tooltipText as any).href, _width: 200, _height: 400, UseCors: true }), "onRight"); @@ -117,33 +125,16 @@ export class FormattedTextBoxComment { e.preventDefault(); }; root && root.appendChild(FormattedTextBoxComment.tooltip); - } + }; } @action public static deleteLink = (): void => { console.log(FormattedTextBoxComment.linkDoc); - FormattedTextBoxComment.linkDoc ? LinkManager.Instance.deleteLink(FormattedTextBoxComment.linkDoc) : null; - //this.props.showLinks(); - LinkDocPreview.LinkInfo = undefined; - DocumentLinksButton.EditLink = undefined; - } - - @action - public static onContextMenu = (e: React.MouseEvent) => { - DocumentLinksButton.EditLink = undefined; - LinkDocPreview.LinkInfo = undefined; - e.preventDefault(); - ContextMenu.Instance.addItem({ description: "Follow Default Link", event: () => FormattedTextBoxComment.followDefault(), icon: "arrow-right" }); - ContextMenu.Instance.displayMenu(e.clientX, e.clientY); - } - - @action.bound - public static async followDefault() { - DocumentLinksButton.EditLink = undefined; - LinkDocPreview.LinkInfo = undefined; - FormattedTextBoxComment.targetDoc ? DocumentManager.Instance.FollowLink(FormattedTextBoxComment.linkDoc, FormattedTextBoxComment.targetDoc, - doc => FormattedTextBoxComment, false) : null; + // FormattedTextBoxComment.linkDoc ? LinkManager.Instance.deleteLink(FormattedTextBoxComment.linkDoc) : null; + // //this.props.showLinks(); + // LinkDocPreview.LinkInfo = undefined; + // DocumentLinksButton.EditLink = undefined; } public static Hide() { @@ -159,22 +150,6 @@ export class FormattedTextBoxComment { FormattedTextBoxComment.tooltip && (FormattedTextBoxComment.tooltip.style.display = ""); } - @action - onClick = (e: PointerEvent) => { - if (FormattedTextBoxComment._editRef && !FormattedTextBoxComment._editRef.current?.contains(e.target as Node)) { - FormattedTextBoxComment.linkDoc = undefined; - FormattedTextBoxComment.targetDoc = undefined; - } - } - @action - componentDidMount() { - document.addEventListener("pointerdown", this.onClick); - } - - componentWillUnmount() { - document.removeEventListener("pointerdown", this.onClick); - } - static showCommentbox(set: string, view: EditorView, nbef: number) { const state = view.state; if (set !== "none") { @@ -213,7 +188,6 @@ export class FormattedTextBoxComment { (FormattedTextBoxComment.tooltipText as any).href = ""; FormattedTextBoxComment.tooltipText.style.whiteSpace = ""; FormattedTextBoxComment.tooltipText.style.overflow = ""; - // this section checks to see if the insertion point is over text entered by a different user. If so, it sets ths comment text to indicate the user and the modification date if (state.selection.$from) { nbef = findStartOfMark(state.selection.$from, view, findOtherUserMark); @@ -266,12 +240,12 @@ export class FormattedTextBoxComment { target._scrollY = NumCast(anchor?.y); } if (target?.author) { - + FormattedTextBoxComment.showCommentbox("", view, nbef); const docPreview =
{target.title}
-
+
this._deleteRef = r}>
-
+
this._followRef = r}>
@@ -303,7 +277,34 @@ export class FormattedTextBoxComment { />
; FormattedTextBoxComment.showCommentbox("", view, nbef); - ReactDOM.render(docPreview, FormattedTextBoxComment.tooltipText); + + ReactDOM.render( Math.min(350, NumCast(target._width, 350))} + PanelHeight={() => Math.min(250, NumCast(target._height, 250))} + focus={emptyFunction} + whenActiveChanged={returnFalse} + bringToFront={returnFalse} + ContentScaling={returnOne} + NativeWidth={returnZero} + NativeHeight={returnZero} + />, FormattedTextBoxComment.tooltipText); + FormattedTextBoxComment.tooltip.style.width = NumCast(target._width) ? `${NumCast(target._width)}` : "100%"; FormattedTextBoxComment.tooltip.style.height = NumCast(target._height) ? `${NumCast(target._height)}` : "100%"; } @@ -317,4 +318,4 @@ export class FormattedTextBoxComment { } destroy() { } -} +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 24ac6997048932c4f2717651e992f744e6a5276a Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Wed, 1 Jul 2020 17:42:38 -0500 Subject: started clicking mode popup --- src/client/views/MainView.tsx | 4 +-- .../views/collections/CollectionLinearView.scss | 42 +++++++++++++++------- .../views/collections/CollectionLinearView.tsx | 25 ++++++++++++- src/client/views/linking/LinkMenu.tsx | 6 ++-- src/client/views/linking/LinkMenuItem.tsx | 3 +- src/client/views/nodes/DocumentLinksButton.tsx | 31 +++++++++++++--- src/client/views/nodes/DocumentView.tsx | 1 + .../views/nodes/formattedText/FormattedTextBox.tsx | 36 +++++++++++++++++++ 8 files changed, 124 insertions(+), 24 deletions(-) (limited to 'src/client/views/linking') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index f6db1af66..662232810 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -4,7 +4,7 @@ import { faTerminal, faToggleOn, faFile as fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard, faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, - faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, + faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faTimesCircle, faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight } from '@fortawesome/free-solid-svg-icons'; import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss'; @@ -138,7 +138,7 @@ export class MainView extends React.Component { } library.add(faTasks, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, - faTerminal, faToggleOn, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard, fileSolid, + faTerminal, faToggleOn, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faTimesCircle, faWindowMaximize, faAddressCard, fileSolid, faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faTrashAlt, faAngleRight, faBell, diff --git a/src/client/views/collections/CollectionLinearView.scss b/src/client/views/collections/CollectionLinearView.scss index 123a27deb..90c96e08b 100644 --- a/src/client/views/collections/CollectionLinearView.scss +++ b/src/client/views/collections/CollectionLinearView.scss @@ -1,12 +1,27 @@ @import "../globalCssVariables"; @import "../_nodeModuleOverrides"; -.collectionLinearView-outer{ +.collectionLinearView-outer { overflow: hidden; - height:100%; + height: 100%; + .collectionLinearView { - display:flex; + display: flex; height: 100%; + + >span { + margin-top: "auto"; + margin-bottom: "auto"; + background: $dark-color; + color: $light-color; + display: inline-block; + border-radius: 18px; + margin-top: auto; + margin-bottom: auto; + margin-right: 3px; + cursor: pointer; + } + >label { margin-top: "auto"; margin-bottom: "auto"; @@ -17,15 +32,15 @@ font-size: 12.5px; width: 18px; height: 18px; - margin-top:auto; - margin-bottom:auto; + margin-top: auto; + margin-bottom: auto; margin-right: 3px; cursor: pointer; transition: transform 0.2s; } label p { - padding-left:5px; + padding-left: 5px; } label:hover { @@ -36,13 +51,14 @@ >input { display: none; } + >input:not(:checked)~.collectionLinearView-content { display: none; } >input:checked~label { transform: rotate(45deg); - transition: transform 0.5s; +transition: transform 0.5s; cursor: pointer; } @@ -52,12 +68,14 @@ position: relative; margin-top: auto; - .collectionLinearView-docBtn, .collectionLinearView-docBtn-scalable { - position:relative; - margin:auto; + .collectionLinearView-docBtn, + .collectionLinearView-docBtn-scalable { + position: relative; + margin: auto; margin-left: 3px; transform-origin: center 80%; } + .collectionLinearView-docBtn-scalable:hover { transform: scale(1.15); } @@ -68,10 +86,10 @@ border-radius: 18px; font-size: 15px; } - + .collectionLinearView-round-button:hover { transform: scale(1.15); } } } -} +} \ No newline at end of file diff --git a/src/client/views/collections/CollectionLinearView.tsx b/src/client/views/collections/CollectionLinearView.tsx index f38eeaf41..29deb906a 100644 --- a/src/client/views/collections/CollectionLinearView.tsx +++ b/src/client/views/collections/CollectionLinearView.tsx @@ -13,6 +13,8 @@ import { CollectionSubView } from './CollectionSubView'; import { DocumentView } from '../nodes/DocumentView'; import { documentSchema } from '../../../fields/documentSchemas'; import { Id } from '../../../fields/FieldSymbols'; +import { DocumentLinksButton } from '../nodes/DocumentLinksButton'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; type LinearDocument = makeInterface<[typeof documentSchema,]>; @@ -75,6 +77,11 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) { return new Transform(-translateX, -translateY, 1); } + @action + exitLongLinks = () => { + DocumentLinksButton.StartLink = undefined + } + render() { const guid = Utils.GenerateGuid(); const flexDir: any = StrCast(this.Document.flexDirection); @@ -82,7 +89,12 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) { const color = StrCast(this.props.Document.color, "white"); return
- @@ -130,6 +142,17 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
; })}
+ {DocumentLinksButton.StartLink ? e.stopPropagation()} > + + Creating Link From: {DocumentLinksButton.StartLink.title} + + + + : null}
; } diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx index 2a9bbed39..c36e7b67c 100644 --- a/src/client/views/linking/LinkMenu.tsx +++ b/src/client/views/linking/LinkMenu.tsx @@ -32,9 +32,9 @@ export class LinkMenu extends React.Component { DocumentLinksButton.EditLink = undefined; } - // if (this._linkMenuRef && !this._linkMenuRef.contains(e.target)) { - // DocumentLinksButton.EditLink = undefined; - // } + if (this._linkMenuRef && !this._linkMenuRef.contains(e.target as any)) { + DocumentLinksButton.EditLink = undefined; + } } @action componentDidMount() { diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index d5d31d1ba..54dca261d 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -137,6 +137,7 @@ export class LinkMenuItem extends React.Component { @action.bound async followDefault() { + console.log("FOLLOWWW"); DocumentLinksButton.EditLink = undefined; LinkDocPreview.LinkInfo = undefined; DocumentManager.Instance.FollowLink(this.props.linkDoc, this.props.sourceDoc, doc => this.props.addDocTab(doc, "onRight"), false); @@ -174,7 +175,7 @@ export class LinkMenuItem extends React.Component { {/*
*/}
-
+
this.followDefault()} onContextMenu={this.onContextMenu}>
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index c625c4cd6..d04cdd34c 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -24,6 +24,8 @@ interface DocumentLinksButtonProps { export class DocumentLinksButton extends React.Component { private _linkButton = React.createRef(); + @observable public static StartLink: DocumentView | undefined; + @action onLinkButtonMoved = (e: PointerEvent) => { if (this._linkButton.current !== null) { @@ -51,11 +53,9 @@ export class DocumentLinksButton extends React.Component { - setupMoveUpEvents(this, e, this.onLinkButtonMoved, emptyFunction, action((e, doubleTap) => { - if (doubleTap) { + if (doubleTap && this.props.InMenu) { DocumentLinksButton.StartLink = this.props.View; } else if (!!!this.props.InMenu) { DocumentLinksButton.EditLink = this.props.View; @@ -63,6 +63,17 @@ export class DocumentLinksButton extends React.Component { + if (this.props.InMenu) { + DocumentLinksButton.StartLink = this.props.View; + } else if (!!!this.props.InMenu) { + DocumentLinksButton.EditLink = this.props.View; + DocumentLinksButton.EditLinkLoc = [e.clientX + 10, e.clientY]; + } + } + completeLink = (e: React.PointerEvent): void => { setupMoveUpEvents(this, e, returnFalse, emptyFunction, action((e, doubleTap) => { if (doubleTap) { @@ -76,6 +87,15 @@ export class DocumentLinksButton extends React.Component { + if (DocumentLinksButton.StartLink === this.props.View) { + DocumentLinksButton.StartLink = undefined; + } else { + DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View && + DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.props.View.props.Document }, "long drag"); + } + } + @observable public static EditLink: DocumentView | undefined; public static EditLinkLoc: number[] = [0, 0]; @@ -86,7 +106,7 @@ export class DocumentLinksButton extends React.Component
LinkDocPreview.LinkInfo = undefined)} // onPointerEnter={action(e => links.length && (LinkDocPreview.LinkInfo = { // addDocTab: this.props.View.props.addDocTab, @@ -97,7 +117,8 @@ export class DocumentLinksButton extends React.Component {links.length && !!!this.props.InMenu ? links.length : }
- {DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View ?
: (null)} + {DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View ?
: (null)} {DocumentLinksButton.StartLink === this.props.View ?
: (null)}
; } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 09eeaee36..6820b2047 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -116,6 +116,7 @@ export class DocumentView extends DocComponent(Docu protected multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer; private holdDisposer?: InteractionUtils.MultiTouchEventDisposer; + public get title() { return this.props.Document.title } public get displayName() { return "DocumentView(" + this.props.Document.title + ")"; } // this makes mobx trace() statements more descriptive public get ContentDiv() { return this._mainCont.current; } get active() { return SelectionManager.IsSelected(this, true) || this.props.parentActive(true); } diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 2a79e2f13..dc7d8c7ca 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -58,6 +58,7 @@ import { FieldView, FieldViewProps } from "../FieldView"; import "./FormattedTextBox.scss"; import { FormattedTextBoxComment, formattedTextBoxCommentPlugin } from './FormattedTextBoxComment'; import React = require("react"); +import { DocumentManager } from '../../../util/DocumentManager'; library.add(faEdit); library.add(faSmile, faTextHeight, faUpload); @@ -1047,6 +1048,40 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp } } + @action + onDoubleClick = (e: React.MouseEvent): void => { + + this.doLinkOnDeselect(); + FormattedTextBox._downEvent = true; + FormattedTextBoxComment.textBox = this; + if (this.props.onClick && e.button === 0 && !this.props.isSelected(false)) { + e.preventDefault(); + } + if (e.button === 0 && this.props.isSelected(true) && !e.altKey && !e.ctrlKey && !e.metaKey) { + if (e.clientX < this.ProseRef!.getBoundingClientRect().right) { // stop propagation if not in sidebar + e.stopPropagation(); // if the text box is selected, then it consumes all down events + } + } + if (e.button === 2 || (e.button === 0 && e.ctrlKey)) { + e.preventDefault(); + } + FormattedTextBoxComment.Hide(); + if (FormattedTextBoxComment.linkDoc) { + if (FormattedTextBoxComment.linkDoc.type !== DocumentType.LINK) { + this.props.addDocTab(FormattedTextBoxComment.linkDoc, e.ctrlKey ? "inTab" : "onRight"); + } else { + DocumentManager.Instance.FollowLink(FormattedTextBoxComment.linkDoc, this.props.Document, + (doc: Doc, followLinkLocation: string) => this.props.addDocTab(doc, e.ctrlKey ? "inTab" : followLinkLocation)); + } + } + + (e.nativeEvent as any).formattedHandled = true; + + if (e.buttons === 1 && this.props.isSelected(true) && !e.altKey) { + e.stopPropagation(); + } + } + @action onFocused = (e: React.FocusEvent): void => { console.log("FOUCSS") @@ -1317,6 +1352,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp } } })} + onDoubleClick={this.onDoubleClick} >
Date: Thu, 2 Jul 2020 12:59:15 -0500 Subject: bottom popup, links button, cursor UI cleanup --- src/client/views/collections/CollectionLinearView.scss | 8 ++++---- src/client/views/collections/CollectionLinearView.tsx | 12 ++++++++---- src/client/views/linking/LinkMenuItem.scss | 1 + src/client/views/nodes/DocumentLinksButton.scss | 2 +- src/client/views/nodes/DocumentLinksButton.tsx | 9 +++++++-- src/client/views/nodes/LinkAnchorBox.scss | 7 ++++--- 6 files changed, 25 insertions(+), 14 deletions(-) (limited to 'src/client/views/linking') diff --git a/src/client/views/collections/CollectionLinearView.scss b/src/client/views/collections/CollectionLinearView.scss index 134d62d4f..b3fc5f0e7 100644 --- a/src/client/views/collections/CollectionLinearView.scss +++ b/src/client/views/collections/CollectionLinearView.scss @@ -10,15 +10,15 @@ height: 100%; >span { - - margin-top: 8px; - margin-left: 4px; + //margin-top: 8px; + //margin-left: 4px; //margin-bottom: 2px; background: $dark-color; color: $light-color; - display: inline-block; + //display: inline-block; border-radius: 18px; margin-right: 6px; + //height: 100%; cursor: pointer; } diff --git a/src/client/views/collections/CollectionLinearView.tsx b/src/client/views/collections/CollectionLinearView.tsx index a180991d0..3096ef9c8 100644 --- a/src/client/views/collections/CollectionLinearView.tsx +++ b/src/client/views/collections/CollectionLinearView.tsx @@ -150,13 +150,17 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) { })}
{DocumentLinksButton.StartLink ? e.stopPropagation()} > Creating link from: {DocumentLinksButton.StartLink.title} diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss index 1669fc39d..ef53f6a43 100644 --- a/src/client/views/linking/LinkMenuItem.scss +++ b/src/client/views/linking/LinkMenuItem.scss @@ -81,6 +81,7 @@ } &:hover { background: $main-accent; + cursor: grab; } } } \ No newline at end of file diff --git a/src/client/views/nodes/DocumentLinksButton.scss b/src/client/views/nodes/DocumentLinksButton.scss index 484f8c469..b58603978 100644 --- a/src/client/views/nodes/DocumentLinksButton.scss +++ b/src/client/views/nodes/DocumentLinksButton.scss @@ -23,7 +23,7 @@ &:hover { background: deepskyblue; transform: scale(1.05); - cursor: default; + cursor: grab; } } .documentLinksButton { diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index 27fbbc7fc..d67a01d8b 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -114,7 +114,10 @@ export class DocumentLinksButton extends React.Component -
LinkDocPreview.LinkInfo = undefined)} // onPointerEnter={action(e => links.length && (LinkDocPreview.LinkInfo = { @@ -127,8 +130,10 @@ export class DocumentLinksButton extends React.Component}
{DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View ?
: (null)} - {DocumentLinksButton.StartLink === this.props.View ?
: (null)} + {DocumentLinksButton.StartLink === this.props.View ?
: (null)}
; } render() { diff --git a/src/client/views/nodes/LinkAnchorBox.scss b/src/client/views/nodes/LinkAnchorBox.scss index 710f2178b..42ef2958e 100644 --- a/src/client/views/nodes/LinkAnchorBox.scss +++ b/src/client/views/nodes/LinkAnchorBox.scss @@ -1,4 +1,5 @@ -.linkAnchorBox-cont, .linkAnchorBox-cont-small { +.linkAnchorBox-cont, +.linkAnchorBox-cont-small { cursor: default; position: absolute; width: 15; @@ -24,6 +25,6 @@ } .linkAnchorBox-cont-small { - width:5px; - height:5px; + width: 5px; + height: 5px; } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 37392f606d29547bed46ffcd0f0190ad38f51148 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Fri, 3 Jul 2020 01:06:18 -0500 Subject: link created popup --- src/client/documents/Documents.ts | 8 ++++---- src/client/views/MainView.tsx | 23 +++++++++++++--------- .../collectionFreeForm/CollectionFreeFormView.tsx | 5 +++++ src/client/views/linking/LinkMenu.scss | 9 ++++----- src/client/views/linking/LinkMenu.tsx | 4 ++++ src/client/views/linking/LinkMenuItem.tsx | 11 ++++++++--- src/client/views/nodes/DocumentLinksButton.tsx | 14 +++++++++++-- src/fields/Doc.ts | 4 ++-- 8 files changed, 53 insertions(+), 25 deletions(-) (limited to 'src/client/views/linking') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 2e0323ede..0f434d616 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -868,6 +868,10 @@ export namespace DocUtils { DocUtils.ActiveRecordings.map(d => DocUtils.MakeLink({ doc: doc }, { doc: d }, "audio link", "audio timeline")); } + function stopLinkCreated() { + MainView.linkCreated = false; + } + export function MakeLink(source: { doc: Doc }, target: { doc: Doc }, linkRelationship: string = "", id?: string) { const sv = DocumentManager.Instance.getDocumentView(source.doc); if (sv && sv.props.ContainingCollectionDoc === target.doc) return; @@ -880,10 +884,6 @@ export namespace DocUtils { Doc.GetProto(source.doc).links = ComputedField.MakeFunction("links(self)"); Doc.GetProto(target.doc).links = ComputedField.MakeFunction("links(self)"); - runInAction(() => { MainView.linkCreated = true; }); - console.log("link created"); - runInAction(() => { setTimeout("MainView.changeLinkCreated()", 2000); }); - return linkDoc; } diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 4898e114a..617cc19b1 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -84,6 +84,8 @@ export class MainView extends React.Component { public isPointerDown = false; @observable public static linkCreated: boolean = false; + @observable public static popupX: number = 600; + @observable public static popupY: number = 250; componentDidMount() { @@ -614,15 +616,18 @@ export class MainView extends React.Component { {this.mainContent} - {MainView.linkCreated ?
- {/* */} - link created! - {/* */} -
: null} + + +
Link Created
+ + {DocumentLinksButton.EditLink ? : (null)} {LinkDocPreview.LinkInfo ? { MainView.linkCreated = true; }); + runInAction(() => { setTimeout(function () { runInAction(() => MainView.linkCreated = false); }, 2500); }); linkDragData.linkDocument = DocUtils.MakeLink({ doc: source }, { doc: linkDragData.linkSourceDocument }, "doc annotation"); // TODODO this is where in text links get passed e.stopPropagation(); return true; diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss index c372e7098..6468ccd3d 100644 --- a/src/client/views/linking/LinkMenu.scss +++ b/src/client/views/linking/LinkMenu.scss @@ -15,7 +15,7 @@ } .linkMenu-group { - border-bottom: 0.5px solid lightgray; + border-bottom: 0.5px solid lightgray; padding: 5px 0; @@ -30,9 +30,11 @@ p { background-color: lightgray; } + p.expand-one { width: calc(100% - 26px); } + .linkEditor-tableButton { display: block; } @@ -50,7 +52,4 @@ display: none; } } -} - - - +} \ No newline at end of file diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx index c36e7b67c..c672511ac 100644 --- a/src/client/views/linking/LinkMenu.tsx +++ b/src/client/views/linking/LinkMenu.tsx @@ -10,6 +10,7 @@ import { LinkMenuGroup } from "./LinkMenuGroup"; import { faTrash } from '@fortawesome/free-solid-svg-icons'; import { library } from "@fortawesome/fontawesome-svg-core"; import { DocumentLinksButton } from "../nodes/DocumentLinksButton"; +import { LinkDocPreview } from "../nodes/LinkDocPreview"; library.add(faTrash); @@ -28,6 +29,9 @@ export class LinkMenu extends React.Component { @action onClick = (e: PointerEvent) => { + + LinkDocPreview.LinkInfo = undefined; + if (this._linkMenuRef?.contains(e.target as any)) { DocumentLinksButton.EditLink = undefined; } diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index 54dca261d..b11a173f3 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -97,6 +97,7 @@ export class LinkMenuItem extends React.Component { return (
{mdRows}
); } + @action onLinkButtonDown = (e: React.PointerEvent): void => { this._downX = e.clientX; this._downY = e.clientY; @@ -106,6 +107,10 @@ export class LinkMenuItem extends React.Component { document.addEventListener("pointermove", this.onLinkButtonMoved); document.removeEventListener("pointerup", this.onLinkButtonUp); document.addEventListener("pointerup", this.onLinkButtonUp); + + //if (this._editRef && this._editRef.current?.contains(e.target as any)) { + LinkDocPreview.LinkInfo = undefined; + //} } onLinkButtonUp = (e: PointerEvent): void => { @@ -168,14 +173,14 @@ export class LinkMenuItem extends React.Component { }))} onPointerDown={this.onLinkButtonDown}>

{StrCast(this.props.destinationDoc.title)}

-
+
{canExpand ?
this.toggleShowMore(e)}>
: <>} {/*
*/} -
+
-
this.followDefault()} onContextMenu={this.onContextMenu}> +
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index d67a01d8b..95c2988da 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -77,6 +77,7 @@ export class DocumentLinksButton extends React.Component { setupMoveUpEvents(this, e, returnFalse, emptyFunction, action((e, doubleTap) => { if (doubleTap) { @@ -88,12 +89,17 @@ export class DocumentLinksButton extends React.Component { MainView.linkCreated = true; }); + runInAction(() => { setTimeout(function () { runInAction(() => MainView.linkCreated = false); }, 2500); }); + MainView.popupX = e.screenX; + MainView.popupY = e.screenY; } } })); } - finishLinkClick = () => { + @action + finishLinkClick = (e: React.MouseEvent) => { if (DocumentLinksButton.StartLink === this.props.View) { DocumentLinksButton.StartLink = undefined; // action((e: React.PointerEvent) => { @@ -102,6 +108,10 @@ export class DocumentLinksButton extends React.Component { MainView.linkCreated = true; }); + runInAction(() => { setTimeout(function () { runInAction(() => MainView.linkCreated = false); }, 2500); }); + MainView.popupX = e.screenX; + MainView.popupY = e.screenY; } } @@ -131,7 +141,7 @@ export class DocumentLinksButton extends React.Component {DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View ?
: (null)} + onPointerDown={this.completeLink} onClick={e => this.finishLinkClick(e)} /> : (null)} {DocumentLinksButton.StartLink === this.props.View ?
: (null)}
; diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts index b4bb556c7..7aa1d528d 100644 --- a/src/fields/Doc.ts +++ b/src/fields/Doc.ts @@ -832,14 +832,14 @@ export namespace Doc { })(doc); } export function BrushDoc(doc: Doc) { - console.log("brushed"); + if (!doc || doc[AclSym] === AclPrivate || Doc.GetProto(doc)[AclSym] === AclPrivate) return doc; brushManager.BrushedDoc.set(doc, true); brushManager.BrushedDoc.set(Doc.GetProto(doc), true); return doc; } export function UnBrushDoc(doc: Doc) { - console.log("unbrushed"); + if (!doc || doc[AclSym] === AclPrivate || Doc.GetProto(doc)[AclSym] === AclPrivate) return doc; brushManager.BrushedDoc.delete(doc); brushManager.BrushedDoc.delete(Doc.GetProto(doc)); -- cgit v1.2.3-70-g09d2 From 0ef45898183f9c271cd7e648d3913c11da2d31d0 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Fri, 3 Jul 2020 17:07:18 -0500 Subject: buttons change --- src/client/views/linking/LinkMenuItem.scss | 37 +++++++++++++++--------------- src/client/views/linking/LinkMenuItem.tsx | 19 ++++++++------- 2 files changed, 30 insertions(+), 26 deletions(-) (limited to 'src/client/views/linking') diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss index ef53f6a43..c5becae7d 100644 --- a/src/client/views/linking/LinkMenuItem.scss +++ b/src/client/views/linking/LinkMenuItem.scss @@ -5,7 +5,7 @@ position: relative; display: flex; font-size: 12px; - + .linkMenu-name { position: relative; @@ -22,7 +22,7 @@ .linkMenu-item-content { width: 100%; } - + .link-metadata { padding: 0 10px 0 16px; margin-bottom: 4px; @@ -31,29 +31,29 @@ font-size: 10.5px; } - &:hover { - .linkMenu-item-buttons { - display: flex; - } - .linkMenu-item-content { - &.expand-two p { - width: calc(100% - 52px); - background-color: lightgray; - } - &.expand-three p { - width: calc(100% - 84px); - background-color: lightgray; - } - } - } + // &:hover { + // .linkMenu-item-buttons { + // display: flex; + // } + // .linkMenu-item-content { + // &.expand-two p { + // width: calc(100% - 52px); + // background-color: lightgray; + // } + // &.expand-three p { + // width: calc(100% - 84px); + // background-color: lightgray; + // } + // } + // } } .linkMenu-item-buttons { - display: none; position: absolute; top: 50%; right: 0; transform: translateY(-50%); + display: flex; .button { width: 20px; @@ -79,6 +79,7 @@ &:last-child { margin-right: 0; } + &:hover { background: $main-accent; cursor: grab; diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index b11a173f3..04cd83ee0 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -1,5 +1,5 @@ import { library } from '@fortawesome/fontawesome-svg-core'; -import { faArrowRight, faChevronDown, faChevronUp, faEdit, faEye, faTimes } from '@fortawesome/free-solid-svg-icons'; +import { faArrowRight, faChevronDown, faChevronUp, faEdit, faEye, faTimes, faPencilAlt } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, observable } from 'mobx'; import { observer } from "mobx-react"; @@ -15,7 +15,7 @@ import { setupMoveUpEvents, emptyFunction } from '../../../Utils'; import { DocumentView } from '../nodes/DocumentView'; import { DocumentLinksButton } from '../nodes/DocumentLinksButton'; import { LinkDocPreview } from '../nodes/LinkDocPreview'; -library.add(faEye, faEdit, faTimes, faArrowRight, faChevronDown, faChevronUp); +library.add(faEye, faEdit, faTimes, faArrowRight, faChevronDown, faChevronUp, faPencilAlt); interface LinkMenuItemProps { @@ -71,6 +71,8 @@ export class LinkMenuItem extends React.Component { private _eleClone: any; _editRef = React.createRef(); + _buttonRef = React.createRef(); + @observable private _showMore: boolean = false; @action toggleShowMore(e: React.PointerEvent) { e.stopPropagation(); this._showMore = !this._showMore; } @@ -108,9 +110,9 @@ export class LinkMenuItem extends React.Component { document.removeEventListener("pointerup", this.onLinkButtonUp); document.addEventListener("pointerup", this.onLinkButtonUp); - //if (this._editRef && this._editRef.current?.contains(e.target as any)) { - LinkDocPreview.LinkInfo = undefined; - //} + if (this._buttonRef && this._buttonRef.current?.contains(e.target as any)) { + LinkDocPreview.LinkInfo = undefined; + } } onLinkButtonUp = (e: PointerEvent): void => { @@ -163,7 +165,7 @@ export class LinkMenuItem extends React.Component { return (
-
LinkDocPreview.LinkInfo = undefined)} onPointerEnter={action(e => this.props.linkDoc && (LinkDocPreview.LinkInfo = { addDocTab: this.props.addDocTab, @@ -173,11 +175,12 @@ export class LinkMenuItem extends React.Component { }))} onPointerDown={this.onLinkButtonDown}>

{StrCast(this.props.destinationDoc.title)}

-
+
{canExpand ?
this.toggleShowMore(e)}>
: <>} - {/*
*/} + {/*
+
*/}
-- cgit v1.2.3-70-g09d2 From ed74b8b6d6c65a24803c4e0e68aa192a750d60fa Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Fri, 3 Jul 2020 18:47:48 -0500 Subject: restructure --- src/client/documents/Documents.ts | 5 ---- src/client/views/MainView.tsx | 27 ++--------------- .../views/collections/CollectionLinearView.scss | 34 ++++++++++++++++++---- .../views/collections/CollectionLinearView.tsx | 32 ++++---------------- src/client/views/linking/LinkMenuItem.scss | 34 ++++++++++++---------- src/client/views/nodes/DocumentLinksButton.tsx | 24 +++++++++------ src/client/views/nodes/DocumentView.tsx | 22 ++++++++------ src/client/views/nodes/LinkCreatedBox.scss | 21 +++++++++++++ src/client/views/nodes/LinkCreatedBox.tsx | 31 ++++++++++++++++++++ 9 files changed, 134 insertions(+), 96 deletions(-) create mode 100644 src/client/views/nodes/LinkCreatedBox.scss create mode 100644 src/client/views/nodes/LinkCreatedBox.tsx (limited to 'src/client/views/linking') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 0f434d616..f81c25bab 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -50,7 +50,6 @@ import { DashWebRTCVideo } from "../views/webcam/DashWebRTCVideo"; import { DocumentType } from "./DocumentTypes"; import { Networking } from "../Network"; import { Upload } from "../../server/SharedMediaTypes"; -import { MainView } from "../views/MainView"; const path = require('path'); export interface DocumentOptions { @@ -868,10 +867,6 @@ export namespace DocUtils { DocUtils.ActiveRecordings.map(d => DocUtils.MakeLink({ doc: doc }, { doc: d }, "audio link", "audio timeline")); } - function stopLinkCreated() { - MainView.linkCreated = false; - } - export function MakeLink(source: { doc: Doc }, target: { doc: Doc }, linkRelationship: string = "", id?: string) { const sv = DocumentManager.Instance.getDocumentView(source.doc); if (sv && sv.props.ContainingCollectionDoc === target.doc) return; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 3d47d09c8..15f818d1f 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -60,6 +60,7 @@ import { DocumentLinksButton } from './nodes/DocumentLinksButton'; import { LinkMenu } from './linking/LinkMenu'; import { LinkDocPreview } from './nodes/LinkDocPreview'; import { Fade } from '@material-ui/core'; +import { LinkCreatedBox } from './nodes/LinkCreatedBox'; @observer export class MainView extends React.Component { @@ -83,11 +84,6 @@ export class MainView extends React.Component { public isPointerDown = false; - @observable public static linkCreated: boolean = false; - @observable public static popupX: number = 600; - @observable public static popupY: number = 250; - - componentDidMount() { DocServer.setPlaygroundFields(["dataTransition", "_viewTransition", "_panX", "_panY", "_viewScale", "_viewType"]); // can play with these fields on someone else's @@ -367,11 +363,6 @@ export class MainView extends React.Component { } } - @action - public static changeLinkCreated = () => { - MainView.linkCreated = !MainView.linkCreated; - } - @action onPointerMove = (e: PointerEvent) => { this.flyoutWidth = Math.max(e.clientX, 0); @@ -616,21 +607,7 @@ export class MainView extends React.Component { {this.mainContent} - - -
Link Created
- - + {DocumentLinksButton.EditLink ? : (null)} {LinkDocPreview.LinkInfo ? span { - //margin-top: 8px; - //margin-left: 4px; - //margin-bottom: 2px; background: $dark-color; color: $light-color; - //display: inline-block; border-radius: 18px; margin-right: 6px; - //height: 100%; cursor: pointer; } + .bottomPopup-background { + padding-right: 14px; + height: 35; + transform: translate3d(6px, 5px, 0px); + padding-top: 6.5px; + padding-bottom: 7px; + padding-left: 5px; + } + + .bottomPopup-text { + display: inline; + white-space: nowrap; + padding-left: 8px; + padding-right: 4px; + vertical-align: middle; + font-size: 12.5px; + } + + .bottomPopup-exit { + display: inline; + white-space: nowrap; + padding-left: 8px; + padding-right: 8px; + vertical-align: middle; + background-color: lightgrey; + border-radius: 5.5px; + color: black; + } + >label { margin-top: "auto"; margin-bottom: "auto"; diff --git a/src/client/views/collections/CollectionLinearView.tsx b/src/client/views/collections/CollectionLinearView.tsx index 7635dac24..7cbe5c19d 100644 --- a/src/client/views/collections/CollectionLinearView.tsx +++ b/src/client/views/collections/CollectionLinearView.tsx @@ -149,36 +149,14 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
; })}
- {DocumentLinksButton.StartLink ? e.stopPropagation()} > - + Creating link from: {DocumentLinksButton.StartLink.title} - Exit + Exit {/* */} diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss index c5becae7d..e3ce69cd7 100644 --- a/src/client/views/linking/LinkMenuItem.scss +++ b/src/client/views/linking/LinkMenuItem.scss @@ -31,21 +31,23 @@ font-size: 10.5px; } - // &:hover { - // .linkMenu-item-buttons { - // display: flex; - // } - // .linkMenu-item-content { - // &.expand-two p { - // width: calc(100% - 52px); - // background-color: lightgray; - // } - // &.expand-three p { - // width: calc(100% - 84px); - // background-color: lightgray; - // } - // } - // } + &:hover { + .linkMenu-item-buttons { + display: flex; + } + + .linkMenu-item-content { + &.expand-two p { + width: calc(100% - 52px); + background-color: lightgray; + } + + &.expand-three p { + width: calc(100% - 84px); + background-color: lightgray; + } + } + } } .linkMenu-item-buttons { @@ -53,7 +55,7 @@ top: 50%; right: 0; transform: translateY(-50%); - display: flex; + display: none; .button { width: 20px; diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index 6a6624aa0..bfd860f65 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -10,7 +10,7 @@ import React = require("react"); import { DocUtils } from "../../documents/Documents"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { LinkDocPreview } from "./LinkDocPreview"; -import { MainView } from "../MainView"; +import { LinkCreatedBox } from "./LinkCreatedBox"; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -89,10 +89,13 @@ export class DocumentLinksButton extends React.Component { MainView.linkCreated = true; }); - runInAction(() => { setTimeout(function () { runInAction(() => MainView.linkCreated = false); }, 2500); }); - MainView.popupX = e.screenX; - MainView.popupY = e.screenY; + + runInAction(() => { + LinkCreatedBox.popupX = e.screenX; + LinkCreatedBox.popupY = e.screenY - 120; + LinkCreatedBox.linkCreated = true; + setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500); + }); } } })); @@ -108,10 +111,13 @@ export class DocumentLinksButton extends React.Component { MainView.linkCreated = true; }); - runInAction(() => { setTimeout(function () { runInAction(() => MainView.linkCreated = false); }, 2000); }); - MainView.popupX = e.screenX - 25; - MainView.popupY = e.screenY - 140; + + runInAction(() => { + LinkCreatedBox.popupX = e.screenX; + LinkCreatedBox.popupY = e.screenY - 120; + LinkCreatedBox.linkCreated = true; + setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500); + }); } } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 3a9e4fcf0..b38db9a1e 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -42,7 +42,7 @@ import { RadialMenu } from './RadialMenu'; import React = require("react"); import { DocumentLinksButton } from './DocumentLinksButton'; import { MobileInterface } from '../../../mobile/MobileInterface'; -import { MainView } from '../MainView'; +import { LinkCreatedBox } from './LinkCreatedBox'; library.add(fa.faEdit, fa.faTrash, fa.faShare, fa.faDownload, fa.faExpandArrowsAlt, fa.faCompressArrowsAlt, fa.faLayerGroup, fa.faExternalLinkAlt, fa.faAlignCenter, fa.faCaretSquareRight, fa.faSquare, fa.faConciergeBell, fa.faWindowRestore, fa.faFolder, fa.faMapPin, fa.faLink, fa.faFingerprint, fa.faCrosshairs, fa.faDesktop, fa.faUnlock, fa.faLock, fa.faLaptopCode, fa.faMale, @@ -642,10 +642,12 @@ export class DocumentView extends DocComponent(Docu e.stopPropagation(); de.complete.annoDragData.linkedToDoc = true; - runInAction(() => MainView.popupX = de.x); - runInAction(() => MainView.popupY = de.y); - runInAction(() => { MainView.linkCreated = true; }); - runInAction(() => { setTimeout(function () { runInAction(() => MainView.linkCreated = false); }, 2500); }); + runInAction(() => { + LinkCreatedBox.popupX = de.x; + LinkCreatedBox.popupY = de.y; + LinkCreatedBox.linkCreated = true; + setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500); + }); DocUtils.MakeLink({ doc: de.complete.annoDragData.annotationDocument }, { doc: this.props.Document }, "link"); } @@ -653,11 +655,13 @@ export class DocumentView extends DocComponent(Docu e.stopPropagation(); // const docs = await SearchUtil.Search(`data_l:"${destDoc[Id]}"`, true); // const views = docs.map(d => DocumentManager.Instance.getDocumentView(d)).filter(d => d).map(d => d as DocumentView); - runInAction(() => MainView.popupX = de.x); - runInAction(() => MainView.popupY = de.y); - runInAction(() => { MainView.linkCreated = true; }); - runInAction(() => { setTimeout(function () { runInAction(() => MainView.linkCreated = false); }, 2000); }); + runInAction(() => { + LinkCreatedBox.popupX = de.x; + LinkCreatedBox.popupY = de.y; + LinkCreatedBox.linkCreated = true; + setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500); + }); de.complete.linkDragData.linkSourceDocument !== this.props.Document && (de.complete.linkDragData.linkDocument = DocUtils.MakeLink({ doc: de.complete.linkDragData.linkSourceDocument }, diff --git a/src/client/views/nodes/LinkCreatedBox.scss b/src/client/views/nodes/LinkCreatedBox.scss new file mode 100644 index 000000000..3cbd38b55 --- /dev/null +++ b/src/client/views/nodes/LinkCreatedBox.scss @@ -0,0 +1,21 @@ +.linkCreatedBox-fade { + border: 1px solid rgb(100, 100, 100); + + + width: auto; + position: absolute; + + height: auto; + z-index: 10000; + border-radius: 13px; + font-size: 13px; + white-space: nowrap; + + color: rgb(100, 100, 100); + background-color: rgba(250, 250, 250, 0.85); + padding-top: 6.5px; + padding-bottom: 6.5px; + font-weight: bold; + padding-left: 9px; + padding-right: 9px; +} \ No newline at end of file diff --git a/src/client/views/nodes/LinkCreatedBox.tsx b/src/client/views/nodes/LinkCreatedBox.tsx new file mode 100644 index 000000000..d157d3fca --- /dev/null +++ b/src/client/views/nodes/LinkCreatedBox.tsx @@ -0,0 +1,31 @@ +import React = require("react"); +import { observer } from "mobx-react"; +import { documentSchema } from "../../../fields/documentSchemas"; +import { makeInterface } from "../../../fields/Schema"; +import "./LinkCreatedBox.scss"; +import { observable, action } from "mobx"; +import { Fade } from "@material-ui/core"; + + +@observer +export class LinkCreatedBox extends React.Component<{}> { + + @observable public static linkCreated: boolean = false; + @observable public static popupX: number = 600; + @observable public static popupY: number = 250; + + @action + public static changeLinkCreated = () => { + LinkCreatedBox.linkCreated = !LinkCreatedBox.linkCreated; + } + + render() { + return +
Link Created
+ ; + } +} \ No newline at end of file -- cgit v1.2.3-70-g09d2