From ee45bc1c3001b3e6feff5b43735f5d179f5e87e9 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Fri, 14 Aug 2020 13:44:09 -0500 Subject: fixed marque offset --- src/client/util/SettingsManager.tsx | 2 +- src/client/views/collections/collectionFreeForm/MarqueeView.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index b4778d3eb..5642c5a42 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -32,7 +32,7 @@ export default class SettingsManager extends React.Component<{}> { @observable private new_password = ""; @observable private new_confirm = ""; - @computed get backgroundColor() { return Doc.UserDoc().defaultColor; } + @computed get backgroundColor() { return Doc.UserDoc().activeCollectionBackground; } constructor(props: {}) { super(props); diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index c0b19fcd2..4e8c26e5d 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -719,14 +719,14 @@ export class MarqueeView extends React.Component; } else { - //subtracted 250 for offset + //subtracted for offset var str: string = ""; for (var i = 0; i < this._pointsX.length; i++) { var x = 0; - x = this._pointsX[i] - 250; + x = this._pointsX[i] - 64; str += x.toString(); str += ","; - str += this._pointsY[i].toString(); + str += (this._pointsY[i] - 85).toString(); str += (" "); } -- cgit v1.2.3-70-g09d2 From 5adf15574ac6423e09617b3d756d98ea8cdc75c5 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 17 Aug 2020 17:44:10 -0500 Subject: framework for web in top bar --- src/client/views/collections/CollectionMenu.scss | 51 ++++++++ src/client/views/collections/CollectionMenu.tsx | 156 +++++++++++++++++++++++ 2 files changed, 207 insertions(+) (limited to 'src') diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss index 8658212b7..9d23c8647 100644 --- a/src/client/views/collections/CollectionMenu.scss +++ b/src/client/views/collections/CollectionMenu.scss @@ -311,6 +311,57 @@ } } +.webBox-urlEditor { + position: relative; + opacity: 0.9; + z-index: 9001; + transition: top .5s; + + .urlEditor { + display: grid; + grid-template-columns: 1fr auto; + padding-bottom: 10px; + overflow: hidden; + margin-top: 5px; + height: 35px; + + .editorBase { + display: flex; + + .editor-collapse { + transition: all .5s, opacity 0.3s; + position: absolute; + width: 40px; + transform-origin: top left; + } + + .switchToText { + color: $main-accent; + } + + .switchToText:hover { + color: $dark-color; + } + } + + button:hover { + transform: scale(1); + } + } +} + +.webpage-urlInput { + padding: 12px 10px 11px 10px; + border: 0px; + color: grey; + letter-spacing: 2px; + outline-color: black; + background: rgb(238, 238, 238); + width: 100%; + margin-right: 10px; + height: 100%; +} + .collectionFreeFormMenu-cont { display: inline-flex; position: relative; diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 5119ff6c9..6fa907fc7 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -30,6 +30,7 @@ import { DocumentView } from "../nodes/DocumentView"; import RichTextMenu from "../nodes/formattedText/RichTextMenu"; import "./CollectionMenu.scss"; import { CollectionViewType, COLLECTION_BORDER_WIDTH } from "./CollectionView"; +import { WebField } from "../../../fields/URLField"; @observer export default class CollectionMenu extends AntimodeMenu { @@ -605,6 +606,158 @@ export class CollectionFreeFormViewChrome extends React.Component; } + @action + onUrlDrop = (e: React.DragEvent) => { + const { dataTransfer } = e; + const html = dataTransfer.getData("text/html"); + const uri = dataTransfer.getData("text/uri-list"); + const url = uri || html || this._url; + this._url = url.startsWith(window.location.origin) ? + url.replace(window.location.origin, this._url.match(/http[s]?:\/\/[^\/]*/)?.[0] || "") : url; + this.submitURL(); + e.stopPropagation(); + } + onUrlDragover = (e: React.DragEvent) => { + e.preventDefault(); + } + + @computed get _url() { + return this.selectedDoc ? Cast(this.selectedDoc["data"], WebField, null)?.url.toString() : "hello"; + } + + set _url(value) { this.selectedDoc && (this.selectedDoc["data"] = value); } + + @action + submitURL = () => { + if (!this._url.startsWith("http")) this._url = "http://" + this._url; + try { + const URLy = new URL(this._url); + const future = this.selectedDoc ? Cast(this.selectedDoc["data-future"], listSpec("string"), null) : null; + const history = this.selectedDoc ? Cast(this.selectedDoc["data-history"], listSpec("string"), null) : []; + const annos = this.selectedDoc ? DocListCast(this.selectedDoc["data-annotations"]) : undefined; + const url = this.selectedDoc ? Cast(this.selectedDoc["data"], WebField, null)?.url.toString() : null; + if (url) { + if (history === undefined) { + this.selectedDoc && (this.selectedDoc["data-history"] = new List([url])); + + } else { + history.push(url); + } + future && (future.length = 0); + this.selectedDoc && (this.selectedDoc["data-" + this.urlHash(url)] = new List(annos)); + } + this.selectedDoc && (this.selectedDoc["data"] = new WebField(URLy)); + this.selectedDoc && (this.selectedDoc["data-annotations"] = new List([])); + } catch (e) { + console.log("WebBox URL error:" + this._url); + } + } + + urlHash(s: string) { + return s.split('').reduce((a: any, b: any) => { a = ((a << 5) - a) + b.charCodeAt(0); return a & a; }, 0); + } + + toggleAnnotationMode = () => { + this.props.docView.layoutDoc.isAnnotating = !this.props.docView.layoutDoc.isAnnotating; + } + + @action + onURLChange = (e: React.ChangeEvent) => { + this._url = e.target.value; + } + + onValueKeyDown = async (e: React.KeyboardEvent) => { + if (e.key === "Enter") { + this.submitURL(); + } + e.stopPropagation(); + } + + @action + forward = () => { + const future = this.selectedDoc && (Cast(this.selectedDoc["data-future"], listSpec("string"), null)); + const history = this.selectedDoc && Cast(this.selectedDoc["data-history"], listSpec("string"), null); + if (future?.length) { + history?.push(this._url); + this.selectedDoc && (this.selectedDoc["data-annotations-" + this.urlHash(this._url)] = new List(DocListCast(this.selectedDoc["data-annotations"]))); + this.selectedDoc && (this.selectedDoc["data"] = new WebField(new URL(this._url = future.pop()!))); + this.selectedDoc && (this.selectedDoc["data-annotations"] = new List(DocListCast(this.selectedDoc["data-annotations" + "-" + this.urlHash(this._url)]))); + } + } + + @action + back = () => { + const future = this.selectedDoc && (Cast(this.selectedDoc["data-future"], listSpec("string"), null)); + const history = this.selectedDoc && Cast(this.selectedDoc["data-history"], listSpec("string"), null); + if (history?.length) { + if (future === undefined) this.selectedDoc && (this.selectedDoc["data-future"] = new List([this._url])); + else future.push(this._url); + this.selectedDoc && (this.selectedDoc["data-annotations" + "-" + this.urlHash(this._url)] = new List(DocListCast(this.selectedDoc["data-annotations"]))); + this.selectedDoc && (this.selectedDoc["data"] = new WebField(new URL(this._url = history.pop()!))); + this.selectedDoc && (this.selectedDoc["data-annotations"] = new List(DocListCast(this.selectedDoc["data-annotations" + "-" + this.urlHash(this._url)]))); + } + } + + private _keyInput = React.createRef(); + + @computed get urlEditor() { + return ( +
+
+
+
+
+ +
+
+ +
+ { + this._keyInput.current!.select(); + e.stopPropagation(); + }} + ref={this._keyInput} + /> +
+ + + +
+
+
+
+
+ ); + } + + @observable viewType = this.selectedDoc?._viewType; render() { @@ -646,6 +799,9 @@ export class CollectionFreeFormViewChrome extends React.Component } + {/* {!this.props.isOverlay || this.document.type !== DocumentType.WEB || this.isText || this.props.isDoc ? (null) : + this.urlEditor + } */} {!this.isText ? <> {this.drawButtons} -- cgit v1.2.3-70-g09d2 From 40971c01df7063073dfe3a5240da5053e094b45d Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Wed, 19 Aug 2020 00:25:15 -0500 Subject: fixed link label cut off --- .../CollectionSchemaMovableTableHOC.tsx | 11 +++++++++++ src/client/views/nodes/DocumentLinksButton.tsx | 23 +++++++++++++++++++--- src/client/views/nodes/DocumentView.tsx | 10 ++++++++++ 3 files changed, 41 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx b/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx index 37e6c115d..e14cd1f4c 100644 --- a/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx +++ b/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx @@ -14,6 +14,8 @@ import { DocumentManager } from "../../util/DocumentManager"; import { SchemaHeaderField } from "../../../fields/SchemaHeaderField"; import { undoBatch } from "../../util/UndoManager"; import { SnappingManager } from "../../util/SnappingManager"; +import { SelectionManager } from "../../util/SelectionManager"; +import { DocumentView } from "../nodes/DocumentView"; library.add(faGripVertical, faTrash); @@ -226,12 +228,21 @@ export class MovableRow extends React.Component { render() { const { children = null, rowInfo } = this.props; + if (!rowInfo) { return {children}; } const { original } = rowInfo; const doc = FieldValue(Cast(original, Doc)); + if (doc) { + const docView = DocumentManager.Instance.getDocumentViews(doc); + + if (this.props.rowFocused && docView.length) { + SelectionManager.SelectDoc(docView[0], false); + } + } + if (!doc) return <>; const reference = React.createRef(); diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index cf8645e4c..70e7d8311 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -129,9 +129,15 @@ export class DocumentLinksButton extends React.Component rect.width) { + LinkDescriptionPopup.popupX -= 190; + TaskCompletionBox.popupX -= 40; + } + if (LinkDescriptionPopup.popupY + 100 > rect.height) { + LinkDescriptionPopup.popupY -= 40; + TaskCompletionBox.popupY -= 40; + } setTimeout(action(() => TaskCompletionBox.taskCompleted = false), 2500); } @@ -176,6 +182,17 @@ export class DocumentLinksButton extends React.Component rect.width) { + LinkDescriptionPopup.popupX -= 190; + TaskCompletionBox.popupX -= 40; + } + if (LinkDescriptionPopup.popupY + 100 > rect.height) { + LinkDescriptionPopup.popupY -= 40; + TaskCompletionBox.popupY -= 40; + } + setTimeout(action(() => { TaskCompletionBox.taskCompleted = false; }), 2500); } } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index b5d210b4d..f0b6e0ccb 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -617,6 +617,16 @@ export class DocumentView extends DocComponent(Docu LinkDescriptionPopup.popupY = de.y; LinkDescriptionPopup.descriptionPopup = true; + const rect = document.body.getBoundingClientRect(); + if (LinkDescriptionPopup.popupX + 200 > rect.width) { + LinkDescriptionPopup.popupX -= 190; + TaskCompletionBox.popupX -= 40; + } + if (LinkDescriptionPopup.popupY + 100 > rect.height) { + LinkDescriptionPopup.popupY -= 40; + TaskCompletionBox.popupY -= 40; + } + setTimeout(action(() => TaskCompletionBox.taskCompleted = false), 2500); }); if (de.complete.annoDragData) { -- cgit v1.2.3-70-g09d2 From ddbc5966801750fbf580d8f419263cc901dcc6f4 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 19 Aug 2020 09:02:53 -0400 Subject: re-added row controls for Schema view --- .../CollectionSchemaMovableTableHOC.tsx | 37 ++++++++-------------- 1 file changed, 14 insertions(+), 23 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx b/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx index e14cd1f4c..6761e5a2a 100644 --- a/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx +++ b/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx @@ -1,21 +1,19 @@ import React = require("react"); -import { ReactTableDefaults, TableCellRenderer, RowInfo } from "react-table"; -import "./CollectionSchemaView.scss"; -import { Transform } from "../../util/Transform"; -import { Doc } from "../../../fields/Doc"; -import { DragManager, SetupDrag, dropActionType } from "../../util/DragManager"; -import { Cast, FieldValue, StrCast } from "../../../fields/Types"; -import { ContextMenu } from "../ContextMenu"; -import { action } from "mobx"; import { library } from '@fortawesome/fontawesome-svg-core'; import { faGripVertical, faTrash } from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { DocumentManager } from "../../util/DocumentManager"; +import { action } from "mobx"; +import { ReactTableDefaults, RowInfo, TableCellRenderer } from "react-table"; +import { Doc } from "../../../fields/Doc"; import { SchemaHeaderField } from "../../../fields/SchemaHeaderField"; -import { undoBatch } from "../../util/UndoManager"; +import { Cast, FieldValue, StrCast } from "../../../fields/Types"; +import { DocumentManager } from "../../util/DocumentManager"; +import { DragManager, dropActionType, SetupDrag } from "../../util/DragManager"; import { SnappingManager } from "../../util/SnappingManager"; -import { SelectionManager } from "../../util/SelectionManager"; -import { DocumentView } from "../nodes/DocumentView"; +import { Transform } from "../../util/Transform"; +import { undoBatch } from "../../util/UndoManager"; +import { ContextMenu } from "../ContextMenu"; +import "./CollectionSchemaView.scss"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; library.add(faGripVertical, faTrash); @@ -235,15 +233,8 @@ export class MovableRow extends React.Component { const { original } = rowInfo; const doc = FieldValue(Cast(original, Doc)); - if (doc) { - const docView = DocumentManager.Instance.getDocumentViews(doc); - - if (this.props.rowFocused && docView.length) { - SelectionManager.SelectDoc(docView[0], false); - } - } - if (!doc) return <>; + if (!doc) return (null); const reference = React.createRef(); const onItemDown = SetupDrag(reference, () => doc, this.move, StrCast(this.props.dropAction) as dropActionType); @@ -256,11 +247,11 @@ export class MovableRow extends React.Component {
- {/*
+
this.props.removeDoc(this.props.rowInfo.original))}>
this.props.addDocTab(this.props.rowInfo.original, "onRight")}>
-
*/} +
{children}
-- cgit v1.2.3-70-g09d2