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/collections/CollectionTreeView.tsx | 2 +- src/client/views/collections/CollectionView.tsx | 2 +- .../views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 2 +- src/client/views/collections/collectionFreeForm/MarqueeView.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 620b977fa..26c41f524 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -207,7 +207,7 @@ class TreeView extends React.Component { if (complete.linkDragData) { const sourceDoc = complete.linkDragData.linkSourceDocument; const destDoc = this.doc; - DocUtils.MakeLink({ doc: sourceDoc }, { doc: destDoc }, "tree link"); + DocUtils.MakeLink({ doc: sourceDoc }, { doc: destDoc }, "tree link", ""); e.stopPropagation(); } const docDragData = complete.docDragData; diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 26abd2529..df21d6a28 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -147,7 +147,7 @@ export class CollectionView extends Touchable d instanceof Doc); first && (first.hidden = true); pushpinLink && (Doc.GetProto(pushpinLink).isPushpin = true); diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index b81e400b3..9bf425db2 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -246,7 +246,7 @@ export class CollectionFreeFormView extends CollectionSubView 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/collections') 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 72fb84b1817c17667317c9e9aa6daea5ffc5acf5 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sun, 5 Jul 2020 00:45:37 -0500 Subject: following dropdown UI --- .../views/collections/CollectionLinearView.tsx | 11 ++++-- src/client/views/linking/LinkEditor.scss | 46 ++++++++++++++++++++++ src/client/views/linking/LinkEditor.tsx | 44 ++++++++++++++++++++- src/client/views/linking/LinkMenu.tsx | 6 +-- 4 files changed, 100 insertions(+), 7 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionLinearView.tsx b/src/client/views/collections/CollectionLinearView.tsx index 35c28406a..c370415be 100644 --- a/src/client/views/collections/CollectionLinearView.tsx +++ b/src/client/views/collections/CollectionLinearView.tsx @@ -92,11 +92,16 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) { @action changeDescriptionSetting = () => { - if (LinkDescriptionPopup.showDescriptions === "ON") { + if (LinkDescriptionPopup.showDescriptions) { + if (LinkDescriptionPopup.showDescriptions === "ON") { + LinkDescriptionPopup.showDescriptions = "OFF"; + LinkDescriptionPopup.descriptionPopup = false; + } else { + LinkDescriptionPopup.showDescriptions = "ON"; + } + } else { LinkDescriptionPopup.showDescriptions = "OFF"; LinkDescriptionPopup.descriptionPopup = false; - } else { - LinkDescriptionPopup.showDescriptions = "ON"; } } diff --git a/src/client/views/linking/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss index 14b2106d5..5f0e5e18a 100644 --- a/src/client/views/linking/LinkEditor.scss +++ b/src/client/views/linking/LinkEditor.scss @@ -51,6 +51,52 @@ } } +.linkEditor-followingDropdown { + padding-left: 6.5px; + padding-right: 6.5px; + padding-bottom: 3.5px; + + .linkEditor-followingDropdown-dropdown { + + .linkEditor-followingDropdown-header { + + border: 1px solid rgb(114, 162, 179); + border-radius: 4px; + background-color: lightblue; + padding-left: 2px; + padding-right: 2px; + color: grey; + text-decoration-color: grey; + + .linkEditor-followingDropdown-icon { + float: right; + } + } + + .linkEditor-followingDropdown-optionsList { + padding-left: 3px; + padding-right: 3px; + + .linkEditor-followingDropdown-option { + border: 0.25px dotted rgb(114, 162, 179); + background-color: lightblue; + padding-left: 2px; + padding-right: 2px; + color: grey; + text-decoration-color: grey; + font-size: 9px; + + &:hover { + background-color: rgb(141, 197, 216); + } + } + + } + } + + +} + .linkEditor-button, .linkEditor-addbutton { diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx index 4a6d9f2d3..fbdfda5b3 100644 --- a/src/client/views/linking/LinkEditor.tsx +++ b/src/client/views/linking/LinkEditor.tsx @@ -286,6 +286,10 @@ export class LinkEditor extends React.Component { @observable description = StrCast(LinkManager.currentLink?.description); + @observable openDropdown: boolean = false; + + @observable currentFollow: string = "Default"; + //@observable description = this.props.linkDoc.description ? StrCast(this.props.linkDoc.description) : "DESCRIPTION"; @@ -318,9 +322,47 @@ export class LinkEditor extends React.Component { >; } + @action + changeDropdown = () => { + this.openDropdown = !this.openDropdown; + } + + @action + changeFollowBehavior = (follow: string) => { + this.openDropdown = false; + this.currentFollow = follow; + } + @computed get followingDropdown() { - return "choose follow behavior"; + return
+
+ Follow Behavior:
+
+
+ {this.currentFollow} + +
+ {this.openDropdown ? +
+
this.changeFollowBehavior("default")}> + Default +
+
this.changeFollowBehavior("Always open in right tab")}> + Always open in right tab +
+
this.changeFollowBehavior("Always open in new tab")}> + Always open in new tab +
+
+ : null} +
+
; } render() { diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx index 8721b9f3d..c2e410b73 100644 --- a/src/client/views/linking/LinkMenu.tsx +++ b/src/client/views/linking/LinkMenu.tsx @@ -26,7 +26,7 @@ interface Props { export class LinkMenu extends React.Component { @observable private _editingLink?: Doc; - @observable private _linkMenuRef: Opt; + @observable private _linkMenuRef = React.createRef(); private _editorRef = React.createRef(); @action @@ -35,7 +35,7 @@ export class LinkMenu extends React.Component { LinkDocPreview.LinkInfo = undefined; - if (this._linkMenuRef && !!!this._linkMenuRef.contains(e.target as any)) { + if (this._linkMenuRef && !!!this._linkMenuRef.current?.contains(e.target as any)) { if (this._editorRef && !!!this._editorRef.current?.contains(e.target as any)) { console.log("outside click"); DocumentLinksButton.EditLink = undefined; @@ -81,7 +81,7 @@ export class LinkMenu extends React.Component { 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] }}> + ref={this._linkMenuRef} style={{ left: this.props.location[0], top: this.props.location[1] }}> {!this._editingLink ? this.renderAllGroups(groups) :