From 8264ac5484c0c7b5d47cb78ce60f5d6568e736d9 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sat, 4 Jul 2020 17:25:10 -0500 Subject: redesigned editing menu, added link descriptions and popup on created --- src/client/views/nodes/DocumentLinksButton.tsx | 52 +++++++++++++++++--------- 1 file changed, 34 insertions(+), 18 deletions(-) (limited to 'src/client/views/nodes/DocumentLinksButton.tsx') diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index bfd860f65..5d1a68af5 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -11,6 +11,8 @@ import { DocUtils } from "../../documents/Documents"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { LinkDocPreview } from "./LinkDocPreview"; import { LinkCreatedBox } from "./LinkCreatedBox"; +import { LinkDescriptionPopup } from "./LinkDescriptionPopup"; +import { LinkManager } from "../../util/LinkManager"; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -54,6 +56,7 @@ export class DocumentLinksButton extends React.Component { setupMoveUpEvents(this, e, this.onLinkButtonMoved, emptyFunction, action((e, doubleTap) => { if (doubleTap && this.props.InMenu) { @@ -87,15 +90,22 @@ export class DocumentLinksButton extends React.Component { - LinkCreatedBox.popupX = e.screenX; - LinkCreatedBox.popupY = e.screenY - 120; - LinkCreatedBox.linkCreated = true; - setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500); - }); + + if (DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View) { + const linkDoc = DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.props.View.props.Document }, "long drag"); + LinkManager.currentLink = linkDoc; + runInAction(() => { + LinkCreatedBox.popupX = e.screenX; + LinkCreatedBox.popupY = e.screenY - 33; + LinkCreatedBox.linkCreated = true; + + LinkDescriptionPopup.popupX = e.screenX; + LinkDescriptionPopup.popupY = e.screenY; + LinkDescriptionPopup.descriptionPopup = true; + + setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500); + }); + } } } })); @@ -109,15 +119,21 @@ export class DocumentLinksButton extends React.Component { - LinkCreatedBox.popupX = e.screenX; - LinkCreatedBox.popupY = e.screenY - 120; - LinkCreatedBox.linkCreated = true; - setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500); - }); + if (DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View) { + const linkDoc = DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.props.View.props.Document }, "long drag"); + LinkManager.currentLink = linkDoc; + runInAction(() => { + LinkCreatedBox.popupX = e.screenX; + LinkCreatedBox.popupY = e.screenY - 33; + LinkCreatedBox.linkCreated = true; + + LinkDescriptionPopup.popupX = e.screenX; + LinkDescriptionPopup.popupY = e.screenY; + LinkDescriptionPopup.descriptionPopup = true; + + setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500); + }); + } } } -- cgit v1.2.3-70-g09d2 From 45fb8ba4be961f8b0b28cda05ceb5023f84cdb03 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sat, 4 Jul 2020 23:51:30 -0500 Subject: descriptions toggle and UI cleanup --- src/client/views/collections/CollectionLinearView.scss | 12 ++++++++++++ src/client/views/collections/CollectionLinearView.tsx | 14 ++++++++++++++ src/client/views/nodes/DocumentLinksButton.tsx | 14 ++++++++------ src/client/views/nodes/LinkDescriptionPopup.scss | 13 ++++++++++--- src/client/views/nodes/LinkDescriptionPopup.tsx | 3 +++ 5 files changed, 47 insertions(+), 9 deletions(-) (limited to 'src/client/views/nodes/DocumentLinksButton.tsx') diff --git a/src/client/views/collections/CollectionLinearView.scss b/src/client/views/collections/CollectionLinearView.scss index 5ada79a28..b8b72e756 100644 --- a/src/client/views/collections/CollectionLinearView.scss +++ b/src/client/views/collections/CollectionLinearView.scss @@ -35,6 +35,18 @@ font-size: 12.5px; } + .bottomPopup-descriptions { + display: inline; + white-space: nowrap; + padding-left: 8px; + padding-right: 8px; + vertical-align: middle; + background-color: lightgrey; + border-radius: 5.5px; + color: black; + margin-right: 5px; + } + .bottomPopup-exit { display: inline; white-space: nowrap; diff --git a/src/client/views/collections/CollectionLinearView.tsx b/src/client/views/collections/CollectionLinearView.tsx index 7cbe5c19d..35c28406a 100644 --- a/src/client/views/collections/CollectionLinearView.tsx +++ b/src/client/views/collections/CollectionLinearView.tsx @@ -15,6 +15,7 @@ import { documentSchema } from '../../../fields/documentSchemas'; import { Id } from '../../../fields/FieldSymbols'; import { DocumentLinksButton } from '../nodes/DocumentLinksButton'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { LinkDescriptionPopup } from '../nodes/LinkDescriptionPopup'; type LinearDocument = makeInterface<[typeof documentSchema,]>; @@ -89,6 +90,16 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) { DocumentLinksButton.StartLink = undefined; } + @action + changeDescriptionSetting = () => { + if (LinkDescriptionPopup.showDescriptions === "ON") { + LinkDescriptionPopup.showDescriptions = "OFF"; + LinkDescriptionPopup.descriptionPopup = false; + } else { + LinkDescriptionPopup.showDescriptions = "ON"; + } + } + render() { const guid = Utils.GenerateGuid(); const flexDir: any = StrCast(this.Document.flexDirection); @@ -155,6 +166,9 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) { onPointerDown={e => e.stopPropagation()} > Creating link from: {DocumentLinksButton.StartLink.title} + Labels: {LinkDescriptionPopup.showDescriptions ? LinkDescriptionPopup.showDescriptions : "ON"} + Exit diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index 5d1a68af5..544f5fd7f 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -96,11 +96,11 @@ export class DocumentLinksButton extends React.Component { LinkCreatedBox.popupX = e.screenX; - LinkCreatedBox.popupY = e.screenY - 33; + LinkCreatedBox.popupY = e.screenY - 133; LinkCreatedBox.linkCreated = true; LinkDescriptionPopup.popupX = e.screenX; - LinkDescriptionPopup.popupY = e.screenY; + LinkDescriptionPopup.popupY = e.screenY - 100; LinkDescriptionPopup.descriptionPopup = true; setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500); @@ -124,12 +124,14 @@ export class DocumentLinksButton extends React.Component { LinkCreatedBox.popupX = e.screenX; - LinkCreatedBox.popupY = e.screenY - 33; + LinkCreatedBox.popupY = e.screenY - 133; LinkCreatedBox.linkCreated = true; - LinkDescriptionPopup.popupX = e.screenX; - LinkDescriptionPopup.popupY = e.screenY; - LinkDescriptionPopup.descriptionPopup = true; + if (LinkDescriptionPopup.showDescriptions === "ON" || !LinkDescriptionPopup.showDescriptions) { + LinkDescriptionPopup.popupX = e.screenX; + LinkDescriptionPopup.popupY = e.screenY - 100; + LinkDescriptionPopup.descriptionPopup = true; + } setTimeout(action(() => { LinkCreatedBox.linkCreated = false; }), 2500); }); diff --git a/src/client/views/nodes/LinkDescriptionPopup.scss b/src/client/views/nodes/LinkDescriptionPopup.scss index 474bd919b..54002fd1b 100644 --- a/src/client/views/nodes/LinkDescriptionPopup.scss +++ b/src/client/views/nodes/LinkDescriptionPopup.scss @@ -2,7 +2,7 @@ display: flex; - border: 1px solid rgb(100, 100, 100); + border: 1px solid rgb(170, 26, 26); width: auto; position: absolute; @@ -21,13 +21,19 @@ .linkDescriptionPopup-input { float: left; + background-color: rgba(250, 250, 250, 0.95); color: rgb(100, 100, 100); + border: none; + min-width: 160px; } .linkDescriptionPopup-btn { float: right; + justify-content: center; + vertical-align: middle; + .linkDescriptionPopup-btn-dismiss { background-color: white; @@ -40,7 +46,8 @@ font-size: 9px; text-align: center; position: relative; - transform: translateY(5px); + margin-right: 4px; + justify-content: center; } .linkDescriptionPopup-btn-add { @@ -54,7 +61,7 @@ font-size: 9px; text-align: center; position: relative; - transform: translateY(5px); + justify-content: center; } } diff --git a/src/client/views/nodes/LinkDescriptionPopup.tsx b/src/client/views/nodes/LinkDescriptionPopup.tsx index 078a738e7..3bb52d9fb 100644 --- a/src/client/views/nodes/LinkDescriptionPopup.tsx +++ b/src/client/views/nodes/LinkDescriptionPopup.tsx @@ -4,12 +4,14 @@ import "./LinkDescriptionPopup.scss"; import { observable, action } from "mobx"; import { EditableView } from "../EditableView"; import { LinkManager } from "../../util/LinkManager"; +import { LinkCreatedBox } from "./LinkCreatedBox"; @observer export class LinkDescriptionPopup extends React.Component<{}> { @observable public static descriptionPopup: boolean = false; + @observable public static showDescriptions: string = "ON"; @observable public static popupX: number = 700; @observable public static popupY: number = 350; @observable description: string = ""; @@ -37,6 +39,7 @@ export class LinkDescriptionPopup extends React.Component<{}> { onClick = (e: PointerEvent) => { if (this.popupRef && !!!this.popupRef.current?.contains(e.target as any)) { LinkDescriptionPopup.descriptionPopup = false; + LinkCreatedBox.linkCreated = false; } } -- cgit v1.2.3-70-g09d2 From e7326c10d2f94c11dedec1d0a280579ba8fa7af0 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 6 Jul 2020 23:48:44 -0500 Subject: andy's UI changes --- src/client/views/linking/LinkMenu.scss | 4 +++- src/client/views/linking/LinkMenuItem.scss | 7 ++++--- src/client/views/linking/LinkMenuItem.tsx | 2 +- src/client/views/nodes/DocumentLinksButton.tsx | 8 ++++++-- 4 files changed, 14 insertions(+), 7 deletions(-) (limited to 'src/client/views/nodes/DocumentLinksButton.tsx') diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss index 4b9f5641a..b0c729cda 100644 --- a/src/client/views/linking/LinkMenu.scss +++ b/src/client/views/linking/LinkMenu.scss @@ -3,6 +3,7 @@ .linkMenu { width: 100%; height: auto; + border: 1px solid black; &:hover { width: calc(auto + 26px); @@ -10,11 +11,12 @@ } .linkMenu-list { + border: 1px solid black; max-height: 200px; overflow-y: scroll; position: absolute; z-index: 10; - background: $link-color; + background: white; min-width: 150px; border-radius: 5px; padding-top: 6.5px; diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss index 7fecc2820..67bf71fb9 100644 --- a/src/client/views/linking/LinkMenuItem.scss +++ b/src/client/views/linking/LinkMenuItem.scss @@ -16,7 +16,7 @@ .linkMenu-destination-title { text-decoration: none; - color: rgb(46, 82, 160); + color: rgb(85, 120, 196); font-size: 14px; padding-bottom: 2px; } @@ -62,8 +62,9 @@ .linkMenu-destination-title { text-decoration: underline; - color: rgb(15, 57, 148); - display: inline; + color: rgb(60, 90, 156); + //display: inline; + text-overflow: break; } &.expand-two p { diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index 9f6b47375..bd4024902 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -201,7 +201,7 @@ export class LinkMenuItem extends React.Component { : <>}
-
+
{/*
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index 544f5fd7f..7fb447cab 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -146,10 +146,14 @@ export class DocumentLinksButton extends React.Component +