From 94137cb3a771ec6afd803f3cff97da86a14dd54f Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Fri, 26 Jun 2020 01:46:52 +0530 Subject: background colour + comments --- .../collectionGrid/CollectionGridView.scss | 3 +- .../collectionGrid/CollectionGridView.tsx | 41 +++++++++++++++++++++- 2 files changed, 41 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss index 9c2d5cbff..4d8473be9 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.scss +++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss @@ -8,7 +8,6 @@ .collectionGridView-gridContainer { height: 100%; overflow-y: auto; - background-color: white; overflow-x: hidden; display: flex; @@ -22,7 +21,7 @@ } .react-grid-layout { - width : 100%; + width: 100%; } .react-grid-item>.react-resizable-handle { diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index 2015ca930..72577e921 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -47,6 +47,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { @computed get flexGrid() { return BoolCast(this.props.Document.gridFlex, true); } // is grid static/flexible i.e. whether nodes be moved around and resized @computed get compaction() { return StrCast(this.props.Document.gridStartCompaction, StrCast(this.props.Document.gridCompaction, "vertical")); } // is grid static/flexible i.e. whether nodes be moved around and resized + /** + * Sets up the listeners for the list of documents and the reset button. + */ componentDidMount() { this._changeListenerDisposer = reaction(() => this.childLayoutPairs, (pairs) => { const newLayouts: Layout[] = []; @@ -68,11 +71,18 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { }); } + /** + * Disposes the listeners. + */ componentWillUnmount() { this._changeListenerDisposer?.(); this._resetListenerDisposer?.(); } + /** + * @returns the default location of the grid node (i.e. when the grid is static) + * @param index + */ unflexedPosition(index: number): Omit { return { x: (index % Math.floor(this.numCols / this.defaultW)) * this.defaultW, @@ -83,6 +93,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { }; } + /** + * Maps the x- and y- coordinates of the event to a grid cell. + */ screenToCell(sx: number, sy: number) { const pt = this.props.ScreenToLocalTransform().transformPoint(sx, sy); const x = Math.floor(pt[0] / this.colWidthPlusGap); @@ -90,10 +103,16 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { return { x, y }; } + /** + * Creates a layout object for a grid item + */ makeLayoutItem = (doc: Doc, pos: { x: number, y: number }, Static: boolean = false, w: number = this.defaultW, h: number = this.defaultH) => { return ({ i: doc[Id], w, h, x: pos.x, y: pos.y, static: Static }); } + /** + * Adds a layout to the list of layouts. + */ addLayoutItem = (layouts: Layout[], layout: Layout) => { const f = layouts.findIndex(l => l.i === layout.i); f !== -1 && layouts.splice(f, 1); @@ -215,6 +234,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { this.savedLayoutList.map((layout, index) => Object.assign(layout, this.unflexedPosition(index))); } + /** + * Handles internal drop of Dash documents. + */ @action onInternalDrop = (e: Event, de: DragManager.DropEvent) => { const savedLayouts = this.savedLayoutList; @@ -227,6 +249,16 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { return false; } + /** + * Handles external drop of images/PDFs etc from outside Dash. + */ + @action + onExternalDrop = async (e: React.DragEvent): Promise => { + const where = this.screenToCell(e.clientX, e.clientY); + super.onExternalDrop(e, { x: where.x, y: where.y }); + + } + /** * Handles the change in the value of the rowHeight slider. */ @@ -234,6 +266,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { onSliderChange = (event: React.ChangeEvent) => { this._rowHeight = event.currentTarget.valueAsNumber; } + /** + * Handles the user clicking on the slider. + */ @action onSliderDown = (e: React.PointerEvent) => { this._rowHeight = this.rowHeight; // uses _rowHeight during dragging and sets doc's rowHeight when finished so that operation is undoable @@ -253,6 +288,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { ContextMenu.Instance.addItem({ description: "Display", subitems: displayOptionsMenu, icon: "tv" }); } + /** + * Handles text document creation on double click. + */ onPointerDown = (e: React.PointerEvent) => { if (this.props.active(true)) { setupMoveUpEvents(this, e, returnFalse, returnFalse, @@ -276,8 +314,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
this.onPointerDown(e)} > + onPointerDown={e => this.onPointerDown(e)}>
e.stopPropagation()} onScroll={action(e => { if (!this.props.isSelected()) e.currentTarget.scrollTop = this._scroll; -- cgit v1.2.3-70-g09d2 From 7c93a65535a278dd1381b27fbd4c3869eed19527 Mon Sep 17 00:00:00 2001 From: yunahi <60233430+yunahi@users.noreply.github.com> Date: Fri, 3 Jul 2020 20:22:52 +0900 Subject: pin and icon --- src/client/views/AntimodeMenu.tsx | 7 +- src/client/views/GestureOverlay.tsx | 10 +- src/client/views/MainView.tsx | 11 +- .../collectionFreeForm/InkOptionsMenu.scss | 5 + .../collectionFreeForm/InkOptionsMenu.tsx | 267 ++++++++++++++------- 5 files changed, 202 insertions(+), 98 deletions(-) (limited to 'src') diff --git a/src/client/views/AntimodeMenu.tsx b/src/client/views/AntimodeMenu.tsx index 3e4d20fea..d83ac434c 100644 --- a/src/client/views/AntimodeMenu.tsx +++ b/src/client/views/AntimodeMenu.tsx @@ -137,13 +137,18 @@ export default abstract class AntimodeMenu extends React.Component { protected getElement(buttons: JSX.Element[]) { return (
+ style={{ + left: this._left, top: this._top, opacity: this._opacity, transitionProperty: this._transitionProperty, transitionDuration: this._transitionDuration, transitionDelay: this._transitionDelay, + position: this.Pinned ? "unset" : undefined + }}>
{buttons}
); } + + protected getElementWithRows(rows: JSX.Element[], numRows: number, hasDragger: boolean = true) { return (
{ @@ -885,7 +891,9 @@ export default class GestureOverlay extends Touchable { render() { return ( -
+ +
{this.showMobileInkOverlay ? : <>} {this.elements} diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 8f5a31b6c..afdff4ed8 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -453,10 +453,12 @@ export class MainView extends React.Component { @computed get mainContent() { const sidebar = this.userDoc?.["tabs-panelContainer"]; + console.log(InkOptionsMenu.Instance?.Pinned); return !this.userDoc || !(sidebar instanceof Doc) ? (null) : (
@@ -593,7 +595,10 @@ export class MainView extends React.Component { - + + + + {this.mainContent} @@ -606,7 +611,7 @@ export class MainView extends React.Component { - + {this.snapLines} diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss index a9fab4c1e..7329f4fc1 100644 --- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss +++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss @@ -26,6 +26,11 @@ /* Make the buttons appear below each other */ } +.btn-draw { + display: inline; + /* Make the buttons appear below each other */ +} + .btn2-group { display: block; background: #323232; diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx index f1032adaa..7de70b8cd 100644 --- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx +++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx @@ -17,6 +17,7 @@ import { DocumentType } from "../../../documents/DocumentTypes"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { IconProp, library } from '@fortawesome/fontawesome-svg-core'; import { faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSubscript, faSuperscript, faIndent, faEyeDropper, faCaretDown, faPalette, faArrowsAlt, faHighlighter, faLink, faPaintRoller, faSleigh, faBars, faFillDrip, faBrush, faPenNib, faShapes, faArrowLeft, faEllipsisH, faBezierCurve, } from "@fortawesome/free-solid-svg-icons"; +import { Cast, StrCast, BoolCast } from "../../../../fields/Types"; library.add(faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper, faCaretDown, faPalette, faArrowsAlt, faHighlighter, faLink, faPaintRoller, faBars, faFillDrip, faBrush, faPenNib, faShapes, faArrowLeft, faEllipsisH, faBezierCurve); @@ -28,36 +29,67 @@ export default class InkOptionsMenu extends AntimodeMenu { private _width = ["1", "5", "10", "100"]; // private _buttons = ["circle", "triangle", "rectangle", "arrow", "line"]; // private _icons = ["O", "∆", "ロ", "➜", "-"]; - private _buttons = ["circle", "triangle", "rectangle", "line", "noRec", "",]; - private _icons = ["O", "∆", "ロ", "⎯", "✖︎", " "]; + // private _buttons = ["circle", "triangle", "rectangle", "line", "noRec", "",]; + // private _icons = ["O", "∆", "ロ", "⎯⎯⎯", "✖︎", " "]; //arrowStart and arrowEnd must match and defs must exist in Inking Stroke - private _arrowStart = ["arrowHead", "arrowHead", "dot", "dot", "none"]; - private _arrowEnd = ["none", "arrowEnd", "none", "dot", "none"]; - private _arrowIcons = ["→", "↔︎", "•", "••", " "]; + // private _arrowStart = ["arrowHead", "arrowHead", "dot", "dot", "none"]; + // private _arrowEnd = ["none", "arrowEnd", "none", "dot", "none"]; + // private _arrowIcons = ["→", "↔︎", "•", "••", " "]; + private _draw = ["⎯", "→", "↔︎", "∿", "↝", "↭", "ロ", "O", "∆"]; + private _head = ["none", "arrowHead", "arrowHead", "none", "arrowHead", "arrowHead", "none", "none", "none"]; + private _end = ["none", "none", "arrowEnd", "none", "none", "arrowEnd", "none", "none", "none"]; + private _shape = ["", "", "", "", "", "", "rectangle", "circle", "triangle"]; + + @observable _shapesNum = this._shape.length; + @observable _selected = this._shapesNum; + + @observable private collapsed: boolean = false; @observable _colorBtn = false; @observable _widthBtn = false; @observable _fillBtn = false; - @observable _arrowBtn = false; - @observable _dashBtn = false; - @observable _shapeBtn = false; + // @observable _arrowBtn = false; + // @observable _dashBtn = false; + // @observable _shapeBtn = false; constructor(props: Readonly<{}>) { super(props); InkOptionsMenu.Instance = this; this._canFade = false; // don't let the inking menu fade away + this.Pinned = BoolCast(Doc.UserDoc()["inkOptionsMenu-pinned"]); + } - getColors = () => { - return this._palette; + @action + toggleMenuPin = (e: React.MouseEvent) => { + Doc.UserDoc()["inkOptionsMenu-pinned"] = this.Pinned = !this.Pinned; + if (!this.Pinned) { + // this.fadeOut(true); + } } @action - changeArrow = (arrowStart: string, arrowEnd: string) => { - SetActiveArrowStart(arrowStart); - SetActiveArrowEnd(arrowEnd); + protected toggleCollapse = (e: React.MouseEvent) => { + this.collapsed = !this.collapsed; + setTimeout(() => { + const x = Math.min(this._left, window.innerWidth - InkOptionsMenu.Instance.width); + InkOptionsMenu.Instance.jumpTo(x, this._top, true); + }, 0); + } + + + + + getColors = () => { + return this._palette; } + // @action + // changeArrow = (arrowStart: string, arrowEnd: string) => { + // SetActiveArrowStart(arrowStart); + // SetActiveArrowEnd(arrowEnd); + // } + @action changeColor = (color: string, type: string) => { const col: ColorState = { @@ -116,40 +148,77 @@ export default class InkOptionsMenu extends AntimodeMenu { this.editProperties(ActiveDash(), "dash"); } - @computed get arrowPicker() { - var currIcon; - for (var i = 0; i < this._arrowStart.length; i++) { - if (this._arrowStart[i] === ActiveArrowStart() && this._arrowEnd[i] === ActiveArrowEnd()) { - currIcon = this._arrowIcons[i]; - if (this._arrowIcons[i] === " ") { - currIcon = "➤"; - } - } - } - var arrowPicker = ; - if (this._arrowBtn) { - arrowPicker =
- {arrowPicker} - {this._arrowStart.map((arrowStart, i) => { - return ; - })} -
; - } - return arrowPicker; + @computed get drawButtons() { + const drawButtons =
+ {this._draw.map((icon, i) => { + return ; + })}
; + return drawButtons; } + // @computed get arrowPicker() { + // var currIcon; + // for (var i = 0; i < this._arrowStart.length; i++) { + // if (this._arrowStart[i] === ActiveArrowStart() && this._arrowEnd[i] === ActiveArrowEnd()) { + // currIcon = this._arrowIcons[i]; + // if (this._arrowIcons[i] === " ") { + // currIcon = "➤"; + // } + // } + // } + // var arrowPicker = ; + // if (this._arrowBtn) { + // arrowPicker =
+ // {arrowPicker} + // {this._arrowStart.map((arrowStart, i) => { + // return ; + // })} + //
; + // } + // return arrowPicker; + // } + @computed get widthPicker() { var widthPicker = ; - if (this._shapeBtn) { - shapePicker =
- {shapePicker} - {this._buttons.map((btn, i) => { - var ttl = btn; - if (btn === "") { - ttl = "no shape"; - } - if (btn === "noRec") { - ttl = "disable shape recognition"; - } - return ; - })} -
; - } - return shapePicker; - } + // @computed get shapePicker() { + // var currIcon; + // if (GestureOverlay.Instance.InkShape === "") { + // currIcon = ; + // } else { + // for (var i = 0; i < this._icons.length; i++) { + // if (GestureOverlay.Instance.InkShape === this._buttons[i]) { + // currIcon = this._icons[i]; + // } + // } + // } + // var shapePicker = ; + // if (this._shapeBtn) { + // shapePicker =
+ // {shapePicker} + // {this._buttons.map((btn, i) => { + // var ttl = btn; + // if (btn === "") { + // ttl = "no shape"; + // } + // if (btn === "noRec") { + // ttl = "disable shape recognition"; + // } + // return ; + // })} + //
; + // } + // return shapePicker; + // } @computed get bezierButton() { return , - this.shapePicker, - this.bezierButton, + // this.shapePicker, + // this.bezierButton, this.widthPicker, this.colorPicker, this.fillPicker, - this.arrowPicker, - this.dashButton, + this.drawButtons, + // this.arrowPicker, + // this.dashButton, + + ]; + + // return this.getElement(buttons); return this.getElement(buttons); } } Scripting.addGlobal(function activatePen(penBtn: any) { if (penBtn) { - Doc.SetSelectedTool(InkTool.Pen); + //no longer changes to inkmode + // Doc.SetSelectedTool(InkTool.Pen); InkOptionsMenu.Instance.jumpTo(300, 300); + InkOptionsMenu.Instance.Pinned = true; + } else { - Doc.SetSelectedTool(InkTool.None); + // Doc.SetSelectedTool(InkTool.None); + InkOptionsMenu.Instance.Pinned = false; InkOptionsMenu.Instance.fadeOut(true); + } }); \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 2b4ed09af493de86ecbd5faab83845106e7eb4e8 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Tue, 7 Jul 2020 10:20:00 -0400 Subject: fixed potential infinite loop in richtextmenu --- src/client/views/nodes/formattedText/RichTextMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx index 9075a6486..f10c425d4 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.tsx +++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx @@ -219,7 +219,7 @@ export default class RichTextMenu extends AntimodeMenu { getActiveAlignment() { if (this.view) { const path = (this.view.state.selection.$from as any).path; - for (let i = path.length - 3; i < path.length; i -= 3) { + for (let i = path.length - 3; i < path.length && i >= 0; i -= 3) { if (path[i]?.type === this.view.state.schema.nodes.paragraph) { return path[i].attrs.align || "left"; } -- cgit v1.2.3-70-g09d2 From 92aaf350e7b1baebd681eaeafa2a11c104f0708a Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Tue, 7 Jul 2020 10:32:14 -0400 Subject: fixed hypothesis icon --- src/client/util/CurrentUserUtils.ts | 2 +- src/client/views/MainView.tsx | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 9f04aab04..8099228c6 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -424,7 +424,7 @@ export class CurrentUserUtils { { title: "Drag a document previewer", label: "Prev", icon: "expand", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory,true)', dragFactory: doc.emptyDocHolder as Doc }, { title: "Toggle a Calculator REPL", label: "repl", icon: "calculator", click: 'addOverlayWindow("ScriptingRepl", { x: 300, y: 100, width: 200, height: 200, title: "Scripting REPL" })' }, { title: "Connect a Google Account", label: "Google Account", icon: "external-link-alt", click: 'GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken(true)' }, - { title: "Connect a Hypothesis Account", label: "Hypothesis Account", icon: "houzz", click: 'HypothesisAuthenticationManager.Instance.fetchOrGenerateAccessToken(true)' }, + { title: "Connect a Hypothesis Account", label: "Hypothesis Account", icon: "heading", click: 'HypothesisAuthenticationManager.Instance.fetchOrGenerateAccessToken(true)' }, ]; } diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 584ed2f1c..81195b550 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -5,7 +5,8 @@ import { 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, faTimesCircle, - faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight + faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight, + faHeading } from '@fortawesome/free-solid-svg-icons'; import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -145,7 +146,8 @@ export class MainView extends React.Component { 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, - faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight); + faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight, + faHeading); this.initEventListeners(); this.initAuthenticationRouters(); } -- cgit v1.2.3-70-g09d2 From 3f704ee2941fef77dd0eafebeb0a6ffb0a946a8b Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Tue, 7 Jul 2020 12:04:21 -0400 Subject: fixes for audio document linkiing --- src/client/documents/Documents.ts | 2 +- src/client/views/nodes/AudioBox.scss | 1 + src/client/views/nodes/AudioBox.tsx | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index ad62169ab..fa85d58f0 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -906,7 +906,7 @@ export namespace DocUtils { export let ActiveRecordings: Doc[] = []; export function MakeLinkToActiveAudio(doc: Doc) { - DocUtils.ActiveRecordings.map(d => DocUtils.MakeLink({ doc: doc }, { doc: d }, "audio link", "", "audio timeline")); + DocUtils.ActiveRecordings.map(d => DocUtils.MakeLink({ doc: doc }, { doc: d }, "audio link", "audio timeline")); } export function MakeLink(source: { doc: Doc }, target: { doc: Doc }, linkRelationship: string = "", description: string = "", id?: string) { diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index c959b79f5..e9420a072 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -5,6 +5,7 @@ position: inherit; display: flex; pointer-events: all; + position: relative; cursor: default; .audiobox-buttons { diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index d5288fff6..5c921cea4 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -268,6 +268,7 @@ export class AudioBox extends ViewBoxBaseComponent -- cgit v1.2.3-70-g09d2 From c3a147995564a10ae7650330aa11bbbb4fabdfda Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Tue, 7 Jul 2020 15:08:21 -0500 Subject: UI change to menu --- src/client/views/linking/LinkMenu.scss | 35 +++++++++++++++--------------- src/client/views/linking/LinkMenu.tsx | 11 +++++++++- src/client/views/linking/LinkMenuItem.scss | 10 ++++++++- 3 files changed, 36 insertions(+), 20 deletions(-) (limited to 'src') diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss index 4b1a3f425..10a24c5ca 100644 --- a/src/client/views/linking/LinkMenu.scss +++ b/src/client/views/linking/LinkMenu.scss @@ -5,35 +5,34 @@ height: auto; //border: 1px solid black; - &:hover { - width: calc(auto + 26px); - } + // &:hover { + // width: calc(auto + 26px); + // } } .linkMenu-list { border: 1px solid black; - max-height: 200px; - overflow-y: scroll; + max-height: 170px; + //overflow-y: scroll; position: absolute; z-index: 10; background: white; min-width: 150px; - border-radius: 5px; - padding-top: 6.5px; - padding-bottom: 6.5px; - padding-left: 6.5px; - padding-right: 2px; - //width: calc(auto + 50px); -} - -.linkMenu-group { - //border-bottom: 0.5px solid lightgray; - //@extend: 5px 0; - + //border-radius: 5px; + //padding-top: 6.5px; + //padding-bottom: 6.5px; + //padding-left: 6.5px; + //padding-right: 2px; + width: calc(auto + 50px); &:last-child { border-bottom: none; } +} + +.linkMenu-group { + border-bottom: 0.5px solid lightgray; + //@extend: 5px 0; .linkMenu-group-name { display: flex; @@ -56,7 +55,7 @@ p { width: 100%; - padding: 4px 6px; + //padding: 4px 6px; line-height: 12px; border-radius: 5px; font-weight: bold; diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx index 8a7b12f48..064c24f7a 100644 --- a/src/client/views/linking/LinkMenu.tsx +++ b/src/client/views/linking/LinkMenu.tsx @@ -29,6 +29,8 @@ export class LinkMenu extends React.Component { @observable private _linkMenuRef = React.createRef(); private _editorRef = React.createRef(); + @observable private _numLinks: number = 0; + @action onClick = (e: PointerEvent) => { @@ -69,6 +71,9 @@ export class LinkMenu extends React.Component { showEditor={action((linkDoc: Doc) => this._editingLink = linkDoc)} addDocTab={this.props.addDocTab} /> ); + group.forEach((item) => { + this._numLinks++; + }); }); // if source doc has no links push message @@ -77,12 +82,16 @@ export class LinkMenu extends React.Component { return linkItems; } + @action render() { const sourceDoc = this.props.docView.props.Document; const groups: Map = LinkManager.Instance.getRelatedGroupedLinks(sourceDoc); return
+ style={{ + left: this.props.location[0], top: this.props.location[1], + overflowY: this._numLinks > 4 ? "scroll" : "auto" + }}> {!this._editingLink ? this.renderAllGroups(groups) : Date: Tue, 7 Jul 2020 17:54:33 -0500 Subject: adding apply for descriptions, author, creation date --- package.json | 2 +- src/client/views/linking/LinkEditor.scss | 83 +++++++++++++++++++++++------- src/client/views/linking/LinkEditor.tsx | 68 +++++++++++++++++++----- src/client/views/linking/LinkMenu.scss | 13 ++++- src/client/views/linking/LinkMenu.tsx | 17 +++--- src/client/views/linking/LinkMenuItem.scss | 2 +- src/client/views/linking/LinkMenuItem.tsx | 3 ++ 7 files changed, 144 insertions(+), 44 deletions(-) (limited to 'src') diff --git a/package.json b/package.json index 62a554355..5a6c6f0b1 100644 --- a/package.json +++ b/package.json @@ -249,4 +249,4 @@ "xoauth2": "^1.2.0", "xregexp": "^4.3.0" } -} \ No newline at end of file +} diff --git a/src/client/views/linking/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss index 406a38c26..937427e46 100644 --- a/src/client/views/linking/LinkEditor.scss +++ b/src/client/views/linking/LinkEditor.scss @@ -3,12 +3,12 @@ .linkEditor { width: 100%; height: auto; - font-size: 12px; // TODO + font-size: 13px; // TODO user-select: none; } .linkEditor-button-back { - margin-bottom: 6px; + //margin-bottom: 6px; border-radius: 10px; width: 18px; height: 18px; @@ -17,12 +17,13 @@ .linkEditor-info { //border-bottom: 0.5px solid $light-color-secondary; - padding-bottom: 4px; + //padding-bottom: 1px; padding-top: 5px; padding-left: 5px; //margin-bottom: 6px; display: flex; justify-content: space-between; + color: black; .linkEditor-linkedTo { width: calc(100% - 26px); @@ -31,30 +32,65 @@ } } +.linkEditor-moreInfo { + margin-left: 12px; + padding-left: 13px; + padding-right: 6.5px; + padding-bottom: 4px; + font-size: 9px; + //font-style: italic; + text-decoration-color: grey; +} + .linkEditor-description { padding-left: 6.5px; padding-right: 6.5px; padding-bottom: 3.5px; - .linkEditor-description-text { - text-decoration-color: grey; + .linkEditor-description-label { + text-decoration-color: black; + color: black; } .linkEditor-description-input { - border: 1px solid grey; - border-radius: 4px; - background-color: rgb(236, 236, 236); - padding-left: 2px; - padding-right: 2px; - color: grey; - text-decoration-color: grey; + display: flex; + + .linkEditor-description-editing { + min-width: 85%; + //border: 1px solid grey; + //border-radius: 4px; + padding-left: 2px; + padding-right: 2px; + margin-right: 4px; + color: black; + text-decoration-color: grey; + } + + .linkEditor-description-add-button { + display: inline; + /* float: right; */ + border-radius: 9px; + font-size: 9px; + background-color: black; + /* padding: 3px; */ + padding-top: 4px; + padding-left: 3px; + padding-bottom: 4px; + padding-right: 5px; + height: 80%; + color: white; + } } } .linkEditor-followingDropdown { padding-left: 6.5px; padding-right: 6.5px; - padding-bottom: 3.5px; + padding-bottom: 6px; + + .linkEditor-followingDropdown-label { + color: black; + } .linkEditor-followingDropdown-dropdown { @@ -62,11 +98,11 @@ border: 1px solid grey; border-radius: 4px; - background-color: rgb(236, 236, 236); + //background-color: rgb(236, 236, 236); padding-left: 2px; padding-right: 2px; - color: grey; - text-decoration-color: grey; + text-decoration-color: black; + color: black; .linkEditor-followingDropdown-icon { float: right; @@ -77,17 +113,22 @@ padding-left: 3px; padding-right: 3px; + &:last-child { + border-bottom: none; + } + .linkEditor-followingDropdown-option { - border: 0.25px dotted grey; - background-color: rgb(236, 236, 236); + border: 0.25px solid grey; + //background-color: rgb(236, 236, 236); padding-left: 2px; padding-right: 2px; color: grey; text-decoration-color: grey; font-size: 9px; + border-top: none; &:hover { - background-color: rgb(211, 210, 210); + background-color: rgb(187, 220, 231); } } @@ -98,6 +139,10 @@ } + + + + .linkEditor-button, .linkEditor-addbutton { width: 18px; diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx index 014d57ed0..7af11bca1 100644 --- a/src/client/views/linking/LinkEditor.tsx +++ b/src/client/views/linking/LinkEditor.tsx @@ -1,10 +1,10 @@ import { library } from "@fortawesome/fontawesome-svg-core"; import { faArrowLeft, faCog, faEllipsisV, faExchangeAlt, faPlus, faTable, faTimes, faTrash } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { action, observable, computed } from "mobx"; +import { action, observable, computed, toJS } from "mobx"; import { observer } from "mobx-react"; import { Doc, Opt } from "../../../fields/Doc"; -import { StrCast } from "../../../fields/Types"; +import { StrCast, DateCast } from "../../../fields/Types"; import { Utils } from "../../../Utils"; import { LinkManager } from "../../util/LinkManager"; import './LinkEditor.scss'; @@ -291,6 +291,10 @@ export class LinkEditor extends React.Component { @observable followBehavior = this.props.linkDoc.follow ? this.props.linkDoc.follow : "Default"; + @observable showInfo: boolean = false; + + @computed get infoIcon() { if (this.showInfo) { return "chevron-up"; } return "chevron-down"; } + //@observable description = this.props.linkDoc.description ? StrCast(this.props.linkDoc.description) : "DESCRIPTION"; @@ -308,19 +312,44 @@ export class LinkEditor extends React.Component { } } + @action + onKey = (e: React.KeyboardEvent) => { + if (e.key === "Enter") { + this.setDescripValue(this.description); + document.getElementById('input')?.blur(); + } + } + + @action + onDown = () => { + this.setDescripValue(this.description); + } + + @action + handleChange = (e: React.ChangeEvent) => { + this.description = e.target.value; + } + + @computed get editDescription() { return
- Link Description:
+ Link Label:
- StrCast(LinkManager.currentLink?.description)} - SetValue={value => { this.setDescripValue(value); return false; }} - contents={LinkManager.currentLink?.description} - placeholder={"(optional) enter link description"} - color={"rgb(88, 88, 88)"} - >
; +
+ +
+
Add
+
; } @action @@ -346,7 +375,7 @@ export class LinkEditor extends React.Component { {this.followBehavior} + size={"lg"} />
@@ -367,6 +396,11 @@ export class LinkEditor extends React.Component {
; } + @action + changeInfo = () => { + this.showInfo = !this.showInfo; + } + render() { const destination = LinkManager.Instance.getOppositeAnchor(this.props.linkDoc, this.props.sourceDoc); @@ -382,11 +416,17 @@ export class LinkEditor extends React.Component { style={{ display: this.props.hideback ? "none" : "" }} onClick={this.props.showLinks}> -

editing link to: { +

Editing Link to: { destination.proto?.title ?? destination.title ?? "untitled"}

- + {/* */} +
+ {this.showInfo ?
+
{this.props.linkDoc.author ?
Author: {this.props.linkDoc.author}
: null}
+
{this.props.linkDoc.creationDate ?
Creation Date: + {DateCast(this.props.linkDoc.creationDate).toString()}
: null}
+
: null}
{this.editDescription}
{this.followingDropdown}
diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss index 10a24c5ca..422ab0430 100644 --- a/src/client/views/linking/LinkMenu.scss +++ b/src/client/views/linking/LinkMenu.scss @@ -3,7 +3,8 @@ .linkMenu { width: 100%; height: auto; - //border: 1px solid black; + + border: 1px solid black; // &:hover { // width: calc(auto + 26px); @@ -11,9 +12,13 @@ } .linkMenu-list { + border: 1px solid black; + + box-shadow: 3px 3px 1.5px grey; + max-height: 170px; - //overflow-y: scroll; + overflow-y: scroll; position: absolute; z-index: 10; background: white; @@ -34,6 +39,10 @@ border-bottom: 0.5px solid lightgray; //@extend: 5px 0; + &:last-child { + border-bottom: none; + } + .linkMenu-group-name { display: flex; diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx index 064c24f7a..478ac3fe6 100644 --- a/src/client/views/linking/LinkMenu.tsx +++ b/src/client/views/linking/LinkMenu.tsx @@ -1,4 +1,4 @@ -import { action, observable } from "mobx"; +import { action, observable, computed } from "mobx"; import { observer } from "mobx-react"; import { DocumentView } from "../nodes/DocumentView"; import { LinkEditor } from "./LinkEditor"; @@ -29,7 +29,14 @@ export class LinkMenu extends React.Component { @observable private _linkMenuRef = React.createRef(); private _editorRef = React.createRef(); - @observable private _numLinks: number = 0; + //@observable private _numLinks: number = 0; + + // @computed get overflow() { + // if (this._numLinks) { + // return "scroll"; + // } + // return "auto"; + // } @action onClick = (e: PointerEvent) => { @@ -71,9 +78,6 @@ export class LinkMenu extends React.Component { showEditor={action((linkDoc: Doc) => this._editingLink = linkDoc)} addDocTab={this.props.addDocTab} /> ); - group.forEach((item) => { - this._numLinks++; - }); }); // if source doc has no links push message @@ -82,7 +86,6 @@ export class LinkMenu extends React.Component { return linkItems; } - @action render() { const sourceDoc = this.props.docView.props.Document; const groups: Map = LinkManager.Instance.getRelatedGroupedLinks(sourceDoc); @@ -90,7 +93,7 @@ export class LinkMenu extends React.Component {
4 ? "scroll" : "auto" + //overflowY: "scroll", }}> {!this._editingLink ? this.renderAllGroups(groups) : diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss index df8a3cadb..8578d0b75 100644 --- a/src/client/views/linking/LinkMenuItem.scss +++ b/src/client/views/linking/LinkMenuItem.scss @@ -103,7 +103,7 @@ width: 20px; height: 20px; margin: 0; - //margin-right: 6px; + margin-right: 4px; padding-right: 6px; border-radius: 50%; pointer-events: auto; diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index 6af474513..59a88a1d9 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -78,7 +78,10 @@ export class LinkMenuItem extends React.Component { @action toggleShowMore(e: React.PointerEvent) { e.stopPropagation(); this._showMore = !this._showMore; } onEdit = (e: React.PointerEvent): void => { + + console.log("Edit"); LinkManager.currentLink = this.props.linkDoc; + console.log(this.props.linkDoc); setupMoveUpEvents(this, e, this.editMoved, emptyFunction, () => this.props.showEditor(this.props.linkDoc)); } -- cgit v1.2.3-70-g09d2 From 2b1af3fab4cc51f8cbb577ed51842cec1774a355 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Wed, 8 Jul 2020 13:22:49 -0500 Subject: restructured textbox comment, cleaned menu UI --- src/client/views/linking/LinkEditor.scss | 15 ++-- src/client/views/linking/LinkEditor.tsx | 3 +- src/client/views/linking/LinkMenu.scss | 71 ++++++++++------ src/client/views/linking/LinkMenu.tsx | 18 ++-- src/client/views/linking/LinkMenuItem.scss | 29 ++++--- src/client/views/linking/LinkMenuItem.tsx | 10 ++- .../formattedText/FormattedTextBoxComment.scss | 99 +++++++++------------- .../formattedText/FormattedTextBoxComment.tsx | 53 +++--------- 8 files changed, 143 insertions(+), 155 deletions(-) (limited to 'src') diff --git a/src/client/views/linking/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss index 937427e46..87afc99eb 100644 --- a/src/client/views/linking/LinkEditor.scss +++ b/src/client/views/linking/LinkEditor.scss @@ -40,6 +40,10 @@ font-size: 9px; //font-style: italic; text-decoration-color: grey; + + .button { + color: black; + } } .linkEditor-description { @@ -61,7 +65,7 @@ //border-radius: 4px; padding-left: 2px; padding-right: 2px; - margin-right: 4px; + //margin-right: 4px; color: black; text-decoration-color: grey; } @@ -69,14 +73,14 @@ .linkEditor-description-add-button { display: inline; /* float: right; */ - border-radius: 9px; + border-radius: 7px; font-size: 9px; background-color: black; /* padding: 3px; */ padding-top: 4px; - padding-left: 3px; + padding-left: 7px; padding-bottom: 4px; - padding-right: 5px; + padding-right: 8px; height: 80%; color: white; } @@ -102,10 +106,11 @@ padding-left: 2px; padding-right: 2px; text-decoration-color: black; - color: black; + color: rgb(94, 94, 94); .linkEditor-followingDropdown-icon { float: right; + color: black; } } diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx index 7af11bca1..a26685318 100644 --- a/src/client/views/linking/LinkEditor.tsx +++ b/src/client/views/linking/LinkEditor.tsx @@ -339,6 +339,7 @@ export class LinkEditor extends React.Component {
{ destination.proto?.title ?? destination.title ?? "untitled"}

{/* */} - +
{this.showInfo ?
{this.props.linkDoc.author ?
Author: {this.props.linkDoc.author}
: null}
diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss index 422ab0430..4f7ac3275 100644 --- a/src/client/views/linking/LinkMenu.scss +++ b/src/client/views/linking/LinkMenu.scss @@ -1,37 +1,59 @@ @import "../globalCssVariables"; .linkMenu { - width: 100%; + width: auto; height: auto; - border: 1px solid black; - // &:hover { - // width: calc(auto + 26px); - // } -} + .linkMenu-list { -.linkMenu-list { + display: inline-block; - border: 1px solid black; + border: 1px solid black; - box-shadow: 3px 3px 1.5px grey; + box-shadow: 3px 3px 1.5px grey; - max-height: 170px; - overflow-y: scroll; - position: absolute; - z-index: 10; - background: white; - min-width: 150px; - //border-radius: 5px; - //padding-top: 6.5px; - //padding-bottom: 6.5px; - //padding-left: 6.5px; - //padding-right: 2px; - width: calc(auto + 50px); + max-height: 170px; + overflow-y: scroll; + position: relative; + z-index: 10; + background: white; + min-width: 170px; + //border-radius: 5px; + //padding-top: 6.5px; + //padding-bottom: 6.5px; + //padding-left: 6.5px; + //padding-right: 2px; + //width: calc(auto + 50px); - &:last-child { - border-bottom: none; + white-space: nowrap; + + overflow-x: hidden; + + &:last-child { + border-bottom: none; + } + + &:hover { + padding-right: 65px; + display: inline-block; + } + } + + .linkMenu-listEditor { + + display: inline-block; + + border: 1px solid black; + + box-shadow: 3px 3px 1.5px grey; + + max-height: 170px; + overflow-y: scroll; + position: relative; + z-index: 10; + background: white; + min-width: 170px; } } @@ -39,6 +61,7 @@ border-bottom: 0.5px solid lightgray; //@extend: 5px 0; + &:last-child { border-bottom: none; } @@ -54,7 +77,7 @@ } p.expand-one { - width: calc(100% + 26px); + width: calc(100% + 20px); } .linkEditor-tableButton { diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx index 478ac3fe6..234cd5e07 100644 --- a/src/client/views/linking/LinkMenu.tsx +++ b/src/client/views/linking/LinkMenu.tsx @@ -90,16 +90,16 @@ export class LinkMenu extends React.Component { const sourceDoc = this.props.docView.props.Document; const groups: Map = LinkManager.Instance.getRelatedGroupedLinks(sourceDoc); return
-
- {!this._editingLink ? - this.renderAllGroups(groups) : + {!this._editingLink ?
+ {this.renderAllGroups(groups)} +
:
this._editingLink = undefined)} /> - } -
; +
+ } + +
; } } \ No newline at end of file diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss index 8578d0b75..9f1f82ce2 100644 --- a/src/client/views/linking/LinkMenuItem.scss +++ b/src/client/views/linking/LinkMenuItem.scss @@ -26,6 +26,8 @@ color: rgb(85, 120, 196); font-size: 14px; padding-bottom: 2px; + padding-right: 4px; + margin-right: 4px; } .linkMenu-description { @@ -36,12 +38,16 @@ } p { - //padding: 4px 2px; + padding-right: 4px; line-height: 12px; border-radius: 5px; - overflow-wrap: break-word; + //overflow-wrap: break-word; user-select: none; } + + &:hover { + padding-right: 8px; + } } } @@ -60,6 +66,7 @@ &:hover { + width: calc(100% + 58px); .linkMenu-item-buttons { display: flex; @@ -74,19 +81,13 @@ text-overflow: break; } - &.expand-two p { - width: calc(100% - 52px); - //text-decoration: underline; - //color: rgb(15, 57, 148); - //background-color: lightgray; - } + // &.expand-two p { + // width: calc(100% - 63px); + // } - &.expand-three p { - width: calc(100% - 84px); - //text-decoration: underline; - //color: rgb(15, 57, 148); - //background-color: lightgray; - } + // &.expand-three p { + // width: calc(100% - 93px); + // } } } } diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index 59a88a1d9..57993d240 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, faPencilAlt } from '@fortawesome/free-solid-svg-icons'; +import { faArrowRight, faChevronDown, faChevronUp, faEdit, faEye, faTimes, faPencilAlt, faEyeSlash } 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, faPencilAlt); +library.add(faEye, faEdit, faTimes, faArrowRight, faChevronDown, faChevronUp, faPencilAlt, faEyeSlash); interface LinkMenuItemProps { @@ -179,6 +179,8 @@ export class LinkMenuItem extends React.Component { const keys = LinkManager.Instance.getMetadataKeysInGroup(this.props.groupType);//groupMetadataKeys.get(this.props.groupType); const canExpand = keys ? keys.length > 0 : false; + const eyeIcon = this.props.linkDoc.shown ? "eye-slash" : "eye"; + return (
@@ -203,6 +205,10 @@ export class LinkMenuItem extends React.Component { {canExpand ?
this.toggleShowMore(e)}>
: <>} +
+
+ +
diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss b/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss index 9089e7039..286ccf22d 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss +++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss @@ -8,6 +8,45 @@ margin-bottom: 7px; -webkit-transform: translateX(-50%); transform: translateX(-50%); + box-shadow: 3px 3px 1.5px grey; + + .FormattedTextBoxComment-title { + background-color: white; + border: 8px solid white; + + .FormattedTextBoxComment-button { + display: inline; + padding-left: 6px; + padding-right: 6px; + padding-top: 2.5px; + padding-bottom: 2.5px; + width: 20px; + height: 20px; + margin: 0; + margin-right: 6px; + border-radius: 50%; + pointer-events: auto; + background-color: rgb(0, 0, 0); + color: rgb(255, 255, 255); + transition: transform 0.2s; + text-align: center; + position: relative; + font: 10px; + + &:hover { + background-color: rgb(77, 77, 77); + cursor: grab; + } + } + + .FormattedTextBoxComment-preview-wrapper { + max-width: 180px; + max-height: 168px; + overflow: hidden; + overflow-y: hidden; + padding-top: 5px; + } + } } .FormattedTextBox-tooltip:before { @@ -42,64 +81,4 @@ top: 50%; right: 0; transform: translateY(-50%); - - .FormattedTextBoxComment-button { - width: 20px; - height: 20px; - margin: 0; - margin-right: 6px; - border-radius: 50%; - pointer-events: auto; - background-color: rgb(38, 40, 41); - color: rgb(178, 181, 184); - font-size: 65%; - transition: transform 0.2s; - text-align: center; - position: relative; - - // margin-top: "auto"; - // margin-bottom: "auto"; - // background: black; - // color: white; - // display: inline-block; - // border-radius: 18px; - // font-size: 12.5px; - // width: 18px; - // height: 18px; - // margin-top: auto; - // margin-bottom: auto; - // margin-right: 3px; - // cursor: pointer; - // transition: transform 0.2s; - - .FormattedTextBoxComment-fa-icon { - margin-top: "auto"; - margin-bottom: "auto"; - background: black; - color: white; - display: inline-block; - border-radius: 18px; - font-size: 12.5px; - width: 18px; - height: 18px; - margin-top: auto; - margin-bottom: auto; - margin-right: 3px; - cursor: pointer; - transition: transform 0.2s; - // 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 56826e5c7..79b09b374 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx @@ -241,52 +241,22 @@ export class FormattedTextBoxComment { } if (target?.author) { FormattedTextBoxComment.showCommentbox("", view, nbef); - const docPreview =
+ + + const docPreview =
{target.title}
-
this._deleteRef = r}> - this._deleteRef = r}> +
-
this._followRef = r}> - this._followRef = r}> +
-
@@ -318,6 +288,9 @@ export class FormattedTextBoxComment { />
; + + + FormattedTextBoxComment.showCommentbox("", view, nbef); ReactDOM.render(docPreview, FormattedTextBoxComment.tooltipText); -- cgit v1.2.3-70-g09d2 From 3beca8e7d268dc7b67b20b2c8760ea5e4b6fdb88 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Wed, 8 Jul 2020 18:59:37 -0500 Subject: added dashDragging event --- src/client/util/DragManager.ts | 48 ++++++++++++++++++++++ .../collectionFreeForm/CollectionFreeFormView.tsx | 15 +++++++ src/client/views/nodes/DocumentLinksButton.tsx | 2 +- 3 files changed, 64 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 2ceafff30..64c3d8458 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -427,6 +427,54 @@ export namespace DragManager { }, dragData.droppedDocuments); } + const target = document.elementFromPoint(e.x, e.y); + + const complete = new DragCompleteEvent(false, dragData); + + if (target) { + target.dispatchEvent( + new CustomEvent("dashDragging", { + bubbles: true, + detail: { + shiftKey: e.shiftKey, + altKey: e.altKey, + metaKey: e.metaKey, + ctrlKey: e.ctrlKey, + clientX: e.clientX, + clientY: e.clientY, + dataTransfer: new DataTransfer, + button: e.button, + buttons: e.buttons, + getModifierState: e.getModifierState, + movementX: e.movementX, + movementY: e.movementY, + pageX: e.pageX, + pageY: e.pageY, + relatedTarget: e.relatedTarget, + screenX: e.screenX, + screenY: e.screenY, + detail: e.detail, + view: e.view ? e.view : new Window, + nativeEvent: new DragEvent("dashDragging"), + currentTarget: target, + target: target, + bubbles: true, + cancelable: true, + defaultPrevented: true, + eventPhase: e.eventPhase, + isTrusted: true, + preventDefault: e.preventDefault, + isDefaultPrevented: () => true, + stopPropagation: e.stopPropagation, + isPropagationStopped: () => true, + persist: emptyFunction, + timeStamp: e.timeStamp, + type: "dashDragging" + } + }) + ); + } + const { thisX, thisY } = snapDrag(e, xFromLeft, yFromTop, xFromRight, yFromBottom); const moveX = thisX - lastX; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 9bf425db2..5a762a85c 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1143,10 +1143,19 @@ export class CollectionFreeFormView extends CollectionSubView this.doLayoutComputation, (elements) => this._layoutElements = elements || [], { fireImmediately: true, name: "doLayout" }); + + const handler = (e: Event) => this.handleDragging(e, (e as CustomEvent).detail); + + document.addEventListener("dashDragging", handler); } + componentWillUnmount() { this._layoutComputeReaction?.(); + + const handler = (e: Event) => this.handleDragging(e, (e as CustomEvent).detail); + document.removeEventListener("dashDragging", handler); } + @computed get views() { return this._layoutElements.filter(ele => ele.bounds && !ele.bounds.z).map(ele => ele.ele); } elementFunc = () => this._layoutElements; @@ -1155,6 +1164,12 @@ export class CollectionFreeFormView extends CollectionSubView { + console.log(de.clientX); + console.log(de.clientX); + } + promoteCollection = undoBatch(action(() => { const childDocs = this.childDocs.slice(); childDocs.forEach(doc => { diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index 7fb447cab..44e72215d 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -152,7 +152,7 @@ export class DocumentLinksButton extends React.Component
Date: Thu, 9 Jul 2020 01:54:29 -0500 Subject: started dragging pans screen (needs cleaning) --- src/client/util/LinkManager.ts | 2 + .../collectionFreeForm/CollectionFreeFormView.tsx | 105 ++++++++++++++++++--- 2 files changed, 96 insertions(+), 11 deletions(-) (limited to 'src') diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts index 6da581f35..50f3fc1d6 100644 --- a/src/client/util/LinkManager.ts +++ b/src/client/util/LinkManager.ts @@ -3,6 +3,7 @@ import { List } from "../../fields/List"; import { listSpec } from "../../fields/Schema"; import { Cast, StrCast } from "../../fields/Types"; import { Scripting } from "./Scripting"; +import { undoBatch } from "./UndoManager"; /* * link doc: @@ -52,6 +53,7 @@ export class LinkManager { return false; } + @undoBatch public deleteLink(linkDoc: Doc): boolean { if (LinkManager.Instance.LinkManagerDoc && linkDoc instanceof Doc) { Doc.RemoveDocFromList(LinkManager.Instance.LinkManagerDoc, "data", linkDoc); diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 5a762a85c..a3d3a210d 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -101,6 +101,10 @@ export class CollectionFreeFormView extends CollectionSubView(); + @observable _marqueeRef = React.createRef(); + @observable canPanX: boolean = true; + @observable canPanY: boolean = true; + @computed get fitToContentScaling() { return this.fitToContent ? NumCast(this.layoutDoc.fitToContentScaling, 1) : 1; } @computed get fitToContent() { return (this.props.fitToBox || this.Document._fitToBox) && !this.isAnnotationOverlay; } @computed get parentScaling() { return this.props.ContentScaling && this.fitToContent && !this.isAnnotationOverlay ? this.props.ContentScaling() : 1; } @@ -1164,10 +1168,87 @@ export class CollectionFreeFormView extends CollectionSubView + @action handleDragging = (e: Event, de: DragEvent) => { - console.log(de.clientX); - console.log(de.clientX); + + const nw = NumCast(this.Document._nativeWidth, this.props.NativeWidth()); + const nh = NumCast(this.Document._nativeHeight, this.props.NativeHeight()); + const hscale = nh ? this.props.PanelHeight() / nh : 1; + const wscale = nw ? this.props.PanelWidth() / nw : 1; + + if (this._marqueeRef) { + if (this._marqueeRef.current) { + + // console.log("left: " + this._marqueeRef.current.clientLeft); + // console.log("width: " + this._marqueeRef.current.clientWidth); + // console.log("client x: " + de.clientX); + + // console.log("top: " + this._marqueeRef.current.clientTop); + // console.log("height: " + this._marqueeRef.current.clientHeight); + // console.log("client y: " + de.clientY); + + + if (this._marqueeRef.current.clientWidth > 0) { + if (de.clientX - 315 - this._marqueeRef.current.clientLeft < 25) { + console.log("PAN left "); + if (this.canPanX) { + this.Document._panX = de.clientX - 20 - this._marqueeRef.current.clientLeft; + setTimeout(action(() => { + this.canPanX = true; + this.panX(); + }), 2500); + this.canPanX = false; + } + } else if (de.clientX - 315 - this._marqueeRef.current.clientLeft - + this._marqueeRef.current.clientWidth < 25) { + console.log("PAN right "); + if (this.canPanX) { + this.Document._panX = de.clientX - 315 - this._marqueeRef.current.clientLeft - + this._marqueeRef.current.clientWidth; + + setTimeout(action(() => { + this.panX(); + this.canPanX = true; + }), 2500); + this.canPanX = false; + } + + } + } + + if (this._marqueeRef.current.clientHeight > 0) { + if (de.clientY - 120 - this._marqueeRef.current.clientTop < 25) { + console.log("PAN top "); + if (this.canPanY) { + this.Document._panY = de.clientY - 20 - this._marqueeRef.current.clientTop; + setTimeout(action(() => { + this.canPanY = true; + this.panY(); + }), 2500); + this.canPanY = false; + } + } else if (de.clientY - 120 - this._marqueeRef.current.clientTop - + this._marqueeRef.current.clientHeight < 25) { + console.log("PAN bottom "); + if (this.canPanY) { + this.Document._panY = de.clientY - 120 - this._marqueeRef.current.clientTop - + this._marqueeRef.current.clientHeight; + + setTimeout(action(() => { + this.panY(); + this.canPanY = true; + }), 2500); + this.canPanY = false; + } + + } + + } + } + } } promoteCollection = undoBatch(action(() => { @@ -1351,7 +1432,8 @@ export class CollectionFreeFormView extends CollectionSubView - - {this.children} - +
+ + {this.children} +
{this.showTimeline ? : (null)} ; } -- cgit v1.2.3-70-g09d2 From 58865aa5f27fa4a23af3a589bfc45868c7a77151 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 9 Jul 2020 11:31:04 -0400 Subject: fixed issues with frame based animations for annotations on images,etc. --- .../views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 2 +- src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 6 +++--- src/client/views/presentationview/PresElementBox.tsx | 4 +++- 3 files changed, 7 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 9bf425db2..60c9d7f4a 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1065,7 +1065,7 @@ export class CollectionFreeFormView extends CollectionSubView) { const layoutDocs = this.childLayoutPairs.map(pair => pair.layout); - const initResult = this.Document.arrangeInit && this.Document.arrangeInit.script.run({ docs: layoutDocs, collection: this.Document }, console.log); + const initResult = this.Document.arrangeInit?.script.run({ docs: layoutDocs, collection: this.Document }, console.log); const state = initResult?.success ? initResult.result.scriptState : undefined; const elements = initResult?.success ? this.viewDefsToJSX(initResult.result.views) : []; diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index a3020f912..d79e2c9ff 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -73,9 +73,9 @@ export class CollectionFreeFormDocumentView extends DocComponent (i <= timecode && x !== undefined) || p === undefined ? x : p, undefined as any as number), - y: Cast(doc["y-indexed"], listSpec("number"), []).reduce((p, y, i) => (i <= timecode && y !== undefined) || p === undefined ? y : p, undefined as any as number), - opacity: Cast(doc["opacity-indexed"], listSpec("number"), []).reduce((p, o, i) => i <= timecode || p === undefined ? o : p, undefined as any as number), + x: Cast(doc["x-indexed"], listSpec("number"), [NumCast(doc.x)]).reduce((p, x, i) => (i <= timecode && x !== undefined) || p === undefined ? x : p, undefined as any as number), + y: Cast(doc["y-indexed"], listSpec("number"), [NumCast(doc.y)]).reduce((p, y, i) => (i <= timecode && y !== undefined) || p === undefined ? y : p, undefined as any as number), + opacity: Cast(doc["opacity-indexed"], listSpec("number"), [NumCast(doc.opacity, 1)]).reduce((p, o, i) => i <= timecode || p === undefined ? o : p, undefined as any as number), }); } diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 6fd3455b6..4c0972736 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -15,6 +15,7 @@ import { FieldView, FieldViewProps } from '../nodes/FieldView'; import "./PresElementBox.scss"; import React = require("react"); import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; +import { DocumentType } from "../../documents/DocumentTypes"; export const presSchema = createSchema({ presentationTargetDoc: Doc, @@ -100,7 +101,8 @@ export class PresElementBox extends ViewBoxBaseComponent Date: Thu, 9 Jul 2020 11:36:48 -0400 Subject: from last --- .../views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 60c9d7f4a..d9aabd7c2 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -205,7 +205,7 @@ export class CollectionFreeFormView extends CollectionSubView Date: Thu, 9 Jul 2020 11:52:05 -0400 Subject: fixed observing docking view golden layout window size changes. --- src/client/views/collections/CollectionDockingView.tsx | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 79c577b6d..f408e24a8 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -390,6 +390,12 @@ export class CollectionDockingView extends React.Component void = () => { if (this._containerRef.current) { + const observer = new _global.ResizeObserver(action((entries: any) => { + for (const entry of entries) { + this.onResize(null as any); + } + })); + observer.observe(this._containerRef.current); this.reactionDisposer = reaction( () => this.props.Document.dockingConfig, () => { @@ -646,16 +652,8 @@ export class CollectionDockingView extends React.Component 0) { return
Nested workspaces can't be rendered
; } - return ( - - {({ measureRef }) => -
- - } - - ); + return