From 1f437abfeabf897887fb9e3097df06a1934ae884 Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Sat, 6 Jun 2020 01:14:09 -0700 Subject: fixed import ordering --- src/client/views/webcam/WebCamLogic.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/webcam/WebCamLogic.js b/src/client/views/webcam/WebCamLogic.js index a8a2f5fa4..5f6202bc8 100644 --- a/src/client/views/webcam/WebCamLogic.js +++ b/src/client/views/webcam/WebCamLogic.js @@ -1,8 +1,5 @@ 'use strict'; import io from "socket.io-client"; -import { - resolvedPorts -} from "../Main"; var socket; var isChannelReady = false; @@ -32,7 +29,7 @@ export function initialize(roomName, handlerUI) { room = roomName; - socket = io.connect(`${window.location.protocol}//${window.location.hostname}:${resolvedPorts.socket}`); + socket = io.connect(`${window.location.protocol}//${window.location.hostname}:4321`); if (room !== '') { socket.emit('create or join', room); -- cgit v1.2.3-70-g09d2 From 0bd7f4f85be56de4326f0671453fc5e5e917a5d0 Mon Sep 17 00:00:00 2001 From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com> Date: Sun, 7 Jun 2020 21:22:25 -0700 Subject: pull current work in --- deploy/mobile/image.html | 3 +- src/client/util/CurrentUserUtils.ts | 105 +- src/client/views/GestureOverlay.tsx | 14 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 2 +- src/mobile/MobileHome.scss | 101 ++ src/mobile/MobileInterface.tsx | 1819 ++++++++++++++++++-- src/mobile/MobileMenu.scss | 122 +- src/mobile/SideBar.scss | 79 - src/mobile/SideBar.tsx | 39 - src/mobile/WorkSpaceButton.scss | 0 src/mobile/WorkSpaceButton.tsx | 14 - 11 files changed, 1916 insertions(+), 382 deletions(-) create mode 100644 src/mobile/MobileHome.scss delete mode 100644 src/mobile/SideBar.scss delete mode 100644 src/mobile/SideBar.tsx delete mode 100644 src/mobile/WorkSpaceButton.scss delete mode 100644 src/mobile/WorkSpaceButton.tsx (limited to 'src/client/views') diff --git a/deploy/mobile/image.html b/deploy/mobile/image.html index beca8b68b..d30ad6ac2 100644 --- a/deploy/mobile/image.html +++ b/deploy/mobile/image.html @@ -1,13 +1,12 @@ - Test view + Dash Mobile
-

Capture Image:

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 496099557..8ed275efc 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -386,25 +386,56 @@ export class CurrentUserUtils { return doc.myItemCreators as Doc; } - static setupMobileButtons(doc: Doc, buttons?: string[]) { + // static setupMobileButtons(doc: Doc, buttons?: string[]) { + // const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, dragFactory?: Doc }[] = [ + // { title: "record", icon: "microphone", ignoreClick: true, click: "FILL" }, + // { title: "use pen", icon: "pen-nib", click: 'activatePen(this.activePen.inkPen = sameDocs(this.activePen.inkPen, this) ? undefined : this,2, this.backgroundColor)', backgroundColor: "blue", ischecked: `sameDocs(this.activePen.inkPen, this)`, activePen: doc }, + // { title: "use highlighter", icon: "highlighter", click: 'activateBrush(this.activePen.inkPen = sameDocs(this.activePen.inkPen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activePen.inkPen, this)`, activePen: doc }, + // { title: "use eraser", icon: "eraser", click: 'activateEraser(this.activePen.inkPen = sameDocs(this.activePen.inkPen, this) ? undefined : this);', ischecked: `sameDocs(this.activePen.inkPen, this)`, backgroundColor: "pink", activePen: doc }, + // { title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activePen.inkPen = this;', ischecked: `sameDocs(this.activePen.inkPen, this)`, backgroundColor: "white", activePen: doc }, + // // { title: "draw", icon: "pen-nib", click: 'switchMobileView(setupMobileInkingDoc, renderMobileInking, onSwitchMobileInking);', ischecked: `sameDocs(this.activePen.inkPen, this)`, backgroundColor: "red", activePen: doc }, + // { title: "upload", icon: "upload", click: 'switchMobileView(setupMobileUploadDoc, renderMobileUpload, onSwitchMobileUpload);', backgroundColor: "orange" }, + // // { title: "upload", icon: "upload", click: 'uploadImageMobile();', backgroundColor: "cyan" }, + // ]; + // return docProtoData.filter(d => !buttons || !buttons.includes(d.title)).map(data => Docs.Create.FontIconDocument({ + // _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100, dropAction: data.click ? "copy" : undefined, title: data.title, icon: data.icon, ignoreClick: data.ignoreClick, + // onDragStart: data.drag ? ScriptField.MakeFunction(data.drag) : undefined, onClick: data.click ? ScriptField.MakeScript(data.click) : undefined, + // ischecked: data.ischecked ? ComputedField.MakeFunction(data.ischecked) : undefined, activePen: data.activePen, + // backgroundColor: data.backgroundColor, removeDropProperties: new List(["dropAction"]), dragFactory: data.dragFactory, + // })); + // } + + static setupMobileButtons(doc?: Doc, buttons?: string[]) { const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, dragFactory?: Doc }[] = [ - { title: "record", icon: "microphone", ignoreClick: true, click: "FILL" }, - { title: "use pen", icon: "pen-nib", click: 'activatePen(this.activePen.inkPen = sameDocs(this.activePen.inkPen, this) ? undefined : this,2, this.backgroundColor)', backgroundColor: "blue", ischecked: `sameDocs(this.activePen.inkPen, this)`, activePen: doc }, - { title: "use highlighter", icon: "highlighter", click: 'activateBrush(this.activePen.inkPen = sameDocs(this.activePen.inkPen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activePen.inkPen, this)`, activePen: doc }, - { title: "use eraser", icon: "eraser", click: 'activateEraser(this.activePen.inkPen = sameDocs(this.activePen.inkPen, this) ? undefined : this);', ischecked: `sameDocs(this.activePen.inkPen, this)`, backgroundColor: "pink", activePen: doc }, - { title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activePen.inkPen = this;', ischecked: `sameDocs(this.activePen.inkPen, this)`, backgroundColor: "white", activePen: doc }, - // { title: "draw", icon: "pen-nib", click: 'switchMobileView(setupMobileInkingDoc, renderMobileInking, onSwitchMobileInking);', ischecked: `sameDocs(this.activePen.inkPen, this)`, backgroundColor: "red", activePen: doc }, - { title: "upload", icon: "upload", click: 'switchMobileView(setupMobileUploadDoc, renderMobileUpload, onSwitchMobileUpload);', backgroundColor: "orange" }, - // { title: "upload", icon: "upload", click: 'uploadImageMobile();', backgroundColor: "cyan" }, + { title: "library", icon: "bars", click: 'switchToLibrary()', backgroundColor: "lightgrey" }, + { title: "record", icon: "microphone", click: 'openMobileAudio()', backgroundColor: "lightgrey" }, + { title: "upload", icon: "upload", click: 'uploadMobileImage()', backgroundColor: "lightgrey" }, + { title: "presentation", icon: "desktop", click: 'openMobilePresentation()', backgroundColor: "lightgrey" }, + { title: "ink", icon: "pen-nib", backgroundColor: "lightgrey" }, + { title: "settings", icon: "cog", click: 'openMobileSettings()', backgroundColor: "lightgrey" } ]; return docProtoData.filter(d => !buttons || !buttons.includes(d.title)).map(data => Docs.Create.FontIconDocument({ - _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100, dropAction: data.click ? "copy" : undefined, title: data.title, icon: data.icon, ignoreClick: data.ignoreClick, - onDragStart: data.drag ? ScriptField.MakeFunction(data.drag) : undefined, onClick: data.click ? ScriptField.MakeScript(data.click) : undefined, - ischecked: data.ischecked ? ComputedField.MakeFunction(data.ischecked) : undefined, activePen: data.activePen, - backgroundColor: data.backgroundColor, removeDropProperties: new List(["dropAction"]), dragFactory: data.dragFactory, + _nativeWidth: 150, _nativeHeight: 150, _width: 150, _height: 150, + dropAction: undefined, + title: data.title, + icon: data.icon, + ignoreClick: data.ignoreClick, + onDragStart: data.drag ? ScriptField.MakeFunction(data.drag) : undefined, + onClick: data.click ? ScriptField.MakeScript(data.click) : undefined, + ischecked: data.ischecked ? ComputedField.MakeFunction(data.ischecked) : undefined, + activePen: data.activePen, + backgroundColor: data.backgroundColor, removeDropProperties: new List(["dropAction"]), + dragFactory: data.dragFactory, })); } + static setupMobileMenu() { + const menu = Cast(Docs.Create.StackingDocument(CurrentUserUtils.setupMobileButtons(), { + _width: 980, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "home", _autoHeight: true, _yMargin: 80 + }), Doc) as Doc; + return menu; + } + static setupThumbButtons(doc: Doc) { const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, pointerDown?: string, pointerUp?: string, ischecked?: string, clipboard?: Doc, activePen?: Doc, backgroundColor?: string, dragFactory?: Doc }[] = [ { title: "use pen", icon: "pen-nib", pointerUp: "resetPen()", pointerDown: 'setPen(2, this.backgroundColor)', backgroundColor: "blue", ischecked: `sameDocs(this.activePen.inkPen, this)`, activePen: doc }, @@ -438,16 +469,20 @@ export class CurrentUserUtils { return Cast(userDoc.thumbDoc, Doc); } - static setupMobileDoc(userDoc: Doc) { - return userDoc.activeMoble ?? Docs.Create.MasonryDocument(CurrentUserUtils.setupMobileButtons(userDoc), { - columnWidth: 100, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "buttons", _autoHeight: true, _yMargin: 5 - }); + static setupLibrary(userDoc: Doc) { + return CurrentUserUtils.setupWorkspaces(userDoc); } static setupMobileInkingDoc(userDoc: Doc) { return Docs.Create.FreeformDocument([], { title: "Mobile Inking", backgroundColor: "white" }); } + static setupMobileDoc(userDoc: Doc) { + return userDoc.activeMoble ?? Docs.Create.MasonryDocument(CurrentUserUtils.setupMobileButtons2(userDoc), { + columnWidth: 100, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "buttons", _autoHeight: true, _yMargin: 5 + }); + } + static setupMobileUploadDoc(userDoc: Doc) { // const addButton = Docs.Create.FontIconDocument({ onDragStart: ScriptField.MakeScript('addWebToMobileUpload()'), title: "Add Web Doc to Upload Collection", icon: "plus", backgroundColor: "black" }) const webDoc = Docs.Create.WebDocument("https://www.britannica.com/biography/Miles-Davis", { @@ -608,6 +643,42 @@ export class CurrentUserUtils { dropAction: "alias", removeDropProperties: new List(["dropAction"]), _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100 })) as any as Doc + static setupMobileButtons2(doc?: Doc, buttons?: string[]) { + const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, info: string, dragFactory?: Doc }[] = [ + { title: "LIBRARY", icon: "bars", click: 'switchToLibrary()', backgroundColor: "#ffd6d6", info: "Navigate and access all of your documents within their respective collections" }, + { title: "RECORD", icon: "microphone", click: 'openMobileAudio()', backgroundColor: "#ffbfbf", info: "Use your mobile to record audio and access it on Dash Web." }, + { title: "UPLOAD", icon: "upload", click: 'uploadMobileImage()', backgroundColor: "#ff9e9e", info: "Upload an image from your mobile device so it can be accessed on Dash Web" }, + { title: "PRESENTATION", icon: "desktop", click: 'openMobilePresentation()', backgroundColor: "#ff8080", info: "Use your phone as a remote for you presentation." }, + // { title: "INK", icon: "pen-nib", backgroundColor: "lightgrey", info: "Doodle and draw with ink on your mobile and have it directly available on Dash Web" }, + { title: "SETTINGS", icon: "cog", click: 'openMobileSettings()', backgroundColor: "#ff5e5e", info: "Change your password, log out, or manage your account security" } + ]; + return docProtoData.filter(d => !buttons || !buttons.includes(d.title)).map(data => this.mobileButton({ title: data.title, onClick: data.click ? ScriptField.MakeScript(data.click) : undefined, _backgroundColor: data.backgroundColor }, [this.ficon({ ignoreClick: true, icon: data.icon, backgroundColor: "rgba(0,0,0,0)" }), this.mobileTextContainer({}, [this.mobileButtonText({}, data.title), this.mobileButtonInfo({}, data.info)])])); + } + + static mobileButton = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.MulticolumnDocument(docs, { + ...opts, + dropAction: "alias", removeDropProperties: new List(["dropAction"]), _nativeWidth: 900, _nativeHeight: 250, _width: 900, _height: 250, _yMargin: 15, + borderRounding: "0", boxShadow: "0 0", _chromeStatus: "disabled", + })) as any as Doc + + static mobileTextContainer = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.MultirowDocument(docs, { + ...opts, + dropAction: "alias", removeDropProperties: new List(["dropAction"]), _nativeWidth: 450, _nativeHeight: 250, _width: 450, _height: 250, _yMargin: 25, + backgroundColor: "rgba(0,0,0,0)", borderRounding: "0", boxShadow: "0 0", _chromeStatus: "disabled", + })) as any as Doc + + + static mobileButtonText = (opts: DocumentOptions, buttonTitle: string) => new PrefetchProxy(Docs.Create.TextDocument(buttonTitle, { + ...opts, + title: buttonTitle, _fontSize: 37, _xMargin: 0, _yMargin: 0, ignoreClick: true, _chromeStatus: "disabled", backgroundColor: "rgba(0,0,0,0)" + })) as any as Doc + + static mobileButtonInfo = (opts: DocumentOptions, buttonInfo: string) => new PrefetchProxy(Docs.Create.TextDocument(buttonInfo, { + ...opts, + title: "info", _fontSize: 25, _xMargin: 0, _yMargin: 0, ignoreClick: true, _chromeStatus: "disabled", backgroundColor: "rgba(0,0,0,0)", _dimMagnitude: 2, + })) as any as Doc + + /// sets up the default list of buttons to be shown in the expanding button menu at the bottom of the Dash window static setupDockedButtons(doc: Doc) { if (doc["dockedBtn-pen"] === undefined) { diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 4352ac52c..a11c97b09 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -27,7 +27,7 @@ import { listSpec } from "../../fields/Schema"; import { List } from "../../fields/List"; import { CollectionViewType } from "./collections/CollectionView"; import TouchScrollableMenu, { TouchScrollableMenuItem } from "./TouchScrollableMenu"; -import MobileInterface from "../../mobile/MobileInterface"; +import { MobileInterface } from "../../mobile/MobileInterface"; import { MobileInkOverlayContent } from "../../server/Message"; import MobileInkOverlay from "../../mobile/MobileInkOverlay"; import { RadialMenu } from "./nodes/RadialMenu"; @@ -115,12 +115,12 @@ export default class GestureOverlay extends Touchable { onReactTouchStart = (te: React.TouchEvent) => { document.removeEventListener("touchmove", this.onReactHoldTouchMove); document.removeEventListener("touchend", this.onReactHoldTouchEnd); - if (RadialMenu.Instance._display === true) { - te.preventDefault(); - te.stopPropagation(); - RadialMenu.Instance.closeMenu(); - return; - } + // if (RadialMenu.Instance._display === true) { + // te.preventDefault(); + // te.stopPropagation(); + // RadialMenu.Instance.closeMenu(); + // return; + // } // this chunk adds new touch targets to a map of pointer events; this helps us keep track of individual fingers // so that we can know, for example, if two fingers are pinching out or in. diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 80ee2a65d..8b0c72f5e 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -597,7 +597,7 @@ export class CollectionFreeFormView extends CollectionSubView { // bcz: theres should be a better way of doing these than referencing these static instances directly MarqueeOptionsMenu.Instance?.fadeOut(true);// I think it makes sense for the marquee menu to go away when panned. -syip2 - PDFMenu.Instance.fadeOut(true); + // PDFMenu.Instance.fadeOut(true); const [dx, dy] = this.getTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY); this.setPan((this.Document._panX || 0) - dx, (this.Document._panY || 0) - dy, undefined, true); diff --git a/src/mobile/MobileHome.scss b/src/mobile/MobileHome.scss new file mode 100644 index 000000000..e1566b622 --- /dev/null +++ b/src/mobile/MobileHome.scss @@ -0,0 +1,101 @@ +$navbar-height: 120px; +$pathbar-height: 50px; + +* { + margin: 0px; + padding: 0px; + box-sizing: border-box; + font-family: "Open Sans"; +} + +.homeContainer { + position: relative; + top: 200px; + overflow: scroll; + width: 100%; + left: 0; + height: calc(100% - 120px); + overflow-y: scroll; +} + +.homeButton { + width: 96%; + margin-left: 2.5%; + height: 250px; + border-radius: 30px; + margin-top: 15px; + margin-bottom: 15px; +} + +.iconRight { + position: absolute; + width: 50%; + height: 80px; + transform: translate(0, 50%); + right: 0px; + text-align: center; + font-size: 80; +} + +.iconLeft { + position: absolute; + width: 50%; + height: 80px; + transform: translate(0%, 50%); + left: 0px; + text-align: center; + font-size: 80; +} + +.textLeft { + position: absolute; + width: 50%; + left: 0px; + font-size: 40px; + text-align: left; + margin-left: 110px; + margin-top: 40px; + font-family: sans-serif; + font-weight: bold; +} + +.textRight { + position: absolute; + width: 50%; + right: 0px; + font-size: 40px; + text-align: right; + margin-right: 110px; + margin-top: 40px; + font-family: sans-serif; + font-weight: bold; +} + +.menuView { + position: absolute; + top: 135px; + left: 50%; + transform: translate(-50%, 0%); + display: flex; +} + +.iconView { + height: 60px; + width: 60px; + background-color: darkgray; + border-radius: 5px; + border-style: solid; + border-width: 2px; + border-color: black; +} + +.listView { + height: 60px; + width: 60px; + margin-left: 20; + background-color: darkgray; + border-radius: 5px; + border-style: solid; + border-width: 2px; + border-color: black; +} \ No newline at end of file diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index 052c8975a..6b75ce07d 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -6,7 +6,7 @@ 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, - faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft + faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft, faBars, faTh, faChevronLeft } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, observable } from 'mobx'; @@ -25,6 +25,7 @@ import { Transform } from '../client/util/Transform'; import { InkingControl } from '../client/views/InkingControl'; import "./MobileInterface.scss"; import "./MobileMenu.scss"; +import "./MobileHome.scss"; import { DocumentManager } from '../client/util/DocumentManager'; import SettingsManager from '../client/util/SettingsManager'; import { Uploader } from "./ImageUpload"; @@ -32,26 +33,1056 @@ import { DockedFrameRenderer } from '../client/views/collections/CollectionDocki import { InkTool } from '../fields/InkField'; import { listSpec } from '../fields/Schema'; import { nullAudio, WebField } from '../fields/URLField'; +import GestureOverlay from "../client/views/GestureOverlay"; library.add(faTasks, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, faTerminal, faToggleOn, fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard, faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, - faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft); + faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft, faBars, faTh, faChevronLeft); + +// @observer +// export class MobileInterface extends React.Component { +// @observable static Instance: MobileInterface; +// @computed private get userDoc() { return Doc.UserDoc(); } +// @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; } +// @computed private get activeContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; } +// // @observable private currentView: "main" | "ink" | "upload" = "main"; +// @observable private mainDoc: any = CurrentUserUtils.setupMobileDoc(this.userDoc); +// @observable private renderView?: () => JSX.Element; +// @observable private sidebarActive = true; + +// public _activeDoc: Doc = this.mainDoc; +// public _homeDoc: Doc = this.mainDoc; +// private _homeMenu: boolean = true; + +// // private inkDoc?: Doc; +// public drawingInk: boolean = false; +// private _ink: boolean = false; + +// // private _uploadDoc: Doc = this.userDoc; +// private _child: Doc | null = null; +// private _parents: Array = []; +// private _library: Doc = CurrentUserUtils.setupLibrary(this.userDoc); +// private _open: boolean = false; + +// constructor(props: Readonly<{}>) { +// super(props); +// MobileInterface.Instance = this; +// } + +// @action +// componentDidMount = () => { +// library.add(...[faPenNib, faHighlighter, faEraser, faMousePointer, faThumbtack]); + +// if (this.userDoc && !this.mainContainer) { +// this.userDoc.activeMobile = this._homeDoc; +// } + +// InkingControl.Instance.switchTool(InkTool.None); +// MobileInterface.Instance.drawingInk = false; +// InkingControl.Instance.updateSelectedColor("#FF0000"); +// InkingControl.Instance.switchWidth("2"); +// this.switchCurrentView((userDoc: Doc) => this._homeDoc); +// } + +// @action +// switchCurrentView = (doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) => { +// if (!this.userDoc) return; + +// this.userDoc.activeMobile = doc(this.userDoc); +// onSwitch && onSwitch(); + +// this.renderView = renderView; +// } + +// onSwitchInking = () => { +// const button = document.getElementById("inkButton") as HTMLElement; +// const color = InkingControl.Instance.selectedColor; +// button.style.backgroundColor = this._ink ? "white" : color; +// button.style.color = this._ink ? "black" : "white"; + +// if (!this._ink) { +// console.log("INK IS ACTIVE"); +// InkingControl.Instance.switchTool(InkTool.Pen); +// MobileInterface.Instance.drawingInk = true; +// this._ink = true; +// } else { +// console.log("INK IS INACTIVE"); +// InkingControl.Instance.switchTool(InkTool.None); +// MobileInterface.Instance.drawingInk = false; +// this._ink = false; +// } +// } + +// onSwitchUpload = async () => { +// let width = 300; +// let height = 300; +// const res = await rp.get(Utils.prepend("/getUserDocumentId")); + +// // get width and height of the collection doc +// if (this.mainContainer) { +// const data = Cast(this.mainContainer.data, listSpec(Doc)); +// if (data) { +// const collectionDoc = await data[1]; // this should be the collection doc since the positions should be locked +// const docView = DocumentManager.Instance.getDocumentView(collectionDoc); +// if (docView) { +// width = docView.nativeWidth ? docView.nativeWidth : 300; +// height = docView.nativeHeight ? docView.nativeHeight : 300; +// } +// } +// } +// DocServer.Mobile.dispatchOverlayTrigger({ +// enableOverlay: true, +// width: width, +// height: height, +// text: "Documents uploaded from mobile will show here", +// }); +// } + +// back = () => { +// let header = document.getElementById("header") as HTMLElement; +// let doc = Cast(this._parents.pop(), Doc) as Doc; +// if (doc === Cast(this._library, Doc) as Doc) { +// this._child = null; +// this.userDoc.activeMobile = this._library; +// } else if (doc === Cast(this._homeDoc, Doc) as Doc) { +// this._homeMenu = true; +// this._parents = []; +// this._activeDoc = this._homeDoc; +// this._child = null; +// this.switchCurrentView((userDoc: Doc) => this._homeDoc); +// } else { +// if (doc) { +// this._child = doc; +// this.switchCurrentView((userDoc: Doc) => doc); +// this._homeMenu = false; +// header.textContent = String(doc.title); +// } +// } +// if (doc) { +// this._activeDoc = doc; +// } +// this._ink = false; +// } + +// returnHome = () => { +// if (this._homeMenu === false || this._open === true) { +// this._homeMenu = true; +// this._parents = []; +// this._activeDoc = this._homeDoc; +// this._child = null; +// this.switchCurrentView((userDoc: Doc) => this._homeDoc); +// } +// if (this._open) { +// this.toggleSidebar(); +// } +// } + +// returnMain = () => { +// this._parents = []; +// // this.toggleSidebar(); +// this._activeDoc = this._library; +// this.switchCurrentView((userDoc: Doc) => this._library); +// this._homeMenu = false; +// this._child = null; +// } + +// displayWorkspaces = () => { +// if (this.mainContainer) { +// const backgroundColor = () => "white"; +// if (this._activeDoc.title === "mobile audio") { +// return ( +//
+// window.screen.width} +// PanelHeight={() => window.screen.height} +// renderDepth={0} +// focus={emptyFunction} +// backgroundColor={backgroundColor} +// parentActive={returnTrue} +// whenActiveChanged={emptyFunction} +// bringToFront={emptyFunction} +// ContainingCollectionView={undefined} +// ContainingCollectionDoc={undefined} +// /> +//
+// ); +// } else { +// return ( +//
+// +//
+// ); +// } +// } +// } + +// returnWidth = () => 2000; +// returnHeight = () => 2000; + +// handleClick(doc: Doc) { +// let children = DocListCast(doc.data); +// if (doc.type !== "collection") { +// this._parents.push(this._activeDoc); +// this._activeDoc = doc; +// this.switchCurrentView((userDoc: Doc) => doc); +// this._homeMenu = false; +// this.toggleSidebar(); +// } else if (doc.type === "collection" && children.length === 0) { +// console.log("This collection has no children"); +// } else { +// this._parents.push(this._activeDoc); +// this._activeDoc = doc; +// this.switchCurrentView((userDoc: Doc) => doc); +// this._homeMenu = false; +// this._child = doc; +// } + +// // let sidebar = document.getElementById("sidebar") as HTMLElement; +// // sidebar.classList.toggle('active'); +// } + +// createPathname = () => { +// let docArray = []; +// this._parents.map((doc: Doc, index: any) => { +// // if (doc === this.mainDoc) { +// // pathname = pathname; +// // } else if (doc.type === "audio" || doc.type === "presentation") { +// // pathname = pathname; +// // } else if (doc.type !== "collection") { +// // pathname = pathname; +// // } else { +// // pathname = pathname + " > " + doc.title; +// // titleArray.push(doc.title); +// // docArray.push(doc); +// // } +// docArray.push(doc); +// }); +// docArray.push(this._activeDoc); +// // if (this._activeDoc.title === "mobile audio") { +// // pathname = this._activeDoc.title; +// // } else if (this._activeDoc.title === "Presentation") { +// // pathname = this._activeDoc.title; +// // } else if (this._activeDoc === this.mainDoc) { +// // pathname = pathname; +// // } else { +// // pathname = pathname + " > " + this._activeDoc.title; +// // docArray.push(this._activeDoc); +// // titleArray.push(this._activeDoc.title); +// // } + +// return docArray; +// } + +// renderPathbar = () => { +// // if (this._homeMenu == false) { +// let docArray = this.createPathname(); +// let items = docArray.map((doc: Doc, index: any) => { +// if (index == 0) { +// return ( +//
+//
this.handlePathClick(doc, index)}>{doc.title} +//
+//
); +// } else if (doc === this._activeDoc) { +// return ( +//
+// +//
this.handlePathClick(doc, index)}>{doc.title} +//
+//
); +// } else { +// return ( +//
+// +//
this.handlePathClick(doc, index)}>{doc.title} +//
+//
); +// } + +// }); +// if (this._parents.length !== 0) { +// return (
+//
+// {items} +//
+//
+// +//
+//
+//
); +// } else { +// return (
+//
+// {items} +//
+//
+//
); +// } +// // } +// // } else { + +// // return ( +// //
+// //
+// //
+// //
this.returnHome()}>Home +// //
+// //
+// //
+// //
+// //
+// // ); +// // } + +// // } +// } + +// handlePathClick = (doc: Doc, index: number) => { +// if (doc === this._library) { +// this._activeDoc = doc; +// this._child = null; +// this.switchCurrentView((userDoc: Doc) => doc); +// this._parents.length = index; +// } else if (doc === this._homeDoc) { +// this.returnHome(); +// } else { +// console.log(index); +// this._activeDoc = doc; +// this._child = doc; +// this.switchCurrentView((userDoc: Doc) => doc); +// this._parents.length = index; +// } +// } + +// @action +// toggleSidebar = () => this.sidebarActive = !this.sidebarActive + +// switchToLibrary = () => { +// this._parents.push(this._activeDoc); +// this.switchCurrentView((userDoc: Doc) => this._library); +// this._activeDoc = this._library; +// this._homeMenu = false; +// this.toggleSidebar(); +// } + +// // renderDefaultContent = () => { +// // let menuButtons = DocListCast(this._homeDoc.data).map((doc: Doc, index: any) => { +// // if (doc.type !== "ink") { +// // return ( +// //
doc.click}>{doc.title} +// //
); +// // } +// // }); + +// // if (this._homeMenu === true) { +// // return ( +// //
+// //
+// // +// // +// // +// //
+// // {this.renderPathbar()} +// // +// //
+// // ); +// // } + +// // const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc; +// // const buttons = DocListCast(this._child ? this._child.data : workspaces.data).map((doc: Doc, index: any) => { +// // return ( +// //
this.handleClick(doc)}>{doc.title} +// //
{doc.type}
+// // +// //
); +// // }); +// // return ( +// // <> +// //
+// //
{this.sidebarActive ? StrCast(this._activeDoc.title) : "Menu"}
+// //
+// //
+// //
+// //
{this.createPathname()}
+// //
+// //
+// // +// // {this._child ? +// // <> +// //
←
+// //
{buttons}
+// //
Home
+// // : +// // <> +// // {buttons} +// // {/*
+// // Library +// //
*/} +// // +// //
Record Audio
+// //
Presentation
+// //
SettingsManager.Instance.open()}>Settings
+// // +// // } +// //
+// // {this._child ? null :
{this.renderView}
} +// // +// // ); +// // } + +// renderDefaultContent = () => { +// let menuButtons = DocListCast(this._homeDoc.data).map((doc: Doc, index: any) => { +// if (doc.type !== "ink") { +// return ( +//
doc.click}>{doc.title} +//
); +// } +// }); + +// if (this._homeMenu === true) { +// return ( +//
+//
+// +// +// +//
+// {this.renderPathbar()} +// +//
+// ); +// } +// const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc; +// let buttons = DocListCast(workspaces.data).map((doc: Doc, index: any) => { +// if (doc.type !== "ink") { +// return ( +//
this.handleClick(doc)}>{doc.title} +//
{doc.type}
+// +//
); +// } +// }); + +// if (this._child) { +// buttons = DocListCast(this._child.data).map((doc: Doc, index: any) => { +// if (doc.type !== "ink") { +// return ( +//
this.handleClick(doc)}>{doc.title} +//
{doc.type}
+// +//
); +// } +// }); +// } + +// if (!this._child) { +// return ( +//
+//
+// +// +// +//
+// {this.renderPathbar()} +// +// {/*
+// {this.renderView} +//
*/} +//
+// ); +// } +// else { +// return ( +//
+//
+// +// +// +//
+// {this.renderPathbar()} +// +//
+// ); +// } +// } + +// recordAudio = async () => { +// // upload to server with known URL +// if (this._activeDoc.title !== "mobile audio") { +// this._parents.push(this._activeDoc); +// } +// const audioDoc = Cast(Docs.Create.AudioDocument(nullAudio, { _width: 200, _height: 100, title: "mobile audio" }), Doc) as Doc; +// console.log(audioDoc); +// if (audioDoc) { +// console.log("audioClicked: " + audioDoc.title); +// this._activeDoc = audioDoc; +// this.switchCurrentView((userDoc: Doc) => audioDoc); +// this._homeMenu = false; +// // this.toggleSidebar(); +// } +// // const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; +// // this.audioState = await audioDoc.getProto; +// // if (this.audioState) { +// // console.log(this.audioState); +// // const data = Cast(audioRightSidebar.data, listSpec(Doc)); +// // if (data) { +// // data.push(audioDoc); +// // } +// // } +// } + +// uploadAudio = () => { +// const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; +// const audioDoc = this._activeDoc; +// const data = Cast(audioRightSidebar.data, listSpec(Doc)); +// console.log(audioDoc.proto); +// if (data) { +// data.push(audioDoc); +// } +// // this.recordAudio(); +// } + +// uploadAudioButton = () => { +// if (this._activeDoc.type === "audio") { +// return
+// +//
; +// } +// } + +// toggleSelector = () => { +// console.log("toggle selector!"); +// let toolbar = document.getElementById("toolbar") as HTMLElement; +// toolbar.classList.toggle('active'); +// } + +// colorTool = () => { +// if (this._activeDoc._viewType === "docking") { +// const color = InkingControl.Instance.selectedColor; +// console.log(color); +// return ( +//
+//
+//
+//
{ +// InkingControl.Instance.updateSelectedColor("rgb(255,0,0)"); +// Doc.UserDoc().inkColor = "rgb(255,0,0)"; +// console.log(InkingControl.Instance.selectedColor); +// }}> +//
+//
{ +// InkingControl.Instance.updateSelectedColor("rgb(0,128,0)"); +// Doc.UserDoc().inkColor = "rgb(0,128,0)"; +// console.log(InkingControl.Instance.selectedColor); +// }}> +//
+//
{ +// InkingControl.Instance.updateSelectedColor("rgb(0,0,255)"); +// Doc.UserDoc().inkColor = "rgb(0,0,255)"; +// console.log(InkingControl.Instance.selectedColor); +// }}> +//
+//
+//
+// ) => InkingControl.Instance.switchWidth(e.target.value)} /> +//
+//
+//
+// ); +// } +// } + +// drawInk = () => { +// if (this._activeDoc._viewType === "docking") { +// const inkIsOn = this._ink; +// return
+// +//
; +// } +// } + +// downloadDocument = () => { +// if (this._activeDoc.type === "image") { +// const url = this._activeDoc["data-path"]?.toString(); +// return
{ +// window.open(url); +// console.log(url); +// }}> +// +//
; +// } +// } + +// pinToPresentation = () => { +// // Only making button available if it is an image +// if (this._activeDoc.type === "image") { +// const isPinned = this._activeDoc && Doc.isDocPinned(this._activeDoc); +// return
{ +// if (isPinned) { +// DockedFrameRenderer.UnpinDoc(this._activeDoc); +// } +// else { +// DockedFrameRenderer.PinDoc(this._activeDoc); +// } +// }}> +// +//
; +// } +// } + +// setupDefaultPresentation = () => { +// if (this._activeDoc.title !== "Presentation") { +// this._parents.push(this._activeDoc); +// } + +// const presentation = Cast(Doc.UserDoc().activePresentation, Doc) as Doc; + +// if (presentation) { +// console.log(this._activeDoc.mobile); +// console.log("presentation clicked: " + presentation.title); +// this._activeDoc = presentation; +// this.switchCurrentView((userDoc: Doc) => presentation); +// this._homeMenu = false; +// // this.toggleSidebar(); +// } +// } + +// // mobileHome = () => { +// // return ( +// //
+// //
+ +// //
+// //
+ +// //
+// //
+ +// //
+// //
+ +// //
+// //
+ +// //
+// //
+// // ); +// // } + +// renderActiveCollection = (userDoc: Doc) => { +// if (this.activeContainer) { +// const active = Cast(this.activeContainer.data, listSpec(Doc)); +// if (active) { +// return ( +//
HELLO!
+// ); +// } +// } +// } + +// onBack = (e: React.MouseEvent) => { +// this.switchCurrentView((userDoc: Doc) => this.mainDoc); +// InkingControl.Instance.switchTool(InkTool.None); // TODO: switch to previous tool + +// DocServer.Mobile.dispatchOverlayTrigger({ +// enableOverlay: false, +// width: window.innerWidth, +// height: window.innerHeight +// }); + +// // this.inkDoc = undefined; +// this.drawingInk = false; +// } + +// shiftLeft = (e: React.MouseEvent) => { +// DocServer.Mobile.dispatchOverlayPositionUpdate({ +// dx: -10 +// }); +// e.preventDefault(); +// e.stopPropagation(); +// } + +// shiftRight = (e: React.MouseEvent) => { +// DocServer.Mobile.dispatchOverlayPositionUpdate({ +// dx: 10 +// }); +// e.preventDefault(); +// e.stopPropagation(); +// } + +// panelHeight = () => window.innerHeight; +// panelWidth = () => window.innerWidth; +// //WAS 3 + +// //WAS 1 + +// upload = async (e: React.MouseEvent) => { +// if (this.mainContainer) { +// const data = Cast(this.mainContainer.data, listSpec(Doc)); +// if (data) { +// const collectionDoc = await data[1]; //this should be the collection doc since the positions should be locked +// const children = DocListCast(collectionDoc.data); +// const uploadDoc = children.length === 1 ? children[0] : Docs.Create.StackingDocument(children, { +// title: "Mobile Upload Collection", backgroundColor: "white", lockedPosition: true, _width: 300, _height: 300 +// }); +// if (uploadDoc) { +// DocServer.Mobile.dispatchMobileDocumentUpload({ +// docId: uploadDoc[Id], +// }); +// } +// } +// } +// e.stopPropagation(); +// e.preventDefault(); +// } + +// addWebToCollection = async () => { +// let url = "https://en.wikipedia.org/wiki/Hedgehog"; +// if (this.mainContainer) { +// const data = Cast(this.mainContainer.data, listSpec(Doc)); +// if (data) { +// const webDoc = await data[0]; +// const urlField: FieldResult = Cast(webDoc.data, WebField); +// url = urlField ? urlField.url.toString() : "https://en.wikipedia.org/wiki/Hedgehog"; + +// } +// } +// Docs.Create.WebDocument(url, { _width: 300, _height: 300, title: "Mobile Upload Web Doc" }); +// } + +// clearUpload = async () => { +// if (this.mainContainer) { +// const data = Cast(this.mainContainer.data, listSpec(Doc)); +// if (data) { +// const collectionDoc = await data[1]; +// const children = DocListCast(collectionDoc.data); +// children.forEach(doc => { +// }); +// // collectionDoc[data] = new List(); +// } +// } +// } + +// onDragOver = (e: React.DragEvent) => { +// e.preventDefault(); +// e.stopPropagation(); +// } + +// render() { +// // const content = this.currentView === "main" ? this.mainContent : +// // this.currentView === "ink" ? this.inkContent : +// // this.currentView === "upload" ? this.uploadContent : <>; +// return ( +//
+// {/* +// +// {this.renderView ? this.renderView() : this.renderDefaultContent()} +// */} +// {/* */} +// +// {/* {this.menuOptions()} */} +// {/* {this.displayHome()} */} +//
+// {this.pinToPresentation()} +// {this.downloadDocument()} +// {this.drawInk()} +// {this.uploadAudioButton()} +// {this.colorTool()} +//
+// + +// +// {this.renderDefaultContent()} +// {this.displayWorkspaces()} +// {/* */} +// {/* +// +// */} +// {/* */} +// {/*
+// {this.renderDefaultContent()} +//
*/} +// {/* */} +// {/* */} +// {/* +// */} +// {/* +// +// */} +//
+// ); +// } +// } + +// Scripting.addGlobal(function switchMobileView(doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) { return MobileInterface.Instance.switchCurrentView(doc, renderView, onSwitch); }); +// Scripting.addGlobal(function openMobilePresentation() { return MobileInterface.Instance.setupDefaultPresentation(); }); +// Scripting.addGlobal(function toggleMobileSidebar() { return MobileInterface.Instance.toggleSidebar(); }); +// Scripting.addGlobal(function openMobileAudio() { return MobileInterface.Instance.recordAudio(); }); +// Scripting.addGlobal(function openMobileSettings() { return SettingsManager.Instance.open(); }); +// Scripting.addGlobal(function switchToLibrary() { return MobileInterface.Instance.switchToLibrary(); }); +// // WAS 2 + +// // 1 +// // renderUploadContent() { +// // if (this.mainContainer) { +// // return ( +// //
+// //
+// // +// // {/* */} +// // {/* */} +// // +// //
+// // window.screen.width} +// // PanelHeight={() => window.screen.height} +// // renderDepth={0} +// // focus={emptyFunction} +// // backgroundColor={returnEmptyString} +// // parentActive={returnTrue} +// // whenActiveChanged={emptyFunction} +// // bringToFront={emptyFunction} +// // ContainingCollectionView={undefined} +// // ContainingCollectionDoc={undefined} /> +// //
+// // ); +// // } +// // } + +// // 2 +// // Scripting.addGlobal(function onSwitchMobileInking() { return MobileInterface.Instance.onSwitchInking(); }); +// // Scripting.addGlobal(function renderMobileInking() { return MobileInterface.Instance.renderInkingContent(); }); +// // Scripting.addGlobal(function onSwitchMobileUpload() { return MobileInterface.Instance.onSwitchUpload(); }); +// // Scripting.addGlobal(function renderMobileUpload() { return MobileInterface.Instance.renderUploadContent(); }); +// // Scripting.addGlobal(function addWebToMobileUpload() { return MobileInterface.Instance.addWebToCollection(); }); + + +// // 3 +// // renderInkingContent = () => { +// // console.log("rendering inking content"); +// // // TODO: support panning and zooming +// // // TODO: handle moving of ink strokes +// // if (this.mainContainer) { +// // return ( +// //
+// //
+// //
+// // +// //
+// //
+// // +// //
+// //
+// // +// // +// //
+// //
+// // +// // +// //
+// // ); +// // } +// // } @observer export class MobileInterface extends React.Component { @observable static Instance: MobileInterface; @computed private get userDoc() { return Doc.UserDoc(); } @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; } - @computed private get activeContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; } - // @observable private currentView: "main" | "ink" | "upload" = "main"; - @observable private mainDoc: any = CurrentUserUtils.setupMobileDoc(this.userDoc); + // @computed private get activeContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; } + @observable private mainDoc: any = CurrentUserUtils.setupMobileMenu(); @observable private renderView?: () => JSX.Element; - @observable private sidebarActive = true; + @observable private audioState: any; public _activeDoc: Doc = this.mainDoc; + public _homeDoc: Doc = this.mainDoc; + private _homeMenu: boolean = true; // private inkDoc?: Doc; public drawingInk: boolean = false; @@ -59,9 +1090,11 @@ export class MobileInterface extends React.Component { // private _uploadDoc: Doc = this.userDoc; private _child: Doc | null = null; private _parents: Array = []; - private _menu: Doc = this.mainDoc; + private _library: Doc = CurrentUserUtils.setupLibrary(this.userDoc); private _open: boolean = false; - private _library: Doc = Cast(this.userDoc.myWorkspaces, Doc) as Doc; + + // private _library: Doc = Cast(this.userDoc.myWorkspaces, Doc) as Doc; + private _ink: boolean = false; constructor(props: Readonly<{}>) { super(props); @@ -71,33 +1104,31 @@ export class MobileInterface extends React.Component { @action componentDidMount = () => { library.add(...[faPenNib, faHighlighter, faEraser, faMousePointer, faThumbtack]); - + if (this.userDoc.activeMobile) { + console.log(Doc.UserDoc().activeMobile) + } if (this.userDoc && !this.mainContainer) { - this.userDoc.activeMobile = this.mainDoc; + this.userDoc.activeMobile = this._homeDoc; } + InkingControl.Instance.switchTool(InkTool.None); + MobileInterface.Instance.drawingInk = false; + InkingControl.Instance.updateSelectedColor("#FF0000"); + console.log(this.userDoc.inkColor); + console.log(InkingControl.Instance.selectedColor); + InkingControl.Instance.switchWidth("2"); + this.switchCurrentView((userDoc: Doc) => this._homeDoc); } @action switchCurrentView = (doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) => { if (!this.userDoc) return; - this.userDoc.activeMobile = doc(this.userDoc); + Doc.UserDoc().activeMobile = doc(this.userDoc); onSwitch && onSwitch(); this.renderView = renderView; } - onSwitchInking = () => { - InkingControl.Instance.switchTool(InkTool.Pen); - MobileInterface.Instance.drawingInk = true; - - DocServer.Mobile.dispatchOverlayTrigger({ - enableOverlay: true, - width: window.innerWidth, - height: window.innerHeight - }); - } - onSwitchUpload = async () => { let width = 300; let height = 300; @@ -123,70 +1154,167 @@ export class MobileInterface extends React.Component { }); } + toggleSidebar = () => { + if (this._open === false) { + this._open = true; + } else { + this._open = false; + } + console.log("clicked"); + let menuButton = document.getElementById("menuButton") as HTMLElement; + menuButton.classList.toggle('active'); + + let sidebar = document.getElementById("sidebar") as HTMLElement; + sidebar.classList.toggle('active'); + + let header = document.getElementById("header") as HTMLElement; + + if (!sidebar.classList.contains('active')) { + header.textContent = String(this._activeDoc.title); + } else { + header.textContent = "library"; + } + } + + switchToLibrary = () => { + this._parents.push(this._activeDoc); + this.switchCurrentView((userDoc: Doc) => this._library); + this._activeDoc = this._library; + this._homeMenu = false; + this.toggleSidebar(); + } + back = () => { - const doc = Cast(this._parents.pop(), Doc) as Doc; - if (doc === Cast(this._menu, Doc) as Doc) { + let header = document.getElementById("header") as HTMLElement; + let doc = Cast(this._parents.pop(), Doc) as Doc; + if (doc === Cast(this._library, Doc) as Doc) { + this._child = null; + this.userDoc.activeMobile = this._library; + } else if (doc === Cast(this._homeDoc, Doc) as Doc) { + this._homeMenu = true; + this._parents = []; + this._activeDoc = this._homeDoc; this._child = null; - this.userDoc.activeMobile = this.mainDoc; + this.switchCurrentView((userDoc: Doc) => this._homeDoc); } else { if (doc) { this._child = doc; this.switchCurrentView((userDoc: Doc) => doc); + this._homeMenu = false; + header.textContent = String(doc.title); } } if (doc) { this._activeDoc = doc; } + this._ink = false; } returnHome = () => { + if (this._homeMenu === false || this._open === true) { + this._homeMenu = true; + this._parents = []; + this._activeDoc = this._homeDoc; + this._child = null; + this.switchCurrentView((userDoc: Doc) => this._homeDoc); + } + if (this._open) { + this.toggleSidebar(); + } + } + + returnMain = () => { + console.log("home"); this._parents = []; - this._activeDoc = this._menu; - this.switchCurrentView((userDoc: Doc) => this._menu); + // this.toggleSidebar(); + this._activeDoc = this._library; + this.switchCurrentView((userDoc: Doc) => this._library); + this._homeMenu = false; this._child = null; } + // @computed get onChildClickHandler() { return ScriptCast(Doc.UserDoc.onClick); } + displayWorkspaces = () => { if (this.mainContainer) { const backgroundColor = () => "white"; - return ( -
- window.screen.width} - PanelHeight={() => window.screen.height} - renderDepth={0} - focus={emptyFunction} - backgroundColor={backgroundColor} - parentActive={returnTrue} - whenActiveChanged={emptyFunction} - bringToFront={emptyFunction} - ContainingCollectionView={undefined} - ContainingCollectionDoc={undefined} - /> -
- ); + if (this._activeDoc.title === "mobile audio") { + return ( +
+ window.screen.width} + PanelHeight={() => window.screen.height} + renderDepth={0} + focus={emptyFunction} + backgroundColor={backgroundColor} + parentActive={returnTrue} + whenActiveChanged={emptyFunction} + bringToFront={emptyFunction} + ContainingCollectionView={undefined} + ContainingCollectionDoc={undefined} + /> +
+ ); + } else { + return ( +
+ +
+ ); + } } } + returnWidth = () => 2000; + returnHeight = () => 2000; + handleClick(doc: Doc) { - const children = DocListCast(doc.data); + console.log(screen.height) + console.log(screen.width) + let children = DocListCast(doc.data); if (doc.type !== "collection") { this._parents.push(this._activeDoc); this._activeDoc = doc; this.switchCurrentView((userDoc: Doc) => doc); + this._homeMenu = false; this.toggleSidebar(); } else if (doc.type === "collection" && children.length === 0) { console.log("This collection has no children"); @@ -194,6 +1322,7 @@ export class MobileInterface extends React.Component { this._parents.push(this._activeDoc); this._activeDoc = doc; this.switchCurrentView((userDoc: Doc) => doc); + this._homeMenu = false; this._child = doc; } @@ -201,167 +1330,426 @@ export class MobileInterface extends React.Component { // sidebar.classList.toggle('active'); } + /** + * Handles creation of array which is then rendered in renderPathbar() + */ createPathname = () => { - let pathname = ""; + // let pathname = 'workspaces'; + // let titleArray = []; + let docArray = []; this._parents.map((doc: Doc, index: any) => { - if (doc === this.mainDoc) { - pathname = pathname + doc.title; + // if (doc === this.mainDoc) { + // pathname = pathname; + // } else if (doc.type === "audio" || doc.type === "presentation") { + // pathname = pathname; + // } else if (doc.type !== "collection") { + // pathname = pathname; + // } else { + // pathname = pathname + " > " + doc.title; + // titleArray.push(doc.title); + // docArray.push(doc); + // } + docArray.push(doc); + }); + docArray.push(this._activeDoc); + // if (this._activeDoc.title === "mobile audio") { + // pathname = this._activeDoc.title; + // } else if (this._activeDoc.title === "Presentation") { + // pathname = this._activeDoc.title; + // } else if (this._activeDoc === this.mainDoc) { + // pathname = pathname; + // } else { + // pathname = pathname + " > " + this._activeDoc.title; + // docArray.push(this._activeDoc); + // titleArray.push(this._activeDoc.title); + // } + + return docArray; + } + + // Renders the graphical pathbar + renderPathbar = () => { + // if (this._homeMenu == false) { + let docArray = this.createPathname(); + let items = docArray.map((doc: Doc, index: any) => { + if (index == 0) { + return ( +
+
this.handlePathClick(doc, index)}>{doc.title} +
+
); + } else if (doc === this._activeDoc) { + return ( +
+ +
this.handlePathClick(doc, index)}>{doc.title} +
+
); } else { - pathname = pathname + " > " + doc.title; + return ( +
+ +
this.handlePathClick(doc, index)}>{doc.title} +
+
); } + }); - if (this._activeDoc === this.mainDoc) { - pathname = pathname + this._activeDoc.title; + if (this._parents.length !== 0) { + return (
+
+ {items} +
+
+ +
+
+
); } else { - pathname = pathname + " > " + this._activeDoc.title; + return (
+
+ {items} +
+
+
); } - return pathname; - } + // } + // } else { - @action - toggleSidebar = () => this.sidebarActive = !this.sidebarActive + // return ( + //
+ //
+ //
+ //
this.returnHome()}>Home + //
+ //
+ //
+ //
+ //
+ // ); + // } - openLibrary() { - this._activeDoc = this.mainDoc; - this.switchCurrentView(() => this.mainDoc); - this._child = this._library; + // } + } + + handlePathClick = (doc: Doc, index: number) => { + if (doc === this._library) { + this._activeDoc = doc; + this._child = null; + this.switchCurrentView((userDoc: Doc) => doc); + this._parents.length = index; + } else if (doc === this._homeDoc) { + this.returnHome(); + } else { + console.log(index); + this._activeDoc = doc; + this._child = doc; + this.switchCurrentView((userDoc: Doc) => doc); + this._parents.length = index; + } } renderDefaultContent = () => { - const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc; - const buttons = DocListCast(this._child ? this._child.data : workspaces.data).map((doc: Doc, index: any) => { - return ( -
this.handleClick(doc)}>{doc.title} -
{doc.type}
- -
); - }); - return ( - <> -
-
{this.sidebarActive ? StrCast(this._activeDoc.title) : "Menu"}
+ let menuButtons = DocListCast(this._homeDoc.data).map((doc: Doc, index: any) => { + if (doc.type !== "ink") { + return (
-
-
-
{this.createPathname()}
+ className="item" + key={index} + onClick={() => doc.click}>{doc.title} +
); + } + }); + + if (this._homeMenu === true) { + return ( +
+
+ + + +
+ {this.renderPathbar()} +
-
- - {this._child ? - <> -
←
-
{buttons}
-
Home
- : - <> + ); + } + const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc; + let buttons = DocListCast(workspaces.data).map((doc: Doc, index: any) => { + if (doc.type !== "ink") { + return ( +
this.handleClick(doc)}>{doc.title} +
{doc.type}
+ +
); + } + }); + + if (this._child) { + buttons = DocListCast(this._child.data).map((doc: Doc, index: any) => { + if (doc.type !== "ink") { + return ( +
this.handleClick(doc)}>{doc.title} +
{doc.type}
+ +
); + } + }); + } + + if (!this._child) { + return ( +
+
+ + + +
+ {this.renderPathbar()} + +
+ {/*
+ {this.renderView} +
*/}
- {this._child ? null :
{this.renderView}
} - - ); + ); + } + else { + return ( +
+
+ + + +
+ {this.renderPathbar()} + +
+ ); + } } - pinToPresentation = () => { - // Only making button available if it is an image + uploadAudioButton = () => { + if (this._activeDoc.type === "audio") { + return
+ +
; + } + } + + toggleSelector = () => { + console.log("toggle selector!"); + let toolbar = document.getElementById("toolbar") as HTMLElement; + toolbar.classList.toggle('active'); + } + + colorTool = () => { + if (this._activeDoc._viewType === "docking") { + const color = InkingControl.Instance.selectedColor; + console.log(color); + return ( +
+
+
+
{ + InkingControl.Instance.updateSelectedColor("rgb(255,0,0)"); + Doc.UserDoc().inkColor = "rgb(255,0,0)"; + console.log(InkingControl.Instance.selectedColor); + }}> +
+
{ + InkingControl.Instance.updateSelectedColor("rgb(0,128,0)"); + Doc.UserDoc().inkColor = "rgb(0,128,0)"; + console.log(InkingControl.Instance.selectedColor); + }}> +
+
{ + InkingControl.Instance.updateSelectedColor("rgb(0,0,255)"); + Doc.UserDoc().inkColor = "rgb(0,0,255)"; + console.log(InkingControl.Instance.selectedColor); + }}> +
+
+
+ ) => InkingControl.Instance.switchWidth(e.target.value)} /> +
+
+
+ ); + } + } + + onSwitchInking = () => { + const button = document.getElementById("inkButton") as HTMLElement; + const color = InkingControl.Instance.selectedColor; + button.style.backgroundColor = this._ink ? "white" : color; + button.style.color = this._ink ? "black" : "white"; + + if (!this._ink) { + console.log("INK IS ACTIVE"); + InkingControl.Instance.switchTool(InkTool.Pen); + MobileInterface.Instance.drawingInk = true; + this._ink = true; + } else { + console.log("INK IS INACTIVE"); + InkingControl.Instance.switchTool(InkTool.None); + MobileInterface.Instance.drawingInk = false; + this._ink = false; + } + } + + drawInk = () => { + if (this._activeDoc._viewType === "docking") { + const inkIsOn = this._ink; + return
+ +
; + } + } + + downloadDocument = () => { if (this._activeDoc.type === "image") { - const isPinned = this._activeDoc && Doc.isDocPinned(this._activeDoc); - return
{ - if (isPinned) { - DockedFrameRenderer.UnpinDoc(this._activeDoc); - } - else { - DockedFrameRenderer.PinDoc(this._activeDoc); - } + window.open(url); + console.log(url); }}> -
; } } recordAudio = async () => { - // upload to server with known URL - this._parents.push(this._activeDoc); + // upload to server with known URL + if (this._activeDoc.title !== "mobile audio") { + this._parents.push(this._activeDoc); + } const audioDoc = Cast(Docs.Create.AudioDocument(nullAudio, { _width: 200, _height: 100, title: "mobile audio" }), Doc) as Doc; + console.log(audioDoc); if (audioDoc) { console.log("audioClicked: " + audioDoc.title); this._activeDoc = audioDoc; this.switchCurrentView((userDoc: Doc) => audioDoc); - this.toggleSidebar(); - } - const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; - if (audioRightSidebar) { - console.log(audioRightSidebar.title); - const data = Cast(audioRightSidebar.data, listSpec(Doc)); - if (data) { - data.push(audioDoc); - } + this._homeMenu = false; + // this.toggleSidebar(); } + // const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; + // this.audioState = await audioDoc.getProto; + // if (this.audioState) { + // console.log(this.audioState); + // const data = Cast(audioRightSidebar.data, listSpec(Doc)); + // if (data) { + // data.push(audioDoc); + // } + // } } - openDefaultPresentation = () => { - this._parents.push(this._activeDoc); - const presentation = Cast(Doc.UserDoc().activePresentation, Doc) as Doc; - - if (presentation) { - console.log("presentation clicked: " + presentation.title); - this._activeDoc = presentation; - this.switchCurrentView((userDoc: Doc) => presentation); - this.toggleSidebar(); + uploadAudio = () => { + const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; + const audioDoc = this._activeDoc; + const data = Cast(audioRightSidebar.data, listSpec(Doc)); + console.log(audioDoc.proto); + if (data) { + data.push(audioDoc); } + // this.recordAudio(); } - // mobileHome = () => { - // return ( - //
- //
- - //
- //
- - //
- //
- - //
- //
- - //
- //
- - //
- //
- // ); + // renderActiveCollection = (userDoc: Doc) => { + // if (this.activeContainer) { + // const active = Cast(this.activeContainer.data, listSpec(Doc)); + // if (active) { + // return ( + //
HELLO!
+ // ); + // } + // } // } - renderActiveCollection = (userDoc: Doc) => { - if (this.activeContainer) { - const active = Cast(this.activeContainer.data, listSpec(Doc)); - if (active) { - return ( -
HELLO!
- ); - } - } - } - onBack = (e: React.MouseEvent) => { this.switchCurrentView((userDoc: Doc) => this.mainDoc); InkingControl.Instance.switchTool(InkTool.None); // TODO: switch to previous tool @@ -445,6 +1833,44 @@ export class MobileInterface extends React.Component { } } + pinToPresentation = () => { + // Only making button available if it is an image + if (this._activeDoc.type === "image") { + const isPinned = this._activeDoc && Doc.isDocPinned(this._activeDoc); + return
{ + if (isPinned) { + DockedFrameRenderer.UnpinDoc(this._activeDoc); + } + else { + DockedFrameRenderer.PinDoc(this._activeDoc); + } + }}> + +
; + } + } + + setupDefaultPresentation = () => { + if (this._activeDoc.title !== "Presentation") { + this._parents.push(this._activeDoc); + } + + const presentation = Cast(Doc.UserDoc().activePresentation, Doc) as Doc; + + if (presentation) { + console.log(this._activeDoc.mobile); + console.log("presentation clicked: " + presentation.title); + this._activeDoc = presentation; + this.switchCurrentView((userDoc: Doc) => presentation); + this._homeMenu = false; + // this.toggleSidebar(); + } + } + onDragOver = (e: React.DragEvent) => { e.preventDefault(); e.stopPropagation(); @@ -453,7 +1879,7 @@ export class MobileInterface extends React.Component { render() { // const content = this.currentView === "main" ? this.mainContent : // this.currentView === "ink" ? this.inkContent : - // this.currentView === "upload" ? this.uploadContent : <>; + // this.currentView === "upload" ? this.uploadContent : <>;onDragOver={this.onDragOver} return (
{/* @@ -462,16 +1888,28 @@ export class MobileInterface extends React.Component { */} {/* */} - {this.displayWorkspaces()} - {this.pinToPresentation()} + {/* {this.menuOptions()} */} + {/* {this.displayHome()} */} +
+ {this.pinToPresentation()} + {this.downloadDocument()} + {this.drawInk()} + {this.uploadAudioButton()} + {this.colorTool()} +
+ + {this.displayWorkspaces()} + {this.renderDefaultContent()} + + {/* */} {/* */} {/* */} -
+ {/*
{this.renderDefaultContent()} -
+
*/} {/* */} {/* */} {/* @@ -485,6 +1923,13 @@ export class MobileInterface extends React.Component { } Scripting.addGlobal(function switchMobileView(doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) { return MobileInterface.Instance.switchCurrentView(doc, renderView, onSwitch); }); +Scripting.addGlobal(function openMobilePresentation() { return MobileInterface.Instance.setupDefaultPresentation(); }); +Scripting.addGlobal(function toggleMobileSidebar() { return MobileInterface.Instance.toggleSidebar(); }); +Scripting.addGlobal(function openMobileAudio() { return MobileInterface.Instance.recordAudio(); }); +Scripting.addGlobal(function openMobileSettings() { return SettingsManager.Instance.open(); }); +Scripting.addGlobal(function switchToLibrary() { return MobileInterface.Instance.switchToLibrary(); }); + + // WAS 2 // 1 @@ -527,15 +1972,7 @@ Scripting.addGlobal(function switchMobileView(doc: (userDoc: Doc) => Doc, render // } // } -// 2 -// Scripting.addGlobal(function onSwitchMobileInking() { return MobileInterface.Instance.onSwitchInking(); }); -// Scripting.addGlobal(function renderMobileInking() { return MobileInterface.Instance.renderInkingContent(); }); -// Scripting.addGlobal(function onSwitchMobileUpload() { return MobileInterface.Instance.onSwitchUpload(); }); -// Scripting.addGlobal(function renderMobileUpload() { return MobileInterface.Instance.renderUploadContent(); }); - // Scripting.addGlobal(function addWebToMobileUpload() { return MobileInterface.Instance.addWebToCollection(); }); - - -// 3 +// 3 // renderInkingContent = () => { // console.log("rendering inking content"); // // TODO: support panning and zooming @@ -583,4 +2020,4 @@ Scripting.addGlobal(function switchMobileView(doc: (userDoc: Doc) => Doc, render //
// ); // } - // } + // } \ No newline at end of file diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss index 250340e36..f600ff637 100644 --- a/src/mobile/MobileMenu.scss +++ b/src/mobile/MobileMenu.scss @@ -83,15 +83,17 @@ body { .sidebar { position: absolute; - top: 200px; + top: 120px; opacity: 0; right: -100%; width: 100%; - height: calc(100% - (200px)); - z-index: 5; + height: calc(100% - (120px)); + z-index: 101; background-color: whitesmoke; transition: all 400ms ease 50ms; padding: 20px; + // overflow-y: auto; + // -webkit-overflow-scrolling: touch; // border-right: 5px solid black; } @@ -106,14 +108,23 @@ body { font-size: 35px; text-transform: uppercase; color: black; + } -.sidebar .home { +.sidebar .ink:focus { + outline: 1px solid blue; +} + +.sidebarButtons { + top: 80px; + position: relative; +} + +.home { position: absolute; - top: -135px; - right: calc(50% + 80px); - transform: translate(0%, -50%); - font-size: 40; + top: 30px; + left: 30px; + font-size: 60; user-select: none; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; @@ -173,23 +184,26 @@ body { .back { position: absolute; - top: -140px; - left: 50px; - transform: translate(0%, -50%); - color: black; - font-size: 60; + top: 44%; + left: 42px; + background-color: black; + width: 50px; + height: 50px; + text-align: center; + border-radius: 10px; + transform: translate(0, -50%); + font-size: 25px; user-select: none; - text-transform: uppercase; z-index: 100; - font-family: Arial, Helvetica, sans-serif; } .pathbar { position: absolute; top: 118px; + left: 0px; background: #1a1a1a; - z-index: 20; + z-index: 120; border-radius: 0px; width: 100%; height: 80px; @@ -200,8 +214,8 @@ body { position: relative; font-size: 25; top: 50%; - width: 90%; - left: 3%; + width: 86%; + left: 12%; color: whitesmoke; transform: translate(0%, -50%); z-index: 20; @@ -214,27 +228,71 @@ body { text-transform: uppercase; } -.homeContainer { - position: relative; - top: 200px; - height: calc(100% - 250px); - width: 90%; - overflow: scroll; - left: 5%; - background-color: lightpink; -} - -.pinButton { +.docButton { position: relative; width: 100px; height: 100px; font-size: 90px; text-align: center; - left: 50%; - transform: translate(-50%, 0); border-style: solid; border-radius: 50px; border-width: medium; - background-color: pink; + margin: 10px; z-index: 100; +} + +.docButtonContainer { + top: 90%; + position: absolute; + display: flex; + transform: translate(-50%, 0); + left: 50%; + z-index: 100; +} + +.scrollmenu { + overflow: auto; + white-space: nowrap; +} + +.pathbarItem { + position: relative; + display: inline-flex; + color: whitesmoke; + text-align: center; + transform: translate(100px, 0px); + font-size: 30px; + padding: 10px; + text-transform: uppercase; +} + +.pathbarText { + font-family: sans-serif; + text-align: center; + height: 50px; + padding: 10px; + background-color: rgb(48, 40, 40); + font-size: 30px; + border-radius: 10px; + text-transform: uppercase; + margin-left: 20px; + position: relative; +} + + +.pathIcon { + transform: translate(0px, 8px); + position: relative; +} + +.hidePath { + position: absolute; + height: 100%; + width: 200px; + left: 0px; + top: 0px; + background-image: linear-gradient(to right, #1a1a1a, rgba(255, 0, 0, 0)); + text-align: center; + user-select: none; + z-index: 99; } \ No newline at end of file diff --git a/src/mobile/SideBar.scss b/src/mobile/SideBar.scss deleted file mode 100644 index fb6d13a2b..000000000 --- a/src/mobile/SideBar.scss +++ /dev/null @@ -1,79 +0,0 @@ -* { - margin:0px; - padding:0px; - box-sizing:border-box; - font-family:"Open Sans"; -} -body { - overflow:hidden; -} -.navbar { - position:fixed; - top:0px; - left:0px; - width:100vw; - height:50px; - background:rgba(0,0,0,0.95); -} -.navbar .toggle-btn { - position:absolute; - right:20px; - height:50px; - width:50px; - transition:all 300ms ease-in-out 200ms; -} -.navbar .toggle-btn span { - position:absolute; - top:50%; - left:50%; - transform:translate(-50%,-50%); - width:70%; - height:4px; - background:#eee; - transition:all 200ms ease; -} -.navbar .toggle-btn span:nth-child(1) { - transition:top 200ms ease-in-out; - top:30%; -} -.navbar .toggle-btn span:nth-child(3) { - transition:top 200ms ease-in-out; - top:70%; -} -.navbar .toggle-btn.active { - transition:transform 200ms ease-in-out 200ms; - transform:rotate(135deg); -} -.navbar .toggle-btn.active span:nth-child(1) { - top:50%; -} -.navbar .toggle-btn.active span:nth-child(2) { - transform:translate(-50%,-50%) rotate(90deg); -} -.navbar .toggle-btn.active span:nth-child(3) { - top:50%; -} -.sidebar { - position:absolute; - top:50px; - opacity:0; - right:-100%; - width:100vw; - height:calc(100vh - 45px); - z-index:5; - background:rgba(40,40,40,1); - transition:all 400ms ease 50ms; - padding:15px; -} -.sidebar .item { - width:100%; - padding:13px 6px; - border-bottom:1px solid rgba(200,200,200,0.7); - font-size:18px; - text-transform:uppercase; - color:rgba(250,250,250,0.95); -} -.sidebar.active { - right:0%; - opacity:1; -} \ No newline at end of file diff --git a/src/mobile/SideBar.tsx b/src/mobile/SideBar.tsx deleted file mode 100644 index a06069ed8..000000000 --- a/src/mobile/SideBar.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import React = require("react"); -import { observer } from "mobx-react"; -import "./SideBar.scss"; -import { computed } from "mobx"; -import { DocumentView } from '../client/views/nodes/DocumentView'; - -@observer -export class SideBar extends React.Component<{ views: (DocumentView | undefined)[], stack?: any }, {}>{ - - constructor(props: { views: (DocumentView | undefined)[] }) { - super(props); - } - - @computed - onClick() { - document.getElementsByClassName('sidebar') - [0].classList.toggle('active'); - } - - render() { - return ( - <> -
-
- - - -
-
-
-
Workspace1
-
Workspace2
-
Workspace3
-
- - ); - } - -} \ No newline at end of file diff --git a/src/mobile/WorkSpaceButton.scss b/src/mobile/WorkSpaceButton.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/mobile/WorkSpaceButton.tsx b/src/mobile/WorkSpaceButton.tsx deleted file mode 100644 index 70c3e6edc..000000000 --- a/src/mobile/WorkSpaceButton.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React = require('react'); -import { observer } from "mobx-react"; -import { observable } from 'mobx'; - -interface IProps { - open: boolean; -} - -@observer -export class MenuButton extends React.Component { - @observable static Instance: MenuButton; - - -} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 8d6fdb9460bd826c2be3a03cca9fa28a018b3e22 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Tue, 9 Jun 2020 22:06:14 +0800 Subject: adjust presentation view --- src/client/util/CurrentUserUtils.ts | 2 +- src/client/util/SettingsManager.scss | 4 +- src/client/views/nodes/PresBox.scss | 62 ++++++++++++++++++++-- .../views/presentationview/PresElementBox.scss | 48 ++++++++++++++--- src/mobile/ImageUpload.scss | 60 ++++++++++----------- src/mobile/ImageUpload.tsx | 1 + src/mobile/MobileInterface.tsx | 49 ++++++++++++++--- 7 files changed, 174 insertions(+), 52 deletions(-) (limited to 'src/client/views') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 8ed275efc..3d38e7370 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -409,7 +409,7 @@ export class CurrentUserUtils { const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, dragFactory?: Doc }[] = [ { title: "library", icon: "bars", click: 'switchToLibrary()', backgroundColor: "lightgrey" }, { title: "record", icon: "microphone", click: 'openMobileAudio()', backgroundColor: "lightgrey" }, - { title: "upload", icon: "upload", click: 'uploadMobileImage()', backgroundColor: "lightgrey" }, + { title: "upload", icon: "upload", click: 'uploadImageMobile()', backgroundColor: "lightgrey" }, { title: "presentation", icon: "desktop", click: 'openMobilePresentation()', backgroundColor: "lightgrey" }, { title: "ink", icon: "pen-nib", backgroundColor: "lightgrey" }, { title: "settings", icon: "cog", click: 'openMobileSettings()', backgroundColor: "lightgrey" } diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index 6513cb223..eb1045f70 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -133,4 +133,6 @@ } -} \ No newline at end of file +} + +@media only screen and (max-width: 1000px) {} \ No newline at end of file diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index d48000e16..61641c989 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -16,6 +16,7 @@ height: calc(100% - 25px); width: 100%; } + .presBox-buttons { width: 100%; background: gray; @@ -24,6 +25,7 @@ display: grid; grid-column-end: 4; grid-column-start: 1; + .presBox-viewPicker { height: 25; position: relative; @@ -31,10 +33,12 @@ grid-column: 1/2; min-width: 15px; } + select { background: #323232; color: white; } + .presBox-button { margin-right: 2.5%; margin-left: 2.5%; @@ -44,10 +48,12 @@ align-items: center; background: #323232; color: white; + svg { margin: auto; } } + .collectionViewBaseChrome-viewPicker { min-width: 50; width: 5%; @@ -56,17 +62,65 @@ display: inline-block; } } - .presBox-backward, .presBox-forward { + + .presBox-backward, + .presBox-forward { width: 25px; border-radius: 5px; - top:50%; + top: 50%; position: absolute; display: inline-block; } + .presBox-backward { - left:5; + left: 5; } + .presBox-forward { - right:5; + right: 5; + } +} + +@media only screen and (max-width: 1000px) { .presBox-cont .presBox-buttons { + position: absolute; + top: 85%; + left: 50%; + transform: translate(-50%, 0); + width: max-content; + height: 15%; + z-index: 2; + align-items: center; + background: rgba(0, 0, 0, 0); + padding-top: 5px; + padding-bottom: 5px; + display: inline-flex; + } + + .presBox-cont .presBox-listCont { + position: absolute; + top: 50; + height: calc(100% - 80px); + width: 100%; + } + + .presBox-cont .presBox-buttons .presBox-button { + margin-right: 10px; + margin-left: 10px; + height: 130px; + width: 130px; + font-size: 50; + border-radius: 5px; + display: flex; + align-items: center; + background: #323232; + color: white; + } + + .presBox-cont .presBox-buttons .presBox-viewPicker { + height: 50; + width: 100; + font-size: 30px; + position: relative; + min-width: 50px; } } \ No newline at end of file diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index ccd2e8947..1ddf3d8bc 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -13,9 +13,10 @@ -moz-user-select: none; -ms-user-select: none; user-select: none; - transition: all .1s; + transition: all .1s; padding: 0px; padding-bottom: 3px; + .documentView-node { position: absolute; z-index: 1; @@ -45,7 +46,7 @@ .presElementBox-closeIcon { border-radius: 20px; - transform:scale(0.7); + transform: scale(0.7); position: absolute; right: 0; top: 0; @@ -58,6 +59,7 @@ position: relative; width: 100%; height: auto; + .presElementBox-interaction { color: gray; float: left; @@ -65,6 +67,7 @@ width: 20px; height: 20px; } + .presElementBox-interaction-selected { color: white; float: left; @@ -90,15 +93,44 @@ display: flex; width: auto; justify-content: center; - margin:auto; + margin: auto; } .presElementBox-embeddedMask { - width:100%; - height:100%; + width: 100%; + height: 100%; position: absolute; - left:0; - top:0; + left: 0; + top: 0; background: transparent; - z-index:2; + z-index: 2; +} + +@media only screen and (max-width: 1000px) { + .presElementBox-buttons { + display: inline-flex; + position: relative; + width: 100%; + } + + .presElementBox-item { + display: inline-flex; + } + + .presElementBox-buttons .presElementBox-interaction { + color: gray; + float: left; + padding: 0px; + width: 50; + height: 40; + } + + .presElementBox-buttons .presElementBox-interaction-selected { + color: white; + float: left; + padding: 0px; + width: 50; + height: 50; + border: solid 1px darkgray; + } } \ No newline at end of file diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss index 6ebf33438..afc4cc21e 100644 --- a/src/mobile/ImageUpload.scss +++ b/src/mobile/ImageUpload.scss @@ -1,12 +1,12 @@ @import "../client/views/globalCssVariables.scss"; .imgupload_cont { - // display: flex; - // justify-content: center; - // flex-direction: column; - // align-items: center; - // width: 100vw; - // height: 100vh; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + width: 90vw; + height: 90vh; .upload_label { font-weight: normal !important; @@ -31,31 +31,31 @@ font-size: 3em; } - .input_file { - display: none; - } + // .input_file { + // display: none; + // } + + // // .upload_label, + // // .upload_button { + // // background: $dark-color; + // // font-size: 500%; + // // font-family: $sans-serif; + // // text-align: center; + // // padding: 5vh; + // // margin-bottom: 20px; + // // color: white; + // // } - // .upload_label, // .upload_button { - // background: $dark-color; - // font-size: 500%; - // font-family: $sans-serif; - // text-align: center; - // padding: 5vh; - // margin-bottom: 20px; - // color: white; + // width: 100%; + // padding: 13px 12px; + // border-bottom: 1px solid rgba(200, 200, 200, 0.7); + // font-family: Arial, Helvetica, sans-serif; + // font-style: normal; + // font-weight: normal; + // user-select: none; + // font-size: 35px; + // text-transform: uppercase; + // color: black; // } - - .upload_button { - width: 100%; - padding: 13px 12px; - border-bottom: 1px solid rgba(200, 200, 200, 0.7); - font-family: Arial, Helvetica, sans-serif; - font-style: normal; - font-weight: normal; - user-select: none; - font-size: 35px; - text-transform: uppercase; - color: black; - } } \ No newline at end of file diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index c35c4a917..8d7ccf450 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -12,6 +12,7 @@ import { Doc, Opt } from '../fields/Doc'; import { Cast } from '../fields/Types'; import { listSpec } from '../fields/Schema'; import { List } from '../fields/List'; +import { Scripting } from '../client/util/Scripting'; export interface ImageUploadProps { Document: Doc; diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index c51b5b654..e2de7fed2 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -6,7 +6,7 @@ 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, - faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft, faBars, faTh, faChevronLeft + faThumbtack, faTree, faTv, faBook, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft, faBars, faTh, faChevronLeft } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, observable } from 'mobx'; @@ -43,7 +43,7 @@ library.add(faTasks, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTras 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, - faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft, faBars, faTh, faChevronLeft); + faThumbtack, faTree, faTv, faUndoAlt, faBook, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft, faBars, faTh, faChevronLeft); // @observer // export class MobileInterface extends React.Component { @@ -948,7 +948,8 @@ export class MobileInterface extends React.Component { @computed private get userDoc() { return Doc.UserDoc(); } @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; } // @computed private get activeContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; } - @observable private mainDoc: any = CurrentUserUtils.setupMobileMenu(); + // Sets up new mobile menu only if activeMobile already exists + @observable private mainDoc: any = Doc.UserDoc().activeMobile !== undefined ? console.log("true") : CurrentUserUtils.setupMobileMenu(); @observable private renderView?: () => JSX.Element; @observable private audioState: any; @observable private activeToolbar: boolean = false; @@ -978,7 +979,7 @@ export class MobileInterface extends React.Component { componentDidMount = () => { library.add(...[faPenNib, faHighlighter, faEraser, faMousePointer, faThumbtack]); if (this.userDoc.activeMobile) { - console.log(Doc.UserDoc().activeMobile) + console.log(Doc.UserDoc().activeMobile); } if (this.userDoc && !this.mainContainer) { this.userDoc.activeMobile = this._homeDoc; @@ -1027,6 +1028,9 @@ export class MobileInterface extends React.Component { }); } + /** + * Handles the functionality to toggle the sidebar + */ toggleSidebar = () => { if (this._open === false) { this._open = true; @@ -1049,6 +1053,9 @@ export class MobileInterface extends React.Component { } } + /** + * Method called when 'Library' button is pressed + */ switchToLibrary = () => { this._parents.push(this._activeDoc); this.switchCurrentView((userDoc: Doc) => this._library); @@ -1057,6 +1064,9 @@ export class MobileInterface extends React.Component { this.toggleSidebar(); } + /** + * Back method for navigating within library + */ back = () => { let header = document.getElementById("header") as HTMLElement; let doc = Cast(this._parents.pop(), Doc) as Doc; @@ -1083,6 +1093,9 @@ export class MobileInterface extends React.Component { this._ink = false; } + /** + * Return 'Home", which implies returning to 'Home' buttons + */ returnHome = () => { if (this._homeMenu === false || this._open === true) { this._homeMenu = true; @@ -1096,6 +1109,9 @@ export class MobileInterface extends React.Component { } } + /** + * Return to primary Workspace in library (Workspaces Doc) + */ returnMain = () => { console.log("home"); this._parents = []; @@ -1108,6 +1124,9 @@ export class MobileInterface extends React.Component { // @computed get onChildClickHandler() { return ScriptCast(Doc.UserDoc.onClick); } + /** + * DocumentView for graphic display of all documents + */ displayWorkspaces = () => { if (this.mainContainer) { const backgroundColor = () => "white"; @@ -1174,9 +1193,13 @@ export class MobileInterface extends React.Component { } } - returnWidth = () => window.innerWidth; - returnHeight = () => (window.innerHeight - 300); + returnWidth = () => window.innerWidth; //The windows width + returnHeight = () => (window.innerHeight - 300); //Calculating the windows height (-300 to account for topbar) + /** + * Handles the click functionality in the library panel + * @param doc: doc for which the method is called + */ handleClick(doc: Doc) { let children = DocListCast(doc.data); if (doc.type !== "collection") { @@ -1311,6 +1334,7 @@ export class MobileInterface extends React.Component { // } } + // Handles when user clicks on document in the pathbar handlePathClick = (doc: Doc, index: number) => { if (doc === this._library) { this._activeDoc = doc; @@ -1709,7 +1733,6 @@ export class MobileInterface extends React.Component { const presentation = Cast(Doc.UserDoc().activePresentation, Doc) as Doc; if (presentation) { - console.log(this._activeDoc.mobile); console.log("presentation clicked: " + presentation.title); this._activeDoc = presentation; this.switchCurrentView((userDoc: Doc) => presentation); @@ -1748,7 +1771,6 @@ export class MobileInterface extends React.Component { {this.displayWorkspaces()} {this.renderDefaultContent()} - {/* */} {/* @@ -1767,14 +1789,25 @@ export class MobileInterface extends React.Component {
); } + + uploadImage = () => { + console.log("hello world of images"); + } } + + +const inputRef = React.createRef(); + + Scripting.addGlobal(function switchMobileView(doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) { return MobileInterface.Instance.switchCurrentView(doc, renderView, onSwitch); }); Scripting.addGlobal(function openMobilePresentation() { return MobileInterface.Instance.setupDefaultPresentation(); }); Scripting.addGlobal(function toggleMobileSidebar() { return MobileInterface.Instance.toggleSidebar(); }); Scripting.addGlobal(function openMobileAudio() { return MobileInterface.Instance.recordAudio(); }); Scripting.addGlobal(function openMobileSettings() { return SettingsManager.Instance.open(); }); Scripting.addGlobal(function switchToLibrary() { return MobileInterface.Instance.switchToLibrary(); }); +Scripting.addGlobal(function uploadImageMobile() { return MobileInterface.Instance.uploadImage(); }); + // WAS 2 -- cgit v1.2.3-70-g09d2 From 7a7adfdb6fb6131ba2012d3e8aeb145e87773c81 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Tue, 9 Jun 2020 22:43:16 +0800 Subject: updated settings view for mobile --- src/client/util/SettingsManager.scss | 31 ++++++++++++++++++++++++++++++- src/client/views/nodes/PresBox.scss | 30 +++++++++++++++++++++++++++++- src/mobile/MobileInterface.tsx | 2 +- 3 files changed, 60 insertions(+), 3 deletions(-) (limited to 'src/client/views') diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index eb1045f70..4d0fe5b8a 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -135,4 +135,33 @@ } } -@media only screen and (max-width: 1000px) {} \ No newline at end of file +@media only screen and (max-width: 1000px) { + .settings-interface { + background-color: whitesmoke !important; + color: grey; + width: 80vw; + height: 25vh; + } + + .settings-interface .settings-body .settings-content input { + border-radius: 5px; + border: none; + font-size: 30; + padding: 4px; + min-width: 100%; + margin: 2px 0; + } + + .settings-interface button { + width: 100%; + font-size: 30px; + align-self: center; + background: #b2cef8; + margin-top: 4px; + } + + .settings-interface .settings-heading { + letter-spacing: .5em; + font-size: 25; + } +} \ No newline at end of file diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index 61641c989..56c6b4357 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -81,7 +81,8 @@ } } -@media only screen and (max-width: 1000px) { .presBox-cont .presBox-buttons { +@media only screen and (max-width: 1000px) { + .presBox-cont .presBox-buttons { position: absolute; top: 85%; left: 50%; @@ -123,4 +124,31 @@ position: relative; min-width: 50px; } + + .presElementBox-closeIcon { + border-radius: 20px; + transform: scale(2); + position: absolute; + right: 20; + top: 20; + padding: 8px; + } + + .presElementBox-buttons { + display: inline-flex; + position: absolute; + right: 0; + width: 50%; + } + + .presElementBox-name { + font-size: 30px; + position: absolute; + display: inline-block; + top: 10px; + width: 50%; + text-overflow: ellipsis; + overflow: hidden; + white-space: pre; + } } \ No newline at end of file diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index 0f6f51295..d8ac7d1f1 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -949,7 +949,7 @@ export class MobileInterface extends React.Component { @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; } // @computed private get activeContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; } // Sets up new mobile menu only if activeMobile already exists - @observable private mainDoc: any = Doc.UserDoc().activeMobile !== undefined ? console.log("true") : CurrentUserUtils.setupMobileMenu(); + @observable private mainDoc: any = CurrentUserUtils.setupMobileMenu(); @observable private renderView?: () => JSX.Element; @observable private audioState: any; @observable private activeToolbar: boolean = false; -- cgit v1.2.3-70-g09d2 From bc80c711e7ab3044a0859c4b5d74e8e49cc5d077 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Wed, 10 Jun 2020 03:21:32 +0800 Subject: image upload functions w/ bugs - choose an image does not immediately update - close button does not move with rest of upload image --- src/client/util/CurrentUserUtils.ts | 7 +- src/client/util/SettingsManager.scss | 2 +- src/client/views/nodes/PresBox.scss | 43 ++----- .../views/presentationview/PresElementBox.scss | 51 +++++++- src/mobile/ImageUpload.scss | 138 +++++++++++++++------ src/mobile/ImageUpload.tsx | 74 ++++++++++- src/mobile/MobileInterface.tsx | 46 ++++++- 7 files changed, 273 insertions(+), 88 deletions(-) (limited to 'src/client/views') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index d99d11c1f..563f8cfe4 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -430,7 +430,7 @@ export class CurrentUserUtils { } static setupMobileMenu() { - const menu = Cast(Docs.Create.StackingDocument(CurrentUserUtils.setupMobileButtons(), { + const menu = Cast(Docs.Create.StackingDocument(CurrentUserUtils.setupMobileButtons2(), { _width: 980, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "home", _autoHeight: true, _yMargin: 80 }), Doc) as Doc; return menu; @@ -647,7 +647,7 @@ export class CurrentUserUtils { const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, info: string, dragFactory?: Doc }[] = [ { title: "LIBRARY", icon: "bars", click: 'switchToLibrary()', backgroundColor: "#ffd6d6", info: "Navigate and access all of your documents within their respective collections" }, { title: "RECORD", icon: "microphone", click: 'openMobileAudio()', backgroundColor: "#ffbfbf", info: "Use your mobile to record audio and access it on Dash Web." }, - { title: "UPLOAD", icon: "upload", click: 'console.log("hi")', backgroundColor: "#ff9e9e", info: "Upload an image from your mobile device so it can be accessed on Dash Web" }, + { title: "UPLOAD", icon: "upload", click: 'uploadImageMobile()', backgroundColor: "#ff9e9e", info: "Upload an image from your mobile device so it can be accessed on Dash Web" }, { title: "PRESENTATION", icon: "desktop", click: 'openMobilePresentation()', backgroundColor: "#ff8080", info: "Use your phone as a remote for you presentation." }, // { title: "INK", icon: "pen-nib", backgroundColor: "lightgrey", info: "Doodle and draw with ink on your mobile and have it directly available on Dash Web" }, { title: "SETTINGS", icon: "cog", click: 'openMobileSettings()', backgroundColor: "#ff5e5e", info: "Change your password, log out, or manage your account security" } @@ -658,7 +658,7 @@ export class CurrentUserUtils { static mobileButton = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.MulticolumnDocument(docs, { ...opts, dropAction: "alias", removeDropProperties: new List(["dropAction"]), _nativeWidth: 900, _nativeHeight: 250, _width: 900, _height: 250, _yMargin: 15, - borderRounding: "0", boxShadow: "0 0", _chromeStatus: "disabled", + borderRounding: "5px", boxShadow: "0 0", _chromeStatus: "disabled", })) as any as Doc static mobileTextContainer = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.MultirowDocument(docs, { @@ -720,6 +720,7 @@ export class CurrentUserUtils { } } + static setupClickEditorTemplates(doc: Doc) { if (doc["clickFuncs-child"] === undefined) { const openInTarget = Docs.Create.ScriptingDocument(ScriptField.MakeScript( diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index 4d0fe5b8a..1eac9303b 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -140,7 +140,7 @@ background-color: whitesmoke !important; color: grey; width: 80vw; - height: 25vh; + height: 400px; } .settings-interface .settings-body .settings-content input { diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index 56c6b4357..2bb249ee4 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -84,7 +84,7 @@ @media only screen and (max-width: 1000px) { .presBox-cont .presBox-buttons { position: absolute; - top: 85%; + top: 70%; left: 50%; transform: translate(-50%, 0); width: max-content; @@ -107,10 +107,10 @@ .presBox-cont .presBox-buttons .presBox-button { margin-right: 10px; margin-left: 10px; - height: 130px; - width: 130px; - font-size: 50; - border-radius: 5px; + height: 250; + width: 250; + font-size: 70; + border-radius: 25px; display: flex; align-items: center; background: #323232; @@ -118,37 +118,12 @@ } .presBox-cont .presBox-buttons .presBox-viewPicker { + top: -70; + left: 2.5%; height: 50; - width: 100; - font-size: 30px; - position: relative; - min-width: 50px; - } - - .presElementBox-closeIcon { - border-radius: 20px; - transform: scale(2); - position: absolute; - right: 20; - top: 20; - padding: 8px; - } - - .presElementBox-buttons { - display: inline-flex; - position: absolute; - right: 0; - width: 50%; - } - - .presElementBox-name { + width: 95%; font-size: 30px; position: absolute; - display: inline-block; - top: 10px; - width: 50%; - text-overflow: ellipsis; - overflow: hidden; - white-space: pre; + min-width: 50px; } } \ No newline at end of file diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index 1ddf3d8bc..ec82b0c51 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -122,7 +122,7 @@ float: left; padding: 0px; width: 50; - height: 40; + height: 50; } .presElementBox-buttons .presElementBox-interaction-selected { @@ -133,4 +133,53 @@ height: 50; border: solid 1px darkgray; } + + .presElementBox-closeIcon { + border-radius: 20px; + transform: scale(1.5); + position: absolute; + right: 10; + top: 10; + padding: 8px; + } + + .presElementBox-buttons { + display: inline-flex; + position: absolute; + top: 0; + right: 0; + width: 50%; + } + + .presElementBox-name { + font-size: 30px; + position: absolute; + display: inline-block; + top: 10px; + width: 50%; + text-overflow: ellipsis; + overflow: hidden; + white-space: pre; + } + + .presElementBox-item { + display: inline-block; + background-color: #eeeeee; + pointer-events: all; + width: 100%; + min-height: 100%; + height: max-content; + outline-color: maroon; + outline-style: dashed; + border-radius: 6px; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + transition: all .1s; + padding: 0px; + padding-bottom: 3px; + } } \ No newline at end of file diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss index afc4cc21e..6c782d4d8 100644 --- a/src/mobile/ImageUpload.scss +++ b/src/mobile/ImageUpload.scss @@ -5,21 +5,20 @@ justify-content: center; flex-direction: column; align-items: center; - width: 90vw; - height: 90vh; .upload_label { - font-weight: normal !important; + font-size: 3em; + font-weight: 700; + color: white; + background-color: black; + display: inline-block; + margin: 10; width: 100%; - padding: 13px 12px; - border-bottom: 1px solid rgba(200, 200, 200, 0.7); - font-family: Arial, Helvetica, sans-serif; - font-style: normal; - font-weight: normal; - user-select: none; - font-size: 35px; - text-transform: uppercase; - color: black; + border-radius: 10px; + } + + .upload_label:hover { + background-color: darkred; } .button_file { @@ -31,31 +30,92 @@ font-size: 3em; } - // .input_file { - // display: none; - // } - - // // .upload_label, - // // .upload_button { - // // background: $dark-color; - // // font-size: 500%; - // // font-family: $sans-serif; - // // text-align: center; - // // padding: 5vh; - // // margin-bottom: 20px; - // // color: white; - // // } - - // .upload_button { - // width: 100%; - // padding: 13px 12px; - // border-bottom: 1px solid rgba(200, 200, 200, 0.7); - // font-family: Arial, Helvetica, sans-serif; - // font-style: normal; - // font-weight: normal; - // user-select: none; - // font-size: 35px; - // text-transform: uppercase; - // color: black; - // } + .inputfile { + width: 0.1px; + height: 0.1px; + opacity: 0; + overflow: hidden; + position: absolute; + z-index: -1; + } + + .inputfile+label { + font-size: 3em; + font-weight: 700; + color: white; + background-color: black; + display: inline-block; + margin: 10px; + width: 100%; + border-radius: 10px; + } + + .inputfile:focus+label, + .inputfile+label:hover { + background-color: darkred; + } + +} + +.backgroundUpload { + height: 100vh; + top: 0; + z-index: 999; + width: 100vw; + position: absolute; + background-color: lightgrey; + opacity: 0.4; +} + +.image-upload { + top: 100%; + opacity: 0; +} + +.image-upload.active { + top: 0; + position: absolute; + z-index: 999; + height: 100vh; + width: 100vw; + opacity: 1; +} + +.uploadContainer { + top: 40; + position: absolute; + z-index: 1000; + height: 20vh; + width: 80vw; + opacity: 1; +} + +.closeUpload { + position: absolute; + border-radius: 10px; + top: 39.7%; + color: grey; + font-size: 40; + left: 65.8%; + z-index: 1002; + padding: 0px 3px; + background: aliceblue; + transition: 0.5s ease all; + border: 3px solid; + border-color: black; +} + +.loadingImage { + display: inline-flex; + width: max-content; +} + +.loadingSlab { + position: relative; + width: 30px; + height: 30px; + margin: 10; + border-radius: 20px; + opacity: 0.3; + background-color: black; } \ No newline at end of file diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index 8d7ccf450..df2beb85a 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -13,6 +13,7 @@ import { Cast } from '../fields/Types'; import { listSpec } from '../fields/Schema'; import { List } from '../fields/List'; import { Scripting } from '../client/util/Scripting'; +import MainViewModal from '../client/views/MainViewModal'; export interface ImageUploadProps { Document: Doc; @@ -35,6 +36,10 @@ export class Uploader extends React.Component { console.log("uploader click"); try { this.status = "initializing protos"; + const slab1 = document.getElementById("slab1"); + if (slab1) { + slab1.style.opacity = "1"; + } await Docs.Prototypes.initialize(); const imgPrev = document.getElementById("img_preview"); if (imgPrev) { @@ -44,8 +49,15 @@ export class Uploader extends React.Component { const name = files[0].name; const res = await Networking.UploadFilesToServer(files[0]); this.status = "uploading image"; + const slab2 = document.getElementById("slab2"); + if (slab2) { + slab2.style.opacity = "1"; + } this.status = "upload image, getting json"; - + const slab3 = document.getElementById("slab3"); + if (slab3) { + slab3.style.opacity = "1"; + } res.map(async ({ result }) => { if (result instanceof Error) { return; @@ -54,7 +66,15 @@ export class Uploader extends React.Component { const doc = Docs.Create.ImageDocument(path, { _nativeWidth: 200, _width: 200, title: name }); this.status = "getting user document"; - + const slab4 = document.getElementById("slab4"); + if (slab4) { + slab4.style.opacity = "1"; + } + this.status = "upload image, getting json"; + const slab5 = document.getElementById("slab5"); + if (slab5) { + slab5.style.opacity = "1"; + } const res = await rp.get(Utils.prepend("/getUserDocumentId")); if (!res) { throw new Error("No user id returned"); @@ -66,6 +86,10 @@ export class Uploader extends React.Component { } if (pending) { this.status = "has pending docs"; + const slab6 = document.getElementById("slab6"); + if (slab6) { + slab6.style.opacity = "1"; + } const data = await Cast(pending.data, listSpec(Doc)); if (data) { data.push(doc); @@ -74,6 +98,10 @@ export class Uploader extends React.Component { } this.status = "finished"; console.log("hi"); + const slab7 = document.getElementById("slab7"); + if (slab7) { + slab7.style.opacity = "1"; + } } }); @@ -84,19 +112,55 @@ export class Uploader extends React.Component { } } - render() { + // Updates label after a files is selected (so user knows a file is uploaded) + inputLabel = async () => { + const files: FileList | null = inputRef.current!.files; + await files; + var inputs = document.querySelectorAll('.inputFile'); + const label = document.getElementById("label"); + if (files && label) { + label.innerText = files[0].name; + } + } + + private get uploadInterface() { return (
- - + + +
Upload Image
{/*
Upload
*/} {/*

{this.status}

{this.error}

*/} +
+
+
+
+
+
+
+
+
); } + @observable private dialogueBoxOpacity = 1; + @observable private overlayOpacity = 0.4; + + render() { + return ( + + ); + } + } diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index d8ac7d1f1..c4b2ffbc1 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import { library } from '@fortawesome/fontawesome-svg-core'; import { - faTasks, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, + faTasks, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, faTerminal, faToggleOn, faFile as fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard, faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, @@ -26,6 +26,7 @@ import { InkingControl } from '../client/views/InkingControl'; import "./MobileInterface.scss"; import "./MobileMenu.scss"; import "./MobileHome.scss"; +import "./ImageUpload.scss"; import { DocumentManager } from '../client/util/DocumentManager'; import SettingsManager from '../client/util/SettingsManager'; import { Uploader } from "./ImageUpload"; @@ -38,7 +39,7 @@ import { SelectionManager } from "../client/util/SelectionManager"; import { SketchPicker } from "react-color"; import { ScriptField } from "../fields/ScriptField"; -library.add(faTasks, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, +library.add(faTasks, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, faTerminal, faToggleOn, fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard, faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, @@ -1240,7 +1241,7 @@ export class MobileInterface extends React.Component { // if (this._homeMenu == false) { let docArray = this.createPathname(); let items = docArray.map((doc: Doc, index: any) => { - if (index == 0) { + if (index === 0) { return (
{/* {this.menuOptions()} */} {/* {this.displayHome()} */} +
+ {this.uploadImage()} +
{this.pinToPresentation()} {this.downloadDocument()} @@ -1719,8 +1723,40 @@ export class MobileInterface extends React.Component { ); } + @observable private imageUploadActive: boolean = false; + + @action + toggleUpload = () => this.imageUploadActive = !this.imageUploadActive + + @action + closeUpload = () => { + this.imageUploadActive = false; + } + + // toggleUpload = () => { + // if (this.imageUploadActive === true) { + // this.imageUploadActive = false; + // } else { + // this.imageUploadActive = true; + // } + // } + uploadImage = () => { - console.log("hello world of images"); + if (this.imageUploadActive) { + console.log("active"); + } else if (!this.imageUploadActive) { + + } + console.log("upload"); + const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc; + return ( +
+
+ +
+ +
+ ); } } @@ -1735,7 +1771,7 @@ Scripting.addGlobal(function toggleMobileSidebar() { return MobileInterface.Inst Scripting.addGlobal(function openMobileAudio() { return MobileInterface.Instance.recordAudio(); }); Scripting.addGlobal(function openMobileSettings() { return SettingsManager.Instance.open(); }); Scripting.addGlobal(function switchToLibrary() { return MobileInterface.Instance.switchToLibrary(); }); -Scripting.addGlobal(function uploadImageMobile() { return MobileInterface.Instance.uploadImage(); }); +Scripting.addGlobal(function uploadImageMobile() { return MobileInterface.Instance.toggleUpload(); }); -- cgit v1.2.3-70-g09d2 From 20731a4d4d65fc29898faa7b1c81243bd12b0d9d Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Thu, 11 Jun 2020 00:18:18 +0800 Subject: css updates to UI --- .../views/collections/CollectionStackingView.scss | 16 ++++++++++- src/mobile/MobileMenu.scss | 33 +++++++++++++++++++++- 2 files changed, 47 insertions(+), 2 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss index 203c51163..714ff46a9 100644 --- a/src/client/views/collections/CollectionStackingView.scss +++ b/src/client/views/collections/CollectionStackingView.scss @@ -33,8 +33,9 @@ .collectionStackingViewFieldColumn { height: max-content; } + .collectionStackingViewFieldColumnDragging { - height:100%; + height: 100%; } .collectionSchemaView-previewDoc { @@ -421,4 +422,17 @@ .rc-switch-checked .rc-switch-inner { left: 8px; } +} + +@media only screen and (max-width: 1000px) { + + .collectionStackingView .collectionStackingView-columnDragger, + .collectionMasonryView .collectionStackingView-columnDragger { + width: 30; + transform: translate(0, -40px); + height: 30; + font-size: 40; + position: absolute; + margin-left: -5; + } } \ No newline at end of file diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss index 669b55601..41cd9c321 100644 --- a/src/mobile/MobileMenu.scss +++ b/src/mobile/MobileMenu.scss @@ -122,7 +122,7 @@ body { font-size: 35px; text-transform: uppercase; color: black; - + } .sidebar .ink:focus { @@ -368,4 +368,35 @@ body { border-style: solid; border-width: 3px; border-radius: 100%; +} + +.homeSwitch { + position: absolute; + top: 212; + right: 36px; + display: inline-flex; + width: max-content; + z-index: 99; + height: 70px; +} + +.list { + width: 70px; + height: 70px; + margin: 5; + padding: 10; + align-items: center; + text-align: center; + font-size: 50; + border-style: solid; + border-width: 3; + border-color: black; + background: whitesmoke; + align-self: center; + border-radius: 10px; +} + +.list.active { + color: darkred; + border-color: darkred; } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From b13adb6e2620d80c019c7c8f6d344ba5ca2fcec2 Mon Sep 17 00:00:00 2001 From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com> Date: Wed, 10 Jun 2020 22:43:35 -0700 Subject: finished up image upload and fixed bugs with pathbar and clicking workspaces twice --- src/client/views/GestureOverlay.tsx | 12 ++++++------ src/mobile/ImageUpload.scss | 12 ++++++++++++ src/mobile/ImageUpload.tsx | 11 +++++++++-- src/mobile/MobileInterface.tsx | 28 ++++++++++++++++++++-------- src/mobile/MobileMenu.scss | 1 + 5 files changed, 48 insertions(+), 16 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index a11c97b09..8cf2cdf55 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -115,12 +115,12 @@ export default class GestureOverlay extends Touchable { onReactTouchStart = (te: React.TouchEvent) => { document.removeEventListener("touchmove", this.onReactHoldTouchMove); document.removeEventListener("touchend", this.onReactHoldTouchEnd); - // if (RadialMenu.Instance._display === true) { - // te.preventDefault(); - // te.stopPropagation(); - // RadialMenu.Instance.closeMenu(); - // return; - // } + if (RadialMenu.Instance?._display === true) { + te.preventDefault(); + te.stopPropagation(); + RadialMenu.Instance.closeMenu(); + return; + } // this chunk adds new touch targets to a map of pointer events; this helps us keep track of individual fingers // so that we can know, for example, if two fingers are pinching out or in. diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss index 6c782d4d8..d5ab31469 100644 --- a/src/mobile/ImageUpload.scss +++ b/src/mobile/ImageUpload.scss @@ -5,6 +5,7 @@ justify-content: center; flex-direction: column; align-items: center; + max-width: 400px; .upload_label { font-size: 3em; @@ -17,6 +18,13 @@ border-radius: 10px; } + .file { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + direction: ltr; + } + .upload_label:hover { background-color: darkred; } @@ -55,6 +63,10 @@ background-color: darkred; } + .status { + font-size: 2em; + } + } .backgroundUpload { diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index 504e4ceae..8f050aedd 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -32,6 +32,7 @@ export class Uploader extends React.Component { @observable error: string = ""; @observable status: string = ""; @observable nm: string = "Choose an image"; + @observable process: string = ""; onClick = async () => { console.log("uploader click"); @@ -48,6 +49,7 @@ export class Uploader extends React.Component { console.log("hi"); const files: FileList | null = inputRef.current!.files; if (files && files.length !== 0) { + this.process = "Uploading Image" console.log(files[0]); const name = files[0].name; const res = await Networking.UploadFilesToServer(files[0]); @@ -100,15 +102,18 @@ export class Uploader extends React.Component { pending.data = new List([doc]); } this.status = "finished"; + console.log("hi"); const slab7 = document.getElementById("slab7"); if (slab7) { slab7.style.opacity = "1"; } - + this.process = "Image Uploaded"; } }); + } else { + this.process = "No file selected"; } setTimeout(this.clearUpload, 3000); } @@ -163,6 +168,7 @@ export class Uploader extends React.Component { if (inputRef.current) { inputRef.current.value = ""; } + this.process = ""; console.log(inputRef.current!.files); } @@ -172,7 +178,7 @@ export class Uploader extends React.Component { return (
- +
Upload Image
{/*
Upload
*/} @@ -187,6 +193,7 @@ export class Uploader extends React.Component {
+

{this.process}

); } diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index 820a6885d..0b5855e1f 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -1115,7 +1115,7 @@ export class MobileInterface extends React.Component { */ returnMain = () => { console.log("home"); - this._parents = []; + this._parents = [this._homeDoc]; // this.toggleSidebar(); this._activeDoc = this._library; this.switchCurrentView((userDoc: Doc) => this._library); @@ -1201,7 +1201,7 @@ export class MobileInterface extends React.Component { * Handles the click functionality in the library panel * @param doc: doc for which the method is called */ - handleClick(doc: Doc) { + handleClick = async (doc: Doc) => { let children = DocListCast(doc.data); if (doc.type !== "collection") { this._parents.push(this._activeDoc); @@ -1244,12 +1244,24 @@ export class MobileInterface extends React.Component { let items = docArray.map((doc: Doc, index: any) => { if (index === 0) { return ( -
-
this.handlePathClick(doc, index)}>{doc.title} -
-
); + <> + {this._homeMenu ? +
+
this.handlePathClick(doc, index)}>{doc.title} +
+
+ : +
+
this.handlePathClick(doc, index)}>{doc.title} +
+
} + ); + } else if (doc === this._activeDoc) { return (
diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss index 669b55601..b98b51f31 100644 --- a/src/mobile/MobileMenu.scss +++ b/src/mobile/MobileMenu.scss @@ -309,6 +309,7 @@ body { text-align: center; user-select: none; z-index: 99; + pointer-events: none; } .toolbar { -- cgit v1.2.3-70-g09d2 From 2f1714f0175f8fc766ba030848f5469e429307f4 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Fri, 12 Jun 2020 11:17:40 +0800 Subject: menu bug fix --- src/client/views/GestureOverlay.tsx | 2 +- src/client/views/nodes/AudioBox.scss | 206 +++++-- src/client/views/nodes/ColorBox.tsx | 4 +- src/mobile/MobileInterface.tsx | 1012 ++-------------------------------- src/mobile/MobileMenu.scss | 5 +- 5 files changed, 192 insertions(+), 1037 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 1879f3096..3bb80abd0 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -107,7 +107,7 @@ export default class GestureOverlay extends Touchable { onReactTouchStart = (te: React.TouchEvent) => { document.removeEventListener("touchmove", this.onReactHoldTouchMove); document.removeEventListener("touchend", this.onReactHoldTouchEnd); - if (RadialMenu.Instance._display === true) { + if (RadialMenu.Instance?._display === true) { te.preventDefault(); te.stopPropagation(); RadialMenu.Instance.closeMenu(); diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index 53b54d7e4..61ce4bd13 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -1,141 +1,169 @@ -.audiobox-container, .audiobox-container-interactive { +.audiobox-container, +.audiobox-container-interactive { width: 100%; height: 100%; position: inherit; - display:flex; + display: flex; pointer-events: all; - cursor:default; + cursor: default; + .audiobox-buttons { display: flex; width: 100%; align-items: center; } + .audiobox-handle { - width:20px; - height:100%; - display:inline-block; + width: 20px; + height: 100%; + display: inline-block; } - .audiobox-control, .audiobox-control-interactive { - top:0; + + .audiobox-control, + .audiobox-control-interactive { + top: 0; max-height: 32px; width: 100%; - display:inline-block; + display: inline-block; pointer-events: none; } + .audiobox-control-interactive { pointer-events: all; } + .audiobox-record { pointer-events: all; - width:100%; - height:100%; + width: 100%; + height: 100%; position: relative; pointer-events: none; } + .audiobox-record-interactive { pointer-events: all; - width:100%; - height:100%; + width: 100%; + height: 100%; position: relative; } + .audiobox-controls { - width:100%; - height:100%; + width: 100%; + height: 100%; position: relative; display: flex; padding-left: 2px; + .audiobox-player { - margin-top:auto; - margin-bottom:auto; - width:100%; + margin-top: auto; + margin-bottom: auto; + width: 100%; height: 80%; position: relative; padding-right: 5px; display: flex; - .audiobox-playhead, .audiobox-dictation { + + .audiobox-playhead, + .audiobox-dictation { position: relative; margin-top: auto; margin-bottom: auto; width: 25px; padding: 2px; } + .audiobox-dictation { align-items: center; display: inherit; background: dimgray; } + .audiobox-timeline { - position:relative; - height:100%; - width:100%; + position: relative; + height: 100%; + width: 100%; background: white; border: gray solid 1px; border-radius: 3px; + .audiobox-current { width: 1px; - height:100%; + height: 100%; background-color: red; position: absolute; } - .audiobox-linker, .audiobox-linker-mini { - position:absolute; - width:15px; - min-height:10px; - height:15px; - margin-left:-2.55px; - background:gray; + + .audiobox-linker, + .audiobox-linker-mini { + position: absolute; + width: 15px; + min-height: 10px; + height: 15px; + margin-left: -2.55px; + background: gray; border-radius: 100%; - opacity:0.9; + opacity: 0.9; background-color: transparent; box-shadow: black 2px 2px 1px; + .linkAnchorBox-cont { position: relative !important; - height: 100% !important; + height: 100% !important; width: 100% !important; - left:unset !important; - top:unset !important; + left: unset !important; + top: unset !important; } } + .audiobox-linker-mini { - width:8px; - min-height:8px; - height:8px; + width: 8px; + min-height: 8px; + height: 8px; box-shadow: black 1px 1px 1px; margin-left: -1; margin-top: -2; + .linkAnchorBox-cont { position: relative !important; - height: 100% !important; + height: 100% !important; width: 100% !important; - left:unset !important; - top:unset !important; + left: unset !important; + top: unset !important; } } - .audiobox-linker:hover, .audiobox-linker-mini:hover { - opacity:1; + + .audiobox-linker:hover, + .audiobox-linker-mini:hover { + opacity: 1; } - .audiobox-marker-container, .audiobox-marker-minicontainer { - position:absolute; - width:10px; - height:90%; - top:2.5%; - background:gray; + + .audiobox-marker-container, + .audiobox-marker-minicontainer { + position: absolute; + width: 10px; + height: 90%; + top: 2.5%; + background: gray; border-radius: 5px; box-shadow: black 2px 2px 1px; + .audiobox-marker { - position:relative; + position: relative; height: calc(100% - 15px); margin-top: 15px; } + .audio-marker:hover { border: orange 2px solid; } } + .audiobox-marker-minicontainer { - width:5px; + width: 5px; border-radius: 1px; + .audiobox-marker { - position:relative; + position: relative; height: calc(100% - 8px); margin-top: 8px; } @@ -143,4 +171,80 @@ } } } +} + + +@media only screen and (max-width: 1000px) { + + .audiobox-container, + .audiobox-container-interactive { + width: max-content; + /* align-self: center; */ + left: 50%; + top: 40%; + transform: translate(-50%, 0); + height: 100px; + position: absolute; + display: flex; + pointer-events: all; + /* cursor: default; */ + } + + .audiobox-container .audiobox-buttons, + .audiobox-container-interactive .audiobox-buttons { + display: flex; + width: 500px; + /* left: 50%; */ + /* transform: translate(-50%,0); */ + align-items: center; + } + + .audiobox-dictation { + width: 100; + height: 100; + font-size: 50; + /* background-color: white; */ + } + + .audiobox-container .audiobox-record-interactive, + .audiobox-container-interactive .audiobox-record-interactive { + width: 95%; + user-select: none; + font-size: 50px; + font-weight: 100; + left: 5%; + height: 100%; + position: relative; + } + + .audiobox-container .audiobox-controls .audiobox-player .audiobox-playhead, + .audiobox-container .audiobox-controls .audiobox-player .audiobox-dictation, + .audiobox-container-interactive .audiobox-controls .audiobox-player .audiobox-playhead, + .audiobox-container-interactive .audiobox-controls .audiobox-player .audiobox-dictation { + position: relative; + align-self: center; + width: 50px; + height: max-content; + padding: 0; + } + + .audiobox-container .audiobox-controls .audiobox-player, + .audiobox-container-interactive .audiobox-controls .audiobox-player { + margin-top: auto; + margin-bottom: auto; + width: 100%; + height: 100%; + position: relative; + padding-right: 5px; + display: flex; + } + + .audiobox-container .audiobox-controls, + .audiobox-container-interactive .audiobox-controls { + width: 500px; + height: 100%; + position: relative; + display: flex; + padding-left: 2px; + } } \ No newline at end of file diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx index 0d6258cf3..f49b1f763 100644 --- a/src/client/views/nodes/ColorBox.tsx +++ b/src/client/views/nodes/ColorBox.tsx @@ -60,9 +60,9 @@ export class ColorBox extends ViewBoxBaseComponent
{ActiveInkWidth() ?? 2}
- ) => SetActiveInkWidth(e.target.value)} /> + ) => SetActiveInkWidth(e.target.value)} />
{ActiveInkBezierApprox() ?? 2}
- ) => SetActiveBezierApprox(e.target.value)} /> + ) => SetActiveBezierApprox(e.target.value)} />

diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index d9399d549..687422cf2 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -46,903 +46,6 @@ library.add(faTasks, faMobile, faThLarge, faWindowClose, faEdit, faTrashAlt, faP faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faThumbtack, faTree, faTv, faUndoAlt, faBook, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft, faBars, faTh, faChevronLeft); -// @observer -// export class MobileInterface extends React.Component { -// @observable static Instance: MobileInterface; -// @computed private get userDoc() { return Doc.UserDoc(); } -// @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; } -// @computed private get activeContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; } -// // @observable private currentView: "main" | "ink" | "upload" = "main"; -// @observable private mainDoc: any = CurrentUserUtils.setupMobileDoc(this.userDoc); -// @observable private renderView?: () => JSX.Element; -// @observable private sidebarActive = true; - -// public _activeDoc: Doc = this.mainDoc; -// public _homeDoc: Doc = this.mainDoc; -// private _homeMenu: boolean = true; - -// // private inkDoc?: Doc; -// public drawingInk: boolean = false; -// private _ink: boolean = false; - -// // private _uploadDoc: Doc = this.userDoc; -// private _child: Doc | null = null; -// private _parents: Array = []; -// private _library: Doc = CurrentUserUtils.setupLibrary(this.userDoc); -// private _open: boolean = false; - -// constructor(props: Readonly<{}>) { -// super(props); -// MobileInterface.Instance = this; -// } - -// @action -// componentDidMount = () => { -// library.add(...[faPenNib, faHighlighter, faEraser, faMousePointer, faThumbtack]); - -// if (this.userDoc && !this.mainContainer) { -// this.userDoc.activeMobile = this._homeDoc; -// } - -// InkingControl.Instance.switchTool(InkTool.None); -// MobileInterface.Instance.drawingInk = false; -// InkingControl.Instance.updateSelectedColor("#FF0000"); -// InkingControl.Instance.switchWidth("2"); -// this.switchCurrentView((userDoc: Doc) => this._homeDoc); -// } - -// @action -// switchCurrentView = (doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) => { -// if (!this.userDoc) return; - -// this.userDoc.activeMobile = doc(this.userDoc); -// onSwitch && onSwitch(); - -// this.renderView = renderView; -// } - -// onSwitchInking = () => { -// const button = document.getElementById("inkButton") as HTMLElement; -// const color = InkingControl.Instance.selectedColor; -// button.style.backgroundColor = this._ink ? "white" : color; -// button.style.color = this._ink ? "black" : "white"; - -// if (!this._ink) { -// console.log("INK IS ACTIVE"); -// InkingControl.Instance.switchTool(InkTool.Pen); -// MobileInterface.Instance.drawingInk = true; -// this._ink = true; -// } else { -// console.log("INK IS INACTIVE"); -// InkingControl.Instance.switchTool(InkTool.None); -// MobileInterface.Instance.drawingInk = false; -// this._ink = false; -// } -// } - -// onSwitchUpload = async () => { -// let width = 300; -// let height = 300; -// const res = await rp.get(Utils.prepend("/getUserDocumentId")); - -// // get width and height of the collection doc -// if (this.mainContainer) { -// const data = Cast(this.mainContainer.data, listSpec(Doc)); -// if (data) { -// const collectionDoc = await data[1]; // this should be the collection doc since the positions should be locked -// const docView = DocumentManager.Instance.getDocumentView(collectionDoc); -// if (docView) { -// width = docView.nativeWidth ? docView.nativeWidth : 300; -// height = docView.nativeHeight ? docView.nativeHeight : 300; -// } -// } -// } -// DocServer.Mobile.dispatchOverlayTrigger({ -// enableOverlay: true, -// width: width, -// height: height, -// text: "Documents uploaded from mobile will show here", -// }); -// } - -// back = () => { -// let header = document.getElementById("header") as HTMLElement; -// let doc = Cast(this._parents.pop(), Doc) as Doc; -// if (doc === Cast(this._library, Doc) as Doc) { -// this._child = null; -// this.userDoc.activeMobile = this._library; -// } else if (doc === Cast(this._homeDoc, Doc) as Doc) { -// this._homeMenu = true; -// this._parents = []; -// this._activeDoc = this._homeDoc; -// this._child = null; -// this.switchCurrentView((userDoc: Doc) => this._homeDoc); -// } else { -// if (doc) { -// this._child = doc; -// this.switchCurrentView((userDoc: Doc) => doc); -// this._homeMenu = false; -// header.textContent = String(doc.title); -// } -// } -// if (doc) { -// this._activeDoc = doc; -// } -// this._ink = false; -// } - -// returnHome = () => { -// if (this._homeMenu === false || this._open === true) { -// this._homeMenu = true; -// this._parents = []; -// this._activeDoc = this._homeDoc; -// this._child = null; -// this.switchCurrentView((userDoc: Doc) => this._homeDoc); -// } -// if (this._open) { -// this.toggleSidebar(); -// } -// } - -// returnMain = () => { -// this._parents = []; -// // this.toggleSidebar(); -// this._activeDoc = this._library; -// this.switchCurrentView((userDoc: Doc) => this._library); -// this._homeMenu = false; -// this._child = null; -// } - -// displayWorkspaces = () => { -// if (this.mainContainer) { -// const backgroundColor = () => "white"; -// if (this._activeDoc.title === "mobile audio") { -// return ( -//
-// window.screen.width} -// PanelHeight={() => window.screen.height} -// renderDepth={0} -// focus={emptyFunction} -// backgroundColor={backgroundColor} -// parentActive={returnTrue} -// whenActiveChanged={emptyFunction} -// bringToFront={emptyFunction} -// ContainingCollectionView={undefined} -// ContainingCollectionDoc={undefined} -// /> -//
-// ); -// } else { -// return ( -//
-// -//
-// ); -// } -// } -// } - -// returnWidth = () => 2000; -// returnHeight = () => 2000; - -// handleClick(doc: Doc) { -// let children = DocListCast(doc.data); -// if (doc.type !== "collection") { -// this._parents.push(this._activeDoc); -// this._activeDoc = doc; -// this.switchCurrentView((userDoc: Doc) => doc); -// this._homeMenu = false; -// this.toggleSidebar(); -// } else if (doc.type === "collection" && children.length === 0) { -// console.log("This collection has no children"); -// } else { -// this._parents.push(this._activeDoc); -// this._activeDoc = doc; -// this.switchCurrentView((userDoc: Doc) => doc); -// this._homeMenu = false; -// this._child = doc; -// } - -// // let sidebar = document.getElementById("sidebar") as HTMLElement; -// // sidebar.classList.toggle('active'); -// } - -// createPathname = () => { -// let docArray = []; -// this._parents.map((doc: Doc, index: any) => { -// // if (doc === this.mainDoc) { -// // pathname = pathname; -// // } else if (doc.type === "audio" || doc.type === "presentation") { -// // pathname = pathname; -// // } else if (doc.type !== "collection") { -// // pathname = pathname; -// // } else { -// // pathname = pathname + " > " + doc.title; -// // titleArray.push(doc.title); -// // docArray.push(doc); -// // } -// docArray.push(doc); -// }); -// docArray.push(this._activeDoc); -// // if (this._activeDoc.title === "mobile audio") { -// // pathname = this._activeDoc.title; -// // } else if (this._activeDoc.title === "Presentation") { -// // pathname = this._activeDoc.title; -// // } else if (this._activeDoc === this.mainDoc) { -// // pathname = pathname; -// // } else { -// // pathname = pathname + " > " + this._activeDoc.title; -// // docArray.push(this._activeDoc); -// // titleArray.push(this._activeDoc.title); -// // } - -// return docArray; -// } - -// renderPathbar = () => { -// // if (this._homeMenu == false) { -// let docArray = this.createPathname(); -// let items = docArray.map((doc: Doc, index: any) => { -// if (index == 0) { -// return ( -//
-//
this.handlePathClick(doc, index)}>{doc.title} -//
-//
); -// } else if (doc === this._activeDoc) { -// return ( -//
-// -//
this.handlePathClick(doc, index)}>{doc.title} -//
-//
); -// } else { -// return ( -//
-// -//
this.handlePathClick(doc, index)}>{doc.title} -//
-//
); -// } - -// }); -// if (this._parents.length !== 0) { -// return (
-//
-// {items} -//
-//
-// -//
-//
-//
); -// } else { -// return (
-//
-// {items} -//
-//
-//
); -// } -// // } -// // } else { - -// // return ( -// //
-// //
-// //
-// //
this.returnHome()}>Home -// //
-// //
-// //
-// //
-// //
-// // ); -// // } - -// // } -// } - -// handlePathClick = (doc: Doc, index: number) => { -// if (doc === this._library) { -// this._activeDoc = doc; -// this._child = null; -// this.switchCurrentView((userDoc: Doc) => doc); -// this._parents.length = index; -// } else if (doc === this._homeDoc) { -// this.returnHome(); -// } else { -// console.log(index); -// this._activeDoc = doc; -// this._child = doc; -// this.switchCurrentView((userDoc: Doc) => doc); -// this._parents.length = index; -// } -// } - -// @action -// toggleSidebar = () => this.sidebarActive = !this.sidebarActive - -// switchToLibrary = () => { -// this._parents.push(this._activeDoc); -// this.switchCurrentView((userDoc: Doc) => this._library); -// this._activeDoc = this._library; -// this._homeMenu = false; -// this.toggleSidebar(); -// } - -// // renderDefaultContent = () => { -// // let menuButtons = DocListCast(this._homeDoc.data).map((doc: Doc, index: any) => { -// // if (doc.type !== "ink") { -// // return ( -// //
doc.click}>{doc.title} -// //
); -// // } -// // }); - -// // if (this._homeMenu === true) { -// // return ( -// //
-// //
-// // -// // -// // -// //
-// // {this.renderPathbar()} -// // -// //
-// // ); -// // } - -// // const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc; -// // const buttons = DocListCast(this._child ? this._child.data : workspaces.data).map((doc: Doc, index: any) => { -// // return ( -// //
this.handleClick(doc)}>{doc.title} -// //
{doc.type}
-// // -// //
); -// // }); -// // return ( -// // <> -// //
-// //
{this.sidebarActive ? StrCast(this._activeDoc.title) : "Menu"}
-// //
-// //
-// //
-// //
{this.createPathname()}
-// //
-// //
-// // -// // {this._child ? -// // <> -// //
←
-// //
{buttons}
-// //
Home
-// // : -// // <> -// // {buttons} -// // {/*
-// // Library -// //
*/} -// // -// //
Record Audio
-// //
Presentation
-// //
SettingsManager.Instance.open()}>Settings
-// // -// // } -// //
-// // {this._child ? null :
{this.renderView}
} -// // -// // ); -// // } - -// recordAudio = async () => { -// // upload to server with known URL -// if (this._activeDoc.title !== "mobile audio") { -// this._parents.push(this._activeDoc); -// } -// const audioDoc = Cast(Docs.Create.AudioDocument(nullAudio, { _width: 200, _height: 100, title: "mobile audio" }), Doc) as Doc; -// console.log(audioDoc); -// if (audioDoc) { -// console.log("audioClicked: " + audioDoc.title); -// this._activeDoc = audioDoc; -// this.switchCurrentView((userDoc: Doc) => audioDoc); -// this._homeMenu = false; -// // this.toggleSidebar(); -// } -// // const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; -// // this.audioState = await audioDoc.getProto; -// // if (this.audioState) { -// // console.log(this.audioState); -// // const data = Cast(audioRightSidebar.data, listSpec(Doc)); -// // if (data) { -// // data.push(audioDoc); -// // } -// // } -// } - -// uploadAudio = () => { -// const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; -// const audioDoc = this._activeDoc; -// const data = Cast(audioRightSidebar.data, listSpec(Doc)); -// console.log(audioDoc.proto); -// if (data) { -// data.push(audioDoc); -// } -// // this.recordAudio(); -// } - -// uploadAudioButton = () => { -// if (this._activeDoc.type === "audio") { -// return
-// -//
; -// } -// } - -// toggleSelector = () => { -// console.log("toggle selector!"); -// let toolbar = document.getElementById("toolbar") as HTMLElement; -// toolbar.classList.toggle('active'); -// } - -// colorTool = () => { -// if (this._activeDoc._viewType === "docking") { -// const color = InkingControl.Instance.selectedColor; -// console.log(color); -// return ( -//
-//
-//
-//
{ -// InkingControl.Instance.updateSelectedColor("rgb(255,0,0)"); -// Doc.UserDoc().inkColor = "rgb(255,0,0)"; -// console.log(InkingControl.Instance.selectedColor); -// }}> -//
-//
{ -// InkingControl.Instance.updateSelectedColor("rgb(0,128,0)"); -// Doc.UserDoc().inkColor = "rgb(0,128,0)"; -// console.log(InkingControl.Instance.selectedColor); -// }}> -//
-//
{ -// InkingControl.Instance.updateSelectedColor("rgb(0,0,255)"); -// Doc.UserDoc().inkColor = "rgb(0,0,255)"; -// console.log(InkingControl.Instance.selectedColor); -// }}> -//
-//
-//
-// ) => InkingControl.Instance.switchWidth(e.target.value)} /> -//
-//
-//
-// ); -// } -// } - -// drawInk = () => { -// if (this._activeDoc._viewType === "docking") { -// const inkIsOn = this._ink; -// return
-// -//
; -// } -// } - -// downloadDocument = () => { -// if (this._activeDoc.type === "image") { -// const url = this._activeDoc["data-path"]?.toString(); -// return
{ -// window.open(url); -// console.log(url); -// }}> -// -//
; -// } -// } - -// pinToPresentation = () => { -// // Only making button available if it is an image -// if (this._activeDoc.type === "image") { -// const isPinned = this._activeDoc && Doc.isDocPinned(this._activeDoc); -// return
{ -// if (isPinned) { -// DockedFrameRenderer.UnpinDoc(this._activeDoc); -// } -// else { -// DockedFrameRenderer.PinDoc(this._activeDoc); -// } -// }}> -// -//
; -// } -// } - -// setupDefaultPresentation = () => { -// if (this._activeDoc.title !== "Presentation") { -// this._parents.push(this._activeDoc); -// } - -// const presentation = Cast(Doc.UserDoc().activePresentation, Doc) as Doc; - -// if (presentation) { -// console.log(this._activeDoc.mobile); -// console.log("presentation clicked: " + presentation.title); -// this._activeDoc = presentation; -// this.switchCurrentView((userDoc: Doc) => presentation); -// this._homeMenu = false; -// // this.toggleSidebar(); -// } -// } - -// // mobileHome = () => { -// // return ( -// //
-// //
- -// //
-// //
- -// //
-// //
- -// //
-// //
- -// //
-// //
- -// //
-// //
-// // ); -// // } - -// renderActiveCollection = (userDoc: Doc) => { -// if (this.activeContainer) { -// const active = Cast(this.activeContainer.data, listSpec(Doc)); -// if (active) { -// return ( -//
HELLO!
-// ); -// } -// } -// } - -// onBack = (e: React.MouseEvent) => { -// this.switchCurrentView((userDoc: Doc) => this.mainDoc); -// InkingControl.Instance.switchTool(InkTool.None); // TODO: switch to previous tool - -// DocServer.Mobile.dispatchOverlayTrigger({ -// enableOverlay: false, -// width: window.innerWidth, -// height: window.innerHeight -// }); - -// // this.inkDoc = undefined; -// this.drawingInk = false; -// } - -// shiftLeft = (e: React.MouseEvent) => { -// DocServer.Mobile.dispatchOverlayPositionUpdate({ -// dx: -10 -// }); -// e.preventDefault(); -// e.stopPropagation(); -// } - -// shiftRight = (e: React.MouseEvent) => { -// DocServer.Mobile.dispatchOverlayPositionUpdate({ -// dx: 10 -// }); -// e.preventDefault(); -// e.stopPropagation(); -// } - -// panelHeight = () => window.innerHeight; -// panelWidth = () => window.innerWidth; -// //WAS 3 - -// //WAS 1 - -// upload = async (e: React.MouseEvent) => { -// if (this.mainContainer) { -// const data = Cast(this.mainContainer.data, listSpec(Doc)); -// if (data) { -// const collectionDoc = await data[1]; //this should be the collection doc since the positions should be locked -// const children = DocListCast(collectionDoc.data); -// const uploadDoc = children.length === 1 ? children[0] : Docs.Create.StackingDocument(children, { -// title: "Mobile Upload Collection", backgroundColor: "white", lockedPosition: true, _width: 300, _height: 300 -// }); -// if (uploadDoc) { -// DocServer.Mobile.dispatchMobileDocumentUpload({ -// docId: uploadDoc[Id], -// }); -// } -// } -// } -// e.stopPropagation(); -// e.preventDefault(); -// } - -// addWebToCollection = async () => { -// let url = "https://en.wikipedia.org/wiki/Hedgehog"; -// if (this.mainContainer) { -// const data = Cast(this.mainContainer.data, listSpec(Doc)); -// if (data) { -// const webDoc = await data[0]; -// const urlField: FieldResult = Cast(webDoc.data, WebField); -// url = urlField ? urlField.url.toString() : "https://en.wikipedia.org/wiki/Hedgehog"; - -// } -// } -// Docs.Create.WebDocument(url, { _width: 300, _height: 300, title: "Mobile Upload Web Doc" }); -// } - -// clearUpload = async () => { -// if (this.mainContainer) { -// const data = Cast(this.mainContainer.data, listSpec(Doc)); -// if (data) { -// const collectionDoc = await data[1]; -// const children = DocListCast(collectionDoc.data); -// children.forEach(doc => { -// }); -// // collectionDoc[data] = new List(); -// } -// } -// } - -// onDragOver = (e: React.DragEvent) => { -// e.preventDefault(); -// e.stopPropagation(); -// } - -// render() { -// // const content = this.currentView === "main" ? this.mainContent : -// // this.currentView === "ink" ? this.inkContent : -// // this.currentView === "upload" ? this.uploadContent : <>; -// return ( -//
-// {/* -// -// {this.renderView ? this.renderView() : this.renderDefaultContent()} -// */} -// {/* */} -// -// {/* {this.menuOptions()} */} -// {/* {this.displayHome()} */} -//
-// {this.pinToPresentation()} -// {this.downloadDocument()} -// {this.drawInk()} -// {this.uploadAudioButton()} -// {this.colorTool()} -//
-// - -// -// {this.renderDefaultContent()} -// {this.displayWorkspaces()} -// {/* */} -// {/* -// -// */} -// {/* */} -// {/*
-// {this.renderDefaultContent()} -//
*/} -// {/* */} -// {/* */} -// {/* -// */} -// {/* -// -// */} -//
-// ); -// } -// } - -// Scripting.addGlobal(function switchMobileView(doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) { return MobileInterface.Instance.switchCurrentView(doc, renderView, onSwitch); }); -// Scripting.addGlobal(function openMobilePresentation() { return MobileInterface.Instance.setupDefaultPresentation(); }); -// Scripting.addGlobal(function toggleMobileSidebar() { return MobileInterface.Instance.toggleSidebar(); }); -// Scripting.addGlobal(function openMobileAudio() { return MobileInterface.Instance.recordAudio(); }); -// Scripting.addGlobal(function openMobileSettings() { return SettingsManager.Instance.open(); }); -// Scripting.addGlobal(function switchToLibrary() { return MobileInterface.Instance.switchToLibrary(); }); -// // WAS 2 - -// // 1 -// // renderUploadContent() { -// // if (this.mainContainer) { -// // return ( -// //
-// //
-// // -// // {/* */} -// // {/* */} -// // -// //
-// // window.screen.width} -// // PanelHeight={() => window.screen.height} -// // renderDepth={0} -// // focus={emptyFunction} -// // backgroundColor={returnEmptyString} -// // parentActive={returnTrue} -// // whenActiveChanged={emptyFunction} -// // bringToFront={emptyFunction} -// // ContainingCollectionView={undefined} -// // ContainingCollectionDoc={undefined} /> -// //
-// // ); -// // } -// // } - -// // 2 -// // Scripting.addGlobal(function onSwitchMobileInking() { return MobileInterface.Instance.onSwitchInking(); }); -// // Scripting.addGlobal(function renderMobileInking() { return MobileInterface.Instance.renderInkingContent(); }); -// // Scripting.addGlobal(function onSwitchMobileUpload() { return MobileInterface.Instance.onSwitchUpload(); }); -// // Scripting.addGlobal(function renderMobileUpload() { return MobileInterface.Instance.renderUploadContent(); }); -// // Scripting.addGlobal(function addWebToMobileUpload() { return MobileInterface.Instance.addWebToCollection(); }); - - -// // 3 -// // renderInkingContent = () => { -// // console.log("rendering inking content"); -// // // TODO: support panning and zooming -// // // TODO: handle moving of ink strokes -// // if (this.mainContainer) { -// // return ( -// //
-// //
-// //
-// // -// //
-// //
-// // -// //
-// //
-// // -// // -// //
-// //
-// // -// // -// //
-// // ); -// // } -// // } - @observer export class MobileInterface extends React.Component { @observable static Instance: MobileInterface; @@ -1035,28 +138,6 @@ export class MobileInterface extends React.Component { @action toggleSidebar = () => this.sidebarActive = !this.sidebarActive - // toggleSidebar = () => { - // if (this._open === false) { - // this._open = true; - // } else { - // this._open = false; - // } - // console.log("clicked"); - // let menuButton = document.getElementById("menuButton") as HTMLElement; - // //menuButton.classList.toggle('active'); - - // let sidebar = document.getElementById("sidebar") as HTMLElement; - // //sidebar.classList.toggle('active'); - - // let header = document.getElementById("header") as HTMLElement; - - // if (!sidebar.classList.contains('active')) { - // header.textContent = String(this._activeDoc.title); - // } else { - // header.textContent = "library"; - // } - // } - /** * Method called when 'Library' button is pressed */ @@ -1134,66 +215,35 @@ export class MobileInterface extends React.Component { displayWorkspaces = () => { if (this.mainContainer) { const backgroundColor = () => "white"; - if (this._activeDoc.title === "mobile audio") { - return ( -
- window.screen.width} - PanelHeight={() => window.screen.height} - renderDepth={0} - focus={emptyFunction} - backgroundColor={backgroundColor} - parentActive={returnTrue} - whenActiveChanged={emptyFunction} - bringToFront={emptyFunction} - ContainingCollectionView={undefined} - ContainingCollectionDoc={undefined} - /> -
- ); - } else { - return ( -
- -
- ); - } + return ( +
+ +
+ ); } } @@ -1451,9 +501,9 @@ export class MobileInterface extends React.Component { >
- {/* + StrCast(selDoc?._backgroundColor, StrCast(selDoc?.backgroundColor, "black")))} /> */}
{/* ) => InkingControl.Instance.switchWidth(e.target.value)} /> */} diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss index 16eb035b3..f602b85a0 100644 --- a/src/mobile/MobileMenu.scss +++ b/src/mobile/MobileMenu.scss @@ -245,11 +245,12 @@ body { position: relative; width: 100px; height: 100px; - font-size: 90px; + font-size: 70px; + padding: 5px; text-align: center; border-style: solid; border-radius: 50px; - border-width: medium; + border-width: 5px; margin: 20px; z-index: 100; } -- cgit v1.2.3-70-g09d2 From ba0d831691e81903ab1fb9482ba5dcad0a769881 Mon Sep 17 00:00:00 2001 From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com> Date: Thu, 11 Jun 2020 23:40:49 -0700 Subject: functioning with new ink --- src/client/views/AntimodeMenu.scss | 9 ++--- .../collectionFreeForm/InkOptionsMenu.scss | 38 ++++++++++++++++++++-- .../collectionFreeForm/InkOptionsMenu.tsx | 16 +++++++-- src/mobile/MobileInterface.tsx | 15 +++++---- src/mobile/MobileMenu.scss | 9 +++-- 5 files changed, 71 insertions(+), 16 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/AntimodeMenu.scss b/src/client/views/AntimodeMenu.scss index 9c5bf0a1f..170631422 100644 --- a/src/client/views/AntimodeMenu.scss +++ b/src/client/views/AntimodeMenu.scss @@ -53,18 +53,19 @@ display: flex; &.with-rows { - flex-direction: column + flex-direction: column-reverse; } .antimodeMenu-row { display: flex; - height: 35px; + height: 100%; + width:100%; } .antimodeMenu-button { background-color: transparent; - width: 35px; - height: 35px; + width: 100px; + height: 100px; &.active { background-color: #121212; diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss index 3671a84b9..72fdf5af9 100644 --- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss +++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss @@ -4,7 +4,6 @@ height: 100%; } - } .sketch-picker { @@ -31,7 +30,42 @@ background: #323232; display: block; - } } +@media only screen and (max-width: 1000px) { + .antimodeMenu-button { + .color-preview { + width: 100%; + height: 100%; + } + + } + + .sketch-picker { + background: #323232; + + .flexbox-fit { + background: #323232; + } + } + + .btn-group { + display: grid; + grid-template-columns: auto auto; + /* Make the buttons appear below each other */ + } + + .btn2-group { + display: block; + background: #323232; + grid-template-columns: auto; + + /* Make the buttons appear below each other */ + .antimodeMenu-button { + background: #323232; + display: block; + + } + } +} diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx index 5a27f74e5..46f7bc2e2 100644 --- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx +++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx @@ -11,6 +11,8 @@ import { Utils } from "../../../../Utils"; import GestureOverlay from "../../GestureOverlay"; import { Doc } from "../../../../fields/Doc"; + + @observer export default class InkOptionsMenu extends AntimodeMenu { static Instance: InkOptionsMenu; @@ -23,6 +25,8 @@ export default class InkOptionsMenu extends AntimodeMenu { @observable _colorBtn = false; @observable _widthBtn = false; + + constructor(props: Readonly<{}>) { super(props); InkOptionsMenu.Instance = this; @@ -113,7 +117,7 @@ export default class InkOptionsMenu extends AntimodeMenu { title="Bezier changer" key="bezier" onPointerDown={e => this.changeBezier(e)} - style={ { backgroundColor:ActiveInkBezierApprox() ? "121212":"" } }> + style={{ backgroundColor: ActiveInkBezierApprox() ? "121212" : "" }}> B ; } @@ -126,7 +130,15 @@ export default class InkOptionsMenu extends AntimodeMenu { this.widthPicker, this.colorPicker, ]; - return this.getElement(buttons); + + const mobileButtons = [ + this.shapeButtons, + this.bezierButton, + this.widthPicker, + this.colorPicker, + ]; + + return (window.innerWidth < 1000 ? this.getElement(mobileButtons) : this.getElement(buttons)); } } Scripting.addGlobal(function activatePen(penBtn: any) { diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index ba52e3df9..3a7a1594b 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -1481,20 +1481,20 @@ export class MobileInterface extends React.Component { const button = document.getElementById("inkButton") as HTMLElement; // const color = InkingControl.Instance.selectedColor; const color = "lightpink"; - button.style.backgroundColor = this._ink ? "white" : color; + button.style.backgroundColor = this._ink ? "white" : "black"; button.style.color = this._ink ? "black" : "white"; if (!this._ink) { console.log("INK IS ACTIVE"); // InkingControl.Instance.switchTool(InkTool.Pen); Doc.SetSelectedTool(InkTool.Pen); - InkOptionsMenu.Instance.jumpTo(300, 300); + //InkOptionsMenu.Instance.jumpTo(300, 300); this._ink = true; } else { console.log("INK IS INACTIVE"); // InkingControl.Instance.switchTool(InkTool.None); Doc.SetSelectedTool(InkTool.None); - InkOptionsMenu.Instance.fadeOut(true); + //InkOptionsMenu.Instance.fadeOut(true); this._ink = false; } } @@ -1502,7 +1502,11 @@ export class MobileInterface extends React.Component { inkMenu = () => { if (this._activeDoc._viewType === "docking") { if (this._ink) { - return + console.log("here"); + return
+ +
+ } } } @@ -1794,9 +1798,8 @@ export class MobileInterface extends React.Component { {this.drawInk()} {this.uploadAudioButton()} {/* {this.colorTool()} */} - {this.inkMenu()} -
+ {this.inkMenu()} {this.displayWorkspaces()} {this.renderDefaultContent()} diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss index 6d450bc6d..54156a735 100644 --- a/src/mobile/MobileMenu.scss +++ b/src/mobile/MobileMenu.scss @@ -333,12 +333,17 @@ body { top: -450px; } -.toolbar .colorSelector { +.colorSelector { + position: absolute; + top: 550px; + left: 300px; + transform: translate(-50%, 0); + z-index: 100; display: inline-flex; width: max-content; - padding: 5px; height: max-content; pointer-events: all; + font-size: 90px; } .widthSelector { -- cgit v1.2.3-70-g09d2 From e21a97ff5b45a9dde6a42c16394475ad66937a87 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sun, 14 Jun 2020 02:03:19 -0500 Subject: dropdown shows on first click --- src/client/views/collections/CollectionSchemaHeaders.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index dae0600b1..2ad8e5bfa 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -331,7 +331,9 @@ class KeysDropdown extends React.Component { renderOptions = (): JSX.Element[] | JSX.Element => { if (!this._isOpen) return <>; - const keyOptions = this._searchTerm === "" ? this.props.possibleKeys : this.props.possibleKeys.filter(key => key.toUpperCase().indexOf(this._searchTerm.toUpperCase()) > -1); + const searchTerm = this._searchTerm.trim() === "New field" ? "" : this._searchTerm; + + const keyOptions = searchTerm === "" ? this.props.possibleKeys : this.props.possibleKeys.filter(key => key.toUpperCase().indexOf(this._searchTerm.toUpperCase()) > -1); const exactFound = keyOptions.findIndex(key => key.toUpperCase() === this._searchTerm.toUpperCase()) > -1 || this.props.existingKeys.findIndex(key => key.toUpperCase() === this._searchTerm.toUpperCase()) > -1; -- cgit v1.2.3-70-g09d2 From c5c7fa9c0b17bbcee582d4fd788d378a2f7cd243 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sun, 14 Jun 2020 12:54:38 -0500 Subject: adding list and image types --- .../views/collections/CollectionSchemaCells.tsx | 78 ++++++++++++++++++++++ .../views/collections/CollectionSchemaHeaders.tsx | 15 ++++- .../views/collections/CollectionSchemaView.tsx | 6 +- 3 files changed, 95 insertions(+), 4 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index baf9d4156..4f2bfac08 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -24,6 +24,7 @@ import { SchemaHeaderField } from "../../../fields/SchemaHeaderField"; import { undoBatch } from "../../util/UndoManager"; import { SnappingManager } from "../../util/SnappingManager"; import { ComputedField } from "../../../fields/ScriptField"; +import { ImageField } from "../../../fields/URLField"; library.add(faExpand); @@ -205,6 +206,18 @@ export class CollectionSchemaCell extends React.Component { const doc = FieldValue(Cast(field, Doc)); contents = typeof field === "object" ? doc ? StrCast(doc.title) === "" ? "--" : StrCast(doc.title) : `--${typeof field}--` : `--${typeof field}--`; } + if (type === "image") { + // fix this + + const image = FieldValue(Cast(field, ImageField)); + const doc = FieldValue(Cast(field, Doc)); + contents = typeof field === "object" ? doc ? StrCast(doc.title) === "" ? "--" : StrCast(doc.title) : `--${typeof field}--` : `--${typeof field}--`; + } + if (type === "list") { + // fix this + contents = typeof field === "object" ? doc ? StrCast(field) === "" ? "--" : StrCast(field) : `--${typeof field}--` : `--${typeof field}--`; + } + let className = "collectionSchemaView-cellWrapper"; if (this._isEditing) className += " editing"; @@ -304,6 +317,71 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { } } +@observer +export class CollectionSchemaImageCell extends CollectionSchemaCell { + render() { + return this.renderCellWithType("image"); + } + // render() { + // const props: FieldViewProps = { + // Document: this.props.rowProps.original, + // DataDoc: this.props.rowProps.original, + // LibraryPath: [], + // dropAction: "alias", + // bringToFront: emptyFunction, + // rootSelected: returnFalse, + // fieldKey: this.props.rowProps.column.id as string, + // ContainingCollectionView: this.props.CollectionView, + // ContainingCollectionDoc: this.props.CollectionView && this.props.CollectionView.props.Document, + // isSelected: returnFalse, + // select: emptyFunction, + // renderDepth: this.props.renderDepth + 1, + // ScreenToLocalTransform: Transform.Identity, + // focus: emptyFunction, + // active: returnFalse, + // whenActiveChanged: emptyFunction, + // PanelHeight: returnZero, + // PanelWidth: returnZero, + // NativeHeight: returnZero, + // NativeWidth: returnZero, + // addDocTab: this.props.addDocTab, + // pinToPres: this.props.pinToPres, + // ContentScaling: returnOne + // }; + + // if (props.fieldKey === "data") { + // const reference = React.createRef(); + // return ( + //
+ //
+ // {props.DataDoc?.data} + //
+ //
+ // ); + // } else { + // return this.renderCellWithType("image"); + // } + // } +} + +@observer +export class CollectionSchemaListCell extends CollectionSchemaCell { + render() { + return this.renderCellWithType("list"); + } + + // render() { + // const reference = React.createRef(); + // return ( + //
+ //
+ // + //
+ //
+ // ); + // } +} + @observer export class CollectionSchemaCheckboxCell extends CollectionSchemaCell { @observable private _isChecked: boolean = typeof this.props.rowProps.original[this.props.rowProps.column.id as string] === "boolean" ? BoolCast(this.props.rowProps.original[this.props.rowProps.column.id as string]) : false; diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index 2ad8e5bfa..85908c0ca 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -2,7 +2,7 @@ import React = require("react"); import { action, observable } from "mobx"; import { observer } from "mobx-react"; import "./CollectionSchemaView.scss"; -import { faPlus, faFont, faHashtag, faAlignJustify, faCheckSquare, faToggleOn, faSortAmountDown, faSortAmountUp, faTimes } from '@fortawesome/free-solid-svg-icons'; +import { faPlus, faFont, faHashtag, faAlignJustify, faCheckSquare, faToggleOn, faSortAmountDown, faSortAmountUp, faTimes, faImage, faListUl } from '@fortawesome/free-solid-svg-icons'; import { library, IconProp } from "@fortawesome/fontawesome-svg-core"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { ColumnType } from "./CollectionSchemaView"; @@ -13,7 +13,7 @@ const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; -library.add(faPlus, faFont, faHashtag, faAlignJustify, faCheckSquare, faToggleOn, faFile as any, faSortAmountDown, faSortAmountUp, faTimes); +library.add(faPlus, faFont, faHashtag, faAlignJustify, faCheckSquare, faToggleOn, faFile as any, faSortAmountDown, faSortAmountUp, faTimes, faImage, faListUl); export interface HeaderProps { keyValue: SchemaHeaderField; @@ -33,7 +33,8 @@ export interface HeaderProps { export class CollectionSchemaHeader extends React.Component { render() { const icon: IconProp = this.props.keyType === ColumnType.Number ? "hashtag" : this.props.keyType === ColumnType.String ? "font" : - this.props.keyType === ColumnType.Boolean ? "check-square" : this.props.keyType === ColumnType.Doc ? "file" : "align-justify"; + this.props.keyType === ColumnType.Boolean ? "check-square" : this.props.keyType === ColumnType.Doc ? "file" : + this.props.keyType === ColumnType.Image ? "image" : this.props.keyType === ColumnType.List ? "list-ul" : "align-justify"; return (
Checkbox
+
this.changeColumnType(ColumnType.List)}> + + List +
this.changeColumnType(ColumnType.Doc)}> Document
+
this.changeColumnType(ColumnType.Image)}> + + Image +
); diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 35f892d65..74f31b428 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -20,7 +20,7 @@ import { undoBatch } from "../../util/UndoManager"; import { COLLECTION_BORDER_WIDTH } from '../../views/globalCssVariables.scss'; import { ContextMenu } from "../ContextMenu"; import '../DocumentDecorations.scss'; -import { CellProps, CollectionSchemaCell, CollectionSchemaCheckboxCell, CollectionSchemaDocCell, CollectionSchemaNumberCell, CollectionSchemaStringCell } from "./CollectionSchemaCells"; +import { CellProps, CollectionSchemaCell, CollectionSchemaCheckboxCell, CollectionSchemaDocCell, CollectionSchemaNumberCell, CollectionSchemaStringCell, CollectionSchemaImageCell, CollectionSchemaListCell } from "./CollectionSchemaCells"; import { CollectionSchemaAddColumnHeader, CollectionSchemaHeader } from "./CollectionSchemaHeaders"; import { MovableColumn, MovableRow } from "./CollectionSchemaMovableTableHOC"; import "./CollectionSchemaView.scss"; @@ -40,6 +40,8 @@ export enum ColumnType { String, Boolean, Doc, + Image, + List } // this map should be used for keys that should have a const type of value const columnTypes: Map = new Map([ @@ -349,6 +351,8 @@ export class SchemaTable extends React.Component { if (colType === ColumnType.String) return ; if (colType === ColumnType.Boolean) return ; if (colType === ColumnType.Doc) return ; + if (colType === ColumnType.Image) return ; + if (colType === ColumnType.List) return ; return ; }, minWidth: 200, -- cgit v1.2.3-70-g09d2 From 51a09fd7abdc44902587b2b610bf728908e288e7 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sun, 14 Jun 2020 16:41:31 -0500 Subject: inline images (need resizing) --- src/client/documents/Documents.ts | 2 +- .../views/collections/CollectionSchemaCells.tsx | 91 ++++++++++++---------- 2 files changed, 51 insertions(+), 42 deletions(-) (limited to 'src/client/views') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 37858bbd9..865fc296b 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -385,7 +385,7 @@ export namespace Docs { // synthesize the default options, the type and title from computed values and // whatever options pertain to this specific prototype const options = { title, type, baseProto: true, ...defaultOptions, ...(template.options || {}) }; - options.layout = layout.view.LayoutString(layout.dataField); + options.layout = layout.view?.LayoutString(layout.dataField); const doc = Doc.assign(new Doc(prototypeId, true), { layoutKey: "layout", ...options }); doc.layout_keyValue = KeyValueBox.LayoutString(""); return doc; diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index 4f2bfac08..8164e37e3 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -319,49 +319,58 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { @observer export class CollectionSchemaImageCell extends CollectionSchemaCell { - render() { - return this.renderCellWithType("image"); - } // render() { - // const props: FieldViewProps = { - // Document: this.props.rowProps.original, - // DataDoc: this.props.rowProps.original, - // LibraryPath: [], - // dropAction: "alias", - // bringToFront: emptyFunction, - // rootSelected: returnFalse, - // fieldKey: this.props.rowProps.column.id as string, - // ContainingCollectionView: this.props.CollectionView, - // ContainingCollectionDoc: this.props.CollectionView && this.props.CollectionView.props.Document, - // isSelected: returnFalse, - // select: emptyFunction, - // renderDepth: this.props.renderDepth + 1, - // ScreenToLocalTransform: Transform.Identity, - // focus: emptyFunction, - // active: returnFalse, - // whenActiveChanged: emptyFunction, - // PanelHeight: returnZero, - // PanelWidth: returnZero, - // NativeHeight: returnZero, - // NativeWidth: returnZero, - // addDocTab: this.props.addDocTab, - // pinToPres: this.props.pinToPres, - // ContentScaling: returnOne - // }; - - // if (props.fieldKey === "data") { - // const reference = React.createRef(); - // return ( - //
- //
- // {props.DataDoc?.data} - //
- //
- // ); - // } else { - // return this.renderCellWithType("image"); - // } + // return this.renderCellWithType("image"); // } + render() { + const props: FieldViewProps = { + Document: this.props.rowProps.original, + DataDoc: this.props.rowProps.original, + LibraryPath: [], + dropAction: "alias", + bringToFront: emptyFunction, + rootSelected: returnFalse, + fieldKey: this.props.rowProps.column.id as string, + ContainingCollectionView: this.props.CollectionView, + ContainingCollectionDoc: this.props.CollectionView && this.props.CollectionView.props.Document, + isSelected: returnFalse, + select: emptyFunction, + renderDepth: this.props.renderDepth + 1, + ScreenToLocalTransform: Transform.Identity, + focus: emptyFunction, + active: returnFalse, + whenActiveChanged: emptyFunction, + PanelHeight: returnZero, + PanelWidth: returnZero, + NativeHeight: returnZero, + NativeWidth: returnZero, + addDocTab: this.props.addDocTab, + pinToPres: this.props.pinToPres, + ContentScaling: returnOne + }; + + const data = Cast(props.DataDoc?.data, ImageField); + const url = data ? data.url.href : undefined; + console.log(url); + + + if (props.fieldKey === "data") { + if (url) { + const reference = React.createRef(); + return ( +
+
+ +
+
+ ); + } else { + return this.renderCellWithType("image"); + } + } else { + return this.renderCellWithType("image"); + } + } } @observer -- cgit v1.2.3-70-g09d2 From 3dab85351e1fe862a54294cec70e7139abea0d7d Mon Sep 17 00:00:00 2001 From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com> Date: Mon, 15 Jun 2020 00:10:16 -0700 Subject: added ? to a lot of things --- .../views/collections/CollectionCarouselView.tsx | 2 +- .../views/collections/CollectionDockingView.tsx | 2 +- src/client/views/collections/CollectionView.tsx | 18 +- src/client/views/nodes/DocumentView.tsx | 2 +- src/client/views/nodes/ImageBox.tsx | 10 +- .../nodes/formattedText/FormattedTextBox.scss | 283 ++++++++++++++++++++- .../views/nodes/formattedText/FormattedTextBox.tsx | 4 +- src/mobile/MobileInterface.scss | 8 + src/mobile/MobileInterface.tsx | 10 +- src/server/index.ts | 1 + 10 files changed, 319 insertions(+), 21 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx index f65a89422..bd0e4fc9a 100644 --- a/src/client/views/collections/CollectionCarouselView.tsx +++ b/src/client/views/collections/CollectionCarouselView.tsx @@ -87,7 +87,7 @@ export class CollectionCarouselView extends CollectionSubView(CarouselDocument) onContextMenu = (e: React.MouseEvent): void => { // need to test if propagation has stopped because GoldenLayout forces a parallel react hierarchy to be created for its top-level layout if (!e.isPropagationStopped()) { - ContextMenu.Instance.addItem({ + ContextMenu.Instance?.addItem({ description: "Make Hero Image", event: () => { const index = NumCast(this.layoutDoc._itemIndex); (this.dataDoc || Doc.GetProto(this.props.Document)).hero = ObjectField.MakeCopy(this.childLayoutPairs[index].layout.data as ObjectField); diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 6f5a3dfe4..02ba45f9c 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -840,7 +840,7 @@ export class DockedFrameRenderer extends React.Component { parentActive={returnTrue} whenActiveChanged={emptyFunction} focus={emptyFunction} - backgroundColor={CollectionDockingView.Instance.props.backgroundColor} + backgroundColor={CollectionDockingView.Instance?.props.backgroundColor} addDocTab={this.addDocTab} pinToPres={DockedFrameRenderer.PinDoc} ContainingCollectionView={undefined} diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index a25a864af..00a1d27f0 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -213,12 +213,12 @@ export class CollectionView extends Touchable Doc, addExtras: boolean) { - const existingVm = ContextMenu.Instance.findByDescription(category); + const existingVm = ContextMenu.Instance?.findByDescription(category); const subItems = existingVm && "subitems" in existingVm ? existingVm.subitems : []; subItems.push({ description: "Freeform", event: () => func(CollectionViewType.Freeform), icon: "signature" }); if (addExtras && CollectionView._safeMode) { - ContextMenu.Instance.addItem({ description: "Test Freeform", event: () => func(CollectionViewType.Invalid), icon: "project-diagram" }); + ContextMenu.Instance?.addItem({ description: "Test Freeform", event: () => func(CollectionViewType.Invalid), icon: "project-diagram" }); } subItems.push({ description: "Schema", event: () => func(CollectionViewType.Schema), icon: "th-list" }); subItems.push({ description: "Tree", event: () => func(CollectionViewType.Tree), icon: "tree" }); @@ -235,7 +235,7 @@ export class CollectionView extends Touchable this._isLightboxOpen = true), icon: "eye" }); - !existingVm && ContextMenu.Instance.addItem({ description: category, subitems: subItems, icon: "eye" }); + !existingVm && ContextMenu.Instance?.addItem({ description: category, subitems: subItems, icon: "eye" }); } onContextMenu = (e: React.MouseEvent): void => { @@ -248,7 +248,7 @@ export class CollectionView extends Touchable this.props.Document.forceActive = !this.props.Document.forceActive, icon: "project-diagram" }); if (this.props.Document.childLayout instanceof Doc) { @@ -259,9 +259,9 @@ export class CollectionView extends Touchable this.props.Document.isInPlaceContainer = !this.props.Document.isInPlaceContainer, icon: "project-diagram" }); - !existing && ContextMenu.Instance.addItem({ description: "Options...", subitems: layoutItems, icon: "hand-point-right" }); + !existing && ContextMenu.Instance?.addItem({ description: "Options...", subitems: layoutItems, icon: "hand-point-right" }); - const existingOnClick = ContextMenu.Instance.findByDescription("OnClick..."); + const existingOnClick = ContextMenu.Instance?.findByDescription("OnClick..."); const onClicks = existingOnClick && "subitems" in existingOnClick ? existingOnClick.subitems : []; const funcs = [ { key: "onChildClick", name: "On Child Clicked" }, @@ -277,12 +277,12 @@ export class CollectionView extends Touchable this.props.Document[StrCast(childClick.targetScriptKey)] = ObjectField.MakeCopy(ScriptCast(childClick.data)), })); - !existingOnClick && ContextMenu.Instance.addItem({ description: "OnClick...", subitems: onClicks, icon: "hand-point-right" }); + !existingOnClick && ContextMenu.Instance?.addItem({ description: "OnClick...", subitems: onClicks, icon: "hand-point-right" }); - const more = ContextMenu.Instance.findByDescription("More..."); + const more = ContextMenu.Instance?.findByDescription("More..."); const moreItems = more && "subitems" in more ? more.subitems : []; moreItems.push({ description: "Export Image Hierarchy", icon: "columns", event: () => ImageUtils.ExportHierarchyToFileSystem(this.props.Document) }); - !more && ContextMenu.Instance.addItem({ description: "More...", subitems: moreItems, icon: "hand-point-right" }); + !more && ContextMenu.Instance?.addItem({ description: "More...", subitems: moreItems, icon: "hand-point-right" }); } } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 1d98a2628..66bc73617 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -138,7 +138,7 @@ export class DocumentView extends DocComponent(Docu document.removeEventListener("pointerup", this.onPointerUp); console.log(SelectionManager.SelectedDocuments()); console.log("START"); - if (RadialMenu.Instance._display === false) { + if (RadialMenu.Instance?._display === false) { this.addHoldMoveListeners(); this.addHoldEndListeners(); this.onRadialMenu(e, me); diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index cabf30c13..73410e02f 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -174,19 +174,19 @@ export class ImageBox extends ViewBoxAnnotatableComponent.formattedTextBox-sidebar-handle { + right: 0; + left: unset; + } + + .formattedTextBox-sidebar, + .formattedTextBox-sidebar-inking { + border-left: dashed 1px black; + height: 100%; + display: inline-block; + position: absolute; + right: 0; + + .collectionfreeformview-container { + position: relative; + } + + >.formattedTextBox-sidebar-handle { + right: unset; + left: -5; + } + } + + .formattedTextBox-sidebar-inking { + pointer-events: all; + } + + .formattedTextBox-inner-rounded { + height: 70%; + width: 85%; + position: absolute; + overflow: auto; + top: 15%; + left: 10%; + } + + .formattedTextBox-inner-rounded, + .formattedTextBox-inner { + height: 100%; + white-space: pre-wrap; + hr { + display: block; + unicode-bidi: isolate; + margin-block-start: 0.5em; + margin-block-end: 0.5em; + margin-inline-start: auto; + margin-inline-end: auto; + overflow: hidden; + border-style: inset; + border-width: 1px; + } + } + + // .menuicon { + // display: inline-block; + // border-right: 1px solid rgba(0, 0, 0, 0.2); + // color: #888; + // line-height: 1; + // padding: 0 7px; + // margin: 1px; + // cursor: pointer; + // text-align: center; + // min-width: 1.4em; + // } + + .strong, + .heading { + font-weight: bold; + } + + .em { + font-style: italic; + } + + .userMarkOpen { + background: rgba(255, 255, 0, 0.267); + display: inline; + } + + .userMark { + background: rgba(255, 255, 0, 0.267); + font-size: 2px; + display: inline-grid; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 10px; + min-height: 10px; + text-align: center; + align-content: center; + } + + footnote { + display: inline-block; + position: relative; + cursor: pointer; + + div { + padding: 0 !important; + } + } + + footnote::after { + content: counter(prosemirror-footnote); + vertical-align: super; + font-size: 75%; + counter-increment: prosemirror-footnote; + } + + .ProseMirror { + counter-reset: prosemirror-footnote; + } + + .footnote-tooltip { + cursor: auto; + font-size: 75%; + position: absolute; + left: -30px; + top: calc(100% + 10px); + background: silver; + padding: 3px; + border-radius: 2px; + max-width: 100px; + min-width: 50px; + width: max-content; + } + + .prosemirror-attribution { + font-size: 8px; + } + + .footnote-tooltip::before { + border: 5px solid silver; + border-top-width: 0px; + border-left-color: transparent; + border-right-color: transparent; + position: absolute; + top: -5px; + left: 27px; + content: " "; + height: 0; + width: 0; + } + + + .formattedTextBox-inlineComment { + position: relative; + width: 40px; + height: 20px; + &::before { + content: "→"; + } + &:hover { + background: orange; + } + } + + .formattedTextBox-summarizer { + opacity: 0.5; + position: relative; + width: 40px; + height: 20px; + &::after { + content: "←"; + } + } + + .formattedTextBox-summarizer-collapsed { + opacity: 0.5; + position: relative; + width: 40px; + height: 20px; + &::after { + content: "..."; + } + } + + .ProseMirror { + touch-action: none; + span { + font-family: inherit; + } + + ol, ul { + counter-reset: deci1 0 multi1 0; + padding-left: 1em; + font-family: inherit; + } + ol { + margin-left: 1em; + font-family: inherit; + } + + .decimal1-ol { counter-reset: deci1; p {display: inline; font-family: inherit} margin-left: 0; } + .decimal2-ol { counter-reset: deci2; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 1em;} + .decimal3-ol { counter-reset: deci3; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 2em;} + .decimal4-ol { counter-reset: deci4; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 3em;} + .decimal5-ol { counter-reset: deci5; p {display: inline; font-family: inherit} font-size: smaller; } + .decimal6-ol { counter-reset: deci6; p {display: inline; font-family: inherit} font-size: smaller; } + .decimal7-ol { counter-reset: deci7; p {display: inline; font-family: inherit} font-size: smaller; } + + .multi1-ol { counter-reset: multi1; p {display: inline; font-family: inherit} margin-left: 0; padding-left: 1.2em } + .multi2-ol { counter-reset: multi2; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 1.4em;} + .multi3-ol { counter-reset: multi3; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 2em;} + .multi4-ol { counter-reset: multi4; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 3.4em;} + + .decimal1:before { transition: 0.5s;counter-increment: deci1; display: inline-block; margin-left: -1em; width: 1em; content: counter(deci1) ". "; } + .decimal2:before { transition: 0.5s;counter-increment: deci2; display: inline-block; margin-left: -2.1em; width: 2.1em; content: counter(deci1) "."counter(deci2) ". "; } + .decimal3:before { transition: 0.5s;counter-increment: deci3; display: inline-block; margin-left: -2.85em;width: 2.85em; content: counter(deci1) "."counter(deci2) "."counter(deci3) ". "; } + .decimal4:before { transition: 0.5s;counter-increment: deci4; display: inline-block; margin-left: -3.85em;width: 3.85em; content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) ". "; } + .decimal5:before { transition: 0.5s;counter-increment: deci5; display: inline-block; margin-left: -2em; width: 5em; content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) ". "; } + .decimal6:before { transition: 0.5s;counter-increment: deci6; display: inline-block; margin-left: -2em; width: 6em; content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) "."counter(deci6) ". "; } + .decimal7:before { transition: 0.5s;counter-increment: deci7; display: inline-block; margin-left: -2em; width: 7em; content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) "."counter(deci6) "."counter(deci7) ". "; } + + .multi1:before { transition: 0.5s;counter-increment: multi1; display: inline-block; margin-left: -1em; width: 1.2em; content: counter(multi1, upper-alpha) ". "; } + .multi2:before { transition: 0.5s;counter-increment: multi2; display: inline-block; margin-left: -2em; width: 2em; content: counter(multi1, upper-alpha) "."counter(multi2, decimal) ". "; } + .multi3:before { transition: 0.5s;counter-increment: multi3; display: inline-block; margin-left: -2.85em; width:2.85em; content: counter(multi1, upper-alpha) "."counter(multi2, decimal) "."counter(multi3, lower-alpha) ". "; } + .multi4:before { transition: 0.5s;counter-increment: multi4; display: inline-block; margin-left: -4.2em; width: 4.2em; content: counter(multi1, upper-alpha) "."counter(multi2, decimal) "."counter(multi3, lower-alpha) "."counter(multi4, lower-roman) ". "; } + } +} diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 1fab54d7e..b0b648b66 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -188,7 +188,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp } } const state = this._editorView.state.apply(tx); - this._editorView.updateState(state); + this?._editorView?.updateState(state); (tx.storedMarks && !this._editorView.state.storedMarks) && (this._editorView.state.storedMarks = tx.storedMarks); const tsel = this._editorView.state.selection.$from; @@ -1213,7 +1213,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp const rounded = StrCast(this.layoutDoc.borderRounding) === "100%" ? "-rounded" : ""; const interactive = Doc.GetSelectedTool() === InkTool.None && !this.layoutDoc.isBackground; if (this.props.isSelected()) { - this._editorView && RichTextMenu.Instance.updateFromDash(this._editorView, undefined, this.props); + this._editorView && RichTextMenu.Instance?.updateFromDash(this._editorView, undefined, this.props); } else if (FormattedTextBoxComment.textBox === this) { FormattedTextBoxComment.Hide(); } diff --git a/src/mobile/MobileInterface.scss b/src/mobile/MobileInterface.scss index f75e60a37..215ce02e5 100644 --- a/src/mobile/MobileInterface.scss +++ b/src/mobile/MobileInterface.scss @@ -17,6 +17,14 @@ position: relative; touch-action: none; width: 100%; + + -webkit-touch-callout:none; + -webkit-user-select:none; + -khtml-user-select:none; + -moz-user-select:none; + -ms-user-select:none; + user-select:none; + -webkit-tap-highlight-color:rgba(0,0,0,0); } .mobileInterface-background { diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index 6cb8e3486..a2d3f63dc 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -39,6 +39,7 @@ import { SelectionManager } from "../client/util/SelectionManager"; import { SketchPicker } from "react-color"; import { ScriptField } from "../fields/ScriptField"; import InkOptionsMenu from "../client/views/collections/collectionFreeForm/InkOptionsMenu"; +import { RadialMenu } from "../client/views/nodes/RadialMenu"; library.add(faTasks, faMobile, faThLarge, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, faTerminal, faToggleOn, fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard, @@ -96,6 +97,14 @@ export class MobileInterface extends React.Component { this._homeDoc._viewType === "stacking" ? this.menuListView = true : this.menuListView = false; Doc.SetSelectedTool(InkTool.None); this.switchCurrentView((userDoc: Doc) => this._homeDoc); + + document.removeEventListener("dblclick", this.onReactDoubleClick); + document.addEventListener("dblclick", this.onReactDoubleClick); + } + + onReactDoubleClick = (e: MouseEvent) => { + console.log("tapped"); + e.stopPropagation(); } @action @@ -896,7 +905,6 @@ export class MobileInterface extends React.Component { } else if (!this.imageUploadActive) { } - console.log("upload"); return (
diff --git a/src/server/index.ts b/src/server/index.ts index 590affd06..083173bb5 100644 --- a/src/server/index.ts +++ b/src/server/index.ts @@ -104,6 +104,7 @@ function routeSetter({ isRelease, addSupervisedRoute, logRegistrationOutcome }: const serve: PublicHandler = ({ req, res }) => { const detector = new mobileDetect(req.headers['user-agent'] || ""); const filename = detector.mobile() !== null ? 'mobile/image.html' : 'index.html'; + console.log(detector.is("iPhone")); res.sendFile(path.join(__dirname, '../../deploy/' + filename)); }; -- cgit v1.2.3-70-g09d2 From 87aa11c70be1ae0270c69adc0c1e0219f79ce820 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Tue, 16 Jun 2020 01:34:12 +0800 Subject: uploader + menu changes image upload w/ video and other files menu updates --- src/client/util/CurrentUserUtils.ts | 23 +-- src/client/views/GestureOverlay.scss | 2 +- .../views/collections/CollectionStackingView.scss | 10 +- .../collectionFreeForm/InkOptionsMenu.tsx | 4 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 2 +- .../views/presentationview/PresElementBox.tsx | 2 +- src/mobile/ImageUpload.scss | 1 + src/mobile/ImageUpload.tsx | 139 +++++++++--------- src/mobile/MobileInterface.tsx | 156 ++------------------- src/mobile/MobileMenu.scss | 8 +- 10 files changed, 109 insertions(+), 238 deletions(-) (limited to 'src/client/views') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 1b0622f6d..e1605473c 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -329,7 +329,8 @@ export class CurrentUserUtils { doc.emptyWebpage = Docs.Create.WebDocument("", { title: "New Webpage", _nativeWidth: 850, _nativeHeight: 962, _width: 600, UseCors: true }); } if (doc.activeMobile === undefined) { - doc.activeMobile = CurrentUserUtils.setupMobileMenu(); + console.log("phone setup"); + this.setupActiveMobile(doc); } return [ { title: "Drag a comparison box", label: "Comp", icon: "columns", ignoreClick: true, drag: 'Docs.Create.ComparisonDocument()' }, @@ -398,16 +399,18 @@ export class CurrentUserUtils { return doc.myItemCreators as Doc; } - // static setupActiveMobile(doc: Doc) { - // if (doc.activeMobile === undefined) { - // doc.activeMobile = CurrentUserUtils.setupMobileMenu(); - // } - // } + static setupActiveMobile(doc: Doc) { + if (doc.activeMobile === undefined) { + console.log("undefined"); + doc.activeMobile = this.setupMobileMenu(); + } + return doc.activeMobile as Doc; + } static setupMobileMenu() { - const menu = Cast(Docs.Create.StackingDocument(CurrentUserUtils.setupMobileButtons(), { - _width: 980, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "home", _yMargin: 100 - }), Doc) as Doc; + const menu = new PrefetchProxy(Docs.Create.StackingDocument(this.setupMobileButtons(), { + _width: 980, ignoreClick: true, lockedPosition: false, _chromeStatus: "disabled", title: "home", _yMargin: 100 + })); return menu; } @@ -740,7 +743,7 @@ export class CurrentUserUtils { this.setupDefaultIconTemplates(doc); // creates a set of icon templates triggered by the document deoration icon this.setupDocTemplates(doc); // sets up the template menu of templates this.setupRightSidebar(doc); // sets up the right sidebar collection for mobile upload documents and sharing - // this.setupActiveMobile(doc); + this.setupActiveMobile(doc); this.setupOverlays(doc); // documents in overlay layer this.setupDockedButtons(doc); // the bottom bar of font icons this.setupDefaultPresentation(doc); // presentation that's initially triggered diff --git a/src/client/views/GestureOverlay.scss b/src/client/views/GestureOverlay.scss index 107077792..f61f4a05e 100644 --- a/src/client/views/GestureOverlay.scss +++ b/src/client/views/GestureOverlay.scss @@ -1,7 +1,7 @@ .gestureOverlay-cont { width: 100vw; height: 100vh; - position: absolute; + position: fixed; top: 0; left: 0; touch-action: none; diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss index 714ff46a9..98efdfd23 100644 --- a/src/client/views/collections/CollectionStackingView.scss +++ b/src/client/views/collections/CollectionStackingView.scss @@ -428,11 +428,9 @@ .collectionStackingView .collectionStackingView-columnDragger, .collectionMasonryView .collectionStackingView-columnDragger { - width: 30; - transform: translate(0, -40px); - height: 30; - font-size: 40; - position: absolute; - margin-left: -5; + width: 0.1; + height: 0.1; + opacity: 0; + font-size: 0; } } \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx index 5a27f74e5..9f5e217bf 100644 --- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx +++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx @@ -101,7 +101,7 @@ export default class InkOptionsMenu extends AntimodeMenu { title={`Draw ${btn}`} key={btn} onPointerDown={action(e => GestureOverlay.Instance.InkShape = btn)} - style={{ backgroundColor: btn === GestureOverlay.Instance.InkShape ? "121212" : "" }}> + style={{ backgroundColor: btn === GestureOverlay.Instance?.InkShape ? "121212" : "" }}> {this._icons[i]} )}, ; @@ -113,7 +113,7 @@ export default class InkOptionsMenu extends AntimodeMenu { title="Bezier changer" key="bezier" onPointerDown={e => this.changeBezier(e)} - style={ { backgroundColor:ActiveInkBezierApprox() ? "121212":"" } }> + style={{ backgroundColor: ActiveInkBezierApprox() ? "121212" : "" }}> B ; } diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 1fab54d7e..e034e07a0 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -1213,7 +1213,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp const rounded = StrCast(this.layoutDoc.borderRounding) === "100%" ? "-rounded" : ""; const interactive = Doc.GetSelectedTool() === InkTool.None && !this.layoutDoc.isBackground; if (this.props.isSelected()) { - this._editorView && RichTextMenu.Instance.updateFromDash(this._editorView, undefined, this.props); + this._editorView && RichTextMenu.Instance?.updateFromDash(this._editorView, undefined, this.props); } else if (FormattedTextBoxComment.textBox === this) { FormattedTextBoxComment.Hide(); } diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index caee06d8f..793d4068f 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -49,7 +49,7 @@ export class PresElementBox extends ViewBoxBaseComponent [this.rootDoc.presExpandInlineButton, this.collapsedHeight], - params => this.layoutDoc._height = NumCast(params[1]) + (Number(params[0]) ? 100 : 0), { fireImmediately: true }); + params => this.layoutDoc._height = NumCast(params[1]) + (Number(params[0]) ? 200 : 0), { fireImmediately: true }); } componentWillUnmount() { this._heightDisposer?.(); diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss index d5ab31469..95c0c2680 100644 --- a/src/mobile/ImageUpload.scss +++ b/src/mobile/ImageUpload.scss @@ -6,6 +6,7 @@ flex-direction: column; align-items: center; max-width: 400px; + min-width: 400px; .upload_label { font-size: 3em; diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index 8f050aedd..3b4008e3f 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -14,6 +14,7 @@ import { listSpec } from '../fields/Schema'; import { List } from '../fields/List'; import { Scripting } from '../client/util/Scripting'; import MainViewModal from '../client/views/MainViewModal'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; export interface ImageUploadProps { Document: Doc; @@ -35,83 +36,80 @@ export class Uploader extends React.Component { @observable process: string = ""; onClick = async () => { - console.log("uploader click"); try { - this.status = "initializing protos"; + await Docs.Prototypes.initialize(); + const imgPrev = document.getElementById("img_preview"); const slab1 = document.getElementById("slab1"); if (slab1) { slab1.style.opacity = "1"; } - await Docs.Prototypes.initialize(); - const imgPrev = document.getElementById("img_preview"); - console.log("buddy"); if (imgPrev) { - console.log("hi"); const files: FileList | null = inputRef.current!.files; + const slab2 = document.getElementById("slab2"); + if (slab2) { + slab2.style.opacity = "1"; + } if (files && files.length !== 0) { - this.process = "Uploading Image" - console.log(files[0]); - const name = files[0].name; - const res = await Networking.UploadFilesToServer(files[0]); - this.status = "uploading image"; - const slab2 = document.getElementById("slab2"); - if (slab2) { - slab2.style.opacity = "1"; - } - this.status = "upload image, getting json"; - const slab3 = document.getElementById("slab3"); - if (slab3) { - slab3.style.opacity = "1"; - } - res.map(async ({ result }) => { - if (result instanceof Error) { - return; - } - const path = Utils.prepend(result.accessPaths.agnostic.client); - const doc = Docs.Create.ImageDocument(path, { _nativeWidth: 200, _width: 200, title: name }); - - this.status = "getting user document"; - const slab4 = document.getElementById("slab4"); - if (slab4) { - slab4.style.opacity = "1"; - } - this.status = "upload image, getting json"; - const slab5 = document.getElementById("slab5"); - if (slab5) { - slab5.style.opacity = "1"; + this.process = "Uploading Files"; + for (let index = 0; index < files.length; ++index) { + const file = files[index]; + const res = await Networking.UploadFilesToServer(file); + const slab3 = document.getElementById("slab3"); + if (slab3) { + slab3.style.opacity = "1"; } - const res = await rp.get(Utils.prepend("/getUserDocumentId")); - if (!res) { - throw new Error("No user id returned"); - } - const field = await DocServer.GetRefField(res); - let pending: Opt; - if (field instanceof Doc) { - pending = await Cast(field.rightSidebarCollection, Doc); - } - if (pending) { - this.status = "has pending docs"; - const slab6 = document.getElementById("slab6"); - if (slab6) { - slab6.style.opacity = "1"; + res.map(async ({ result }) => { + const name = file.name; + if (result instanceof Error) { + return; } - const data = await Cast(pending.data, listSpec(Doc)); - if (data) { - data.push(doc); + const path = Utils.prepend(result.accessPaths.agnostic.client); + let doc = null; + if (file.type === "video/mp4") { + doc = Docs.Create.VideoDocument(path, { _nativeWidth: 200, _width: 200, title: name }); } else { - pending.data = new List([doc]); + doc = Docs.Create.ImageDocument(path, { _nativeWidth: 200, _width: 200, title: name }); } - this.status = "finished"; - - console.log("hi"); - const slab7 = document.getElementById("slab7"); - if (slab7) { - slab7.style.opacity = "1"; + const slab4 = document.getElementById("slab4"); + if (slab4) { + slab4.style.opacity = "1"; + } + const res = await rp.get(Utils.prepend("/getUserDocumentId")); + if (!res) { + throw new Error("No user id returned"); + } + const field = await DocServer.GetRefField(res); + let pending: Opt; + if (field instanceof Doc) { + pending = await Cast(field.rightSidebarCollection, Doc); } - this.process = "Image Uploaded"; + if (pending) { + const data = await Cast(pending.data, listSpec(Doc)); + if (data) { + data.push(doc); + } else { + pending.data = new List([doc]); + } + this.status = "finished"; + const slab5 = document.getElementById("slab5"); + if (slab5) { + slab5.style.opacity = "1"; + } + this.process = "File " + (index + 1).toString() + " Uploaded"; + if (index === files.length) { + const slab6 = document.getElementById("slab6"); + if (slab6) { + slab6.style.opacity = "1"; + } + } + } + }); + this.process = "All Files Uploaded"; + const slab7 = document.getElementById("slab7"); + if (slab7) { + slab7.style.opacity = "1"; } - - }); + } } else { this.process = "No file selected"; } @@ -120,16 +118,18 @@ export class Uploader extends React.Component { } catch (error) { this.error = JSON.stringify(error); } - } // Updates label after a files is selected (so user knows a file is uploaded) inputLabel = async () => { const files: FileList | null = inputRef.current!.files; await files; - if (files && files.length !== 0) { + if (files && files.length === 1) { console.log(files); this.nm = files[0].name; + } else if (files && files.length > 1) { + console.log(files.length); + this.nm = files.length.toString() + " files selected"; } } @@ -163,7 +163,7 @@ export class Uploader extends React.Component { if (slab7) { slab7.style.opacity = "0.4"; } - this.nm = "Choose an image"; + this.nm = "Choose files"; if (inputRef.current) { inputRef.current.value = ""; @@ -177,9 +177,12 @@ export class Uploader extends React.Component { private get uploadInterface() { return (
- + -
Upload Image
+
+ + Upload +
{/*
Upload
*/} {/*

{this.status}

diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index f2914eaae..211cc7a1a 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -52,10 +52,7 @@ export class MobileInterface extends React.Component { @observable static Instance: MobileInterface; @computed private get userDoc() { return Doc.UserDoc(); } @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; } - // @computed private get activeContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; } - // Sets up new mobile menu only if activeMobile already exists - // @observable private mainDoc: any = this.userDoc.activeMobile === undefined ? CurrentUserUtils.setupMobileMenu() : this.userDoc.activeMobile; - @observable private mainDoc: any = CurrentUserUtils.setupMobileMenu(); + @observable private mainDoc: any = CurrentUserUtils.setupActiveMobile(this.userDoc); @observable private renderView?: () => JSX.Element; @observable private audioState: any; @observable private activeToolbar: boolean = false; @@ -86,13 +83,7 @@ export class MobileInterface extends React.Component { @action componentDidMount = () => { - library.add(...[faPenNib, faHighlighter, faEraser, faMousePointer, faThumbtack]); - if (this.userDoc.activeMobile) { - console.log(Doc.UserDoc().activeMobile); - } - if (this.userDoc && !this.mainContainer) { - this.userDoc.activeMobile = this._homeDoc; - } + Doc.UserDoc().activeMobile = this._homeDoc; this._homeDoc._viewType === "stacking" ? this.menuListView = true : this.menuListView = false; Doc.SetSelectedTool(InkTool.None); this.switchCurrentView((userDoc: Doc) => this._homeDoc); @@ -353,26 +344,6 @@ export class MobileInterface extends React.Component {
); } - // } - // } else { - - // return ( - //
- //
- //
- //
this.returnHome()}>Home - //
- //
- //
- //
- //
- // ); - // } - - // } } // Handles when user clicks on document in the pathbar @@ -393,16 +364,6 @@ export class MobileInterface extends React.Component { } renderDefaultContent = () => { - let menuButtons = DocListCast(this._homeDoc.data).map((doc: Doc, index: any) => { - if (doc.type !== "ink") { - return ( -
doc.onClick}>{doc.title} -
); - } - }); if (this._homeMenu === true) { return ( @@ -420,7 +381,10 @@ export class MobileInterface extends React.Component { {this.renderPathbar()}
@@ -429,7 +393,7 @@ export class MobileInterface extends React.Component { let workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc; if (this._child) { - workspaces = this._child + workspaces = this._child; } let buttons = DocListCast(workspaces.data).map((doc: Doc, index: any) => { @@ -468,6 +432,10 @@ export class MobileInterface extends React.Component { : <> {buttons} +
ScriptField.MakeScript("createNewWorkspace()")}>Create New Workspace +
}
@@ -627,100 +595,12 @@ export class MobileInterface extends React.Component { // this.recordAudio(); } - // renderActiveCollection = (userDoc: Doc) => { - // if (this.activeContainer) { - // const active = Cast(this.activeContainer.data, listSpec(Doc)); - // if (active) { - // return ( - //
HELLO!
- // ); - // } - // } - // } - - onBack = (e: React.MouseEvent) => { - this.switchCurrentView((userDoc: Doc) => this.mainDoc); - Doc.SetSelectedTool(InkTool.None); // TODO: switch to previous tool - - DocServer.Mobile.dispatchOverlayTrigger({ - enableOverlay: false, - width: window.innerWidth, - height: window.innerHeight - }); - - // this.inkDoc = undefined; - this.drawingInk = false; - } - - shiftLeft = (e: React.MouseEvent) => { - DocServer.Mobile.dispatchOverlayPositionUpdate({ - dx: -10 - }); - e.preventDefault(); - e.stopPropagation(); - } - - shiftRight = (e: React.MouseEvent) => { - DocServer.Mobile.dispatchOverlayPositionUpdate({ - dx: 10 - }); - e.preventDefault(); - e.stopPropagation(); - } - panelHeight = () => window.innerHeight; panelWidth = () => window.innerWidth; //WAS 3 //WAS 1 - upload = async (e: React.MouseEvent) => { - if (this.mainContainer) { - const data = Cast(this.mainContainer.data, listSpec(Doc)); - if (data) { - const collectionDoc = await data[1]; //this should be the collection doc since the positions should be locked - const children = DocListCast(collectionDoc.data); - const uploadDoc = children.length === 1 ? children[0] : Docs.Create.StackingDocument(children, { - title: "Mobile Upload Collection", backgroundColor: "white", lockedPosition: true, _width: 300, _height: 300 - }); - if (uploadDoc) { - DocServer.Mobile.dispatchMobileDocumentUpload({ - docId: uploadDoc[Id], - }); - } - } - } - e.stopPropagation(); - e.preventDefault(); - } - - addWebToCollection = async () => { - let url = "https://en.wikipedia.org/wiki/Hedgehog"; - if (this.mainContainer) { - const data = Cast(this.mainContainer.data, listSpec(Doc)); - if (data) { - const webDoc = await data[0]; - const urlField: FieldResult = Cast(webDoc.data, WebField); - url = urlField ? urlField.url.toString() : "https://en.wikipedia.org/wiki/Hedgehog"; - - } - } - Docs.Create.WebDocument(url, { _width: 300, _height: 300, title: "Mobile Upload Web Doc" }); - } - - clearUpload = async () => { - if (this.mainContainer) { - const data = Cast(this.mainContainer.data, listSpec(Doc)); - if (data) { - const collectionDoc = await data[1]; - const children = DocListCast(collectionDoc.data); - children.forEach(doc => { - }); - // collectionDoc[data] = new List(); - } - } - } - pinToPresentation = () => { // Only making button available if it is an image if (this._activeDoc.type === "image") { @@ -845,7 +725,6 @@ export class MobileInterface extends React.Component { {this.uploadAudioButton()} {/* {this.colorTool()} */} {this.inkMenu()} -
{this.displayWorkspaces()} @@ -879,14 +758,6 @@ export class MobileInterface extends React.Component { this.imageUploadActive = false; } - // toggleUpload = () => { - // if (this.imageUploadActive === true) { - // this.imageUploadActive = false; - // } else { - // this.imageUploadActive = true; - // } - // } - uploadImage = () => { if (this.imageUploadActive) { console.log("active"); @@ -905,11 +776,6 @@ export class MobileInterface extends React.Component { } } - - -const inputRef = React.createRef(); - - Scripting.addGlobal(function switchMobileView(doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) { return MobileInterface.Instance.switchCurrentView(doc, renderView, onSwitch); }); Scripting.addGlobal(function openMobilePresentation() { return MobileInterface.Instance.setupDefaultPresentation(); }); Scripting.addGlobal(function toggleMobileSidebar() { return MobileInterface.Instance.toggleSidebar(); }); diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss index da1e9d951..44d3acb6f 100644 --- a/src/mobile/MobileMenu.scss +++ b/src/mobile/MobileMenu.scss @@ -96,7 +96,7 @@ body { } .sidebar { - position: absolute; + position: fixed; top: 120px; opacity: 0; right: -100%; @@ -212,7 +212,7 @@ body { } .pathbar { - position: absolute; + position: fixed; top: 118px; left: 0px; background: #1a1a1a; @@ -373,7 +373,7 @@ body { } .homeSwitch { - position: absolute; + position: fixed; top: 212; right: 36px; display: inline-flex; @@ -401,4 +401,4 @@ body { .list.active { color: darkred; border-color: darkred; -} +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 7132c4c8335fa3c7c5a5fa2386b710321a0c883d Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 15 Jun 2020 15:53:09 -0500 Subject: resizing images based on column width --- .../views/collections/CollectionSchemaCells.tsx | 118 ++++++++++++++++++--- .../views/collections/CollectionSchemaHeaders.tsx | 4 +- 2 files changed, 103 insertions(+), 19 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index 8164e37e3..e34a9e450 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -3,7 +3,7 @@ import { action, observable, trace } from "mobx"; import { observer } from "mobx-react"; import { CellInfo } from "react-table"; import "react-table/react-table.css"; -import { emptyFunction, returnFalse, returnZero, returnOne } from "../../../Utils"; +import { emptyFunction, returnFalse, returnZero, returnOne, Utils } from "../../../Utils"; import { Doc, DocListCast, Field, Opt } from "../../../fields/Doc"; import { Id } from "../../../fields/FieldSymbols"; import { KeyCodes } from "../../util/KeyCodes"; @@ -25,6 +25,8 @@ import { undoBatch } from "../../util/UndoManager"; import { SnappingManager } from "../../util/SnappingManager"; import { ComputedField } from "../../../fields/ScriptField"; import { ImageField } from "../../../fields/URLField"; +import { KeysDropdown } from "./CollectionSchemaHeaders"; +const path = require('path'); library.add(faExpand); @@ -322,6 +324,21 @@ export class CollectionSchemaImageCell extends CollectionSchemaCell { // render() { // return this.renderCellWithType("image"); // } + + choosePath(url: URL, dataDoc: any) { + const lower = url.href.toLowerCase(); + if (url.protocol === "data") { + return url.href; + } else if (url.href.indexOf(window.location.origin) === -1) { + return Utils.CorsProxy(url.href); + } else if (!/\.(png|jpg|jpeg|gif|webp)$/.test(lower)) { + return url.href;//Why is this here + } + const ext = path.extname(url.href); + const _curSuffix = "_o"; + return url.href.replace(ext, _curSuffix + ext); + } + render() { const props: FieldViewProps = { Document: this.props.rowProps.original, @@ -349,21 +366,40 @@ export class CollectionSchemaImageCell extends CollectionSchemaCell { ContentScaling: returnOne }; - const data = Cast(props.DataDoc?.data, ImageField); - const url = data ? data.url.href : undefined; - console.log(url); + let image = true; + let url = []; + if (props.DataDoc) { + const field = Cast(props.DataDoc[props.fieldKey], ImageField, null); // retrieve the primary image URL that is being rendered from the data doc + const alts = DocListCast(props.DataDoc[props.fieldKey + "-alternates"]); // retrieve alternate documents that may be rendered as alternate images + const altpaths = alts.map(doc => Cast(doc[Doc.LayoutFieldKey(doc)], ImageField, null)?.url).filter(url => url).map(url => this.choosePath(url, props.DataDoc)); // access the primary layout data of the alternate documents + const paths = field ? [this.choosePath(field.url, props.DataDoc), ...altpaths] : altpaths; + if (paths.length) { + url = paths; + } else { + url = [Utils.CorsProxy("http://www.cs.brown.edu/~bcz/noImage.png")]; + image = false; + } + //url = paths.length ? paths : [Utils.CorsProxy("http://www.cs.brown.edu/~bcz/noImage.png")]; + } else { + url = [Utils.CorsProxy("http://www.cs.brown.edu/~bcz/noImage.png")]; + image = false; + } + const heightToWidth = NumCast(props.DataDoc?._nativeHeight) / NumCast(props.DataDoc?._nativeWidth); + const height = this.props.rowProps.width * heightToWidth; if (props.fieldKey === "data") { - if (url) { + if (url !== []) { const reference = React.createRef(); return (
- +
); + } else { return this.renderCellWithType("image"); } @@ -375,20 +411,68 @@ export class CollectionSchemaImageCell extends CollectionSchemaCell { @observer export class CollectionSchemaListCell extends CollectionSchemaCell { - render() { - return this.renderCellWithType("list"); - } // render() { - // const reference = React.createRef(); - // return ( - //
- //
- // - //
- //
- // ); + // return this.renderCellWithType("list"); // } + + emptyFunc() { + + } + render() { + const props: FieldViewProps = { + Document: this.props.rowProps.original, + DataDoc: this.props.rowProps.original, + LibraryPath: [], + dropAction: "alias", + bringToFront: emptyFunction, + rootSelected: returnFalse, + fieldKey: this.props.rowProps.column.id as string, + ContainingCollectionView: this.props.CollectionView, + ContainingCollectionDoc: this.props.CollectionView && this.props.CollectionView.props.Document, + isSelected: returnFalse, + select: emptyFunction, + renderDepth: this.props.renderDepth + 1, + ScreenToLocalTransform: Transform.Identity, + focus: emptyFunction, + active: returnFalse, + whenActiveChanged: emptyFunction, + PanelHeight: returnZero, + PanelWidth: returnZero, + NativeHeight: returnZero, + NativeWidth: returnZero, + addDocTab: this.props.addDocTab, + pinToPres: this.props.pinToPres, + ContentScaling: returnOne + }; + + let value = ""; + const reference = React.createRef(); + const data = props.DataDoc?.fieldKey; + + if (Array.isArray(data)) { + + + + return ( +
+
+ +
+
+ ); + } else { + return this.renderCellWithType("list"); + } + } } @observer diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index 85908c0ca..0d6cf4474 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -267,7 +267,7 @@ export class CollectionSchemaColumnMenu extends React.Component } -interface KeysDropdownProps { +export interface KeysDropdownProps { keyValue: string; possibleKeys: string[]; existingKeys: string[]; @@ -277,7 +277,7 @@ interface KeysDropdownProps { setIsEditing: (isEditing: boolean) => void; } @observer -class KeysDropdown extends React.Component { +export class KeysDropdown extends React.Component { @observable private _key: string = this.props.keyValue; @observable private _searchTerm: string = this.props.keyValue; @observable private _isOpen: boolean = false; -- cgit v1.2.3-70-g09d2 From 3b4585dda8e8018ebec94c9065ca4c37b2c98599 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 15 Jun 2020 17:43:58 -0500 Subject: added parts of drop down --- .../views/collections/CollectionSchemaCells.tsx | 63 +++++++++++++++++----- .../views/collections/CollectionSchemaView.scss | 25 +++++++++ 2 files changed, 75 insertions(+), 13 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index e34a9e450..92f6d1a02 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -15,7 +15,7 @@ import '../DocumentDecorations.scss'; import { EditableView } from "../EditableView"; import { FieldView, FieldViewProps } from "../nodes/FieldView"; import "./CollectionSchemaView.scss"; -import { CollectionView } from "./CollectionView"; +import { CollectionView, Flyout } from "./CollectionView"; import { NumCast, StrCast, BoolCast, FieldValue, Cast } from "../../../fields/Types"; import { Docs } from "../../documents/Documents"; import { library } from '@fortawesome/fontawesome-svg-core'; @@ -26,6 +26,9 @@ import { SnappingManager } from "../../util/SnappingManager"; import { ComputedField } from "../../../fields/ScriptField"; import { ImageField } from "../../../fields/URLField"; import { KeysDropdown } from "./CollectionSchemaHeaders"; +import { listSpec } from "../../../fields/Schema"; +import { ObjectField } from "../../../fields/ObjectField"; +import { List } from "../../../fields/List"; const path = require('path'); library.add(faExpand); @@ -416,9 +419,19 @@ export class CollectionSchemaListCell extends CollectionSchemaCell { // return this.renderCellWithType("list"); // } - emptyFunc() { + @observable private _opened = false; + @observable private _text = ""; + @action + toggleOpened(open: boolean) { + this._opened = open; + } + + @action + onChange = (e: React.ChangeEvent) => { + this._text = e.target.value; } + render() { const props: FieldViewProps = { Document: this.props.rowProps.original, @@ -448,28 +461,52 @@ export class CollectionSchemaListCell extends CollectionSchemaCell { let value = ""; const reference = React.createRef(); - const data = props.DataDoc?.fieldKey; - if (Array.isArray(data)) { + const field = props.Document[props.fieldKey]; + + if (typeof field === "object") { + + const optionsList = Cast(field, List); + + + + + // if (optionsList){ + // const options = optionsList.map(() =>{ + + // }) + // } return (
- + + {/* +
this.toggleOpened(!this._opened)}>☰
+ */} + + + + + {this._opened ?
+
+
Option 1
+
Option 2
+
Option 3
+
Option 4
+
+
: null}
); } else { + console.log("not an array!"); + return this.renderCellWithType("list"); } } diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index a24140b48..96e9aec5a 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -422,6 +422,31 @@ button.add-column { top: 0; right: 0; background-color: lightgray; + + .dropdown { + position: absolute; + top: 100%; + left: 0; + width: 300px; + z-index: 2; + border: 1px solid rgba(0, 0, 0, 0.04); + box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14); + } + + ul { + list-style: none; + padding: 0; + margin: 0; + } + + li { + padding: 8px 12px; + } + + li:hover { + background-color: rgba(0, 0, 0, 0.14); + cursor: pointer; + } } .doc-drag-over { -- cgit v1.2.3-70-g09d2 From e2c60eaad49da3d0485b6f5f236fb0aabb84bef0 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Tue, 16 Jun 2020 00:23:29 -0500 Subject: fixing parts of dropdown --- .../views/collections/CollectionSchemaCells.tsx | 23 ++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index 92f6d1a02..e27de4c96 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -29,6 +29,7 @@ import { KeysDropdown } from "./CollectionSchemaHeaders"; import { listSpec } from "../../../fields/Schema"; import { ObjectField } from "../../../fields/ObjectField"; import { List } from "../../../fields/List"; +import { Link } from "@react-pdf/renderer"; const path = require('path'); library.add(faExpand); @@ -466,16 +467,21 @@ export class CollectionSchemaListCell extends CollectionSchemaCell { if (typeof field === "object") { - const optionsList = Cast(field, List); + const optionsList = field as List; - // if (optionsList){ - // const options = optionsList.map(() =>{ - - // }) - // } + const options = optionsList.map((element, index) => { + if (element instanceof Doc) { + const title = element.title; + return
{title}
; + } else if (element instanceof Link) { + return
link
; + } else { + return
{element}
; + } + }); @@ -495,10 +501,7 @@ export class CollectionSchemaListCell extends CollectionSchemaCell { {this._opened ?
-
Option 1
-
Option 2
-
Option 3
-
Option 4
+ {options}
: null}
-- cgit v1.2.3-70-g09d2 From 4b1dc65c9e0bb917c1f1f780f8a63fc0c91b4ad6 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Tue, 16 Jun 2020 23:53:16 +0800 Subject: mobile menu bug fixes + doc button fix --- deploy/mobile/image.html | 1 + src/client/util/CurrentUserUtils.ts | 73 ++++++++++++---------- .../views/collections/CollectionStackingView.tsx | 2 +- src/client/views/nodes/AudioBox.tsx | 2 +- src/client/views/nodes/PresBox.scss | 5 ++ src/client/views/nodes/RadialMenu.tsx | 6 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 3 +- .../views/presentationview/PresElementBox.scss | 2 +- src/mobile/MobileInterface.tsx | 69 +++++++------------- src/mobile/MobileMenu.scss | 4 +- 10 files changed, 77 insertions(+), 90 deletions(-) (limited to 'src/client/views') diff --git a/deploy/mobile/image.html b/deploy/mobile/image.html index d30ad6ac2..718550f02 100644 --- a/deploy/mobile/image.html +++ b/deploy/mobile/image.html @@ -3,6 +3,7 @@ Dash Mobile + diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 323e398be..9ce162897 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -55,6 +55,15 @@ export class CurrentUserUtils { }); } + if (doc["template-mobile-button"] === undefined) { + const queryTemplate = this.mobileButton({ title: "NEW MOBILE BUTTON", onClick: undefined, _backgroundColor: "lightgrey" }, [this.ficon({ ignoreClick: true, icon: "mobile", backgroundColor: "rgba(0,0,0,0)" }), this.mobileTextContainer({}, [this.mobileButtonText({}, "NEW MOBILE BUTTON"), this.mobileButtonInfo({}, "You can customize this button and make it your own.")])]); + doc["template-mobile-button"] = CurrentUserUtils.ficon({ + onDragStart: ScriptField.MakeFunction('getCopy(this.dragFactory, true)'), + dragFactory: new PrefetchProxy(queryTemplate) as any as Doc, + removeDropProperties: new List(["dropAction"]), title: "mobile button", icon: "mobile" + }); + } + if (doc["template-button-slides"] === undefined) { const slideTemplate = Docs.Create.MultirowDocument( [ @@ -165,16 +174,6 @@ export class CurrentUserUtils { }); } - // if (doc["mobile-button"] === undefined) { - // const mobileTemplate = this.mobileButton({ title: "mobile button", _backgroundColor: "lightgrey" }, [this.ficon({ ignoreClick: true, icon: "mobile", backgroundColor: "rgba(0,0,0,0)" }), this.mobileTextContainer({}, [this.mobileButtonText({}, "text"), this.mobileButtonInfo({}, "This is a default mobile button for use in the mobile menu")])]); - // mobileTemplate.isTemplateDoc = makeTemplate(mobileTemplate); - // doc["mobile-button"] = CurrentUserUtils.ficon({ - // onDragStart: ScriptField.MakeFunction('getCopy(this.dragFactory, true)'), - // dragFactory: new PrefetchProxy(mobileTemplate) as any as Doc, - // removeDropProperties: new List(["dropAction"]), title: "mobile button view", icon: "mobile" - // }); - // } - if (doc["template-button-detail"] === undefined) { const { TextDocument, MasonryDocument, CarouselDocument } = Docs.Create; @@ -229,6 +228,7 @@ export class CurrentUserUtils { doc["template-button-slides"] as Doc, doc["template-button-description"] as Doc, doc["template-button-query"] as Doc, + doc["template-mobile-button"] as Doc, doc["template-button-detail"] as Doc, doc["template-button-link"] as Doc, doc["template-button-switch"] as Doc]; @@ -378,9 +378,8 @@ export class CurrentUserUtils { if (doc.emptyWebpage === undefined) { doc.emptyWebpage = Docs.Create.WebDocument("", { title: "New Webpage", _nativeWidth: 850, _nativeHeight: 962, _width: 600, UseCors: true }); } - if (doc.activeMobile === undefined) { - console.log("phone setup"); - this.setupActiveMobile(doc); + if (doc.activeMobileMenu === undefined) { + this.setupActiveMobileMenu(doc); } return [ { title: "Drag a comparison box", label: "Comp", icon: "columns", ignoreClick: true, drag: 'Docs.Create.ComparisonDocument()' }, @@ -395,7 +394,7 @@ export class CurrentUserUtils { { title: "Drag a search box", label: "Query", icon: "search", ignoreClick: true, drag: 'Docs.Create.QueryDocument({ _width: 200, title: "an image of a cat" })' }, { title: "Drag a scripting box", label: "Script", icon: "terminal", ignoreClick: true, drag: 'Docs.Create.ScriptingDocument(undefined, { _width: 200, _height: 250 title: "untitled script" })' }, { title: "Drag an import folder", label: "Load", icon: "cloud-upload-alt", ignoreClick: true, drag: 'Docs.Create.DirectoryImportDocument({ title: "Directory Import", _width: 400, _height: 400 })' }, - { title: "Drag a mobile view", label: "Phone", icon: "mobile", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory,true)', dragFactory: doc.activeMobile as Doc }, + { title: "Drag a mobile view", label: "Phone", icon: "mobile", click: 'openOnRight(Doc.UserDoc().activeMobileMenu)', drag: 'this.dragFactory', dragFactory: doc.activeMobileMenu as Doc }, { title: "Drag an instance of the device collection", label: "Buxton", icon: "globe-asia", ignoreClick: true, drag: 'Docs.Create.Buxton()' }, // { title: "use pen", icon: "pen-nib", click: 'activatePen(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this)', backgroundColor: "blue", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc }, // { title: "use highlighter", icon: "highlighter", click: 'activateBrush(this.activeInkPen = sameDocs(this.activeInkPen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activeInkPen, this)`, activeInkPen: doc }, @@ -449,12 +448,12 @@ export class CurrentUserUtils { return doc.myItemCreators as Doc; } - static setupActiveMobile(doc: Doc) { - if (doc.activeMobile === undefined) { + static setupActiveMobileMenu(doc: Doc) { + if (doc.activeMobileMenu === undefined) { console.log("undefined"); - doc.activeMobile = this.setupMobileMenu(); + doc.activeMobileMenu = this.setupMobileMenu(); } - return doc.activeMobile as Doc; + return doc.activeMobileMenu as Doc; } static setupMobileMenu() { @@ -466,37 +465,45 @@ export class CurrentUserUtils { static setupMobileButtons(doc?: Doc, buttons?: string[]) { const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, info: string, dragFactory?: Doc }[] = [ - { title: "LIBRARY", icon: "bars", click: 'switchToLibrary()', backgroundColor: "#ffd6d6", info: "Navigate and access all of your documents within their respective collections" }, - { title: "RECORD", icon: "microphone", click: 'openMobileAudio()', backgroundColor: "#ffbfbf", info: "Use your mobile to record audio and access it on Dash Web." }, - { title: "UPLOAD", icon: "upload", click: 'uploadImageMobile()', backgroundColor: "#ff9e9e", info: "Upload an image from your mobile device so it can be accessed on Dash Web" }, + { title: "LIBRARY", icon: "bars", click: 'switchToLibrary()', backgroundColor: "#ffd6d6", info: "Navigate and access all of your documents within their respective collections." }, + { title: "RECORD", icon: "microphone", click: 'openMobileAudio()', backgroundColor: "#ffbfbf", info: "Use your phone to record and upload audio onto Dash Web." }, + { title: "UPLOAD", icon: "upload", click: 'uploadImageMobile()', backgroundColor: "#ff9e9e", info: "Upload images or videos from your mobile device so they can be accessed on Dash Web." }, { title: "PRESENTATION", icon: "desktop", click: 'openMobilePresentation()', backgroundColor: "#ff8080", info: "Use your phone as a remote for you presentation." }, - { title: "SETTINGS", icon: "cog", click: 'openMobileSettings()', backgroundColor: "#ff5e5e", info: "Change your password, log out, or manage your account security" } + { title: "SETTINGS", icon: "cog", click: 'openMobileSettings()', backgroundColor: "#ff5e5e", info: "Change your password, log out, or manage your account security." } ]; - return docProtoData.filter(d => !buttons || !buttons.includes(d.title)).map(data => this.mobileButton({ title: data.title, onClick: data.click ? ScriptField.MakeScript(data.click) : undefined, _backgroundColor: data.backgroundColor }, [this.ficon({ ignoreClick: true, icon: data.icon, backgroundColor: "rgba(0,0,0,0)" }), this.mobileTextContainer({}, [this.mobileButtonText({}, data.title), this.mobileButtonInfo({}, data.info)])])); + return docProtoData.filter(d => !buttons || !buttons.includes(d.title)).map(data => + this.mobileButton({ + title: data.title, + lockedPosition: true, + onClick: data.click ? ScriptField.MakeScript(data.click) : undefined, + _backgroundColor: data.backgroundColor + }, + [this.ficon({ ignoreClick: true, icon: data.icon, backgroundColor: "rgba(0,0,0,0)" }), this.mobileTextContainer({}, [this.mobileButtonText({}, data.title), this.mobileButtonInfo({}, data.info)])]) + ); } - static mobileButton = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.MulticolumnDocument(docs, { + static mobileButton = (opts: DocumentOptions, docs: Doc[]) => Docs.Create.MulticolumnDocument(docs, { ...opts, dropAction: undefined, removeDropProperties: new List(["dropAction"]), _nativeWidth: 900, _nativeHeight: 250, _width: 900, _height: 250, _yMargin: 15, - borderRounding: "5px", boxShadow: "0 0", _chromeStatus: "disabled", - })) as any as Doc + borderRounding: "5px", boxShadow: "0 0", _chromeStatus: "disabled" + }) as any as Doc - static mobileTextContainer = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.MultirowDocument(docs, { + static mobileTextContainer = (opts: DocumentOptions, docs: Doc[]) => Docs.Create.MultirowDocument(docs, { ...opts, dropAction: undefined, removeDropProperties: new List(["dropAction"]), _nativeWidth: 450, _nativeHeight: 250, _width: 450, _height: 250, _yMargin: 25, backgroundColor: "rgba(0,0,0,0)", borderRounding: "0", boxShadow: "0 0", _chromeStatus: "disabled", ignoreClick: true - })) as any as Doc + }) as any as Doc - static mobileButtonText = (opts: DocumentOptions, buttonTitle: string) => new PrefetchProxy(Docs.Create.TextDocument(buttonTitle, { + static mobileButtonText = (opts: DocumentOptions, buttonTitle: string) => Docs.Create.TextDocument(buttonTitle, { ...opts, dropAction: undefined, title: buttonTitle, _fontSize: 37, _xMargin: 0, _yMargin: 0, ignoreClick: true, _chromeStatus: "disabled", backgroundColor: "rgba(0,0,0,0)" - })) as any as Doc + }) as any as Doc - static mobileButtonInfo = (opts: DocumentOptions, buttonInfo: string) => new PrefetchProxy(Docs.Create.TextDocument(buttonInfo, { + static mobileButtonInfo = (opts: DocumentOptions, buttonInfo: string) => Docs.Create.TextDocument(buttonInfo, { ...opts, dropAction: undefined, title: "info", _fontSize: 25, _xMargin: 0, _yMargin: 0, ignoreClick: true, _chromeStatus: "disabled", backgroundColor: "rgba(0,0,0,0)", _dimMagnitude: 2, - })) as any as Doc + }) as any as Doc static setupThumbButtons(doc: Doc) { @@ -795,7 +802,7 @@ export class CurrentUserUtils { this.setupDefaultIconTemplates(doc); // creates a set of icon templates triggered by the document deoration icon this.setupDocTemplates(doc); // sets up the template menu of templates this.setupRightSidebar(doc); // sets up the right sidebar collection for mobile upload documents and sharing - this.setupActiveMobile(doc); + this.setupActiveMobileMenu(doc); this.setupOverlays(doc); // documents in overlay layer this.setupDockedButtons(doc); // the bottom bar of font icons this.setupDefaultPresentation(doc); // presentation that's initially triggered diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 0a1b03522..bd0b69da8 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -476,7 +476,7 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument) transformOrigin: "top left", }} onScroll={action(e => { - if (!this.props.isSelected()) e.currentTarget.scrollTop = this._scroll; + if (!this.props.isSelected() && window.innerWidth > 1000) e.currentTarget.scrollTop = this._scroll; else this._scroll = e.currentTarget.scrollTop; })} onDrop={this.onExternalDrop.bind(this)} diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 1a935d9b0..2e0be1c6a 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -228,7 +228,7 @@ export class AudioBox extends ViewBoxBaseComponent
- +
); } diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss index 8d996f779..3126a7d0e 100644 --- a/src/mobile/MobileMenu.scss +++ b/src/mobile/MobileMenu.scss @@ -256,7 +256,7 @@ body { } .docButtonContainer { - top: 90%; + top: 80%; position: absolute; display: flex; transform: translate(-50%, 0); @@ -306,7 +306,7 @@ body { width: 200px; left: 0px; top: 0px; - background-image: linear-gradient(to right, #1a1a1a, rgba(255, 0, 0, 0)); + background-image: linear-gradient(to right, #1a1a1a, rgba(0, 0, 0, 0)); text-align: center; user-select: none; z-index: 99; -- cgit v1.2.3-70-g09d2 From 6d68abf588f7b6182a62b74882d1fdc09b2b0230 Mon Sep 17 00:00:00 2001 From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com> Date: Tue, 16 Jun 2020 09:50:22 -0700 Subject: bug fixes --- .../collectionFreeForm/InkOptionsMenu.tsx | 2 +- src/mobile/MobileInterface.tsx | 30 ++++------------------ src/mobile/MobileMenu.scss | 3 +++ 3 files changed, 9 insertions(+), 26 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx index 8bebcd047..e7ef4cbd2 100644 --- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx +++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx @@ -107,7 +107,7 @@ export default class InkOptionsMenu extends AntimodeMenu { onPointerDown={action(e => GestureOverlay.Instance.InkShape = btn)} style={{ backgroundColor: btn === GestureOverlay.Instance?.InkShape ? "121212" : "" }}> {this._icons[i]} - )}, + )} ; } diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index 25dc9fd55..5d361f3ab 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -78,6 +78,11 @@ export class MobileInterface extends React.Component { document.addEventListener("dblclick", this.onReactDoubleClick); } + @action + componentWillUnmount = () => { + document.removeEventListener('dblclick', this.onReactDoubleClick); + } + // Prevent zooming in when double tapping the screen onReactDoubleClick = (e: MouseEvent) => { e.stopPropagation(); @@ -94,31 +99,6 @@ export class MobileInterface extends React.Component { this.renderView = renderView; } - onSwitchUpload = async () => { - let width = 300; - let height = 300; - const res = await rp.get(Utils.prepend("/getUserDocumentId")); - - // get width and height of the collection doc - if (this.mainContainer) { - const data = Cast(this.mainContainer.data, listSpec(Doc)); - if (data) { - const collectionDoc = await data[1]; // this should be the collection doc since the positions should be locked - const docView = DocumentManager.Instance.getDocumentView(collectionDoc); - if (docView) { - width = docView.nativeWidth ? docView.nativeWidth : 300; - height = docView.nativeHeight ? docView.nativeHeight : 300; - } - } - } - DocServer.Mobile.dispatchOverlayTrigger({ - enableOverlay: true, - width: width, - height: height, - text: "Documents uploaded from mobile will show here", - }); - } - // For toggling the hamburger menu @action toggleSidebar = () => this.sidebarActive = !this.sidebarActive diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss index 8d996f779..cd531056e 100644 --- a/src/mobile/MobileMenu.scss +++ b/src/mobile/MobileMenu.scss @@ -20,6 +20,7 @@ body { height: $navbar-height; background-color: whitesmoke; border-bottom: 5px solid black; + z-index: 150; } .navbar .cover { @@ -192,8 +193,10 @@ body { .sidebar.active { + position: absolute; right: 0%; opacity: 1; + z-index: 101; } .back { -- cgit v1.2.3-70-g09d2 From 1e67383b930a5a7b5cb75caf95dd31fbde0ef160 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Tue, 16 Jun 2020 17:29:27 -0500 Subject: fix drop down UI --- .../views/collections/CollectionSchemaCells.tsx | 54 +++++++++++-------- .../views/collections/CollectionSchemaView.scss | 63 +++++++++++++--------- 2 files changed, 70 insertions(+), 47 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index e27de4c96..adce4dcef 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -29,7 +29,7 @@ import { KeysDropdown } from "./CollectionSchemaHeaders"; import { listSpec } from "../../../fields/Schema"; import { ObjectField } from "../../../fields/ObjectField"; import { List } from "../../../fields/List"; -import { Link } from "@react-pdf/renderer"; +import { LinkBox } from "../nodes/LinkBox"; const path = require('path'); library.add(faExpand); @@ -421,10 +421,11 @@ export class CollectionSchemaListCell extends CollectionSchemaCell { // } @observable private _opened = false; - @observable private _text = ""; + @observable private _text = "select an item"; @action toggleOpened(open: boolean) { + console.log("open: " + open); this._opened = open; } @@ -433,6 +434,11 @@ export class CollectionSchemaListCell extends CollectionSchemaCell { this._text = e.target.value; } + @action + onSelected = (element: string) => { + this._text = element; + } + render() { const props: FieldViewProps = { Document: this.props.rowProps.original, @@ -461,6 +467,7 @@ export class CollectionSchemaListCell extends CollectionSchemaCell { }; let value = ""; + let link = false; const reference = React.createRef(); const field = props.Document[props.fieldKey]; @@ -469,41 +476,42 @@ export class CollectionSchemaListCell extends CollectionSchemaCell { const optionsList = field as List; - - - - const options = optionsList.map((element, index) => { + const options = optionsList.map((element) => { if (element instanceof Doc) { + if (props.fieldKey.toLowerCase() === "links") { + link = true; + } const title = element.title; - return
{title}
; - } else if (element instanceof Link) { - return
link
; + return
{ this.onSelected(StrCast(element.title)); }} + style={{ padding: "6px" }}> + {title} +
; } else { return
{element}
; } }); + const plainText =
{this._text}
; + const textarea = ; + const dropdown =
+ {options} +
; return (
- - {/* -
this.toggleOpened(!this._opened)}>☰
- */} - - - +
{link ? plainText : textarea}
+
- {this._opened ?
-
- {options} -
-
: null} + {this._opened ? dropdown : null}
); diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 96e9aec5a..5a4e1aa58 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -412,6 +412,45 @@ button.add-column { &:hover .collectionSchemaView-cellContents-docExpander { display: block; } + + .collectionSchemaView-dropdownWrapper { + + border: grey; + border-style: solid; + border-width: 1px; + height: 100%; + + .collectionSchemaView-dropdownButton { + + //display: inline-block; + float: left; + height: 100%; + + + } + + .collectionSchemaView-dropdownText { + display: inline-block; + //float: right; + height: 100%; + display: "flex"; + font-size: 13; + justify-content: "center"; + align-items: "center"; + } + + } + + .collectionSchemaView-dropdownContainer { + position: absolute; + border: 1px solid rgba(0, 0, 0, 0.04); + box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14); + + .collectionSchemaView-dropdownOption:hover { + background-color: rgba(0, 0, 0, 0.14); + cursor: pointer; + } + } } .collectionSchemaView-cellContents-docExpander { @@ -423,30 +462,6 @@ button.add-column { right: 0; background-color: lightgray; - .dropdown { - position: absolute; - top: 100%; - left: 0; - width: 300px; - z-index: 2; - border: 1px solid rgba(0, 0, 0, 0.04); - box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14); - } - - ul { - list-style: none; - padding: 0; - margin: 0; - } - - li { - padding: 8px 12px; - } - - li:hover { - background-color: rgba(0, 0, 0, 0.14); - cursor: pointer; - } } .doc-drag-over { -- cgit v1.2.3-70-g09d2 From 6345949e461dd0ef1a284527846462db7c7fb281 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Tue, 16 Jun 2020 17:51:49 -0500 Subject: bug fixes and doc overlays --- .../views/collections/CollectionSchemaCells.tsx | 93 ++++++++++++---------- 1 file changed, 53 insertions(+), 40 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index adce4dcef..b44c830e6 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -30,6 +30,8 @@ import { listSpec } from "../../../fields/Schema"; import { ObjectField } from "../../../fields/ObjectField"; import { List } from "../../../fields/List"; import { LinkBox } from "../nodes/LinkBox"; +import { OverlayView } from "../OverlayView"; +import { DocumentIconContainer } from "../nodes/DocumentIcon"; const path = require('path'); library.add(faExpand); @@ -416,12 +418,38 @@ export class CollectionSchemaImageCell extends CollectionSchemaCell { @observer export class CollectionSchemaListCell extends CollectionSchemaCell { - // render() { - // return this.renderCellWithType("list"); - // } - + _overlayDisposer?: () => void; + + private prop: FieldViewProps = { + Document: this.props.rowProps.original, + DataDoc: this.props.rowProps.original, + LibraryPath: [], + dropAction: "alias", + bringToFront: emptyFunction, + rootSelected: returnFalse, + fieldKey: this.props.rowProps.column.id as string, + ContainingCollectionView: this.props.CollectionView, + ContainingCollectionDoc: this.props.CollectionView && this.props.CollectionView.props.Document, + isSelected: returnFalse, + select: emptyFunction, + renderDepth: this.props.renderDepth + 1, + ScreenToLocalTransform: Transform.Identity, + focus: emptyFunction, + active: returnFalse, + whenActiveChanged: emptyFunction, + PanelHeight: returnZero, + PanelWidth: returnZero, + NativeHeight: returnZero, + NativeWidth: returnZero, + addDocTab: this.props.addDocTab, + pinToPres: this.props.pinToPres, + ContentScaling: returnOne + }; + @observable private _field = this.prop.Document[this.prop.fieldKey]; + @observable private _optionsList = this._field as List; @observable private _opened = false; @observable private _text = "select an item"; + @observable private _selectedNum = 0; @action toggleOpened(open: boolean) { @@ -432,59 +460,40 @@ export class CollectionSchemaListCell extends CollectionSchemaCell { @action onChange = (e: React.ChangeEvent) => { this._text = e.target.value; + + // change if its a document + this._optionsList[this._selectedNum] = this._text; } @action - onSelected = (element: string) => { + onSelected = (element: string, index: number) => { this._text = element; + this._selectedNum = index; + } + + onFocus = () => { + this._overlayDisposer?.(); + this._overlayDisposer = OverlayView.Instance.addElement(, { x: 0, y: 0 }); } render() { - const props: FieldViewProps = { - Document: this.props.rowProps.original, - DataDoc: this.props.rowProps.original, - LibraryPath: [], - dropAction: "alias", - bringToFront: emptyFunction, - rootSelected: returnFalse, - fieldKey: this.props.rowProps.column.id as string, - ContainingCollectionView: this.props.CollectionView, - ContainingCollectionDoc: this.props.CollectionView && this.props.CollectionView.props.Document, - isSelected: returnFalse, - select: emptyFunction, - renderDepth: this.props.renderDepth + 1, - ScreenToLocalTransform: Transform.Identity, - focus: emptyFunction, - active: returnFalse, - whenActiveChanged: emptyFunction, - PanelHeight: returnZero, - PanelWidth: returnZero, - NativeHeight: returnZero, - NativeWidth: returnZero, - addDocTab: this.props.addDocTab, - pinToPres: this.props.pinToPres, - ContentScaling: returnOne - }; - let value = ""; let link = false; + let doc = false; const reference = React.createRef(); - const field = props.Document[props.fieldKey]; - - if (typeof field === "object") { - - const optionsList = field as List; + if (typeof this._field === "object" && this._optionsList[1]) { - const options = optionsList.map((element) => { + const options = this._optionsList.map((element, index) => { if (element instanceof Doc) { - if (props.fieldKey.toLowerCase() === "links") { + doc = true; + if (this.prop.fieldKey.toLowerCase() === "links") { link = true; } const title = element.title; return
{ this.onSelected(StrCast(element.title)); }} + onPointerDown={(e) => { this.onSelected(StrCast(element.title), index); }} style={{ padding: "6px" }}> {title}
; @@ -495,7 +504,11 @@ export class CollectionSchemaListCell extends CollectionSchemaCell { const plainText =
{this._text}
; - const textarea = ; + const textarea = ; const dropdown =
{options}
; -- cgit v1.2.3-70-g09d2 From 22649d15932f719e0b57166158a3660941a7ef72 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Wed, 17 Jun 2020 18:38:20 +0800 Subject: pdf view updates --- deploy/mobile/image.html | 1 - src/client/views/nodes/PDFBox.scss | 391 ++++++++++++++------- src/client/views/nodes/PDFBox.tsx | 11 +- src/client/views/pdf/PDFViewer.tsx | 6 +- .../views/presentationview/PresElementBox.scss | 12 + src/mobile/ImageUpload.tsx | 2 +- 6 files changed, 292 insertions(+), 131 deletions(-) (limited to 'src/client/views') diff --git a/deploy/mobile/image.html b/deploy/mobile/image.html index 718550f02..d30ad6ac2 100644 --- a/deploy/mobile/image.html +++ b/deploy/mobile/image.html @@ -3,7 +3,6 @@ Dash Mobile - diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss index 6f18b1321..474587159 100644 --- a/src/client/views/nodes/PDFBox.scss +++ b/src/client/views/nodes/PDFBox.scss @@ -5,37 +5,38 @@ height: 100%; width: 100%; overflow: hidden; - cursor:auto; + cursor: auto; transform-origin: top left; z-index: 0; + .pdfBox-ui { position: absolute; - width: 100%; - height: 100%; - z-index: 1; - pointer-events: none; - - .pdfBox-overlayButton { - border-bottom-left-radius: 50%; - display: flex; - justify-content: space-evenly; - align-items: center; - height: 20px; - background: none; - padding: 0; - position: absolute; - pointer-events: all; - - .pdfBox-overlayButton-arrow { - width: 0; - height: 0; - border-top: 10px solid transparent; - border-bottom: 10px solid transparent; - border-right: 15px solid #121721; - transition: all 0.5s; - } - - .pdfBox-overlayButton-iconCont { + width: 100%; + height: 100%; + z-index: 1; + pointer-events: none; + + .pdfBox-overlayButton { + border-bottom-left-radius: 50%; + display: flex; + justify-content: space-evenly; + align-items: center; + height: 20px; + background: none; + padding: 0; + position: absolute; + pointer-events: all; + + .pdfBox-overlayButton-arrow { + width: 0; + height: 0; + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; + border-right: 15px solid #121721; + transition: all 0.5s; + } + + .pdfBox-overlayButton-iconCont { background: #121721; height: 20px; width: 25px; @@ -45,9 +46,10 @@ justify-content: center; border-radius: 3px; pointer-events: all; - } + } } - .pdfBox-overlayButton-fwd, + + .pdfBox-overlayButton-fwd, .pdfBox-overlayButton-back { background: #121721; height: 25px; @@ -61,15 +63,17 @@ position: absolute; top: 5; } + .pdfBox-overlayButton-fwd { left: 45; } + .pdfBox-overlayButton-back { left: 25; } - .pdfBox-nextIcon, - .pdfBox-prevIcon { + .pdfBox-nextIcon, + .pdfBox-prevIcon { background: #121721; height: 20px; width: 25px; @@ -80,96 +84,97 @@ border-radius: 3px; pointer-events: all; padding: 0px; - } - - .pdfBox-overlayButton:hover { - background: none; - } - - - .pdfBox-settingsCont { - position: absolute; - right: 0; - top: 3; - pointer-events: all; - - .pdfBox-settingsButton { - border-bottom-left-radius: 50%; - display: flex; - justify-content: space-evenly; - align-items: center; - height: 20px; - background: none; - padding: 0; - - .pdfBox-settingsButton-arrow { - width: 0; - height: 0; - border-top: 10px solid transparent; - border-bottom: 10px solid transparent; - border-right: 15px solid #121721; - transition: all 0.5s; - } - - .pdfBox-settingsButton-iconCont { - background: #121721; - height: 20px; - width: 25px; - display: flex; - justify-content: center; - align-items: center; - margin-left: -2px; - border-radius: 3px; - } - } - - .pdfBox-settingsButton:hover { - background: none; - } - - .pdfBox-settingsFlyout { - position: absolute; - background: #323232; - box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); - right: 20px; - border-radius: 7px; - padding: 20px; - display: flex; - flex-direction: column; - font-size: 14px; - transition: all 0.5s; - - .pdfBox-settingsFlyout-title { - color: white; - } - - .pdfBox-settingsFlyout-kvpInput { - margin-top: 20px; - display: grid; - grid-template-columns: 47.5% 5% 47.5%; - } - } - } - - .pdfBox-overlayCont { - position: absolute; - width: calc(100% - 40px); - height: 20px; - background: #121721; - bottom: 0; - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; - transition: left .5s; - pointer-events: all; - - .pdfBox-searchBar { - width: 70%; - font-size: 14px; - } - } + } + + .pdfBox-overlayButton:hover { + background: none; + } + + + .pdfBox-settingsCont { + position: absolute; + right: 0; + top: 3; + pointer-events: all; + + .pdfBox-settingsButton { + border-bottom-left-radius: 50%; + display: flex; + justify-content: space-evenly; + align-items: center; + height: 20px; + background: none; + padding: 0; + + .pdfBox-settingsButton-arrow { + width: 0; + height: 0; + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; + border-right: 15px solid #121721; + transition: all 0.5s; + } + + .pdfBox-settingsButton-iconCont { + background: #121721; + height: 20px; + width: 25px; + display: flex; + justify-content: center; + align-items: center; + margin-left: -2px; + border-radius: 3px; + } + } + + .pdfBox-settingsButton:hover { + background: none; + } + + .pdfBox-settingsFlyout { + position: absolute; + background: #323232; + box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); + right: 20px; + border-radius: 7px; + padding: 20px; + display: flex; + flex-direction: column; + font-size: 14px; + transition: all 0.5s; + + .pdfBox-settingsFlyout-title { + color: white; + } + + .pdfBox-settingsFlyout-kvpInput { + margin-top: 20px; + display: grid; + grid-template-columns: 47.5% 5% 47.5%; + } + } + } + + .pdfBox-overlayCont { + position: absolute; + width: calc(100% - 40px); + height: 20px; + background: #121721; + bottom: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + transition: left .5s; + pointer-events: all; + + .pdfBox-searchBar { + width: 70%; + font-size: 14px; + } + } } + .pdfBox-title-outer { width: 150%; height: 100%; @@ -178,9 +183,9 @@ z-index: 0; background: lightslategray; transform-origin: top left; - + .pdfBox-title { - color:lightgray; + color: lightgray; margin-top: auto; margin-bottom: auto; transform-origin: 42% 15%; @@ -209,6 +214,7 @@ .pdfBox-interactive { pointer-events: all; + .pdfViewer-text { .textLayer { span { @@ -216,4 +222,145 @@ } } } +} + +@media only screen and (max-width: 1000px) { + + .pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton, + .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton { + border-bottom-left-radius: 50%; + display: flex; + justify-content: space-evenly; + align-items: center; + height: 60px; + background: none; + padding: 0; + } + + .pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton .pdfBox-settingsButton-iconCont, + .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton .pdfBox-settingsButton-iconCont { + background: #121721; + height: 60px; + width: 75px; + font-size: 30px; + display: flex; + justify-content: center; + align-items: center; + margin-left: -2px; + border-radius: 3px; + } + + .pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsFlyout, + .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsFlyout { + position: absolute; + background: #323232; + box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); + right: 20px; + border-radius: 7px; + padding: 20px; + display: flex; + flex-direction: column; + font-size: 30px; + transition: all 0.5s; + } + + .pdfBox .pdfBox-ui .pdfBox-settingsCont, + .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont { + position: absolute; + right: 0; + top: 3; + pointer-events: all; + } + + .pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton .pdfBox-settingsButton-arrow, + .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton .pdfBox-settingsButton-arrow { + width: 0; + height: 60; + border-top: 30px solid transparent; + border-bottom: 30px solid transparent; + border-right: 30px solid #121721; + transition: all 0.5s; + } + + .pdfBox .pdfBox-ui .pdfBox-overlayButton .pdfBox-overlayButton-iconCont, + .pdfBox-interactive .pdfBox-ui .pdfBox-overlayButton .pdfBox-overlayButton-iconCont { + background: #121721; + height: 60px; + width: 75px; + display: flex; + font-size: 30; + position: relative; + align-items: center; + justify-content: center; + border-radius: 3px; + pointer-events: all; + } + + .pdfBox .pdfBox-ui .pdfBox-overlayButton .pdfBox-overlayButton-arrow, + .pdfBox-interactive .pdfBox-ui .pdfBox-overlayButton .pdfBox-overlayButton-arrow { + width: 0; + height: 0; + border-top: 30px solid transparent; + border-bottom: 30px solid transparent; + border-right: 30px solid #121721; + transition: all 0.5s; + } + + .pdfBox .pdfBox-ui .pdfBox-overlayCont, + .pdfBox-interactive .pdfBox-ui .pdfBox-overlayCont { + position: absolute; + width: calc(100% - 40px); + height: 60px; + background: #121721; + bottom: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + transition: left .5s; + pointer-events: all; + } + + .pdfBox .pdfBox-ui .pdfBox-overlayButton, + .pdfBox-interactive .pdfBox-ui .pdfBox-overlayButton { + border-bottom-left-radius: 50%; + display: flex; + justify-content: space-evenly; + align-items: center; + height: 60px; + background: none; + padding: 0; + position: absolute; + pointer-events: all; + } + + .pdfBox .pdfBox-ui .pdfBox-overlayCont .pdfBox-searchBar, + .pdfBox-interactive .pdfBox-ui .pdfBox-overlayCont .pdfBox-searchBar { + width: 70%; + font-size: 40px; + } + + button.pdfBox-search { + font-size: 30px; + width: 50px; + height: 50px; + } + + .pdfBox .pdfBox-ui .pdfBox-nextIcon, + .pdfBox .pdfBox-ui .pdfBox-prevIcon, + .pdfBox-interactive .pdfBox-ui .pdfBox-nextIcon, + .pdfBox-interactive .pdfBox-ui .pdfBox-prevIcon { + background: #121721; + height: 50px; + width: 50px; + font-size: 30px; + display: flex; + position: relative; + align-items: center; + justify-content: center; + border-radius: 3px; + pointer-events: all; + padding: 0px; + } + } \ No newline at end of file diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index fae216f17..78b7faeee 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -152,7 +152,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent e.stopPropagation()} style={{ left: `${this._searching ? 0 : 100}%` }}>
-
+
Annotation View Settings
@@ -215,10 +215,13 @@ export class PDFBox extends ViewBoxAnnotatableComponent 1000)); + console.log("_nativeHeight: " + this.Document._nativeHeight); + console.log("%: " + `${100 / this.contentScaling}%`); const classname = "pdfBox" + (this.active() ? "-interactive" : ""); return
1000) ? this.Document._nativeHeight || 0 : `${100 / this.contentScaling}%`, //Adjusted for mobile (!window.innerWidth < 1000) transform: `scale(${this.contentScaling})` }} >
@@ -230,7 +233,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent this._isChildActive; @computed get renderPdfView() { const pdfUrl = Cast(this.dataDoc[this.props.fieldKey], PdfField); - return
+ return
1000) ? NumCast(this.Document._height) * this.props.PanelWidth() / NumCast(this.Document._width) : undefined }}> ; } @computed get pdfViewerDiv() { - return
; + return
; } @computed get contentScaling() { return this.props.ContentScaling(); } @computed get standinViews() { @@ -701,8 +701,8 @@ export class PDFViewer extends ViewBoxAnnotatableComponent 1000) ? NumCast(this.props.Document._nativeWidth) : `${100 / this.contentScaling}%`, + height: !this.props.Document._fitWidth && (window.innerWidth > 1000) ? NumCast(this.props.Document._nativeHeight) : `${100 / this.contentScaling}%`, transform: `scale(${this.props.ContentScaling()})` }} > {this.pdfViewerDiv} diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index bf268eb8d..99fe2a3ba 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -115,6 +115,7 @@ .presElementBox-item { display: inline-flex; + overflow: hidden; } .presElementBox-buttons .presElementBox-interaction { @@ -148,6 +149,7 @@ position: absolute; top: 0; right: 0; + z-index: 3; width: 50%; } @@ -156,6 +158,7 @@ position: absolute; display: inline-block; top: 10px; + z-index: 3; width: 50%; text-overflow: ellipsis; overflow: hidden; @@ -182,4 +185,13 @@ padding: 0px; padding-bottom: 3px; } + + .presElementBox-embedded { + position: relative; + display: flex; + transform: translate(0, 90px) scale(1.5); + width: auto; + justify-content: center; + margin: auto; + } } \ No newline at end of file diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index fc26ba882..d8b1913ee 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -179,7 +179,7 @@ export class Uploader extends React.Component {
- Upload +     Upload
{/*
Upload
*/} -- cgit v1.2.3-70-g09d2 From 580cddb57724014bba04f81b3bd184e045591bfb Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Wed, 17 Jun 2020 14:44:57 -0500 Subject: improving lists layout --- .../views/collections/CollectionSchemaCells.tsx | 99 +++++++++++++++++----- 1 file changed, 80 insertions(+), 19 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index b44c830e6..33b6e7bec 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -25,9 +25,6 @@ import { undoBatch } from "../../util/UndoManager"; import { SnappingManager } from "../../util/SnappingManager"; import { ComputedField } from "../../../fields/ScriptField"; import { ImageField } from "../../../fields/URLField"; -import { KeysDropdown } from "./CollectionSchemaHeaders"; -import { listSpec } from "../../../fields/Schema"; -import { ObjectField } from "../../../fields/ObjectField"; import { List } from "../../../fields/List"; import { LinkBox } from "../nodes/LinkBox"; import { OverlayView } from "../OverlayView"; @@ -63,7 +60,7 @@ export class CollectionSchemaCell extends React.Component { @observable protected _isEditing: boolean = false; protected _focusRef = React.createRef(); protected _document = this.props.rowProps.original; - private _dropDisposer?: DragManager.DragDropDisposer; + protected _dropDisposer?: DragManager.DragDropDisposer; componentDidMount() { document.addEventListener("keydown", this.onKeyDown); @@ -138,7 +135,7 @@ export class CollectionSchemaCell extends React.Component { } } - private dropRef = (ele: HTMLElement | null) => { + protected dropRef = (ele: HTMLElement | null) => { this._dropDisposer && this._dropDisposer(); if (ele) { this._dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this)); @@ -215,14 +212,11 @@ export class CollectionSchemaCell extends React.Component { contents = typeof field === "object" ? doc ? StrCast(doc.title) === "" ? "--" : StrCast(doc.title) : `--${typeof field}--` : `--${typeof field}--`; } if (type === "image") { - // fix this - const image = FieldValue(Cast(field, ImageField)); const doc = FieldValue(Cast(field, Doc)); contents = typeof field === "object" ? doc ? StrCast(doc.title) === "" ? "--" : StrCast(doc.title) : `--${typeof field}--` : `--${typeof field}--`; } if (type === "list") { - // fix this contents = typeof field === "object" ? doc ? StrCast(field) === "" ? "--" : StrCast(field) : `--${typeof field}--` : `--${typeof field}--`; } @@ -415,6 +409,10 @@ export class CollectionSchemaImageCell extends CollectionSchemaCell { } } + + + + @observer export class CollectionSchemaListCell extends CollectionSchemaCell { @@ -457,9 +455,17 @@ export class CollectionSchemaListCell extends CollectionSchemaCell { this._opened = open; } + // @action + // onChange = (e: React.ChangeEvent) => { + // this._text = e.target.value; + + // // change if its a document + // this._optionsList[this._selectedNum] = this._text; + // } + @action - onChange = (e: React.ChangeEvent) => { - this._text = e.target.value; + onSetValue = (value: string) => { + this._text = value; // change if its a document this._optionsList[this._selectedNum] = this._text; @@ -476,8 +482,30 @@ export class CollectionSchemaListCell extends CollectionSchemaCell { this._overlayDisposer = OverlayView.Instance.addElement(, { x: 0, y: 0 }); } + render() { + const dragRef: React.RefObject = React.createRef(); + + let type = "list"; + + // const fieldIsDoc = (type === "document" && typeof this._field === "object") || (typeof this._field === "object" && document); + + // const onItemDown = (e: React.PointerEvent) => { + // fieldIsDoc && SetupDrag(this._focusRef, + // () => this._document[this.prop.fieldKey] instanceof Doc ? this._document[this.prop.fieldKey] : this._document, + // this._document[this.prop.fieldKey] instanceof Doc ? (doc: Doc | Doc[], target: Doc | undefined, addDoc: (newDoc: Doc | Doc[]) => any) => addDoc(doc) : this.props.moveDocument, + // this._document[this.prop.fieldKey] instanceof Doc ? "alias" : this.props.Document.schemaDoc ? "copy" : undefined)(e); + // }; + // const onPointerEnter = (e: React.PointerEvent): void => { + // if (e.buttons === 1 && SnappingManager.GetIsDragging() && (type === "document" || type === undefined)) { + // dragRef.current!.className = "collectionSchemaView-cellContainer doc-drag-over"; + // } + // }; + // const onPointerLeave = (e: React.PointerEvent): void => { + // dragRef.current!.className = "collectionSchemaView-cellContainer"; + // }; + let link = false; let doc = false; const reference = React.createRef(); @@ -485,11 +513,15 @@ export class CollectionSchemaListCell extends CollectionSchemaCell { if (typeof this._field === "object" && this._optionsList[1]) { const options = this._optionsList.map((element, index) => { + if (element instanceof Doc) { doc = true; + type = "document"; if (this.prop.fieldKey.toLowerCase() === "links") { link = true; + type = "link"; } + const document = FieldValue(Cast(element, Doc)); const title = element.title; return
{title}
; + } else { - return
{element}
; + return
{ this.onSelected(StrCast(element), index); }} + style={{ padding: "6px" }}>{element}
; } }); - const plainText =
{this._text}
; - const textarea = ; + // const textarea = ; + + const textarea =
+ { + return this._text; + }} + SetValue={action((value: string) => { + + // add special for params + this.onSetValue(value); + return true; + })} + /> +
; + + const dropdown =
{options}
; @@ -529,13 +588,15 @@ export class CollectionSchemaListCell extends CollectionSchemaCell {
); } else { - console.log("not an array!"); - return this.renderCellWithType("list"); } } } + + + + @observer export class CollectionSchemaCheckboxCell extends CollectionSchemaCell { @observable private _isChecked: boolean = typeof this.props.rowProps.original[this.props.rowProps.column.id as string] === "boolean" ? BoolCast(this.props.rowProps.original[this.props.rowProps.column.id as string]) : false; -- cgit v1.2.3-70-g09d2 From 57d4c562b6f0ef39dcd68f2985a56c4a683fcf49 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Thu, 18 Jun 2020 04:38:08 +0800 Subject: pdf changes + radial menu + create new workspaces (bug with ink) --- src/client/views/GestureOverlay.tsx | 8 --- .../views/collections/CollectionStackingView.tsx | 2 +- .../collectionFreeForm/InkOptionsMenu.tsx | 4 +- src/client/views/nodes/DocumentView.tsx | 12 ++-- src/client/views/nodes/PDFBox.scss | 2 +- src/client/views/nodes/PDFBox.tsx | 7 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 2 +- src/client/views/pdf/PDFViewer.tsx | 4 +- src/mobile/ImageUpload.tsx | 6 +- src/mobile/MobileInterface.tsx | 80 +++++++++++++++++++--- src/server/ApiManagers/PDFManager.ts | 3 +- 11 files changed, 94 insertions(+), 36 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index e51e2d4e1..1c305ebeb 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -575,14 +575,6 @@ export default class GestureOverlay extends Touchable { const points = this._points.map(p => ({ X: p.X - B.left, Y: p.Y - B.top })); //push first points to so interactionUtil knows pointer is up this._points.push({ X: this._points[0].X, Y: this._points[0].Y }); - if (MobileInterface.Instance && MobileInterface.Instance.drawingInk) { - DocServer.Mobile.dispatchGesturePoints({ - points: this._points, - bounds: B, - color: ActiveInkColor(), - width: ActiveInkWidth() - }); - } const initialPoint = this._points[0.]; const xInGlass = initialPoint.X > (this._thumbX ?? Number.MAX_SAFE_INTEGER) && initialPoint.X < (this._thumbX ?? Number.MAX_SAFE_INTEGER) + (this.height); diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 797aabf18..9f1b5d63c 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -476,7 +476,7 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument) transformOrigin: "top left", }} onScroll={action(e => { - if (!this.props.isSelected() && this.props.renderDepth && window.innerWidth > 1000) e.currentTarget.scrollTop = this._scroll; + if (!this.props.isSelected() && this.props.renderDepth && window.screen.width > 600) e.currentTarget.scrollTop = this._scroll; else this._scroll = e.currentTarget.scrollTop; })} onDrop={this.onExternalDrop.bind(this)} diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx index 647847b68..676dc10f4 100644 --- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx +++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx @@ -130,13 +130,13 @@ export default class InkOptionsMenu extends AntimodeMenu { ]; const mobileButtons = [ - this.shapeButtons, + ...this.shapeButtons, this.bezierButton, this.widthPicker, this.colorPicker, ]; - return (window.innerWidth < 1000 ? this.getElement(mobileButtons) : this.getElement(buttons)); + return (window.screen.width < 600 ? this.getElement(mobileButtons) : this.getElement(buttons)); } } Scripting.addGlobal(function activatePen(penBtn: any) { diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 75627607b..e027b6a0f 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -31,7 +31,7 @@ import { SelectionManager } from "../../util/SelectionManager"; import SharingManager from '../../util/SharingManager'; import { Transform } from "../../util/Transform"; import { undoBatch, UndoManager } from "../../util/UndoManager"; -import { CollectionDockingView } from "../collections/CollectionDockingView"; +import { CollectionDockingView, DockedFrameRenderer } from "../collections/CollectionDockingView"; import { CollectionView, CollectionViewType } from '../collections/CollectionView'; import { ContextMenu } from "../ContextMenu"; import { ContextMenuProps } from '../ContextMenuItem'; @@ -43,6 +43,7 @@ import "./DocumentView.scss"; import { LinkAnchorBox } from './LinkAnchorBox'; import { RadialMenu } from './RadialMenu'; import React = require("react"); +import { MobileInterface } from '../../../mobile/MobileInterface'; library.add(fa.faEdit, fa.faTrash, fa.faShare, fa.faDownload, fa.faExpandArrowsAlt, fa.faCompressArrowsAlt, fa.faLayerGroup, fa.faExternalLinkAlt, fa.faAlignCenter, fa.faCaretSquareRight, fa.faSquare, fa.faConciergeBell, fa.faWindowRestore, fa.faFolder, fa.faMapPin, fa.faLink, fa.faFingerprint, fa.faCrosshairs, fa.faDesktop, fa.faUnlock, fa.faLock, fa.faLaptopCode, fa.faMale, @@ -181,10 +182,11 @@ export class DocumentView extends DocComponent(Docu const pt = me.touchEvent.touches[me.touchEvent.touches.length - 1]; RadialMenu.Instance.openMenu(pt.pageX - 15, pt.pageY - 15); - RadialMenu.Instance.addItem({ description: "Open Fields", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "onRight"), icon: "map-pin", selected: -1 }); - RadialMenu.Instance.addItem({ description: "Delete this document", event: () => { this.props.ContainingCollectionView?.removeDocument(this.props.Document), RadialMenu.Instance.closeMenu(); }, icon: "layer-group", selected: -1 }); - RadialMenu.Instance.addItem({ description: "Open in a new tab", event: () => this.props.addDocTab(this.props.Document, "onRight"), icon: "trash", selected: -1 }); - RadialMenu.Instance.addItem({ description: "Pin to Presentation", event: () => this.props.pinToPres(this.props.Document), icon: "folder", selected: -1 }); + // RadialMenu.Instance.addItem({ description: "Open Fields", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "onRight"), icon: "map-pin", selected: -1 }); + RadialMenu.Instance.addItem({ description: "Delete", event: () => { this.props.ContainingCollectionView?.removeDocument(this.props.Document), RadialMenu.Instance.closeMenu(); }, icon: "external-link-square-alt", selected: -1 }); + // RadialMenu.Instance.addItem({ description: "Open in a new tab", event: () => this.props.addDocTab(this.props.Document, "onRight"), icon: "trash", selected: -1 }); + RadialMenu.Instance.addItem({ description: "Pin", event: () => DockedFrameRenderer.PinDoc(this.props.Document), icon: "map-pin", selected: -1 }); + RadialMenu.Instance.addItem({ description: "Open", event: () => MobileInterface.Instance.handleClick(this.props.Document), icon: "trash", selected: -1 }); SelectionManager.DeselectAll(); } diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss index 474587159..1a31d2916 100644 --- a/src/client/views/nodes/PDFBox.scss +++ b/src/client/views/nodes/PDFBox.scss @@ -224,7 +224,7 @@ } } -@media only screen and (max-width: 1000px) { +@media only screen and (max-width: 600px) { .pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton, .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton { diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 78b7faeee..4b4348d3c 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -215,13 +215,14 @@ export class PDFBox extends ViewBoxAnnotatableComponent 1000)); + console.log("fitWidth ?: " + !(this.props.Document._fitWidth) && (window.screen.width > 600)); console.log("_nativeHeight: " + this.Document._nativeHeight); console.log("%: " + `${100 / this.contentScaling}%`); const classname = "pdfBox" + (this.active() ? "-interactive" : ""); return
1000) ? this.Document._nativeHeight || 0 : `${100 / this.contentScaling}%`, //Adjusted for mobile (!window.innerWidth < 1000) + //height adjusted for mobile (window.screen.width > 600) + height: !this.props.Document._fitWidth && (window.screen.width > 600) ? this.Document._nativeHeight || 0 : `${100 / this.contentScaling}%`, transform: `scale(${this.contentScaling})` }} >
@@ -233,7 +234,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent this._isChildActive; @computed get renderPdfView() { const pdfUrl = Cast(this.dataDoc[this.props.fieldKey], PdfField); - return
1000) ? NumCast(this.Document._height) * this.props.PanelWidth() / NumCast(this.Document._width) : undefined }}> + return
600) ? NumCast(this.Document._height) * this.props.PanelWidth() / NumCast(this.Document._width) : undefined }}> { - if (window.innerWidth < 1000) null; + if (window.screen.width < 600) null; else if (this._editorView && (this._editorView as any).docView) { const mark = this._editorView.state.schema.mark(this._editorView.state.schema.marks.search_highlight); const activeMark = this._editorView.state.schema.mark(this._editorView.state.schema.marks.search_highlight, { selected: true }); diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 9cdbea2da..57b7bceca 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -709,8 +709,8 @@ export class PDFViewer extends ViewBoxAnnotatableComponent 1000) ? NumCast(this.props.Document._nativeWidth) : `${100 / this.contentScaling}%`, - height: !this.props.Document._fitWidth && (window.innerWidth > 1000) ? NumCast(this.props.Document._nativeHeight) : `${100 / this.contentScaling}%`, + width: !this.props.Document._fitWidth && (window.screen.width > 600) ? NumCast(this.props.Document._nativeWidth) : `${100 / this.contentScaling}%`, + height: !this.props.Document._fitWidth && (window.screen.width > 600) ? NumCast(this.props.Document._nativeHeight) : `${100 / this.contentScaling}%`, transform: `scale(${this.props.ContentScaling()})` }} > {this.pdfViewerDiv} diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index d8b1913ee..b66f0461d 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -65,8 +65,11 @@ export class Uploader extends React.Component { } const path = Utils.prepend(result.accessPaths.agnostic.client); let doc = null; + console.log("type: " + file.type); if (file.type === "video/mp4") { doc = Docs.Create.VideoDocument(path, { _nativeWidth: 200, _width: 200, title: name }); + } else if (file.type === "application/pdf") { + doc = Docs.Create.PdfDocument(path, { _width: 200, title: name }); } else { doc = Docs.Create.ImageDocument(path, { _nativeWidth: 200, _width: 200, title: name }); } @@ -175,7 +178,7 @@ export class Uploader extends React.Component { private get uploadInterface() { return (
- +
@@ -217,4 +220,3 @@ export class Uploader extends React.Component { } -// DocServer.init(window.location.protocol, window.location.hostname, 4321, "image upload"); diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index 5acdc1dea..644535179 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import { library } from '@fortawesome/fontawesome-svg-core'; import { - faTasks, faMobile, faThLarge, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, + faTasks, faExternalLinkSquareAlt, faMobile, faThLarge, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, faTerminal, faToggleOn, faFile as fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard, faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, @@ -17,7 +17,7 @@ import { FieldValue, Cast } from '../fields/Types'; import { CurrentUserUtils } from '../client/util/CurrentUserUtils'; import { emptyPath, emptyFunction, returnFalse, returnOne, returnTrue, returnZero, Utils } from '../Utils'; import { DocServer } from '../client/DocServer'; -import { Docs } from '../client/documents/Documents'; +import { Docs, DocumentOptions } from '../client/documents/Documents'; import { Scripting } from '../client/util/Scripting'; import { DocumentView } from '../client/views/nodes/DocumentView'; import { Transform } from '../client/util/Transform'; @@ -36,8 +36,11 @@ import GestureOverlay from "../client/views/GestureOverlay"; import { ScriptField } from "../fields/ScriptField"; import InkOptionsMenu from "../client/views/collections/collectionFreeForm/InkOptionsMenu"; import { RadialMenu } from "../client/views/nodes/RadialMenu"; +import { UndoManager } from "../client/util/UndoManager"; +import { MainView } from "../client/views/MainView"; +import { List } from "../fields/List"; -library.add(faTasks, faMobile, faThLarge, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, +library.add(faTasks, faExternalLinkSquareAlt, faMobile, faThLarge, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, faTerminal, faToggleOn, fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard, faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, @@ -149,7 +152,7 @@ export class MobileInterface extends React.Component { * Return 'Home", which implies returning to 'Home' buttons */ returnHome = () => { - if (this._homeMenu === false || this.sidebarActive === true) { + if (this._homeMenu || this.sidebarActive) { this._homeMenu = true; this._parents = []; this._activeDoc = this._homeDoc; @@ -220,7 +223,7 @@ export class MobileInterface extends React.Component { */ handleClick = async (doc: Doc) => { const children = DocListCast(doc.data); - if (doc.type !== "collection") { + if (doc.type !== "collection" && this.sidebarActive) { this._parents.push(this._activeDoc); this._activeDoc = doc; this.switchCurrentView((userDoc: Doc) => doc); @@ -333,7 +336,7 @@ export class MobileInterface extends React.Component { // Renders the contents of the menu and sidebar renderDefaultContent = () => { - if (this._homeMenu === true) { + if (this._homeMenu) { return (
@@ -351,7 +354,7 @@ export class MobileInterface extends React.Component {
ScriptField.MakeScript("createNewWorkspace()")}>Create New Workspace + onClick={() => MainView.Instance?.createNewWorkspace()}>Create New Workspace
@@ -403,7 +406,10 @@ export class MobileInterface extends React.Component { {buttons}
ScriptField.MakeScript("createNewWorkspace()")}>Create New Workspace + style={{ opacity: 0.7 }} + onClick={() => this.createNewWorkspace()}> + +
Create New Workspace
} @@ -413,6 +419,32 @@ export class MobileInterface extends React.Component { ); } + /** + * Handles the Create New Workspace button in the menu + */ + @action + createNewWorkspace = async (id?: string) => { + const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc; + const workspaceCount = DocListCast(workspaces.data).length + 1; + const freeformOptions: DocumentOptions = { + x: 0, + y: 400, + title: "Collection " + workspaceCount, + _LODdisable: true + }; + const freeformDoc = CurrentUserUtils.GuestTarget || Docs.Create.FreeformDocument([], freeformOptions); + const workspaceDoc = Docs.Create.StandardCollectionDockingDocument([{ doc: freeformDoc, initialWidth: 600, path: [Doc.UserDoc().myCatalog as Doc] }], { title: `Workspace ${workspaceCount}` }, id, "row"); + + const toggleTheme = ScriptField.MakeScript(`self.darkScheme = !self.darkScheme`); + const toggleComic = ScriptField.MakeScript(`toggleComicMode()`); + const cloneWorkspace = ScriptField.MakeScript(`cloneWorkspace()`); + workspaceDoc.contextMenuScripts = new List([toggleTheme!, toggleComic!, cloneWorkspace!]); + workspaceDoc.contextMenuLabels = new List(["Toggle Theme Colors", "Toggle Comic Mode", "New Workspace Layout"]); + + Doc.AddDocToList(workspaces, "data", workspaceDoc); + // bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container) + } + stop = (e: React.MouseEvent) => { e.stopPropagation(); } @@ -431,7 +463,7 @@ export class MobileInterface extends React.Component { } } - // Button for switching between pan and ink mode + // Button for switching between pen and ink mode @action onSwitchInking = () => { const button = document.getElementById("inkButton") as HTMLElement; @@ -465,6 +497,16 @@ export class MobileInterface extends React.Component { if (this._activeDoc._viewType === "docking") { return ( <> + {/*
{ + UndoManager.Undo(); + e.stopPropagation(); + }}> + +
*/}
+ {/*
{ + UndoManager.Redo(); + e.stopPropagation(); + }}> + +
*/} ); } } @@ -645,6 +697,12 @@ export class MobileInterface extends React.Component { ); } + displayRadialMenu = () => { + if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc) { + return ; + } + } + onDragOver = (e: React.DragEvent) => { e.preventDefault(); e.stopPropagation(); @@ -669,12 +727,14 @@ export class MobileInterface extends React.Component { {this.displayWorkspaces()} {this.renderDefaultContent()} - + {this.displayRadialMenu()}
); } } + + Scripting.addGlobal(function switchMobileView(doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) { return MobileInterface.Instance.switchCurrentView(doc, renderView, onSwitch); }); Scripting.addGlobal(function openMobilePresentation() { return MobileInterface.Instance.setupDefaultPresentation(); }); Scripting.addGlobal(function toggleMobileSidebar() { return MobileInterface.Instance.toggleSidebar(); }); diff --git a/src/server/ApiManagers/PDFManager.ts b/src/server/ApiManagers/PDFManager.ts index d2a9e9cce..b0b5a484a 100644 --- a/src/server/ApiManagers/PDFManager.ts +++ b/src/server/ApiManagers/PDFManager.ts @@ -55,7 +55,8 @@ async function CreateThumbnail(coreFilename: string, pageNum: number, res: expre const documentProxy = await Pdfjs.getDocument(sourcePath).promise; const factory = new NodeCanvasFactory(); const page = await documentProxy.getPage(pageNum); - const viewport = page.getViewport(1 as any); + const scale = 1; + const viewport = page.getViewport(scale as any); const { canvas, context } = factory.create(viewport.width, viewport.height); const renderContext = { canvasContext: context, -- cgit v1.2.3-70-g09d2 From 3b8e60f743ccf4a8f2e2a68462a852664e922a1e Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Thu, 18 Jun 2020 00:09:27 -0500 Subject: slight restructure of doc type --- .../views/collections/CollectionSchemaCells.tsx | 124 +++++++++++++++++---- 1 file changed, 102 insertions(+), 22 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index 33b6e7bec..2d29f978c 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -29,6 +29,7 @@ import { List } from "../../../fields/List"; import { LinkBox } from "../nodes/LinkBox"; import { OverlayView } from "../OverlayView"; import { DocumentIconContainer } from "../nodes/DocumentIcon"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; const path = require('path'); library.add(faExpand); @@ -314,8 +315,102 @@ export class CollectionSchemaStringCell extends CollectionSchemaCell { @observer export class CollectionSchemaDocCell extends CollectionSchemaCell { + + _overlayDisposer?: () => void; + + private prop: FieldViewProps = { + Document: this.props.rowProps.original, + DataDoc: this.props.rowProps.original, + LibraryPath: [], + dropAction: "alias", + bringToFront: emptyFunction, + rootSelected: returnFalse, + fieldKey: this.props.rowProps.column.id as string, + ContainingCollectionView: this.props.CollectionView, + ContainingCollectionDoc: this.props.CollectionView && this.props.CollectionView.props.Document, + isSelected: returnFalse, + select: emptyFunction, + renderDepth: this.props.renderDepth + 1, + ScreenToLocalTransform: Transform.Identity, + focus: emptyFunction, + active: returnFalse, + whenActiveChanged: emptyFunction, + PanelHeight: returnZero, + PanelWidth: returnZero, + NativeHeight: returnZero, + NativeWidth: returnZero, + addDocTab: this.props.addDocTab, + pinToPres: this.props.pinToPres, + ContentScaling: returnOne + }; + @observable private _field = this.prop.Document[this.prop.fieldKey]; + @observable private _text = "this._field"; + + + @action + onSetValue = (value: string) => { + this._text = value; + //this.prop.Document[this.prop.fieldKey] = this._text; + + const script = CompileScript(value, { + addReturn: true, + typecheck: false, + transformer: DocumentIconContainer.getTransformer() + }); + const results = script.compiled && script.run(); + if (results && results.success) { + + this._text = results.result; + + return true; + } + return false; + } + + onFocus = () => { + + console.log(this._field); + this._overlayDisposer?.(); + this._overlayDisposer = OverlayView.Instance.addElement(, { x: 0, y: 0 }); + } + + render() { - return this.renderCellWithType("document"); + + const dragRef: React.RefObject = React.createRef(); + const reference = React.createRef(); + + if (typeof this._field === "object" && this._text) { + + + return ( +
+
this._overlayDisposer?.()} + ref={this.dropRef}> + { + const val = this._text ? this._text : ""; + return StrCast(val); + }} + SetValue={action((value: string) => { + this.onSetValue(value); + return true; + })} + /> +
+
+ ); + } else { + return this.renderCellWithType("document"); + } } } @@ -489,28 +584,11 @@ export class CollectionSchemaListCell extends CollectionSchemaCell { let type = "list"; - // const fieldIsDoc = (type === "document" && typeof this._field === "object") || (typeof this._field === "object" && document); - - // const onItemDown = (e: React.PointerEvent) => { - // fieldIsDoc && SetupDrag(this._focusRef, - // () => this._document[this.prop.fieldKey] instanceof Doc ? this._document[this.prop.fieldKey] : this._document, - // this._document[this.prop.fieldKey] instanceof Doc ? (doc: Doc | Doc[], target: Doc | undefined, addDoc: (newDoc: Doc | Doc[]) => any) => addDoc(doc) : this.props.moveDocument, - // this._document[this.prop.fieldKey] instanceof Doc ? "alias" : this.props.Document.schemaDoc ? "copy" : undefined)(e); - // }; - // const onPointerEnter = (e: React.PointerEvent): void => { - // if (e.buttons === 1 && SnappingManager.GetIsDragging() && (type === "document" || type === undefined)) { - // dragRef.current!.className = "collectionSchemaView-cellContainer doc-drag-over"; - // } - // }; - // const onPointerLeave = (e: React.PointerEvent): void => { - // dragRef.current!.className = "collectionSchemaView-cellContainer"; - // }; - let link = false; let doc = false; const reference = React.createRef(); - if (typeof this._field === "object" && this._optionsList[1]) { + if (typeof this._field === "object" && this._optionsList[0]) { const options = this._optionsList.map((element, index) => { @@ -538,7 +616,7 @@ export class CollectionSchemaListCell extends CollectionSchemaCell { } }); - const plainText =
{this._text}
; + const plainText =
{this._text}
; // const textarea = ; const textarea =
; + //☰ const dropdown =
{options} @@ -578,7 +657,8 @@ export class CollectionSchemaListCell extends CollectionSchemaCell {
{link ? plainText : textarea}
-- cgit v1.2.3-70-g09d2 From ff53019e6a801954b3798c09f01e893a1528c82f Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Thu, 18 Jun 2020 00:32:28 -0500 Subject: merge fixes and better doc type --- src/client/views/collections/CollectionSchemaCells.tsx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index 4b55cd2ed..df2a90366 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -3,7 +3,7 @@ import { action, observable, trace } from "mobx"; import { observer } from "mobx-react"; import { CellInfo } from "react-table"; import "react-table/react-table.css"; -import { emptyFunction, returnFalse, returnZero, returnOne, returnEmptyFilter } from "../../../Utils"; +import { emptyFunction, returnFalse, returnZero, returnOne, returnEmptyFilter, Utils } from "../../../Utils"; import { Doc, DocListCast, Field, Opt } from "../../../fields/Doc"; import { Id } from "../../../fields/FieldSymbols"; import { KeyCodes } from "../../util/KeyCodes"; @@ -345,12 +345,13 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { ContentScaling: returnOne }; @observable private _field = this.prop.Document[this.prop.fieldKey]; - @observable private _text = "this._field"; + @observable private _doc = FieldValue(Cast(this._field, Doc)); + @observable private _docTitle = this._doc?.title; @action onSetValue = (value: string) => { - this._text = value; + this._docTitle = value; //this.prop.Document[this.prop.fieldKey] = this._text; const script = CompileScript(value, { @@ -358,10 +359,12 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { typecheck: false, transformer: DocumentIconContainer.getTransformer() }); + const results = script.compiled && script.run(); if (results && results.success) { - this._text = results.result; + console.log(results.result); + // this._docTitle = results.result; return true; } @@ -381,7 +384,7 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { const dragRef: React.RefObject = React.createRef(); const reference = React.createRef(); - if (typeof this._field === "object" && this._text) { + if (typeof this._field === "object" && this._docTitle) { return ( @@ -394,12 +397,11 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { editing={this._isEditing} isEditingCallback={this.isEditingCallback} display={"inline"} - contents={this._text} + contents={this._docTitle} height={"auto"} maxHeight={Number(MAX_ROW_HEIGHT)} GetValue={() => { - const val = this._text ? this._text : ""; - return StrCast(val); + return StrCast(this._docTitle); }} SetValue={action((value: string) => { this.onSetValue(value); -- cgit v1.2.3-70-g09d2 From b0d3aa2fff87cdaeb4308c278b248f2d11cc043e Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Thu, 18 Jun 2020 15:27:01 -0500 Subject: doc opening button --- src/client/views/collections/CollectionSchemaCells.tsx | 18 +++++++++++++++--- src/client/views/collections/CollectionSchemaView.scss | 11 +++++++++++ 2 files changed, 26 insertions(+), 3 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index df2a90366..2aed880ec 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -364,7 +364,9 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { if (results && results.success) { console.log(results.result); - // this._docTitle = results.result; + this._doc = results.result; + this.prop.Document[this.prop.fieldKey] = results.result; + this._docTitle = this._doc?.title; return true; } @@ -378,18 +380,26 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { this._overlayDisposer = OverlayView.Instance.addElement(, { x: 0, y: 0 }); } + onOpenClick = () => { + if (this._doc) { + this.prop.addDocTab(this._doc, "onRight"); + return true; + } + return false; + } + render() { const dragRef: React.RefObject = React.createRef(); const reference = React.createRef(); - if (typeof this._field === "object" && this._docTitle) { + if (typeof this._field === "object" && this._doc && this._docTitle) { return (
-
this._overlayDisposer?.()} ref={this.dropRef}> @@ -409,6 +419,8 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { })} />
+
); } else { diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 5a4e1aa58..50971420d 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -413,6 +413,17 @@ button.add-column { display: block; } + + .collectionSchemaView-cellContents-document { + display: inline-block; + } + + .collectionSchemaView-cellContents-docButton { + float: right; + width: "15px"; + height: "15px"; + } + .collectionSchemaView-dropdownWrapper { border: grey; -- cgit v1.2.3-70-g09d2 From 738a56b3c18c06d8290346373eb60a125120caaf Mon Sep 17 00:00:00 2001 From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com> Date: Thu, 18 Jun 2020 15:02:50 -0700 Subject: hopefully fixed new ink --- src/client/util/InteractionUtils.tsx | 4 +- src/client/views/InkingStroke.tsx | 4 +- .../views/collections/CollectionDockingView.tsx | 2 +- src/client/views/collections/CollectionView.tsx | 4 +- .../views/collections/CollectionViewChromes.tsx | 2 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 6 +-- src/client/views/nodes/DocumentView.tsx | 44 +++++++++++----------- src/mobile/MobileInterface.tsx | 16 +++++--- src/pen-gestures/ndollar.ts | 2 +- 9 files changed, 44 insertions(+), 40 deletions(-) (limited to 'src/client/views') diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx index aeb0f670d..3b42fcaee 100644 --- a/src/client/util/InteractionUtils.tsx +++ b/src/client/util/InteractionUtils.tsx @@ -96,9 +96,9 @@ export namespace InteractionUtils { } else if (points.length > 1 && points[points.length - 1].X === points[0].X && points[points.length - 1].Y === points[0].Y) { //pointer is up (first and last points are the same) - points.pop(); + //points.pop(); const newPoints = points.reduce((p, pts) => { p.push([pts.X, pts.Y]); return p; }, [] as number[][]); - + newPoints.pop(); const bezierCurves = fitCurve(newPoints, parseInt(bezier)); for (var i = 0; i < bezierCurves.length; i++) { for (var t = 0; t < 1; t += 0.01) { diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 7e3bd1c17..5129ef65d 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -68,8 +68,8 @@ export class InkingStroke extends ViewBoxBaseComponent { - ContextMenu.Instance.addItem({ description: "Analyze Stroke", event: this.analyzeStrokes, icon: "paint-brush" }); - ContextMenu.Instance.addItem({ description: "Make Mask", event: this.makeMask, icon: "paint-brush" }); + ContextMenu.Instance?.addItem({ description: "Analyze Stroke", event: this.analyzeStrokes, icon: "paint-brush" }); + ContextMenu.Instance?.addItem({ description: "Make Mask", event: this.makeMask, icon: "paint-brush" }); }} > diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index c2e297f61..657e2a08b 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -790,7 +790,7 @@ export class DockedFrameRenderer extends React.Component { if (this._mainCont && this._mainCont.children) { const { translateX, translateY } = Utils.GetScreenTransform(this._mainCont.children[0].firstChild as HTMLElement); const scale = Utils.GetScreenTransform(this._mainCont).scale; - return CollectionDockingView.Instance.props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(1 / this.contentScaling() / scale); + return CollectionDockingView.Instance?.props.ScreenToLocalTransform().translate(-translateX, -translateY).scale(1 / this.contentScaling() / scale); } return Transform.Identity(); } diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index a700d0dfb..0a84e6f72 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -283,10 +283,10 @@ export class CollectionView extends Touchable ImageUtils.ExportHierarchyToFileSystem(this.props.Document) }); - !more && ContextMenu.Instance.addItem({ description: "More...", subitems: moreItems, icon: "hand-point-right" }); + !more && ContextMenu.Instance?.addItem({ description: "More...", subitems: moreItems, icon: "hand-point-right" }); } } } diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 48810f1e9..ec908f034 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -300,7 +300,7 @@ export class CollectionViewBaseChrome extends React.Component { if (this.props.annotationsKey) return; - ContextMenu.Instance.addItem({ + ContextMenu.Instance?.addItem({ description: (this._timelineVisible ? "Close" : "Open") + " Animation Timeline", event: action(() => { this._timelineVisible = !this._timelineVisible; }), icon: this._timelineVisible ? faEyeSlash : faEye }); - const options = ContextMenu.Instance.findByDescription("Options..."); + const options = ContextMenu.Instance?.findByDescription("Options..."); const optionItems: ContextMenuProps[] = options && "subitems" in options ? options.subitems : []; optionItems.push({ description: "reset view", event: () => { this.props.Document._panX = this.props.Document._panY = 0; this.props.Document[this.scaleFieldKey] = 1; }, icon: "compress-arrows-alt" }); @@ -1246,7 +1246,7 @@ export class CollectionFreeFormView extends CollectionSubView this.Document._LODdisable = !this.Document._LODdisable, icon: "table" }); - ContextMenu.Instance.addItem({ description: "Options...", subitems: optionItems, icon: "eye" }); + ContextMenu.Instance?.addItem({ description: "Options...", subitems: optionItems, icon: "eye" }); } @observable _timelineVisible = false; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index e027b6a0f..2f868d558 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -708,40 +708,40 @@ export class DocumentView extends DocComponent(Docu onContextMenu = async (e: React.MouseEvent | Touch): Promise => { // the touch onContextMenu is button 0, the pointer onContextMenu is button 2 if (!(e instanceof Touch)) { - if (e.button === 0 && !e.ctrlKey) { - e.preventDefault(); + if (e?.button === 0 && !e.ctrlKey) { + e?.preventDefault(); return; } - e.persist(); + e?.persist(); e?.stopPropagation(); - if (Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3 || - e.isDefaultPrevented()) { - e.preventDefault(); + if (Math.abs(this._downX - e?.clientX) > 3 || Math.abs(this._downY - e?.clientY) > 3 || + e?.isDefaultPrevented()) { + e?.preventDefault(); return; } - e.preventDefault(); + e?.preventDefault(); } const cm = ContextMenu.Instance; const customScripts = Cast(this.props.Document.contextMenuScripts, listSpec(ScriptField), []); Cast(this.props.Document.contextMenuLabels, listSpec("string"), []).forEach((label, i) => - cm.addItem({ description: label, event: () => customScripts[i]?.script.run({ this: this.layoutDoc, self: this.rootDoc }), icon: "sticky-note" })); + cm?.addItem({ description: label, event: () => customScripts[i]?.script.run({ this: this.layoutDoc, self: this.rootDoc }), icon: "sticky-note" })); this.props.contextMenuItems?.().forEach(item => - cm.addItem({ description: item.label, event: () => item.script.script.run({ this: this.layoutDoc, self: this.rootDoc }), icon: "sticky-note" })); + cm?.addItem({ description: item.label, event: () => item.script.script.run({ this: this.layoutDoc, self: this.rootDoc }), icon: "sticky-note" })); - let options = cm.findByDescription("Options..."); + let options = cm?.findByDescription("Options..."); const optionItems: ContextMenuProps[] = options && "subitems" in options ? options.subitems : []; const templateDoc = Cast(this.props.Document[StrCast(this.props.Document.layoutKey)], Doc, null); optionItems.push({ description: "Open Fields ", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "onRight"), icon: "layer-group" }); templateDoc && optionItems.push({ description: "Open Template ", event: () => this.props.addDocTab(templateDoc, "onRight"), icon: "eye" }); if (!options) { options = { description: "Options...", subitems: optionItems, icon: "compass" }; - cm.addItem(options); + cm?.addItem(options); } - const existingOnClick = cm.findByDescription("OnClick..."); + const existingOnClick = cm?.findByDescription("OnClick..."); const onClicks: ContextMenuProps[] = existingOnClick && "subitems" in existingOnClick ? existingOnClick.subitems : []; onClicks.push({ description: "Enter Portal", event: this.makeIntoPortal, icon: "window-restore" }); onClicks.push({ description: "Toggle Detail", event: () => this.Document.onClick = ScriptField.MakeScript(`toggleDetail(self, "${this.props.Document.layoutKey}")`), icon: "window-restore" }); @@ -750,17 +750,17 @@ export class DocumentView extends DocComponent(Docu onClicks.push({ description: this.Document.isLinkButton ? "Remove Follow Behavior" : "Follow Link on Right", event: this.toggleFollowOnRight, icon: "concierge-bell" }); onClicks.push({ description: this.Document.isLinkButton || this.Document.onClick ? "Remove Click Behavior" : "Follow Link", event: this.toggleLinkButtonBehavior, icon: "concierge-bell" }); onClicks.push({ description: "Edit onClick Script", event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.props.Document, undefined, "onClick"), "edit onClick"), icon: "edit" }); - !existingOnClick && cm.addItem({ description: "OnClick...", subitems: onClicks, icon: "hand-point-right" }); + !existingOnClick && cm?.addItem({ description: "OnClick...", subitems: onClicks, icon: "hand-point-right" }); const funcs: ContextMenuProps[] = []; if (this.Document.onDragStart) { funcs.push({ description: "Drag an Alias", icon: "edit", event: () => this.Document.dragFactory && (this.Document.onDragStart = ScriptField.MakeFunction('getAlias(this.dragFactory)')) }); funcs.push({ description: "Drag a Copy", icon: "edit", event: () => this.Document.dragFactory && (this.Document.onDragStart = ScriptField.MakeFunction('getCopy(this.dragFactory, true)')) }); funcs.push({ description: "Drag Document", icon: "edit", event: () => this.Document.onDragStart = undefined }); - cm.addItem({ description: "OnDrag...", subitems: funcs, icon: "asterisk" }); + cm?.addItem({ description: "OnDrag...", subitems: funcs, icon: "asterisk" }); } - const more = cm.findByDescription("More..."); + const more = cm?.findByDescription("More..."); const moreItems = more && "subitems" in more ? more.subitems : []; if (!Doc.UserDoc().noviceMode) { moreItems.push({ description: "Make View of Metadata Field", event: () => Doc.MakeMetadataFieldTemplate(this.props.Document, this.props.DataDoc), icon: "concierge-bell" }); @@ -789,26 +789,26 @@ export class DocumentView extends DocComponent(Docu moreItems.push({ description: "Copy ID", event: () => Utils.CopyText(Utils.prepend("/doc/" + this.props.Document[Id])), icon: "fingerprint" }); moreItems.push({ description: "Delete", event: this.deleteClicked, icon: "trash" }); moreItems.push({ description: "Share", event: () => SharingManager.Instance.open(this), icon: "external-link-alt" }); - !more && cm.addItem({ description: "More...", subitems: moreItems, icon: "hand-point-right" }); - cm.moveAfter(cm.findByDescription("More...")!, cm.findByDescription("OnClick...")!); + !more && cm?.addItem({ description: "More...", subitems: moreItems, icon: "hand-point-right" }); + cm?.moveAfter(cm?.findByDescription("More...")!, cm?.findByDescription("OnClick...")!); - const help = cm.findByDescription("Help..."); + const help = cm?.findByDescription("Help..."); const helpItems: ContextMenuProps[] = help && "subitems" in help ? help.subitems : []; helpItems.push({ description: "Keyboard Shortcuts Ctrl+/", event: () => this.props.addDocTab(Docs.Create.PdfDocument("http://localhost:1050/assets/cheat-sheet.pdf", { _width: 300, _height: 300 }), "onRight"), icon: "keyboard" }); - cm.addItem({ description: "Help...", subitems: helpItems, icon: "question" }); + cm?.addItem({ description: "Help...", subitems: helpItems, icon: "question" }); - const existingAcls = cm.findByDescription("Privacy..."); + const existingAcls = cm?.findByDescription("Privacy..."); const aclItems: ContextMenuProps[] = existingAcls && "subitems" in existingAcls ? existingAcls.subitems : []; aclItems.push({ description: "Make Add Only", event: () => this.setAcl("addOnly"), icon: "concierge-bell" }); aclItems.push({ description: "Make Read Only", event: () => this.setAcl("readOnly"), icon: "concierge-bell" }); aclItems.push({ description: "Make Private", event: () => this.setAcl("ownerOnly"), icon: "concierge-bell" }); aclItems.push({ description: "Test Private", event: () => this.testAcl("ownerOnly"), icon: "concierge-bell" }); aclItems.push({ description: "Test Readonly", event: () => this.testAcl("readOnly"), icon: "concierge-bell" }); - !existingAcls && cm.addItem({ description: "Privacy...", subitems: aclItems, icon: "question" }); + !existingAcls && cm?.addItem({ description: "Privacy...", subitems: aclItems, icon: "question" }); // const recommender_subitems: ContextMenuProps[] = []; @@ -869,7 +869,7 @@ export class DocumentView extends DocComponent(Docu // DocumentViews should stop propagation of this event e.stopPropagation(); } - ContextMenu.Instance.displayMenu(e.pageX - 15, e.pageY - 15); + ContextMenu.Instance?.displayMenu(e.pageX - 15, e.pageY - 15); !SelectionManager.IsSelected(this, true) && SelectionManager.SelectDoc(this, false); }); const path = this.props.LibraryPath.reduce((p: string, d: Doc) => p + "/" + (Doc.AreProtosEqual(d, (Doc.UserDoc()["tabs-button-library"] as Doc).sourcePanel as Doc) ? "" : d.title), ""); diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index 4000bee85..3a81e5de1 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -708,6 +708,10 @@ export class MobileInterface extends React.Component { e.stopPropagation(); } + uploadToCurrentCollection = (doc: Doc) => { + + } + render() { return (
@@ -717,13 +721,13 @@ export class MobileInterface extends React.Component {
{this.switchMenuView()} {this.inkMenu()} +
+ {this.pinToPresentation()} + {this.downloadDocument()} + {this.drawInk()} + {this.uploadAudioButton()} +
-
- {this.pinToPresentation()} - {this.downloadDocument()} - {this.drawInk()} - {this.uploadAudioButton()} -
{this.displayWorkspaces()} {this.renderDefaultContent()} diff --git a/src/pen-gestures/ndollar.ts b/src/pen-gestures/ndollar.ts index 9d42035d1..ecd8df3e7 100644 --- a/src/pen-gestures/ndollar.ts +++ b/src/pen-gestures/ndollar.ts @@ -552,7 +552,7 @@ function Distance(p1: any, p2: any) // distance between two points } function CalcStartUnitVector(points: any, index: any) // start angle from points[0] to points[index] normalized as a unit vector { - const v = new Point(points[index].X - points[0].X, points[index].Y - points[0].Y); + const v = new Point(points[index]?.X - points[0]?.X, points[index]?.Y - points[0]?.Y); const len = Math.sqrt(v.X * v.X + v.Y * v.Y); return new Point(v.X / len, v.Y / len); } -- cgit v1.2.3-70-g09d2 From 765fc1781c41bcced699ed3cf0bf07561d336187 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Thu, 18 Jun 2020 23:42:55 -0500 Subject: doc type preview and editing lists --- .../views/collections/CollectionSchemaCells.tsx | 64 ++++++++++++++++++++-- 1 file changed, 59 insertions(+), 5 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index 2aed880ec..cbee848e6 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -1,5 +1,5 @@ import React = require("react"); -import { action, observable, trace } from "mobx"; +import { action, observable, trace, computed } from "mobx"; import { observer } from "mobx-react"; import { CellInfo } from "react-table"; import "react-table/react-table.css"; @@ -10,7 +10,7 @@ import { KeyCodes } from "../../util/KeyCodes"; import { SetupDrag, DragManager } from "../../util/DragManager"; import { CompileScript } from "../../util/Scripting"; import { Transform } from "../../util/Transform"; -import { MAX_ROW_HEIGHT } from '../globalCssVariables.scss'; +import { MAX_ROW_HEIGHT, COLLECTION_BORDER_WIDTH } from '../globalCssVariables.scss'; import '../DocumentDecorations.scss'; import { EditableView } from "../EditableView"; import { FieldView, FieldViewProps } from "../nodes/FieldView"; @@ -30,6 +30,7 @@ import { LinkBox } from "../nodes/LinkBox"; import { OverlayView } from "../OverlayView"; import { DocumentIconContainer } from "../nodes/DocumentIcon"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView"; const path = require('path'); library.add(faExpand); @@ -342,12 +343,16 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { NativeWidth: returnZero, addDocTab: this.props.addDocTab, pinToPres: this.props.pinToPres, - ContentScaling: returnOne + ContentScaling: returnOne, + docFilters: [] }; @observable private _field = this.prop.Document[this.prop.fieldKey]; @observable private _doc = FieldValue(Cast(this._field, Doc)); @observable private _docTitle = this._doc?.title; - + @observable private _preview = false; + @computed get previewWidth() { return () => NumCast(this.props.Document.schemaPreviewWidth); } + @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); } + @computed get tableWidth() { return this.prop.PanelWidth() - 2 * this.borderWidth - 4 - this.previewWidth(); } @action onSetValue = (value: string) => { @@ -366,6 +371,7 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { console.log(results.result); this._doc = results.result; this.prop.Document[this.prop.fieldKey] = results.result; + this.prop.Document[this.prop.fieldKey] = results.result; this._docTitle = this._doc?.title; return true; @@ -380,6 +386,7 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { this._overlayDisposer = OverlayView.Instance.addElement(, { x: 0, y: 0 }); } + @action onOpenClick = () => { if (this._doc) { this.prop.addDocTab(this._doc, "onRight"); @@ -388,6 +395,16 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { return false; } + @action + showPreview = (bool: boolean) => { + console.log("show preview"); + this._preview = bool; + } + + getPreviewTransform = (): Transform => { + return this.prop.ScreenToLocalTransform().translate(- this.borderWidth - 4 - this.tableWidth, - this.borderWidth); + } + render() { @@ -399,10 +416,42 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { return (
+ {this._preview ? { return false; }} + PanelWidth={() => { return 200 }} + PanelHeight={() => { return 200 }} + ScreenToLocalTransform={this.getPreviewTransform} + docFilters={this.docFilters} + ContainingCollectionDoc={this.props.CollectionView?.props.Document} + ContainingCollectionView={this.props.CollectionView} + moveDocument={this.props.moveDocument} + //addDocument={this.props.addDocument} + //removeDocument={this.props.removeDocument} + parentActive={this.prop.active} + whenActiveChanged={this.prop.whenActiveChanged} + addDocTab={this.props.addDocTab} + pinToPres={this.props.pinToPres} + bringToFront={returnFalse} + ContentScaling={returnOne} + + > + : null} +
this._overlayDisposer?.()} - ref={this.dropRef}> + ref={this.dropRef} + onClick={() => { this.showPreview(!this._preview) }}> + { + + this._text = value; // change if its a document this._optionsList[this._selectedNum] = this._text; + + (this.prop.Document[this.prop.fieldKey] as List).splice(this._selectedNum, 1, value); + } @action -- cgit v1.2.3-70-g09d2 From 10754a14c8d0dda68f2484e523f6901b3e7daee3 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Fri, 19 Jun 2020 14:14:28 +0800 Subject: css changes and bug fixes Presentation Undo / Redo Image upload Record Audio --- src/client/views/collections/CollectionView.tsx | 2 +- .../views/collections/CollectionViewChromes.scss | 6 + .../collectionFreeForm/CollectionFreeFormView.tsx | 2 +- src/client/views/nodes/AudioBox.tsx | 2 +- src/client/views/nodes/PresBox.scss | 10 +- src/mobile/AudioUpload.scss | 119 +++++++++++ src/mobile/AudioUpload.tsx | 237 +++++++++++++++++++++ src/mobile/ImageUpload.scss | 15 +- src/mobile/ImageUpload.tsx | 58 +++-- src/mobile/MobileInterface.tsx | 205 ++++++++++-------- src/mobile/MobileMenu.scss | 15 +- 11 files changed, 531 insertions(+), 140 deletions(-) create mode 100644 src/mobile/AudioUpload.scss create mode 100644 src/mobile/AudioUpload.tsx (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index a700d0dfb..7c5c87e3e 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -283,7 +283,7 @@ export class CollectionView extends Touchable ImageUtils.ExportHierarchyToFileSystem(this.props.Document) }); !more && ContextMenu.Instance.addItem({ description: "More...", subitems: moreItems, icon: "hand-point-right" }); diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index f85cbfee2..54ee4ab3b 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -80,6 +80,12 @@ // margin-top: 10px; } + @media only screen and (max-width: 1000) { + .collectionViewBaseChrome-collapse { + display: none; + } + } + .collectionViewBaseChrome-template, .collectionViewBaseChrome-viewModes { display: grid; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 82d6dee73..327e172bb 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1199,7 +1199,7 @@ export class CollectionFreeFormView extends CollectionSubView { if (this.props.annotationsKey) return; - ContextMenu.Instance.addItem({ + ContextMenu.Instance?.addItem({ description: (this._timelineVisible ? "Close" : "Open") + " Animation Timeline", event: action(() => { this._timelineVisible = !this._timelineVisible; }), icon: this._timelineVisible ? faEyeSlash : faEye diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 2e0be1c6a..cb0582d87 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -161,7 +161,7 @@ export class AudioBox extends ViewBoxBaseComponent this.layoutDoc.playOnSelect = !this.layoutDoc.playOnSelect, icon: "expand-arrows-alt" }); - ContextMenu.Instance.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" }); + ContextMenu.Instance?.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" }); } stopRecording = action(() => { diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index ccce6e627..e62aa48fb 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -105,15 +105,13 @@ } .presBox-cont .presBox-buttons .presBox-button { - margin-right: 10px; - margin-left: 10px; + margin-top: 5%; height: 250; - width: 250; - font-size: 70; - border-radius: 25px; + width: 300; + font-size: 100; display: flex; align-items: center; - background: #323232; + background: 323232; color: white; } diff --git a/src/mobile/AudioUpload.scss b/src/mobile/AudioUpload.scss new file mode 100644 index 000000000..5f0ba465a --- /dev/null +++ b/src/mobile/AudioUpload.scss @@ -0,0 +1,119 @@ +@import "../client/views/globalCssVariables.scss"; + +.audioUpload_cont { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + max-width: 400px; + min-width: 400px; + + .upload_label { + font-size: 3em; + font-weight: 700; + color: white; + background-color: black; + display: inline-block; + margin: 10; + width: 100%; + border-radius: 10px; + } + + .file { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + direction: ltr; + } + + .upload_label:hover { + background-color: darkred; + } + + .button_file { + text-align: center; + height: 50%; + width: 50%; + background-color: paleturquoise; + color: grey; + font-size: 3em; + } + + .inputfile { + width: 0.1px; + height: 0.1px; + opacity: 0; + overflow: hidden; + position: absolute; + z-index: -1; + } + + .inputfile+label { + font-size: 3em; + font-weight: 700; + color: white; + background-color: black; + display: inline-block; + margin: 10px; + width: 100%; + border-radius: 10px; + } + + .inputfile:focus+label, + .inputfile+label:hover { + background-color: darkred; + } + + .status { + font-size: 2em; + } + +} + +.backgroundUpload { + height: 100vh; + top: 0; + z-index: 999; + width: 100vw; + position: absolute; + background-color: lightgrey; + opacity: 0.4; +} + +.audio-upload { + top: 100%; + opacity: 0; +} + +.audio-upload.active { + top: 0; + position: absolute; + z-index: 999; + height: 100vh; + width: 100vw; + opacity: 1; +} + +.uploadContainer { + top: 40; + position: absolute; + z-index: 1000; + height: 20vh; + width: 80vw; + opacity: 1; +} + +.loadingImage { + display: inline-flex; + width: max-content; +} + +.loadingSlab { + position: relative; + width: 30px; + height: 30px; + margin: 10; + border-radius: 20px; + opacity: 0.3; + background-color: black; +} \ No newline at end of file diff --git a/src/mobile/AudioUpload.tsx b/src/mobile/AudioUpload.tsx new file mode 100644 index 000000000..7ea11ee84 --- /dev/null +++ b/src/mobile/AudioUpload.tsx @@ -0,0 +1,237 @@ +import * as ReactDOM from 'react-dom'; +import * as rp from 'request-promise'; +import { Docs } from '../client/documents/Documents'; +import "./ImageUpload.scss"; +import React = require('react'); +import { DocServer } from '../client/DocServer'; +import { observer } from 'mobx-react'; +import { observable, action } from 'mobx'; +import { Utils, emptyPath, returnFalse, emptyFunction, returnOne, returnZero, returnTrue } from '../Utils'; +import { Networking } from '../client/Network'; +import { Doc, Opt } from '../fields/Doc'; +import { Cast } from '../fields/Types'; +import { listSpec } from '../fields/Schema'; +import { List } from '../fields/List'; +import { Scripting } from '../client/util/Scripting'; +import MainViewModal from '../client/views/MainViewModal'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { nullAudio } from '../fields/URLField'; +import { Transform } from '../client/util/Transform'; +import { DocumentView } from '../client/views/nodes/DocumentView'; +import { MobileInterface } from './MobileInterface'; + +export interface ImageUploadProps { + Document: Doc; +} + +// const onPointerDown = (e: React.TouchEvent) => { +// let imgInput = document.getElementById("input_image_file"); +// if (imgInput) { +// imgInput.click(); +// } +// } +const inputRef = React.createRef(); + +@observer +export class AudioUpload extends React.Component { + @observable error: string = ""; + @observable status: string = ""; + @observable nm: string = "Choose files"; + @observable process: string = ""; + + onClick = async () => { + try { + await Docs.Prototypes.initialize(); + const imgPrev = document.getElementById("img_preview"); + const slab1 = document.getElementById("slab1"); + if (slab1) { + slab1.style.opacity = "1"; + } + if (imgPrev) { + const files: FileList | null = inputRef.current!.files; + const slab2 = document.getElementById("slab2"); + if (slab2) { + slab2.style.opacity = "1"; + } + if (files && files.length !== 0) { + this.process = "Uploading Files"; + for (let index = 0; index < files.length; ++index) { + const file = files[index]; + const res = await Networking.UploadFilesToServer(file); + const slab3 = document.getElementById("slab3"); + if (slab3) { + slab3.style.opacity = "1"; + } + res.map(async ({ result }) => { + const name = file.name; + if (result instanceof Error) { + return; + } + const path = Utils.prepend(result.accessPaths.agnostic.client); + let doc = null; + console.log("type: " + file.type); + if (file.type === "video/mp4") { + doc = Docs.Create.VideoDocument(path, { _nativeWidth: 200, _width: 200, title: name }); + } else if (file.type === "application/pdf") { + doc = Docs.Create.PdfDocument(path, { _width: 200, title: name }); + } else { + doc = Docs.Create.ImageDocument(path, { _nativeWidth: 200, _width: 200, title: name }); + } + const slab4 = document.getElementById("slab4"); + if (slab4) { + slab4.style.opacity = "1"; + } + const res = await rp.get(Utils.prepend("/getUserDocumentId")); + if (!res) { + throw new Error("No user id returned"); + } + const field = await DocServer.GetRefField(res); + let pending: Opt; + if (field instanceof Doc) { + pending = await Cast(field.mobileUpload, Doc); + } + if (pending) { + const data = await Cast(pending.data, listSpec(Doc)); + if (data) { + data.push(doc); + } else { + pending.data = new List([doc]); + } + this.status = "finished"; + const slab5 = document.getElementById("slab5"); + if (slab5) { + slab5.style.opacity = "1"; + } + this.process = "File " + (index + 1).toString() + " Uploaded"; + const slab6 = document.getElementById("slab6"); + if (slab6) { + slab6.style.opacity = "1"; + } + const slab7 = document.getElementById("slab7"); + if (slab7) { + slab7.style.opacity = "1"; + } + + } + }); + } + } else { + this.process = "No file selected"; + } + setTimeout(this.clearUpload, 3000); + } + } catch (error) { + this.error = JSON.stringify(error); + } + } + + // Updates label after a files is selected (so user knows a file is uploaded) + inputLabel = async () => { + const files: FileList | null = inputRef.current!.files; + await files; + if (files && files.length === 1) { + console.log(files); + this.nm = files[0].name; + } else if (files && files.length > 1) { + console.log(files.length); + this.nm = files.length.toString() + " files selected"; + } + } + + @action + clearUpload = () => { + const slab1 = document.getElementById("slab1"); + if (slab1) { + slab1.style.opacity = "0.4"; + } + const slab2 = document.getElementById("slab2"); + if (slab2) { + slab2.style.opacity = "0.4"; + } + const slab3 = document.getElementById("slab3"); + if (slab3) { + slab3.style.opacity = "0.4"; + } + const slab4 = document.getElementById("slab4"); + if (slab4) { + slab4.style.opacity = "0.4"; + } + const slab5 = document.getElementById("slab5"); + if (slab5) { + slab5.style.opacity = "0.4"; + } + const slab6 = document.getElementById("slab6"); + if (slab6) { + slab6.style.opacity = "0.4"; + } + const slab7 = document.getElementById("slab7"); + if (slab7) { + slab7.style. + opacity = "0.4"; + } + this.nm = "Choose files"; + + if (inputRef.current) { + inputRef.current.value = ""; + } + this.process = ""; + console.log(inputRef.current!.files); + } + + + + private get uploadInterface() { + const audioDoc = Cast(Docs.Create.AudioDocument(nullAudio, { title: "mobile audio" }), Doc) as Doc; + + return ( +
+
+ +
+ 1000} + PanelHeight={() => 1000} + NativeHeight={returnZero} + NativeWidth={returnZero} + renderDepth={0} + focus={emptyFunction} + backgroundColor={() => "white"} + parentActive={returnTrue} + whenActiveChanged={emptyFunction} + bringToFront={emptyFunction} + ContainingCollectionView={undefined} + ContainingCollectionDoc={undefined} + /> +
+ ); + } + + @observable private dialogueBoxOpacity = 1; + @observable private overlayOpacity = 0.4; + + render() { + return ( + + ); + } + +} + + diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss index 95c0c2680..b64aac338 100644 --- a/src/mobile/ImageUpload.scss +++ b/src/mobile/ImageUpload.scss @@ -55,6 +55,7 @@ background-color: black; display: inline-block; margin: 10px; + margin-top: 30px; width: 100%; border-radius: 10px; } @@ -106,16 +107,15 @@ .closeUpload { position: absolute; border-radius: 10px; - top: 39.7%; - color: grey; - font-size: 40; - left: 65.8%; + top: 3; + color: black; + font-size: 30; + right: 3; z-index: 1002; padding: 0px 3px; - background: aliceblue; + background: rgba(0, 0, 0, 0); transition: 0.5s ease all; - border: 3px solid; - border-color: black; + border: 0px solid; } .loadingImage { @@ -131,4 +131,5 @@ border-radius: 20px; opacity: 0.3; background-color: black; + transition: all 2s, opacity 1.5s; } \ No newline at end of file diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index b66f0461d..744a45507 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -15,6 +15,8 @@ import { List } from '../fields/List'; import { Scripting } from '../client/util/Scripting'; import MainViewModal from '../client/views/MainViewModal'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { MobileInterface } from './MobileInterface'; +import { CurrentUserUtils } from '../client/util/CurrentUserUtils'; export interface ImageUploadProps { Document: Doc; @@ -29,7 +31,7 @@ export interface ImageUploadProps { const inputRef = React.createRef(); @observer -export class Uploader extends React.Component { +export class Uploader extends React.Component { @observable error: string = ""; @observable status: string = ""; @observable nm: string = "Choose files"; @@ -39,25 +41,22 @@ export class Uploader extends React.Component { try { await Docs.Prototypes.initialize(); const imgPrev = document.getElementById("img_preview"); + // Slab 1 const slab1 = document.getElementById("slab1"); - if (slab1) { - slab1.style.opacity = "1"; - } + if (slab1) slab1.style.opacity = "1"; if (imgPrev) { const files: FileList | null = inputRef.current!.files; + // Slab 2 const slab2 = document.getElementById("slab2"); - if (slab2) { - slab2.style.opacity = "1"; - } + if (slab2) slab2.style.opacity = "1"; if (files && files.length !== 0) { this.process = "Uploading Files"; for (let index = 0; index < files.length; ++index) { const file = files[index]; const res = await Networking.UploadFilesToServer(file); + // Slab 3 const slab3 = document.getElementById("slab3"); - if (slab3) { - slab3.style.opacity = "1"; - } + if (slab3) slab3.style.opacity = "1"; res.map(async ({ result }) => { const name = file.name; if (result instanceof Error) { @@ -67,16 +66,15 @@ export class Uploader extends React.Component { let doc = null; console.log("type: " + file.type); if (file.type === "video/mp4") { - doc = Docs.Create.VideoDocument(path, { _nativeWidth: 200, _width: 200, title: name }); + doc = Docs.Create.VideoDocument(path, { _nativeWidth: 400, _width: 400, title: name }); } else if (file.type === "application/pdf") { - doc = Docs.Create.PdfDocument(path, { _width: 200, title: name }); + doc = Docs.Create.PdfDocument(path, { _nativeWidth: 400, _width: 400, title: name }); } else { - doc = Docs.Create.ImageDocument(path, { _nativeWidth: 200, _width: 200, title: name }); + doc = Docs.Create.ImageDocument(path, { _nativeWidth: 400, _width: 400, title: name }); } + // Slab 4 const slab4 = document.getElementById("slab4"); - if (slab4) { - slab4.style.opacity = "1"; - } + if (slab4) slab4.style.opacity = "1"; const res = await rp.get(Utils.prepend("/getUserDocumentId")); if (!res) { throw new Error("No user id returned"); @@ -84,30 +82,23 @@ export class Uploader extends React.Component { const field = await DocServer.GetRefField(res); let pending: Opt; if (field instanceof Doc) { - pending = await Cast(field.rightSidebarCollection, Doc); + const parent = await Cast(this.props.Document.data, listSpec(Doc)); + const u = CurrentUserUtils.setupMobileUpload(this.props.Document); + if (parent && !parent.includes(u)) parent.push(u); + pending = await Cast(u, Doc); } if (pending) { const data = await Cast(pending.data, listSpec(Doc)); - if (data) { - data.push(doc); - } else { - pending.data = new List([doc]); - } + if (data) data.push(doc); + else pending.data = new List([doc]); this.status = "finished"; const slab5 = document.getElementById("slab5"); - if (slab5) { - slab5.style.opacity = "1"; - } + if (slab5) slab5.style.opacity = "1"; this.process = "File " + (index + 1).toString() + " Uploaded"; const slab6 = document.getElementById("slab6"); - if (slab6) { - slab6.style.opacity = "1"; - } + if (slab6) slab6.style.opacity = "1"; const slab7 = document.getElementById("slab7"); - if (slab7) { - slab7.style.opacity = "1"; - } - + if (slab7) slab7.style.opacity = "1"; } }); } @@ -178,6 +169,9 @@ export class Uploader extends React.Component { private get uploadInterface() { return (
+
+ +
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index 4000bee85..612b112e6 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import { library } from '@fortawesome/fontawesome-svg-core'; import { - faTasks, faExternalLinkSquareAlt, faMobile, faThLarge, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, + faTasks, faFolderOpen, faAngleDoubleLeft, faExternalLinkSquareAlt, faMobile, faThLarge, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, faTerminal, faToggleOn, faFile as fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard, faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, @@ -25,6 +25,7 @@ import "./MobileInterface.scss"; import "./MobileMenu.scss"; import "./MobileHome.scss"; import "./ImageUpload.scss"; +import "./AudioUpload.scss"; import { DocumentManager } from '../client/util/DocumentManager'; import SettingsManager from '../client/util/SettingsManager'; import { Uploader } from "./ImageUpload"; @@ -39,8 +40,9 @@ import { RadialMenu } from "../client/views/nodes/RadialMenu"; import { UndoManager } from "../client/util/UndoManager"; import { MainView } from "../client/views/MainView"; import { List } from "../fields/List"; +import { AudioUpload } from "./AudioUpload"; -library.add(faTasks, faExternalLinkSquareAlt, faMobile, faThLarge, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, +library.add(faTasks, faFolderOpen, faAngleDoubleLeft, faExternalLinkSquareAlt, faMobile, faThLarge, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, faTerminal, faToggleOn, fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard, faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, @@ -54,17 +56,18 @@ export class MobileInterface extends React.Component { @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; } @observable private mainDoc: any = CurrentUserUtils.setupActiveMobileMenu(this.userDoc); @observable private renderView?: () => JSX.Element; - @observable private sidebarActive: boolean = false; - @observable private imageUploadActive: boolean = false; - @observable private menuListView: boolean = false; - @observable private _ink: boolean = false; - - public _activeDoc: Doc = this.mainDoc; - public _homeDoc: Doc = this.mainDoc; - private _homeMenu: boolean = true; - private _child: Doc | null = null; - private _parents: Array = []; - private _library: Doc = CurrentUserUtils.setupLibrary(this.userDoc); + @observable private sidebarActive: boolean = false; //to toggle sidebar display + @observable private imageUploadActive: boolean = false; //to toggle image upload + @observable private audioUploadActive: boolean = false; + @observable private menuListView: boolean = false; //to switch between menu view (list / icon) + @observable private _ink: boolean = false; //toggle whether ink is being dispalyed + + public _activeDoc: Doc = this.mainDoc; // doc updated as the active mobile page is updated (initially home menu) + public _homeDoc: Doc = this.mainDoc; // home menu as a document + private _homeMenu: boolean = true; // to determine whether currently at home menu + private _child: Doc | null = null; // currently selected document + private _parents: Array = []; // array of parent docs (for pathbar) + private _library: Doc = CurrentUserUtils.setupLibrary(this.userDoc); // to access documents in Dash Web constructor(props: Readonly<{}>) { super(props); @@ -119,7 +122,7 @@ export class MobileInterface extends React.Component { } /** - * Back method for navigating + * Back method for navigating through items */ back = () => { const header = document.getElementById("header") as HTMLElement; @@ -182,7 +185,7 @@ export class MobileInterface extends React.Component { if (this.mainContainer) { const backgroundColor = () => "white"; return ( -
+
window.innerWidth; //The windows width returnHeight = () => (window.innerHeight - 300); //Calculating the windows height (-300 to account for topbar) @@ -224,11 +232,7 @@ export class MobileInterface extends React.Component { handleClick = async (doc: Doc) => { const children = DocListCast(doc.data); if (doc.type !== "collection" && this.sidebarActive) { - this._parents.push(this._activeDoc); - this._activeDoc = doc; - this.switchCurrentView((userDoc: Doc) => doc); - this._homeMenu = false; - this.toggleSidebar(); + this.openFromSidebar(doc); } else if (doc.type === "collection" && children.length === 0) console.log("This collection has no children"); else { this._parents.push(this._activeDoc); @@ -239,6 +243,14 @@ export class MobileInterface extends React.Component { } } + openFromSidebar = (doc: Doc) => { + this._parents.push(this._activeDoc); + this._activeDoc = doc; + this.switchCurrentView((userDoc: Doc) => doc); + this._homeMenu = false; + this.toggleSidebar(); + } + /** * Handles creation of array which is then rendered in renderPathbar() */ @@ -350,14 +362,6 @@ export class MobileInterface extends React.Component {
{this.renderPathbar()} -
); } @@ -377,6 +381,7 @@ export class MobileInterface extends React.Component {
{doc.title}
{doc.type}
+ this.openFromSidebar(doc)} icon="external-link-alt" size="lg" />
); } }); @@ -398,9 +403,13 @@ export class MobileInterface extends React.Component { {this._child ? <> {buttons} -
- Return to library -
+
+ +
Return to library
+
: <> {buttons} @@ -455,7 +464,7 @@ export class MobileInterface extends React.Component { return
@@ -492,21 +501,45 @@ export class MobileInterface extends React.Component { } } + undo = () => { + if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc) { + return (<> +
{ + UndoManager.Undo(); + e.stopPropagation(); + }}> + +
+ ); + } + } + + redo = () => { + if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc) { + return (<> +
{ + UndoManager.Redo(); + e.stopPropagation(); + }}> + +
+ ); + } + } + // Button for switching into ink mode drawInk = () => { if (this._activeDoc._viewType === "docking") { return ( <> - {/*
{ - UndoManager.Undo(); - e.stopPropagation(); - }}> - -
*/}
- {/*
{ - UndoManager.Redo(); - e.stopPropagation(); - }}> - ); + } + } + + // Mobile doc button for uploading + upload = () => { + if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc) { + return ( + <> +
+ -
*/} +
); } } // Button to download images on the mobile downloadDocument = () => { - if (this._activeDoc.type === "image") { + if (this._activeDoc.type === "image" || this._activeDoc.type === "pdf" || this._activeDoc.type === "video") { const url = this._activeDoc["data-path"]?.toString(); return
{ - const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; - const audioDoc = this._activeDoc; - const data = Cast(audioRightSidebar.data, listSpec(Doc)); - - if (data) { - data.push(audioDoc); - } - } + // // Pushing the audio doc onto Dash Web through the right side bar + // uploadAudio = () => { + // const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; + // const audioDoc = this._activeDoc; + // const data = Cast(audioRightSidebar.data, listSpec(Doc)); - panelHeight = () => window.innerHeight; - panelWidth = () => window.innerWidth; + // if (data) { + // data.push(audioDoc); + // } + // } // Button for pinning images to presentation pinToPresentation = () => { // Only making button available if it is an image - if (this._activeDoc.type === "image") { + if (!(this._activeDoc.type === "collection" || this._activeDoc.type === "presentation")) { const isPinned = this._activeDoc && Doc.isDocPinned(this._activeDoc); return
{ if (this._homeDoc._viewType = "stacking") { @@ -635,7 +671,7 @@ export class MobileInterface extends React.Component { } } - // Logics for switching the menu into the stacking view + // Logic for switching the menu into the stacking view @action changeToListView = () => { if (this._homeDoc._viewType = "masonry") { @@ -674,29 +710,16 @@ export class MobileInterface extends React.Component { @action toggleUpload = () => this.imageUploadActive = !this.imageUploadActive + // For toggling image upload pop up + @action + toggleAudio = () => this.audioUploadActive = !this.audioUploadActive + // For closing the image upload pop up @action closeUpload = () => { this.imageUploadActive = false; } - // Returns the image upload pop up - uploadImage = () => { - if (this.imageUploadActive) { - console.log("active"); - } else if (!this.imageUploadActive) { - - } - return ( -
-
- -
- -
- ); - } - displayRadialMenu = () => { if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc) { return ; @@ -713,7 +736,10 @@ export class MobileInterface extends React.Component {
- {this.uploadImage()} + +
+
+
{this.switchMenuView()} {this.inkMenu()} @@ -721,8 +747,11 @@ export class MobileInterface extends React.Component {
{this.pinToPresentation()} {this.downloadDocument()} - {this.drawInk()} - {this.uploadAudioButton()} + {this.undo()} + {this.redo()} + {this.upload()} + {/* {this.drawInk()} */} + {/* {this.uploadAudioButton()} */}
{this.displayWorkspaces()} {this.renderDefaultContent()} @@ -738,7 +767,7 @@ export class MobileInterface extends React.Component { Scripting.addGlobal(function switchMobileView(doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) { return MobileInterface.Instance.switchCurrentView(doc, renderView, onSwitch); }); Scripting.addGlobal(function openMobilePresentation() { return MobileInterface.Instance.setupDefaultPresentation(); }); Scripting.addGlobal(function toggleMobileSidebar() { return MobileInterface.Instance.toggleSidebar(); }); -Scripting.addGlobal(function openMobileAudio() { return MobileInterface.Instance.recordAudio(); }); +Scripting.addGlobal(function openMobileAudio() { return MobileInterface.Instance.toggleAudio(); }); Scripting.addGlobal(function openMobileSettings() { return SettingsManager.Instance.open(); }); Scripting.addGlobal(function switchToLibrary() { return MobileInterface.Instance.switchToLibrary(); }); Scripting.addGlobal(function uploadImageMobile() { return MobileInterface.Instance.toggleUpload(); }); diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss index 6304ff5e4..87731655a 100644 --- a/src/mobile/MobileMenu.scss +++ b/src/mobile/MobileMenu.scss @@ -175,6 +175,11 @@ body { z-index: 200; } +.open { + right: 20px; + position: absolute; +} + .left { width: 100%; height: 100%; @@ -262,15 +267,17 @@ body { .docButton { position: relative; width: 100px; + display: flex; height: 100px; font-size: 70px; - padding: 5px; text-align: center; - border-style: solid; - border-radius: 50px; - border-width: 5px; + border: 3px solid black; margin: 20px; z-index: 100; + border-radius: 100%; + justify-content: center; + flex-direction: column; + align-items: center; } .docButtonContainer { -- cgit v1.2.3-70-g09d2 From 46fa52fa85102d30a3e13a93fb191f12e3e28aa1 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Fri, 19 Jun 2020 17:23:33 -0500 Subject: adding open button and slight change to preview in doc --- .../views/collections/CollectionSchemaCells.tsx | 79 ++++++++++++---------- .../CollectionSchemaMovableTableHOC.tsx | 2 + .../views/collections/CollectionSchemaView.tsx | 3 +- 3 files changed, 47 insertions(+), 37 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index cbee848e6..30278db32 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -3,7 +3,7 @@ import { action, observable, trace, computed } from "mobx"; import { observer } from "mobx-react"; import { CellInfo } from "react-table"; import "react-table/react-table.css"; -import { emptyFunction, returnFalse, returnZero, returnOne, returnEmptyFilter, Utils } from "../../../Utils"; +import { emptyFunction, returnFalse, returnZero, returnOne, returnEmptyFilter, Utils, emptyPath } from "../../../Utils"; import { Doc, DocListCast, Field, Opt } from "../../../fields/Doc"; import { Id } from "../../../fields/FieldSymbols"; import { KeyCodes } from "../../util/KeyCodes"; @@ -31,6 +31,7 @@ import { OverlayView } from "../OverlayView"; import { DocumentIconContainer } from "../nodes/DocumentIcon"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView"; +import ReactDOM from "react-dom"; const path = require('path'); library.add(faExpand); @@ -344,7 +345,7 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { addDocTab: this.props.addDocTab, pinToPres: this.props.pinToPres, ContentScaling: returnOne, - docFilters: [] + docFilters: returnEmptyFilter }; @observable private _field = this.prop.Document[this.prop.fieldKey]; @observable private _doc = FieldValue(Cast(this._field, Doc)); @@ -388,6 +389,7 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { @action onOpenClick = () => { + this._preview = false; if (this._doc) { this.prop.addDocTab(this._doc, "onRight"); return true; @@ -415,42 +417,45 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { return ( -
- {this._preview ? { return false; }} - PanelWidth={() => { return 200 }} - PanelHeight={() => { return 200 }} - ScreenToLocalTransform={this.getPreviewTransform} - docFilters={this.docFilters} - ContainingCollectionDoc={this.props.CollectionView?.props.Document} - ContainingCollectionView={this.props.CollectionView} - moveDocument={this.props.moveDocument} - //addDocument={this.props.addDocument} - //removeDocument={this.props.removeDocument} - parentActive={this.prop.active} - whenActiveChanged={this.prop.whenActiveChanged} - addDocTab={this.props.addDocTab} - pinToPres={this.props.pinToPres} - bringToFront={returnFalse} - ContentScaling={returnOne} +
{ this.showPreview(true); }} + onPointerLeave={() => { this.showPreview(false); }}> - > - : null} + {this._preview ?
false} + PanelWidth={() => 150} + PanelHeight={() => 150} + ScreenToLocalTransform={this.getPreviewTransform} + docFilters={returnEmptyFilter} + ContainingCollectionDoc={this.props.CollectionView?.props.Document} + ContainingCollectionView={this.props.CollectionView} + moveDocument={this.props.moveDocument} + parentActive={this.prop.active} + whenActiveChanged={this.prop.whenActiveChanged} + addDocTab={this.props.addDocTab} + pinToPres={this.props.pinToPres} + bringToFront={returnFalse} + ContentScaling={returnOne}> +
: null}
this._overlayDisposer?.()} ref={this.dropRef} - onClick={() => { this.showPreview(!this._preview) }}> + >
- +
+
); } else { @@ -522,7 +527,8 @@ export class CollectionSchemaImageCell extends CollectionSchemaCell { NativeWidth: returnZero, addDocTab: this.props.addDocTab, pinToPres: this.props.pinToPres, - ContentScaling: returnOne + ContentScaling: returnOne, + docFilters: returnEmptyFilter }; let image = true; @@ -600,7 +606,8 @@ export class CollectionSchemaListCell extends CollectionSchemaCell { NativeWidth: returnZero, addDocTab: this.props.addDocTab, pinToPres: this.props.pinToPres, - ContentScaling: returnOne + ContentScaling: returnOne, + docFilters: returnEmptyFilter }; @observable private _field = this.prop.Document[this.prop.fieldKey]; @observable private _optionsList = this._field as List; diff --git a/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx b/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx index b206765e8..b77173b25 100644 --- a/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx +++ b/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx @@ -137,6 +137,7 @@ export interface MovableRowProps { textWrapRow: (doc: Doc) => void; rowWrapped: boolean; dropAction: string; + addDocTab: any; } export class MovableRow extends React.Component { @@ -232,6 +233,7 @@ export class MovableRow extends React.Component {
this.props.removeDoc(this.props.rowInfo.original))}>
+
this.props.addDocTab(this.props.rowInfo.original, "onRight")}>
{children} diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 86034376d..81dfc9c62 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -407,7 +407,8 @@ export class SchemaTable extends React.Component { rowFocused: !this._headerIsEditing && rowInfo.index === this._focusedCell.row && this.props.isFocused(this.props.Document), textWrapRow: this.toggleTextWrapRow, rowWrapped: this.textWrappedRows.findIndex(id => rowInfo.original[Id] === id) > -1, - dropAction: StrCast(this.props.Document.childDropAction) + dropAction: StrCast(this.props.Document.childDropAction), + addDocTab: this.props.addDocTab }; } -- cgit v1.2.3-70-g09d2 From 6df649ae1228f191a5654e45e898880b130afd28 Mon Sep 17 00:00:00 2001 From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com> Date: Fri, 19 Jun 2020 21:43:56 -0700 Subject: fixed icon appearing over sidebar bug --- src/client/views/GestureOverlay.tsx | 4 ++-- src/mobile/MobileInterface.tsx | 14 +++++++------- 2 files changed, 9 insertions(+), 9 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 1c305ebeb..2121b27f0 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -157,8 +157,8 @@ export default class GestureOverlay extends Touchable { // -- radial menu code -- this._holdTimer = setTimeout(() => { console.log("hold"); - const target = document.elementFromPoint(te.changedTouches.item(0).clientX, te.changedTouches.item(0).clientY); - const pt: any = te.touches[te.touches.length - 1]; + const target = document.elementFromPoint(te.changedTouches?.item(0).clientX, te.changedTouches?.item(0).clientY); + const pt: any = te.touches[te.touches?.length - 1]; if (nts.nt.length === 1 && pt.radiusX > 1 && pt.radiusY > 1) { target?.dispatchEvent( new CustomEvent>("dashOnTouchHoldStart", diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index 2fde359aa..63c7873f4 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -760,15 +760,15 @@ export class MobileInterface extends React.Component {
{this.switchMenuView()} {this.inkMenu()} -
- {this.uploadImageButton()} - {this.pinToPresentation()} - {this.downloadDocument()} - {this.drawInk()} - {this.uploadAudioButton()} -
+
+ {this.uploadImageButton()} + {this.pinToPresentation()} + {this.downloadDocument()} + {this.drawInk()} + {this.uploadAudioButton()} +
{this.displayWorkspaces()} {this.renderDefaultContent()} -- cgit v1.2.3-70-g09d2 From 884e1f73f6a3ff47d286b13ff58166b62026cc18 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sun, 21 Jun 2020 19:46:01 -0500 Subject: changed to previews --- .../views/collections/CollectionSchemaCells.tsx | 54 +++++------------- .../views/collections/CollectionSchemaView.tsx | 66 +++++++++++++++++++++- 2 files changed, 79 insertions(+), 41 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index 30278db32..4231a3941 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -56,6 +56,7 @@ export interface CellProps { setPreviewDoc: (doc: Doc) => void; setComputed: (script: string, doc: Doc, field: string, row: number, col: number) => boolean; getField: (row: number, col?: number) => void; + showDoc: (doc: Doc | undefined, dataDoc?: any, screenX?: number, screenY?: number) => void; } @observer @@ -398,16 +399,18 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { } @action - showPreview = (bool: boolean) => { - console.log("show preview"); - this._preview = bool; - } - - getPreviewTransform = (): Transform => { - return this.prop.ScreenToLocalTransform().translate(- this.borderWidth - 4 - this.tableWidth, - this.borderWidth); + showPreview = (bool: boolean, e: any) => { + if (this._isEditing) { + this._preview = false; + } else { + if (bool) { + this.props.showDoc(this._doc, this.prop.DataDoc, e.screenX, e.screenY); + } else { + this.props.showDoc(undefined); + } + } } - render() { const dragRef: React.RefObject = React.createRef(); @@ -418,38 +421,9 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { return (
{ this.showPreview(true); }} - onPointerLeave={() => { this.showPreview(false); }}> - - {this._preview ?
false} - PanelWidth={() => 150} - PanelHeight={() => 150} - ScreenToLocalTransform={this.getPreviewTransform} - docFilters={returnEmptyFilter} - ContainingCollectionDoc={this.props.CollectionView?.props.Document} - ContainingCollectionView={this.props.CollectionView} - moveDocument={this.props.moveDocument} - parentActive={this.prop.active} - whenActiveChanged={this.prop.whenActiveChanged} - addDocTab={this.props.addDocTab} - pinToPres={this.props.pinToPres} - bringToFront={returnFalse} - ContentScaling={returnOne}> -
: null} + onPointerEnter={(e) => { this.showPreview(true, e); }} + onPointerLeave={(e) => { this.showPreview(false, e); }} + >
void; } + + + + + + + + @observer export class SchemaTable extends React.Component { private DIVIDER_WIDTH = 4; @@ -237,6 +246,10 @@ export class SchemaTable extends React.Component { @observable _focusedCell: { row: number, col: number } = { row: 0, col: 0 }; @observable _openCollections: Array = []; + @observable _showDoc: Doc | undefined; + @observable _showDataDoc: any = ""; + @observable _showDocPos: number[] = []; + @computed get previewWidth() { return () => NumCast(this.props.Document.schemaPreviewWidth); } @computed get previewHeight() { return () => this.props.PanelHeight() - 2 * this.borderWidth; } @computed get tableWidth() { return this.props.PanelWidth() - 2 * this.borderWidth - this.DIVIDER_WIDTH - this.previewWidth(); } @@ -349,6 +362,7 @@ export class SchemaTable extends React.Component { setPreviewDoc: this.props.setPreviewDoc, setComputed: this.setComputed, getField: this.getField, + showDoc: this.showDoc, }; const colType = this.getColumnType(col); @@ -756,8 +770,58 @@ export class SchemaTable extends React.Component { return false; } + + showDoc(doc: Doc | undefined, dataDoc?: Doc, screenX?: number, screenY?: number) { + this._showDoc = doc; + if (dataDoc && screenX && screenY) { + this._showDocPos = this.props.ScreenToLocalTransform().transformPoint(screenX, screenY); + } + } + + @action + onOpenClick = () => { + if (this._showDoc) { + this.props.addDocTab(this._showDoc, "onRight"); + } + } + + getPreviewTransform = (): Transform => { + return this.props.ScreenToLocalTransform().translate(- this.borderWidth - 4 - this.tableWidth, - this.borderWidth); + } + render() { + + const preview = ""; + return
this.props.active(true) && e.stopPropagation()} onDrop={e => this.props.onDrop(e, {})} onContextMenu={this.onContextMenu} > + {this._showDoc ?
{ this.onOpenClick(); }} style={{ + position: "absolute", transform: `translate(${this._showDocPos[0]}, ${this._showDocPos[1]})` + }} + ref="overlay"> false} + PanelWidth={() => 150} + PanelHeight={() => 150} + ScreenToLocalTransform={this.getPreviewTransform} + docFilters={returnEmptyFilter} + ContainingCollectionDoc={this.props.CollectionView?.props.Document} + ContainingCollectionView={this.props.CollectionView} + moveDocument={this.props.moveDocument} + parentActive={this.props.active} + whenActiveChanged={emptyFunction} + addDocTab={this.props.addDocTab} + pinToPres={this.props.pinToPres} + bringToFront={returnFalse} + ContentScaling={returnOne}> +
: null} {this.reactTable}
this.createRow()}>+ new
; -- cgit v1.2.3-70-g09d2 From 2e41227b586e6ad7f9f9f83154011ea33b27b38c Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sun, 21 Jun 2020 22:07:01 -0400 Subject: fixed actions --- .../views/collections/CollectionSchemaView.tsx | 61 ++++++++++------------ 1 file changed, 29 insertions(+), 32 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 334897028..a79b790f5 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -770,7 +770,7 @@ export class SchemaTable extends React.Component { return false; } - + @action showDoc(doc: Doc | undefined, dataDoc?: Doc, screenX?: number, screenY?: number) { this._showDoc = doc; if (dataDoc && screenX && screenY) { @@ -778,7 +778,6 @@ export class SchemaTable extends React.Component { } } - @action onOpenClick = () => { if (this._showDoc) { this.props.addDocTab(this._showDoc, "onRight"); @@ -790,38 +789,36 @@ export class SchemaTable extends React.Component { } render() { - const preview = ""; - return
this.props.active(true) && e.stopPropagation()} onDrop={e => this.props.onDrop(e, {})} onContextMenu={this.onContextMenu} > - {this._showDoc ?
{ this.onOpenClick(); }} style={{ - position: "absolute", transform: `translate(${this._showDocPos[0]}, ${this._showDocPos[1]})` - }} - ref="overlay"> false} - PanelWidth={() => 150} - PanelHeight={() => 150} - ScreenToLocalTransform={this.getPreviewTransform} - docFilters={returnEmptyFilter} - ContainingCollectionDoc={this.props.CollectionView?.props.Document} - ContainingCollectionView={this.props.CollectionView} - moveDocument={this.props.moveDocument} - parentActive={this.props.active} - whenActiveChanged={emptyFunction} - addDocTab={this.props.addDocTab} - pinToPres={this.props.pinToPres} - bringToFront={returnFalse} - ContentScaling={returnOne}> -
: null} + {!this._showDoc ? (null) : +
{ this.onOpenClick(); }} style={{ position: "absolute", transform: `translate(${this._showDocPos[0]}, ${this._showDocPos[1]})` }} + ref="overlay"> false} + PanelWidth={() => 150} + PanelHeight={() => 150} + ScreenToLocalTransform={this.getPreviewTransform} + docFilters={returnEmptyFilter} + ContainingCollectionDoc={this.props.CollectionView?.props.Document} + ContainingCollectionView={this.props.CollectionView} + moveDocument={this.props.moveDocument} + parentActive={this.props.active} + whenActiveChanged={emptyFunction} + addDocTab={this.props.addDocTab} + pinToPres={this.props.pinToPres} + bringToFront={returnFalse} + ContentScaling={returnOne}> + +
} {this.reactTable}
this.createRow()}>+ new
; -- cgit v1.2.3-70-g09d2 From e2621ee4e1e1094306f02a5f8db7a80c9c5b1d39 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sun, 21 Jun 2020 22:45:53 -0400 Subject: fixed schema preview doc bug. --- src/client/views/collections/CollectionSchemaView.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index a79b790f5..196ebbdc6 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -771,7 +771,7 @@ export class SchemaTable extends React.Component { } @action - showDoc(doc: Doc | undefined, dataDoc?: Doc, screenX?: number, screenY?: number) { + showDoc = (doc: Doc | undefined, dataDoc?: Doc, screenX?: number, screenY?: number) => { this._showDoc = doc; if (dataDoc && screenX && screenY) { this._showDocPos = this.props.ScreenToLocalTransform().transformPoint(screenX, screenY); @@ -792,7 +792,8 @@ export class SchemaTable extends React.Component { const preview = ""; return
this.props.active(true) && e.stopPropagation()} onDrop={e => this.props.onDrop(e, {})} onContextMenu={this.onContextMenu} > {!this._showDoc ? (null) : -
{ this.onOpenClick(); }} style={{ position: "absolute", transform: `translate(${this._showDocPos[0]}, ${this._showDocPos[1]})` }} +
{ this.onOpenClick(); }} + style={{ position: "absolute", width: 400, height: 300, transform: `translate(${this._showDocPos[0]}px, ${this._showDocPos[1]}px)` }} ref="overlay"> Date: Mon, 22 Jun 2020 14:55:00 +0800 Subject: updated css width property for mobile --- src/client/util/CurrentUserUtils.ts | 2 +- src/client/util/SettingsManager.scss | 2 +- src/client/views/AntimodeMenu.scss | 16 ++-- .../views/collections/CollectionStackingView.scss | 2 +- .../views/collections/CollectionViewChromes.scss | 2 +- .../collectionFreeForm/InkOptionsMenu.scss | 18 ++-- src/client/views/nodes/AudioBox.scss | 2 +- src/client/views/nodes/PDFBox.scss | 2 +- src/client/views/nodes/PresBox.scss | 2 +- .../views/presentationview/PresElementBox.scss | 2 +- src/mobile/AudioUpload.scss | 95 ---------------------- src/mobile/MobileInterface.tsx | 10 +-- src/mobile/MobileMenu.scss | 24 ++++-- 13 files changed, 45 insertions(+), 134 deletions(-) (limited to 'src/client/views') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index b7da4ae2f..5edb2225f 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -465,7 +465,7 @@ export class CurrentUserUtils { static setupMobileButtons(doc?: Doc, buttons?: string[]) { const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, info: string, dragFactory?: Doc }[] = [ - { title: "LIBRARY", icon: "bars", click: 'switchToLibrary()', backgroundColor: "#ffd6d6", info: "Navigate and access all of your documents within their respective collections." }, + { title: "WORKSPACES", icon: "folder-open", click: 'openWorkspaces()', backgroundColor: "#ffd6d6", info: "Access your Workspaces from your mobile, and navigate through all of your documents. " }, { title: "RECORD", icon: "microphone", click: 'openMobileAudio()', backgroundColor: "#ffbfbf", info: "Use your phone to record and upload audio onto Dash Web." }, { title: "UPLOAD", icon: "upload", click: 'uploadImageMobile()', backgroundColor: "#ff9e9e", info: "Upload images or videos from your mobile device so they can be accessed on Dash Web." }, { title: "PRESENTATION", icon: "desktop", click: 'openMobilePresentation()', backgroundColor: "#ff8080", info: "Use your phone as a remote for you presentation." }, diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index 1eac9303b..0116c5294 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -135,7 +135,7 @@ } } -@media only screen and (max-width: 1000px) { +@media only screen and (max-device-width: 480px) { .settings-interface { background-color: whitesmoke !important; color: grey; diff --git a/src/client/views/AntimodeMenu.scss b/src/client/views/AntimodeMenu.scss index 170631422..43f45fb1c 100644 --- a/src/client/views/AntimodeMenu.scss +++ b/src/client/views/AntimodeMenu.scss @@ -41,7 +41,7 @@ } } -@media only screen and (max-width: 1000px) { +@media only screen and (max-device-width: 480px) { .antimodeMenu-cont { position: absolute; z-index: 10000; @@ -51,31 +51,31 @@ border-radius: 0px 6px 6px 6px; // overflow: hidden; display: flex; - + &.with-rows { flex-direction: column-reverse; } - + .antimodeMenu-row { display: flex; height: 100%; - width:100%; + width: 100%; } - + .antimodeMenu-button { background-color: transparent; width: 100px; height: 100px; - + &.active { background-color: #121212; } } - + .antimodeMenu-button:hover { background-color: #121212; } - + .antimodeMenu-dragger { height: 100%; transition: width .2s; diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss index 98efdfd23..342773db8 100644 --- a/src/client/views/collections/CollectionStackingView.scss +++ b/src/client/views/collections/CollectionStackingView.scss @@ -424,7 +424,7 @@ } } -@media only screen and (max-width: 1000px) { +@media only screen and (max-device-width: 480px) { .collectionStackingView .collectionStackingView-columnDragger, .collectionMasonryView .collectionStackingView-columnDragger { diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index 54ee4ab3b..ec2d78735 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -80,7 +80,7 @@ // margin-top: 10px; } - @media only screen and (max-width: 1000) { + @media only screen and (max-device-width: 480px) { .collectionViewBaseChrome-collapse { display: none; } diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss index 72fdf5af9..4855dfea8 100644 --- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss +++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss @@ -33,39 +33,39 @@ } } -@media only screen and (max-width: 1000px) { +@media only screen and (max-device-width: 480px) { .antimodeMenu-button { .color-preview { width: 100%; height: 100%; } - + } - + .sketch-picker { background: #323232; - + .flexbox-fit { background: #323232; } } - + .btn-group { display: grid; grid-template-columns: auto auto; /* Make the buttons appear below each other */ } - + .btn2-group { display: block; background: #323232; grid-template-columns: auto; - + /* Make the buttons appear below each other */ .antimodeMenu-button { background: #323232; display: block; - + } } -} +} \ No newline at end of file diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index 61ce4bd13..43dd698ad 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -174,7 +174,7 @@ } -@media only screen and (max-width: 1000px) { +@media only screen and (max-device-width: 480px) { .audiobox-container, .audiobox-container-interactive { diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss index 1a31d2916..b19ddf1f5 100644 --- a/src/client/views/nodes/PDFBox.scss +++ b/src/client/views/nodes/PDFBox.scss @@ -224,7 +224,7 @@ } } -@media only screen and (max-width: 600px) { +@media only screen and (max-device-width: 480px) { .pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton, .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton { diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index e62aa48fb..1261cbfdd 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -81,7 +81,7 @@ } } -@media only screen and (max-width: 1000px) { +@media only screen and (max-device-width: 480px) { .presBox-cont .presBox-buttons { position: absolute; top: 70%; diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index 99fe2a3ba..79532995e 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -106,7 +106,7 @@ z-index: 2; } -@media only screen and (max-width: 1000px) { +@media only screen and (max-device-width: 480px) { .presElementBox-buttons { display: inline-flex; position: relative; diff --git a/src/mobile/AudioUpload.scss b/src/mobile/AudioUpload.scss index 5f0ba465a..9fe442e55 100644 --- a/src/mobile/AudioUpload.scss +++ b/src/mobile/AudioUpload.scss @@ -7,77 +7,6 @@ align-items: center; max-width: 400px; min-width: 400px; - - .upload_label { - font-size: 3em; - font-weight: 700; - color: white; - background-color: black; - display: inline-block; - margin: 10; - width: 100%; - border-radius: 10px; - } - - .file { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - direction: ltr; - } - - .upload_label:hover { - background-color: darkred; - } - - .button_file { - text-align: center; - height: 50%; - width: 50%; - background-color: paleturquoise; - color: grey; - font-size: 3em; - } - - .inputfile { - width: 0.1px; - height: 0.1px; - opacity: 0; - overflow: hidden; - position: absolute; - z-index: -1; - } - - .inputfile+label { - font-size: 3em; - font-weight: 700; - color: white; - background-color: black; - display: inline-block; - margin: 10px; - width: 100%; - border-radius: 10px; - } - - .inputfile:focus+label, - .inputfile+label:hover { - background-color: darkred; - } - - .status { - font-size: 2em; - } - -} - -.backgroundUpload { - height: 100vh; - top: 0; - z-index: 999; - width: 100vw; - position: absolute; - background-color: lightgrey; - opacity: 0.4; } .audio-upload { @@ -92,28 +21,4 @@ height: 100vh; width: 100vw; opacity: 1; -} - -.uploadContainer { - top: 40; - position: absolute; - z-index: 1000; - height: 20vh; - width: 80vw; - opacity: 1; -} - -.loadingImage { - display: inline-flex; - width: max-content; -} - -.loadingSlab { - position: relative; - width: 30px; - height: 30px; - margin: 10; - border-radius: 20px; - opacity: 0.3; - background-color: black; } \ No newline at end of file diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index 84a5975cb..ceda74da2 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -415,7 +415,7 @@ export class MobileInterface extends React.Component { onClick={this.returnMain} style={{ opacity: 0.7 }}> -
Return to library
+
Return to workspaces
: <> @@ -509,7 +509,7 @@ export class MobileInterface extends React.Component { } undo = () => { - if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc) { + if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc && this._activeDoc.title !== "WORKSPACES") { return (<>
{ - if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc) { + if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc && this._activeDoc.title !== "WORKSPACES") { return (<>
{this.displayWorkspaces()} diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss index 87731655a..53bc48034 100644 --- a/src/mobile/MobileMenu.scss +++ b/src/mobile/MobileMenu.scss @@ -19,7 +19,6 @@ body { width: 100vw; height: $navbar-height; background-color: whitesmoke; - border-bottom: 5px solid black; z-index: 150; } @@ -221,14 +220,17 @@ body { .back { position: absolute; - top: 44%; left: 42px; - background-color: black; + top: 0; + background: #1a1a1a; width: 50px; - height: 50px; + height: 100%; + display: flex; + justify-content: center; text-align: center; + flex-direction: column; + align-items: center; border-radius: 10px; - transform: translate(0, -50%); font-size: 25px; user-select: none; z-index: 100; @@ -243,7 +245,7 @@ body { border-radius: 0px; width: 100%; height: 80px; - transition: all 400ms ease 50ms; + overflow: hidden; } .pathname { @@ -291,14 +293,19 @@ body { .scrollmenu { overflow: auto; + width: 100%; + height: 100%; white-space: nowrap; + display: inline-flex; } .pathbarItem { position: relative; - display: inline-flex; + display: flex; + align-items: center; color: whitesmoke; text-align: center; + justify-content: center; user-select: none; transform: translate(100px, 0px); font-size: 30px; @@ -311,7 +318,6 @@ body { text-align: center; height: 50px; padding: 10px; - background-color: rgb(48, 40, 40); font-size: 30px; border-radius: 10px; text-transform: uppercase; @@ -321,7 +327,7 @@ body { .pathIcon { - transform: translate(0px, 8px); + transform: translate(0px, 0px); position: relative; } -- cgit v1.2.3-70-g09d2 From cec8cc0d8444b0321ec95a49d91a77a926462900 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 22 Jun 2020 14:22:23 -0500 Subject: more with previews --- .../views/collections/CollectionSchemaCells.tsx | 35 +++++++++++++++++++--- .../views/collections/CollectionSchemaView.scss | 4 +++ .../views/collections/CollectionSchemaView.tsx | 11 ++++--- 3 files changed, 42 insertions(+), 8 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index 4231a3941..b9be3b64f 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -404,13 +404,37 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { this._preview = false; } else { if (bool) { - this.props.showDoc(this._doc, this.prop.DataDoc, e.screenX, e.screenY); + console.log("show doc"); + this.props.showDoc(this._doc, this.prop.DataDoc, e.screenX - 230, e.screenY - 570); } else { + console.log("no doc"); this.props.showDoc(undefined); } } } + onDown = (e: any) => { + this.props.changeFocusedCellByIndex(this.props.row, this.props.col); + this.props.setPreviewDoc(this.props.rowProps.original); + + let url: string; + if (url = StrCast(this.props.rowProps.row.href)) { + try { + new URL(url); + const temp = window.open(url)!; + temp.blur(); + window.focus(); + } catch { } + } + + const field = this.props.rowProps.original[this.props.rowProps.column.id!]; + const doc = FieldValue(Cast(field, Doc)); + if (typeof field === "object" && doc) this.props.setPreviewDoc(doc); + + this.showPreview(true, e); + + } + render() { const dragRef: React.RefObject = React.createRef(); @@ -420,9 +444,12 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { return ( -
{ this.showPreview(true, e); }} - onPointerLeave={(e) => { this.showPreview(false, e); }} +
{ this.onDown(e); }} + // onFocus={(e) => this.showPreview(true, e)} + onMouseEnter={(e) => { this.showPreview(true, e); }} + // onBlur={(e) => { console.log("Blur"); this.showPreview(false, e) }} + onMouseLeave={(e) => { this.showPreview(false, e); }} >
{ render() { const preview = ""; return
this.props.active(true) && e.stopPropagation()} onDrop={e => this.props.onDrop(e, {})} onContextMenu={this.onContextMenu} > + {this.reactTable} +
this.createRow()}>+ new
{!this._showDoc ? (null) : -
{ this.onOpenClick(); }} - style={{ position: "absolute", width: 400, height: 300, transform: `translate(${this._showDocPos[0]}px, ${this._showDocPos[1]}px)` }} +
{ this.onOpenClick(); }} + style={{ + position: "absolute", width: 400, height: 300, + transform: `translate(${this._showDocPos[0]}px, ${this._showDocPos[1]}px)` + }} ref="overlay"> { ContentScaling={returnOne}>
} - {this.reactTable} -
this.createRow()}>+ new
; } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 97090506ca22ce2f96b0c0cb44bf30b3c17f7b90 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Mon, 22 Jun 2020 17:14:33 -0400 Subject: fixed display of document preview for schema view --- src/client/views/collections/CollectionSchemaCells.tsx | 8 ++++---- src/client/views/collections/CollectionSchemaView.tsx | 5 +++-- 2 files changed, 7 insertions(+), 6 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index b9be3b64f..7b76a5c84 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -405,7 +405,7 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { } else { if (bool) { console.log("show doc"); - this.props.showDoc(this._doc, this.prop.DataDoc, e.screenX - 230, e.screenY - 570); + this.props.showDoc(this._doc, this.prop.DataDoc, e.clientX, e.clientY); } else { console.log("no doc"); this.props.showDoc(undefined); @@ -445,11 +445,11 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { return (
{ this.onDown(e); }} + onPointerDown={(e) => { this.onDown(e); }} // onFocus={(e) => this.showPreview(true, e)} - onMouseEnter={(e) => { this.showPreview(true, e); }} + onPointerEnter={(e) => { this.showPreview(true, e); }} // onBlur={(e) => { console.log("Blur"); this.showPreview(false, e) }} - onMouseLeave={(e) => { this.showPreview(false, e); }} + onPointerLeave={(e) => { this.showPreview(false, e); }} >
{ {!this._showDoc ? (null) :
{ this.onOpenClick(); }} style={{ - position: "absolute", width: 400, height: 300, - transform: `translate(${this._showDocPos[0]}px, ${this._showDocPos[1]}px)` + position: "absolute", width: 150, height: 150, + background: "dimGray", display: "block", top: 0, left: 0, + transform: `translate(${this._showDocPos[0]}px, ${this._showDocPos[1] - 180}px)` }} ref="overlay"> Date: Mon, 22 Jun 2020 16:58:31 -0500 Subject: tweaks to preview --- .../views/collections/CollectionSchemaCells.tsx | 26 ++++++++++++---------- 1 file changed, 14 insertions(+), 12 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index 7b76a5c84..6f43a2097 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -382,8 +382,6 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { } onFocus = () => { - - console.log(this._field); this._overlayDisposer?.(); this._overlayDisposer = OverlayView.Instance.addElement(, { x: 0, y: 0 }); } @@ -413,6 +411,16 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { } } + @action + isEditingCalling = (isEditing: boolean): void => { + this.showPreview(false, ""); + document.removeEventListener("keydown", this.onKeyDown); + isEditing && document.addEventListener("keydown", this.onKeyDown); + this._isEditing = isEditing; + this.props.setIsEditing(isEditing); + this.props.changeFocusedCellByIndex(this.props.row, this.props.col); + } + onDown = (e: any) => { this.props.changeFocusedCellByIndex(this.props.row, this.props.col); this.props.setPreviewDoc(this.props.rowProps.original); @@ -436,31 +444,24 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { } render() { - - const dragRef: React.RefObject = React.createRef(); - const reference = React.createRef(); - if (typeof this._field === "object" && this._doc && this._docTitle) { - - return (
{ this.onDown(e); }} - // onFocus={(e) => this.showPreview(true, e)} onPointerEnter={(e) => { this.showPreview(true, e); }} - // onBlur={(e) => { console.log("Blur"); this.showPreview(false, e) }} onPointerLeave={(e) => { this.showPreview(false, e); }} >
this._overlayDisposer?.()} ref={this.dropRef} + onFocus={this.onFocus} + onBlur={() => this._overlayDisposer?.()} > { this.onSetValue(value); + this.showPreview(false, ""); return true; })} /> -- cgit v1.2.3-70-g09d2 From 6d6475816cebfd9e2921fe817f359c49f22b70d6 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Tue, 23 Jun 2020 13:54:30 +0800 Subject: ink menu UI change --- src/client/views/AntimodeMenu.scss | 1 + src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) (limited to 'src/client/views') diff --git a/src/client/views/AntimodeMenu.scss b/src/client/views/AntimodeMenu.scss index 43f45fb1c..934d819cc 100644 --- a/src/client/views/AntimodeMenu.scss +++ b/src/client/views/AntimodeMenu.scss @@ -46,6 +46,7 @@ position: absolute; z-index: 10000; height: 100px; + width: 100vw; background: #323232; box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); border-radius: 0px 6px 6px 6px; diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss index 4855dfea8..9ad4d5079 100644 --- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss +++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.scss @@ -35,6 +35,8 @@ @media only screen and (max-device-width: 480px) { .antimodeMenu-button { + font-size: 50%; + .color-preview { width: 100%; height: 100%; @@ -65,7 +67,7 @@ .antimodeMenu-button { background: #323232; display: block; - + font-size: 50%; } } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 45e3384b31ed2816e6846c2ff545fe55dc155339 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Tue, 23 Jun 2020 16:41:07 -0500 Subject: minor changes --- .../views/collections/CollectionSchemaCells.tsx | 33 +++++++++--- .../views/collections/CollectionSchemaHeaders.tsx | 10 ++++ .../views/collections/CollectionSchemaView.scss | 4 ++ .../views/collections/CollectionSchemaView.tsx | 63 +++++++++++++++------- 4 files changed, 85 insertions(+), 25 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index 6f43a2097..a79360a20 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -94,6 +94,7 @@ export class CollectionSchemaCell extends React.Component { @action onPointerDown = async (e: React.PointerEvent): Promise => { + this.props.changeFocusedCellByIndex(this.props.row, this.props.col); this.props.setPreviewDoc(this.props.rowProps.original); @@ -239,10 +240,14 @@ export class CollectionSchemaCell extends React.Component { // ); trace(); + + return (
+ + { height={"auto"} maxHeight={Number(MAX_ROW_HEIGHT)} GetValue={() => { - const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey])); - const cscript = cfield instanceof ComputedField ? cfield.script.originalScript : undefined; - const cfinalScript = cscript?.split("return")[cscript.split("return").length - 1]; - const val = cscript !== undefined ? `:=${cfinalScript?.substring(0, cfinalScript.length - 2)}` : - Field.IsField(cfield) ? Field.toScriptString(cfield) : ""; - return val; + if (type === "number" && (contents === 0 || contents === "0")) { + return "0"; + } else { + const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey])); + console.log(cfield); + if (type === "number") { + return StrCast(cfield); + } + const cscript = cfield instanceof ComputedField ? cfield.script.originalScript : undefined; + const cfinalScript = cscript?.split("return")[cscript.split("return").length - 1]; + const val = cscript !== undefined ? `:=${cfinalScript?.substring(0, cfinalScript.length - 2)}` : + Field.IsField(cfield) ? Field.toScriptString(cfield) : ""; + return val; + } + }} SetValue={action((value: string) => { let retVal = false; + if (value.startsWith(":=")) { retVal = this.props.setComputed(value.substring(2), props.Document, this.props.rowProps.column.id!, this.props.row, this.props.col); } else { const script = CompileScript(value, { requiredType: type, typecheck: false, editable: true, addReturn: true, params: { this: Doc.name, $r: "number", $c: "number", $: "any" } }); if (script.compiled) { retVal = this.applyToDoc(props.Document, this.props.row, this.props.col, script.run); + console.log("compiled"); } + } if (retVal) { this._isEditing = false; // need to set this here. otherwise, the assignment of the field will invalidate & cause render() to be called with the wrong value for 'editing' this.props.setIsEditing(false); } return retVal; + + //return true; })} OnFillDown={async (value: string) => { const script = CompileScript(value, { requiredType: type, typecheck: false, editable: true, addReturn: true, params: { this: Doc.name, $r: "number", $c: "number", $: "any" } }); @@ -284,6 +303,8 @@ export class CollectionSchemaCell extends React.Component { } }} /> + +
{/* {fieldIsDoc ? docExpander : null} */}
diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index 0d6cf4474..d9a27f355 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -73,6 +73,16 @@ export class CollectionSchemaAddColumnHeader extends React.Component { private DIVIDER_WIDTH = 4; @@ -320,19 +316,48 @@ export class SchemaTable extends React.Component { } const cols = this.columns.map(col => { - const header = c.heading)} - keyType={this.getColumnType(col)} - typeConst={columnTypes.get(col.heading) !== undefined} - onSelect={this.changeColumns} - setIsEditing={this.setHeaderIsEditing} - deleteColumn={this.deleteColumn} - setColumnType={this.setColumnType} - setColumnSort={this.setColumnSort} - setColumnColor={this.setColumnColor} - />; + + const icon: IconProp = this.getColumnType(col) === ColumnType.Number ? "hashtag" : this.getColumnType(col) === ColumnType.String ? "font" : + this.getColumnType(col) === ColumnType.Boolean ? "check-square" : this.getColumnType(col) === ColumnType.Doc ? "file" : + this.getColumnType(col) === ColumnType.Image ? "image" : this.getColumnType(col) === ColumnType.List ? "list-ul" : "align-justify"; + + + + const header =
+ c.heading)} + // keyType={this.getColumnType(col)} + typeConst={columnTypes.get(col.heading) !== undefined} + menuButtonContent={
{col.heading}
} + addNew={false} + onSelect={this.changeColumns} + setIsEditing={this.setHeaderIsEditing} + deleteColumn={this.deleteColumn} + onlyShowOptions={false} + setColumnType={this.setColumnType} + setColumnSort={this.setColumnSort} + setColumnColor={this.setColumnColor} + /> +
; + + + // c.heading)} + // keyType={this.getColumnType(col)} + // typeConst={columnTypes.get(col.heading) !== undefined} + // onSelect={this.changeColumns} + // setIsEditing={this.setHeaderIsEditing} + // deleteColumn={this.deleteColumn} + // setColumnType={this.setColumnType} + // setColumnSort={this.setColumnSort} + // setColumnColor={this.setColumnColor} + // />; + return { Header: , -- cgit v1.2.3-70-g09d2 From d58958cbfe763cf5b56eda36c608cb6059445391 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Tue, 23 Jun 2020 17:06:34 -0500 Subject: fixing 0 bug in number cells --- src/client/views/EditableView.tsx | 4 ++-- src/client/views/collections/CollectionSchemaCells.tsx | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index ee3ce1cf3..afe9321f4 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -172,7 +172,8 @@ export class EditableView extends React.Component { onChange: this.props.autosuggestProps.onChange }} /> - : { ref={this._ref} style={{ display: this.props.display, minHeight: "20px", height: `${this.props.height ? this.props.height : "auto"}`, maxHeight: `${this.props.maxHeight}` }} onClick={this.onClick} placeholder={this.props.placeholder}> - {this.props.contents ? this.props.contents?.valueOf() : this.props.placeholder?.valueOf()}
); diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index a79360a20..593962e73 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -252,9 +252,11 @@ export class CollectionSchemaCell extends React.Component { editing={this._isEditing} isEditingCallback={this.isEditingCallback} display={"inline"} - contents={contents} + contents={contents ? contents : type === "number" ? "0" : "undefined"} + //contents={StrCast(contents)} height={"auto"} maxHeight={Number(MAX_ROW_HEIGHT)} + placeholder={"enter value"} GetValue={() => { if (type === "number" && (contents === 0 || contents === "0")) { return "0"; -- cgit v1.2.3-70-g09d2 From 161d71258b636178f3e160dc66143d5df1ebb5ed Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Wed, 24 Jun 2020 19:48:09 -0500 Subject: restructure of schema view class and menus --- .../views/collections/CollectionSchemaView.scss | 5 + .../views/collections/CollectionSchemaView.tsx | 943 +++++++++++++++++++-- 2 files changed, 898 insertions(+), 50 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 1463cdb3c..a0bbae88f 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -63,6 +63,7 @@ margin-left: 50px; z-index: 10000; + overflow-y: visible; &.-header { font-size: 12px; @@ -179,11 +180,15 @@ .collectionSchemaView-header { height: 100%; color: gray; + z-index: 10000; + overflow-y: visible; .collectionSchema-header-menu { height: 100%; + z-index: 10000; .collectionSchema-header-toggler { + z-index: 10000; width: 100%; height: 100%; padding: 4px; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 9c4ec7021..18a53541d 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -10,7 +10,7 @@ import { Doc, DocListCast, Field, Opt } from "../../../fields/Doc"; import { Id } from "../../../fields/FieldSymbols"; import { List } from "../../../fields/List"; import { listSpec } from "../../../fields/Schema"; -import { SchemaHeaderField } from "../../../fields/SchemaHeaderField"; +import { SchemaHeaderField, PastelSchemaPalette } from "../../../fields/SchemaHeaderField"; import { ComputedField } from "../../../fields/ScriptField"; import { Cast, FieldValue, NumCast, StrCast, BoolCast } from "../../../fields/Types"; import { Docs, DocumentOptions } from "../../documents/Documents"; @@ -21,7 +21,7 @@ import { COLLECTION_BORDER_WIDTH } from '../../views/globalCssVariables.scss'; import { ContextMenu } from "../ContextMenu"; import '../DocumentDecorations.scss'; import { CellProps, CollectionSchemaCell, CollectionSchemaCheckboxCell, CollectionSchemaDocCell, CollectionSchemaNumberCell, CollectionSchemaStringCell, CollectionSchemaImageCell, CollectionSchemaListCell } from "./CollectionSchemaCells"; -import { CollectionSchemaAddColumnHeader, CollectionSchemaHeader, CollectionSchemaColumnMenu } from "./CollectionSchemaHeaders"; +import { CollectionSchemaAddColumnHeader, CollectionSchemaHeader, CollectionSchemaColumnMenu, KeysDropdown } from "./CollectionSchemaHeaders"; import { MovableColumn, MovableRow } from "./CollectionSchemaMovableTableHOC"; import "./CollectionSchemaView.scss"; import { CollectionSubView } from "./CollectionSubView"; @@ -29,7 +29,6 @@ import { CollectionView } from "./CollectionView"; import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView"; import { setupMoveUpEvents, emptyFunction, returnZero, returnOne, returnFalse, returnEmptyFilter, emptyPath } from "../../../Utils"; import { SnappingManager } from "../../util/SnappingManager"; -import ReactDOM from "react-dom"; library.add(faCog, faPlus, faSortUp, faSortDown); library.add(faTable); @@ -65,6 +64,781 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @computed get tableWidth() { return this.props.PanelWidth() - 2 * this.borderWidth - this.DIVIDER_WIDTH - this.previewWidth(); } @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); } + @observable pointerX: number = 0; + @observable pointerY: number = 0; + @computed get menuCoordinates() { return this.props.ScreenToLocalTransform().transformPoint(this.pointerX, this.pointerY); } + + @observable col: any = ""; + @computed get possibleKeys() { return this.documentKeys.filter(key => this.columns.findIndex(existingKey => existingKey.heading.toUpperCase() === key.toUpperCase()) === -1); } + + @observable menuContent: any = ""; + @observable headerOpen: boolean = false; + + @observable private _isOpen: boolean = false; + @observable private _node: HTMLDivElement | null = null; + + componentDidMount() { + document.addEventListener("pointerdown", this.detectClick); + document.addEventListener("keydown", this.onKeyDown); + } + + componentWillUnmount() { + document.removeEventListener("pointerdown", this.detectClick); + document.removeEventListener("keydown", this.onKeyDown); + } + + detectClick = (e: PointerEvent): void => { + if (this._node && this._node.contains(e.target as Node)) { + } else { + this._isOpen = false; + this.setHeaderIsEditing(false); + } + } + + @action + toggleIsOpen = (): void => { + this._isOpen = !this._isOpen; + this.setHeaderIsEditing(this._isOpen); + } + + changeColumnType = (type: ColumnType, col: any): void => { + this.setColumnType(col, type); + } + + changeColumnSort = (desc: boolean | undefined, col: any): void => { + this.setColumnSort(col, desc); + } + + changeColumnColor = (color: string, col: any): void => { + this.setColumnColor(col, color); + } + + @action + setNode = (node: HTMLDivElement): void => { + if (node) { + this._node = node; + } + } + + renderTypes = (col: any) => { + if (columnTypes.get(col.heading)) return <>; + + const type = col.type; + return ( +
+ +
+
this.changeColumnType(ColumnType.Any, col)}> + + Any +
+
this.changeColumnType(ColumnType.Number, col)}> + + Number +
+
this.changeColumnType(ColumnType.String, col)}> + + Text +
+
this.changeColumnType(ColumnType.Boolean, col)}> + + Checkbox +
+
this.changeColumnType(ColumnType.List, col)}> + + List +
+
this.changeColumnType(ColumnType.Doc, col)}> + + Document +
+
this.changeColumnType(ColumnType.Image, col)}> + + Image +
+
+
+ ); + } + + renderSorting = (col: any) => { + const sort = col.desc; + return ( +
+ +
+
this.changeColumnSort(true, col)}> + + Sort descending +
+
this.changeColumnSort(false, col)}> + + Sort ascending +
+
this.changeColumnSort(undefined, col)}> + + Clear sorting +
+
+
+ ); + } + + renderColors = (col: any) => { + const selected = col.color; + + const pink = PastelSchemaPalette.get("pink2"); + const purple = PastelSchemaPalette.get("purple2"); + const blue = PastelSchemaPalette.get("bluegreen1"); + const yellow = PastelSchemaPalette.get("yellow4"); + const red = PastelSchemaPalette.get("red2"); + const gray = "#f1efeb"; + + return ( +
+ +
+
this.changeColumnColor(pink!, col)}>
+
this.changeColumnColor(purple!, col)}>
+
this.changeColumnColor(blue!, col)}>
+
this.changeColumnColor(yellow!, col)}>
+
this.changeColumnColor(red!, col)}>
+
this.changeColumnColor(gray, col)}>
+
+
+ ); + } + + renderContent = (col: any) => { + return ( +
+
+ + c.heading)} + canAddNew={true} + addNew={false} + onSelect={this.changeColumns} + setIsEditing={this.setHeaderIsEditing} + /> +
+ {false ? <> : + <> + {this.renderTypes(col)} + {this.renderSorting(col)} + {this.renderColors(col)} +
+ +
+ + } +
+ ); + } + + + //anchorPoints.TOP_CENTER + + @computed get renderMenu() { + return ( +
+ {/* +
this.toggleIsOpen()}>{this.menuContent}
+ */} + {this.renderContent(this.col)} +
+ ); + } + + + + + + + + + + + + + + // ADDED START HEREE + // + // + // + + @observable _headerIsEditing: boolean = false; + @observable _cellIsEditing: boolean = false; + @observable _focusedCell: { row: number, col: number } = { row: 0, col: 0 }; + @observable _openCollections: Array = []; + + @observable _showDoc: Doc | undefined; + @observable _showDataDoc: any = ""; + @observable _showDocPos: number[] = []; + + @computed get columns() { + return Cast(this.props.Document.schemaColumns, listSpec(SchemaHeaderField), []); + } + set columns(columns: SchemaHeaderField[]) { + this.props.Document.schemaColumns = new List(columns); + } + + // @computed get childDocs() { + // if (this.childDocs) return this.childDocs; + + // const doc = this.props.DataDoc ? this.props.DataDoc : this.props.Document; + // return DocListCast(doc[this.props.fieldKey]); + // } + + set childDocs(docs: Doc[]) { + const doc = this.props.DataDoc ? this.props.DataDoc : this.props.Document; + doc[this.props.fieldKey] = new List(docs); + } + + @computed get textWrappedRows() { + return Cast(this.props.Document.textwrappedSchemaRows, listSpec("string"), []); + } + set textWrappedRows(textWrappedRows: string[]) { + this.props.Document.textwrappedSchemaRows = new List(textWrappedRows); + } + + @computed get resized(): { id: string, value: number }[] { + return this.columns.reduce((resized, shf) => { + (shf.width > -1) && resized.push({ id: shf.heading, value: shf.width }); + return resized; + }, [] as { id: string, value: number }[]); + } + @computed get sorted(): SortingRule[] { + return this.columns.reduce((sorted, shf) => { + shf.desc && sorted.push({ id: shf.heading, desc: shf.desc }); + return sorted; + }, [] as SortingRule[]); + } + + @action + openHeader = (col: any, menu: any) => { + this.menuContent = menu; + this.col = col; + this.headerOpen = !this.headerOpen; + } + + @computed get tableColumns(): Column[] { + const columns: Column[] = []; + const tableIsFocused = this.isFocused(this.props.Document); + const focusedRow = this._focusedCell.row; + const focusedCol = this._focusedCell.col; + const isEditable = !this._headerIsEditing; + + if (this.childDocs.reduce((found, doc) => found || doc.type === "collection", false)) { + columns.push( + { + expander: true, + Header: "", + width: 30, + Expander: (rowInfo) => { + if (rowInfo.original.type === "collection") { + if (rowInfo.isExpanded) return
this.onCloseCollection(rowInfo.original)}>
; + if (!rowInfo.isExpanded) return
this.onExpandCollection(rowInfo.original)}>
; + } else { + return null; + } + } + } + ); + } + + const cols = this.columns.map(col => { + + const icon: IconProp = this.getColumnType(col) === ColumnType.Number ? "hashtag" : this.getColumnType(col) === ColumnType.String ? "font" : + this.getColumnType(col) === ColumnType.Boolean ? "check-square" : this.getColumnType(col) === ColumnType.Doc ? "file" : + this.getColumnType(col) === ColumnType.Image ? "image" : this.getColumnType(col) === ColumnType.List ? "list-ul" : "align-justify"; + + // this.menuContent =
{col.heading}
; + + const menuContent =
{col.heading}
; + + // this.col = col; + + const header = +
{ this.openHeader(col, menuContent); }} + style={{ background: col.color }}> + {menuContent} +
; + + + // c.heading)} + // keyType={this.getColumnType(col)} + // typeConst={columnTypes.get(col.heading) !== undefined} + // onSelect={this.changeColumns} + // setIsEditing={this.setHeaderIsEditing} + // deleteColumn={this.deleteColumn} + // setColumnType={this.setColumnType} + // setColumnSort={this.setColumnSort} + // setColumnColor={this.setColumnColor} + // />; + + + return { + Header: , + accessor: (doc: Doc) => doc ? doc[col.heading] : 0, + id: col.heading, + Cell: (rowProps: CellInfo) => { + const rowIndex = rowProps.index; + const columnIndex = this.columns.map(c => c.heading).indexOf(rowProps.column.id!); + const isFocused = focusedRow === rowIndex && focusedCol === columnIndex && tableIsFocused; + + const props: CellProps = { + row: rowIndex, + col: columnIndex, + rowProps: rowProps, + isFocused: isFocused, + changeFocusedCellByIndex: this.changeFocusedCellByIndex, + CollectionView: this.props.CollectionView, + ContainingCollection: this.props.ContainingCollectionView, + Document: this.props.Document, + fieldKey: this.props.fieldKey, + renderDepth: this.props.renderDepth, + addDocTab: this.props.addDocTab, + pinToPres: this.props.pinToPres, + moveDocument: this.props.moveDocument, + setIsEditing: this.setCellIsEditing, + isEditable: isEditable, + setPreviewDoc: this.setPreviewDoc, + setComputed: this.setComputed, + getField: this.getField, + showDoc: this.showDoc, + }; + + const colType = this.getColumnType(col); + if (colType === ColumnType.Number) return ; + if (colType === ColumnType.String) return ; + if (colType === ColumnType.Boolean) return ; + if (colType === ColumnType.Doc) return ; + if (colType === ColumnType.Image) return ; + if (colType === ColumnType.List) return ; + return ; + }, + minWidth: 200, + }; + }); + columns.push(...cols); + + columns.push({ + Header: , + accessor: (doc: Doc) => 0, + id: "add", + Cell: (rowProps: CellInfo) => <>, + width: 28, + resizable: false + }); + return columns; + } + + tableAddDoc = (doc: Doc, relativeTo?: Doc, before?: boolean) => { + return Doc.AddDocToList(this.props.Document, this.props.fieldKey, doc, relativeTo, before); + } + + private getTrProps: ComponentPropsGetterR = (state, rowInfo) => { + return !rowInfo ? {} : { + ScreenToLocalTransform: this.props.ScreenToLocalTransform, + addDoc: this.tableAddDoc, + removeDoc: this.props.removeDocument, + rowInfo, + rowFocused: !this._headerIsEditing && rowInfo.index === this._focusedCell.row && this.isFocused(this.props.Document), + textWrapRow: this.toggleTextWrapRow, + rowWrapped: this.textWrappedRows.findIndex(id => rowInfo.original[Id] === id) > -1, + dropAction: StrCast(this.props.Document.childDropAction), + addDocTab: this.props.addDocTab + }; + } + + private getTdProps: ComponentPropsGetterR = (state, rowInfo, column, instance) => { + if (!rowInfo || column) return {}; + + const row = rowInfo.index; + //@ts-ignore + const col = this.columns.map(c => c.heading).indexOf(column!.id); + const isFocused = this._focusedCell.row === row && this._focusedCell.col === col && this.isFocused(this.props.Document); + // TODO: editing border doesn't work :( + return { + style: { + border: !this._headerIsEditing && isFocused ? "2px solid rgb(255, 160, 160)" : "1px solid #f1efeb" + } + }; + } + + @action + onCloseCollection = (collection: Doc): void => { + const index = this._openCollections.findIndex(col => col === collection[Id]); + if (index > -1) this._openCollections.splice(index, 1); + } + + @action onExpandCollection = (collection: Doc) => this._openCollections.push(collection[Id]); + @action setCellIsEditing = (isEditing: boolean) => this._cellIsEditing = isEditing; + @action setHeaderIsEditing = (isEditing: boolean) => this._headerIsEditing = isEditing; + + @action + onPointDown = (e: React.PointerEvent): void => { + this.setFocused(this.props.Document); + if (e.button === 0 && !e.altKey && !e.ctrlKey && !e.metaKey && this.props.isSelected(true)) { + e.stopPropagation(); + } + this.pointerY = e.screenY; + this.pointerX = e.screenX; + this.headerOpen = false; + } + + @action + onKeyDown = (e: KeyboardEvent): void => { + if (!this._cellIsEditing && !this._headerIsEditing && this.isFocused(this.props.Document)) {// && this.props.isSelected(true)) { + const direction = e.key === "Tab" ? "tab" : e.which === 39 ? "right" : e.which === 37 ? "left" : e.which === 38 ? "up" : e.which === 40 ? "down" : ""; + this._focusedCell = this.changeFocusedCellByDirection(direction, this._focusedCell.row, this._focusedCell.col); + + const pdoc = FieldValue(this.childDocs[this._focusedCell.row]); + pdoc && this.setPreviewDoc(pdoc); + } + } + + changeFocusedCellByDirection = (direction: string, curRow: number, curCol: number) => { + switch (direction) { + case "tab": return { row: (curRow + 1 === this.childDocs.length ? 0 : curRow + 1), col: curCol + 1 === this.columns.length ? 0 : curCol + 1 }; + case "right": return { row: curRow, col: curCol + 1 === this.columns.length ? curCol : curCol + 1 }; + case "left": return { row: curRow, col: curCol === 0 ? curCol : curCol - 1 }; + case "up": return { row: curRow === 0 ? curRow : curRow - 1, col: curCol }; + case "down": return { row: curRow + 1 === this.childDocs.length ? curRow : curRow + 1, col: curCol }; + } + return this._focusedCell; + } + + @action + changeFocusedCellByIndex = (row: number, col: number): void => { + if (this._focusedCell.row !== row || this._focusedCell.col !== col) { + this._focusedCell = { row: row, col: col }; + } + this.setFocused(this.props.Document); + } + + @undoBatch + createRow = () => { + this.props.addDocument(Docs.Create.TextDocument("", { title: "", _width: 100, _height: 30 })); + } + + @undoBatch + @action + createColumn = () => { + let index = 0; + let found = this.columns.findIndex(col => col.heading.toUpperCase() === "New field".toUpperCase()) > -1; + while (found) { + index++; + found = this.columns.findIndex(col => col.heading.toUpperCase() === ("New field (" + index + ")").toUpperCase()) > -1; + } + this.columns.push(new SchemaHeaderField(`New field ${index ? "(" + index + ")" : ""}`, "#f1efeb")); + } + + @undoBatch + @action + deleteColumn = (key: string) => { + const columns = this.columns; + if (columns === undefined) { + this.columns = new List([]); + } else { + const index = columns.map(c => c.heading).indexOf(key); + if (index > -1) { + columns.splice(index, 1); + this.columns = columns; + } + } + } + + @undoBatch + @action + changeColumns = (oldKey: string, newKey: string, addNew: boolean) => { + const columns = this.columns; + if (columns === undefined) { + this.columns = new List([new SchemaHeaderField(newKey, "f1efeb")]); + } else { + if (addNew) { + columns.push(new SchemaHeaderField(newKey, "f1efeb")); + this.columns = columns; + } else { + const index = columns.map(c => c.heading).indexOf(oldKey); + if (index > -1) { + const column = columns[index]; + column.setHeading(newKey); + columns[index] = column; + this.columns = columns; + } + } + } + } + + getColumnType = (column: SchemaHeaderField): ColumnType => { + // added functionality to convert old column type stuff to new column type stuff -syip + if (column.type && column.type !== 0) { + return column.type; + } + if (columnTypes.get(column.heading)) { + column.type = columnTypes.get(column.heading)!; + return columnTypes.get(column.heading)!; + } + const typesDoc = FieldValue(Cast(this.props.Document.schemaColumnTypes, Doc)); + if (!typesDoc) { + column.type = ColumnType.Any; + return ColumnType.Any; + } + column.type = NumCast(typesDoc[column.heading]); + return NumCast(typesDoc[column.heading]); + } + + @undoBatch + setColumnType = (columnField: SchemaHeaderField, type: ColumnType): void => { + if (columnTypes.get(columnField.heading)) return; + + const columns = this.columns; + const index = columns.indexOf(columnField); + if (index > -1) { + columnField.setType(NumCast(type)); + columns[index] = columnField; + this.columns = columns; + } + } + + @undoBatch + setColumnColor = (columnField: SchemaHeaderField, color: string): void => { + const columns = this.columns; + const index = columns.indexOf(columnField); + if (index > -1) { + columnField.setColor(color); + columns[index] = columnField; + this.columns = columns; // need to set the columns to trigger rerender + } + } + + @action + setColumns = (columns: SchemaHeaderField[]) => this.columns = columns + + @undoBatch + reorderColumns = (toMove: SchemaHeaderField, relativeTo: SchemaHeaderField, before: boolean, columnsValues: SchemaHeaderField[]) => { + const columns = [...columnsValues]; + const oldIndex = columns.indexOf(toMove); + const relIndex = columns.indexOf(relativeTo); + const newIndex = (oldIndex > relIndex && !before) ? relIndex + 1 : (oldIndex < relIndex && before) ? relIndex - 1 : relIndex; + + if (oldIndex === newIndex) return; + + columns.splice(newIndex, 0, columns.splice(oldIndex, 1)[0]); + this.columns = columns; + } + + @undoBatch + @action + setColumnSort = (columnField: SchemaHeaderField, descending: boolean | undefined) => { + const columns = this.columns; + const index = columns.findIndex(c => c.heading === columnField.heading); + const column = columns[index]; + column.setDesc(descending); + columns[index] = column; + this.columns = columns; + } + + get documentKeys() { + const docs = this.childDocs; + const keys: { [key: string]: boolean } = {}; + // bcz: ugh. this is untracked since otherwise a large collection of documents will blast the server for all their fields. + // then as each document's fields come back, we update the documents _proxies. Each time we do this, the whole schema will be + // invalidated and re-rendered. This workaround will inquire all of the document fields before the options button is clicked. + // then by the time the options button is clicked, all of the fields should be in place. If a new field is added while this menu + // is displayed (unlikely) it won't show up until something else changes. + //TODO Types + untracked(() => docs.map(doc => Doc.GetAllPrototypes(doc).map(proto => Object.keys(proto).forEach(key => keys[key] = false)))); + + this.columns.forEach(key => keys[key.heading] = true); + return Array.from(Object.keys(keys)); + } + + @undoBatch + @action + toggleTextwrap = async () => { + const textwrappedRows = Cast(this.props.Document.textwrappedSchemaRows, listSpec("string"), []); + if (textwrappedRows.length) { + this.props.Document.textwrappedSchemaRows = new List([]); + } else { + const docs = DocListCast(this.props.Document[this.props.fieldKey]); + const allRows = docs instanceof Doc ? [docs[Id]] : docs.map(doc => doc[Id]); + this.props.Document.textwrappedSchemaRows = new List(allRows); + } + } + + @action + toggleTextWrapRow = (doc: Doc): void => { + const textWrapped = this.textWrappedRows; + const index = textWrapped.findIndex(id => doc[Id] === id); + + index > -1 ? textWrapped.splice(index, 1) : textWrapped.push(doc[Id]); + + this.textWrappedRows = textWrapped; + } + + @computed + get reactTable() { + const children = this.childDocs; + const hasCollectionChild = children.reduce((found, doc) => found || doc.type === "collection", false); + const expandedRowsList = this._openCollections.map(col => children.findIndex(doc => doc[Id] === col).toString()); + const expanded = {}; + //@ts-ignore + expandedRowsList.forEach(row => expanded[row] = true); + const rerender = [...this.textWrappedRows]; // TODO: get component to rerender on text wrap change without needign to console.log :(((( + + return (row.original.type !== "collection") ? (null) : +
{this.renderSchemaTable(row.original, undefined, undefined)}
} + //
} + + />; + } + + onResizedChange = (newResized: Resize[], event: any) => { + const columns = this.columns; + newResized.forEach(resized => { + const index = columns.findIndex(c => c.heading === resized.id); + const column = columns[index]; + column.setWidth(resized.value); + columns[index] = column; + }); + this.columns = columns; + } + + onContextMenu = (e: React.MouseEvent): void => { + if (!e.isPropagationStopped() && this.props.Document[Id] !== "mainDoc") { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 + // ContextMenu.Instance.addItem({ description: "Make DB", event: this.makeDB, icon: "table" }); + ContextMenu.Instance.addItem({ description: "Toggle text wrapping", event: this.toggleTextwrap, icon: "table" }); + } + } + + getField = (row: number, col?: number) => { + const docs = this.childDocs; + + row = row % docs.length; + while (row < 0) row += docs.length; + const columns = this.columns; + const doc = docs[row]; + if (col === undefined) { + return doc; + } + if (col >= 0 && col < columns.length) { + const column = this.columns[col].heading; + return doc[column]; + } + return undefined; + } + + createTransformer = (row: number, col: number): Transformer => { + const self = this; + const captures: { [name: string]: Field } = {}; + + const transformer: ts.TransformerFactory = context => { + return root => { + function visit(node: ts.Node) { + node = ts.visitEachChild(node, visit, context); + if (ts.isIdentifier(node)) { + const isntPropAccess = !ts.isPropertyAccessExpression(node.parent) || node.parent.expression === node; + const isntPropAssign = !ts.isPropertyAssignment(node.parent) || node.parent.name !== node; + if (isntPropAccess && isntPropAssign) { + if (node.text === "$r") { + return ts.createNumericLiteral(row.toString()); + } else if (node.text === "$c") { + return ts.createNumericLiteral(col.toString()); + } else if (node.text === "$") { + if (ts.isCallExpression(node.parent)) { + // captures.doc = self.props.Document; + // captures.key = self.props.fieldKey; + } + } + } + } + + return node; + } + return ts.visitNode(root, visit); + }; + }; + + // const getVars = () => { + // return { capturedVariables: captures }; + // }; + + return { transformer, /*getVars*/ }; + } + + setComputed = (script: string, doc: Doc, field: string, row: number, col: number): boolean => { + script = + `const $ = (row:number, col?:number) => { + if(col === undefined) { + return (doc as any)[key][row + ${row}]; + } + return (doc as any)[key][row + ${row}][(doc as any).schemaColumns[col + ${col}].heading]; + } + return ${script}`; + const compiled = CompileScript(script, { params: { this: Doc.name }, capturedVariables: { doc: this.props.Document, key: this.props.fieldKey }, typecheck: false, transformer: this.createTransformer(row, col) }); + if (compiled.compiled) { + doc[field] = new ComputedField(compiled); + return true; + } + return false; + } + + @action + showDoc = (doc: Doc | undefined, dataDoc?: Doc, screenX?: number, screenY?: number) => { + this._showDoc = doc; + if (dataDoc && screenX && screenY) { + this._showDocPos = this.props.ScreenToLocalTransform().transformPoint(screenX, screenY); + } + } + + onOpenClick = () => { + if (this._showDoc) { + this.props.addDocTab(this._showDoc, "onRight"); + } + } + + getPreviewTransform = (): Transform => { + return this.props.ScreenToLocalTransform().translate(- this.borderWidth - this.DIVIDER_WIDTH - this.tableWidth, - this.borderWidth); + } + + + + // ADDED ENDS HERE + // + // + + + + + private createTarget = (ele: HTMLDivElement) => { this._previewCont = ele; super.CreateDropTarget(ele); @@ -103,15 +877,12 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { this.props.select(false); } } + this.headerOpen = false; } @computed get previewDocument(): Doc | undefined { return this.previewDoc; } - getPreviewTransform = (): Transform => { - return this.props.ScreenToLocalTransform().translate(- this.borderWidth - this.DIVIDER_WIDTH - this.tableWidth, - this.borderWidth); - } - @computed get dividerDragger() { return this.previewWidth() === 0 ? (null) : @@ -152,32 +923,90 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
; } + + // this is added too + renderSchemaTable = (Document: any, dataDoc: any, childDocs: any) => { + return
this.props.active(true) && e.stopPropagation()} onDrop={e => this.onExternalDrop(e, {})} onContextMenu={this.onContextMenu} > + {this.reactTable} +
this.createRow()}>+ new
+ {!this._showDoc ? (null) : +
{ this.onOpenClick(); }} + style={{ + position: "absolute", width: 150, height: 150, + background: "dimGray", display: "block", top: 0, left: 0, + transform: `translate(${this._showDocPos[0]}px, ${this._showDocPos[1] - 180}px)` + }} + ref="overlay"> false} + PanelWidth={() => 150} + PanelHeight={() => 150} + ScreenToLocalTransform={this.getPreviewTransform} + docFilters={returnEmptyFilter} + ContainingCollectionDoc={this.props.CollectionView?.props.Document} + ContainingCollectionView={this.props.CollectionView} + moveDocument={this.props.moveDocument} + parentActive={this.props.active} + whenActiveChanged={emptyFunction} + addDocTab={this.props.addDocTab} + pinToPres={this.props.pinToPres} + bringToFront={returnFalse} + ContentScaling={returnOne}> + +
} +
; + } + + + // changed to render schema table @computed get schemaTable() { - return ; + const preview = ""; + return
this.props.active(true) && e.stopPropagation()} onDrop={e => this.onExternalDrop(e, {})} onContextMenu={this.onContextMenu} > + {this.reactTable} +
this.createRow()}>+ new
+ {!this._showDoc ? (null) : +
{ this.onOpenClick(); }} + style={{ + position: "absolute", width: 150, height: 150, + background: "dimGray", display: "block", top: 0, left: 0, + transform: `translate(${this._showDocPos[0]}px, ${this._showDocPos[1] - 180}px)` + }} + ref="overlay"> false} + PanelWidth={() => 150} + PanelHeight={() => 150} + ScreenToLocalTransform={this.getPreviewTransform} + docFilters={returnEmptyFilter} + ContainingCollectionDoc={this.props.CollectionView?.props.Document} + ContainingCollectionView={this.props.CollectionView} + moveDocument={this.props.moveDocument} + parentActive={this.props.active} + whenActiveChanged={emptyFunction} + addDocTab={this.props.addDocTab} + pinToPres={this.props.pinToPres} + bringToFront={returnFalse} + ContentScaling={returnOne}> + +
} +
; } @computed @@ -200,10 +1029,21 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
{this.dividerDragger} {!this.previewWidth() ? (null) : this.previewPanel} + {this.headerOpen ? this.renderMenu : null}
; } } + + + + + + + + + + export interface SchemaTableProps { Document: Doc; // child doc dataDoc?: Doc; @@ -290,6 +1130,7 @@ export class SchemaTable extends React.Component { @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); } @computed get tableColumns(): Column[] { + const possibleKeys = this.documentKeys.filter(key => this.columns.findIndex(existingKey => existingKey.heading.toUpperCase() === key.toUpperCase()) === -1); const columns: Column[] = []; const tableIsFocused = this.props.isFocused(this.props.Document); @@ -323,25 +1164,27 @@ export class SchemaTable extends React.Component { - const header =
- c.heading)} - // keyType={this.getColumnType(col)} - typeConst={columnTypes.get(col.heading) !== undefined} - menuButtonContent={
{col.heading}
} - addNew={false} - onSelect={this.changeColumns} - setIsEditing={this.setHeaderIsEditing} - deleteColumn={this.deleteColumn} - onlyShowOptions={false} - setColumnType={this.setColumnType} - setColumnSort={this.setColumnSort} - setColumnColor={this.setColumnColor} - /> -
; + const header =
{col.heading}
; + + //
+ // c.heading)} + // // keyType={this.getColumnType(col)} + // typeConst={columnTypes.get(col.heading) !== undefined} + // menuButtonContent={
{col.heading}
} + // addNew={false} + // onSelect={this.changeColumns} + // setIsEditing={this.setHeaderIsEditing} + // deleteColumn={this.deleteColumn} + // onlyShowOptions={false} + // setColumnType={this.setColumnType} + // setColumnSort={this.setColumnSort} + // setColumnColor={this.setColumnColor} + // /> + //
; // Date: Wed, 24 Jun 2020 21:04:42 -0500 Subject: moving things around to schema table --- .../views/collections/CollectionSchemaView.tsx | 1209 +++++--------------- 1 file changed, 281 insertions(+), 928 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 18a53541d..4f87420d2 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -68,6 +68,28 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @observable pointerY: number = 0; @computed get menuCoordinates() { return this.props.ScreenToLocalTransform().transformPoint(this.pointerX, this.pointerY); } + @computed get columns() { + return Cast(this.props.Document.schemaColumns, listSpec(SchemaHeaderField), []); + } + set columns(columns: SchemaHeaderField[]) { + this.props.Document.schemaColumns = new List(columns); + } + + get documentKeys() { + const docs = this.childDocs; + const keys: { [key: string]: boolean } = {}; + // bcz: ugh. this is untracked since otherwise a large collection of documents will blast the server for all their fields. + // then as each document's fields come back, we update the documents _proxies. Each time we do this, the whole schema will be + // invalidated and re-rendered. This workaround will inquire all of the document fields before the options button is clicked. + // then by the time the options button is clicked, all of the fields should be in place. If a new field is added while this menu + // is displayed (unlikely) it won't show up until something else changes. + //TODO Types + untracked(() => docs.map(doc => Doc.GetAllPrototypes(doc).map(proto => Object.keys(proto).forEach(key => keys[key] = false)))); + + this.columns.forEach(key => keys[key.heading] = true); + return Array.from(Object.keys(keys)); + } + @observable col: any = ""; @computed get possibleKeys() { return this.documentKeys.filter(key => this.columns.findIndex(existingKey => existingKey.heading.toUpperCase() === key.toUpperCase()) === -1); } @@ -77,16 +99,18 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @observable private _isOpen: boolean = false; @observable private _node: HTMLDivElement | null = null; + @observable _headerIsEditing: boolean = false; + componentDidMount() { document.addEventListener("pointerdown", this.detectClick); - document.addEventListener("keydown", this.onKeyDown); } componentWillUnmount() { document.removeEventListener("pointerdown", this.detectClick); - document.removeEventListener("keydown", this.onKeyDown); } + @action setHeaderIsEditing = (isEditing: boolean) => this._headerIsEditing = isEditing; + detectClick = (e: PointerEvent): void => { if (this._node && this._node.contains(e.target as Node)) { } else { @@ -101,6 +125,9 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { this.setHeaderIsEditing(this._isOpen); } + + + changeColumnType = (type: ColumnType, col: any): void => { this.setColumnType(col, type); } @@ -113,6 +140,43 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { this.setColumnColor(col, color); } + @undoBatch + setColumnType = (columnField: SchemaHeaderField, type: ColumnType): void => { + if (columnTypes.get(columnField.heading)) return; + + const columns = this.columns; + const index = columns.indexOf(columnField); + if (index > -1) { + columnField.setType(NumCast(type)); + columns[index] = columnField; + this.columns = columns; + } + } + + @undoBatch + setColumnColor = (columnField: SchemaHeaderField, color: string): void => { + const columns = this.columns; + const index = columns.indexOf(columnField); + if (index > -1) { + columnField.setColor(color); + columns[index] = columnField; + this.columns = columns; // need to set the columns to trigger rerender + } + } + + @undoBatch + @action + setColumnSort = (columnField: SchemaHeaderField, descending: boolean | undefined) => { + const columns = this.columns; + const index = columns.findIndex(c => c.heading === columnField.heading); + const column = columns[index]; + column.setDesc(descending); + columns[index] = column; + this.columns = columns; + } + + + @action setNode = (node: HTMLDivElement): void => { if (node) { @@ -209,6 +273,35 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { ); } + @undoBatch + @action + changeColumns = (oldKey: string, newKey: string, addNew: boolean) => { + const columns = this.columns; + if (columns === undefined) { + this.columns = new List([new SchemaHeaderField(newKey, "f1efeb")]); + } else { + if (addNew) { + columns.push(new SchemaHeaderField(newKey, "f1efeb")); + this.columns = columns; + } else { + const index = columns.map(c => c.heading).indexOf(oldKey); + if (index > -1) { + const column = columns[index]; + column.setHeading(newKey); + columns[index] = column; + this.columns = columns; + } + } + } + } + + @action + openHeader = (col: any, menu: any) => { + this.menuContent = menu; + this.col = col; + this.headerOpen = !this.headerOpen; + } + renderContent = (col: any) => { return (
@@ -238,6 +331,24 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { ); } + @undoBatch + @action + deleteColumn = (key: string) => { + const columns = this.columns; + if (columns === undefined) { + this.columns = new List([]); + } else { + const index = columns.map(c => c.heading).indexOf(key); + if (index > -1) { + columns.splice(index, 1); + this.columns = columns; + } + } + } + + getPreviewTransform = (): Transform => { + return this.props.ScreenToLocalTransform().translate(- this.borderWidth - 4 - this.tableWidth, - this.borderWidth); + } //anchorPoints.TOP_CENTER @@ -256,757 +367,125 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { ); } - - - - - - - - - - - - - // ADDED START HEREE - // - // - // - - @observable _headerIsEditing: boolean = false; - @observable _cellIsEditing: boolean = false; - @observable _focusedCell: { row: number, col: number } = { row: 0, col: 0 }; - @observable _openCollections: Array = []; - - @observable _showDoc: Doc | undefined; - @observable _showDataDoc: any = ""; - @observable _showDocPos: number[] = []; - - @computed get columns() { - return Cast(this.props.Document.schemaColumns, listSpec(SchemaHeaderField), []); - } - set columns(columns: SchemaHeaderField[]) { - this.props.Document.schemaColumns = new List(columns); + private createTarget = (ele: HTMLDivElement) => { + this._previewCont = ele; + super.CreateDropTarget(ele); } - // @computed get childDocs() { - // if (this.childDocs) return this.childDocs; + isFocused = (doc: Doc): boolean => this.props.isSelected() && doc === this._focusedTable; - // const doc = this.props.DataDoc ? this.props.DataDoc : this.props.Document; - // return DocListCast(doc[this.props.fieldKey]); - // } + @action setFocused = (doc: Doc) => this._focusedTable = doc; - set childDocs(docs: Doc[]) { - const doc = this.props.DataDoc ? this.props.DataDoc : this.props.Document; - doc[this.props.fieldKey] = new List(docs); - } + @action setPreviewDoc = (doc: Doc) => this.previewDoc = doc; - @computed get textWrappedRows() { - return Cast(this.props.Document.textwrappedSchemaRows, listSpec("string"), []); - } - set textWrappedRows(textWrappedRows: string[]) { - this.props.Document.textwrappedSchemaRows = new List(textWrappedRows); + //toggles preview side-panel of schema + @action + toggleExpander = () => { + this.props.Document.schemaPreviewWidth = this.previewWidth() === 0 ? Math.min(this.tableWidth / 3, 200) : 0; } - @computed get resized(): { id: string, value: number }[] { - return this.columns.reduce((resized, shf) => { - (shf.width > -1) && resized.push({ id: shf.heading, value: shf.width }); - return resized; - }, [] as { id: string, value: number }[]); - } - @computed get sorted(): SortingRule[] { - return this.columns.reduce((sorted, shf) => { - shf.desc && sorted.push({ id: shf.heading, desc: shf.desc }); - return sorted; - }, [] as SortingRule[]); + onDividerDown = (e: React.PointerEvent) => { + setupMoveUpEvents(this, e, this.onDividerMove, emptyFunction, action(() => this.toggleExpander())); } - @action - openHeader = (col: any, menu: any) => { - this.menuContent = menu; - this.col = col; - this.headerOpen = !this.headerOpen; + onDividerMove = (e: PointerEvent, down: number[], delta: number[]) => { + const nativeWidth = this._previewCont!.getBoundingClientRect(); + const minWidth = 40; + const maxWidth = 1000; + const movedWidth = this.props.ScreenToLocalTransform().transformDirection(nativeWidth.right - e.clientX, 0)[0]; + const width = movedWidth < minWidth ? minWidth : movedWidth > maxWidth ? maxWidth : movedWidth; + this.props.Document.schemaPreviewWidth = width; + return false; } - @computed get tableColumns(): Column[] { - const columns: Column[] = []; - const tableIsFocused = this.isFocused(this.props.Document); - const focusedRow = this._focusedCell.row; - const focusedCol = this._focusedCell.col; - const isEditable = !this._headerIsEditing; - - if (this.childDocs.reduce((found, doc) => found || doc.type === "collection", false)) { - columns.push( - { - expander: true, - Header: "", - width: 30, - Expander: (rowInfo) => { - if (rowInfo.original.type === "collection") { - if (rowInfo.isExpanded) return
this.onCloseCollection(rowInfo.original)}>
; - if (!rowInfo.isExpanded) return
this.onExpandCollection(rowInfo.original)}>
; - } else { - return null; - } - } - } - ); + onPointerDown = (e: React.PointerEvent): void => { + if (e.button === 0 && !e.altKey && !e.ctrlKey && !e.metaKey) { + if (this.props.isSelected(true)) e.stopPropagation(); + else { + this.props.select(false); + } } + this.headerOpen = false; + } - const cols = this.columns.map(col => { - - const icon: IconProp = this.getColumnType(col) === ColumnType.Number ? "hashtag" : this.getColumnType(col) === ColumnType.String ? "font" : - this.getColumnType(col) === ColumnType.Boolean ? "check-square" : this.getColumnType(col) === ColumnType.Doc ? "file" : - this.getColumnType(col) === ColumnType.Image ? "image" : this.getColumnType(col) === ColumnType.List ? "list-ul" : "align-justify"; - - // this.menuContent =
{col.heading}
; - - const menuContent =
{col.heading}
; - - // this.col = col; - - const header = -
{ this.openHeader(col, menuContent); }} - style={{ background: col.color }}> - {menuContent} -
; - - - // c.heading)} - // keyType={this.getColumnType(col)} - // typeConst={columnTypes.get(col.heading) !== undefined} - // onSelect={this.changeColumns} - // setIsEditing={this.setHeaderIsEditing} - // deleteColumn={this.deleteColumn} - // setColumnType={this.setColumnType} - // setColumnSort={this.setColumnSort} - // setColumnColor={this.setColumnColor} - // />; - + @computed + get previewDocument(): Doc | undefined { return this.previewDoc; } - return { - Header: , - accessor: (doc: Doc) => doc ? doc[col.heading] : 0, - id: col.heading, - Cell: (rowProps: CellInfo) => { - const rowIndex = rowProps.index; - const columnIndex = this.columns.map(c => c.heading).indexOf(rowProps.column.id!); - const isFocused = focusedRow === rowIndex && focusedCol === columnIndex && tableIsFocused; - - const props: CellProps = { - row: rowIndex, - col: columnIndex, - rowProps: rowProps, - isFocused: isFocused, - changeFocusedCellByIndex: this.changeFocusedCellByIndex, - CollectionView: this.props.CollectionView, - ContainingCollection: this.props.ContainingCollectionView, - Document: this.props.Document, - fieldKey: this.props.fieldKey, - renderDepth: this.props.renderDepth, - addDocTab: this.props.addDocTab, - pinToPres: this.props.pinToPres, - moveDocument: this.props.moveDocument, - setIsEditing: this.setCellIsEditing, - isEditable: isEditable, - setPreviewDoc: this.setPreviewDoc, - setComputed: this.setComputed, - getField: this.getField, - showDoc: this.showDoc, - }; - - const colType = this.getColumnType(col); - if (colType === ColumnType.Number) return ; - if (colType === ColumnType.String) return ; - if (colType === ColumnType.Boolean) return ; - if (colType === ColumnType.Doc) return ; - if (colType === ColumnType.Image) return ; - if (colType === ColumnType.List) return ; - return ; - }, - minWidth: 200, - }; - }); - columns.push(...cols); - - columns.push({ - Header: , - accessor: (doc: Doc) => 0, - id: "add", - Cell: (rowProps: CellInfo) => <>, - width: 28, - resizable: false - }); - return columns; - } - - tableAddDoc = (doc: Doc, relativeTo?: Doc, before?: boolean) => { - return Doc.AddDocToList(this.props.Document, this.props.fieldKey, doc, relativeTo, before); - } - - private getTrProps: ComponentPropsGetterR = (state, rowInfo) => { - return !rowInfo ? {} : { - ScreenToLocalTransform: this.props.ScreenToLocalTransform, - addDoc: this.tableAddDoc, - removeDoc: this.props.removeDocument, - rowInfo, - rowFocused: !this._headerIsEditing && rowInfo.index === this._focusedCell.row && this.isFocused(this.props.Document), - textWrapRow: this.toggleTextWrapRow, - rowWrapped: this.textWrappedRows.findIndex(id => rowInfo.original[Id] === id) > -1, - dropAction: StrCast(this.props.Document.childDropAction), - addDocTab: this.props.addDocTab - }; - } - - private getTdProps: ComponentPropsGetterR = (state, rowInfo, column, instance) => { - if (!rowInfo || column) return {}; - - const row = rowInfo.index; - //@ts-ignore - const col = this.columns.map(c => c.heading).indexOf(column!.id); - const isFocused = this._focusedCell.row === row && this._focusedCell.col === col && this.isFocused(this.props.Document); - // TODO: editing border doesn't work :( - return { - style: { - border: !this._headerIsEditing && isFocused ? "2px solid rgb(255, 160, 160)" : "1px solid #f1efeb" - } - }; - } - - @action - onCloseCollection = (collection: Doc): void => { - const index = this._openCollections.findIndex(col => col === collection[Id]); - if (index > -1) this._openCollections.splice(index, 1); - } - - @action onExpandCollection = (collection: Doc) => this._openCollections.push(collection[Id]); - @action setCellIsEditing = (isEditing: boolean) => this._cellIsEditing = isEditing; - @action setHeaderIsEditing = (isEditing: boolean) => this._headerIsEditing = isEditing; - - @action - onPointDown = (e: React.PointerEvent): void => { - this.setFocused(this.props.Document); - if (e.button === 0 && !e.altKey && !e.ctrlKey && !e.metaKey && this.props.isSelected(true)) { - e.stopPropagation(); - } - this.pointerY = e.screenY; - this.pointerX = e.screenX; - this.headerOpen = false; - } - - @action - onKeyDown = (e: KeyboardEvent): void => { - if (!this._cellIsEditing && !this._headerIsEditing && this.isFocused(this.props.Document)) {// && this.props.isSelected(true)) { - const direction = e.key === "Tab" ? "tab" : e.which === 39 ? "right" : e.which === 37 ? "left" : e.which === 38 ? "up" : e.which === 40 ? "down" : ""; - this._focusedCell = this.changeFocusedCellByDirection(direction, this._focusedCell.row, this._focusedCell.col); - - const pdoc = FieldValue(this.childDocs[this._focusedCell.row]); - pdoc && this.setPreviewDoc(pdoc); - } - } - - changeFocusedCellByDirection = (direction: string, curRow: number, curCol: number) => { - switch (direction) { - case "tab": return { row: (curRow + 1 === this.childDocs.length ? 0 : curRow + 1), col: curCol + 1 === this.columns.length ? 0 : curCol + 1 }; - case "right": return { row: curRow, col: curCol + 1 === this.columns.length ? curCol : curCol + 1 }; - case "left": return { row: curRow, col: curCol === 0 ? curCol : curCol - 1 }; - case "up": return { row: curRow === 0 ? curRow : curRow - 1, col: curCol }; - case "down": return { row: curRow + 1 === this.childDocs.length ? curRow : curRow + 1, col: curCol }; - } - return this._focusedCell; - } - - @action - changeFocusedCellByIndex = (row: number, col: number): void => { - if (this._focusedCell.row !== row || this._focusedCell.col !== col) { - this._focusedCell = { row: row, col: col }; - } - this.setFocused(this.props.Document); - } - - @undoBatch - createRow = () => { - this.props.addDocument(Docs.Create.TextDocument("", { title: "", _width: 100, _height: 30 })); - } - - @undoBatch - @action - createColumn = () => { - let index = 0; - let found = this.columns.findIndex(col => col.heading.toUpperCase() === "New field".toUpperCase()) > -1; - while (found) { - index++; - found = this.columns.findIndex(col => col.heading.toUpperCase() === ("New field (" + index + ")").toUpperCase()) > -1; - } - this.columns.push(new SchemaHeaderField(`New field ${index ? "(" + index + ")" : ""}`, "#f1efeb")); - } - - @undoBatch - @action - deleteColumn = (key: string) => { - const columns = this.columns; - if (columns === undefined) { - this.columns = new List([]); - } else { - const index = columns.map(c => c.heading).indexOf(key); - if (index > -1) { - columns.splice(index, 1); - this.columns = columns; - } - } - } - - @undoBatch - @action - changeColumns = (oldKey: string, newKey: string, addNew: boolean) => { - const columns = this.columns; - if (columns === undefined) { - this.columns = new List([new SchemaHeaderField(newKey, "f1efeb")]); - } else { - if (addNew) { - columns.push(new SchemaHeaderField(newKey, "f1efeb")); - this.columns = columns; - } else { - const index = columns.map(c => c.heading).indexOf(oldKey); - if (index > -1) { - const column = columns[index]; - column.setHeading(newKey); - columns[index] = column; - this.columns = columns; - } - } - } - } - - getColumnType = (column: SchemaHeaderField): ColumnType => { - // added functionality to convert old column type stuff to new column type stuff -syip - if (column.type && column.type !== 0) { - return column.type; - } - if (columnTypes.get(column.heading)) { - column.type = columnTypes.get(column.heading)!; - return columnTypes.get(column.heading)!; - } - const typesDoc = FieldValue(Cast(this.props.Document.schemaColumnTypes, Doc)); - if (!typesDoc) { - column.type = ColumnType.Any; - return ColumnType.Any; - } - column.type = NumCast(typesDoc[column.heading]); - return NumCast(typesDoc[column.heading]); - } - - @undoBatch - setColumnType = (columnField: SchemaHeaderField, type: ColumnType): void => { - if (columnTypes.get(columnField.heading)) return; - - const columns = this.columns; - const index = columns.indexOf(columnField); - if (index > -1) { - columnField.setType(NumCast(type)); - columns[index] = columnField; - this.columns = columns; - } - } - - @undoBatch - setColumnColor = (columnField: SchemaHeaderField, color: string): void => { - const columns = this.columns; - const index = columns.indexOf(columnField); - if (index > -1) { - columnField.setColor(color); - columns[index] = columnField; - this.columns = columns; // need to set the columns to trigger rerender - } - } - - @action - setColumns = (columns: SchemaHeaderField[]) => this.columns = columns - - @undoBatch - reorderColumns = (toMove: SchemaHeaderField, relativeTo: SchemaHeaderField, before: boolean, columnsValues: SchemaHeaderField[]) => { - const columns = [...columnsValues]; - const oldIndex = columns.indexOf(toMove); - const relIndex = columns.indexOf(relativeTo); - const newIndex = (oldIndex > relIndex && !before) ? relIndex + 1 : (oldIndex < relIndex && before) ? relIndex - 1 : relIndex; - - if (oldIndex === newIndex) return; - - columns.splice(newIndex, 0, columns.splice(oldIndex, 1)[0]); - this.columns = columns; - } - - @undoBatch - @action - setColumnSort = (columnField: SchemaHeaderField, descending: boolean | undefined) => { - const columns = this.columns; - const index = columns.findIndex(c => c.heading === columnField.heading); - const column = columns[index]; - column.setDesc(descending); - columns[index] = column; - this.columns = columns; - } - - get documentKeys() { - const docs = this.childDocs; - const keys: { [key: string]: boolean } = {}; - // bcz: ugh. this is untracked since otherwise a large collection of documents will blast the server for all their fields. - // then as each document's fields come back, we update the documents _proxies. Each time we do this, the whole schema will be - // invalidated and re-rendered. This workaround will inquire all of the document fields before the options button is clicked. - // then by the time the options button is clicked, all of the fields should be in place. If a new field is added while this menu - // is displayed (unlikely) it won't show up until something else changes. - //TODO Types - untracked(() => docs.map(doc => Doc.GetAllPrototypes(doc).map(proto => Object.keys(proto).forEach(key => keys[key] = false)))); - - this.columns.forEach(key => keys[key.heading] = true); - return Array.from(Object.keys(keys)); - } - - @undoBatch - @action - toggleTextwrap = async () => { - const textwrappedRows = Cast(this.props.Document.textwrappedSchemaRows, listSpec("string"), []); - if (textwrappedRows.length) { - this.props.Document.textwrappedSchemaRows = new List([]); - } else { - const docs = DocListCast(this.props.Document[this.props.fieldKey]); - const allRows = docs instanceof Doc ? [docs[Id]] : docs.map(doc => doc[Id]); - this.props.Document.textwrappedSchemaRows = new List(allRows); - } - } - - @action - toggleTextWrapRow = (doc: Doc): void => { - const textWrapped = this.textWrappedRows; - const index = textWrapped.findIndex(id => doc[Id] === id); - - index > -1 ? textWrapped.splice(index, 1) : textWrapped.push(doc[Id]); - - this.textWrappedRows = textWrapped; - } - - @computed - get reactTable() { - const children = this.childDocs; - const hasCollectionChild = children.reduce((found, doc) => found || doc.type === "collection", false); - const expandedRowsList = this._openCollections.map(col => children.findIndex(doc => doc[Id] === col).toString()); - const expanded = {}; - //@ts-ignore - expandedRowsList.forEach(row => expanded[row] = true); - const rerender = [...this.textWrappedRows]; // TODO: get component to rerender on text wrap change without needign to console.log :(((( - - return (row.original.type !== "collection") ? (null) : -
{this.renderSchemaTable(row.original, undefined, undefined)}
} - //
} - - />; - } - - onResizedChange = (newResized: Resize[], event: any) => { - const columns = this.columns; - newResized.forEach(resized => { - const index = columns.findIndex(c => c.heading === resized.id); - const column = columns[index]; - column.setWidth(resized.value); - columns[index] = column; - }); - this.columns = columns; - } - - onContextMenu = (e: React.MouseEvent): void => { - if (!e.isPropagationStopped() && this.props.Document[Id] !== "mainDoc") { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 - // ContextMenu.Instance.addItem({ description: "Make DB", event: this.makeDB, icon: "table" }); - ContextMenu.Instance.addItem({ description: "Toggle text wrapping", event: this.toggleTextwrap, icon: "table" }); - } - } - - getField = (row: number, col?: number) => { - const docs = this.childDocs; - - row = row % docs.length; - while (row < 0) row += docs.length; - const columns = this.columns; - const doc = docs[row]; - if (col === undefined) { - return doc; - } - if (col >= 0 && col < columns.length) { - const column = this.columns[col].heading; - return doc[column]; - } - return undefined; - } - - createTransformer = (row: number, col: number): Transformer => { - const self = this; - const captures: { [name: string]: Field } = {}; - - const transformer: ts.TransformerFactory = context => { - return root => { - function visit(node: ts.Node) { - node = ts.visitEachChild(node, visit, context); - if (ts.isIdentifier(node)) { - const isntPropAccess = !ts.isPropertyAccessExpression(node.parent) || node.parent.expression === node; - const isntPropAssign = !ts.isPropertyAssignment(node.parent) || node.parent.name !== node; - if (isntPropAccess && isntPropAssign) { - if (node.text === "$r") { - return ts.createNumericLiteral(row.toString()); - } else if (node.text === "$c") { - return ts.createNumericLiteral(col.toString()); - } else if (node.text === "$") { - if (ts.isCallExpression(node.parent)) { - // captures.doc = self.props.Document; - // captures.key = self.props.fieldKey; - } - } - } - } - - return node; - } - return ts.visitNode(root, visit); - }; - }; - - // const getVars = () => { - // return { capturedVariables: captures }; - // }; - - return { transformer, /*getVars*/ }; - } - - setComputed = (script: string, doc: Doc, field: string, row: number, col: number): boolean => { - script = - `const $ = (row:number, col?:number) => { - if(col === undefined) { - return (doc as any)[key][row + ${row}]; - } - return (doc as any)[key][row + ${row}][(doc as any).schemaColumns[col + ${col}].heading]; - } - return ${script}`; - const compiled = CompileScript(script, { params: { this: Doc.name }, capturedVariables: { doc: this.props.Document, key: this.props.fieldKey }, typecheck: false, transformer: this.createTransformer(row, col) }); - if (compiled.compiled) { - doc[field] = new ComputedField(compiled); - return true; - } - return false; - } - - @action - showDoc = (doc: Doc | undefined, dataDoc?: Doc, screenX?: number, screenY?: number) => { - this._showDoc = doc; - if (dataDoc && screenX && screenY) { - this._showDocPos = this.props.ScreenToLocalTransform().transformPoint(screenX, screenY); - } - } - - onOpenClick = () => { - if (this._showDoc) { - this.props.addDocTab(this._showDoc, "onRight"); - } - } - - getPreviewTransform = (): Transform => { - return this.props.ScreenToLocalTransform().translate(- this.borderWidth - this.DIVIDER_WIDTH - this.tableWidth, - this.borderWidth); - } - - - - // ADDED ENDS HERE - // - // - - - - - - private createTarget = (ele: HTMLDivElement) => { - this._previewCont = ele; - super.CreateDropTarget(ele); - } - - isFocused = (doc: Doc): boolean => this.props.isSelected() && doc === this._focusedTable; - - @action setFocused = (doc: Doc) => this._focusedTable = doc; - - @action setPreviewDoc = (doc: Doc) => this.previewDoc = doc; - - //toggles preview side-panel of schema - @action - toggleExpander = () => { - this.props.Document.schemaPreviewWidth = this.previewWidth() === 0 ? Math.min(this.tableWidth / 3, 200) : 0; - } - - onDividerDown = (e: React.PointerEvent) => { - setupMoveUpEvents(this, e, this.onDividerMove, emptyFunction, action(() => this.toggleExpander())); - } - @action - onDividerMove = (e: PointerEvent, down: number[], delta: number[]) => { - const nativeWidth = this._previewCont!.getBoundingClientRect(); - const minWidth = 40; - const maxWidth = 1000; - const movedWidth = this.props.ScreenToLocalTransform().transformDirection(nativeWidth.right - e.clientX, 0)[0]; - const width = movedWidth < minWidth ? minWidth : movedWidth > maxWidth ? maxWidth : movedWidth; - this.props.Document.schemaPreviewWidth = width; - return false; - } - - onPointerDown = (e: React.PointerEvent): void => { - if (e.button === 0 && !e.altKey && !e.ctrlKey && !e.metaKey) { - if (this.props.isSelected(true)) e.stopPropagation(); - else { - this.props.select(false); - } - } - this.headerOpen = false; - } - - @computed - get previewDocument(): Doc | undefined { return this.previewDoc; } - - @computed - get dividerDragger() { - return this.previewWidth() === 0 ? (null) : -
; - } + @computed + get dividerDragger() { + return this.previewWidth() === 0 ? (null) : +
; + } @computed get previewPanel() { - return
- {!this.previewDocument ? (null) : - } -
; - } - - - // this is added too - renderSchemaTable = (Document: any, dataDoc: any, childDocs: any) => { - return
this.props.active(true) && e.stopPropagation()} onDrop={e => this.onExternalDrop(e, {})} onContextMenu={this.onContextMenu} > - {this.reactTable} -
this.createRow()}>+ new
- {!this._showDoc ? (null) : -
{ this.onOpenClick(); }} - style={{ - position: "absolute", width: 150, height: 150, - background: "dimGray", display: "block", top: 0, left: 0, - transform: `translate(${this._showDocPos[0]}px, ${this._showDocPos[1] - 180}px)` - }} - ref="overlay"> false} - PanelWidth={() => 150} - PanelHeight={() => 150} - ScreenToLocalTransform={this.getPreviewTransform} - docFilters={returnEmptyFilter} - ContainingCollectionDoc={this.props.CollectionView?.props.Document} - ContainingCollectionView={this.props.CollectionView} - moveDocument={this.props.moveDocument} - parentActive={this.props.active} - whenActiveChanged={emptyFunction} - addDocTab={this.props.addDocTab} - pinToPres={this.props.pinToPres} - bringToFront={returnFalse} - ContentScaling={returnOne}> - -
} + return
+ {!this.previewDocument ? (null) : + }
; } - - // changed to render schema table @computed get schemaTable() { const preview = ""; - return
this.props.active(true) && e.stopPropagation()} onDrop={e => this.onExternalDrop(e, {})} onContextMenu={this.onContextMenu} > - {this.reactTable} -
this.createRow()}>+ new
- {!this._showDoc ? (null) : -
{ this.onOpenClick(); }} - style={{ - position: "absolute", width: 150, height: 150, - background: "dimGray", display: "block", top: 0, left: 0, - transform: `translate(${this._showDocPos[0]}px, ${this._showDocPos[1] - 180}px)` - }} - ref="overlay"> false} - PanelWidth={() => 150} - PanelHeight={() => 150} - ScreenToLocalTransform={this.getPreviewTransform} - docFilters={returnEmptyFilter} - ContainingCollectionDoc={this.props.CollectionView?.props.Document} - ContainingCollectionView={this.props.CollectionView} - moveDocument={this.props.moveDocument} - parentActive={this.props.active} - whenActiveChanged={emptyFunction} - addDocTab={this.props.addDocTab} - pinToPres={this.props.pinToPres} - bringToFront={returnFalse} - ContentScaling={returnOne}> - -
} -
; + return ; } @computed @@ -1018,6 +497,44 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
; } + @action + onTablePointerDown = (e: React.PointerEvent): void => { + this.setFocused(this.props.Document); + if (e.button === 0 && !e.altKey && !e.ctrlKey && !e.metaKey && this.props.isSelected(true)) { + e.stopPropagation(); + } + this.pointerY = e.screenY; + this.pointerX = e.screenX; + this.headerOpen = false; + } + + onResizedChange = (newResized: Resize[], event: any) => { + const columns = this.columns; + newResized.forEach(resized => { + const index = columns.findIndex(c => c.heading === resized.id); + const column = columns[index]; + column.setWidth(resized.value); + columns[index] = column; + }); + this.columns = columns; + } + + @action + setColumns = (columns: SchemaHeaderField[]) => this.columns = columns + + @undoBatch + reorderColumns = (toMove: SchemaHeaderField, relativeTo: SchemaHeaderField, before: boolean, columnsValues: SchemaHeaderField[]) => { + const columns = [...columnsValues]; + const oldIndex = columns.indexOf(toMove); + const relIndex = columns.indexOf(relativeTo); + const newIndex = (oldIndex > relIndex && !before) ? relIndex + 1 : (oldIndex < relIndex && before) ? relIndex - 1 : relIndex; + + if (oldIndex === newIndex) return; + + columns.splice(newIndex, 0, columns.splice(oldIndex, 1)[0]); + this.columns = columns; + } + render() { return
doc) { - - - - - - - - export interface SchemaTableProps { Document: Doc; // child doc dataDoc?: Doc; @@ -1067,17 +576,20 @@ export interface SchemaTableProps { isFocused: (document: Doc) => boolean; setFocused: (document: Doc) => void; setPreviewDoc: (document: Doc) => void; + columns: SchemaHeaderField[]; + documentKeys: any[]; + headerIsEditing: boolean; + openHeader: (column: any, menu: any) => void; + onPointerDown: (e: React.PointerEvent) => void; + onResizedChange: (newResized: Resize[], event: any) => void; + setColumns: (columns: SchemaHeaderField[]) => void; + reorderColumns: (toMove: SchemaHeaderField, relativeTo: SchemaHeaderField, before: boolean, columnsValues: SchemaHeaderField[]) => void; } - - - - @observer export class SchemaTable extends React.Component { private DIVIDER_WIDTH = 4; - @observable _headerIsEditing: boolean = false; @observable _cellIsEditing: boolean = false; @observable _focusedCell: { row: number, col: number } = { row: 0, col: 0 }; @observable _openCollections: Array = []; @@ -1090,13 +602,6 @@ export class SchemaTable extends React.Component { @computed get previewHeight() { return () => this.props.PanelHeight() - 2 * this.borderWidth; } @computed get tableWidth() { return this.props.PanelWidth() - 2 * this.borderWidth - this.DIVIDER_WIDTH - this.previewWidth(); } - @computed get columns() { - return Cast(this.props.Document.schemaColumns, listSpec(SchemaHeaderField), []); - } - set columns(columns: SchemaHeaderField[]) { - this.props.Document.schemaColumns = new List(columns); - } - @computed get childDocs() { if (this.props.childDocs) return this.props.childDocs; @@ -1116,13 +621,13 @@ export class SchemaTable extends React.Component { } @computed get resized(): { id: string, value: number }[] { - return this.columns.reduce((resized, shf) => { + return this.props.columns.reduce((resized, shf) => { (shf.width > -1) && resized.push({ id: shf.heading, value: shf.width }); return resized; }, [] as { id: string, value: number }[]); } @computed get sorted(): SortingRule[] { - return this.columns.reduce((sorted, shf) => { + return this.props.columns.reduce((sorted, shf) => { shf.desc && sorted.push({ id: shf.heading, desc: shf.desc }); return sorted; }, [] as SortingRule[]); @@ -1131,12 +636,12 @@ export class SchemaTable extends React.Component { @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); } @computed get tableColumns(): Column[] { - const possibleKeys = this.documentKeys.filter(key => this.columns.findIndex(existingKey => existingKey.heading.toUpperCase() === key.toUpperCase()) === -1); + const possibleKeys = this.props.documentKeys.filter(key => this.props.columns.findIndex(existingKey => existingKey.heading.toUpperCase() === key.toUpperCase()) === -1); const columns: Column[] = []; const tableIsFocused = this.props.isFocused(this.props.Document); const focusedRow = this._focusedCell.row; const focusedCol = this._focusedCell.col; - const isEditable = !this._headerIsEditing; + const isEditable = !this.props.headerIsEditing; if (this.childDocs.reduce((found, doc) => found || doc.type === "collection", false)) { columns.push( @@ -1156,7 +661,7 @@ export class SchemaTable extends React.Component { ); } - const cols = this.columns.map(col => { + const cols = this.props.columns.map(col => { const icon: IconProp = this.getColumnType(col) === ColumnType.Number ? "hashtag" : this.getColumnType(col) === ColumnType.String ? "font" : this.getColumnType(col) === ColumnType.Boolean ? "check-square" : this.getColumnType(col) === ColumnType.Doc ? "file" : @@ -1164,51 +669,21 @@ export class SchemaTable extends React.Component { - const header =
{col.heading}
; - - //
- // c.heading)} - // // keyType={this.getColumnType(col)} - // typeConst={columnTypes.get(col.heading) !== undefined} - // menuButtonContent={
{col.heading}
} - // addNew={false} - // onSelect={this.changeColumns} - // setIsEditing={this.setHeaderIsEditing} - // deleteColumn={this.deleteColumn} - // onlyShowOptions={false} - // setColumnType={this.setColumnType} - // setColumnSort={this.setColumnSort} - // setColumnColor={this.setColumnColor} - // /> - //
; - - - // c.heading)} - // keyType={this.getColumnType(col)} - // typeConst={columnTypes.get(col.heading) !== undefined} - // onSelect={this.changeColumns} - // setIsEditing={this.setHeaderIsEditing} - // deleteColumn={this.deleteColumn} - // setColumnType={this.setColumnType} - // setColumnSort={this.setColumnSort} - // setColumnColor={this.setColumnColor} - // />; - + const menuContent =
{col.heading}
; + const header = +
{ this.props.openHeader(col, menuContent); }} + style={{ background: col.color }}> + {menuContent} +
; return { - Header: , + Header: , accessor: (doc: Doc) => doc ? doc[col.heading] : 0, id: col.heading, Cell: (rowProps: CellInfo) => { const rowIndex = rowProps.index; - const columnIndex = this.columns.map(c => c.heading).indexOf(rowProps.column.id!); + const columnIndex = this.props.columns.map(c => c.heading).indexOf(rowProps.column.id!); const isFocused = focusedRow === rowIndex && focusedCol === columnIndex && tableIsFocused; const props: CellProps = { @@ -1286,7 +761,7 @@ export class SchemaTable extends React.Component { addDoc: this.tableAddDoc, removeDoc: this.props.deleteDocument, rowInfo, - rowFocused: !this._headerIsEditing && rowInfo.index === this._focusedCell.row && this.props.isFocused(this.props.Document), + rowFocused: !this.props.headerIsEditing && rowInfo.index === this._focusedCell.row && this.props.isFocused(this.props.Document), textWrapRow: this.toggleTextWrapRow, rowWrapped: this.textWrappedRows.findIndex(id => rowInfo.original[Id] === id) > -1, dropAction: StrCast(this.props.Document.childDropAction), @@ -1304,7 +779,7 @@ export class SchemaTable extends React.Component { // TODO: editing border doesn't work :( return { style: { - border: !this._headerIsEditing && isFocused ? "2px solid rgb(255, 160, 160)" : "1px solid #f1efeb" + border: !this.props.headerIsEditing && isFocused ? "2px solid rgb(255, 160, 160)" : "1px solid #f1efeb" } }; } @@ -1317,18 +792,10 @@ export class SchemaTable extends React.Component { @action onExpandCollection = (collection: Doc) => this._openCollections.push(collection[Id]); @action setCellIsEditing = (isEditing: boolean) => this._cellIsEditing = isEditing; - @action setHeaderIsEditing = (isEditing: boolean) => this._headerIsEditing = isEditing; - - onPointerDown = (e: React.PointerEvent): void => { - this.props.setFocused(this.props.Document); - if (e.button === 0 && !e.altKey && !e.ctrlKey && !e.metaKey && this.props.isSelected(true)) { - e.stopPropagation(); - } - } @action onKeyDown = (e: KeyboardEvent): void => { - if (!this._cellIsEditing && !this._headerIsEditing && this.props.isFocused(this.props.Document)) {// && this.props.isSelected(true)) { + if (!this._cellIsEditing && !this.props.headerIsEditing && this.props.isFocused(this.props.Document)) {// && this.props.isSelected(true)) { const direction = e.key === "Tab" ? "tab" : e.which === 39 ? "right" : e.which === 37 ? "left" : e.which === 38 ? "up" : e.which === 40 ? "down" : ""; this._focusedCell = this.changeFocusedCellByDirection(direction, this._focusedCell.row, this._focusedCell.col); @@ -1339,8 +806,8 @@ export class SchemaTable extends React.Component { changeFocusedCellByDirection = (direction: string, curRow: number, curCol: number) => { switch (direction) { - case "tab": return { row: (curRow + 1 === this.childDocs.length ? 0 : curRow + 1), col: curCol + 1 === this.columns.length ? 0 : curCol + 1 }; - case "right": return { row: curRow, col: curCol + 1 === this.columns.length ? curCol : curCol + 1 }; + case "tab": return { row: (curRow + 1 === this.childDocs.length ? 0 : curRow + 1), col: curCol + 1 === this.props.columns.length ? 0 : curCol + 1 }; + case "right": return { row: curRow, col: curCol + 1 === this.props.columns.length ? curCol : curCol + 1 }; case "left": return { row: curRow, col: curCol === 0 ? curCol : curCol - 1 }; case "up": return { row: curRow === 0 ? curRow : curRow - 1, col: curCol }; case "down": return { row: curRow + 1 === this.childDocs.length ? curRow : curRow + 1, col: curCol }; @@ -1365,49 +832,12 @@ export class SchemaTable extends React.Component { @action createColumn = () => { let index = 0; - let found = this.columns.findIndex(col => col.heading.toUpperCase() === "New field".toUpperCase()) > -1; + let found = this.props.columns.findIndex(col => col.heading.toUpperCase() === "New field".toUpperCase()) > -1; while (found) { index++; - found = this.columns.findIndex(col => col.heading.toUpperCase() === ("New field (" + index + ")").toUpperCase()) > -1; - } - this.columns.push(new SchemaHeaderField(`New field ${index ? "(" + index + ")" : ""}`, "#f1efeb")); - } - - @undoBatch - @action - deleteColumn = (key: string) => { - const columns = this.columns; - if (columns === undefined) { - this.columns = new List([]); - } else { - const index = columns.map(c => c.heading).indexOf(key); - if (index > -1) { - columns.splice(index, 1); - this.columns = columns; - } - } - } - - @undoBatch - @action - changeColumns = (oldKey: string, newKey: string, addNew: boolean) => { - const columns = this.columns; - if (columns === undefined) { - this.columns = new List([new SchemaHeaderField(newKey, "f1efeb")]); - } else { - if (addNew) { - columns.push(new SchemaHeaderField(newKey, "f1efeb")); - this.columns = columns; - } else { - const index = columns.map(c => c.heading).indexOf(oldKey); - if (index > -1) { - const column = columns[index]; - column.setHeading(newKey); - columns[index] = column; - this.columns = columns; - } - } + found = this.props.columns.findIndex(col => col.heading.toUpperCase() === ("New field (" + index + ")").toUpperCase()) > -1; } + this.props.columns.push(new SchemaHeaderField(`New field ${index ? "(" + index + ")" : ""}`, "#f1efeb")); } getColumnType = (column: SchemaHeaderField): ColumnType => { @@ -1428,72 +858,6 @@ export class SchemaTable extends React.Component { return NumCast(typesDoc[column.heading]); } - @undoBatch - setColumnType = (columnField: SchemaHeaderField, type: ColumnType): void => { - if (columnTypes.get(columnField.heading)) return; - - const columns = this.columns; - const index = columns.indexOf(columnField); - if (index > -1) { - columnField.setType(NumCast(type)); - columns[index] = columnField; - this.columns = columns; - } - } - - @undoBatch - setColumnColor = (columnField: SchemaHeaderField, color: string): void => { - const columns = this.columns; - const index = columns.indexOf(columnField); - if (index > -1) { - columnField.setColor(color); - columns[index] = columnField; - this.columns = columns; // need to set the columns to trigger rerender - } - } - - @action - setColumns = (columns: SchemaHeaderField[]) => this.columns = columns - - @undoBatch - reorderColumns = (toMove: SchemaHeaderField, relativeTo: SchemaHeaderField, before: boolean, columnsValues: SchemaHeaderField[]) => { - const columns = [...columnsValues]; - const oldIndex = columns.indexOf(toMove); - const relIndex = columns.indexOf(relativeTo); - const newIndex = (oldIndex > relIndex && !before) ? relIndex + 1 : (oldIndex < relIndex && before) ? relIndex - 1 : relIndex; - - if (oldIndex === newIndex) return; - - columns.splice(newIndex, 0, columns.splice(oldIndex, 1)[0]); - this.columns = columns; - } - - @undoBatch - @action - setColumnSort = (columnField: SchemaHeaderField, descending: boolean | undefined) => { - const columns = this.columns; - const index = columns.findIndex(c => c.heading === columnField.heading); - const column = columns[index]; - column.setDesc(descending); - columns[index] = column; - this.columns = columns; - } - - get documentKeys() { - const docs = this.childDocs; - const keys: { [key: string]: boolean } = {}; - // bcz: ugh. this is untracked since otherwise a large collection of documents will blast the server for all their fields. - // then as each document's fields come back, we update the documents _proxies. Each time we do this, the whole schema will be - // invalidated and re-rendered. This workaround will inquire all of the document fields before the options button is clicked. - // then by the time the options button is clicked, all of the fields should be in place. If a new field is added while this menu - // is displayed (unlikely) it won't show up until something else changes. - //TODO Types - untracked(() => docs.map(doc => Doc.GetAllPrototypes(doc).map(proto => Object.keys(proto).forEach(key => keys[key] = false)))); - - this.columns.forEach(key => keys[key.heading] = true); - return Array.from(Object.keys(keys)); - } - @undoBatch @action toggleTextwrap = async () => { @@ -1541,24 +905,13 @@ export class SchemaTable extends React.Component { sorted={this.sorted} expanded={expanded} resized={this.resized} - onResizedChange={this.onResizedChange} + onResizedChange={this.props.onResizedChange} SubComponent={!hasCollectionChild ? undefined : row => (row.original.type !== "collection") ? (null) :
} />; } - onResizedChange = (newResized: Resize[], event: any) => { - const columns = this.columns; - newResized.forEach(resized => { - const index = columns.findIndex(c => c.heading === resized.id); - const column = columns[index]; - column.setWidth(resized.value); - columns[index] = column; - }); - this.columns = columns; - } - onContextMenu = (e: React.MouseEvent): void => { if (!e.isPropagationStopped() && this.props.Document[Id] !== "mainDoc") { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 // ContextMenu.Instance.addItem({ description: "Make DB", event: this.makeDB, icon: "table" }); @@ -1571,13 +924,13 @@ export class SchemaTable extends React.Component { row = row % docs.length; while (row < 0) row += docs.length; - const columns = this.columns; + const columns = this.props.columns; const doc = docs[row]; if (col === undefined) { return doc; } if (col >= 0 && col < columns.length) { - const column = this.columns[col].heading; + const column = this.props.columns[col].heading; return doc[column]; } return undefined; @@ -1658,7 +1011,7 @@ export class SchemaTable extends React.Component { render() { const preview = ""; - return
this.props.active(true) && e.stopPropagation()} onDrop={e => this.props.onDrop(e, {})} onContextMenu={this.onContextMenu} > + return
this.props.active(true) && e.stopPropagation()} onDrop={e => this.props.onDrop(e, {})} onContextMenu={this.onContextMenu} > {this.reactTable}
this.createRow()}>+ new
{!this._showDoc ? (null) : -- cgit v1.2.3-70-g09d2 From a0a73c1aeb5f786aa9505103f761e41a293828c7 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Wed, 24 Jun 2020 22:57:48 -0500 Subject: minor UI tweaks --- .../views/collections/CollectionSchemaView.tsx | 35 +++++++++++++++------- 1 file changed, 25 insertions(+), 10 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 4f87420d2..fae55b775 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -6,7 +6,7 @@ import { action, computed, observable, untracked } from "mobx"; import { observer } from "mobx-react"; import ReactTable, { CellInfo, Column, ComponentPropsGetterR, Resize, SortingRule } from "react-table"; import "react-table/react-table.css"; -import { Doc, DocListCast, Field, Opt } from "../../../fields/Doc"; +import { Doc, DocListCast, Field, Opt, LayoutSym } from "../../../fields/Doc"; import { Id } from "../../../fields/FieldSymbols"; import { List } from "../../../fields/List"; import { listSpec } from "../../../fields/Schema"; @@ -302,6 +302,9 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { this.headerOpen = !this.headerOpen; } + @action + closeHeader = () => { this.headerOpen = false; } + renderContent = (col: any) => { return (
@@ -323,7 +326,8 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { {this.renderSorting(col)} {this.renderColors(col)}
- +
} @@ -344,6 +348,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { this.columns = columns; } } + this.closeHeader(); } getPreviewTransform = (): Transform => { @@ -359,9 +364,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { position: "absolute", background: "white", transform: `translate(${this.menuCoordinates[0]}px, ${this.menuCoordinates[1] - 150}px)` }}> - {/* -
this.toggleIsOpen()}>{this.menuContent}
- */} {this.renderContent(this.col)}
); @@ -414,7 +416,9 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @computed get dividerDragger() { return this.previewWidth() === 0 ? (null) : -
; +
; } @computed @@ -492,7 +496,9 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { public get schemaToolbar() { return
-
Show Preview
+
Show Preview
; } @@ -541,7 +547,12 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { pointerEvents: !this.props.active() && !SnappingManager.GetIsDragging() ? "none" : undefined, width: this.props.PanelWidth() || "100%", height: this.props.PanelHeight() || "100%" }} > -
this.props.active(true) && e.stopPropagation()} onDrop={e => this.onExternalDrop(e, {})} ref={this.createTarget}> +
this.props.active(true) && e.stopPropagation()} + onDrop={e => this.onExternalDrop(e, {})} + ref={this.createTarget}> {this.schemaTable}
{this.dividerDragger} @@ -669,11 +680,15 @@ export class SchemaTable extends React.Component { - const menuContent =
{col.heading}
; + const menuContent =
{col.heading}
; const header =
{ this.props.openHeader(col, menuContent); }} - style={{ background: col.color }}> + style={{ + background: col.color, padding: "4px", + letterSpacing: "2px", + textTransform: "uppercase" + }}> {menuContent}
; -- cgit v1.2.3-70-g09d2 From 5151b725c0959aeec7168125c3205c1e1962b37c Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Thu, 25 Jun 2020 00:15:32 -0500 Subject: fixed translating with menu --- src/client/views/collections/CollectionSchemaView.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index fae55b775..d7038eaa9 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -116,6 +116,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { } else { this._isOpen = false; this.setHeaderIsEditing(false); + this.closeHeader(); } } @@ -358,11 +359,14 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { //anchorPoints.TOP_CENTER @computed get renderMenu() { + const scale = this.props.ScreenToLocalTransform().Scale; return (
this.props.active(true) && e.stopPropagation()} style={{ - position: "absolute", background: "white", - transform: `translate(${this.menuCoordinates[0]}px, ${this.menuCoordinates[1] - 150}px)` + position: "absolute", + background: "white", + transform: `translate(${this.menuCoordinates[0]}px, ${this.menuCoordinates[1] - 160 * scale}px)` }}> {this.renderContent(this.col)}
@@ -1026,7 +1030,8 @@ export class SchemaTable extends React.Component { render() { const preview = ""; - return
this.props.active(true) && e.stopPropagation()} onDrop={e => this.props.onDrop(e, {})} onContextMenu={this.onContextMenu} > + return
this.props.active(true) && e.stopPropagation()} + onDrop={e => this.props.onDrop(e, {})} onContextMenu={this.onContextMenu} > {this.reactTable}
this.createRow()}>+ new
{!this._showDoc ? (null) : -- cgit v1.2.3-70-g09d2 From 92ea47bc7c42966f68ccfed4f1da57eb9b352d40 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 25 Jun 2020 01:50:26 -0400 Subject: fixed placement of menus and interaction with input boxes. --- .../views/collections/CollectionSchemaHeaders.tsx | 6 +++- .../views/collections/CollectionSchemaView.tsx | 36 +++++++++++++++------- src/client/views/linking/LinkMenu.tsx | 2 +- 3 files changed, 31 insertions(+), 13 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index d9a27f355..aaa2e6096 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -374,7 +374,11 @@ export class KeysDropdown extends React.Component { return (
this.onChange(e.target.value)} onFocus={this.onFocus} onBlur={this.onBlur}> + onChange={e => this.onChange(e.target.value)} + onClick={(e) => { + this._inputRef.current!.select(); + e.stopPropagation(); + }} onFocus={this.onFocus} onBlur={this.onBlur}>
{this.renderOptions()}
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index fae55b775..feef4fec5 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -29,6 +29,7 @@ import { CollectionView } from "./CollectionView"; import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView"; import { setupMoveUpEvents, emptyFunction, returnZero, returnOne, returnFalse, returnEmptyFilter, emptyPath } from "../../../Utils"; import { SnappingManager } from "../../util/SnappingManager"; +import Measure from "react-measure"; library.add(faCog, faPlus, faSortUp, faSortDown); library.add(faTable); @@ -66,7 +67,11 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @observable pointerX: number = 0; @observable pointerY: number = 0; - @computed get menuCoordinates() { return this.props.ScreenToLocalTransform().transformPoint(this.pointerX, this.pointerY); } + @computed get menuCoordinates() { + const x = Math.max(0, Math.min(document.body.clientWidth - this._menuWidth, this.pointerX)); + const y = Math.max(0, Math.min(document.body.clientHeight - this._menuHeight, this.pointerY)); + return this.props.ScreenToLocalTransform().transformPoint(x, y); + } @computed get columns() { return Cast(this.props.Document.schemaColumns, listSpec(SchemaHeaderField), []); @@ -116,6 +121,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { } else { this._isOpen = false; this.setHeaderIsEditing(false); + this.closeHeader(); } } @@ -296,10 +302,12 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { } @action - openHeader = (col: any, menu: any) => { + openHeader = (col: any, menu: any, screenx: number, screeny: number) => { this.menuContent = menu; this.col = col; this.headerOpen = !this.headerOpen; + this.pointerX = screenx; + this.pointerY = screeny; } @action @@ -357,14 +365,21 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { //anchorPoints.TOP_CENTER + @observable _menuWidth = 0 + @observable _menuHeight = 0; @computed get renderMenu() { return (
- {this.renderContent(this.col)} + { + const dim = this.props.ScreenToLocalTransform().inverse().transformDirection(r.offset.width, r.offset.height); + this._menuWidth = dim[0]; this._menuHeight = dim[1]; + })}> + {({ measureRef }) =>
{this.renderContent(this.col)}
} +
); } @@ -407,7 +422,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { this.props.select(false); } } - this.headerOpen = false; } @computed @@ -496,9 +510,10 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { public get schemaToolbar() { return
-
Show Preview
+
+ Show Preview
; } @@ -511,7 +526,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { } this.pointerY = e.screenY; this.pointerX = e.screenX; - this.headerOpen = false; } onResizedChange = (newResized: Resize[], event: any) => { @@ -590,7 +604,7 @@ export interface SchemaTableProps { columns: SchemaHeaderField[]; documentKeys: any[]; headerIsEditing: boolean; - openHeader: (column: any, menu: any) => void; + openHeader: (column: any, menu: any, screenx: number, screeny: number) => void; onPointerDown: (e: React.PointerEvent) => void; onResizedChange: (newResized: Resize[], event: any) => void; setColumns: (columns: SchemaHeaderField[]) => void; @@ -683,7 +697,7 @@ export class SchemaTable extends React.Component { const menuContent =
{col.heading}
; const header =
{ this.props.openHeader(col, menuContent); }} + onClick={e => this.props.openHeader(col, menuContent, e.clientX, e.clientY)} style={{ background: col.color, padding: "4px", letterSpacing: "2px", diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx index 0fcc0f0b9..de1d60a09 100644 --- a/src/client/views/linking/LinkMenu.tsx +++ b/src/client/views/linking/LinkMenu.tsx @@ -28,7 +28,7 @@ export class LinkMenu extends React.Component { @action onClick = (e: PointerEvent) => { - if (!Array.from(this._linkMenuRef?.getElementsByTagName((e.target as HTMLElement).tagName) || []).includes(e.target as any)) { + if (this._linkMenuRef?.contains(e.target as any)) { DocumentLinksButton.EditLink = undefined; } } -- cgit v1.2.3-70-g09d2 From 880c818b35b6a40e724d210f4b6134809d5bea4a Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 25 Jun 2020 02:02:43 -0400 Subject: cleaned up some variables in schemaView --- .../views/collections/CollectionSchemaView.tsx | 61 +++++++++------------- 1 file changed, 24 insertions(+), 37 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 9b2d05b6a..05c62e288 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -65,11 +65,19 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @computed get tableWidth() { return this.props.PanelWidth() - 2 * this.borderWidth - this.DIVIDER_WIDTH - this.previewWidth(); } @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); } - @observable pointerX: number = 0; - @observable pointerY: number = 0; + @observable _menuWidth = 0 + @observable _menuContent: any = ""; + @observable _headerOpen = false; + @observable _isOpen = false; + @observable _node: HTMLDivElement | null = null; + @observable _headerIsEditing = false; + @observable _col: any = ""; + @observable _menuHeight = 0; + @observable _pointerX = 0; + @observable _pointerY = 0; @computed get menuCoordinates() { - const x = Math.max(0, Math.min(document.body.clientWidth - this._menuWidth, this.pointerX)); - const y = Math.max(0, Math.min(document.body.clientHeight - this._menuHeight, this.pointerY)); + const x = Math.max(0, Math.min(document.body.clientWidth - this._menuWidth, this._pointerX)); + const y = Math.max(0, Math.min(document.body.clientHeight - this._menuHeight, this._pointerY)); return this.props.ScreenToLocalTransform().transformPoint(x, y); } @@ -94,17 +102,8 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { this.columns.forEach(key => keys[key.heading] = true); return Array.from(Object.keys(keys)); } - - @observable col: any = ""; @computed get possibleKeys() { return this.documentKeys.filter(key => this.columns.findIndex(existingKey => existingKey.heading.toUpperCase() === key.toUpperCase()) === -1); } - @observable menuContent: any = ""; - @observable headerOpen: boolean = false; - - @observable private _isOpen: boolean = false; - @observable private _node: HTMLDivElement | null = null; - - @observable _headerIsEditing: boolean = false; componentDidMount() { document.addEventListener("pointerdown", this.detectClick); @@ -131,9 +130,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { this.setHeaderIsEditing(this._isOpen); } - - - changeColumnType = (type: ColumnType, col: any): void => { this.setColumnType(col, type); } @@ -181,17 +177,13 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { this.columns = columns; } - - @action setNode = (node: HTMLDivElement): void => { - if (node) { - this._node = node; - } + node && (this._node = node); } renderTypes = (col: any) => { - if (columnTypes.get(col.heading)) return <>; + if (columnTypes.get(col.heading)) return (null); const type = col.type; return ( @@ -303,15 +295,15 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @action openHeader = (col: any, menu: any, screenx: number, screeny: number) => { - this.menuContent = menu; - this.col = col; - this.headerOpen = !this.headerOpen; - this.pointerX = screenx; - this.pointerY = screeny; + this._menuContent = menu; + this._col = col; + this._headerOpen = !this._headerOpen; + this._pointerX = screenx; + this._pointerY = screeny; } @action - closeHeader = () => { this.headerOpen = false; } + closeHeader = () => { this._headerOpen = false; } renderContent = (col: any) => { return ( @@ -363,12 +355,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { return this.props.ScreenToLocalTransform().translate(- this.borderWidth - 4 - this.tableWidth, - this.borderWidth); } - //anchorPoints.TOP_CENTER - - @observable _menuWidth = 0 - @observable _menuHeight = 0; @computed get renderMenu() { - const scale = this.props.ScreenToLocalTransform().Scale; return (
this.props.active(true) && e.stopPropagation()} @@ -380,7 +367,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { const dim = this.props.ScreenToLocalTransform().inverse().transformDirection(r.offset.width, r.offset.height); this._menuWidth = dim[0]; this._menuHeight = dim[1]; })}> - {({ measureRef }) =>
{this.renderContent(this.col)}
} + {({ measureRef }) =>
{this.renderContent(this._col)}
}
); @@ -526,8 +513,8 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { if (e.button === 0 && !e.altKey && !e.ctrlKey && !e.metaKey && this.props.isSelected(true)) { e.stopPropagation(); } - this.pointerY = e.screenY; - this.pointerX = e.screenX; + this._pointerY = e.screenY; + this._pointerX = e.screenX; } onResizedChange = (newResized: Resize[], event: any) => { @@ -573,7 +560,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
{this.dividerDragger} {!this.previewWidth() ? (null) : this.previewPanel} - {this.headerOpen ? this.renderMenu : null} + {this._headerOpen ? this.renderMenu : null}
; } } -- cgit v1.2.3-70-g09d2 From f36c093f7052f755d1c3aba32b8efd29c2d76f6f Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Thu, 25 Jun 2020 09:31:19 -0500 Subject: schema table into own class --- .../views/collections/CollectionSchemaView.tsx | 511 +------------------ src/client/views/collections/SchemaTable.tsx | 550 +++++++++++++++++++++ 2 files changed, 554 insertions(+), 507 deletions(-) create mode 100644 src/client/views/collections/SchemaTable.tsx (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 05c62e288..332849526 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -22,7 +22,6 @@ import { ContextMenu } from "../ContextMenu"; import '../DocumentDecorations.scss'; import { CellProps, CollectionSchemaCell, CollectionSchemaCheckboxCell, CollectionSchemaDocCell, CollectionSchemaNumberCell, CollectionSchemaStringCell, CollectionSchemaImageCell, CollectionSchemaListCell } from "./CollectionSchemaCells"; import { CollectionSchemaAddColumnHeader, CollectionSchemaHeader, CollectionSchemaColumnMenu, KeysDropdown } from "./CollectionSchemaHeaders"; -import { MovableColumn, MovableRow } from "./CollectionSchemaMovableTableHOC"; import "./CollectionSchemaView.scss"; import { CollectionSubView } from "./CollectionSubView"; import { CollectionView } from "./CollectionView"; @@ -30,6 +29,9 @@ import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView" import { setupMoveUpEvents, emptyFunction, returnZero, returnOne, returnFalse, returnEmptyFilter, emptyPath } from "../../../Utils"; import { SnappingManager } from "../../util/SnappingManager"; import Measure from "react-measure"; +import { MovableColumn, MovableRow } from "./CollectionSchemaMovableTableHOC"; +import { SchemaTable } from "./SchemaTable"; +//import { SchemaTable } from "./SchemaTable"; library.add(faCog, faPlus, faSortUp, faSortDown); library.add(faTable); @@ -65,7 +67,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @computed get tableWidth() { return this.props.PanelWidth() - 2 * this.borderWidth - this.DIVIDER_WIDTH - this.previewWidth(); } @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); } - @observable _menuWidth = 0 + @observable _menuWidth = 0; @observable _menuContent: any = ""; @observable _headerOpen = false; @observable _isOpen = false; @@ -563,509 +565,4 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { {this._headerOpen ? this.renderMenu : null}
; } -} - - - -export interface SchemaTableProps { - Document: Doc; // child doc - dataDoc?: Doc; - PanelHeight: () => number; - PanelWidth: () => number; - childDocs?: Doc[]; - CollectionView: Opt; - ContainingCollectionView: Opt; - ContainingCollectionDoc: Opt; - fieldKey: string; - renderDepth: number; - deleteDocument: (document: Doc | Doc[]) => boolean; - addDocument: (document: Doc | Doc[]) => boolean; - moveDocument: (document: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (document: Doc | Doc[]) => boolean) => boolean; - ScreenToLocalTransform: () => Transform; - active: (outsideReaction: boolean) => boolean; - onDrop: (e: React.DragEvent, options: DocumentOptions, completed?: (() => void) | undefined) => void; - addDocTab: (document: Doc, where: string) => boolean; - pinToPres: (document: Doc) => void; - isSelected: (outsideReaction?: boolean) => boolean; - isFocused: (document: Doc) => boolean; - setFocused: (document: Doc) => void; - setPreviewDoc: (document: Doc) => void; - columns: SchemaHeaderField[]; - documentKeys: any[]; - headerIsEditing: boolean; - openHeader: (column: any, menu: any, screenx: number, screeny: number) => void; - onPointerDown: (e: React.PointerEvent) => void; - onResizedChange: (newResized: Resize[], event: any) => void; - setColumns: (columns: SchemaHeaderField[]) => void; - reorderColumns: (toMove: SchemaHeaderField, relativeTo: SchemaHeaderField, before: boolean, columnsValues: SchemaHeaderField[]) => void; -} - -@observer -export class SchemaTable extends React.Component { - private DIVIDER_WIDTH = 4; - - @observable _cellIsEditing: boolean = false; - @observable _focusedCell: { row: number, col: number } = { row: 0, col: 0 }; - @observable _openCollections: Array = []; - - @observable _showDoc: Doc | undefined; - @observable _showDataDoc: any = ""; - @observable _showDocPos: number[] = []; - - @computed get previewWidth() { return () => NumCast(this.props.Document.schemaPreviewWidth); } - @computed get previewHeight() { return () => this.props.PanelHeight() - 2 * this.borderWidth; } - @computed get tableWidth() { return this.props.PanelWidth() - 2 * this.borderWidth - this.DIVIDER_WIDTH - this.previewWidth(); } - - @computed get childDocs() { - if (this.props.childDocs) return this.props.childDocs; - - const doc = this.props.dataDoc ? this.props.dataDoc : this.props.Document; - return DocListCast(doc[this.props.fieldKey]); - } - set childDocs(docs: Doc[]) { - const doc = this.props.dataDoc ? this.props.dataDoc : this.props.Document; - doc[this.props.fieldKey] = new List(docs); - } - - @computed get textWrappedRows() { - return Cast(this.props.Document.textwrappedSchemaRows, listSpec("string"), []); - } - set textWrappedRows(textWrappedRows: string[]) { - this.props.Document.textwrappedSchemaRows = new List(textWrappedRows); - } - - @computed get resized(): { id: string, value: number }[] { - return this.props.columns.reduce((resized, shf) => { - (shf.width > -1) && resized.push({ id: shf.heading, value: shf.width }); - return resized; - }, [] as { id: string, value: number }[]); - } - @computed get sorted(): SortingRule[] { - return this.props.columns.reduce((sorted, shf) => { - shf.desc && sorted.push({ id: shf.heading, desc: shf.desc }); - return sorted; - }, [] as SortingRule[]); - } - - @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); } - @computed get tableColumns(): Column[] { - - const possibleKeys = this.props.documentKeys.filter(key => this.props.columns.findIndex(existingKey => existingKey.heading.toUpperCase() === key.toUpperCase()) === -1); - const columns: Column[] = []; - const tableIsFocused = this.props.isFocused(this.props.Document); - const focusedRow = this._focusedCell.row; - const focusedCol = this._focusedCell.col; - const isEditable = !this.props.headerIsEditing; - - if (this.childDocs.reduce((found, doc) => found || doc.type === "collection", false)) { - columns.push( - { - expander: true, - Header: "", - width: 30, - Expander: (rowInfo) => { - if (rowInfo.original.type === "collection") { - if (rowInfo.isExpanded) return
this.onCloseCollection(rowInfo.original)}>
; - if (!rowInfo.isExpanded) return
this.onExpandCollection(rowInfo.original)}>
; - } else { - return null; - } - } - } - ); - } - - const cols = this.props.columns.map(col => { - - const icon: IconProp = this.getColumnType(col) === ColumnType.Number ? "hashtag" : this.getColumnType(col) === ColumnType.String ? "font" : - this.getColumnType(col) === ColumnType.Boolean ? "check-square" : this.getColumnType(col) === ColumnType.Doc ? "file" : - this.getColumnType(col) === ColumnType.Image ? "image" : this.getColumnType(col) === ColumnType.List ? "list-ul" : "align-justify"; - - - - const menuContent =
{col.heading}
; - const header = -
this.props.openHeader(col, menuContent, e.clientX, e.clientY)} - style={{ - background: col.color, padding: "4px", - letterSpacing: "2px", - textTransform: "uppercase" - }}> - {menuContent} -
; - - return { - Header: , - accessor: (doc: Doc) => doc ? doc[col.heading] : 0, - id: col.heading, - Cell: (rowProps: CellInfo) => { - const rowIndex = rowProps.index; - const columnIndex = this.props.columns.map(c => c.heading).indexOf(rowProps.column.id!); - const isFocused = focusedRow === rowIndex && focusedCol === columnIndex && tableIsFocused; - - const props: CellProps = { - row: rowIndex, - col: columnIndex, - rowProps: rowProps, - isFocused: isFocused, - changeFocusedCellByIndex: this.changeFocusedCellByIndex, - CollectionView: this.props.CollectionView, - ContainingCollection: this.props.ContainingCollectionView, - Document: this.props.Document, - fieldKey: this.props.fieldKey, - renderDepth: this.props.renderDepth, - addDocTab: this.props.addDocTab, - pinToPres: this.props.pinToPres, - moveDocument: this.props.moveDocument, - setIsEditing: this.setCellIsEditing, - isEditable: isEditable, - setPreviewDoc: this.props.setPreviewDoc, - setComputed: this.setComputed, - getField: this.getField, - showDoc: this.showDoc, - }; - - const colType = this.getColumnType(col); - if (colType === ColumnType.Number) return ; - if (colType === ColumnType.String) return ; - if (colType === ColumnType.Boolean) return ; - if (colType === ColumnType.Doc) return ; - if (colType === ColumnType.Image) return ; - if (colType === ColumnType.List) return ; - return ; - }, - minWidth: 200, - }; - }); - columns.push(...cols); - - columns.push({ - Header: , - accessor: (doc: Doc) => 0, - id: "add", - Cell: (rowProps: CellInfo) => <>, - width: 28, - resizable: false - }); - return columns; - } - - constructor(props: SchemaTableProps) { - super(props); - // convert old schema columns (list of strings) into new schema columns (list of schema header fields) - const oldSchemaColumns = Cast(this.props.Document.schemaColumns, listSpec("string"), []); - if (oldSchemaColumns && oldSchemaColumns.length && typeof oldSchemaColumns[0] !== "object") { - const newSchemaColumns = oldSchemaColumns.map(i => typeof i === "string" ? new SchemaHeaderField(i, "#f1efeb") : i); - this.props.Document.schemaColumns = new List(newSchemaColumns); - } - } - - componentDidMount() { - document.addEventListener("keydown", this.onKeyDown); - } - - componentWillUnmount() { - document.removeEventListener("keydown", this.onKeyDown); - } - - tableAddDoc = (doc: Doc, relativeTo?: Doc, before?: boolean) => { - return Doc.AddDocToList(this.props.Document, this.props.fieldKey, doc, relativeTo, before); - } - - private getTrProps: ComponentPropsGetterR = (state, rowInfo) => { - return !rowInfo ? {} : { - ScreenToLocalTransform: this.props.ScreenToLocalTransform, - addDoc: this.tableAddDoc, - removeDoc: this.props.deleteDocument, - rowInfo, - rowFocused: !this.props.headerIsEditing && rowInfo.index === this._focusedCell.row && this.props.isFocused(this.props.Document), - textWrapRow: this.toggleTextWrapRow, - rowWrapped: this.textWrappedRows.findIndex(id => rowInfo.original[Id] === id) > -1, - dropAction: StrCast(this.props.Document.childDropAction), - addDocTab: this.props.addDocTab - }; - } - - private getTdProps: ComponentPropsGetterR = (state, rowInfo, column, instance) => { - if (!rowInfo || column) return {}; - - const row = rowInfo.index; - //@ts-ignore - const col = this.columns.map(c => c.heading).indexOf(column!.id); - const isFocused = this._focusedCell.row === row && this._focusedCell.col === col && this.props.isFocused(this.props.Document); - // TODO: editing border doesn't work :( - return { - style: { - border: !this.props.headerIsEditing && isFocused ? "2px solid rgb(255, 160, 160)" : "1px solid #f1efeb" - } - }; - } - - @action - onCloseCollection = (collection: Doc): void => { - const index = this._openCollections.findIndex(col => col === collection[Id]); - if (index > -1) this._openCollections.splice(index, 1); - } - - @action onExpandCollection = (collection: Doc) => this._openCollections.push(collection[Id]); - @action setCellIsEditing = (isEditing: boolean) => this._cellIsEditing = isEditing; - - @action - onKeyDown = (e: KeyboardEvent): void => { - if (!this._cellIsEditing && !this.props.headerIsEditing && this.props.isFocused(this.props.Document)) {// && this.props.isSelected(true)) { - const direction = e.key === "Tab" ? "tab" : e.which === 39 ? "right" : e.which === 37 ? "left" : e.which === 38 ? "up" : e.which === 40 ? "down" : ""; - this._focusedCell = this.changeFocusedCellByDirection(direction, this._focusedCell.row, this._focusedCell.col); - - const pdoc = FieldValue(this.childDocs[this._focusedCell.row]); - pdoc && this.props.setPreviewDoc(pdoc); - } - } - - changeFocusedCellByDirection = (direction: string, curRow: number, curCol: number) => { - switch (direction) { - case "tab": return { row: (curRow + 1 === this.childDocs.length ? 0 : curRow + 1), col: curCol + 1 === this.props.columns.length ? 0 : curCol + 1 }; - case "right": return { row: curRow, col: curCol + 1 === this.props.columns.length ? curCol : curCol + 1 }; - case "left": return { row: curRow, col: curCol === 0 ? curCol : curCol - 1 }; - case "up": return { row: curRow === 0 ? curRow : curRow - 1, col: curCol }; - case "down": return { row: curRow + 1 === this.childDocs.length ? curRow : curRow + 1, col: curCol }; - } - return this._focusedCell; - } - - @action - changeFocusedCellByIndex = (row: number, col: number): void => { - if (this._focusedCell.row !== row || this._focusedCell.col !== col) { - this._focusedCell = { row: row, col: col }; - } - this.props.setFocused(this.props.Document); - } - - @undoBatch - createRow = () => { - this.props.addDocument(Docs.Create.TextDocument("", { title: "", _width: 100, _height: 30 })); - } - - @undoBatch - @action - createColumn = () => { - let index = 0; - let found = this.props.columns.findIndex(col => col.heading.toUpperCase() === "New field".toUpperCase()) > -1; - while (found) { - index++; - found = this.props.columns.findIndex(col => col.heading.toUpperCase() === ("New field (" + index + ")").toUpperCase()) > -1; - } - this.props.columns.push(new SchemaHeaderField(`New field ${index ? "(" + index + ")" : ""}`, "#f1efeb")); - } - - getColumnType = (column: SchemaHeaderField): ColumnType => { - // added functionality to convert old column type stuff to new column type stuff -syip - if (column.type && column.type !== 0) { - return column.type; - } - if (columnTypes.get(column.heading)) { - column.type = columnTypes.get(column.heading)!; - return columnTypes.get(column.heading)!; - } - const typesDoc = FieldValue(Cast(this.props.Document.schemaColumnTypes, Doc)); - if (!typesDoc) { - column.type = ColumnType.Any; - return ColumnType.Any; - } - column.type = NumCast(typesDoc[column.heading]); - return NumCast(typesDoc[column.heading]); - } - - @undoBatch - @action - toggleTextwrap = async () => { - const textwrappedRows = Cast(this.props.Document.textwrappedSchemaRows, listSpec("string"), []); - if (textwrappedRows.length) { - this.props.Document.textwrappedSchemaRows = new List([]); - } else { - const docs = DocListCast(this.props.Document[this.props.fieldKey]); - const allRows = docs instanceof Doc ? [docs[Id]] : docs.map(doc => doc[Id]); - this.props.Document.textwrappedSchemaRows = new List(allRows); - } - } - - @action - toggleTextWrapRow = (doc: Doc): void => { - const textWrapped = this.textWrappedRows; - const index = textWrapped.findIndex(id => doc[Id] === id); - - index > -1 ? textWrapped.splice(index, 1) : textWrapped.push(doc[Id]); - - this.textWrappedRows = textWrapped; - } - - @computed - get reactTable() { - const children = this.childDocs; - const hasCollectionChild = children.reduce((found, doc) => found || doc.type === "collection", false); - const expandedRowsList = this._openCollections.map(col => children.findIndex(doc => doc[Id] === col).toString()); - const expanded = {}; - //@ts-ignore - expandedRowsList.forEach(row => expanded[row] = true); - const rerender = [...this.textWrappedRows]; // TODO: get component to rerender on text wrap change without needign to console.log :(((( - - return (row.original.type !== "collection") ? (null) : -
} - - />; - } - - onContextMenu = (e: React.MouseEvent): void => { - if (!e.isPropagationStopped() && this.props.Document[Id] !== "mainDoc") { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 - // ContextMenu.Instance.addItem({ description: "Make DB", event: this.makeDB, icon: "table" }); - ContextMenu.Instance.addItem({ description: "Toggle text wrapping", event: this.toggleTextwrap, icon: "table" }); - } - } - - getField = (row: number, col?: number) => { - const docs = this.childDocs; - - row = row % docs.length; - while (row < 0) row += docs.length; - const columns = this.props.columns; - const doc = docs[row]; - if (col === undefined) { - return doc; - } - if (col >= 0 && col < columns.length) { - const column = this.props.columns[col].heading; - return doc[column]; - } - return undefined; - } - - createTransformer = (row: number, col: number): Transformer => { - const self = this; - const captures: { [name: string]: Field } = {}; - - const transformer: ts.TransformerFactory = context => { - return root => { - function visit(node: ts.Node) { - node = ts.visitEachChild(node, visit, context); - if (ts.isIdentifier(node)) { - const isntPropAccess = !ts.isPropertyAccessExpression(node.parent) || node.parent.expression === node; - const isntPropAssign = !ts.isPropertyAssignment(node.parent) || node.parent.name !== node; - if (isntPropAccess && isntPropAssign) { - if (node.text === "$r") { - return ts.createNumericLiteral(row.toString()); - } else if (node.text === "$c") { - return ts.createNumericLiteral(col.toString()); - } else if (node.text === "$") { - if (ts.isCallExpression(node.parent)) { - // captures.doc = self.props.Document; - // captures.key = self.props.fieldKey; - } - } - } - } - - return node; - } - return ts.visitNode(root, visit); - }; - }; - - // const getVars = () => { - // return { capturedVariables: captures }; - // }; - - return { transformer, /*getVars*/ }; - } - - setComputed = (script: string, doc: Doc, field: string, row: number, col: number): boolean => { - script = - `const $ = (row:number, col?:number) => { - if(col === undefined) { - return (doc as any)[key][row + ${row}]; - } - return (doc as any)[key][row + ${row}][(doc as any).schemaColumns[col + ${col}].heading]; - } - return ${script}`; - const compiled = CompileScript(script, { params: { this: Doc.name }, capturedVariables: { doc: this.props.Document, key: this.props.fieldKey }, typecheck: false, transformer: this.createTransformer(row, col) }); - if (compiled.compiled) { - doc[field] = new ComputedField(compiled); - return true; - } - return false; - } - - @action - showDoc = (doc: Doc | undefined, dataDoc?: Doc, screenX?: number, screenY?: number) => { - this._showDoc = doc; - if (dataDoc && screenX && screenY) { - this._showDocPos = this.props.ScreenToLocalTransform().transformPoint(screenX, screenY); - } - } - - onOpenClick = () => { - if (this._showDoc) { - this.props.addDocTab(this._showDoc, "onRight"); - } - } - - getPreviewTransform = (): Transform => { - return this.props.ScreenToLocalTransform().translate(- this.borderWidth - 4 - this.tableWidth, - this.borderWidth); - } - - render() { - const preview = ""; - return
this.props.active(true) && e.stopPropagation()} - onDrop={e => this.props.onDrop(e, {})} onContextMenu={this.onContextMenu} > - {this.reactTable} -
this.createRow()}>+ new
- {!this._showDoc ? (null) : -
{ this.onOpenClick(); }} - style={{ - position: "absolute", width: 150, height: 150, - background: "dimGray", display: "block", top: 0, left: 0, - transform: `translate(${this._showDocPos[0]}px, ${this._showDocPos[1] - 180}px)` - }} - ref="overlay"> false} - PanelWidth={() => 150} - PanelHeight={() => 150} - ScreenToLocalTransform={this.getPreviewTransform} - docFilters={returnEmptyFilter} - ContainingCollectionDoc={this.props.CollectionView?.props.Document} - ContainingCollectionView={this.props.CollectionView} - moveDocument={this.props.moveDocument} - parentActive={this.props.active} - whenActiveChanged={emptyFunction} - addDocTab={this.props.addDocTab} - pinToPres={this.props.pinToPres} - bringToFront={returnFalse} - ContentScaling={returnOne}> - -
} -
; - } } \ No newline at end of file diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx new file mode 100644 index 000000000..97d4bb303 --- /dev/null +++ b/src/client/views/collections/SchemaTable.tsx @@ -0,0 +1,550 @@ +import React = require("react"); +import { IconProp } from '@fortawesome/fontawesome-svg-core'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { action, computed, observable } from "mobx"; +import { observer } from "mobx-react"; +import ReactTable, { CellInfo, Column, ComponentPropsGetterR, Resize, SortingRule } from "react-table"; +import "react-table/react-table.css"; +import { Doc, DocListCast, Field, Opt } from "../../../fields/Doc"; +import { Id } from "../../../fields/FieldSymbols"; +import { List } from "../../../fields/List"; +import { listSpec } from "../../../fields/Schema"; +import { SchemaHeaderField } from "../../../fields/SchemaHeaderField"; +import { ComputedField } from "../../../fields/ScriptField"; +import { Cast, FieldValue, NumCast, StrCast, BoolCast } from "../../../fields/Types"; +import { Docs, DocumentOptions } from "../../documents/Documents"; +import { CompileScript, Transformer, ts } from "../../util/Scripting"; +import { Transform } from "../../util/Transform"; +import { undoBatch } from "../../util/UndoManager"; +import { COLLECTION_BORDER_WIDTH } from '../../views/globalCssVariables.scss'; +import { ContextMenu } from "../ContextMenu"; +import '../DocumentDecorations.scss'; +import { CellProps, CollectionSchemaCell, CollectionSchemaCheckboxCell, CollectionSchemaDocCell, CollectionSchemaNumberCell, CollectionSchemaStringCell, CollectionSchemaImageCell, CollectionSchemaListCell } from "./CollectionSchemaCells"; +import { CollectionSchemaAddColumnHeader } from "./CollectionSchemaHeaders"; +import { MovableColumn, MovableRow } from "./CollectionSchemaMovableTableHOC"; +import "./CollectionSchemaView.scss"; +import { CollectionView } from "./CollectionView"; +import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView"; +import { emptyFunction, returnZero, returnOne, returnFalse, returnEmptyFilter, emptyPath } from "../../../Utils"; + + +enum ColumnType { + Any, + Number, + String, + Boolean, + Doc, + Image, + List +} + +// this map should be used for keys that should have a const type of value +const columnTypes: Map = new Map([ + ["title", ColumnType.String], + ["x", ColumnType.Number], ["y", ColumnType.Number], ["_width", ColumnType.Number], ["_height", ColumnType.Number], + ["_nativeWidth", ColumnType.Number], ["_nativeHeight", ColumnType.Number], ["isPrototype", ColumnType.Boolean], + ["page", ColumnType.Number], ["curPage", ColumnType.Number], ["currentTimecode", ColumnType.Number], ["zIndex", ColumnType.Number] +]); + +export interface SchemaTableProps { + Document: Doc; // child doc + dataDoc?: Doc; + PanelHeight: () => number; + PanelWidth: () => number; + childDocs?: Doc[]; + CollectionView: Opt; + ContainingCollectionView: Opt; + ContainingCollectionDoc: Opt; + fieldKey: string; + renderDepth: number; + deleteDocument: (document: Doc | Doc[]) => boolean; + addDocument: (document: Doc | Doc[]) => boolean; + moveDocument: (document: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (document: Doc | Doc[]) => boolean) => boolean; + ScreenToLocalTransform: () => Transform; + active: (outsideReaction: boolean) => boolean; + onDrop: (e: React.DragEvent, options: DocumentOptions, completed?: (() => void) | undefined) => void; + addDocTab: (document: Doc, where: string) => boolean; + pinToPres: (document: Doc) => void; + isSelected: (outsideReaction?: boolean) => boolean; + isFocused: (document: Doc) => boolean; + setFocused: (document: Doc) => void; + setPreviewDoc: (document: Doc) => void; + columns: SchemaHeaderField[]; + documentKeys: any[]; + headerIsEditing: boolean; + openHeader: (column: any, menu: any, screenx: number, screeny: number) => void; + onPointerDown: (e: React.PointerEvent) => void; + onResizedChange: (newResized: Resize[], event: any) => void; + setColumns: (columns: SchemaHeaderField[]) => void; + reorderColumns: (toMove: SchemaHeaderField, relativeTo: SchemaHeaderField, before: boolean, columnsValues: SchemaHeaderField[]) => void; +} + +@observer +export class SchemaTable extends React.Component { + private DIVIDER_WIDTH = 4; + + @observable _cellIsEditing: boolean = false; + @observable _focusedCell: { row: number, col: number } = { row: 0, col: 0 }; + @observable _openCollections: Array = []; + + @observable _showDoc: Doc | undefined; + @observable _showDataDoc: any = ""; + @observable _showDocPos: number[] = []; + + @computed get previewWidth() { return () => NumCast(this.props.Document.schemaPreviewWidth); } + @computed get previewHeight() { return () => this.props.PanelHeight() - 2 * this.borderWidth; } + @computed get tableWidth() { return this.props.PanelWidth() - 2 * this.borderWidth - this.DIVIDER_WIDTH - this.previewWidth(); } + + @computed get childDocs() { + if (this.props.childDocs) return this.props.childDocs; + + const doc = this.props.dataDoc ? this.props.dataDoc : this.props.Document; + return DocListCast(doc[this.props.fieldKey]); + } + set childDocs(docs: Doc[]) { + const doc = this.props.dataDoc ? this.props.dataDoc : this.props.Document; + doc[this.props.fieldKey] = new List(docs); + } + + @computed get textWrappedRows() { + return Cast(this.props.Document.textwrappedSchemaRows, listSpec("string"), []); + } + set textWrappedRows(textWrappedRows: string[]) { + this.props.Document.textwrappedSchemaRows = new List(textWrappedRows); + } + + @computed get resized(): { id: string, value: number }[] { + return this.props.columns.reduce((resized, shf) => { + (shf.width > -1) && resized.push({ id: shf.heading, value: shf.width }); + return resized; + }, [] as { id: string, value: number }[]); + } + @computed get sorted(): SortingRule[] { + return this.props.columns.reduce((sorted, shf) => { + shf.desc && sorted.push({ id: shf.heading, desc: shf.desc }); + return sorted; + }, [] as SortingRule[]); + } + + @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); } + @computed get tableColumns(): Column[] { + + const possibleKeys = this.props.documentKeys.filter(key => this.props.columns.findIndex(existingKey => existingKey.heading.toUpperCase() === key.toUpperCase()) === -1); + const columns: Column[] = []; + const tableIsFocused = this.props.isFocused(this.props.Document); + const focusedRow = this._focusedCell.row; + const focusedCol = this._focusedCell.col; + const isEditable = !this.props.headerIsEditing; + + if (this.childDocs.reduce((found, doc) => found || doc.type === "collection", false)) { + columns.push( + { + expander: true, + Header: "", + width: 30, + Expander: (rowInfo) => { + if (rowInfo.original.type === "collection") { + if (rowInfo.isExpanded) return
this.onCloseCollection(rowInfo.original)}>
; + if (!rowInfo.isExpanded) return
this.onExpandCollection(rowInfo.original)}>
; + } else { + return null; + } + } + } + ); + } + + const cols = this.props.columns.map(col => { + + const icon: IconProp = this.getColumnType(col) === ColumnType.Number ? "hashtag" : this.getColumnType(col) === ColumnType.String ? "font" : + this.getColumnType(col) === ColumnType.Boolean ? "check-square" : this.getColumnType(col) === ColumnType.Doc ? "file" : + this.getColumnType(col) === ColumnType.Image ? "image" : this.getColumnType(col) === ColumnType.List ? "list-ul" : "align-justify"; + + + + const menuContent =
{col.heading}
; + const header = +
this.props.openHeader(col, menuContent, e.clientX, e.clientY)} + style={{ + background: col.color, padding: "4px", + letterSpacing: "2px", + textTransform: "uppercase" + }}> + {menuContent} +
; + + return { + Header: , + accessor: (doc: Doc) => doc ? doc[col.heading] : 0, + id: col.heading, + Cell: (rowProps: CellInfo) => { + const rowIndex = rowProps.index; + const columnIndex = this.props.columns.map(c => c.heading).indexOf(rowProps.column.id!); + const isFocused = focusedRow === rowIndex && focusedCol === columnIndex && tableIsFocused; + + const props: CellProps = { + row: rowIndex, + col: columnIndex, + rowProps: rowProps, + isFocused: isFocused, + changeFocusedCellByIndex: this.changeFocusedCellByIndex, + CollectionView: this.props.CollectionView, + ContainingCollection: this.props.ContainingCollectionView, + Document: this.props.Document, + fieldKey: this.props.fieldKey, + renderDepth: this.props.renderDepth, + addDocTab: this.props.addDocTab, + pinToPres: this.props.pinToPres, + moveDocument: this.props.moveDocument, + setIsEditing: this.setCellIsEditing, + isEditable: isEditable, + setPreviewDoc: this.props.setPreviewDoc, + setComputed: this.setComputed, + getField: this.getField, + showDoc: this.showDoc, + }; + + const colType = this.getColumnType(col); + if (colType === ColumnType.Number) return ; + if (colType === ColumnType.String) return ; + if (colType === ColumnType.Boolean) return ; + if (colType === ColumnType.Doc) return ; + if (colType === ColumnType.Image) return ; + if (colType === ColumnType.List) return ; + return ; + }, + minWidth: 200, + }; + }); + columns.push(...cols); + + columns.push({ + Header: , + accessor: (doc: Doc) => 0, + id: "add", + Cell: (rowProps: CellInfo) => <>, + width: 28, + resizable: false + }); + return columns; + } + + constructor(props: SchemaTableProps) { + super(props); + // convert old schema columns (list of strings) into new schema columns (list of schema header fields) + const oldSchemaColumns = Cast(this.props.Document.schemaColumns, listSpec("string"), []); + if (oldSchemaColumns && oldSchemaColumns.length && typeof oldSchemaColumns[0] !== "object") { + const newSchemaColumns = oldSchemaColumns.map(i => typeof i === "string" ? new SchemaHeaderField(i, "#f1efeb") : i); + this.props.Document.schemaColumns = new List(newSchemaColumns); + } + } + + componentDidMount() { + document.addEventListener("keydown", this.onKeyDown); + } + + componentWillUnmount() { + document.removeEventListener("keydown", this.onKeyDown); + } + + tableAddDoc = (doc: Doc, relativeTo?: Doc, before?: boolean) => { + return Doc.AddDocToList(this.props.Document, this.props.fieldKey, doc, relativeTo, before); + } + + private getTrProps: ComponentPropsGetterR = (state, rowInfo) => { + return !rowInfo ? {} : { + ScreenToLocalTransform: this.props.ScreenToLocalTransform, + addDoc: this.tableAddDoc, + removeDoc: this.props.deleteDocument, + rowInfo, + rowFocused: !this.props.headerIsEditing && rowInfo.index === this._focusedCell.row && this.props.isFocused(this.props.Document), + textWrapRow: this.toggleTextWrapRow, + rowWrapped: this.textWrappedRows.findIndex(id => rowInfo.original[Id] === id) > -1, + dropAction: StrCast(this.props.Document.childDropAction), + addDocTab: this.props.addDocTab + }; + } + + private getTdProps: ComponentPropsGetterR = (state, rowInfo, column, instance) => { + if (!rowInfo || column) return {}; + + const row = rowInfo.index; + //@ts-ignore + const col = this.columns.map(c => c.heading).indexOf(column!.id); + const isFocused = this._focusedCell.row === row && this._focusedCell.col === col && this.props.isFocused(this.props.Document); + // TODO: editing border doesn't work :( + return { + style: { + border: !this.props.headerIsEditing && isFocused ? "2px solid rgb(255, 160, 160)" : "1px solid #f1efeb" + } + }; + } + + @action + onCloseCollection = (collection: Doc): void => { + const index = this._openCollections.findIndex(col => col === collection[Id]); + if (index > -1) this._openCollections.splice(index, 1); + } + + @action onExpandCollection = (collection: Doc) => this._openCollections.push(collection[Id]); + @action setCellIsEditing = (isEditing: boolean) => this._cellIsEditing = isEditing; + + @action + onKeyDown = (e: KeyboardEvent): void => { + if (!this._cellIsEditing && !this.props.headerIsEditing && this.props.isFocused(this.props.Document)) {// && this.props.isSelected(true)) { + const direction = e.key === "Tab" ? "tab" : e.which === 39 ? "right" : e.which === 37 ? "left" : e.which === 38 ? "up" : e.which === 40 ? "down" : ""; + this._focusedCell = this.changeFocusedCellByDirection(direction, this._focusedCell.row, this._focusedCell.col); + + const pdoc = FieldValue(this.childDocs[this._focusedCell.row]); + pdoc && this.props.setPreviewDoc(pdoc); + } + } + + changeFocusedCellByDirection = (direction: string, curRow: number, curCol: number) => { + switch (direction) { + case "tab": return { row: (curRow + 1 === this.childDocs.length ? 0 : curRow + 1), col: curCol + 1 === this.props.columns.length ? 0 : curCol + 1 }; + case "right": return { row: curRow, col: curCol + 1 === this.props.columns.length ? curCol : curCol + 1 }; + case "left": return { row: curRow, col: curCol === 0 ? curCol : curCol - 1 }; + case "up": return { row: curRow === 0 ? curRow : curRow - 1, col: curCol }; + case "down": return { row: curRow + 1 === this.childDocs.length ? curRow : curRow + 1, col: curCol }; + } + return this._focusedCell; + } + + @action + changeFocusedCellByIndex = (row: number, col: number): void => { + if (this._focusedCell.row !== row || this._focusedCell.col !== col) { + this._focusedCell = { row: row, col: col }; + } + this.props.setFocused(this.props.Document); + } + + @undoBatch + createRow = () => { + this.props.addDocument(Docs.Create.TextDocument("", { title: "", _width: 100, _height: 30 })); + } + + @undoBatch + @action + createColumn = () => { + let index = 0; + let found = this.props.columns.findIndex(col => col.heading.toUpperCase() === "New field".toUpperCase()) > -1; + while (found) { + index++; + found = this.props.columns.findIndex(col => col.heading.toUpperCase() === ("New field (" + index + ")").toUpperCase()) > -1; + } + this.props.columns.push(new SchemaHeaderField(`New field ${index ? "(" + index + ")" : ""}`, "#f1efeb")); + } + + getColumnType = (column: SchemaHeaderField): ColumnType => { + // added functionality to convert old column type stuff to new column type stuff -syip + if (column.type && column.type !== 0) { + return column.type; + } + if (columnTypes.get(column.heading)) { + column.type = columnTypes.get(column.heading)!; + return columnTypes.get(column.heading)!; + } + const typesDoc = FieldValue(Cast(this.props.Document.schemaColumnTypes, Doc)); + if (!typesDoc) { + column.type = ColumnType.Any; + return ColumnType.Any; + } + column.type = NumCast(typesDoc[column.heading]); + return NumCast(typesDoc[column.heading]); + } + + @undoBatch + @action + toggleTextwrap = async () => { + const textwrappedRows = Cast(this.props.Document.textwrappedSchemaRows, listSpec("string"), []); + if (textwrappedRows.length) { + this.props.Document.textwrappedSchemaRows = new List([]); + } else { + const docs = DocListCast(this.props.Document[this.props.fieldKey]); + const allRows = docs instanceof Doc ? [docs[Id]] : docs.map(doc => doc[Id]); + this.props.Document.textwrappedSchemaRows = new List(allRows); + } + } + + @action + toggleTextWrapRow = (doc: Doc): void => { + const textWrapped = this.textWrappedRows; + const index = textWrapped.findIndex(id => doc[Id] === id); + + index > -1 ? textWrapped.splice(index, 1) : textWrapped.push(doc[Id]); + + this.textWrappedRows = textWrapped; + } + + @computed + get reactTable() { + const children = this.childDocs; + const hasCollectionChild = children.reduce((found, doc) => found || doc.type === "collection", false); + const expandedRowsList = this._openCollections.map(col => children.findIndex(doc => doc[Id] === col).toString()); + const expanded = {}; + //@ts-ignore + expandedRowsList.forEach(row => expanded[row] = true); + const rerender = [...this.textWrappedRows]; // TODO: get component to rerender on text wrap change without needign to console.log :(((( + + return (row.original.type !== "collection") ? (null) : +
} + + />; + } + + onContextMenu = (e: React.MouseEvent): void => { + if (!e.isPropagationStopped() && this.props.Document[Id] !== "mainDoc") { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7 + // ContextMenu.Instance.addItem({ description: "Make DB", event: this.makeDB, icon: "table" }); + ContextMenu.Instance.addItem({ description: "Toggle text wrapping", event: this.toggleTextwrap, icon: "table" }); + } + } + + getField = (row: number, col?: number) => { + const docs = this.childDocs; + + row = row % docs.length; + while (row < 0) row += docs.length; + const columns = this.props.columns; + const doc = docs[row]; + if (col === undefined) { + return doc; + } + if (col >= 0 && col < columns.length) { + const column = this.props.columns[col].heading; + return doc[column]; + } + return undefined; + } + + createTransformer = (row: number, col: number): Transformer => { + const self = this; + const captures: { [name: string]: Field } = {}; + + const transformer: ts.TransformerFactory = context => { + return root => { + function visit(node: ts.Node) { + node = ts.visitEachChild(node, visit, context); + if (ts.isIdentifier(node)) { + const isntPropAccess = !ts.isPropertyAccessExpression(node.parent) || node.parent.expression === node; + const isntPropAssign = !ts.isPropertyAssignment(node.parent) || node.parent.name !== node; + if (isntPropAccess && isntPropAssign) { + if (node.text === "$r") { + return ts.createNumericLiteral(row.toString()); + } else if (node.text === "$c") { + return ts.createNumericLiteral(col.toString()); + } else if (node.text === "$") { + if (ts.isCallExpression(node.parent)) { + // captures.doc = self.props.Document; + // captures.key = self.props.fieldKey; + } + } + } + } + + return node; + } + return ts.visitNode(root, visit); + }; + }; + + // const getVars = () => { + // return { capturedVariables: captures }; + // }; + + return { transformer, /*getVars*/ }; + } + + setComputed = (script: string, doc: Doc, field: string, row: number, col: number): boolean => { + script = + `const $ = (row:number, col?:number) => { + if(col === undefined) { + return (doc as any)[key][row + ${row}]; + } + return (doc as any)[key][row + ${row}][(doc as any).schemaColumns[col + ${col}].heading]; + } + return ${script}`; + const compiled = CompileScript(script, { params: { this: Doc.name }, capturedVariables: { doc: this.props.Document, key: this.props.fieldKey }, typecheck: false, transformer: this.createTransformer(row, col) }); + if (compiled.compiled) { + doc[field] = new ComputedField(compiled); + return true; + } + return false; + } + + @action + showDoc = (doc: Doc | undefined, dataDoc?: Doc, screenX?: number, screenY?: number) => { + this._showDoc = doc; + if (dataDoc && screenX && screenY) { + this._showDocPos = this.props.ScreenToLocalTransform().transformPoint(screenX, screenY); + } + } + + onOpenClick = () => { + if (this._showDoc) { + this.props.addDocTab(this._showDoc, "onRight"); + } + } + + getPreviewTransform = (): Transform => { + return this.props.ScreenToLocalTransform().translate(- this.borderWidth - 4 - this.tableWidth, - this.borderWidth); + } + + render() { + const preview = ""; + return
this.props.active(true) && e.stopPropagation()} + onDrop={e => this.props.onDrop(e, {})} onContextMenu={this.onContextMenu} > + {this.reactTable} +
this.createRow()}>+ new
+ {!this._showDoc ? (null) : +
{ this.onOpenClick(); }} + style={{ + position: "absolute", width: 150, height: 150, + background: "dimGray", display: "block", top: 0, left: 0, + transform: `translate(${this._showDocPos[0]}px, ${this._showDocPos[1] - 180}px)` + }} + ref="overlay"> false} + PanelWidth={() => 150} + PanelHeight={() => 150} + ScreenToLocalTransform={this.getPreviewTransform} + docFilters={returnEmptyFilter} + ContainingCollectionDoc={this.props.CollectionView?.props.Document} + ContainingCollectionView={this.props.CollectionView} + moveDocument={this.props.moveDocument} + parentActive={this.props.active} + whenActiveChanged={emptyFunction} + addDocTab={this.props.addDocTab} + pinToPres={this.props.pinToPres} + bringToFront={returnFalse} + ContentScaling={returnOne}> + +
} +
; + } +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From b32aa12c76d673bb0cf339741398a1fd1441167c Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Thu, 25 Jun 2020 09:45:45 -0500 Subject: minor cleanup --- .../views/collections/CollectionSchemaView.tsx | 23 +++++++--------------- 1 file changed, 7 insertions(+), 16 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 332849526..2e4d10f1d 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -1,37 +1,29 @@ import React = require("react"); -import { library, IconProp } from '@fortawesome/fontawesome-svg-core'; +import { library } from '@fortawesome/fontawesome-svg-core'; import { faCog, faPlus, faSortDown, faSortUp, faTable } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, observable, untracked } from "mobx"; import { observer } from "mobx-react"; -import ReactTable, { CellInfo, Column, ComponentPropsGetterR, Resize, SortingRule } from "react-table"; +import { Resize } from "react-table"; import "react-table/react-table.css"; -import { Doc, DocListCast, Field, Opt, LayoutSym } from "../../../fields/Doc"; -import { Id } from "../../../fields/FieldSymbols"; +import { Doc } from "../../../fields/Doc"; import { List } from "../../../fields/List"; import { listSpec } from "../../../fields/Schema"; import { SchemaHeaderField, PastelSchemaPalette } from "../../../fields/SchemaHeaderField"; -import { ComputedField } from "../../../fields/ScriptField"; -import { Cast, FieldValue, NumCast, StrCast, BoolCast } from "../../../fields/Types"; +import { Cast, NumCast, StrCast } from "../../../fields/Types"; import { Docs, DocumentOptions } from "../../documents/Documents"; -import { CompileScript, Transformer, ts } from "../../util/Scripting"; import { Transform } from "../../util/Transform"; import { undoBatch } from "../../util/UndoManager"; import { COLLECTION_BORDER_WIDTH } from '../../views/globalCssVariables.scss'; -import { ContextMenu } from "../ContextMenu"; import '../DocumentDecorations.scss'; -import { CellProps, CollectionSchemaCell, CollectionSchemaCheckboxCell, CollectionSchemaDocCell, CollectionSchemaNumberCell, CollectionSchemaStringCell, CollectionSchemaImageCell, CollectionSchemaListCell } from "./CollectionSchemaCells"; -import { CollectionSchemaAddColumnHeader, CollectionSchemaHeader, CollectionSchemaColumnMenu, KeysDropdown } from "./CollectionSchemaHeaders"; +import { KeysDropdown } from "./CollectionSchemaHeaders"; import "./CollectionSchemaView.scss"; import { CollectionSubView } from "./CollectionSubView"; -import { CollectionView } from "./CollectionView"; import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView"; -import { setupMoveUpEvents, emptyFunction, returnZero, returnOne, returnFalse, returnEmptyFilter, emptyPath } from "../../../Utils"; +import { setupMoveUpEvents, emptyFunction, returnZero, returnOne, returnFalse } from "../../../Utils"; import { SnappingManager } from "../../util/SnappingManager"; import Measure from "react-measure"; -import { MovableColumn, MovableRow } from "./CollectionSchemaMovableTableHOC"; import { SchemaTable } from "./SchemaTable"; -//import { SchemaTable } from "./SchemaTable"; library.add(faCog, faPlus, faSortUp, faSortDown); library.add(faTable); @@ -354,7 +346,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { } getPreviewTransform = (): Transform => { - return this.props.ScreenToLocalTransform().translate(- this.borderWidth - 4 - this.tableWidth, - this.borderWidth); + return this.props.ScreenToLocalTransform().translate(- this.borderWidth - NumCast(COLLECTION_BORDER_WIDTH) - this.tableWidth, - this.borderWidth); } @computed get renderMenu() { @@ -462,7 +454,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @computed get schemaTable() { - const preview = ""; return Date: Thu, 25 Jun 2020 12:00:43 -0700 Subject: fix image flikering (hopefully), changed sidebar UI, and changed handle click --- src/client/views/nodes/ImageBox.tsx | 1 + src/mobile/MobileInterface.tsx | 20 ++++++++++++--- src/mobile/MobileMenu.scss | 50 +++++++++++++++++++++++++++++++------ 3 files changed, 60 insertions(+), 11 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 225d03104..d16aa528c 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -236,6 +236,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent { const timeout = this._curSuffix === "_s" ? this._smallRetryCount : this._curSuffix === "_m" ? this._mediumRetryCount : this._largeRetryCount; if (timeout < 5) { diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index a1719c015..0bc950a71 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -11,6 +11,7 @@ import { import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; +import { trace } from 'mobx'; import * as rp from 'request-promise'; import { Doc, DocListCast } from '../fields/Doc'; import { CurrentUserUtils } from '../client/util/CurrentUserUtils'; @@ -115,12 +116,14 @@ export class MobileInterface extends React.Component { /** * Method called when 'Library' button is pressed on the home screen */ - switchToLibrary = () => { + switchToLibrary = async () => { this._parents.push(this._activeDoc); this.switchCurrentView((userDoc: Doc) => this._library); this._activeDoc = this._library; this._homeMenu = false; - this.sidebarActive = true; + this.toggleSidebar(); + //setTimeout(this.toggleSidebar, 300); + } openWorkspaces = () => { @@ -128,6 +131,7 @@ export class MobileInterface extends React.Component { this.switchCurrentView((userDoc: Doc) => this._library); this._activeDoc = this._library; this._homeMenu = false; + this.sidebarActive = true; } /** @@ -242,7 +246,13 @@ export class MobileInterface extends React.Component { @undoBatch handleClick = async (doc: Doc) => { const children = DocListCast(doc.data); - if (doc.type !== "collection" && this.sidebarActive) this.openFromSidebar(doc); + if (doc.type !== "collection" && this.sidebarActive) { + this._parents.push(this._activeDoc); + this._activeDoc = doc; + this.switchCurrentView((userDoc: Doc) => doc); + this._homeMenu = false; + this.toggleSidebar(); + } else if (doc.type === "collection" && children.length === 0) this.openFromSidebar(doc); else { this._parents.push(this._activeDoc); @@ -407,6 +417,7 @@ export class MobileInterface extends React.Component {
+
{this.renderPathbar()}
@@ -435,6 +446,8 @@ export class MobileInterface extends React.Component { }
+
+
); } @@ -846,3 +859,4 @@ Scripting.addGlobal(function openMobileSettings() { return SettingsManager.Insta Scripting.addGlobal(function openWorkspaces() { return MobileInterface.Instance.openWorkspaces(); }); Scripting.addGlobal(function uploadImageMobile() { return MobileInterface.Instance.toggleUpload(); }); Scripting.addGlobal(function switchToMobileUploads() { return MobileInterface.Instance.switchToMobileUploads(); }); +Scripting.addGlobal(function switchToLibrary() { return MobileInterface.Instance.switchToLibrary(); }); \ No newline at end of file diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss index 53bc48034..ec8946578 100644 --- a/src/mobile/MobileMenu.scss +++ b/src/mobile/MobileMenu.scss @@ -24,10 +24,10 @@ body { .navbar .cover { position: absolute; - right: 20px; - top: 30px; - height: 70px; - width: 70px; + right: 0px; + top: 0px; + height: 120px; + width: 120px; background-color: whitesmoke; z-index: 200; } @@ -38,7 +38,21 @@ body { top: 30px; height: 70px; width: 70px; - transition: all 300ms ease-in-out 200ms; + transition: all 400ms ease-in-out 200ms; + z-index: 180; +} + +.navbar .background { + position: absolute; + right: 0px; + top: 0px; + height: 120px; + width: 120px; + //border: 1px solid black; +} + +.navbar .background.active { + background-color: lightgrey; } .navbar .toggle-btn-home { @@ -73,6 +87,7 @@ body { height: 4px; background: black; transition: all 200ms ease; + z-index: 180; } .navbar .toggle-btn span:nth-child(1) { @@ -107,8 +122,8 @@ body { top: 120px; opacity: 0; right: -100%; - width: 100%; - height: calc(100% - (120px)); + width: 80%; + height: calc(80% - (120px)); z-index: 101; background-color: whitesmoke; transition: all 400ms ease 50ms; @@ -116,6 +131,7 @@ body { // overflow-y: auto; // -webkit-overflow-scrolling: touch; // border-right: 5px solid black; + box-shadow: 0 0 5px 5px grey; } .sidebar .item { @@ -142,6 +158,24 @@ body { position: relative; } +.blanket { + position: fixed; + top: 120px; + opacity: 0.5; + right: -100%; + width: 100%; + height: calc(100% - (120px)); + z-index: 101; + background-color: grey; + padding: 20px; +} + +.blanket.active { + position: absolute; + right: 0%; + z-index: 100; +} + .home { position: absolute; top: 30px; @@ -213,7 +247,7 @@ body { .sidebar.active { position: absolute; - right: 0%; + right:0%; opacity: 1; z-index: 101; } -- cgit v1.2.3-70-g09d2 From e7372931b9d28c141aaec9552041b5644c2f415a Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Fri, 26 Jun 2020 03:37:08 +0800 Subject: Merge branch 'master' into mobile_revision_direct And changes to UI of record and image upload --- src/client/util/CurrentUserUtils.ts | 12 +- src/client/util/DragManager.ts | 2 +- src/client/views/DocumentButtonBar.tsx | 63 +----- src/client/views/DocumentDecorations.tsx | 2 +- src/client/views/GlobalKeyHandler.ts | 2 + src/client/views/MainView.tsx | 11 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 4 +- src/client/views/globalCssVariables.scss | 1 + src/client/views/linking/LinkMenu.scss | 4 + src/client/views/linking/LinkMenu.tsx | 37 +-- src/client/views/nodes/AudioBox.scss | 71 +----- src/client/views/nodes/AudioBox.tsx | 2 +- src/client/views/nodes/DocumentLinksButton.scss | 38 ++++ src/client/views/nodes/DocumentLinksButton.tsx | 104 +++++++++ src/client/views/nodes/DocumentView.tsx | 28 ++- src/client/views/nodes/LinkAnchorBox.tsx | 8 + src/client/views/nodes/LinkDocPreview.tsx | 107 +++++++++ .../views/nodes/formattedText/RichTextMenu.tsx | 9 +- src/mobile/AudioUpload.scss | 41 +++- src/mobile/AudioUpload.tsx | 249 +++++++-------------- src/mobile/ImageUpload.scss | 61 ++--- src/mobile/ImageUpload.tsx | 66 +++--- src/mobile/MobileInterface.tsx | 29 ++- src/mobile/MobileMenu.scss | 1 + 24 files changed, 549 insertions(+), 403 deletions(-) create mode 100644 src/client/views/nodes/DocumentLinksButton.scss create mode 100644 src/client/views/nodes/DocumentLinksButton.tsx create mode 100644 src/client/views/nodes/LinkDocPreview.tsx (limited to 'src/client/views') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index efdc943fa..823a99436 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -474,12 +474,12 @@ export class CurrentUserUtils { static setupMobileButtons(doc?: Doc, buttons?: string[]) { const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, info: string, dragFactory?: Doc }[] = [ - { title: "WORKSPACES", icon: "folder-open", click: 'openWorkspaces()', backgroundColor: "#ffd6d6", info: "Access your Workspaces from your mobile, and navigate through all of your documents. " }, - { title: "RECORD", icon: "microphone", click: 'openMobileAudio()', backgroundColor: "#ffbfbf", info: "Use your phone to record and upload audio onto Dash Web." }, - { title: "UPLOAD", icon: "upload", click: 'uploadImageMobile()', backgroundColor: "#ff9e9e", info: "Upload images or videos from your mobile device so they can be accessed on Dash Web." }, - { title: "PRESENTATION", icon: "desktop", click: 'openMobilePresentation()', backgroundColor: "#ff8080", info: "Use your phone as a remote for you presentation." }, - { title: "MOBILE UPLOAD", icon: "mobile", click: 'switchToMobileUploads()', backgroundColor: "#ff7373", info: "Access the collection of your mobile uploads." }, - { title: "SETTINGS", icon: "cog", click: 'openMobileSettings()', backgroundColor: "#ff5e5e", info: "Change your password, log out, or manage your account security." } + { title: "WORKSPACES", icon: "bars", click: 'openMobileWorkspaces()', backgroundColor: "lightgrey", info: "Access your Workspaces from your mobile, and navigate through all of your documents. " }, + { title: "UPLOAD", icon: "upload", click: 'uploadImageMobile()', backgroundColor: "lightgrey", info: "Upload files from your mobile device so they can be accessed on Dash Web." }, + { title: "MOBILE UPLOAD", icon: "mobile", click: 'switchToMobileUploads()', backgroundColor: "lightgrey", info: "Access the collection of your mobile uploads." }, + { title: "RECORD", icon: "microphone", click: 'openMobileAudio()', backgroundColor: "lightgrey", info: "Use your phone to record, dictate and then upload audio onto Dash Web." }, + { title: "PRESENTATION", icon: "desktop", click: 'openMobilePresentation()', backgroundColor: "lightgrey", info: "Use your phone as a remote for you presentation." }, + { title: "SETTINGS", icon: "cog", click: 'openMobileSettings()', backgroundColor: "lightgrey", info: "Change your password, log out, or manage your account security." } ]; return docProtoData.filter(d => !buttons || !buttons.includes(d.title)).map(data => this.mobileButton({ diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 91bc51101..417ddf989 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -353,7 +353,7 @@ export namespace DragManager { const dragElement = ele.parentNode === dragDiv ? ele : ele.cloneNode(true) as HTMLElement; const rect = ele.getBoundingClientRect(); const scaleX = rect.width / ele.offsetWidth, - scaleY = rect.height / ele.offsetHeight; + scaleY = ele.offsetHeight ? rect.height / ele.offsetHeight : scaleX; elesCont.left = Math.min(rect.left, elesCont.left); elesCont.top = Math.min(rect.top, elesCont.top); elesCont.right = Math.max(rect.right, elesCont.right); diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index 62a95116f..fcaea0f0b 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -1,28 +1,28 @@ import { IconProp, library } from '@fortawesome/fontawesome-svg-core'; -import { faArrowAltCircleDown, faPhotoVideo, faArrowAltCircleUp, faArrowAltCircleRight, faCheckCircle, faCloudUploadAlt, faLink, faShare, faStopCircle, faSyncAlt, faTag, faTimes } from '@fortawesome/free-solid-svg-icons'; +import { faArrowAltCircleDown, faArrowAltCircleRight, faArrowAltCircleUp, faCheckCircle, faCloudUploadAlt, faLink, faPhotoVideo, faShare, faStopCircle, faSyncAlt, faTag, faTimes } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { action, computed, observable, runInAction } from "mobx"; import { observer } from "mobx-react"; import { Doc, DocListCast } from "../../fields/Doc"; import { RichTextField } from '../../fields/RichTextField'; -import { NumCast, StrCast, Cast } from "../../fields/Types"; +import { Cast, NumCast } from "../../fields/Types"; import { emptyFunction, setupMoveUpEvents } from "../../Utils"; +import GoogleAuthenticationManager from '../apis/GoogleAuthenticationManager'; import { Pulls, Pushes } from '../apis/google_docs/GoogleApiClientUtils'; +import { Docs, DocUtils } from '../documents/Documents'; +import { DragManager } from '../util/DragManager'; import { UndoManager } from "../util/UndoManager"; import { CollectionDockingView, DockedFrameRenderer } from './collections/CollectionDockingView'; import { ParentDocSelector } from './collections/ParentDocumentSelector'; import './collections/ParentDocumentSelector.scss'; import './DocumentButtonBar.scss'; -import { LinkMenu } from "./linking/LinkMenu"; +import { MetadataEntryMenu } from './MetadataEntryMenu'; import { DocumentView } from './nodes/DocumentView'; import { GoogleRef } from "./nodes/formattedText/FormattedTextBox"; import { TemplateMenu } from "./TemplateMenu"; import { Template, Templates } from "./Templates"; import React = require("react"); -import { DragManager } from '../util/DragManager'; -import { MetadataEntryMenu } from './MetadataEntryMenu'; -import GoogleAuthenticationManager from '../apis/GoogleAuthenticationManager'; -import { Docs } from '../documents/Documents'; +import { DocumentLinksButton } from './nodes/DocumentLinksButton'; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -113,39 +113,6 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV get view0() { return this.props.views()?.[0]; } - @action - onLinkButtonMoved = (e: PointerEvent) => { - if (this._linkButton.current !== null) { - const linkDrag = UndoManager.StartBatch("Drag Link"); - this.view0 && DragManager.StartLinkDrag(this._linkButton.current, this.view0.props.Document, e.pageX, e.pageY, { - dragComplete: dropEv => { - const linkDoc = dropEv.linkDragData?.linkDocument as Doc; // equivalent to !dropEve.aborted since linkDocument is only assigned on a completed drop - if (this.view0 && linkDoc) { - !linkDoc.linkRelationship && (Doc.GetProto(linkDoc).linkRelationship = "hyperlink"); - - // we want to allow specific views to handle the link creation in their own way (e.g., rich text makes text hyperlinks) - // the dragged view can regiser a linkDropCallback to be notified that the link was made and to update their data structures - // however, the dropped document isn't so accessible. What we do is set the newly created link document on the documentView - // The documentView passes a function prop returning this link doc to its descendants who can react to changes to it. - dropEv.linkDragData?.linkDropCallback?.(dropEv.linkDragData); - runInAction(() => this.view0!._link = linkDoc); - setTimeout(action(() => this.view0!._link = undefined), 0); - } - linkDrag?.end(); - }, - hideSource: false - }); - return true; - } - return false; - } - - - onLinkButtonDown = (e: React.PointerEvent): void => { - setupMoveUpEvents(this, e, this.onLinkButtonMoved, emptyFunction, emptyFunction); - } - - @computed get considerGoogleDocsPush() { const targetDoc = this.view0?.props.Document; @@ -235,20 +202,6 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
; } - @computed - get linkButton() { - const view0 = this.view0; - const linkCount = view0 && DocListCast(view0.props.Document.links).length; - return !view0 ? (null) :
- }> -
- {linkCount ? linkCount : } -
- -
; - } - @computed get metadataButton() { const view0 = this.view0; @@ -318,7 +271,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV const considerPush = isText && this.considerGoogleDocsPush; return
- {this.linkButton} +
{this.templateButton} diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index beb6155ca..d7b0ab7a9 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -552,7 +552,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> onPointerDown={this.onRadiusDown} onContextMenu={(e) => e.preventDefault()}>
-
+
diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts index 27755737e..7bc8cf6a7 100644 --- a/src/client/views/GlobalKeyHandler.ts +++ b/src/client/views/GlobalKeyHandler.ts @@ -19,6 +19,7 @@ import { MarqueeView } from "./collections/collectionFreeForm/MarqueeView"; import { DocumentDecorations } from "./DocumentDecorations"; import { MainView } from "./MainView"; import { DocumentView } from "./nodes/DocumentView"; +import { DocumentLinksButton } from "./nodes/DocumentLinksButton"; const modifiers = ["control", "meta", "shift", "alt"]; type KeyHandler = (keycode: string, e: KeyboardEvent) => KeyControlInfo | Promise; @@ -77,6 +78,7 @@ export default class KeyManager { // MarqueeView.DragMarquee = !MarqueeView.DragMarquee; // bcz: this needs a better disclosure UI break; case "escape": + DocumentLinksButton.StartLink = undefined; const main = MainView.Instance; Doc.SetSelectedTool(InkTool.None); if (main.isPointerDown) { diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 97953452d..4e2c067ac 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -5,7 +5,7 @@ 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, - faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faQuoteLeft + faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faQuoteLeft, faSortAmountDown } from '@fortawesome/free-solid-svg-icons'; import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -55,6 +55,9 @@ import { TimelineMenu } from './animationtimeline/TimelineMenu'; import { SnappingManager } from '../util/SnappingManager'; import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox'; import { DocumentManager } from '../util/DocumentManager'; +import { DocumentLinksButton } from './nodes/DocumentLinksButton'; +import { LinkMenu } from './linking/LinkMenu'; +import { LinkDocPreview } from './nodes/LinkDocPreview'; @observer export class MainView extends React.Component { @@ -135,7 +138,7 @@ 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, faQuoteLeft); + faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faQuoteLeft, faSortAmountDown); this.initEventListeners(); this.initAuthenticationRouters(); } @@ -578,6 +581,10 @@ export class MainView extends React.Component { {this.mainContent} + {DocumentLinksButton.EditLink ? : (null)} + {LinkDocPreview.LinkInfo ? : (null)} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index dc62c48b7..42aa0f58e 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -47,6 +47,7 @@ import { Timeline } from "../../animationtimeline/Timeline"; import { SnappingManager } from "../../../util/SnappingManager"; import { ActiveInkColor, ActiveInkWidth, ActiveInkBezierApprox } from "../../InkingStroke"; import { DocumentType } from "../../../documents/DocumentTypes"; +import { DocumentLinksButton } from "../../nodes/DocumentLinksButton"; library.add(faEye as any, faTable, faPaintBrush, faExpandArrowsAlt, faCompressArrowsAlt, faCompass, faUpload, faBraille, faChalkboard, faFileUpload); @@ -245,7 +246,7 @@ export class CollectionFreeFormView extends CollectionSubView { if (this.layoutDoc.targetScale && (Math.abs(e.pageX - this._downX) < 3 && Math.abs(e.pageY - this._downY) < 3)) { if (Date.now() - this._lastTap < 300) { + runInAction(() => DocumentLinksButton.StartLink = undefined); const docpt = this.getTransform().transformPoint(e.clientX, e.clientY); this.scaleAtPt(docpt, 1); e.stopPropagation(); diff --git a/src/client/views/globalCssVariables.scss b/src/client/views/globalCssVariables.scss index 4e85fe0ca..3e54d001b 100644 --- a/src/client/views/globalCssVariables.scss +++ b/src/client/views/globalCssVariables.scss @@ -12,6 +12,7 @@ $lighter-alt-accent: rgb(207, 220, 240); $darker-alt-accent: rgb(178, 206, 248); $intermediate-color: #9c9396; $dark-color: #121721; +$link-color: lightBlue; $antimodemenu-height: 35px; // fonts $sans-serif: "Noto Sans", diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss index 7dee22f66..c372e7098 100644 --- a/src/client/views/linking/LinkMenu.scss +++ b/src/client/views/linking/LinkMenu.scss @@ -8,6 +8,10 @@ .linkMenu-list { max-height: 200px; overflow-y: scroll; + position: absolute; + z-index: 10; + background: $link-color; + min-width: 150px } .linkMenu-group { diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx index 56f40ad69..0fcc0f0b9 100644 --- a/src/client/views/linking/LinkMenu.tsx +++ b/src/client/views/linking/LinkMenu.tsx @@ -4,11 +4,12 @@ import { DocumentView } from "../nodes/DocumentView"; import { LinkEditor } from "./LinkEditor"; import './LinkMenu.scss'; import React = require("react"); -import { Doc } from "../../../fields/Doc"; +import { Doc, Opt } from "../../../fields/Doc"; import { LinkManager } from "../../util/LinkManager"; import { LinkMenuGroup } from "./LinkMenuGroup"; import { faTrash } from '@fortawesome/free-solid-svg-icons'; import { library } from "@fortawesome/fontawesome-svg-core"; +import { DocumentLinksButton } from "../nodes/DocumentLinksButton"; library.add(faTrash); @@ -16,16 +17,29 @@ interface Props { docView: DocumentView; changeFlyout: () => void; addDocTab: (document: Doc, where: string) => boolean; + location: number[]; } @observer export class LinkMenu extends React.Component { @observable private _editingLink?: Doc; + @observable private _linkMenuRef: Opt; + @action + onClick = (e: PointerEvent) => { + if (!Array.from(this._linkMenuRef?.getElementsByTagName((e.target as HTMLElement).tagName) || []).includes(e.target as any)) { + DocumentLinksButton.EditLink = undefined; + } + } @action componentDidMount() { this._editingLink = undefined; + document.addEventListener("pointerdown", this.onClick); + } + + componentWillUnmount() { + document.removeEventListener("pointerdown", this.onClick); } clearAllLinks = () => { @@ -56,20 +70,11 @@ export class LinkMenu extends React.Component { render() { const sourceDoc = this.props.docView.props.Document; const groups: Map = LinkManager.Instance.getRelatedGroupedLinks(sourceDoc); - if (this._editingLink === undefined) { - return ( -
- {/* */} - {/* */} -
- {this.renderAllGroups(groups)} -
-
- ); - } else { - return ( - this._editingLink = undefined)}> - ); - } + return
this._linkMenuRef = r} style={{ left: this.props.location[0], top: this.props.location[1] }}> + {!this._editingLink ? + this.renderAllGroups(groups) : + this._editingLink = undefined)} /> + } +
; } } \ No newline at end of file diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index 43dd698ad..b5d113ca0 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -175,76 +175,29 @@ @media only screen and (max-device-width: 480px) { - - .audiobox-container, - .audiobox-container-interactive { - width: max-content; - /* align-self: center; */ - left: 50%; - top: 40%; - transform: translate(-50%, 0); - height: 100px; - position: absolute; - display: flex; - pointer-events: all; - /* cursor: default; */ - } - - .audiobox-container .audiobox-buttons, - .audiobox-container-interactive .audiobox-buttons { - display: flex; - width: 500px; - /* left: 50%; */ - /* transform: translate(-50%,0); */ - align-items: center; - } - .audiobox-dictation { + font-size: 5em; + display: flex; width: 100; - height: 100; - font-size: 50; - /* background-color: white; */ + justify-content: center; + flex-direction: column; + align-items: center; } - .audiobox-container .audiobox-record-interactive, - .audiobox-container-interactive .audiobox-record-interactive { - width: 95%; - user-select: none; - font-size: 50px; - font-weight: 100; - left: 5%; + .audiobox-container .audiobox-record, + .audiobox-container-interactive .audiobox-record { + pointer-events: all; + font-size: 3em; + width: 100%; height: 100%; position: relative; + pointer-events: none; } .audiobox-container .audiobox-controls .audiobox-player .audiobox-playhead, .audiobox-container .audiobox-controls .audiobox-player .audiobox-dictation, .audiobox-container-interactive .audiobox-controls .audiobox-player .audiobox-playhead, .audiobox-container-interactive .audiobox-controls .audiobox-player .audiobox-dictation { - position: relative; - align-self: center; - width: 50px; - height: max-content; - padding: 0; - } - - .audiobox-container .audiobox-controls .audiobox-player, - .audiobox-container-interactive .audiobox-controls .audiobox-player { - margin-top: auto; - margin-bottom: auto; - width: 100%; - height: 100%; - position: relative; - padding-right: 5px; - display: flex; - } - - .audiobox-container .audiobox-controls, - .audiobox-container-interactive .audiobox-controls { - width: 500px; - height: 100%; - position: relative; - display: flex; - padding-left: 2px; + width: 70px; } } \ No newline at end of file diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index cb0582d87..d5288fff6 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -193,7 +193,7 @@ export class AudioBox extends ViewBoxBaseComponent { + private _linkButton = React.createRef(); + + @action + onLinkButtonMoved = (e: PointerEvent) => { + if (this._linkButton.current !== null) { + const linkDrag = UndoManager.StartBatch("Drag Link"); + this.props.View && DragManager.StartLinkDrag(this._linkButton.current, this.props.View.props.Document, e.pageX, e.pageY, { + dragComplete: dropEv => { + const linkDoc = dropEv.linkDragData?.linkDocument as Doc; // equivalent to !dropEve.aborted since linkDocument is only assigned on a completed drop + if (this.props.View && linkDoc) { + !linkDoc.linkRelationship && (Doc.GetProto(linkDoc).linkRelationship = "hyperlink"); + + // we want to allow specific views to handle the link creation in their own way (e.g., rich text makes text hyperlinks) + // the dragged view can regiser a linkDropCallback to be notified that the link was made and to update their data structures + // however, the dropped document isn't so accessible. What we do is set the newly created link document on the documentView + // The documentView passes a function prop returning this link doc to its descendants who can react to changes to it. + dropEv.linkDragData?.linkDropCallback?.(dropEv.linkDragData); + runInAction(() => this.props.View._link = linkDoc); + setTimeout(action(() => this.props.View._link = undefined), 0); + } + linkDrag?.end(); + }, + hideSource: false + }); + return true; + } + return false; + } + + @observable static StartLink: DocumentView | undefined; + onLinkButtonDown = (e: React.PointerEvent): void => { + setupMoveUpEvents(this, e, this.onLinkButtonMoved, emptyFunction, action((e, doubleTap) => { + if (doubleTap) { + DocumentLinksButton.StartLink = this.props.View; + } else { + DocumentLinksButton.EditLink = this.props.View; + DocumentLinksButton.EditLinkLoc = [e.clientX + 10, e.clientY]; + } + })); + } + completeLink = (e: React.PointerEvent): void => { + setupMoveUpEvents(this, e, returnFalse, emptyFunction, action((e, doubleTap) => { + if (doubleTap) { + if (DocumentLinksButton.StartLink === this.props.View) { + DocumentLinksButton.StartLink = undefined; + } else { + DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View && + DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.props.View.props.Document }, "long drag"); + } + } + })); + } + + @observable + public static EditLink: DocumentView | undefined; + public static EditLinkLoc: number[] = [0, 0]; + + @computed + get linkButton() { + const links = DocListCast(this.props.View.props.Document.links); + return (!links.length || links[0].hidden) && !this.props.AlwaysOn ? (null) : +
+
LinkDocPreview.LinkInfo = undefined)} + onPointerEnter={action(e => LinkDocPreview.LinkInfo = { + addDocTab: this.props.View.props.addDocTab, + linkSrc: this.props.View.props.Document, + linkDoc: links[0], + Location: [e.clientX, e.clientY + 20] + })} > + {links.length ? links.length : } +
+ {DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View ?
: (null)} + {DocumentLinksButton.StartLink === this.props.View ?
: (null)} +
; + } + render() { + return this.linkButton; + } +} \ No newline at end of file diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index d31ec8c1a..afd28534e 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -42,6 +42,7 @@ import { LinkAnchorBox } from './LinkAnchorBox'; import { RadialMenu } from './RadialMenu'; import React = require("react"); import { MobileInterface } from '../../../mobile/MobileInterface'; +import { DocumentLinksButton } from './DocumentLinksButton'; library.add(fa.faEdit, fa.faTrash, fa.faShare, fa.faDownload, fa.faExpandArrowsAlt, fa.faCompressArrowsAlt, fa.faLayerGroup, fa.faExternalLinkAlt, fa.faAlignCenter, fa.faCaretSquareRight, fa.faSquare, fa.faConciergeBell, fa.faWindowRestore, fa.faFolder, fa.faMapPin, fa.faLink, fa.faFingerprint, fa.faCrosshairs, fa.faDesktop, fa.faUnlock, fa.faLock, fa.faLaptopCode, fa.faMale, @@ -585,10 +586,14 @@ export class DocumentView extends DocComponent(Docu toggleLinkButtonBehavior = (): void => { if (this.Document.isLinkButton || this.layoutDoc.onClick || this.Document.ignoreClick) { this.Document.isLinkButton = false; + const first = DocListCast(this.Document.links).find(d => d instanceof Doc); + first && (first.hidden = false); this.Document.ignoreClick = false; this.layoutDoc.onClick = undefined; } else { this.Document.isLinkButton = true; + const first = DocListCast(this.Document.links).find(d => d instanceof Doc); + first && (first.hidden = true); this.Document.followLinkZoom = false; this.Document.followLinkLocation = undefined; } @@ -598,8 +603,12 @@ export class DocumentView extends DocComponent(Docu toggleFollowInPlace = (): void => { if (this.Document.isLinkButton) { this.Document.isLinkButton = false; + const first = DocListCast(this.Document.links).find(d => d instanceof Doc); + first && (first.hidden = false); } else { this.Document.isLinkButton = true; + const first = DocListCast(this.Document.links).find(d => d instanceof Doc); + first && (first.hidden = true); this.Document.followLinkZoom = true; this.Document.followLinkLocation = "inPlace"; } @@ -609,6 +618,8 @@ export class DocumentView extends DocComponent(Docu toggleFollowOnRight = (): void => { if (this.Document.isLinkButton) { this.Document.isLinkButton = false; + const first = DocListCast(this.Document.links).find(d => d instanceof Doc); + first && (first.hidden = false); } else { this.Document.isLinkButton = true; this.Document.followLinkZoom = false; @@ -737,10 +748,8 @@ export class DocumentView extends DocComponent(Docu const optionItems: ContextMenuProps[] = options && "subitems" in options ? options.subitems : []; const templateDoc = Cast(this.props.Document[StrCast(this.props.Document.layoutKey)], Doc, null); templateDoc && optionItems.push({ description: "Open Template ", event: () => this.props.addDocTab(templateDoc, "onRight"), icon: "eye" }); - if (!options) { - options = { description: "Options...", subitems: optionItems, icon: "compass" }; - cm?.addItem(options); - } + optionItems.push({ description: "Toggle Show Each Link Dot", event: () => this.layoutDoc.showLinks = !this.layoutDoc.showLinks, icon: "eye" }); + !options && cm.addItem({ description: "Options...", subitems: optionItems, icon: "compass" }); const existingOnClick = cm?.findByDescription("OnClick..."); const onClicks: ContextMenuProps[] = existingOnClick && "subitems" in existingOnClick ? existingOnClick.subitems : []; @@ -1039,7 +1048,8 @@ export class DocumentView extends DocComponent(Docu select={this.select} onClick={this.onClickHandler} layoutKey={this.finalLayoutKey} /> - {this.anchors} + {this.layoutDoc.showLinks ? this.anchors : (null)} + {this.props.forcedBackgroundColor?.(this.Document) === "transparent" || this.props.dontRegisterView ? (null) : }
); } @@ -1063,7 +1073,7 @@ export class DocumentView extends DocComponent(Docu anchorPanelHeight = () => this.props.PanelHeight() || 1; @computed get anchors() { TraceMobx(); - return this.layoutDoc.presBox ? (null) : DocListCast(this.Document.links).filter(d => !d.hidden && this.isNonTemporalLink).map((d, i) => + return this.props.forcedBackgroundColor?.(this.Document) === "transparent" || this.layoutDoc.presBox || this.props.dontRegisterView ? (null) : DocListCast(this.Document.links).filter(d => !d.hidden && this.isNonTemporalLink).map((d, i) => (Docu PanelWidth={this.anchorPanelWidth} PanelHeight={this.anchorPanelHeight} ContentScaling={returnOne} + dontRegisterView={false} forcedBackgroundColor={returnTransparent} removeDocument={this.hideLinkAnchor} pointerEvents={false} @@ -1194,7 +1205,10 @@ export class DocumentView extends DocComponent(Docu color: StrCast(this.layoutDoc.color, "inherit"), outline: highlighting && !borderRounding ? `${highlightColors[fullDegree]} ${highlightStyles[fullDegree]} ${localScale}px` : "solid 0px", border: highlighting && borderRounding ? `${highlightStyles[fullDegree]} ${highlightColors[fullDegree]} ${localScale}px` : undefined, - boxShadow: this.props.Document.isTemplateForField ? "black 0.2vw 0.2vw 0.8vw" : undefined, + boxShadow: this.Document.isLinkButton && !this.props.dontRegisterView && this.props.forcedBackgroundColor?.(this.Document) !== "transparent" ? + StrCast(this.props.Document._linkButtonShadow, "lightblue 0em 0em 1em") : + this.props.Document.isTemplateForField ? "black 0.2vw 0.2vw 0.8vw" : + undefined, background: finalColor, opacity: finalOpacity, fontFamily: StrCast(this.Document._fontFamily, "inherit"), diff --git a/src/client/views/nodes/LinkAnchorBox.tsx b/src/client/views/nodes/LinkAnchorBox.tsx index 2b64cdab6..2bcc6168b 100644 --- a/src/client/views/nodes/LinkAnchorBox.tsx +++ b/src/client/views/nodes/LinkAnchorBox.tsx @@ -18,6 +18,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { SelectionManager } from "../../util/SelectionManager"; import { TraceMobx } from "../../../fields/util"; import { Id } from "../../../fields/FieldSymbols"; +import { LinkDocPreview } from "./LinkDocPreview"; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -132,6 +133,13 @@ export class LinkAnchorBox extends ViewBoxBaseComponent LinkDocPreview.LinkInfo = undefined)} + onPointerEnter={action(e => LinkDocPreview.LinkInfo = { + addDocTab: this.props.addDocTab, + linkSrc: this.props.ContainingCollectionDoc!, + linkDoc: this.rootDoc, + Location: [e.clientX, e.clientY + 20] + })} onPointerDown={this.onPointerDown} onClick={this.onClick} title={targetTitle} onContextMenu={this.specificContextMenu} ref={this._ref} style={{ background: c, diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx new file mode 100644 index 000000000..126dc240a --- /dev/null +++ b/src/client/views/nodes/LinkDocPreview.tsx @@ -0,0 +1,107 @@ +import { action, computed, observable, runInAction } from 'mobx'; +import { observer } from "mobx-react"; +import wiki from "wikijs"; +import { Doc, DocCastAsync, HeightSym, Opt, WidthSym } from "../../../fields/Doc"; +import { Cast, FieldValue, NumCast } from "../../../fields/Types"; +import { emptyFunction, emptyPath, returnEmptyFilter, returnFalse, returnOne, returnZero } from "../../../Utils"; +import { Docs } from "../../documents/Documents"; +import { DocumentManager } from "../../util/DocumentManager"; +import { Transform } from "../../util/Transform"; +import { ContentFittingDocumentView } from "./ContentFittingDocumentView"; +import React = require("react"); +import { DocumentView } from './DocumentView'; + +interface Props { + linkDoc?: Doc; + linkSrc?: Doc; + href?: string; + backgroundColor: (doc: Doc) => string; + addDocTab: (document: Doc, where: string) => boolean; + location: number[]; +} +@observer +export class LinkDocPreview extends React.Component { + @observable public static LinkInfo: Opt<{ linkDoc?: Doc; addDocTab: (document: Doc, where: string) => boolean, linkSrc: Doc; href?: string; Location: number[] }>; + @observable _targetDoc: Opt; + @observable _toolTipText = ""; + + componentDidUpdate() { this.updatePreview() } + componentDidMount() { this.updatePreview() } + async updatePreview() { + const linkDoc = this.props.linkDoc; + const linkSrc = this.props.linkSrc; + if (this.props.href) { + if (this.props.href.startsWith("https://en.wikipedia.org/wiki/")) { + wiki().page(this.props.href.replace("https://en.wikipedia.org/wiki/", "")).then(page => page.summary().then(action(summary => this._toolTipText = summary.substring(0, 500)))); + } else { + runInAction(() => this._toolTipText = "external => " + this.props.href); + } + } else if (linkDoc && linkSrc) { + const anchor = FieldValue(Doc.AreProtosEqual(FieldValue(Cast(linkDoc.anchor1, Doc)), linkSrc) ? Cast(linkDoc.anchor2, Doc) : (Cast(linkDoc.anchor1, Doc)) || linkDoc); + const target = anchor?.annotationOn ? await DocCastAsync(anchor.annotationOn) : anchor; + runInAction(() => { + this._toolTipText = ""; + this._targetDoc = target; + if (anchor !== this._targetDoc && anchor && this._targetDoc) { + this._targetDoc._scrollY = NumCast(anchor?.y); + } + }); + } + } + pointerDown = (e: React.PointerEvent) => { + if (this.props.linkDoc && this.props.linkSrc) { + DocumentManager.Instance.FollowLink(this.props.linkDoc, this.props.linkSrc, + (doc: Doc, followLinkLocation: string) => this.props.addDocTab(doc, e.ctrlKey ? "inTab" : followLinkLocation)); + } else if (this.props.href) { + this.props.addDocTab(Docs.Create.WebDocument(this.props.href, { title: this.props.href, _width: 200, _height: 400, UseCors: true }), "onRight"); + } + } + width = () => Math.min(350, NumCast(this._targetDoc?.[WidthSym](), 350)); + height = () => Math.min(350, NumCast(this._targetDoc?.[HeightSym](), 350)); + @computed get targetDocView() { + return !this._targetDoc ? +
+
+ {this._toolTipText} +
+
: + ; + } + + render() { + return
+ {this.targetDocView} +
; + } +} \ No newline at end of file diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx index 5e32b3ef8..839943aac 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.tsx +++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx @@ -11,7 +11,7 @@ import { EditorState, NodeSelection, TextSelection } from "prosemirror-state"; import { EditorView } from "prosemirror-view"; import { Doc } from "../../../../fields/Doc"; import { DarkPastelSchemaPalette, PastelSchemaPalette } from '../../../../fields/SchemaHeaderField'; -import { Cast, StrCast } from "../../../../fields/Types"; +import { Cast, StrCast, BoolCast } from "../../../../fields/Types"; import { unimplementedFunction, Utils } from "../../../../Utils"; import { DocServer } from "../../../DocServer"; import { LinkManager } from "../../../util/LinkManager"; @@ -72,7 +72,7 @@ export default class RichTextMenu extends AntimodeMenu { super(props); RichTextMenu.Instance = this; this._canFade = false; - this.Pinned = true; + this.Pinned = BoolCast(Doc.UserDoc()["menuRichText-pinned"]); this.fontSizeOptions = [ { mark: schema.marks.pFontSize.create({ fontSize: 7 }), title: "Set font size", label: "7pt", command: this.changeFontSize }, @@ -147,7 +147,6 @@ export default class RichTextMenu extends AntimodeMenu { this.updateFromDash(view, lastState, this.editorProps); } - public MakeLinkToSelection = (linkDocId: string, title: string, location: string, targetDocId: string): string => { if (this.view) { const link = this.view.state.schema.marks.link.create({ href: Utils.prepend("/doc/" + linkDocId), title: title, location: location, linkId: linkDocId, targetId: targetDocId }); @@ -750,7 +749,7 @@ export default class RichTextMenu extends AntimodeMenu { @action toggleMenuPin = (e: React.MouseEvent) => { - this.Pinned = !this.Pinned; + Doc.UserDoc()["menuRichText-pinned"] = this.Pinned = !this.Pinned; if (!this.Pinned) { this.fadeOut(true); } @@ -779,7 +778,7 @@ export default class RichTextMenu extends AntimodeMenu { this.createHighlighterButton(), this.createLinkButton(), this.createBrushButton(), - this.createButton("indent", "Summarize", undefined, this.insertSummarizer), + this.createButton("sort-amount-down", "Summarize", undefined, this.insertSummarizer), this.createButton("quote-left", "Blockquote", undefined, this.insertBlockquote), ]}
; diff --git a/src/mobile/AudioUpload.scss b/src/mobile/AudioUpload.scss index 9fe442e55..6e64d9e2e 100644 --- a/src/mobile/AudioUpload.scss +++ b/src/mobile/AudioUpload.scss @@ -5,8 +5,45 @@ justify-content: center; flex-direction: column; align-items: center; - max-width: 400px; - min-width: 400px; + margin-top: 10px; + height: 400px; + width: 600px; +} + +.upload_label { + position: relative; + font-weight: 700; + color: black; + background-color: rgba(0, 0, 0, 0); + border: solid 3px black; + margin: 10px; + font-size: 30; + height: 70px; + width: 60%; + display: inline-flex; + font-family: sans-serif; + text-transform: uppercase; + justify-content: center; + flex-direction: column; + border-radius: 10px; +} + +.restart_label { + position: relative; + font-weight: 700; + color: black; + background-color: rgba(0, 0, 0, 0); + border: solid 3px black; + margin: 10px; + font-size: 30; + height: 70px; + width: 60%; + display: inline-flex; + font-family: sans-serif; + text-transform: uppercase; + justify-content: center; + flex-direction: column; + border-radius: 10px; } .audio-upload { diff --git a/src/mobile/AudioUpload.tsx b/src/mobile/AudioUpload.tsx index 7ea11ee84..f859b0ba3 100644 --- a/src/mobile/AudioUpload.tsx +++ b/src/mobile/AudioUpload.tsx @@ -5,11 +5,11 @@ import "./ImageUpload.scss"; import React = require('react'); import { DocServer } from '../client/DocServer'; import { observer } from 'mobx-react'; -import { observable, action } from 'mobx'; -import { Utils, emptyPath, returnFalse, emptyFunction, returnOne, returnZero, returnTrue } from '../Utils'; +import { observable, action, computed } from 'mobx'; +import { Utils, emptyPath, returnFalse, emptyFunction, returnOne, returnZero, returnTrue, returnEmptyFilter } from '../Utils'; import { Networking } from '../client/Network'; import { Doc, Opt } from '../fields/Doc'; -import { Cast } from '../fields/Types'; +import { Cast, FieldValue } from '../fields/Types'; import { listSpec } from '../fields/Schema'; import { List } from '../fields/List'; import { Scripting } from '../client/util/Scripting'; @@ -38,185 +38,100 @@ export class AudioUpload extends React.Component { @observable status: string = ""; @observable nm: string = "Choose files"; @observable process: string = ""; + @observable public _audioCol: Doc = FieldValue(Cast(Docs.Create.FreeformDocument([Cast(Docs.Create.AudioDocument(nullAudio, { title: "mobile audio", _width: 500, _height: 100 }), Doc) as Doc], { title: "mobile audio", _fitToBox: true, boxShadow: "0 0" }), Doc)) as Doc; - onClick = async () => { - try { - await Docs.Prototypes.initialize(); - const imgPrev = document.getElementById("img_preview"); - const slab1 = document.getElementById("slab1"); - if (slab1) { - slab1.style.opacity = "1"; - } - if (imgPrev) { - const files: FileList | null = inputRef.current!.files; - const slab2 = document.getElementById("slab2"); - if (slab2) { - slab2.style.opacity = "1"; - } - if (files && files.length !== 0) { - this.process = "Uploading Files"; - for (let index = 0; index < files.length; ++index) { - const file = files[index]; - const res = await Networking.UploadFilesToServer(file); - const slab3 = document.getElementById("slab3"); - if (slab3) { - slab3.style.opacity = "1"; - } - res.map(async ({ result }) => { - const name = file.name; - if (result instanceof Error) { - return; - } - const path = Utils.prepend(result.accessPaths.agnostic.client); - let doc = null; - console.log("type: " + file.type); - if (file.type === "video/mp4") { - doc = Docs.Create.VideoDocument(path, { _nativeWidth: 200, _width: 200, title: name }); - } else if (file.type === "application/pdf") { - doc = Docs.Create.PdfDocument(path, { _width: 200, title: name }); - } else { - doc = Docs.Create.ImageDocument(path, { _nativeWidth: 200, _width: 200, title: name }); - } - const slab4 = document.getElementById("slab4"); - if (slab4) { - slab4.style.opacity = "1"; - } - const res = await rp.get(Utils.prepend("/getUserDocumentId")); - if (!res) { - throw new Error("No user id returned"); - } - const field = await DocServer.GetRefField(res); - let pending: Opt; - if (field instanceof Doc) { - pending = await Cast(field.mobileUpload, Doc); - } - if (pending) { - const data = await Cast(pending.data, listSpec(Doc)); - if (data) { - data.push(doc); - } else { - pending.data = new List([doc]); - } - this.status = "finished"; - const slab5 = document.getElementById("slab5"); - if (slab5) { - slab5.style.opacity = "1"; - } - this.process = "File " + (index + 1).toString() + " Uploaded"; - const slab6 = document.getElementById("slab6"); - if (slab6) { - slab6.style.opacity = "1"; - } - const slab7 = document.getElementById("slab7"); - if (slab7) { - slab7.style.opacity = "1"; - } - - } - }); - } - } else { - this.process = "No file selected"; - } - setTimeout(this.clearUpload, 3000); - } - } catch (error) { - this.error = JSON.stringify(error); - } - } - - // Updates label after a files is selected (so user knows a file is uploaded) - inputLabel = async () => { - const files: FileList | null = inputRef.current!.files; - await files; - if (files && files.length === 1) { - console.log(files); - this.nm = files[0].name; - } else if (files && files.length > 1) { - console.log(files.length); - this.nm = files.length.toString() + " files selected"; - } - } @action clearUpload = () => { - const slab1 = document.getElementById("slab1"); - if (slab1) { - slab1.style.opacity = "0.4"; - } - const slab2 = document.getElementById("slab2"); - if (slab2) { - slab2.style.opacity = "0.4"; - } - const slab3 = document.getElementById("slab3"); - if (slab3) { - slab3.style.opacity = "0.4"; + for (let i = 1; i < 8; i++) { + this.setOpacity(i, "0.2"); } - const slab4 = document.getElementById("slab4"); - if (slab4) { - slab4.style.opacity = "0.4"; - } - const slab5 = document.getElementById("slab5"); - if (slab5) { - slab5.style.opacity = "0.4"; - } - const slab6 = document.getElementById("slab6"); - if (slab6) { - slab6.style.opacity = "0.4"; - } - const slab7 = document.getElementById("slab7"); - if (slab7) { - slab7.style. - opacity = "0.4"; - } - this.nm = "Choose files"; - - if (inputRef.current) { - inputRef.current.value = ""; - } - this.process = ""; - console.log(inputRef.current!.files); + this._audioCol = FieldValue(Cast(Docs.Create.FreeformDocument([Cast(Docs.Create.AudioDocument(nullAudio, { title: "mobile audio", _width: 500, _height: 100 }), Doc) as Doc], { title: "mobile audio", _fitToBox: true, boxShadow: "0 0" }), Doc)) as Doc; } - + closeUpload = () => { + this.clearUpload(); + MobileInterface.Instance.toggleAudio(); + } private get uploadInterface() { - const audioDoc = Cast(Docs.Create.AudioDocument(nullAudio, { title: "mobile audio" }), Doc) as Doc; - return ( -
-
+ <> +
this.closeUpload()}>
- 1000} - PanelHeight={() => 1000} - NativeHeight={returnZero} - NativeWidth={returnZero} - renderDepth={0} - focus={emptyFunction} - backgroundColor={() => "white"} - parentActive={returnTrue} - whenActiveChanged={emptyFunction} - bringToFront={emptyFunction} - ContainingCollectionView={undefined} - ContainingCollectionDoc={undefined} - /> -
+ +
+ 600} + PanelHeight={() => 400} + NativeHeight={returnZero} + NativeWidth={returnZero} + renderDepth={0} + focus={emptyFunction} + backgroundColor={() => "rgba(0,0,0,0)"} + parentActive={returnTrue} + whenActiveChanged={emptyFunction} + bringToFront={emptyFunction} + ContainingCollectionView={undefined} + ContainingCollectionDoc={undefined} + /> +
+
+ Restart +
+
+ Upload +
+
+
+
+
+
+
+
+
+
+ ); } + setOpacity = (i: number, o: string) => { + const slab = document.getElementById("slab0" + i); + if (slab) { + console.log(slab?.id); + slab.style.opacity = o; + } + } + + // Pushing the audio doc onto Dash Web through the right side bar + uploadAudio = () => { + console.log("uploading"); + const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; + const audioDoc = this._audioCol; + const data = Cast(audioRightSidebar.data, listSpec(Doc)); + for (let i = 1; i < 8; i++) { + setTimeout(() => this.setOpacity(i, "1"), i * 200); + } + if (data) { + data.push(audioDoc); + } + + setTimeout(this.clearUpload, 3000); + } + @observable private dialogueBoxOpacity = 1; @observable private overlayOpacity = 0.4; diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss index b64aac338..890258918 100644 --- a/src/mobile/ImageUpload.scss +++ b/src/mobile/ImageUpload.scss @@ -9,13 +9,19 @@ min-width: 400px; .upload_label { - font-size: 3em; font-weight: 700; - color: white; - background-color: black; - display: inline-block; - margin: 10; - width: 100%; + color: black; + background-color: rgba(0, 0, 0, 0); + border: solid 3px black; + margin: 10px; + font-size: 30; + height: 70px; + width: 80%; + display: flex; + font-family: sans-serif; + text-transform: uppercase; + justify-content: center; + flex-direction: column; border-radius: 10px; } @@ -26,10 +32,6 @@ direction: ltr; } - .upload_label:hover { - background-color: darkred; - } - .button_file { text-align: center; height: 50%; @@ -49,20 +51,31 @@ } .inputfile+label { - font-size: 3em; font-weight: 700; - color: white; - background-color: black; - display: inline-block; + color: black; + background-color: rgba(0, 0, 0, 0); + border: solid 3px black; margin: 10px; + font-size: 30; + height: 70px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; margin-top: 30px; - width: 100%; + width: 80%; + display: flex; + font-family: sans-serif; + text-transform: uppercase; + justify-content: center; + flex-direction: column; border-radius: 10px; } - .inputfile:focus+label, - .inputfile+label:hover { - background-color: darkred; + .inputfile.active+label { + font-style: italic; + color: black; + background-color: lightgreen; + border: solid 3px darkgreen; } .status { @@ -71,16 +84,6 @@ } -.backgroundUpload { - height: 100vh; - top: 0; - z-index: 999; - width: 100vw; - position: absolute; - background-color: lightgrey; - opacity: 0.4; -} - .image-upload { top: 100%; opacity: 0; @@ -129,7 +132,7 @@ height: 30px; margin: 10; border-radius: 20px; - opacity: 0.3; + opacity: 0.2; background-color: black; transition: all 2s, opacity 1.5s; } \ No newline at end of file diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index b712d52cc..6a5a2dd5b 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -43,21 +43,18 @@ export class Uploader extends React.Component { await Docs.Prototypes.initialize(); const imgPrev = document.getElementById("img_preview"); // Slab 1 - const slab1 = document.getElementById("slab1"); - if (slab1) slab1.style.opacity = "1"; + this.setOpacity(1, "1"); if (imgPrev) { const files: FileList | null = inputRef.current!.files; // Slab 2 - const slab2 = document.getElementById("slab2"); - if (slab2) slab2.style.opacity = "1"; + this.setOpacity(2, "1"); if (files && files.length !== 0) { this.process = "Uploading Files"; for (let index = 0; index < files.length; ++index) { const file = files[index]; const res = await Networking.UploadFilesToServer(file); // Slab 3 - const slab3 = document.getElementById("slab3"); - if (slab3) slab3.style.opacity = "1"; + this.setOpacity(3, "1"); res.map(async ({ result }) => { const name = file.name; if (result instanceof Error) { @@ -74,8 +71,7 @@ export class Uploader extends React.Component { doc = Docs.Create.ImageDocument(path, { _nativeWidth: 400, _width: 400, title: name }); } // Slab 4 - const slab4 = document.getElementById("slab4"); - if (slab4) slab4.style.opacity = "1"; + this.setOpacity(4, "1"); const res = await rp.get(Utils.prepend("/getUserDocumentId")); if (!res) { throw new Error("No user id returned"); @@ -94,13 +90,15 @@ export class Uploader extends React.Component { if (data) data.push(doc); else pending.data = new List([doc]); this.status = "finished"; - const slab5 = document.getElementById("slab5"); - if (slab5) slab5.style.opacity = "1"; + this.setOpacity(5, "1"); // Slab 5 this.process = "File " + (index + 1).toString() + " Uploaded"; - const slab6 = document.getElementById("slab6"); - if (slab6) slab6.style.opacity = "1"; - const slab7 = document.getElementById("slab7"); - if (slab7) slab7.style.opacity = "1"; + this.setOpacity(6, "1"); // Slab 6 + this.setOpacity(7, "1"); // Slab 7 + } + console.log("i: " + index + 1); + console.log("l: " + files.length); + if ((index + 1) === files.length) { + this.process = "Uploads Completed"; } }); } @@ -129,20 +127,9 @@ export class Uploader extends React.Component { @action clearUpload = () => { - const slab1 = document.getElementById("slab1"); - if (slab1) slab1.style.opacity = "0.4"; - const slab2 = document.getElementById("slab2"); - if (slab2) slab2.style.opacity = "0.4"; - const slab3 = document.getElementById("slab3"); - if (slab3) slab3.style.opacity = "0.4"; - const slab4 = document.getElementById("slab4"); - if (slab4) slab4.style.opacity = "0.4"; - const slab5 = document.getElementById("slab5"); - if (slab5) slab5.style.opacity = "0.4"; - const slab6 = document.getElementById("slab6"); - if (slab6) slab6.style.opacity = "0.4"; - const slab7 = document.getElementById("slab7"); - if (slab7) slab7.style.opacity = "0.4"; + for (let i = 1; i < 8; i++) { + this.setOpacity(i, "0.2"); + } this.nm = "Choose files"; if (inputRef.current) { @@ -152,24 +139,33 @@ export class Uploader extends React.Component { console.log(inputRef.current!.files); } + closeUpload = () => { + this.clearUpload(); + MobileInterface.Instance.toggleUpload(); + } + + setOpacity = (i: number, o: string) => { + const slab = document.getElementById("slab" + i); + if (slab) { + console.log(slab?.id); + slab.style.opacity = o; + } + } private get uploadInterface() { return (
-
+
this.closeUpload()}>
- + +
- -     Upload + Upload
- {/*
Upload
*/} - {/*

{this.status}

-

{this.error}

*/}
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index a1719c015..5894326ab 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import { library } from '@fortawesome/fontawesome-svg-core'; import { - faTasks, faFolderOpen, faAngleDoubleLeft, faExternalLinkSquareAlt, faMobile, faThLarge, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, + faTasks, faReply, faQuoteLeft, faHandPointLeft, faFolderOpen, faAngleDoubleLeft, faExternalLinkSquareAlt, faMobile, faThLarge, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, faTerminal, faToggleOn, faFile as fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard, faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, @@ -43,8 +43,9 @@ import { AudioUpload } from "./AudioUpload"; import { Cast, FieldValue } from '../fields/Types'; import { CollectionView } from '../client/views/collections/CollectionView'; import { InkingStroke } from '../client/views/InkingStroke'; +import RichTextMenu from "../client/views/nodes/formattedText/RichTextMenu"; -library.add(faTasks, faFolderOpen, faAngleDoubleLeft, faExternalLinkSquareAlt, faMobile, faThLarge, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, +library.add(faTasks, faReply, faQuoteLeft, faHandPointLeft, faFolderOpen, faAngleDoubleLeft, faExternalLinkSquareAlt, faMobile, faThLarge, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, faTerminal, faToggleOn, fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard, faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, @@ -387,13 +388,13 @@ export class MobileInterface extends React.Component { return (
this.handleClick(doc)}> -
{doc.title}
-
{doc.type}
- + key={index}> +
this.handleClick(doc)}> {doc.title}
+
this.handleClick(doc)}>{doc.type}
+ this.handleClick(doc)} className="right" icon="angle-right" size="lg" style={{ display: `${doc.type === "collection" ? "block" : "none"}` }} /> this.openFromSidebar(doc)} icon="external-link-alt" size="lg" /> -
); +
+ ); } }); @@ -440,7 +441,7 @@ export class MobileInterface extends React.Component { } /** - * Handles the Create New Workspace button in the menu + * Handles the Create New Workspace button in the menu (taken from MainView.tsx) */ @action createNewWorkspace = async (id?: string) => { @@ -759,12 +760,7 @@ export class MobileInterface extends React.Component { toggle = this.toggleUpload; } return ( -
-
- -
- -
+ ); } @@ -815,6 +811,7 @@ export class MobileInterface extends React.Component { {this.switchMenuView()} {this.inkMenu()} +
{this.pinToPresentation()} {this.downloadDocument()} @@ -843,6 +840,6 @@ Scripting.addGlobal(function openMobilePresentation() { return MobileInterface.I Scripting.addGlobal(function toggleMobileSidebar() { return MobileInterface.Instance.toggleSidebar(); }); Scripting.addGlobal(function openMobileAudio() { return MobileInterface.Instance.toggleAudio(); }); Scripting.addGlobal(function openMobileSettings() { return SettingsManager.Instance.open(); }); -Scripting.addGlobal(function openWorkspaces() { return MobileInterface.Instance.openWorkspaces(); }); +Scripting.addGlobal(function openMobileWorkspaces() { return MobileInterface.Instance.openWorkspaces(); }); Scripting.addGlobal(function uploadImageMobile() { return MobileInterface.Instance.toggleUpload(); }); Scripting.addGlobal(function switchToMobileUploads() { return MobileInterface.Instance.switchToMobileUploads(); }); diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss index 53bc48034..c499e6d1e 100644 --- a/src/mobile/MobileMenu.scss +++ b/src/mobile/MobileMenu.scss @@ -176,6 +176,7 @@ body { .open { right: 20px; + font-size: 35; position: absolute; } -- cgit v1.2.3-70-g09d2 From 381a2b87a7dd9d6e3629d89dec692a8e5d9d0662 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Thu, 25 Jun 2020 16:44:52 -0500 Subject: slight fix to zooming w menu --- src/client/views/collections/CollectionSchemaView.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 2e4d10f1d..128423014 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -349,13 +349,22 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { return this.props.ScreenToLocalTransform().translate(- this.borderWidth - NumCast(COLLECTION_BORDER_WIDTH) - this.tableWidth, - this.borderWidth); } + @action + onWheel(e: React.WheelEvent) { + const scale = this.props.ScreenToLocalTransform().Scale; + this.props.active(true) && e.stopPropagation(); + this.menuCoordinates[0] += e.screenX * scale; + this.menuCoordinates[1] += e.screenY * scale; + } + @computed get renderMenu() { + const scale = this.props.ScreenToLocalTransform().Scale; return (
this.props.active(true) && e.stopPropagation()} style={{ position: "absolute", background: "white", - transform: `translate(${this.menuCoordinates[0]}px, ${this.menuCoordinates[1]}px)` + transform: `translate(${this.menuCoordinates[0]}px, ${this.menuCoordinates[1] - 100 / scale}px)` }}> { const dim = this.props.ScreenToLocalTransform().inverse().transformDirection(r.offset.width, r.offset.height); -- cgit v1.2.3-70-g09d2 From 8292aae00bb7fd7716110df21faafa53fd35738d Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Thu, 25 Jun 2020 17:28:21 -0500 Subject: menu text selection and more movement tweaks --- src/client/views/collections/CollectionSchemaView.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 128423014..9cd13058f 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -349,12 +349,18 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { return this.props.ScreenToLocalTransform().translate(- this.borderWidth - NumCast(COLLECTION_BORDER_WIDTH) - this.tableWidth, - this.borderWidth); } + @action + onHeaderClick = (e: React.PointerEvent) => { + this.props.active(true); + e.stopPropagation(); + } + @action onWheel(e: React.WheelEvent) { const scale = this.props.ScreenToLocalTransform().Scale; this.props.active(true) && e.stopPropagation(); - this.menuCoordinates[0] += e.screenX * scale; - this.menuCoordinates[1] += e.screenY * scale; + this.menuCoordinates[0] -= e.screenX / scale; + this.menuCoordinates[1] -= e.screenY / scale; } @computed get renderMenu() { @@ -362,9 +368,10 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { return (
this.props.active(true) && e.stopPropagation()} + onPointerDown={e => this.onHeaderClick(e)} style={{ position: "absolute", background: "white", - transform: `translate(${this.menuCoordinates[0]}px, ${this.menuCoordinates[1] - 100 / scale}px)` + transform: `translate(${this.menuCoordinates[0] * scale}px, ${this.menuCoordinates[1] / scale}px)` }}> { const dim = this.props.ScreenToLocalTransform().inverse().transformDirection(r.offset.width, r.offset.height); -- cgit v1.2.3-70-g09d2 From 4b68d25cc3718a6b9fffdd60d04707cbcc8fc2b2 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Thu, 25 Jun 2020 22:33:50 -0500 Subject: adjusting menu trigger --- .../views/collections/CollectionSchemaHeaders.tsx | 2 +- .../views/collections/CollectionSchemaView.scss | 3 +++ .../views/collections/CollectionSchemaView.tsx | 22 +++++++++++++--------- src/client/views/collections/SchemaTable.tsx | 7 ++++++- 4 files changed, 23 insertions(+), 11 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index aaa2e6096..b84b75172 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -376,7 +376,7 @@ export class KeysDropdown extends React.Component { this.onChange(e.target.value)} onClick={(e) => { - this._inputRef.current!.select(); + //this._inputRef.current!.select(); e.stopPropagation(); }} onFocus={this.onFocus} onBlur={this.onBlur}>
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index a0bbae88f..a21249c58 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -182,6 +182,9 @@ color: gray; z-index: 10000; overflow-y: visible; + display: flex; + justify-content: space-between; + flex-wrap: wrap; .collectionSchema-header-menu { height: 100%; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 9cd13058f..900949b94 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -299,20 +299,24 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @action closeHeader = () => { this._headerOpen = false; } + renderKeysDropDown = (col: any) => { + return c.heading)} + canAddNew={true} + addNew={false} + onSelect={this.changeColumns} + setIsEditing={this.setHeaderIsEditing} + />; + } + renderContent = (col: any) => { return (
- c.heading)} - canAddNew={true} - addNew={false} - onSelect={this.changeColumns} - setIsEditing={this.setHeaderIsEditing} - /> + {this.renderKeysDropDown(col)}
{false ? <> : <> diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index 97d4bb303..b9df2fe6b 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -163,15 +163,20 @@ export class SchemaTable extends React.Component { const menuContent =
{col.heading}
; + const header =
this.props.openHeader(col, menuContent, e.clientX, e.clientY)} + //onClick={e => this.props.openHeader(col, menuContent, e.clientX, e.clientY)} style={{ background: col.color, padding: "4px", letterSpacing: "2px", textTransform: "uppercase" }}> {menuContent} +
this.props.openHeader(col, menuContent, e.clientX, e.clientY)} + style={{ float: "right" }}> + +
; return { -- cgit v1.2.3-70-g09d2 From 48e841282b896a0961d595281211b276b7a9d345 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Fri, 26 Jun 2020 22:06:33 +0800 Subject: audio dictation --- src/client/util/CurrentUserUtils.ts | 2 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 4 + src/mobile/AudioUpload.tsx | 10 +- src/mobile/MobileInterface.tsx | 116 +++++++-------------- 4 files changed, 48 insertions(+), 84 deletions(-) (limited to 'src/client/views') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 823a99436..e402718bf 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -474,7 +474,7 @@ export class CurrentUserUtils { static setupMobileButtons(doc?: Doc, buttons?: string[]) { const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, info: string, dragFactory?: Doc }[] = [ - { title: "WORKSPACES", icon: "bars", click: 'openMobileWorkspaces()', backgroundColor: "lightgrey", info: "Access your Workspaces from your mobile, and navigate through all of your documents. " }, + { title: "WORKSPACES", icon: "bars", click: 'switchToMobileLibrary()', backgroundColor: "lightgrey", info: "Access your Workspaces from your mobile, and navigate through all of your documents. " }, { title: "UPLOAD", icon: "upload", click: 'uploadImageMobile()', backgroundColor: "lightgrey", info: "Upload files from your mobile device so they can be accessed on Dash Web." }, { title: "MOBILE UPLOAD", icon: "mobile", click: 'switchToMobileUploads()', backgroundColor: "lightgrey", info: "Access the collection of your mobile uploads." }, { title: "RECORD", icon: "microphone", click: 'openMobileAudio()', backgroundColor: "lightgrey", info: "Use your phone to record, dictate and then upload audio onto Dash Web." }, diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 3eecc98a4..b5591ca02 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -505,6 +505,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp } recordDictation = () => { + console.log("recording dictation"); + console.log(this._editorView); DictationManager.Controls.listen({ interimHandler: this.setCurrentBulletContent, continuous: { indefinite: false }, @@ -523,6 +525,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp } recordBullet = async () => { + console.log("recording bullet"); const completedCue = "end session"; const results = await DictationManager.Controls.listen({ interimHandler: this.setCurrentBulletContent, @@ -539,6 +542,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp setCurrentBulletContent = (value: string) => { if (this._editorView) { + console.log("this._editorView"); const state = this._editorView.state; const now = Date.now(); let mark = schema.marks.user_mark.create({ userid: Doc.CurrentUserEmail, modified: Math.floor(now / 1000) }); diff --git a/src/mobile/AudioUpload.tsx b/src/mobile/AudioUpload.tsx index f859b0ba3..83da41d90 100644 --- a/src/mobile/AudioUpload.tsx +++ b/src/mobile/AudioUpload.tsx @@ -19,6 +19,9 @@ import { nullAudio } from '../fields/URLField'; import { Transform } from '../client/util/Transform'; import { DocumentView } from '../client/views/nodes/DocumentView'; import { MobileInterface } from './MobileInterface'; +import { DictationOverlay } from '../client/views/DictationOverlay'; +import RichTextMenu from '../client/views/nodes/formattedText/RichTextMenu'; +import { ContextMenu } from '../client/views/ContextMenu'; export interface ImageUploadProps { Document: Doc; @@ -57,6 +60,9 @@ export class AudioUpload extends React.Component { private get uploadInterface() { return ( <> + + +
this.closeUpload()}>
@@ -66,10 +72,10 @@ export class AudioUpload extends React.Component { Document={this._audioCol} DataDoc={undefined} LibraryPath={emptyPath} - addDocument={returnFalse} + addDocument={undefined} addDocTab={returnFalse} pinToPres={emptyFunction} - rootSelected={returnFalse} + rootSelected={returnTrue} removeDocument={undefined} docFilters={returnEmptyFilter} onClick={undefined} diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index ed5076402..90672e19f 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -45,6 +45,8 @@ import { Cast, FieldValue } from '../fields/Types'; import { CollectionView } from '../client/views/collections/CollectionView'; import { InkingStroke } from '../client/views/InkingStroke'; import RichTextMenu from "../client/views/nodes/formattedText/RichTextMenu"; +import { AudioBox } from "../client/views/nodes/AudioBox"; +import { FormattedTextBox } from "../client/views/nodes/formattedText/FormattedTextBox"; library.add(faTasks, faReply, faQuoteLeft, faHandPointLeft, faFolderOpen, faAngleDoubleLeft, faExternalLinkSquareAlt, faMobile, faThLarge, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, faTerminal, faToggleOn, fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard, @@ -80,13 +82,22 @@ export class MobileInterface extends React.Component { @action componentDidMount = () => { - Doc.UserDoc().activeMobile = this._homeDoc; + // Doc.UserDoc().activeMobile = this._homeDoc; this._homeDoc._viewType === "stacking" ? this.menuListView = true : this.menuListView = false; Doc.SetSelectedTool(InkTool.None); - this.switchCurrentView((userDoc: Doc) => this._homeDoc); + Doc.UserDoc().activeMobile = this._homeDoc; + AudioBox.Enabled = true; document.removeEventListener("dblclick", this.onReactDoubleClick); document.addEventListener("dblclick", this.onReactDoubleClick); + document.addEventListener("dash", (e: any) => { // event used by chrome plugin to tell Dash which document to focus on + const id = FormattedTextBox.GetDocFromUrl(e.detail); + DocServer.GetRefField(id).then(doc => { + if (doc instanceof Doc) { + DocumentManager.Instance.jumpToDocument(doc, false, undefined); + } + }); + }); } @action @@ -101,10 +112,14 @@ export class MobileInterface extends React.Component { // Switch the mobile view to the given doc @action - switchCurrentView = (doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) => { + switchCurrentView = (doc: Doc, renderView?: () => JSX.Element, onSwitch?: () => void) => { if (!this.userDoc) return; - - Doc.UserDoc().activeMobile = doc(this.userDoc); + if (this._activeDoc === this._homeDoc) { + this._parents.push(this._activeDoc); + this._homeMenu = false; + } + this._activeDoc = doc; + Doc.UserDoc().activeMobile = doc; onSwitch && onSwitch(); this.renderView = renderView; @@ -118,21 +133,10 @@ export class MobileInterface extends React.Component { * Method called when 'Library' button is pressed on the home screen */ switchToLibrary = async () => { - this._parents.push(this._activeDoc); - this.switchCurrentView((userDoc: Doc) => this._library); - this._activeDoc = this._library; + this.switchCurrentView(this._library); this._homeMenu = false; this.toggleSidebar(); //setTimeout(this.toggleSidebar, 300); - - } - - openWorkspaces = () => { - this._parents.push(this._activeDoc); - this.switchCurrentView((userDoc: Doc) => this._library); - this._activeDoc = this._library; - this._homeMenu = false; - this.sidebarActive = true; } /** @@ -144,24 +148,20 @@ export class MobileInterface extends React.Component { if (doc === Cast(this._library, Doc) as Doc) { this._child = null; - this.userDoc.activeMobile = this._library; + this.switchCurrentView(this._library); } else if (doc === Cast(this._homeDoc, Doc) as Doc) { this._homeMenu = true; this._parents = []; - this._activeDoc = this._homeDoc; this._child = null; - this.switchCurrentView((userDoc: Doc) => this._homeDoc); + this.switchCurrentView(this._homeDoc); } else { if (doc) { this._child = doc; - this.switchCurrentView((userDoc: Doc) => doc); + this.switchCurrentView(doc); this._homeMenu = false; header.textContent = String(doc.title); } } - if (doc) { - this._activeDoc = doc; - } this._ink = false; } @@ -172,9 +172,8 @@ export class MobileInterface extends React.Component { if (!this._homeMenu || this.sidebarActive) { this._homeMenu = true; this._parents = []; - this._activeDoc = this._homeDoc; this._child = null; - this.switchCurrentView((userDoc: Doc) => this._homeDoc); + this.switchCurrentView(this._homeDoc); } if (this.sidebarActive) { this.toggleSidebar(); @@ -186,8 +185,7 @@ export class MobileInterface extends React.Component { */ returnMain = () => { this._parents = [this._homeDoc]; - this._activeDoc = this._library; - this.switchCurrentView((userDoc: Doc) => this._library); + this.switchCurrentView(this._library); this._homeMenu = false; this._child = null; } @@ -244,21 +242,17 @@ export class MobileInterface extends React.Component { * Navigates to the given doc and updates the sidebar. * @param doc: doc for which the method is called */ - @undoBatch handleClick = async (doc: Doc) => { const children = DocListCast(doc.data); if (doc.type !== "collection" && this.sidebarActive) { this._parents.push(this._activeDoc); - this._activeDoc = doc; - this.switchCurrentView((userDoc: Doc) => doc); + this.switchCurrentView(doc); this._homeMenu = false; this.toggleSidebar(); } - else if (doc.type === "collection" && children.length === 0) this.openFromSidebar(doc); else { this._parents.push(this._activeDoc); - this._activeDoc = doc; - this.switchCurrentView((userDoc: Doc) => doc); + this.switchCurrentView(doc); this._homeMenu = false; this._child = doc; } @@ -266,8 +260,7 @@ export class MobileInterface extends React.Component { openFromSidebar = (doc: Doc) => { this._parents.push(this._activeDoc); - this._activeDoc = doc; - this.switchCurrentView((userDoc: Doc) => doc); + this.switchCurrentView(doc); this._homeMenu = false; this._child = doc; //? this.toggleSidebar(); @@ -354,16 +347,14 @@ export class MobileInterface extends React.Component { // Handles when user clicks on a document in the pathbar handlePathClick = (doc: Doc, index: number) => { if (doc === this._library) { - this._activeDoc = doc; this._child = null; - this.switchCurrentView((userDoc: Doc) => doc); + this.switchCurrentView(doc); this._parents.length = index; } else if (doc === this._homeDoc) { this.returnHome(); } else { - this._activeDoc = doc; this._child = doc; - this.switchCurrentView((userDoc: Doc) => doc); + this.switchCurrentView(doc); this._parents.length = index; } } @@ -610,31 +601,6 @@ export class MobileInterface extends React.Component { } } - // Mobile audio doc - recordAudio = async () => { - // upload to server with known URL - if (this._activeDoc.title !== "mobile audio") { - this._parents.push(this._activeDoc); - } - const audioDoc = Cast(Docs.Create.AudioDocument(nullAudio, { _width: 200, _height: 100, title: "mobile audio" }), Doc) as Doc; - if (audioDoc) { - this._activeDoc = audioDoc; - this.switchCurrentView((userDoc: Doc) => audioDoc); - this._homeMenu = false; - } - } - - // // Pushing the audio doc onto Dash Web through the right side bar - // uploadAudio = () => { - // const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; - // const audioDoc = this._activeDoc; - // const data = Cast(audioRightSidebar.data, listSpec(Doc)); - - // if (data) { - // data.push(audioDoc); - // } - // } - // Button for pinning images to presentation pinToPresentation = () => { // Only making button available if it is an image @@ -719,15 +685,11 @@ export class MobileInterface extends React.Component { // For setting up the presentation document for the home menu setupDefaultPresentation = () => { - if (this._activeDoc.title !== "Presentation") { - this._parents.push(this._activeDoc); - } const presentation = Cast(Doc.UserDoc().activePresentation, Doc) as Doc; if (presentation) { - this._activeDoc = presentation; - this.switchCurrentView((userDoc: Doc) => presentation); + this.switchCurrentView(presentation); this._homeMenu = false; } } @@ -801,13 +763,8 @@ export class MobileInterface extends React.Component { } switchToMobileUploads = () => { - if (this._activeDoc.title !== "Presentation") { - this._parents.push(this._activeDoc); - } const mobileUpload = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; - console.log(mobileUpload.title); - this._activeDoc = mobileUpload; - this.switchCurrentView((userDoc: Doc) => mobileUpload); + this.switchCurrentView(mobileUpload); this._homeMenu = false; } @@ -831,9 +788,7 @@ export class MobileInterface extends React.Component { {this.undo()} {this.drawInk()} {this.redo()} - {/* {this.upload()} */} {this.uploadImageButton()} - {/* {this.uploadAudioButton()} */}
{this.displayWorkspaces()} {this.renderDefaultContent()} @@ -846,14 +801,13 @@ export class MobileInterface extends React.Component { -Scripting.addGlobal(function switchMobileView(doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) { return MobileInterface.Instance.switchCurrentView(doc, renderView, onSwitch); }, +Scripting.addGlobal(function switchMobileView(doc: Doc, renderView?: () => JSX.Element, onSwitch?: () => void) { return MobileInterface.Instance.switchCurrentView(doc, renderView, onSwitch); }, "changes the active document displayed on the mobile, (doc: any)"); Scripting.addGlobal(function openMobilePresentation() { return MobileInterface.Instance.setupDefaultPresentation(); }, "opens the presentation on mobile"); Scripting.addGlobal(function toggleMobileSidebar() { return MobileInterface.Instance.toggleSidebar(); }); Scripting.addGlobal(function openMobileAudio() { return MobileInterface.Instance.toggleAudio(); }); Scripting.addGlobal(function openMobileSettings() { return SettingsManager.Instance.open(); }); -Scripting.addGlobal(function openMobileWorkspaces() { return MobileInterface.Instance.openWorkspaces(); }); Scripting.addGlobal(function uploadImageMobile() { return MobileInterface.Instance.toggleUpload(); }); Scripting.addGlobal(function switchToMobileUploads() { return MobileInterface.Instance.switchToMobileUploads(); }); -Scripting.addGlobal(function switchToLibrary() { return MobileInterface.Instance.switchToLibrary(); }); \ No newline at end of file +Scripting.addGlobal(function switchToMobileLibrary() { return MobileInterface.Instance.switchToLibrary(); }); \ No newline at end of file -- cgit v1.2.3-70-g09d2 From bd6dd6a04edf441a819f6f5bdff3aa03b4298d9a Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Fri, 26 Jun 2020 15:22:31 -0500 Subject: editable text in header --- .../views/collections/CollectionSchemaHeaders.tsx | 12 +++-- .../views/collections/CollectionSchemaView.scss | 5 +- .../views/collections/CollectionSchemaView.tsx | 10 ++-- src/client/views/collections/SchemaTable.tsx | 53 +++++++++++++++++----- 4 files changed, 59 insertions(+), 21 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index b84b75172..8494f3dca 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -285,6 +285,7 @@ export interface KeysDropdownProps { addNew: boolean; onSelect: (oldKey: string, newKey: string, addnew: boolean) => void; setIsEditing: (isEditing: boolean) => void; + width?: string; } @observer export class KeysDropdown extends React.Component { @@ -357,12 +358,13 @@ export class KeysDropdown extends React.Component { this.props.existingKeys.findIndex(key => key.toUpperCase() === this._searchTerm.toUpperCase()) > -1; const options = keyOptions.map(key => { - return
e.stopPropagation()} onClick={() => { this.onSelect(key); this.setSearchTerm(""); }}>{key}
; + return
e.stopPropagation()} onClick={() => { this.onSelect(key); this.setSearchTerm(""); }}>{key}
; }); // if search term does not already exist as a group type, give option to create new group type if (!exactFound && this._searchTerm !== "" && this.props.canAddNew) { - options.push(
{ this.onSelect(this._searchTerm); this.setSearchTerm(""); }}> Create "{this._searchTerm}" key
); } @@ -373,13 +375,15 @@ export class KeysDropdown extends React.Component { render() { return (
- this.onChange(e.target.value)} onClick={(e) => { //this._inputRef.current!.select(); e.stopPropagation(); }} onFocus={this.onFocus} onBlur={this.onBlur}> -
+
{this.renderOptions()}
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index a21249c58..5608cb7ab 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -266,6 +266,7 @@ button.add-column { .keys-dropdown { position: relative; width: 100%; + background-color: white; input { border: 2px solid $light-color-secondary; @@ -285,9 +286,11 @@ button.add-column { position: absolute; top: 28px; box-shadow: 0 10px 16px rgba(0, 0, 0, 0.1); + background-color: white; .key-option { - background-color: $light-color; + //background-color: $light-color; + background-color: white; border: 1px solid lightgray; padding: 2px 3px; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 900949b94..a9c599e0e 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -60,7 +60,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); } @observable _menuWidth = 0; - @observable _menuContent: any = ""; @observable _headerOpen = false; @observable _isOpen = false; @observable _node: HTMLDivElement | null = null; @@ -288,8 +287,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { } @action - openHeader = (col: any, menu: any, screenx: number, screeny: number) => { - this._menuContent = menu; + openHeader = (col: any, screenx: number, screeny: number) => { this._col = col; this._headerOpen = !this._headerOpen; this._pointerX = screenx; @@ -363,8 +361,8 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { onWheel(e: React.WheelEvent) { const scale = this.props.ScreenToLocalTransform().Scale; this.props.active(true) && e.stopPropagation(); - this.menuCoordinates[0] -= e.screenX / scale; - this.menuCoordinates[1] -= e.screenY / scale; + //this.menuCoordinates[0] -= e.screenX / scale; + //this.menuCoordinates[1] -= e.screenY / scale; } @computed get renderMenu() { @@ -505,6 +503,8 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { onResizedChange={this.onResizedChange} setColumns={this.setColumns} reorderColumns={this.reorderColumns} + changeColumns={this.changeColumns} + setHeaderIsEditing={this.setHeaderIsEditing} />; } diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index b9df2fe6b..5df0a676e 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -20,12 +20,13 @@ import { COLLECTION_BORDER_WIDTH } from '../../views/globalCssVariables.scss'; import { ContextMenu } from "../ContextMenu"; import '../DocumentDecorations.scss'; import { CellProps, CollectionSchemaCell, CollectionSchemaCheckboxCell, CollectionSchemaDocCell, CollectionSchemaNumberCell, CollectionSchemaStringCell, CollectionSchemaImageCell, CollectionSchemaListCell } from "./CollectionSchemaCells"; -import { CollectionSchemaAddColumnHeader } from "./CollectionSchemaHeaders"; +import { CollectionSchemaAddColumnHeader, KeysDropdown } from "./CollectionSchemaHeaders"; import { MovableColumn, MovableRow } from "./CollectionSchemaMovableTableHOC"; import "./CollectionSchemaView.scss"; import { CollectionView } from "./CollectionView"; import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView"; import { emptyFunction, returnZero, returnOne, returnFalse, returnEmptyFilter, emptyPath } from "../../../Utils"; +import { TouchScrollableMenuItem } from "../TouchScrollableMenu"; enum ColumnType { @@ -72,11 +73,13 @@ export interface SchemaTableProps { columns: SchemaHeaderField[]; documentKeys: any[]; headerIsEditing: boolean; - openHeader: (column: any, menu: any, screenx: number, screeny: number) => void; + openHeader: (column: any, screenx: number, screeny: number) => void; onPointerDown: (e: React.PointerEvent) => void; onResizedChange: (newResized: Resize[], event: any) => void; setColumns: (columns: SchemaHeaderField[]) => void; reorderColumns: (toMove: SchemaHeaderField, relativeTo: SchemaHeaderField, before: boolean, columnsValues: SchemaHeaderField[]) => void; + changeColumns: (oldKey: string, newKey: string, addNew: boolean) => void; + setHeaderIsEditing: (isEditing: boolean) => void; } @observer @@ -91,6 +94,8 @@ export class SchemaTable extends React.Component { @observable _showDataDoc: any = ""; @observable _showDocPos: number[] = []; + @observable _showTitleDropdown: boolean = false; + @computed get previewWidth() { return () => NumCast(this.props.Document.schemaPreviewWidth); } @computed get previewHeight() { return () => this.props.PanelHeight() - 2 * this.borderWidth; } @computed get tableWidth() { return this.props.PanelWidth() - 2 * this.borderWidth - this.DIVIDER_WIDTH - this.previewWidth(); } @@ -126,6 +131,9 @@ export class SchemaTable extends React.Component { }, [] as SortingRule[]); } + @action + changeDropdown = () => { console.log("header clicked"); this._showTitleDropdown = !this._showTitleDropdown; } + @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); } @computed get tableColumns(): Column[] { @@ -156,26 +164,48 @@ export class SchemaTable extends React.Component { const cols = this.props.columns.map(col => { + const keysDropdown = c.heading)} + canAddNew={true} + addNew={false} + // i think issue is with these two props + onSelect={this.props.changeColumns} + setIsEditing={this.props.setHeaderIsEditing} + width={"100%"} + />; + const icon: IconProp = this.getColumnType(col) === ColumnType.Number ? "hashtag" : this.getColumnType(col) === ColumnType.String ? "font" : this.getColumnType(col) === ColumnType.Boolean ? "check-square" : this.getColumnType(col) === ColumnType.Doc ? "file" : this.getColumnType(col) === ColumnType.Image ? "image" : this.getColumnType(col) === ColumnType.List ? "list-ul" : "align-justify"; + const headerText = this._showTitleDropdown ? keysDropdown : col.heading; - - const menuContent =
{col.heading}
; + const menuContent =
+ +
+ {keysDropdown} +
+
; const header = -
this.props.openHeader(col, menuContent, e.clientX, e.clientY)} + className="collectionSchemaView-menuOptions" style={{ - background: col.color, padding: "4px", - letterSpacing: "2px", - textTransform: "uppercase" + background: col.color, padding: "2px", + // letterSpacing: "2px", + // textTransform: "uppercase", + display: "flex" }}> {menuContent} -
this.props.openHeader(col, menuContent, e.clientX, e.clientY)} - style={{ float: "right" }}> - +
this.props.openHeader(col, e.clientX, e.clientY)} + style={{ float: "right", paddingRight: "6px" }}> +
; @@ -342,6 +372,7 @@ export class SchemaTable extends React.Component { this.props.columns.push(new SchemaHeaderField(`New field ${index ? "(" + index + ")" : ""}`, "#f1efeb")); } + @action getColumnType = (column: SchemaHeaderField): ColumnType => { // added functionality to convert old column type stuff to new column type stuff -syip if (column.type && column.type !== 0) { -- cgit v1.2.3-70-g09d2 From fa4612e7dfeaecc09e205c5d6fa37743d23f9298 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sat, 27 Jun 2020 02:37:22 -0500 Subject: moved sorting into header --- .../views/collections/CollectionSchemaHeaders.tsx | 15 +++++-- .../views/collections/CollectionSchemaView.scss | 1 + .../views/collections/CollectionSchemaView.tsx | 1 + src/client/views/collections/SchemaTable.tsx | 51 +++++++++++++++++++--- 4 files changed, 58 insertions(+), 10 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index 8494f3dca..096b45bee 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -358,13 +358,19 @@ export class KeysDropdown extends React.Component { this.props.existingKeys.findIndex(key => key.toUpperCase() === this._searchTerm.toUpperCase()) > -1; const options = keyOptions.map(key => { - return
e.stopPropagation()} onClick={() => { this.onSelect(key); this.setSearchTerm(""); }}>{key}
; }); // if search term does not already exist as a group type, give option to create new group type if (!exactFound && this._searchTerm !== "" && this.props.canAddNew) { - options.push(
{ this.onSelect(this._searchTerm); this.setSearchTerm(""); }}> Create "{this._searchTerm}" key
); } @@ -382,7 +388,10 @@ export class KeysDropdown extends React.Component { //this._inputRef.current!.select(); e.stopPropagation(); }} onFocus={this.onFocus} onBlur={this.onBlur}> -
{this.renderOptions()}
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 5608cb7ab..9c5f2e8ac 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -293,6 +293,7 @@ button.add-column { background-color: white; border: 1px solid lightgray; padding: 2px 3px; + overflow-x: hidden; &:not(:first-child) { border-top: 0; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index a9c599e0e..61581aec1 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -505,6 +505,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { reorderColumns={this.reorderColumns} changeColumns={this.changeColumns} setHeaderIsEditing={this.setHeaderIsEditing} + changeColumnSort={this.setColumnSort} />; } diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index 5df0a676e..5d1dcf199 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -80,6 +80,7 @@ export interface SchemaTableProps { reorderColumns: (toMove: SchemaHeaderField, relativeTo: SchemaHeaderField, before: boolean, columnsValues: SchemaHeaderField[]) => void; changeColumns: (oldKey: string, newKey: string, addNew: boolean) => void; setHeaderIsEditing: (isEditing: boolean) => void; + changeColumnSort: (columnField: SchemaHeaderField, descending: boolean | undefined) => void; } @observer @@ -132,7 +133,22 @@ export class SchemaTable extends React.Component { } @action - changeDropdown = () => { console.log("header clicked"); this._showTitleDropdown = !this._showTitleDropdown; } + changeSorting = (col: any) => { + console.log(col.heading); + if (col.desc === undefined) { + // no sorting + this.props.changeColumnSort(col, true); + } else if (col.desc === true) { + // descending sort + this.props.changeColumnSort(col, false); + } else if (col.desc === false) { + // ascending sort + this.props.changeColumnSort(col, undefined); + } + } + + @action + changeTitleMode = () => { console.log("header clicked"); this._showTitleDropdown = !this._showTitleDropdown; } @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); } @computed get tableColumns(): Column[] { @@ -180,7 +196,17 @@ export class SchemaTable extends React.Component { this.getColumnType(col) === ColumnType.Boolean ? "check-square" : this.getColumnType(col) === ColumnType.Doc ? "file" : this.getColumnType(col) === ColumnType.Image ? "image" : this.getColumnType(col) === ColumnType.List ? "list-ul" : "align-justify"; - const headerText = this._showTitleDropdown ? keysDropdown : col.heading; + const headerText = this._showTitleDropdown ? keysDropdown :
+ {col.heading}
; + + const sortIcon = col.desc === undefined ? "circle" : col.desc === true ? "caret-down" : "caret-up"; const menuContent =
{ const header =
this.props.openHeader(col, menuContent, e.clientX, e.clientY)} - className="collectionSchemaView-menuOptions" + className="collectionSchemaView-menuOptions-wrapper" style={{ background: col.color, padding: "2px", - // letterSpacing: "2px", - // textTransform: "uppercase", display: "flex" }}> - {menuContent} + +
+
+
+ {keysDropdown} +
+ +
this.changeSorting(col)} + style={{ paddingRight: "6px" }}> + +
this.props.openHeader(col, e.clientX, e.clientY)} style={{ float: "right", paddingRight: "6px" }}> - +
; -- cgit v1.2.3-70-g09d2 From ecd3c3b0a713a594d4d0f4295bad017af1ba47ba Mon Sep 17 00:00:00 2001 From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com> Date: Sat, 27 Jun 2020 21:46:17 -0700 Subject: some changes --- src/client/views/GestureOverlay.tsx | 2 +- src/mobile/MobileInterface.tsx | 4 ++++ src/mobile/MobileMenu.scss | 2 +- 3 files changed, 6 insertions(+), 2 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 98777a92c..e82609e7e 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -260,7 +260,7 @@ export default class GestureOverlay extends Touchable { handleHandDown = async (e: React.TouchEvent) => { this._holdTimer && clearTimeout(this._holdTimer); - // this chunk of code helps us keep track of which touch events are associated with a hand event + // this chunk of code helps us keep track of which touch events ar e associated with a hand event // so that if a hand is held down, but a second hand is interacting with dash, the second hand's events // won't interfere with the first hand's events. const fingers = new Array(); diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index 0bc950a71..d0848aea2 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -12,6 +12,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import { trace } from 'mobx'; +import { TraceMobx } from "../fields/util"; import * as rp from 'request-promise'; import { Doc, DocListCast } from '../fields/Doc'; import { CurrentUserUtils } from '../client/util/CurrentUserUtils'; @@ -788,6 +789,7 @@ export class MobileInterface extends React.Component { } onDragOver = (e: React.DragEvent) => { + console.log("drag!"); e.preventDefault(); e.stopPropagation(); } @@ -816,6 +818,8 @@ export class MobileInterface extends React.Component { } render() { + // trace(); + // TraceMobx(); return (
diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss index ec8946578..24d72dec6 100644 --- a/src/mobile/MobileMenu.scss +++ b/src/mobile/MobileMenu.scss @@ -248,7 +248,7 @@ body { .sidebar.active { position: absolute; right:0%; - opacity: 1; + opacity: 0.8; z-index: 101; } -- cgit v1.2.3-70-g09d2 From e5385f9421b23d4119ac8704c9d127f1f296ac54 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sun, 28 Jun 2020 01:53:35 -0500 Subject: partial dropdown for types --- .../views/collections/CollectionSchemaHeaders.tsx | 8 +- .../views/collections/CollectionSchemaView.scss | 4 +- .../views/collections/CollectionSchemaView.tsx | 157 ++++++++++++++++----- src/client/views/collections/SchemaTable.tsx | 22 +-- 4 files changed, 135 insertions(+), 56 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index 096b45bee..80c265ba6 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -360,7 +360,7 @@ export class KeysDropdown extends React.Component { const options = keyOptions.map(key => { return
e.stopPropagation()} onClick={() => { this.onSelect(key); this.setSearchTerm(""); }}>{key}
; }); @@ -369,7 +369,7 @@ export class KeysDropdown extends React.Component { if (!exactFound && this._searchTerm !== "" && this.props.canAddNew) { options.push(
{ this.onSelect(this._searchTerm); this.setSearchTerm(""); }}> Create "{this._searchTerm}" key
); @@ -380,8 +380,8 @@ export class KeysDropdown extends React.Component { render() { return ( -
- + this.onChange(e.target.value)} onClick={(e) => { diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 9c5f2e8ac..2926a8f6f 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -265,7 +265,7 @@ button.add-column { .keys-dropdown { position: relative; - width: 100%; + //width: 100%; background-color: white; input { @@ -273,6 +273,8 @@ button.add-column { padding: 3px; height: 28px; font-weight: bold; + letter-spacing: "2px"; + text-transform: "uppercase"; &:focus { font-weight: normal; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 61581aec1..bfd5fa96f 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -24,6 +24,7 @@ import { setupMoveUpEvents, emptyFunction, returnZero, returnOne, returnFalse } import { SnappingManager } from "../../util/SnappingManager"; import Measure from "react-measure"; import { SchemaTable } from "./SchemaTable"; +import { civicinfo } from "googleapis/build/src/apis/civicinfo"; library.add(faCog, faPlus, faSortUp, faSortDown); library.add(faTable); @@ -68,6 +69,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @observable _menuHeight = 0; @observable _pointerX = 0; @observable _pointerY = 0; + @observable _openTypes: boolean = false; @computed get menuCoordinates() { const x = Math.max(0, Math.min(document.body.clientWidth - this._menuWidth, this._pointerX)); const y = Math.max(0, Math.min(document.body.clientHeight - this._menuHeight, this._pointerY)); @@ -123,7 +125,9 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { this.setHeaderIsEditing(this._isOpen); } + @action changeColumnType = (type: ColumnType, col: any): void => { + this._openTypes = false; this.setColumnType(col, type); } @@ -175,43 +179,74 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { node && (this._node = node); } + @action + typesDropdownChange = (bool: boolean) => { + this._openTypes = bool; + } + + @action renderTypes = (col: any) => { if (columnTypes.get(col.heading)) return (null); const type = col.type; + + const anyType =
this.changeColumnType(ColumnType.Any, col)}> + + Any +
; + + const numType =
this.changeColumnType(ColumnType.Number, col)}> + + Number +
; + + const textType =
this.changeColumnType(ColumnType.String, col)}> + + Text +
; + + const boolType =
this.changeColumnType(ColumnType.Boolean, col)}> + + Checkbox +
; + + const listType =
this.changeColumnType(ColumnType.List, col)}> + + List +
; + + const docType =
this.changeColumnType(ColumnType.Doc, col)}> + + Document +
; + + const imageType =
this.changeColumnType(ColumnType.Image, col)}> + + Image +
; + + + const allColumnTypes =
+ {anyType} + {numType} + {textType} + {boolType} + {listType} + {docType} + {imageType} +
; + + const justColType = type === ColumnType.Any ? anyType : type === ColumnType.Number ? numType : + type === ColumnType.String ? textType : type === ColumnType.Boolean ? boolType : + type === ColumnType.List ? listType : type === ColumnType.Doc ? docType : imageType; + return (
- -
-
this.changeColumnType(ColumnType.Any, col)}> - - Any -
-
this.changeColumnType(ColumnType.Number, col)}> - - Number -
-
this.changeColumnType(ColumnType.String, col)}> - - Text -
-
this.changeColumnType(ColumnType.Boolean, col)}> - - Checkbox -
-
this.changeColumnType(ColumnType.List, col)}> - - List -
-
this.changeColumnType(ColumnType.Doc, col)}> - - Document -
-
this.changeColumnType(ColumnType.Image, col)}> - - Image -
+
this.typesDropdownChange(!this._openTypes)}> + +
+ {this._openTypes ? allColumnTypes : justColType}
); } @@ -288,6 +323,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @action openHeader = (col: any, screenx: number, screeny: number) => { + console.log("header opening"); this._col = col; this._headerOpen = !this._headerOpen; this._pointerX = screenx; @@ -309,6 +345,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { />; } + @action renderContent = (col: any) => { return (
@@ -365,7 +402,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { //this.menuCoordinates[1] -= e.screenY / scale; } - @computed get renderMenu() { + @action renderMenu() { const scale = this.props.ScreenToLocalTransform().Scale; return (
doc) { const dim = this.props.ScreenToLocalTransform().inverse().transformDirection(r.offset.width, r.offset.height); this._menuWidth = dim[0]; this._menuHeight = dim[1]; })}> - {({ measureRef }) =>
{this.renderContent(this._col)}
} + {({ measureRef }) =>
+
+
+ + {this.renderKeysDropDown(this._col)} +
+ {false ? <> : + <> + {this.renderTypes(this._col)} + {this.renderSorting(this._col)} + {this.renderColors(this._col)} +
+ +
+ + } +
+ +
}
); @@ -559,6 +615,41 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { } render() { + const scale = this.props.ScreenToLocalTransform().Scale; + const menu =
this.props.active(true) && e.stopPropagation()} + onPointerDown={e => this.onHeaderClick(e)} + style={{ + position: "absolute", background: "white", + transform: `translate(${this.menuCoordinates[0] * scale}px, ${this.menuCoordinates[1] / scale}px)` + }}> + { + const dim = this.props.ScreenToLocalTransform().inverse().transformDirection(r.offset.width, r.offset.height); + this._menuWidth = dim[0]; this._menuHeight = dim[1]; + })}> + {({ measureRef }) =>
+
+
+ + {this.renderKeysDropDown(this._col)} +
+ {false ? <> : + <> + {this.renderTypes(this._col)} + {this.renderSorting(this._col)} + {this.renderColors(this._col)} +
+ +
+ + } +
+ +
} + +
; + return
doc) {
{this.dividerDragger} {!this.previewWidth() ? (null) : this.previewPanel} - {this._headerOpen ? this.renderMenu : null} + {this._headerOpen ? menu : null}
; } } \ No newline at end of file diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index 5d1dcf199..176091661 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -186,9 +186,10 @@ export class SchemaTable extends React.Component { existingKeys={this.props.columns.map(c => c.heading)} canAddNew={true} addNew={false} - // i think issue is with these two props onSelect={this.props.changeColumns} setIsEditing={this.props.setHeaderIsEditing} + + // try commenting this out width={"100%"} />; @@ -208,16 +209,6 @@ export class SchemaTable extends React.Component { const sortIcon = col.desc === undefined ? "circle" : col.desc === true ? "caret-down" : "caret-up"; - const menuContent =
- -
- {keysDropdown} -
-
; - const header =
this.props.openHeader(col, menuContent, e.clientX, e.clientY)} @@ -226,18 +217,13 @@ export class SchemaTable extends React.Component { background: col.color, padding: "2px", display: "flex" }}> - -
-
+
{keysDropdown}
-
this.changeSorting(col)} - style={{ paddingRight: "6px" }}> + style={{ paddingRight: "6px", display: "inline" }}>
this.props.openHeader(col, e.clientX, e.clientY)} -- cgit v1.2.3-70-g09d2 From af7b4994fa97a2aee0a2e90b30d21d4b030bd2b7 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sun, 28 Jun 2020 01:54:55 -0500 Subject: merge fix --- src/client/views/EditableView.tsx | 28 ---------------------------- 1 file changed, 28 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index a4f2f17fc..628db366f 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -182,39 +182,11 @@ export class EditableView extends React.Component { } render() { if (this._editing && this.props.GetValue() !== undefined) { -<<<<<<< HEAD - return this.props.autosuggestProps - ? this.finalizeEdit(e.currentTarget.value, false, true), - onPointerDown: this.stopPropagation, - onClick: this.stopPropagation, - onPointerUp: this.stopPropagation, - value: this.props.autosuggestProps.value, - onChange: this.props.autosuggestProps.onChange - }} - /> - : - this.finalizeEdit(e.currentTarget.value, false, true)} - onPointerDown={this.stopPropagation} onClick={this.stopPropagation} onPointerUp={this.stopPropagation} - style={{ display: this.props.display, fontSize: this.props.fontSize }} - placeholder={this.props.placeholder} - />; -======= return this.props.sizeToContent ?
{this.props.GetValue()}
{this.renderEditor()}
: this.renderEditor(); ->>>>>>> 790cc785a5cad47f0dd274c7f4773eff7d7d9c2e } else { this.props.autosuggestProps?.resetValue(); return (this.props.contents instanceof ObjectField ? (null) : -- cgit v1.2.3-70-g09d2 From fd613140e169912f44966fdc6f25fafd85bae7a1 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sun, 28 Jun 2020 02:31:02 -0500 Subject: started adding date types --- package-lock.json | 2154 +------------------- package.json | 2 + .../views/collections/CollectionSchemaCells.tsx | 49 +- .../views/collections/CollectionSchemaHeaders.tsx | 11 +- .../views/collections/CollectionSchemaView.tsx | 12 +- src/client/views/collections/SchemaTable.tsx | 9 +- 6 files changed, 151 insertions(+), 2086 deletions(-) (limited to 'src/client/views') diff --git a/package-lock.json b/package-lock.json index 8db732a8e..6c364530b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1004,6 +1004,17 @@ "@types/reactcss": "*" } }, + "@types/react-datepicker": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@types/react-datepicker/-/react-datepicker-3.0.2.tgz", + "integrity": "sha512-xW04NZRF+9ZnzOD3XrlIzBEKgUsN6LVgZJJsXH8NIUlVjyPh+sdtLPfVoDp+GQzGq1M0TuMLNZsv0sJ3N9XwDA==", + "dev": true, + "requires": { + "@types/react": "*", + "date-fns": "^2.0.1", + "popper.js": "^1.14.1" + } + }, "@types/react-dom": { "version": "16.9.8", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.8.tgz", @@ -4368,6 +4379,11 @@ "whatwg-url": "^7.0.0" } }, + "date-fns": { + "version": "2.14.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.14.0.tgz", + "integrity": "sha512-1zD+68jhFgDIM0rF05rcwYO8cExdNqxjq4xP1QKM60Q45mnO6zaMWB4tOzrIr4M4GSLntsKeE4c9Bdl2jhL/yw==" + }, "dateformat": { "version": "1.0.12", "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.12.tgz", @@ -4429,7 +4445,6 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz", "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==", - "dev": true, "requires": { "is-arguments": "^1.0.4", "is-date-object": "^1.0.1", @@ -7380,8 +7395,7 @@ "is-arguments": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.0.4.tgz", - "integrity": "sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==", - "dev": true + "integrity": "sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==" }, "is-arrayish": { "version": "0.2.1", @@ -9345,12 +9359,7 @@ "dependencies": { "JSONStream": { "version": "1.3.5", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.5.tgz", - "integrity": "sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "jsonparse": "^1.2.0", "through": ">=2.2.7 <3" @@ -9358,45 +9367,25 @@ }, "abbrev": { "version": "1.1.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", - "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==" - }, - "agent-base": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.3.0.tgz", - "integrity": "sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==", -======= "bundled": true }, "agent-base": { "version": "4.3.0", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "es6-promisify": "^5.0.0" } }, "agentkeepalive": { "version": "3.5.2", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-3.5.2.tgz", - "integrity": "sha512-e0L/HNe6qkQ7H19kTlRRqUibEAwDK5AFk6y3PtMsuut2VAH6+Q4xZml1tNDJD7kSAyqmbG/K08K5WEJYtUrSlQ==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "humanize-ms": "^1.2.1" } }, "ajv": { "version": "5.5.2", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz", - "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "co": "^4.6.0", "fast-deep-equal": "^1.0.0", @@ -9406,63 +9395,24 @@ }, "ansi-align": { "version": "2.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-2.0.0.tgz", - "integrity": "sha1-w2rsy6VjuJzrVW82kPCx2eNUf38=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "string-width": "^2.0.0" } }, "ansi-regex": { "version": "2.1.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" - }, - "ansi-styles": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", - "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", -======= "bundled": true }, "ansi-styles": { "version": "3.2.1", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "color-convert": "^1.9.0" } }, "ansicolors": { "version": "0.3.2", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/ansicolors/-/ansicolors-0.3.2.tgz", - "integrity": "sha1-ZlWX3oap/+Oqm/vmyuXG6kJrSXk=" - }, - "ansistyles": { - "version": "0.1.3", - "resolved": "https://registry.npmjs.org/ansistyles/-/ansistyles-0.1.3.tgz", - "integrity": "sha1-XeYEFb2gcbs3EnhUyGT0GyMlRTk=" - }, - "aproba": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz", - "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==" - }, - "archy": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz", - "integrity": "sha1-+cjBN1fMHde8N5rHeyxipcKGjEA=" - }, - "are-we-there-yet": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz", - "integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=", -======= "bundled": true }, "ansistyles": { @@ -9480,7 +9430,6 @@ "are-we-there-yet": { "version": "1.1.4", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "delegates": "^1.0.0", "readable-stream": "^2.0.6" @@ -9488,12 +9437,7 @@ "dependencies": { "readable-stream": { "version": "2.3.6", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", - "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "core-util-is": "~1.0.0", "inherits": "~2.0.3", @@ -9506,12 +9450,7 @@ }, "string_decoder": { "version": "1.1.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", - "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "safe-buffer": "~5.1.0" } @@ -9520,56 +9459,17 @@ }, "asap": { "version": "2.0.6", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz", - "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=" - }, - "asn1": { - "version": "0.2.4", - "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz", - "integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==", -======= "bundled": true }, "asn1": { "version": "0.2.4", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "safer-buffer": "~2.1.0" } }, "assert-plus": { "version": "1.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz", - "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=" - }, - "asynckit": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", - "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=" - }, - "aws-sign2": { - "version": "0.7.0", - "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz", - "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=" - }, - "aws4": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz", - "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==" - }, - "balanced-match": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" - }, - "bcrypt-pbkdf": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz", - "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=", -======= "bundled": true }, "asynckit": { @@ -9591,7 +9491,6 @@ "bcrypt-pbkdf": { "version": "1.0.2", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "optional": true, "requires": { "tweetnacl": "^0.14.3" @@ -9599,12 +9498,7 @@ }, "bin-links": { "version": "1.1.7", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/bin-links/-/bin-links-1.1.7.tgz", - "integrity": "sha512-/eaLaTu7G7/o7PV04QPy1HRT65zf+1tFkPGv0sPTV0tRwufooYBQO3zrcyGgm+ja+ZtBf2GEuKjDRJ2pPG+yqA==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "bluebird": "^3.5.3", "cmd-shim": "^3.0.0", @@ -9616,21 +9510,11 @@ }, "bluebird": { "version": "3.5.5", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.5.tgz", - "integrity": "sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w==" - }, - "boxen": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/boxen/-/boxen-1.3.0.tgz", - "integrity": "sha512-TNPjfTr432qx7yOjQyaXm3dSR0MH9vXp7eT1BFSl/C51g+EFnOR9hTg1IreahGBmDNCehscshe45f+C1TBZbLw==", -======= "bundled": true }, "boxen": { "version": "1.3.0", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "ansi-align": "^2.0.0", "camelcase": "^4.0.0", @@ -9643,12 +9527,7 @@ }, "brace-expansion": { "version": "1.1.11", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", - "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -9656,30 +9535,6 @@ }, "buffer-from": { "version": "1.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.0.0.tgz", - "integrity": "sha512-83apNb8KK0Se60UE1+4Ukbe3HbfELJ6UlI4ldtOGs7So4KD26orJM8hIY9lxdzP+UpItH1Yh/Y8GUvNFWFFRxA==" - }, - "builtins": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/builtins/-/builtins-1.0.3.tgz", - "integrity": "sha1-y5T662HIaWRR2zZTThQi+U8K7og=" - }, - "byline": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/byline/-/byline-5.0.0.tgz", - "integrity": "sha1-dBxSFkaOrcRXsDQQEYrXfejB3bE=" - }, - "byte-size": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/byte-size/-/byte-size-5.0.1.tgz", - "integrity": "sha512-/XuKeqWocKsYa/cBY1YbSJSWWqTi4cFgr9S6OyM7PBaPbr9zvNGwWP33vt0uqGhwDdN+y3yhbXVILEUpnwEWGw==" - }, - "cacache": { - "version": "12.0.3", - "resolved": "https://registry.npmjs.org/cacache/-/cacache-12.0.3.tgz", - "integrity": "sha512-kqdmfXEGFepesTuROHMs3MpFLWrPkSSpRqOw80RCflZXy/khxaArvFrQ7uJxSUduzAufc6G0g1VUCOZXxWavPw==", -======= "bundled": true }, "builtins": { @@ -9697,7 +9552,6 @@ "cacache": { "version": "12.0.3", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "bluebird": "^3.5.5", "chownr": "^1.1.1", @@ -9718,30 +9572,6 @@ }, "call-limit": { "version": "1.1.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/call-limit/-/call-limit-1.1.1.tgz", - "integrity": "sha512-5twvci5b9eRBw2wCfPtN0GmlR2/gadZqyFpPhOK6CvMFoFgA+USnZ6Jpu1lhG9h85pQ3Ouil3PfXWRD4EUaRiQ==" - }, - "camelcase": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz", - "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=" - }, - "capture-stack-trace": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/capture-stack-trace/-/capture-stack-trace-1.0.0.tgz", - "integrity": "sha1-Sm+gc5nCa7pH8LJJa00PtAjFVQ0=" - }, - "caseless": { - "version": "0.12.0", - "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz", - "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=" - }, - "chalk": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz", - "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==", -======= "bundled": true }, "camelcase": { @@ -9759,7 +9589,6 @@ "chalk": { "version": "2.4.1", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", @@ -9772,42 +9601,22 @@ }, "ci-info": { "version": "2.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz", - "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==" - }, - "cidr-regex": { - "version": "2.0.10", - "resolved": "https://registry.npmjs.org/cidr-regex/-/cidr-regex-2.0.10.tgz", - "integrity": "sha512-sB3ogMQXWvreNPbJUZMRApxuRYd+KoIo4RGQ81VatjmMW6WJPo+IJZ2846FGItr9VzKo5w7DXzijPLGtSd0N3Q==", -======= "bundled": true }, "cidr-regex": { "version": "2.0.10", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "ip-regex": "^2.1.0" } }, "cli-boxes": { "version": "1.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-1.0.0.tgz", - "integrity": "sha1-T6kXw+WclKAEzWH47lCdplFocUM=" - }, - "cli-columns": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/cli-columns/-/cli-columns-3.1.2.tgz", - "integrity": "sha1-ZzLZcpee/CrkRKHwjgj6E5yWoY4=", -======= "bundled": true }, "cli-columns": { "version": "3.1.2", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "string-width": "^2.0.0", "strip-ansi": "^3.0.1" @@ -9815,12 +9624,7 @@ }, "cli-table3": { "version": "0.5.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.5.1.tgz", - "integrity": "sha512-7Qg2Jrep1S/+Q3EceiZtQcDPWxhAvBw+ERf1162v4sikJrvojMHFqXt8QIVha8UlH9rgU0BeWPytZ9/TzYqlUw==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "colors": "^1.1.2", "object-assign": "^4.1.0", @@ -9829,12 +9633,7 @@ }, "cliui": { "version": "4.1.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz", - "integrity": "sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "string-width": "^2.1.1", "strip-ansi": "^4.0.0", @@ -9843,21 +9642,11 @@ "dependencies": { "ansi-regex": { "version": "3.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", - "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=" - }, - "strip-ansi": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", - "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", -======= "bundled": true }, "strip-ansi": { "version": "4.0.0", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "ansi-regex": "^3.0.0" } @@ -9866,21 +9655,11 @@ }, "clone": { "version": "1.0.4", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz", - "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=" - }, - "cmd-shim": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/cmd-shim/-/cmd-shim-3.0.3.tgz", - "integrity": "sha512-DtGg+0xiFhQIntSBRzL2fRQBnmtAVwXIDo4Qq46HPpObYquxMaZS4sb82U9nH91qJrlosC1wa9gwr0QyL/HypA==", -======= "bundled": true }, "cmd-shim": { "version": "3.0.3", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "graceful-fs": "^4.1.2", "mkdirp": "~0.5.0" @@ -9888,20 +9667,6 @@ }, "co": { "version": "4.6.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", - "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=" - }, - "code-point-at": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", - "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=" - }, - "color-convert": { - "version": "1.9.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.1.tgz", - "integrity": "sha512-mjGanIiwQJskCC18rPR6OmrZ6fm2Lc7PeGFYwCmy5J34wC6F1PzdGL6xeMfmgicfYcNLGuVFA3WzXtIDCQSZxQ==", -======= "bundled": true }, "code-point-at": { @@ -9911,38 +9676,22 @@ "color-convert": { "version": "1.9.1", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "color-name": "^1.1.1" } }, "color-name": { "version": "1.1.3", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" - }, - "colors": { - "version": "1.3.3", - "resolved": "https://registry.npmjs.org/colors/-/colors-1.3.3.tgz", - "integrity": "sha512-mmGt/1pZqYRjMxB1axhTo16/snVZ5krrKkcmMeVKxzECMMXoCgnvTPp10QgHfcbQZw8Dq2jMNG6je4JlWU0gWg==", -======= "bundled": true }, "colors": { "version": "1.3.3", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "optional": true }, "columnify": { "version": "1.5.4", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/columnify/-/columnify-1.5.4.tgz", - "integrity": "sha1-Rzfd8ce2mop8NAVweC6UfuyOeLs=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "strip-ansi": "^3.0.0", "wcwidth": "^1.0.0" @@ -9950,33 +9699,18 @@ }, "combined-stream": { "version": "1.0.6", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.6.tgz", - "integrity": "sha1-cj599ugBrFYTETp+RFqbactjKBg=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "delayed-stream": "~1.0.0" } }, "concat-map": { "version": "0.0.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" - }, - "concat-stream": { - "version": "1.6.2", - "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz", - "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==", -======= "bundled": true }, "concat-stream": { "version": "1.6.2", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "buffer-from": "^1.0.0", "inherits": "^2.0.3", @@ -9986,12 +9720,7 @@ "dependencies": { "readable-stream": { "version": "2.3.6", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", - "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "core-util-is": "~1.0.0", "inherits": "~2.0.3", @@ -10004,12 +9733,7 @@ }, "string_decoder": { "version": "1.1.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", - "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "safe-buffer": "~5.1.0" } @@ -10018,12 +9742,7 @@ }, "config-chain": { "version": "1.1.12", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.12.tgz", - "integrity": "sha512-a1eOIcu8+7lUInge4Rpf/n4Krkf3Dd9lqhljRzII1/Zno/kRtUWnznPO3jOKBmTEktkt3fkxisUcivoj0ebzoA==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "ini": "^1.3.4", "proto-list": "~1.2.1" @@ -10031,12 +9750,7 @@ }, "configstore": { "version": "3.1.2", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/configstore/-/configstore-3.1.2.tgz", - "integrity": "sha512-vtv5HtGjcYUgFrXc6Kx747B83MRRVS5R1VTEQoXvuP+kMI+if6uywV0nDGoiydJRy4yk7h9od5Og0kxx4zUXmw==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "dot-prop": "^4.1.0", "graceful-fs": "^4.1.2", @@ -10048,21 +9762,11 @@ }, "console-control-strings": { "version": "1.1.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", - "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=" - }, - "copy-concurrently": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz", - "integrity": "sha512-f2domd9fsVDFtaFcbaRZuYXwtdmnzqbADSwhSWYxYB/Q8zsdUUFMXVRwXGDMWmbEzAn1kdRrtI1T/KTFOL4X2A==", -======= "bundled": true }, "copy-concurrently": { "version": "1.0.5", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "aproba": "^1.1.1", "fs-write-stream-atomic": "^1.0.8", @@ -10074,53 +9778,28 @@ "dependencies": { "aproba": { "version": "1.2.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", - "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==" - }, - "iferr": { - "version": "0.1.5", - "resolved": "https://registry.npmjs.org/iferr/-/iferr-0.1.5.tgz", - "integrity": "sha1-xg7taebY/bazEEofy8ocGS3FtQE=" -======= "bundled": true }, "iferr": { "version": "0.1.5", "bundled": true ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 } } }, "core-util-is": { "version": "1.0.2", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", - "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=" - }, - "create-error-class": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/create-error-class/-/create-error-class-3.0.2.tgz", - "integrity": "sha1-Br56vvlHo/FKMP1hBnHUAbyot7Y=", -======= "bundled": true }, "create-error-class": { "version": "3.0.2", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "capture-stack-trace": "^1.0.0" } }, "cross-spawn": { "version": "5.1.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz", - "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "lru-cache": "^4.0.1", "shebang-command": "^1.2.0", @@ -10129,12 +9808,7 @@ "dependencies": { "lru-cache": { "version": "4.1.5", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz", - "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "pseudomap": "^1.0.2", "yallist": "^2.1.2" @@ -10142,31 +9816,12 @@ }, "yallist": { "version": "2.1.2", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", - "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=" -======= "bundled": true ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 } } }, "crypto-random-string": { "version": "1.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-1.0.0.tgz", - "integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=" - }, - "cyclist": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-0.2.2.tgz", - "integrity": "sha1-GzN5LhHpFKL9bW7WRHRkRE5fpkA=" - }, - "dashdash": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz", - "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=", -======= "bundled": true }, "cyclist": { @@ -10176,50 +9831,25 @@ "dashdash": { "version": "1.14.1", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "assert-plus": "^1.0.0" } }, "debug": { "version": "3.1.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", - "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "ms": "2.0.0" }, "dependencies": { "ms": { "version": "2.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" -======= "bundled": true ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 } } }, "debuglog": { "version": "1.0.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/debuglog/-/debuglog-1.0.1.tgz", - "integrity": "sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI=" - }, - "decamelize": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", - "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=" - }, - "decode-uri-component": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz", - "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=" -======= "bundled": true }, "decamelize": { @@ -10229,7 +9859,6 @@ "decode-uri-component": { "version": "0.2.0", "bundled": true ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 }, "deep-extend": { "version": "0.6.0", @@ -10237,54 +9866,20 @@ }, "defaults": { "version": "1.0.3", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.3.tgz", - "integrity": "sha1-xlYFHpgX2f8I7YgUd/P+QBnz730=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "clone": "^1.0.2" } }, "define-properties": { "version": "1.1.3", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz", - "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "object-keys": "^1.0.12" } }, "delayed-stream": { "version": "1.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", - "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=" - }, - "delegates": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", - "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=" - }, - "detect-indent": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-5.0.0.tgz", - "integrity": "sha1-OHHMCmoALow+Wzz38zYmRnXwa50=" - }, - "detect-newline": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-2.1.0.tgz", - "integrity": "sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I=" - }, - "dezalgo": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/dezalgo/-/dezalgo-1.0.3.tgz", - "integrity": "sha1-f3Qt4Gb8dIvI24IFad3c5Jvw1FY=", -======= "bundled": true }, "delegates": { @@ -10302,7 +9897,6 @@ "dezalgo": { "version": "1.0.3", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "asap": "^2.0.0", "wrappy": "1" @@ -10310,32 +9904,13 @@ }, "dot-prop": { "version": "4.2.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.0.tgz", - "integrity": "sha512-tUMXrxlExSW6U2EXiiKGSBVdYgtV8qlHL+C10TsW4PURY/ic+eaysnSkwB4kA/mBlCyy/IKDJ+Lc3wbWeaXtuQ==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "is-obj": "^1.0.0" } }, "dotenv": { "version": "5.0.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-5.0.1.tgz", - "integrity": "sha512-4As8uPrjfwb7VXC+WnLCbXK7y+Ueb2B3zgNCePYfhxS1PYeaO1YTeplffTEcbfLhvFNGLAz90VvJs9yomG7bow==" - }, - "duplexer3": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz", - "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=" - }, - "duplexify": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.6.0.tgz", - "integrity": "sha512-fO3Di4tBKJpYTFHAxTU00BcfWMY9w24r/x21a6rZRbsD/ToUgGxsMbiGRmB7uVAXeGKXD9MwiLZa5E97EVgIRQ==", -======= "bundled": true }, "duplexer3": { @@ -10345,7 +9920,6 @@ "duplexify": { "version": "3.6.0", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "end-of-stream": "^1.0.0", "inherits": "^2.0.1", @@ -10355,12 +9929,7 @@ "dependencies": { "readable-stream": { "version": "2.3.6", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", - "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "core-util-is": "~1.0.0", "inherits": "~2.0.3", @@ -10373,12 +9942,7 @@ }, "string_decoder": { "version": "1.1.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", - "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "safe-buffer": "~5.1.0" } @@ -10387,12 +9951,7 @@ }, "ecc-jsbn": { "version": "0.1.2", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz", - "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "optional": true, "requires": { "jsbn": "~0.1.0", @@ -10401,53 +9960,24 @@ }, "editor": { "version": "1.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/editor/-/editor-1.0.0.tgz", - "integrity": "sha1-YMf4e9YrzGqJT6jM1q+3gjok90I=" - }, - "encoding": { - "version": "0.1.12", - "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz", - "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=", -======= "bundled": true }, "encoding": { "version": "0.1.12", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "iconv-lite": "~0.4.13" } }, "end-of-stream": { "version": "1.4.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz", - "integrity": "sha512-1MkrZNvWTKCaigbn+W15elq2BB/L22nqrSY5DKlo3X6+vclJm8Bb5djXJBmEX6fS3+zCh/F4VBK5Z2KxJt4s2Q==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "once": "^1.4.0" } }, "env-paths": { "version": "2.2.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.0.tgz", - "integrity": "sha512-6u0VYSCo/OW6IoD5WCLLy9JUGARbamfSavcNXry/eu8aHVFei6CD3Sw+VGX5alea1i9pgPHW0mbu6Xj0uBh7gA==" - }, - "err-code": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/err-code/-/err-code-1.1.2.tgz", - "integrity": "sha1-BuARbTAo9q70gGhJ6w6mp0iuaWA=" - }, - "errno": { - "version": "0.1.7", - "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz", - "integrity": "sha512-MfrRBDWzIWifgq6tJj60gkAwtLNb6sQPlcFrSOflcP1aFmmruKQ2wRnze/8V6kgyz7H3FF8Npzv78mZ7XLLflg==", -======= "bundled": true }, "err-code": { @@ -10457,19 +9987,13 @@ "errno": { "version": "0.1.7", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "prr": "~1.0.1" } }, "es-abstract": { "version": "1.12.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.12.0.tgz", - "integrity": "sha512-C8Fx/0jFmV5IPoMOFPA9P9G5NtqW+4cOPit3MIuvR2t7Ag2K15EJTpxnHAYTzL+aYQJIESYeXZmDBfOBE1HcpA==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "es-to-primitive": "^1.1.1", "function-bind": "^1.1.1", @@ -10480,12 +10004,7 @@ }, "es-to-primitive": { "version": "1.2.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.0.tgz", - "integrity": "sha512-qZryBOJjV//LaxLTV6UC//WewneB3LcXOL9NP++ozKVXsIIIpm/2c13UDiD9Jp2eThsecw9m3jPqDwTyobcdbg==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "is-callable": "^1.1.4", "is-date-object": "^1.0.1", @@ -10494,42 +10013,22 @@ }, "es6-promise": { "version": "4.2.8", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz", - "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==" - }, - "es6-promisify": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-5.0.0.tgz", - "integrity": "sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=", -======= "bundled": true }, "es6-promisify": { "version": "5.0.0", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "es6-promise": "^4.0.3" } }, "escape-string-regexp": { "version": "1.0.5", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=" - }, - "execa": { - "version": "0.7.0", - "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz", - "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=", -======= "bundled": true }, "execa": { "version": "0.7.0", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "cross-spawn": "^5.0.1", "get-stream": "^3.0.0", @@ -10542,51 +10041,12 @@ "dependencies": { "get-stream": { "version": "3.0.0", -<<<<<<< HEAD - "resolved": "http://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz", - "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=" -======= "bundled": true ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 } } }, "extend": { "version": "3.0.2", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", - "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==" - }, - "extsprintf": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz", - "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=" - }, - "fast-deep-equal": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz", - "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=" - }, - "fast-json-stable-stringify": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz", - "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=" - }, - "figgy-pudding": { - "version": "3.5.1", - "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz", - "integrity": "sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w==" - }, - "find-npm-prefix": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/find-npm-prefix/-/find-npm-prefix-1.0.2.tgz", - "integrity": "sha512-KEftzJ+H90x6pcKtdXZEPsQse8/y/UnvzRKrOSQFprnrGaFuJ62fVkP34Iu2IYuMvyauCyoLTNkJZgrrGA2wkA==" - }, - "find-up": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz", - "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=", -======= "bundled": true }, "extsprintf": { @@ -10612,19 +10072,13 @@ "find-up": { "version": "2.1.0", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "locate-path": "^2.0.0" } }, "flush-write-stream": { "version": "1.0.3", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.0.3.tgz", - "integrity": "sha512-calZMC10u0FMUqoiunI2AiGIIUtUIvifNwkHhNupZH4cbNnW1Itkoh/Nf5HFYmDrwWPjrUxpkZT0KhuCq0jmGw==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "inherits": "^2.0.1", "readable-stream": "^2.0.4" @@ -10632,12 +10086,7 @@ "dependencies": { "readable-stream": { "version": "2.3.6", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", - "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "core-util-is": "~1.0.0", "inherits": "~2.0.3", @@ -10650,12 +10099,7 @@ }, "string_decoder": { "version": "1.1.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", - "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "safe-buffer": "~5.1.0" } @@ -10664,21 +10108,11 @@ }, "forever-agent": { "version": "0.6.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz", - "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=" - }, - "form-data": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.2.tgz", - "integrity": "sha1-SXBJi+YEwgwAXU9cI67NIda0kJk=", -======= "bundled": true }, "form-data": { "version": "2.3.2", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "asynckit": "^0.4.0", "combined-stream": "1.0.6", @@ -10687,12 +10121,7 @@ }, "from2": { "version": "2.3.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz", - "integrity": "sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "inherits": "^2.0.1", "readable-stream": "^2.0.0" @@ -10700,12 +10129,7 @@ "dependencies": { "readable-stream": { "version": "2.3.6", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", - "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "core-util-is": "~1.0.0", "inherits": "~2.0.3", @@ -10718,12 +10142,7 @@ }, "string_decoder": { "version": "1.1.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", - "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "safe-buffer": "~5.1.0" } @@ -10732,24 +10151,14 @@ }, "fs-minipass": { "version": "1.2.7", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.7.tgz", - "integrity": "sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "minipass": "^2.6.0" }, "dependencies": { "minipass": { "version": "2.9.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.9.0.tgz", - "integrity": "sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -10759,12 +10168,7 @@ }, "fs-vacuum": { "version": "1.2.10", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/fs-vacuum/-/fs-vacuum-1.2.10.tgz", - "integrity": "sha1-t2Kb7AekAxolSP35n17PHMizHjY=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "graceful-fs": "^4.1.2", "path-is-inside": "^1.0.1", @@ -10773,12 +10177,7 @@ }, "fs-write-stream-atomic": { "version": "1.0.10", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz", - "integrity": "sha1-tH31NJPvkR33VzHnCp3tAYnbQMk=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "graceful-fs": "^4.1.2", "iferr": "^0.1.5", @@ -10788,21 +10187,11 @@ "dependencies": { "iferr": { "version": "0.1.5", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/iferr/-/iferr-0.1.5.tgz", - "integrity": "sha1-xg7taebY/bazEEofy8ocGS3FtQE=" - }, - "readable-stream": { - "version": "2.3.6", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", - "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", -======= "bundled": true }, "readable-stream": { "version": "2.3.6", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "core-util-is": "~1.0.0", "inherits": "~2.0.3", @@ -10815,12 +10204,7 @@ }, "string_decoder": { "version": "1.1.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", - "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "safe-buffer": "~5.1.0" } @@ -10829,20 +10213,6 @@ }, "fs.realpath": { "version": "1.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", - "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=" - }, - "function-bind": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", - "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" - }, - "gauge": { - "version": "2.7.4", - "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz", - "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", -======= "bundled": true }, "function-bind": { @@ -10852,7 +10222,6 @@ "gauge": { "version": "2.7.4", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "aproba": "^1.0.3", "console-control-strings": "^1.0.0", @@ -10866,21 +10235,11 @@ "dependencies": { "aproba": { "version": "1.2.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", - "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==" - }, - "string-width": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", - "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", -======= "bundled": true }, "string-width": { "version": "1.0.2", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -10891,21 +10250,11 @@ }, "genfun": { "version": "5.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/genfun/-/genfun-5.0.0.tgz", - "integrity": "sha512-KGDOARWVga7+rnB3z9Sd2Letx515owfk0hSxHGuqjANb1M+x2bGZGqHLiozPsYMdM2OubeMni/Hpwmjq6qIUhA==" - }, - "gentle-fs": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/gentle-fs/-/gentle-fs-2.3.0.tgz", - "integrity": "sha512-3k2CgAmPxuz7S6nKK+AqFE2AdM1QuwqKLPKzIET3VRwK++3q96MsNFobScDjlCrq97ZJ8y5R725MOlm6ffUCjg==", -======= "bundled": true }, "gentle-fs": { "version": "2.3.0", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "aproba": "^1.1.2", "chownr": "^1.1.2", @@ -10922,53 +10271,28 @@ "dependencies": { "aproba": { "version": "1.2.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", - "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==" - }, - "iferr": { - "version": "0.1.5", - "resolved": "https://registry.npmjs.org/iferr/-/iferr-0.1.5.tgz", - "integrity": "sha1-xg7taebY/bazEEofy8ocGS3FtQE=" -======= "bundled": true }, "iferr": { "version": "0.1.5", "bundled": true ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 } } }, "get-caller-file": { "version": "1.0.3", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz", - "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==" - }, - "get-stream": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz", - "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==", -======= "bundled": true }, "get-stream": { "version": "4.1.0", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "pump": "^3.0.0" } }, "getpass": { "version": "0.1.7", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz", - "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "assert-plus": "^1.0.0" } @@ -10987,24 +10311,14 @@ }, "global-dirs": { "version": "0.1.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-0.1.1.tgz", - "integrity": "sha1-sxnA3UYH81PzvpzKTHL8FIxJ9EU=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "ini": "^1.3.4" } }, "got": { "version": "6.7.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/got/-/got-6.7.1.tgz", - "integrity": "sha1-JAzQV4WpoY5WHcG0S0HHY+8ejbA=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "create-error-class": "^3.0.0", "duplexer3": "^0.1.4", @@ -11021,12 +10335,7 @@ "dependencies": { "get-stream": { "version": "3.0.0", -<<<<<<< HEAD - "resolved": "http://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz", - "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=" -======= "bundled": true ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 } } }, @@ -11036,21 +10345,11 @@ }, "har-schema": { "version": "2.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz", - "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=" - }, - "har-validator": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.0.tgz", - "integrity": "sha512-+qnmNjI4OfH2ipQ9VQOw23bBd/ibtfbVdK2fYbY4acTDqKTW/YDp9McimZdDbG8iV9fZizUqQMD5xvriB146TA==", -======= "bundled": true }, "har-validator": { "version": "5.1.0", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "ajv": "^5.3.0", "har-schema": "^2.0.0" @@ -11058,32 +10357,13 @@ }, "has": { "version": "1.0.3", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", - "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "function-bind": "^1.1.1" } }, "has-flag": { "version": "3.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=" - }, - "has-symbols": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.0.tgz", - "integrity": "sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q=" - }, - "has-unicode": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", - "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=" -======= "bundled": true }, "has-symbols": { @@ -11093,7 +10373,6 @@ "has-unicode": { "version": "2.0.1", "bundled": true ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 }, "hosted-git-info": { "version": "2.8.8", @@ -11101,21 +10380,11 @@ }, "http-cache-semantics": { "version": "3.8.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz", - "integrity": "sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w==" - }, - "http-proxy-agent": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-2.1.0.tgz", - "integrity": "sha512-qwHbBLV7WviBl0rQsOzH6o5lwyOIvwp/BdFnvVxXORldu5TmjFfjzBcWUWS5kWAZhmv+JtiDhSuQCp4sBfbIgg==", -======= "bundled": true }, "http-proxy-agent": { "version": "2.1.0", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "agent-base": "4", "debug": "3.1.0" @@ -11123,12 +10392,7 @@ }, "http-signature": { "version": "1.2.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz", - "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "assert-plus": "^1.0.0", "jsprim": "^1.2.2", @@ -11137,12 +10401,7 @@ }, "https-proxy-agent": { "version": "2.2.4", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz", - "integrity": "sha512-OmvfoQ53WLjtA9HeYP9RNrWMJzzAz1JGaSFr1nijg0PVR1JaD/xbJq1mdEIIlxGpXp9eSe/O2LgU9DJmTPd0Eg==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "agent-base": "^4.3.0", "debug": "^3.1.0" @@ -11150,70 +10409,31 @@ }, "humanize-ms": { "version": "1.2.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz", - "integrity": "sha1-xG4xWaKT9riW2ikxbYtv6Lt5u+0=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "ms": "^2.0.0" } }, "iconv-lite": { "version": "0.4.23", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz", - "integrity": "sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "safer-buffer": ">= 2.1.2 < 3" } }, "iferr": { "version": "1.0.2", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/iferr/-/iferr-1.0.2.tgz", - "integrity": "sha512-9AfeLfji44r5TKInjhz3W9DyZI1zR1JAf2hVBMGhddAKPqBsupb89jGfbCTHIGZd6fGZl9WlHdn4AObygyMKwg==" - }, - "ignore-walk": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.3.tgz", - "integrity": "sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw==", -======= "bundled": true }, "ignore-walk": { "version": "3.0.3", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "minimatch": "^3.0.4" } }, "import-lazy": { "version": "2.1.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz", - "integrity": "sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM=" - }, - "imurmurhash": { - "version": "0.1.4", - "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz", - "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=" - }, - "infer-owner": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz", - "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==" - }, - "inflight": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", - "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", -======= "bundled": true }, "imurmurhash": { @@ -11227,7 +10447,6 @@ "inflight": { "version": "1.0.6", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "once": "^1.3.0", "wrappy": "1" @@ -11235,20 +10454,6 @@ }, "inherits": { "version": "2.0.4", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", - "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" - }, - "ini": { - "version": "1.3.5", - "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", - "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==" - }, - "init-package-json": { - "version": "1.10.3", - "resolved": "https://registry.npmjs.org/init-package-json/-/init-package-json-1.10.3.tgz", - "integrity": "sha512-zKSiXKhQveNteyhcj1CoOP8tqp1QuxPIPBl8Bid99DGLFqA1p87M6lNgfjJHSBoWJJlidGOv5rWjyYKEB3g2Jw==", -======= "bundled": true }, "ini": { @@ -11258,7 +10463,6 @@ "init-package-json": { "version": "1.10.3", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "glob": "^7.1.1", "npm-package-arg": "^4.0.0 || ^5.0.0 || ^6.0.0", @@ -11272,25 +10476,6 @@ }, "invert-kv": { "version": "2.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-2.0.0.tgz", - "integrity": "sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==" - }, - "ip": { - "version": "1.1.5", - "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz", - "integrity": "sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=" - }, - "ip-regex": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-2.1.0.tgz", - "integrity": "sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk=" - }, - "is-callable": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.4.tgz", - "integrity": "sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA==" -======= "bundled": true }, "ip": { @@ -11304,7 +10489,6 @@ "is-callable": { "version": "1.1.4", "bundled": true ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 }, "is-ci": { "version": "1.2.1", @@ -11315,56 +10499,31 @@ "dependencies": { "ci-info": { "version": "1.6.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-1.6.0.tgz", - "integrity": "sha512-vsGdkwSCDpWmP80ncATX7iea5DWQemg1UgCW5J8tqjU3lYw4FBYuj89J0CTVomA7BEfvSZd84GmHko+MxFQU2A==" -======= "bundled": true ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 } } }, "is-cidr": { "version": "3.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/is-cidr/-/is-cidr-3.0.0.tgz", - "integrity": "sha512-8Xnnbjsb0x462VoYiGlhEi+drY8SFwrHiSYuzc/CEwco55vkehTaxAyIjEdpi3EMvLPPJAJi9FlzP+h+03gp0Q==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "cidr-regex": "^2.0.10" } }, "is-date-object": { "version": "1.0.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.1.tgz", - "integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=" - }, - "is-fullwidth-code-point": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", - "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", -======= "bundled": true }, "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "number-is-nan": "^1.0.0" } }, "is-installed-globally": { "version": "0.1.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.1.0.tgz", - "integrity": "sha1-Df2Y9akRFxbdU13aZJL2e/PSWoA=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "global-dirs": "^0.1.0", "is-path-inside": "^1.0.0" @@ -11372,20 +10531,6 @@ }, "is-npm": { "version": "1.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-1.0.0.tgz", - "integrity": "sha1-8vtjpl5JBbQGyGBydloaTceTufQ=" - }, - "is-obj": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz", - "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8=" - }, - "is-path-inside": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-1.0.1.tgz", - "integrity": "sha1-jvW33lBDej/cprToZe96pVy0gDY=", -======= "bundled": true }, "is-obj": { @@ -11395,28 +10540,17 @@ "is-path-inside": { "version": "1.0.1", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "path-is-inside": "^1.0.1" } }, "is-redirect": { "version": "1.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/is-redirect/-/is-redirect-1.0.0.tgz", - "integrity": "sha1-HQPd7VO9jbDzDCbk+V02/HyH3CQ=" - }, - "is-regex": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.4.tgz", - "integrity": "sha1-VRdIm1RwkbCTDglWVM7SXul+lJE=", -======= "bundled": true }, "is-regex": { "version": "1.0.4", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "has": "^1.0.1" } @@ -11427,51 +10561,17 @@ }, "is-stream": { "version": "1.1.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz", - "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=" - }, - "is-symbol": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.2.tgz", - "integrity": "sha512-HS8bZ9ox60yCJLH9snBpIwv9pYUAkcuLhSA1oero1UB5y9aiQpRA8y2ex945AOtCZL1lJDeIk3G5LthswI46Lw==", -======= "bundled": true }, "is-symbol": { "version": "1.0.2", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "has-symbols": "^1.0.0" } }, "is-typedarray": { "version": "1.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz", - "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=" - }, - "isarray": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", - "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=" - }, - "isexe": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", - "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=" - }, - "isstream": { - "version": "0.1.2", - "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz", - "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=" - }, - "jsbn": { - "version": "0.1.1", - "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz", - "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=", -======= "bundled": true }, "isarray": { @@ -11489,40 +10589,10 @@ "jsbn": { "version": "0.1.1", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "optional": true }, "json-parse-better-errors": { "version": "1.0.2", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz", - "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==" - }, - "json-schema": { - "version": "0.2.3", - "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz", - "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=" - }, - "json-schema-traverse": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.3.1.tgz", - "integrity": "sha1-NJptRMU6Ud6JtAgFxdXlm0F9M0A=" - }, - "json-stringify-safe": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz", - "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=" - }, - "jsonparse": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz", - "integrity": "sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=" - }, - "jsprim": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz", - "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=", -======= "bundled": true }, "json-schema": { @@ -11544,7 +10614,6 @@ "jsprim": { "version": "1.4.1", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "assert-plus": "1.0.0", "extsprintf": "1.3.0", @@ -11554,45 +10623,25 @@ }, "latest-version": { "version": "3.1.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-3.1.0.tgz", - "integrity": "sha1-ogU4P+oyKzO1rjsYq+4NwvNW7hU=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "package-json": "^4.0.0" } }, "lazy-property": { "version": "1.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/lazy-property/-/lazy-property-1.0.0.tgz", - "integrity": "sha1-hN3Es3Bnm6i9TNz6TAa0PVcREUc=" - }, - "lcid": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/lcid/-/lcid-2.0.0.tgz", - "integrity": "sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==", -======= "bundled": true }, "lcid": { "version": "2.0.0", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "invert-kv": "^2.0.0" } }, "libcipm": { "version": "4.0.7", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/libcipm/-/libcipm-4.0.7.tgz", - "integrity": "sha512-fTq33otU3PNXxxCTCYCYe7V96o59v/o7bvtspmbORXpgFk+wcWrGf5x6tBgui5gCed/45/wtPomBsZBYm5KbIw==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "bin-links": "^1.1.2", "bluebird": "^3.5.1", @@ -11613,12 +10662,7 @@ }, "libnpm": { "version": "3.0.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/libnpm/-/libnpm-3.0.1.tgz", - "integrity": "sha512-d7jU5ZcMiTfBqTUJVZ3xid44fE5ERBm9vBnmhp2ECD2Ls+FNXWxHSkO7gtvrnbLO78gwPdNPz1HpsF3W4rjkBQ==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "bin-links": "^1.1.2", "bluebird": "^3.5.3", @@ -11644,12 +10688,7 @@ }, "libnpmaccess": { "version": "3.0.2", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/libnpmaccess/-/libnpmaccess-3.0.2.tgz", - "integrity": "sha512-01512AK7MqByrI2mfC7h5j8N9V4I7MHJuk9buo8Gv+5QgThpOgpjB7sQBDDkeZqRteFb1QM/6YNdHfG7cDvfAQ==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "aproba": "^2.0.0", "get-stream": "^4.0.0", @@ -11659,12 +10698,7 @@ }, "libnpmconfig": { "version": "1.2.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/libnpmconfig/-/libnpmconfig-1.2.1.tgz", - "integrity": "sha512-9esX8rTQAHqarx6qeZqmGQKBNZR5OIbl/Ayr0qQDy3oXja2iFVQQI81R6GZ2a02bSNZ9p3YOGX1O6HHCb1X7kA==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "figgy-pudding": "^3.5.1", "find-up": "^3.0.0", @@ -11673,24 +10707,14 @@ "dependencies": { "find-up": { "version": "3.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz", - "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "locate-path": "^3.0.0" } }, "locate-path": { "version": "3.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz", - "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "p-locate": "^3.0.0", "path-exists": "^3.0.0" @@ -11698,47 +10722,27 @@ }, "p-limit": { "version": "2.2.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.0.tgz", - "integrity": "sha512-pZbTJpoUsCzV48Mc9Nh51VbwO0X9cuPFE8gYwx9BTCt9SF8/b7Zljd2fVgOxhIF/HDTKgpVzs+GPhyKfjLLFRQ==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "p-try": "^2.0.0" } }, "p-locate": { "version": "3.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz", - "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "p-limit": "^2.0.0" } }, "p-try": { "version": "2.2.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", - "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==" -======= "bundled": true ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 } } }, "libnpmhook": { "version": "5.0.3", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/libnpmhook/-/libnpmhook-5.0.3.tgz", - "integrity": "sha512-UdNLMuefVZra/wbnBXECZPefHMGsVDTq5zaM/LgKNE9Keyl5YXQTnGAzEo+nFOpdRqTWI9LYi4ApqF9uVCCtuA==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "aproba": "^2.0.0", "figgy-pudding": "^3.4.1", @@ -11748,12 +10752,7 @@ }, "libnpmorg": { "version": "1.0.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/libnpmorg/-/libnpmorg-1.0.1.tgz", - "integrity": "sha512-0sRUXLh+PLBgZmARvthhYXQAWn0fOsa6T5l3JSe2n9vKG/lCVK4nuG7pDsa7uMq+uTt2epdPK+a2g6btcY11Ww==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "aproba": "^2.0.0", "figgy-pudding": "^3.4.1", @@ -11763,12 +10762,7 @@ }, "libnpmpublish": { "version": "1.1.2", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/libnpmpublish/-/libnpmpublish-1.1.2.tgz", - "integrity": "sha512-2yIwaXrhTTcF7bkJKIKmaCV9wZOALf/gsTDxVSu/Gu/6wiG3fA8ce8YKstiWKTxSFNC0R7isPUb6tXTVFZHt2g==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "aproba": "^2.0.0", "figgy-pudding": "^3.5.1", @@ -11783,12 +10777,7 @@ }, "libnpmsearch": { "version": "2.0.2", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/libnpmsearch/-/libnpmsearch-2.0.2.tgz", - "integrity": "sha512-VTBbV55Q6fRzTdzziYCr64+f8AopQ1YZ+BdPOv16UegIEaE8C0Kch01wo4s3kRTFV64P121WZJwgmBwrq68zYg==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "figgy-pudding": "^3.5.1", "get-stream": "^4.0.0", @@ -11797,12 +10786,7 @@ }, "libnpmteam": { "version": "1.0.2", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/libnpmteam/-/libnpmteam-1.0.2.tgz", - "integrity": "sha512-p420vM28Us04NAcg1rzgGW63LMM6rwe+6rtZpfDxCcXxM0zUTLl7nPFEnRF3JfFBF5skF/yuZDUthTsHgde8QA==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "aproba": "^2.0.0", "figgy-pudding": "^3.4.1", @@ -11812,12 +10796,7 @@ }, "libnpx": { "version": "10.2.2", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/libnpx/-/libnpx-10.2.2.tgz", - "integrity": "sha512-ujaYToga1SAX5r7FU5ShMFi88CWpY75meNZtr6RtEyv4l2ZK3+Wgvxq2IqlwWBiDZOqhumdeiocPS1aKrCMe3A==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "dotenv": "^5.0.1", "npm-package-arg": "^6.0.0", @@ -11831,12 +10810,7 @@ }, "locate-path": { "version": "2.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz", - "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "p-locate": "^2.0.0", "path-exists": "^3.0.0" @@ -11844,12 +10818,7 @@ }, "lock-verify": { "version": "2.1.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/lock-verify/-/lock-verify-2.1.0.tgz", - "integrity": "sha512-vcLpxnGvrqisKvLQ2C2v0/u7LVly17ak2YSgoK4PrdsYBXQIax19vhKiLfvKNFx7FRrpTnitrpzF/uuCMuorIg==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "npm-package-arg": "^6.1.0", "semver": "^5.4.1" @@ -11857,33 +10826,18 @@ }, "lockfile": { "version": "1.0.4", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/lockfile/-/lockfile-1.0.4.tgz", - "integrity": "sha512-cvbTwETRfsFh4nHsL1eGWapU1XFi5Ot9E85sWAwia7Y7EgB7vfqcZhTKZ+l7hCGxSPoushMv5GKhT5PdLv03WA==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "signal-exit": "^3.0.2" } }, "lodash._baseindexof": { "version": "3.1.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/lodash._baseindexof/-/lodash._baseindexof-3.1.0.tgz", - "integrity": "sha1-/lK1OhxnYeQmGNZU5KJXie1hgiw=" - }, - "lodash._baseuniq": { - "version": "4.6.0", - "resolved": "https://registry.npmjs.org/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz", - "integrity": "sha1-DrtE5FaBSveQXGIS+iybLVG4Qeg=", -======= "bundled": true }, "lodash._baseuniq": { "version": "4.6.0", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "lodash._createset": "~4.0.0", "lodash._root": "~3.0.0" @@ -11891,20 +10845,6 @@ }, "lodash._bindcallback": { "version": "3.0.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz", - "integrity": "sha1-5THCdkTPi1epnhftlbNcdIeJOS4=" - }, - "lodash._cacheindexof": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/lodash._cacheindexof/-/lodash._cacheindexof-3.0.2.tgz", - "integrity": "sha1-PcaayCSY0u5ePOVgkbr9Ktx73pI=" - }, - "lodash._createcache": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/lodash._createcache/-/lodash._createcache-3.1.2.tgz", - "integrity": "sha1-VtagZAF2JeeevKa4AY4XRAvc8JM=", -======= "bundled": true }, "lodash._cacheindexof": { @@ -11914,62 +10854,12 @@ "lodash._createcache": { "version": "3.1.2", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "lodash._getnative": "^3.0.0" } }, "lodash._createset": { "version": "4.0.3", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/lodash._createset/-/lodash._createset-4.0.3.tgz", - "integrity": "sha1-D0ZZ+7CddRlPqeK4imZE02PJ/iY=" - }, - "lodash._getnative": { - "version": "3.9.1", - "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz", - "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=" - }, - "lodash._root": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/lodash._root/-/lodash._root-3.0.1.tgz", - "integrity": "sha1-+6HEUkwZ7ppfgTa0YJ8BfPTe1pI=" - }, - "lodash.clonedeep": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz", - "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=" - }, - "lodash.restparam": { - "version": "3.6.1", - "resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz", - "integrity": "sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU=" - }, - "lodash.union": { - "version": "4.6.0", - "resolved": "https://registry.npmjs.org/lodash.union/-/lodash.union-4.6.0.tgz", - "integrity": "sha1-SLtQiECfFvGCFmZkHETdGqrjzYg=" - }, - "lodash.uniq": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", - "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=" - }, - "lodash.without": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/lodash.without/-/lodash.without-4.4.0.tgz", - "integrity": "sha1-PNRXSgC2e643OpS3SHcmQFB7eqw=" - }, - "lowercase-keys": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz", - "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==" - }, - "lru-cache": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", - "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==", -======= "bundled": true }, "lodash._getnative": { @@ -12007,31 +10897,20 @@ "lru-cache": { "version": "5.1.1", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "yallist": "^3.0.2" } }, "make-dir": { "version": "1.3.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz", - "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "pify": "^3.0.0" } }, "make-fetch-happen": { "version": "5.0.2", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-5.0.2.tgz", - "integrity": "sha512-07JHC0r1ykIoruKO8ifMXu+xEU8qOXDFETylktdug6vJDACnP+HKevOu3PXyNPzFyTSlz8vrBYlBO1JZRe8Cag==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "agentkeepalive": "^3.4.1", "cacache": "^12.0.0", @@ -12048,33 +10927,18 @@ }, "map-age-cleaner": { "version": "0.1.3", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz", - "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "p-defer": "^1.0.0" } }, "meant": { "version": "1.0.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/meant/-/meant-1.0.1.tgz", - "integrity": "sha512-UakVLFjKkbbUwNWJ2frVLnnAtbb7D7DsloxRd3s/gDpI8rdv8W5Hp3NaDb+POBI1fQdeussER6NB8vpcRURvlg==" - }, - "mem": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/mem/-/mem-4.3.0.tgz", - "integrity": "sha512-qX2bG48pTqYRVmDB37rn/6PT7LcR8T7oAX3bf99u1Tt1nzxYfxkgqDwUwolPlXweM0XzBOBFzSx4kfp7KP1s/w==", -======= "bundled": true }, "mem": { "version": "4.3.0", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "map-age-cleaner": "^0.1.1", "mimic-fn": "^2.0.0", @@ -12083,68 +10947,38 @@ "dependencies": { "mimic-fn": { "version": "2.1.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz", - "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==" -======= "bundled": true ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 } } }, "mime-db": { "version": "1.35.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.35.0.tgz", - "integrity": "sha512-JWT/IcCTsB0Io3AhWUMjRqucrHSPsSf2xKLaRldJVULioggvkJvggZ3VXNNSRkCddE6D+BUI4HEIZIA2OjwIvg==" - }, - "mime-types": { - "version": "2.1.19", - "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.19.tgz", - "integrity": "sha512-P1tKYHVSZ6uFo26mtnve4HQFE3koh1UWVkp8YUC+ESBHe945xWSoXuHHiGarDqcEZ+whpCDnlNw5LON0kLo+sw==", -======= "bundled": true }, "mime-types": { "version": "2.1.19", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "mime-db": "~1.35.0" } }, "minimatch": { "version": "3.0.4", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", - "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "brace-expansion": "^1.1.7" } }, "minizlib": { "version": "1.3.3", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.3.3.tgz", - "integrity": "sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "minipass": "^2.9.0" }, "dependencies": { "minipass": { "version": "2.9.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.9.0.tgz", - "integrity": "sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -12154,12 +10988,7 @@ }, "mississippi": { "version": "3.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz", - "integrity": "sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "concat-stream": "^1.5.0", "duplexify": "^3.4.2", @@ -12174,14 +11003,8 @@ } }, "mkdirp": { -<<<<<<< HEAD - "version": "0.5.4", - "resolved": false, - "integrity": "sha512-iG9AK/dJLtJ0XNgTuDbSyNS3zECqDlAhnQW4CsNxBG3LQJBbHmRX1egw39DmtOdCAqY+dKXV+sgPgilNWUKMVw==", -======= "version": "0.5.5", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "minimist": "^1.2.5" }, @@ -12194,12 +11017,7 @@ }, "move-concurrently": { "version": "1.0.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", - "integrity": "sha1-viwAX9oy4LKa8fBdfEszIUxwH5I=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "aproba": "^1.1.1", "copy-concurrently": "^1.0.0", @@ -12211,36 +11029,12 @@ "dependencies": { "aproba": { "version": "1.2.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", - "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==" -======= "bundled": true ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 } } }, "ms": { "version": "2.1.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz", - "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==" - }, - "mute-stream": { - "version": "0.0.7", - "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz", - "integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=" - }, - "nice-try": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", - "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==" - }, - "node-fetch-npm": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/node-fetch-npm/-/node-fetch-npm-2.0.2.tgz", - "integrity": "sha512-nJIxm1QmAj4v3nfCvEeCrYSoVwXyxLnaPBK5W1W5DGEJwjlKuC2VEUycGw5oxk+4zZahRrB84PUJJgEmhFTDFw==", -======= "bundled": true }, "mute-stream": { @@ -12254,7 +11048,6 @@ "node-fetch-npm": { "version": "2.0.2", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "encoding": "^0.1.11", "json-parse-better-errors": "^1.0.0", @@ -12288,12 +11081,7 @@ }, "normalize-package-data": { "version": "2.5.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz", - "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "hosted-git-info": "^2.1.4", "resolve": "^1.10.0", @@ -12303,12 +11091,7 @@ "dependencies": { "resolve": { "version": "1.10.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.10.0.tgz", - "integrity": "sha512-3sUr9aq5OfSg2S9pNtPA9hL1FVEAjvfOC4leW0SNf/mpnaakz2a9femSd6LqAww2RaFctwyf1lCqnTHuF1rxDg==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "path-parse": "^1.0.6" } @@ -12317,12 +11100,7 @@ }, "npm-audit-report": { "version": "1.3.2", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/npm-audit-report/-/npm-audit-report-1.3.2.tgz", - "integrity": "sha512-abeqS5ONyXNaZJPGAf6TOUMNdSe1Y6cpc9MLBRn+CuUoYbfdca6AxOyXVlfIv9OgKX+cacblbG5w7A6ccwoTPw==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "cli-table3": "^0.5.0", "console-control-strings": "^1.1.0" @@ -12330,45 +11108,25 @@ }, "npm-bundled": { "version": "1.1.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.1.1.tgz", - "integrity": "sha512-gqkfgGePhTpAEgUsGEgcq1rqPXA+tv/aVBlgEzfXwA1yiUJF7xtEt3CtVwOjNYQOVknDk0F20w58Fnm3EtG0fA==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "npm-normalize-package-bin": "^1.0.1" } }, "npm-cache-filename": { "version": "1.0.2", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/npm-cache-filename/-/npm-cache-filename-1.0.2.tgz", - "integrity": "sha1-3tMGxbC/yHCp6fr4I7xfKD4FrhE=" - }, - "npm-install-checks": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/npm-install-checks/-/npm-install-checks-3.0.2.tgz", - "integrity": "sha512-E4kzkyZDIWoin6uT5howP8VDvkM+E8IQDcHAycaAxMbwkqhIg5eEYALnXOl3Hq9MrkdQB/2/g1xwBINXdKSRkg==", -======= "bundled": true }, "npm-install-checks": { "version": "3.0.2", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "semver": "^2.3.0 || 3.x || 4 || 5" } }, "npm-lifecycle": { "version": "3.1.4", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/npm-lifecycle/-/npm-lifecycle-3.1.4.tgz", - "integrity": "sha512-tgs1PaucZwkxECGKhC/stbEgFyc3TGh2TJcg2CDr6jbvQRdteHNhmMeljRzpe4wgFAXQADoy1cSqqi7mtiAa5A==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "byline": "^5.0.0", "graceful-fs": "^4.1.15", @@ -12382,20 +11140,6 @@ }, "npm-logical-tree": { "version": "1.2.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/npm-logical-tree/-/npm-logical-tree-1.2.1.tgz", - "integrity": "sha512-AJI/qxDB2PWI4LG1CYN579AY1vCiNyWfkiquCsJWqntRu/WwimVrC8yXeILBFHDwxfOejxewlmnvW9XXjMlYIg==" - }, - "npm-normalize-package-bin": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz", - "integrity": "sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==" - }, - "npm-package-arg": { - "version": "6.1.1", - "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz", - "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==", -======= "bundled": true }, "npm-normalize-package-bin": { @@ -12405,7 +11149,6 @@ "npm-package-arg": { "version": "6.1.1", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "hosted-git-info": "^2.7.1", "osenv": "^0.1.5", @@ -12424,12 +11167,7 @@ }, "npm-pick-manifest": { "version": "3.0.2", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/npm-pick-manifest/-/npm-pick-manifest-3.0.2.tgz", - "integrity": "sha512-wNprTNg+X5nf+tDi+hbjdHhM4bX+mKqv6XmPh7B5eG+QY9VARfQPfCEH013H5GqfNj6ee8Ij2fg8yk0mzps1Vw==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "figgy-pudding": "^3.5.1", "npm-package-arg": "^6.0.0", @@ -12446,14 +11184,8 @@ } }, "npm-registry-fetch": { -<<<<<<< HEAD - "version": "4.0.3", - "resolved": false, - "integrity": "sha512-WGvUx0lkKFhu9MbiGFuT9nG2NpfQ+4dCJwRwwtK2HK5izJEvwDxMeUyqbuMS7N/OkpVCqDorV6rO5E4V9F8lJw==", -======= "version": "4.0.4", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "JSONStream": "^1.3.4", "bluebird": "^3.5.1", @@ -12466,44 +11198,24 @@ "dependencies": { "safe-buffer": { "version": "5.2.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.0.tgz", - "integrity": "sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==" -======= "bundled": true ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 } } }, "npm-run-path": { "version": "2.0.2", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz", - "integrity": "sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "path-key": "^2.0.0" } }, "npm-user-validate": { "version": "1.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/npm-user-validate/-/npm-user-validate-1.0.0.tgz", - "integrity": "sha1-jOyg9c6gTU6TUZ73LQVXp1Ei6VE=" - }, - "npmlog": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz", - "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", -======= "bundled": true }, "npmlog": { "version": "4.1.2", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "are-we-there-yet": "~1.1.2", "console-control-strings": "~1.1.0", @@ -12513,30 +11225,6 @@ }, "number-is-nan": { "version": "1.0.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", - "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=" - }, - "oauth-sign": { - "version": "0.9.0", - "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz", - "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==" - }, - "object-assign": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" - }, - "object-keys": { - "version": "1.0.12", - "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.0.12.tgz", - "integrity": "sha512-FTMyFUm2wBcGHnH2eXmz7tC6IwlqQZ6mVZ+6dm6vZ4IQIHjs6FdNsQBuKGPuUUUY6NfJw2PshC08Tn6LzLDOag==" - }, - "object.getownpropertydescriptors": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz", - "integrity": "sha1-h1jIRvW0B62rDyNuCYbxSwUcqhY=", -======= "bundled": true }, "oauth-sign": { @@ -12554,7 +11242,6 @@ "object.getownpropertydescriptors": { "version": "2.0.3", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "define-properties": "^1.1.2", "es-abstract": "^1.5.1" @@ -12562,32 +11249,13 @@ }, "once": { "version": "1.4.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", - "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "wrappy": "1" } }, "opener": { "version": "1.5.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.1.tgz", - "integrity": "sha512-goYSy5c2UXE4Ra1xixabeVh1guIX/ZV/YokJksb6q2lubWu6UbvPQ20p542/sFIll1nl8JnCyK9oBaOcCWXwvA==" - }, - "os-homedir": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz", - "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=" - }, - "os-locale": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-3.1.0.tgz", - "integrity": "sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==", -======= "bundled": true }, "os-homedir": { @@ -12597,7 +11265,6 @@ "os-locale": { "version": "3.1.0", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "execa": "^1.0.0", "lcid": "^2.0.0", @@ -12606,12 +11273,7 @@ "dependencies": { "cross-spawn": { "version": "6.0.5", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", - "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "nice-try": "^1.0.4", "path-key": "^2.0.1", @@ -12622,12 +11284,7 @@ }, "execa": { "version": "1.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz", - "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "cross-spawn": "^6.0.0", "get-stream": "^4.0.0", @@ -12642,21 +11299,11 @@ }, "os-tmpdir": { "version": "1.0.2", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", - "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=" - }, - "osenv": { - "version": "0.1.5", - "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz", - "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==", -======= "bundled": true }, "osenv": { "version": "0.1.5", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "os-homedir": "^1.0.0", "os-tmpdir": "^1.0.0" @@ -12664,25 +11311,6 @@ }, "p-defer": { "version": "1.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz", - "integrity": "sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=" - }, - "p-finally": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz", - "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=" - }, - "p-is-promise": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-2.1.0.tgz", - "integrity": "sha512-Y3W0wlRPK8ZMRbNq97l4M5otioeA5lm1z7bkNkxCka8HSPjR0xRWmpCmc9utiaLP9Jb1eD8BgeIxTW4AIF45Pg==" - }, - "p-limit": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.2.0.tgz", - "integrity": "sha512-Y/OtIaXtUPr4/YpMv1pCL5L5ed0rumAaAeBSj12F+bSlMdys7i8oQF/GUJmfpTS/QoaRrS/k6pma29haJpsMng==", -======= "bundled": true }, "p-finally": { @@ -12696,40 +11324,24 @@ "p-limit": { "version": "1.2.0", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "p-try": "^1.0.0" } }, "p-locate": { "version": "2.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz", - "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "p-limit": "^1.1.0" } }, "p-try": { "version": "1.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz", - "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=" - }, - "package-json": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/package-json/-/package-json-4.0.1.tgz", - "integrity": "sha1-iGmgQBJTZhxMTKPabCEh7VVfXu0=", -======= "bundled": true }, "package-json": { "version": "4.0.1", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "got": "^6.7.1", "registry-auth-token": "^3.0.1", @@ -12739,12 +11351,7 @@ }, "pacote": { "version": "9.5.12", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/pacote/-/pacote-9.5.12.tgz", - "integrity": "sha512-BUIj/4kKbwWg4RtnBncXPJd15piFSVNpTzY0rysSr3VnMowTYgkGKcaHrbReepAkjTr8lH2CVWRi58Spg2CicQ==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "bluebird": "^3.5.3", "cacache": "^12.0.2", @@ -12780,12 +11387,7 @@ "dependencies": { "minipass": { "version": "2.9.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.9.0.tgz", - "integrity": "sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -12795,12 +11397,7 @@ }, "parallel-transform": { "version": "1.1.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/parallel-transform/-/parallel-transform-1.1.0.tgz", - "integrity": "sha1-1BDwZbBdojCB/NEPKIVMKb2jOwY=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "cyclist": "~0.2.2", "inherits": "^2.0.3", @@ -12809,12 +11406,7 @@ "dependencies": { "readable-stream": { "version": "2.3.6", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", - "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "core-util-is": "~1.0.0", "inherits": "~2.0.3", @@ -12827,12 +11419,7 @@ }, "string_decoder": { "version": "1.1.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", - "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "safe-buffer": "~5.1.0" } @@ -12841,60 +11428,6 @@ }, "path-exists": { "version": "3.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz", - "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=" - }, - "path-is-absolute": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", - "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=" - }, - "path-is-inside": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz", - "integrity": "sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM=" - }, - "path-key": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz", - "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=" - }, - "path-parse": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz", - "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==" - }, - "performance-now": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz", - "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=" - }, - "pify": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz", - "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=" - }, - "prepend-http": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz", - "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=" - }, - "process-nextick-args": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz", - "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==" - }, - "promise-inflight": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz", - "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=" - }, - "promise-retry": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/promise-retry/-/promise-retry-1.1.1.tgz", - "integrity": "sha1-ZznpaOMFHaIM5kl/srUPaRHfPW0=", -======= "bundled": true }, "path-is-absolute": { @@ -12936,7 +11469,6 @@ "promise-retry": { "version": "1.1.1", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "err-code": "^1.0.0", "retry": "^0.10.0" @@ -12944,69 +11476,30 @@ "dependencies": { "retry": { "version": "0.10.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/retry/-/retry-0.10.1.tgz", - "integrity": "sha1-52OI0heZLCUnUCQdPTlW/tmNj/Q=" -======= "bundled": true ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 } } }, "promzard": { "version": "0.3.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/promzard/-/promzard-0.3.0.tgz", - "integrity": "sha1-JqXW7ox97kyxIggwWs+5O6OCqe4=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "read": "1" } }, "proto-list": { "version": "1.2.4", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz", - "integrity": "sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=" - }, - "protoduck": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/protoduck/-/protoduck-5.0.1.tgz", - "integrity": "sha512-WxoCeDCoCBY55BMvj4cAEjdVUFGRWed9ZxPlqTKYyw1nDDTQ4pqmnIMAGfJlg7Dx35uB/M+PHJPTmGOvaCaPTg==", -======= "bundled": true }, "protoduck": { "version": "5.0.1", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "genfun": "^5.0.0" } }, "prr": { "version": "1.0.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", - "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=" - }, - "pseudomap": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz", - "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=" - }, - "psl": { - "version": "1.1.29", - "resolved": "https://registry.npmjs.org/psl/-/psl-1.1.29.tgz", - "integrity": "sha512-AeUmQ0oLN02flVHXWh9sSJF7mcdFq0ppid/JkErufc3hGIV/AMa8Fo9VgDo/cT2jFdOWoFvHp90qqBH54W+gjQ==" - }, - "pump": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz", - "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==", -======= "bundled": true }, "pseudomap": { @@ -13020,7 +11513,6 @@ "pump": { "version": "3.0.0", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "end-of-stream": "^1.1.0", "once": "^1.3.1" @@ -13028,12 +11520,7 @@ }, "pumpify": { "version": "1.5.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/pumpify/-/pumpify-1.5.1.tgz", - "integrity": "sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "duplexify": "^3.6.0", "inherits": "^2.0.3", @@ -13042,12 +11529,7 @@ "dependencies": { "pump": { "version": "2.0.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz", - "integrity": "sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "end-of-stream": "^1.1.0", "once": "^1.3.1" @@ -13057,25 +11539,6 @@ }, "punycode": { "version": "1.4.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz", - "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=" - }, - "qrcode-terminal": { - "version": "0.12.0", - "resolved": "https://registry.npmjs.org/qrcode-terminal/-/qrcode-terminal-0.12.0.tgz", - "integrity": "sha512-EXtzRZmC+YGmGlDFbXKxQiMZNwCLEO6BANKXG4iCtSIM0yqc/pappSx3RIKr4r0uh5JsBckOXeKrB3Iz7mdQpQ==" - }, - "qs": { - "version": "6.5.2", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz", - "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==" - }, - "query-string": { - "version": "6.8.2", - "resolved": "https://registry.npmjs.org/query-string/-/query-string-6.8.2.tgz", - "integrity": "sha512-J3Qi8XZJXh93t2FiKyd/7Ec6GNifsjKXUsVFkSBj/kjLsDylWhnCz4NT1bkPcKotttPW+QbKGqqPH8OoI2pdqw==", -======= "bundled": true }, "qrcode-terminal": { @@ -13089,7 +11552,6 @@ "query-string": { "version": "6.8.2", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "decode-uri-component": "^0.2.0", "split-on-first": "^1.0.0", @@ -13098,12 +11560,7 @@ }, "qw": { "version": "1.0.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/qw/-/qw-1.0.1.tgz", - "integrity": "sha1-77/cdA+a0FQwRCassYNBLMi5ltQ=" -======= "bundled": true ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 }, "rc": { "version": "1.2.8", @@ -13123,36 +11580,21 @@ }, "read": { "version": "1.0.7", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz", - "integrity": "sha1-s9oZvQUkMal2cdRKQmNK33ELQMQ=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "mute-stream": "~0.0.4" } }, "read-cmd-shim": { "version": "1.0.5", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/read-cmd-shim/-/read-cmd-shim-1.0.5.tgz", - "integrity": "sha512-v5yCqQ/7okKoZZkBQUAfTsQ3sVJtXdNfbPnI5cceppoxEVLYA3k+VtV2omkeo8MS94JCy4fSiUwlRBAwCVRPUA==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "graceful-fs": "^4.1.2" } }, "read-installed": { "version": "4.0.3", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/read-installed/-/read-installed-4.0.3.tgz", - "integrity": "sha1-/5uLZ/GH0eTCm5/rMfayI6zRkGc=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "debuglog": "^1.0.1", "graceful-fs": "^4.1.2", @@ -13165,12 +11607,7 @@ }, "read-package-json": { "version": "2.1.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/read-package-json/-/read-package-json-2.1.1.tgz", - "integrity": "sha512-dAiqGtVc/q5doFz6096CcnXhpYk0ZN8dEKVkGLU0CsASt8SrgF6SF7OTKAYubfvFhWaqofl+Y8HK19GR8jwW+A==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "glob": "^7.1.1", "graceful-fs": "^4.1.2", @@ -13181,12 +11618,7 @@ }, "read-package-tree": { "version": "5.3.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/read-package-tree/-/read-package-tree-5.3.1.tgz", - "integrity": "sha512-mLUDsD5JVtlZxjSlPPx1RETkNjjvQYuweKwNVt1Sn8kP5Jh44pvYuUHCp6xSVDZWbNxVxG5lyZJ921aJH61sTw==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "read-package-json": "^2.0.0", "readdir-scoped-modules": "^1.0.0", @@ -13204,12 +11636,7 @@ }, "readdir-scoped-modules": { "version": "1.1.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/readdir-scoped-modules/-/readdir-scoped-modules-1.1.0.tgz", - "integrity": "sha512-asaikDeqAQg7JifRsZn1NJZXo9E+VwlyCfbkZhwyISinqk5zNS6266HS5kah6P0SaQKGF6SkNnZVHUzHFYxYDw==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "debuglog": "^1.0.1", "dezalgo": "^1.0.0", @@ -13227,24 +11654,14 @@ }, "registry-url": { "version": "3.1.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-3.1.0.tgz", - "integrity": "sha1-PU74cPc93h138M+aOBQyRE4XSUI=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "rc": "^1.0.1" } }, "request": { "version": "2.88.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz", - "integrity": "sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "aws-sign2": "~0.7.0", "aws4": "^1.8.0", @@ -13270,25 +11687,6 @@ }, "require-directory": { "version": "2.1.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", - "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=" - }, - "require-main-filename": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz", - "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=" - }, - "resolve-from": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", - "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==" - }, - "retry": { - "version": "0.12.0", - "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz", - "integrity": "sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=" -======= "bundled": true }, "require-main-filename": { @@ -13302,7 +11700,6 @@ "retry": { "version": "0.12.0", "bundled": true ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 }, "rimraf": { "version": "2.7.1", @@ -13313,48 +11710,19 @@ }, "run-queue": { "version": "1.0.3", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/run-queue/-/run-queue-1.0.3.tgz", - "integrity": "sha1-6Eg5bwV9Ij8kOGkkYY4laUFh7Ec=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "aproba": "^1.1.1" }, "dependencies": { "aproba": { "version": "1.2.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", - "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==" -======= "bundled": true ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 } } }, "safe-buffer": { "version": "5.1.2", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" - }, - "safer-buffer": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", - "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" - }, - "semver": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", - "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==" - }, - "semver-diff": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/semver-diff/-/semver-diff-2.1.0.tgz", - "integrity": "sha1-S7uEN8jTfksM8aaP1ybsbWRdbTY=", -======= "bundled": true }, "safer-buffer": { @@ -13368,70 +11736,30 @@ "semver-diff": { "version": "2.1.0", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "semver": "^5.0.3" } }, "set-blocking": { "version": "2.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", - "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=" - }, - "sha": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/sha/-/sha-3.0.0.tgz", - "integrity": "sha512-DOYnM37cNsLNSGIG/zZWch5CKIRNoLdYUQTQlcgkRkoYIUwDYjqDyye16YcDZg/OPdcbUgTKMjc4SY6TB7ZAPw==", -======= "bundled": true }, "sha": { "version": "3.0.0", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "graceful-fs": "^4.1.2" } }, "shebang-command": { "version": "1.2.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz", - "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "shebang-regex": "^1.0.0" } }, "shebang-regex": { "version": "1.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz", - "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=" - }, - "signal-exit": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz", - "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=" - }, - "slide": { - "version": "1.1.6", - "resolved": "https://registry.npmjs.org/slide/-/slide-1.1.6.tgz", - "integrity": "sha1-VusCfWW00tzmyy4tMsTUr8nh1wc=" - }, - "smart-buffer": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.1.0.tgz", - "integrity": "sha512-iVICrxOzCynf/SNaBQCw34eM9jROU/s5rzIhpOvzhzuYHfJR/DhZfDkXiZSgKXfgv26HT3Yni3AV/DGw0cGnnw==" - }, - "socks": { - "version": "2.3.3", - "resolved": "https://registry.npmjs.org/socks/-/socks-2.3.3.tgz", - "integrity": "sha512-o5t52PCNtVdiOvzMry7wU4aOqYWL0PeCXRWBEiJow4/i/wr+wpsJQ9awEu1EonLIqsfGd5qSgDdxEOvCdmBEpA==", -======= "bundled": true }, "signal-exit": { @@ -13449,7 +11777,6 @@ "socks": { "version": "2.3.3", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "ip": "1.1.5", "smart-buffer": "^4.1.0" @@ -13457,12 +11784,7 @@ }, "socks-proxy-agent": { "version": "4.0.2", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/socks-proxy-agent/-/socks-proxy-agent-4.0.2.tgz", - "integrity": "sha512-NT6syHhI9LmuEMSK6Kd2V7gNv5KFZoLE7V5udWmn0de+3Mkj3UMA/AJPLyeNUVmElCurSHtUdM3ETpR3z770Wg==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "agent-base": "~4.2.1", "socks": "~2.3.2" @@ -13470,12 +11792,7 @@ "dependencies": { "agent-base": { "version": "4.2.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.2.1.tgz", - "integrity": "sha512-JVwXMr9nHYTUXsBFKUqhJwvlcYU/blreOEUkhNR2eXZIvwd+c+o5V4MgDPKWnMS/56awN3TRzIP+KoPn+roQtg==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "es6-promisify": "^5.0.0" } @@ -13484,21 +11801,11 @@ }, "sorted-object": { "version": "2.0.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/sorted-object/-/sorted-object-2.0.1.tgz", - "integrity": "sha1-fWMfS9OnmKJK8d/8+/6DM3pd9fw=" - }, - "sorted-union-stream": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/sorted-union-stream/-/sorted-union-stream-2.1.3.tgz", - "integrity": "sha1-x3lMfgd4gAUv9xqNSi27Sppjisc=", -======= "bundled": true }, "sorted-union-stream": { "version": "2.1.3", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "from2": "^1.3.0", "stream-iterate": "^1.1.0" @@ -13506,12 +11813,7 @@ "dependencies": { "from2": { "version": "1.3.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/from2/-/from2-1.3.0.tgz", - "integrity": "sha1-iEE7qqX5pZfP3pIh2GmGzTwGHf0=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "inherits": "~2.0.1", "readable-stream": "~1.1.10" @@ -13519,21 +11821,11 @@ }, "isarray": { "version": "0.0.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", - "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" - }, - "readable-stream": { - "version": "1.1.14", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz", - "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=", -======= "bundled": true }, "readable-stream": { "version": "1.1.14", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "core-util-is": "~1.0.0", "inherits": "~2.0.1", @@ -13543,23 +11835,13 @@ }, "string_decoder": { "version": "0.10.31", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz", - "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=" -======= "bundled": true ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 } } }, "spdx-correct": { "version": "3.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.0.0.tgz", - "integrity": "sha512-N19o9z5cEyc8yQQPukRCZ9EUmb4HUpnrmaL/fxS2pBo2jbfcFRVuFZ/oFC+vZz0MNNk0h80iMn5/S6qGZOL5+g==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "spdx-expression-parse": "^3.0.0", "spdx-license-ids": "^3.0.0" @@ -13567,21 +11849,11 @@ }, "spdx-exceptions": { "version": "2.1.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.1.0.tgz", - "integrity": "sha512-4K1NsmrlCU1JJgUrtgEeTVyfx8VaYea9J9LvARxhbHtVtohPs/gFGG5yy49beySjlIMhhXZ4QqujIZEfS4l6Cg==" - }, - "spdx-expression-parse": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz", - "integrity": "sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==", -======= "bundled": true }, "spdx-expression-parse": { "version": "3.0.0", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "spdx-exceptions": "^2.1.0", "spdx-license-ids": "^3.0.0" @@ -13589,20 +11861,6 @@ }, "spdx-license-ids": { "version": "3.0.3", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.3.tgz", - "integrity": "sha512-uBIcIl3Ih6Phe3XHK1NqboJLdGfwr1UN3k6wSD1dZpmPsIkb8AGNbZYJ1fOBk834+Gxy8rpfDxrS6XLEMZMY2g==" - }, - "split-on-first": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz", - "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==" - }, - "sshpk": { - "version": "1.14.2", - "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.14.2.tgz", - "integrity": "sha1-xvxhZIo9nE52T9P8306hBeSSupg=", -======= "bundled": true }, "split-on-first": { @@ -13612,7 +11870,6 @@ "sshpk": { "version": "1.14.2", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "asn1": "~0.2.3", "assert-plus": "^1.0.0", @@ -13627,24 +11884,14 @@ }, "ssri": { "version": "6.0.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz", - "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "figgy-pudding": "^3.5.1" } }, "stream-each": { "version": "1.2.2", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/stream-each/-/stream-each-1.2.2.tgz", - "integrity": "sha512-mc1dbFhGBxvTM3bIWmAAINbqiuAk9TATcfIQC8P+/+HJefgaiTlMn2dHvkX8qlI12KeYKSQ1Ua9RrIqrn1VPoA==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "end-of-stream": "^1.1.0", "stream-shift": "^1.0.0" @@ -13652,12 +11899,7 @@ }, "stream-iterate": { "version": "1.2.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/stream-iterate/-/stream-iterate-1.2.0.tgz", - "integrity": "sha1-K9fHcpbBcCpGSIuK1B95hl7s1OE=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "readable-stream": "^2.1.5", "stream-shift": "^1.0.0" @@ -13665,12 +11907,7 @@ "dependencies": { "readable-stream": { "version": "2.3.6", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", - "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "core-util-is": "~1.0.0", "inherits": "~2.0.3", @@ -13683,12 +11920,7 @@ }, "string_decoder": { "version": "1.1.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", - "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "safe-buffer": "~5.1.0" } @@ -13697,20 +11929,6 @@ }, "stream-shift": { "version": "1.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.0.tgz", - "integrity": "sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=" - }, - "strict-uri-encode": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz", - "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY=" - }, - "string-width": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", - "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", -======= "bundled": true }, "strict-uri-encode": { @@ -13720,7 +11938,6 @@ "string-width": { "version": "2.1.1", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "is-fullwidth-code-point": "^2.0.0", "strip-ansi": "^4.0.0" @@ -13728,20 +11945,6 @@ "dependencies": { "ansi-regex": { "version": "3.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", - "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=" - }, - "is-fullwidth-code-point": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz", - "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=" - }, - "strip-ansi": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", - "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", -======= "bundled": true }, "is-fullwidth-code-point": { @@ -13751,7 +11954,6 @@ "strip-ansi": { "version": "4.0.0", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "ansi-regex": "^3.0.0" } @@ -13773,41 +11975,17 @@ }, "stringify-package": { "version": "1.0.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/stringify-package/-/stringify-package-1.0.1.tgz", - "integrity": "sha512-sa4DUQsYciMP1xhKWGuFM04fB0LG/9DlluZoSVywUMRNvzid6XucHK0/90xGxRoHrAaROrcHK1aPKaijCtSrhg==" - }, - "strip-ansi": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", - "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", -======= "bundled": true }, "strip-ansi": { "version": "3.0.1", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "ansi-regex": "^2.0.0" } }, "strip-eof": { "version": "1.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz", - "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=" - }, - "strip-json-comments": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", - "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=" - }, - "supports-color": { - "version": "5.4.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz", - "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==", -======= "bundled": true }, "strip-json-comments": { @@ -13817,19 +11995,13 @@ "supports-color": { "version": "5.4.0", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "has-flag": "^3.0.0" } }, "tar": { "version": "4.4.13", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.13.tgz", - "integrity": "sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "chownr": "^1.1.1", "fs-minipass": "^1.2.5", @@ -13842,12 +12014,7 @@ "dependencies": { "minipass": { "version": "2.9.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.9.0.tgz", - "integrity": "sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -13857,32 +12024,13 @@ }, "term-size": { "version": "1.2.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/term-size/-/term-size-1.2.0.tgz", - "integrity": "sha1-RYuDiH8oj8Vtb/+/rSYuJmOO+mk=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "execa": "^0.7.0" } }, "text-table": { "version": "0.2.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", - "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=" - }, - "through": { - "version": "2.3.8", - "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", - "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=" - }, - "through2": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.3.tgz", - "integrity": "sha1-AARWmzfHx0ujnEPzzteNGtlBQL4=", -======= "bundled": true }, "through": { @@ -13892,7 +12040,6 @@ "through2": { "version": "2.0.3", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "readable-stream": "^2.1.5", "xtend": "~4.0.1" @@ -13900,12 +12047,7 @@ "dependencies": { "readable-stream": { "version": "2.3.6", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", - "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "core-util-is": "~1.0.0", "inherits": "~2.0.3", @@ -13918,12 +12060,7 @@ }, "string_decoder": { "version": "1.1.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", - "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "safe-buffer": "~5.1.0" } @@ -13932,20 +12069,6 @@ }, "timed-out": { "version": "4.0.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/timed-out/-/timed-out-4.0.1.tgz", - "integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8=" - }, - "tiny-relative-date": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/tiny-relative-date/-/tiny-relative-date-1.3.0.tgz", - "integrity": "sha512-MOQHpzllWxDCHHaDno30hhLfbouoYlOI8YlMNtvKe1zXbjEVhbcEovQxvZrPvtiYW630GQDoMMarCnjfyfHA+A==" - }, - "tough-cookie": { - "version": "2.4.3", - "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz", - "integrity": "sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==", -======= "bundled": true }, "tiny-relative-date": { @@ -13955,7 +12078,6 @@ "tough-cookie": { "version": "2.4.3", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "psl": "^1.1.24", "punycode": "^1.4.1" @@ -13963,47 +12085,18 @@ }, "tunnel-agent": { "version": "0.6.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz", - "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "safe-buffer": "^5.0.1" } }, "tweetnacl": { "version": "0.14.5", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz", - "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "optional": true }, "typedarray": { "version": "0.0.6", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", - "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" - }, - "uid-number": { - "version": "0.0.6", - "resolved": "https://registry.npmjs.org/uid-number/-/uid-number-0.0.6.tgz", - "integrity": "sha1-DqEOgDXo61uOREnwbaHHMGY7qoE=" - }, - "umask": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/umask/-/umask-1.1.0.tgz", - "integrity": "sha1-8pzr8B31F5ErtY/5xOUP3o4zMg0=" - }, - "unique-filename": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz", - "integrity": "sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==", -======= "bundled": true }, "uid-number": { @@ -14017,51 +12110,26 @@ "unique-filename": { "version": "1.1.1", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "unique-slug": "^2.0.0" } }, "unique-slug": { "version": "2.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-2.0.0.tgz", - "integrity": "sha1-22Z258fMBimHj/GWCXx4hVrp9Ks=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "imurmurhash": "^0.1.4" } }, "unique-string": { "version": "1.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-1.0.0.tgz", - "integrity": "sha1-nhBXzKhRq7kzmPizOuGHuZyuwRo=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "crypto-random-string": "^1.0.0" } }, "unpipe": { "version": "1.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", - "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=" - }, - "unzip-response": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/unzip-response/-/unzip-response-2.0.1.tgz", - "integrity": "sha1-0vD3N9FrBhXnKmk17QQhRXLVb5c=" - }, - "update-notifier": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-2.5.0.tgz", - "integrity": "sha512-gwMdhgJHGuj/+wHJJs9e6PcCszpxR1b236igrOkUofGhqJuG+amlIKwApH1IW1WWl7ovZxsX49lMBWLxSdm5Dw==", -======= "bundled": true }, "unzip-response": { @@ -14071,7 +12139,6 @@ "update-notifier": { "version": "2.5.0", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "boxen": "^1.2.1", "chalk": "^2.0.1", @@ -14087,32 +12154,13 @@ }, "url-parse-lax": { "version": "1.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-1.0.0.tgz", - "integrity": "sha1-evjzA2Rem9eaJy56FKxovAYJ2nM=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "prepend-http": "^1.0.1" } }, "util-deprecate": { "version": "1.0.2", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", - "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=" - }, - "util-extend": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/util-extend/-/util-extend-1.0.3.tgz", - "integrity": "sha1-p8IW0mdUUWljeztu3GypEZ4v+T8=" - }, - "util-promisify": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/util-promisify/-/util-promisify-2.1.0.tgz", - "integrity": "sha1-PCI2R2xNMsX/PEcAKt18E7moKlM=", -======= "bundled": true }, "util-extend": { @@ -14122,28 +12170,17 @@ "util-promisify": { "version": "2.1.0", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "object.getownpropertydescriptors": "^2.0.3" } }, "uuid": { "version": "3.3.3", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.3.tgz", - "integrity": "sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ==" - }, - "validate-npm-package-license": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz", - "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==", -======= "bundled": true }, "validate-npm-package-license": { "version": "3.0.4", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "spdx-correct": "^3.0.0", "spdx-expression-parse": "^3.0.0" @@ -14151,24 +12188,14 @@ }, "validate-npm-package-name": { "version": "3.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-3.0.0.tgz", - "integrity": "sha1-X6kS2B630MdK/BQN5zF/DKffQ34=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "builtins": "^1.0.3" } }, "verror": { "version": "1.10.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz", - "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "assert-plus": "^1.0.0", "core-util-is": "1.0.2", @@ -14177,57 +12204,32 @@ }, "wcwidth": { "version": "1.0.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz", - "integrity": "sha1-8LDc+RW8X/FSivrbLA4XtTLaL+g=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "defaults": "^1.0.3" } }, "which": { "version": "1.3.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", - "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "isexe": "^2.0.0" } }, "which-module": { "version": "2.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz", - "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=" - }, - "wide-align": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz", - "integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==", -======= "bundled": true }, "wide-align": { "version": "1.1.2", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "string-width": "^1.0.2" }, "dependencies": { "string-width": { "version": "1.0.2", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", - "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -14245,24 +12247,14 @@ }, "worker-farm": { "version": "1.7.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz", - "integrity": "sha512-rvw3QTZc8lAxyVrqcSGVm5yP/IJ2UcB3U0graE3LCFoZ0Yn2x4EoVSqJKdB/T5M+FLcRPjz4TDacRf3OCfNUzw==", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "errno": "~0.1.7" } }, "wrap-ansi": { "version": "2.1.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz", - "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "string-width": "^1.0.1", "strip-ansi": "^3.0.1" @@ -14270,12 +12262,7 @@ "dependencies": { "string-width": { "version": "1.0.2", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", - "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -14286,21 +12273,11 @@ }, "wrappy": { "version": "1.0.2", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" - }, - "write-file-atomic": { - "version": "2.4.3", - "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.3.tgz", - "integrity": "sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==", -======= "bundled": true }, "write-file-atomic": { "version": "2.4.3", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "graceful-fs": "^4.1.11", "imurmurhash": "^0.1.4", @@ -14309,30 +12286,6 @@ }, "xdg-basedir": { "version": "3.0.0", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-3.0.0.tgz", - "integrity": "sha1-SWsswQnsqNus/i3HK2A8F8WHCtQ=" - }, - "xtend": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz", - "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68=" - }, - "y18n": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz", - "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==" - }, - "yallist": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz", - "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==" - }, - "yargs": { - "version": "11.1.1", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-11.1.1.tgz", - "integrity": "sha512-PRU7gJrJaXv3q3yQZ/+/X6KBswZiaQ+zOmdprZcouPYtQgvNU35i+68M4b1ZHLZtYFT5QObFLV+ZkmJYcwKdiw==", -======= "bundled": true }, "xtend": { @@ -14350,7 +12303,6 @@ "yargs": { "version": "11.1.1", "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "cliui": "^4.0.0", "decamelize": "^1.1.1", @@ -14368,23 +12320,13 @@ "dependencies": { "y18n": { "version": "3.2.1", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz", - "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=" -======= "bundled": true ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 } } }, "yargs-parser": { "version": "9.0.2", -<<<<<<< HEAD - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-9.0.2.tgz", - "integrity": "sha1-nM9qQ0YP5O1Aqbto9I1DuKaMwHc=", -======= "bundled": true, ->>>>>>> 99d2b19dba130353ac3b021bc7eab079bb125408 "requires": { "camelcase": "^4.1.0" } @@ -14514,7 +12456,6 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.2.tgz", "integrity": "sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ==", - "dev": true, "requires": { "define-properties": "^1.1.3", "es-abstract": "^1.17.5" @@ -15129,6 +13070,11 @@ "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==", "dev": true }, + "popper.js": { + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz", + "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==" + }, "portfinder": { "version": "1.0.26", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.26.tgz", @@ -15866,6 +13812,18 @@ "warning": "^3.0.0" } }, + "react-datepicker": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-3.0.0.tgz", + "integrity": "sha512-Yrxan1tERAiWS0EzitpiaiXOIz0APTUtV75uWbaS+jSaKoGCR6wUN2FDwr1ACGlnEoGhR9QQ2Vq3odnWtgJsOA==", + "requires": { + "classnames": "^2.2.6", + "date-fns": "^2.0.1", + "prop-types": "^15.7.2", + "react-onclickoutside": "^6.9.0", + "react-popper": "^1.3.4" + } + }, "react-dock": { "version": "0.2.4", "resolved": "https://registry.npmjs.org/react-dock/-/react-dock-0.2.4.tgz", @@ -15991,6 +13949,44 @@ } } }, + "react-onclickoutside": { + "version": "6.9.0", + "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.9.0.tgz", + "integrity": "sha512-8ltIY3bC7oGhj2nPAvWOGi+xGFybPNhJM0V1H8hY/whNcXgmDeaeoCMPPd8VatrpTsUWjb/vGzrmu6SrXVty3A==" + }, + "react-popper": { + "version": "1.3.7", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.7.tgz", + "integrity": "sha512-nmqYTx7QVjCm3WUZLeuOomna138R1luC4EqkW3hxJUrAe+3eNz3oFCLYdnPwILfn0mX1Ew2c3wctrjlUMYYUww==", + "requires": { + "@babel/runtime": "^7.1.2", + "create-react-context": "^0.3.0", + "deep-equal": "^1.1.1", + "popper.js": "^1.14.4", + "prop-types": "^15.6.1", + "typed-styles": "^0.0.7", + "warning": "^4.0.2" + }, + "dependencies": { + "create-react-context": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.3.0.tgz", + "integrity": "sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==", + "requires": { + "gud": "^1.0.0", + "warning": "^4.0.3" + } + }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + } + } + }, "react-resizable": { "version": "1.10.1", "resolved": "https://registry.npmjs.org/react-resizable/-/react-resizable-1.10.1.tgz", @@ -16185,7 +14181,6 @@ "version": "1.3.0", "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz", "integrity": "sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==", - "dev": true, "requires": { "define-properties": "^1.1.3", "es-abstract": "^1.17.0-next.1" @@ -18518,6 +16513,11 @@ "mime-types": "~2.1.24" } }, + "typed-styles": { + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz", + "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==" + }, "typedarray": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", diff --git a/package.json b/package.json index 683f181c3..fa0f6d425 100644 --- a/package.json +++ b/package.json @@ -66,6 +66,7 @@ "@types/react": "^16.9.41", "@types/react-autosuggest": "^9.3.14", "@types/react-color": "^2.17.4", + "@types/react-datepicker": "^3.0.2", "@types/react-dom": "^16.9.8", "@types/react-grid-layout": "^0.17.1", "@types/react-measure": "^2.0.6", @@ -210,6 +211,7 @@ "react-autosuggest": "^9.4.3", "react-color": "^2.18.1", "react-compound-slider": "^2.5.0", + "react-datepicker": "^3.0.0", "react-dom": "^16.12.0", "react-grid-layout": "^0.18.3", "react-image-lightbox-with-rotate": "^5.1.1", diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index 593962e73..0a2c538c2 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -16,7 +16,7 @@ import { EditableView } from "../EditableView"; import { FieldView, FieldViewProps } from "../nodes/FieldView"; import "./CollectionSchemaView.scss"; import { CollectionView, Flyout } from "./CollectionView"; -import { NumCast, StrCast, BoolCast, FieldValue, Cast } from "../../../fields/Types"; +import { NumCast, StrCast, BoolCast, FieldValue, Cast, DateCast } from "../../../fields/Types"; import { Docs } from "../../documents/Documents"; import { library } from '@fortawesome/fontawesome-svg-core'; import { faExpand } from '@fortawesome/free-solid-svg-icons'; @@ -32,6 +32,8 @@ import { DocumentIconContainer } from "../nodes/DocumentIcon"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView"; import ReactDOM from "react-dom"; +import DatePicker from "react-datepicker"; +import "react-datepicker/dist/react-datepicker.css"; const path = require('path'); library.add(faExpand); @@ -225,6 +227,9 @@ export class CollectionSchemaCell extends React.Component { if (type === "list") { contents = typeof field === "object" ? doc ? StrCast(field) === "" ? "--" : StrCast(field) : `--${typeof field}--` : `--${typeof field}--`; } + if (type === "date") { + contents = typeof field === "object" ? doc ? StrCast(field) === "" ? "--" : StrCast(field) : `--${typeof field}--` : `--${typeof field}--`; + } let className = "collectionSchemaView-cellWrapper"; @@ -340,6 +345,48 @@ export class CollectionSchemaStringCell extends CollectionSchemaCell { } } +@observer +export class CollectionSchemaDateCell extends CollectionSchemaCell { + private prop: FieldViewProps = { + Document: this.props.rowProps.original, + DataDoc: this.props.rowProps.original, + LibraryPath: [], + dropAction: "alias", + bringToFront: emptyFunction, + rootSelected: returnFalse, + fieldKey: this.props.rowProps.column.id as string, + ContainingCollectionView: this.props.CollectionView, + ContainingCollectionDoc: this.props.CollectionView && this.props.CollectionView.props.Document, + isSelected: returnFalse, + select: emptyFunction, + renderDepth: this.props.renderDepth + 1, + ScreenToLocalTransform: Transform.Identity, + focus: emptyFunction, + active: returnFalse, + whenActiveChanged: emptyFunction, + PanelHeight: returnZero, + PanelWidth: returnZero, + NativeHeight: returnZero, + NativeWidth: returnZero, + addDocTab: this.props.addDocTab, + pinToPres: this.props.pinToPres, + ContentScaling: returnOne, + docFilters: returnEmptyFilter + }; + @observable private _field = this.prop.Document[this.prop.fieldKey]; + + handleChange = (date: any) => { + this.prop.Document[this.prop.fieldKey] = date; + } + + render() { + return ; + } +} + @observer export class CollectionSchemaDocCell extends CollectionSchemaCell { diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index 80c265ba6..fc7c2400d 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -2,7 +2,7 @@ import React = require("react"); import { action, observable } from "mobx"; import { observer } from "mobx-react"; import "./CollectionSchemaView.scss"; -import { faPlus, faFont, faHashtag, faAlignJustify, faCheckSquare, faToggleOn, faSortAmountDown, faSortAmountUp, faTimes, faImage, faListUl } from '@fortawesome/free-solid-svg-icons'; +import { faPlus, faFont, faHashtag, faAlignJustify, faCheckSquare, faToggleOn, faSortAmountDown, faSortAmountUp, faTimes, faImage, faListUl, faCalendar } from '@fortawesome/free-solid-svg-icons'; import { library, IconProp } from "@fortawesome/fontawesome-svg-core"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { ColumnType } from "./CollectionSchemaView"; @@ -13,7 +13,7 @@ const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; -library.add(faPlus, faFont, faHashtag, faAlignJustify, faCheckSquare, faToggleOn, faFile as any, faSortAmountDown, faSortAmountUp, faTimes, faImage, faListUl); +library.add(faPlus, faFont, faHashtag, faAlignJustify, faCheckSquare, faToggleOn, faFile as any, faSortAmountDown, faSortAmountUp, faTimes, faImage, faListUl, faCalendar); export interface HeaderProps { keyValue: SchemaHeaderField; @@ -34,7 +34,8 @@ export class CollectionSchemaHeader extends React.Component { render() { const icon: IconProp = this.props.keyType === ColumnType.Number ? "hashtag" : this.props.keyType === ColumnType.String ? "font" : this.props.keyType === ColumnType.Boolean ? "check-square" : this.props.keyType === ColumnType.Doc ? "file" : - this.props.keyType === ColumnType.Image ? "image" : this.props.keyType === ColumnType.List ? "list-ul" : "align-justify"; + this.props.keyType === ColumnType.Image ? "image" : this.props.keyType === ColumnType.List ? "list-ul" : this.props.keyType === ColumnType.Date ? "calendar" : + "align-justify"; return (
Image
+
this.changeColumnType(ColumnType.Date)}> + + Date +
); diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index bfd5fa96f..7e8455149 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -37,7 +37,8 @@ export enum ColumnType { Boolean, Doc, Image, - List + List, + Date } // this map should be used for keys that should have a const type of value const columnTypes: Map = new Map([ @@ -225,6 +226,11 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { Image
; + const dateType =
this.changeColumnType(ColumnType.Date, col)}> + + Date +
; + const allColumnTypes =
{anyType} @@ -234,11 +240,13 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { {listType} {docType} {imageType} + {dateType}
; const justColType = type === ColumnType.Any ? anyType : type === ColumnType.Number ? numType : type === ColumnType.String ? textType : type === ColumnType.Boolean ? boolType : - type === ColumnType.List ? listType : type === ColumnType.Doc ? docType : imageType; + type === ColumnType.List ? listType : type === ColumnType.Doc ? docType : + type === ColumnType.Date ? dateType : imageType; return (
diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index 176091661..eb0d234c0 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -19,7 +19,7 @@ import { undoBatch } from "../../util/UndoManager"; import { COLLECTION_BORDER_WIDTH } from '../../views/globalCssVariables.scss'; import { ContextMenu } from "../ContextMenu"; import '../DocumentDecorations.scss'; -import { CellProps, CollectionSchemaCell, CollectionSchemaCheckboxCell, CollectionSchemaDocCell, CollectionSchemaNumberCell, CollectionSchemaStringCell, CollectionSchemaImageCell, CollectionSchemaListCell } from "./CollectionSchemaCells"; +import { CellProps, CollectionSchemaCell, CollectionSchemaCheckboxCell, CollectionSchemaDocCell, CollectionSchemaNumberCell, CollectionSchemaStringCell, CollectionSchemaImageCell, CollectionSchemaListCell, CollectionSchemaDateCell } from "./CollectionSchemaCells"; import { CollectionSchemaAddColumnHeader, KeysDropdown } from "./CollectionSchemaHeaders"; import { MovableColumn, MovableRow } from "./CollectionSchemaMovableTableHOC"; import "./CollectionSchemaView.scss"; @@ -36,7 +36,8 @@ enum ColumnType { Boolean, Doc, Image, - List + List, + Date } // this map should be used for keys that should have a const type of value @@ -195,7 +196,8 @@ export class SchemaTable extends React.Component { const icon: IconProp = this.getColumnType(col) === ColumnType.Number ? "hashtag" : this.getColumnType(col) === ColumnType.String ? "font" : this.getColumnType(col) === ColumnType.Boolean ? "check-square" : this.getColumnType(col) === ColumnType.Doc ? "file" : - this.getColumnType(col) === ColumnType.Image ? "image" : this.getColumnType(col) === ColumnType.List ? "list-ul" : "align-justify"; + this.getColumnType(col) === ColumnType.Image ? "image" : this.getColumnType(col) === ColumnType.List ? "list-ul" : + this.getColumnType(col) === ColumnType.Date ? "calendar" : "align-justify"; const headerText = this._showTitleDropdown ? keysDropdown :
{ if (colType === ColumnType.Doc) return ; if (colType === ColumnType.Image) return ; if (colType === ColumnType.List) return ; + if (colType === ColumnType.Date) return ; return ; }, minWidth: 200, -- cgit v1.2.3-70-g09d2 From 3764d9a1fbac63452ce9da8fdabfa83c49f8004d Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sun, 28 Jun 2020 12:03:06 -0500 Subject: tweaks to date picker --- src/client/views/collections/CollectionSchemaCells.tsx | 9 +++++++-- src/client/views/collections/CollectionSchemaView.scss | 10 +++++----- src/fields/DateField.ts | 4 ++++ 3 files changed, 16 insertions(+), 7 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index 0a2c538c2..cdcc67294 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -34,6 +34,7 @@ import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView" import ReactDOM from "react-dom"; import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; +import { DateField } from "../../../fields/DateField"; const path = require('path'); library.add(faExpand); @@ -374,15 +375,19 @@ export class CollectionSchemaDateCell extends CollectionSchemaCell { docFilters: returnEmptyFilter }; @observable private _field = this.prop.Document[this.prop.fieldKey]; + @observable private _date = new Date(); + @action handleChange = (date: any) => { + this._date = date; this.prop.Document[this.prop.fieldKey] = date; } render() { return this.handleChange(date)} + onChange={date => this.handleChange(date)} />; } } diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 2926a8f6f..fa1f01448 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -62,14 +62,14 @@ width: calc(100% - 52px); margin-left: 50px; - z-index: 10000; + z-index: 100; overflow-y: visible; &.-header { font-size: 12px; height: 30px; box-shadow: none; - z-index: 10000; + z-index: 100; overflow-y: visible; } @@ -180,7 +180,7 @@ .collectionSchemaView-header { height: 100%; color: gray; - z-index: 10000; + z-index: 100; overflow-y: visible; display: flex; justify-content: space-between; @@ -188,10 +188,10 @@ .collectionSchema-header-menu { height: 100%; - z-index: 10000; + z-index: 100; .collectionSchema-header-toggler { - z-index: 10000; + z-index: 100; width: 100%; height: 100%; padding: 4px; diff --git a/src/fields/DateField.ts b/src/fields/DateField.ts index a925148c2..bee62663e 100644 --- a/src/fields/DateField.ts +++ b/src/fields/DateField.ts @@ -29,6 +29,10 @@ export class DateField extends ObjectField { [ToString]() { return this.date.toISOString(); } + + getDate() { + return this.date; + } } Scripting.addGlobal(function d(...dateArgs: any[]) { -- cgit v1.2.3-70-g09d2 From d118a988d5233a282cea4f878ee4a569c2d413fc Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sun, 28 Jun 2020 13:19:34 -0500 Subject: slight modification to date --- src/client/views/collections/CollectionSchemaCells.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index cdcc67294..0026ab927 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -380,14 +380,17 @@ export class CollectionSchemaDateCell extends CollectionSchemaCell { @action handleChange = (date: any) => { this._date = date; - this.prop.Document[this.prop.fieldKey] = date; + this.prop.Document[this.prop.fieldKey] = DateCast(date); + this._field = DateCast(date); } render() { return this.handleChange(date)} onChange={date => this.handleChange(date)} + showTimeSelect + dateFormat="Pp" />; } } -- cgit v1.2.3-70-g09d2 From 85311e4096a3e3842d0f8a9f39e7436401455aa3 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Sun, 28 Jun 2020 16:52:17 -0400 Subject: fixed drop down menus in schema collection view menu --- package-lock.json | 44 +++------ .../views/collections/CollectionSchemaCells.tsx | 4 - .../views/collections/CollectionSchemaView.scss | 38 ++++---- .../views/collections/CollectionSchemaView.tsx | 108 ++++----------------- 4 files changed, 52 insertions(+), 142 deletions(-) (limited to 'src/client/views') diff --git a/package-lock.json b/package-lock.json index 6c364530b..735cff1a6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2946,8 +2946,7 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true, - "optional": true + "bundled": true }, "aproba": { "version": "1.2.0", @@ -2965,13 +2964,11 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true, - "optional": true + "bundled": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2984,18 +2981,15 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "concat-map": { "version": "0.0.1", - "bundled": true, - "optional": true + "bundled": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "core-util-is": { "version": "1.0.2", @@ -3098,8 +3092,7 @@ }, "inherits": { "version": "2.0.4", - "bundled": true, - "optional": true + "bundled": true }, "ini": { "version": "1.3.5", @@ -3109,7 +3102,6 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3122,20 +3114,17 @@ "minimatch": { "version": "3.0.4", "bundled": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "1.2.5", - "bundled": true, - "optional": true + "bundled": true }, "minipass": { "version": "2.9.0", "bundled": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3152,7 +3141,6 @@ "mkdirp": { "version": "0.5.3", "bundled": true, - "optional": true, "requires": { "minimist": "^1.2.5" } @@ -3208,8 +3196,7 @@ }, "npm-normalize-package-bin": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "npm-packlist": { "version": "1.4.8", @@ -3234,8 +3221,7 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "object-assign": { "version": "4.1.1", @@ -3245,7 +3231,6 @@ "once": { "version": "1.4.0", "bundled": true, - "optional": true, "requires": { "wrappy": "1" } @@ -3314,8 +3299,7 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true, - "optional": true + "bundled": true }, "safer-buffer": { "version": "2.1.2", @@ -3345,7 +3329,6 @@ "string-width": { "version": "1.0.2", "bundled": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3363,7 +3346,6 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3402,13 +3384,11 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true, - "optional": true + "bundled": true }, "yallist": { "version": "3.1.1", - "bundled": true, - "optional": true + "bundled": true } } } diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index 0026ab927..034ba27cf 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -26,15 +26,11 @@ import { SnappingManager } from "../../util/SnappingManager"; import { ComputedField } from "../../../fields/ScriptField"; import { ImageField } from "../../../fields/URLField"; import { List } from "../../../fields/List"; -import { LinkBox } from "../nodes/LinkBox"; import { OverlayView } from "../OverlayView"; import { DocumentIconContainer } from "../nodes/DocumentIcon"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView"; -import ReactDOM from "react-dom"; import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; -import { DateField } from "../../../fields/DateField"; const path = require('path'); library.add(faExpand); diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index fa1f01448..2330fcc8a 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -177,6 +177,26 @@ } +.collectionSchema-header-menu { + height: 100%; + z-index: 100; + position: absolute; + background:white; + + .collectionSchema-header-toggler { + z-index: 100; + width: 100%; + height: 100%; + padding: 4px; + letter-spacing: 2px; + text-transform: uppercase; + + svg { + margin-right: 4px; + } + } +} + .collectionSchemaView-header { height: 100%; color: gray; @@ -185,24 +205,6 @@ display: flex; justify-content: space-between; flex-wrap: wrap; - - .collectionSchema-header-menu { - height: 100%; - z-index: 100; - - .collectionSchema-header-toggler { - z-index: 100; - width: 100%; - height: 100%; - padding: 4px; - letter-spacing: 2px; - text-transform: uppercase; - - svg { - margin-right: 4px; - } - } - } } button.add-column { diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 7e8455149..857d8cb50 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -11,7 +11,6 @@ import { List } from "../../../fields/List"; import { listSpec } from "../../../fields/Schema"; import { SchemaHeaderField, PastelSchemaPalette } from "../../../fields/SchemaHeaderField"; import { Cast, NumCast, StrCast } from "../../../fields/Types"; -import { Docs, DocumentOptions } from "../../documents/Documents"; import { Transform } from "../../util/Transform"; import { undoBatch } from "../../util/UndoManager"; import { COLLECTION_BORDER_WIDTH } from '../../views/globalCssVariables.scss'; @@ -23,8 +22,8 @@ import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView" import { setupMoveUpEvents, emptyFunction, returnZero, returnOne, returnFalse } from "../../../Utils"; import { SnappingManager } from "../../util/SnappingManager"; import Measure from "react-measure"; -import { SchemaTable } from "./SchemaTable"; -import { civicinfo } from "googleapis/build/src/apis/civicinfo"; +import { SchemaTable } from "./SchemaTable" +import { TraceMobx } from "../../../fields/util"; library.add(faCog, faPlus, faSortUp, faSortDown); library.add(faTable); @@ -185,7 +184,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { this._openTypes = bool; } - @action renderTypes = (col: any) => { if (columnTypes.get(col.heading)) return (null); @@ -353,29 +351,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { />; } - @action - renderContent = (col: any) => { - return ( -
-
- - {this.renderKeysDropDown(col)} -
- {false ? <> : - <> - {this.renderTypes(col)} - {this.renderSorting(col)} - {this.renderColors(col)} -
- -
- - } -
- ); - } - @undoBatch @action deleteColumn = (key: string) => { @@ -410,45 +385,22 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { //this.menuCoordinates[1] -= e.screenY / scale; } - @action renderMenu() { - const scale = this.props.ScreenToLocalTransform().Scale; - return ( -
this.props.active(true) && e.stopPropagation()} - onPointerDown={e => this.onHeaderClick(e)} - style={{ - position: "absolute", background: "white", - transform: `translate(${this.menuCoordinates[0] * scale}px, ${this.menuCoordinates[1] / scale}px)` - }}> - { - const dim = this.props.ScreenToLocalTransform().inverse().transformDirection(r.offset.width, r.offset.height); - this._menuWidth = dim[0]; this._menuHeight = dim[1]; - })}> - {({ measureRef }) =>
-
-
- - {this.renderKeysDropDown(this._col)} -
- {false ? <> : - <> - {this.renderTypes(this._col)} - {this.renderSorting(this._col)} - {this.renderColors(this._col)} -
- -
- - } -
- -
} - + @computed get renderMenuContent() { + TraceMobx(); + return
+
+ + {this.renderKeysDropDown(this._col)}
- ); + {this.renderTypes(this._col)} + {this.renderSorting(this._col)} + {this.renderColors(this._col)} +
+ +
+
; } - private createTarget = (ele: HTMLDivElement) => { this._previewCont = ele; super.CreateDropTarget(ele); @@ -623,38 +575,18 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { } render() { + TraceMobx(); + const menuContent = this.renderMenuContent; const scale = this.props.ScreenToLocalTransform().Scale; const menu =
this.props.active(true) && e.stopPropagation()} onPointerDown={e => this.onHeaderClick(e)} - style={{ - position: "absolute", background: "white", - transform: `translate(${this.menuCoordinates[0] * scale}px, ${this.menuCoordinates[1] / scale}px)` - }}> + style={{ transform: `translate(${this.menuCoordinates[0] * scale}px, ${this.menuCoordinates[1] / scale}px)` }}> { const dim = this.props.ScreenToLocalTransform().inverse().transformDirection(r.offset.width, r.offset.height); this._menuWidth = dim[0]; this._menuHeight = dim[1]; })}> - {({ measureRef }) =>
-
-
- - {this.renderKeysDropDown(this._col)} -
- {false ? <> : - <> - {this.renderTypes(this._col)} - {this.renderSorting(this._col)} - {this.renderColors(this._col)} -
- -
- - } -
- -
} + {({ measureRef }) =>
{menuContent}
}
; -- cgit v1.2.3-70-g09d2 From 9f7d5a2fd3fca855ed51f4f4178966106ccdbefe Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Sun, 28 Jun 2020 23:54:26 -0500 Subject: adjustments to date --- .../views/collections/CollectionSchemaCells.tsx | 40 ++++------------------ .../views/collections/CollectionSchemaView.tsx | 2 +- 2 files changed, 8 insertions(+), 34 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index 034ba27cf..a0c5fcde4 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -31,6 +31,7 @@ import { DocumentIconContainer } from "../nodes/DocumentIcon"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; +import { DateField } from "../../../fields/DateField"; const path = require('path'); library.add(faExpand); @@ -344,49 +345,22 @@ export class CollectionSchemaStringCell extends CollectionSchemaCell { @observer export class CollectionSchemaDateCell extends CollectionSchemaCell { - private prop: FieldViewProps = { - Document: this.props.rowProps.original, - DataDoc: this.props.rowProps.original, - LibraryPath: [], - dropAction: "alias", - bringToFront: emptyFunction, - rootSelected: returnFalse, - fieldKey: this.props.rowProps.column.id as string, - ContainingCollectionView: this.props.CollectionView, - ContainingCollectionDoc: this.props.CollectionView && this.props.CollectionView.props.Document, - isSelected: returnFalse, - select: emptyFunction, - renderDepth: this.props.renderDepth + 1, - ScreenToLocalTransform: Transform.Identity, - focus: emptyFunction, - active: returnFalse, - whenActiveChanged: emptyFunction, - PanelHeight: returnZero, - PanelWidth: returnZero, - NativeHeight: returnZero, - NativeWidth: returnZero, - addDocTab: this.props.addDocTab, - pinToPres: this.props.pinToPres, - ContentScaling: returnOne, - docFilters: returnEmptyFilter - }; - @observable private _field = this.prop.Document[this.prop.fieldKey]; - @observable private _date = new Date(); + @observable private _date: Date = this.props.rowProps.original[this.props.rowProps.column.id as string] instanceof DateField ? DateCast(this.props.rowProps.original[this.props.rowProps.column.id as string]).date : new Date(); @action handleChange = (date: any) => { this._date = date; - this.prop.Document[this.prop.fieldKey] = DateCast(date); - this._field = DateCast(date); + const script = CompileScript(date.toString(), { requiredType: "Date", addReturn: true, params: { this: Doc.name } }); + if (script.compiled) { + this.applyToDoc(this._document, this.props.row, this.props.col, script.run); + } } render() { return this.handleChange(date)} onChange={date => this.handleChange(date)} - showTimeSelect - dateFormat="Pp" />; } } diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 857d8cb50..efbe97a8e 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -22,7 +22,7 @@ import { ContentFittingDocumentView } from "../nodes/ContentFittingDocumentView" import { setupMoveUpEvents, emptyFunction, returnZero, returnOne, returnFalse } from "../../../Utils"; import { SnappingManager } from "../../util/SnappingManager"; import Measure from "react-measure"; -import { SchemaTable } from "./SchemaTable" +import { SchemaTable } from "./SchemaTable"; import { TraceMobx } from "../../../fields/util"; library.add(faCog, faPlus, faSortUp, faSortDown); -- cgit v1.2.3-70-g09d2 From bc075fbd50200169e8d04b2385516272f24b0a29 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 29 Jun 2020 09:48:20 -0500 Subject: more merge fixes --- src/client/views/collections/CollectionSchemaView.tsx | 4 ++-- src/client/views/collections/SchemaTable.tsx | 12 +++++++----- 2 files changed, 9 insertions(+), 7 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 7e8455149..dc4e75443 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -78,10 +78,10 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { } @computed get columns() { - return Cast(this.props.Document.schemaColumns, listSpec(SchemaHeaderField), []); + return Cast(this.props.Document._schemaHeaders, listSpec(SchemaHeaderField), []); } set columns(columns: SchemaHeaderField[]) { - this.props.Document.schemaColumns = new List(columns); + this.props.Document._schemaHeaders = new List(columns); } get documentKeys() { diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index eb0d234c0..5152b16b0 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -294,10 +294,12 @@ export class SchemaTable extends React.Component { constructor(props: SchemaTableProps) { super(props); // convert old schema columns (list of strings) into new schema columns (list of schema header fields) - const oldSchemaColumns = Cast(this.props.Document.schemaColumns, listSpec("string"), []); - if (oldSchemaColumns && oldSchemaColumns.length && typeof oldSchemaColumns[0] !== "object") { - const newSchemaColumns = oldSchemaColumns.map(i => typeof i === "string" ? new SchemaHeaderField(i, "#f1efeb") : i); - this.props.Document.schemaColumns = new List(newSchemaColumns); + const oldSchemaHeaders = Cast(this.props.Document._schemaHeaders, listSpec("string"), []); + if (oldSchemaHeaders?.length && typeof oldSchemaHeaders[0] !== "object") { + const newSchemaHeaders = oldSchemaHeaders.map(i => typeof i === "string" ? new SchemaHeaderField(i, "#f1efeb") : i); + this.props.Document._schemaHeaders = new List(newSchemaHeaders); + } else if (this.props.Document._schemaHeaders === undefined) { + this.props.Document._schemaHeaders = new List([new SchemaHeaderField("title", "#f1efeb")]); } } @@ -539,7 +541,7 @@ export class SchemaTable extends React.Component { if(col === undefined) { return (doc as any)[key][row + ${row}]; } - return (doc as any)[key][row + ${row}][(doc as any).schemaColumns[col + ${col}].heading]; + return (doc as any)[key][row + ${row}][(doc as any)._schemaHeaders[col + ${col}].heading]; } return ${script}`; const compiled = CompileScript(script, { params: { this: Doc.name }, capturedVariables: { doc: this.props.Document, key: this.props.fieldKey }, typecheck: false, transformer: this.createTransformer(row, col) }); -- cgit v1.2.3-70-g09d2 From d6828dba3dc1fd809d0e1449e8230656bb7c5360 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 29 Jun 2020 10:28:31 -0500 Subject: UI fix and little restructure --- .../views/collections/CollectionSchemaHeaders.tsx | 10 +-- .../views/collections/CollectionSchemaView.scss | 2 +- .../views/collections/CollectionSchemaView.tsx | 99 ++++------------------ .../views/collections/CollectionViewChromes.scss | 1 + src/client/views/collections/SchemaTable.tsx | 2 +- 5 files changed, 26 insertions(+), 88 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index fc7c2400d..efff4db98 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -365,7 +365,7 @@ export class KeysDropdown extends React.Component { const options = keyOptions.map(key => { return
e.stopPropagation()} onClick={() => { this.onSelect(key); this.setSearchTerm(""); }}>{key}
; }); @@ -374,7 +374,7 @@ export class KeysDropdown extends React.Component { if (!exactFound && this._searchTerm !== "" && this.props.canAddNew) { options.push(
{ this.onSelect(this._searchTerm); this.setSearchTerm(""); }}> Create "{this._searchTerm}" key
); @@ -385,8 +385,8 @@ export class KeysDropdown extends React.Component { render() { return ( -
- + this.onChange(e.target.value)} onClick={(e) => { @@ -395,7 +395,7 @@ export class KeysDropdown extends React.Component { }} onFocus={this.onFocus} onBlur={this.onBlur}>
{this.renderOptions()} diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 2330fcc8a..5226a60f1 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -500,7 +500,7 @@ button.add-column { } .collectionSchemaView-toolbar { - z-index: 1000; + z-index: 100; } .collectionSchemaView-toolbar { diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index dc4e75443..c75012595 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -24,7 +24,7 @@ import { setupMoveUpEvents, emptyFunction, returnZero, returnOne, returnFalse } import { SnappingManager } from "../../util/SnappingManager"; import Measure from "react-measure"; import { SchemaTable } from "./SchemaTable"; -import { civicinfo } from "googleapis/build/src/apis/civicinfo"; +import { TraceMobx } from "../../../fields/util"; library.add(faCog, faPlus, faSortUp, faSortDown); library.add(faTable); @@ -185,7 +185,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { this._openTypes = bool; } - @action renderTypes = (col: any) => { if (columnTypes.get(col.heading)) return (null); @@ -353,29 +352,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { />; } - @action - renderContent = (col: any) => { - return ( -
-
- - {this.renderKeysDropDown(col)} -
- {false ? <> : - <> - {this.renderTypes(col)} - {this.renderSorting(col)} - {this.renderColors(col)} -
- -
- - } -
- ); - } - @undoBatch @action deleteColumn = (key: string) => { @@ -410,43 +386,21 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { //this.menuCoordinates[1] -= e.screenY / scale; } - @action renderMenu() { - const scale = this.props.ScreenToLocalTransform().Scale; - return ( -
this.props.active(true) && e.stopPropagation()} - onPointerDown={e => this.onHeaderClick(e)} - style={{ - position: "absolute", background: "white", - transform: `translate(${this.menuCoordinates[0] * scale}px, ${this.menuCoordinates[1] / scale}px)` - }}> - { - const dim = this.props.ScreenToLocalTransform().inverse().transformDirection(r.offset.width, r.offset.height); - this._menuWidth = dim[0]; this._menuHeight = dim[1]; - })}> - {({ measureRef }) =>
-
-
- - {this.renderKeysDropDown(this._col)} -
- {false ? <> : - <> - {this.renderTypes(this._col)} - {this.renderSorting(this._col)} - {this.renderColors(this._col)} -
- -
- - } -
- -
} - + @computed get renderMenuContent() { + TraceMobx(); + return
+
+ + {this.renderKeysDropDown(this._col)}
- ); + {this.renderTypes(this._col)} + {this.renderSorting(this._col)} + {this.renderColors(this._col)} +
+ +
+
; } private createTarget = (ele: HTMLDivElement) => { @@ -623,6 +577,8 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { } render() { + TraceMobx(); + const menuContent = this.renderMenuContent; const scale = this.props.ScreenToLocalTransform().Scale; const menu =
this.props.active(true) && e.stopPropagation()} @@ -635,26 +591,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { const dim = this.props.ScreenToLocalTransform().inverse().transformDirection(r.offset.width, r.offset.height); this._menuWidth = dim[0]; this._menuHeight = dim[1]; })}> - {({ measureRef }) =>
-
-
- - {this.renderKeysDropDown(this._col)} -
- {false ? <> : - <> - {this.renderTypes(this._col)} - {this.renderSorting(this._col)} - {this.renderColors(this._col)} -
- -
- - } -
- -
} + {({ measureRef }) =>
{menuContent}
}
; diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index 2885ac763..822e15aed 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -16,6 +16,7 @@ height: 32px; border-bottom: .5px solid rgb(180, 180, 180); overflow: visible; + z-index: 9001; .collectionViewBaseChrome { display: flex; diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index 5152b16b0..9e3b4d961 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -221,7 +221,7 @@ export class SchemaTable extends React.Component { }}>
+ style={{ display: "inline", zIndex: 1000 }}> {keysDropdown}
this.changeSorting(col)} -- cgit v1.2.3-70-g09d2 From e28fc1fcb0f23d47dfc23dd9e58090b28201289c Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 29 Jun 2020 11:26:52 -0500 Subject: fixed date type --- .../views/collections/CollectionSchemaCells.tsx | 23 ++++++++++++++-------- src/fields/util.ts | 2 +- 2 files changed, 16 insertions(+), 9 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index a0c5fcde4..5d5f1df57 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -345,15 +345,23 @@ export class CollectionSchemaStringCell extends CollectionSchemaCell { @observer export class CollectionSchemaDateCell extends CollectionSchemaCell { - @observable private _date: Date = this.props.rowProps.original[this.props.rowProps.column.id as string] instanceof DateField ? DateCast(this.props.rowProps.original[this.props.rowProps.column.id as string]).date : new Date(); + @observable private _date: Date = this.props.rowProps.original[this.props.rowProps.column.id as string] instanceof DateField ? DateCast(this.props.rowProps.original[this.props.rowProps.column.id as string]).date : + this.props.rowProps.original[this.props.rowProps.column.id as string] instanceof Date ? this.props.rowProps.original[this.props.rowProps.column.id as string] : new Date(); @action handleChange = (date: any) => { + console.log(date); this._date = date; - const script = CompileScript(date.toString(), { requiredType: "Date", addReturn: true, params: { this: Doc.name } }); - if (script.compiled) { - this.applyToDoc(this._document, this.props.row, this.props.col, script.run); - } + // const script = CompileScript(date.toString(), { requiredType: "Date", addReturn: true, params: { this: Doc.name } }); + // if (script.compiled) { + // console.log("scripting"); + // this.applyToDoc(this._document, this.props.row, this.props.col, script.run); + // } else { + console.log(DateCast(date)); + // ^ DateCast is always undefined for some reason, but that is what the field should be set to + this._document[this.props.rowProps.column.id as string] = date as Date; + console.log(this._document[this.props.rowProps.column.id as string]); + //} } render() { @@ -420,8 +428,7 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { console.log(results.result); this._doc = results.result; - this.prop.Document[this.prop.fieldKey] = results.result; - this.prop.Document[this.prop.fieldKey] = results.result; + this._document[this.prop.fieldKey] = results.result; this._docTitle = this._doc?.title; return true; @@ -438,7 +445,7 @@ export class CollectionSchemaDocCell extends CollectionSchemaCell { onOpenClick = () => { this._preview = false; if (this._doc) { - this.prop.addDocTab(this._doc, "onRight"); + this.props.addDocTab(this._doc, "onRight"); return true; } return false; diff --git a/src/fields/util.ts b/src/fields/util.ts index 2869ebed1..2dc21c987 100644 --- a/src/fields/util.ts +++ b/src/fields/util.ts @@ -78,7 +78,7 @@ const _setterImpl = action(function (target: any, prop: string | symbol | number } else { target.__fields[prop] = value; } - if (typeof value === "object" && !(value instanceof ObjectField)) debugger; + //if (typeof value === "object" && !(value instanceof ObjectField)) debugger; if (writeToServer) { if (value === undefined) target[Update]({ '$unset': { ["fields." + prop]: "" } }); else target[Update]({ '$set': { ["fields." + prop]: value instanceof ObjectField ? SerializationHelper.Serialize(value) : (value === undefined ? null : value) } }); -- cgit v1.2.3-70-g09d2 From f78d9d038c3f08615784c6b09b6d925838c8113c Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 29 Jun 2020 12:09:51 -0500 Subject: menu positioning getting better --- .../views/collections/CollectionSchemaView.tsx | 23 ++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index c75012595..23e8a4d49 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -77,6 +77,8 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { return this.props.ScreenToLocalTransform().transformPoint(x, y); } + @observable scale = this.props.ScreenToLocalTransform().Scale; + @computed get columns() { return Cast(this.props.Document._schemaHeaders, listSpec(SchemaHeaderField), []); } @@ -576,16 +578,29 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { this.columns = columns; } + onZoomMenu = (e: React.WheelEvent) => { + this.props.active(true) && e.stopPropagation(); + if (this.menuCoordinates[0] > e.screenX) { + this.menuCoordinates[0] -= e.screenX //* this.scale; + } else { + this.menuCoordinates[0] += e.screenX //* this.scale; + } + if (this.menuCoordinates[1] > e.screenY) { + this.menuCoordinates[1] -= e.screenY //* this.scale; + } else { + this.menuCoordinates[1] += e.screenY //* this.scale; + } + } + render() { TraceMobx(); const menuContent = this.renderMenuContent; - const scale = this.props.ScreenToLocalTransform().Scale; const menu =
this.props.active(true) && e.stopPropagation()} + onWheel={e => this.onZoomMenu(e)} onPointerDown={e => this.onHeaderClick(e)} style={{ - position: "absolute", background: "white", - transform: `translate(${this.menuCoordinates[0] * scale}px, ${this.menuCoordinates[1] / scale}px)` + position: "fixed", background: "white", + transform: `translate(${this.menuCoordinates[0] / this.scale}px, ${this.menuCoordinates[1] / this.scale}px)` }}> { const dim = this.props.ScreenToLocalTransform().inverse().transformDirection(r.offset.width, r.offset.height); -- cgit v1.2.3-70-g09d2 From 991376428130bd80e1e80b5cca52477e45caf679 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Tue, 30 Jun 2020 02:34:08 +0800 Subject: css comment fixes + commenting --- src/client/util/CurrentUserUtils.ts | 54 ++- src/client/util/SettingsManager.scss | 10 - src/client/views/AntimodeMenu.scss | 16 - src/client/views/nodes/AudioBox.scss | 8 +- src/client/views/nodes/PDFBox.scss | 188 +++----- src/client/views/nodes/PresBox.scss | 47 +- .../views/presentationview/PresElementBox.scss | 78 +--- src/mobile/AudioUpload.tsx | 84 ++-- src/mobile/ImageUpload.tsx | 61 +-- src/mobile/MobileHome.scss | 101 ----- src/mobile/MobileInterface.scss | 448 ++++++++++++++++++- src/mobile/MobileInterface.tsx | 116 +++-- src/mobile/MobileMenu.scss | 475 --------------------- 13 files changed, 665 insertions(+), 1021 deletions(-) delete mode 100644 src/mobile/MobileHome.scss (limited to 'src/client/views') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index e402718bf..8e53c7a3c 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -55,9 +55,20 @@ export class CurrentUserUtils { removeDropProperties: new List(["dropAction"]), title: "query view", icon: "question-circle" }); } - + // Prototype for mobile button (not sure if 'Advanced Item Prototypes' is ideal location) if (doc["template-mobile-button"] === undefined) { - const queryTemplate = this.mobileButton({ title: "NEW MOBILE BUTTON", onClick: undefined, _backgroundColor: "lightgrey" }, [this.ficon({ ignoreClick: true, icon: "mobile", backgroundColor: "rgba(0,0,0,0)" }), this.mobileTextContainer({}, [this.mobileButtonText({}, "NEW MOBILE BUTTON"), this.mobileButtonInfo({}, "You can customize this button and make it your own.")])]); + const queryTemplate = this.mobileButton({ + title: "NEW MOBILE BUTTON", + onClick: undefined, + _backgroundColor: "lightgrey" + }, + [this.ficon({ + ignoreClick: true, + icon: "mobile", + backgroundColor: "rgba(0,0,0,0)" + }), + this.mobileTextContainer({}, + [this.mobileButtonText({}, "NEW MOBILE BUTTON"), this.mobileButtonInfo({}, "You can customize this button and make it your own.")])]); doc["template-mobile-button"] = CurrentUserUtils.ficon({ onDragStart: ScriptField.MakeFunction('getCopy(this.dragFactory, true)'), dragFactory: new PrefetchProxy(queryTemplate) as any as Doc, @@ -457,6 +468,7 @@ export class CurrentUserUtils { return doc.myItemCreators as Doc; } + // Sets up mobile menu if it is undefined creates a new one, otherwise returns existing menu static setupActiveMobileMenu(doc: Doc) { if (doc.activeMobileMenu === undefined) { console.log("undefined"); @@ -465,6 +477,7 @@ export class CurrentUserUtils { return doc.activeMobileMenu as Doc; } + // Sets up mobileMenu stacking document static setupMobileMenu() { const menu = new PrefetchProxy(Docs.Create.StackingDocument(this.setupMobileButtons(), { _width: 980, ignoreClick: true, lockedPosition: false, _chromeStatus: "disabled", title: "home", _yMargin: 100 @@ -472,15 +485,17 @@ export class CurrentUserUtils { return menu; } + // SEts up mobile buttons for inside mobile menu static setupMobileButtons(doc?: Doc, buttons?: string[]) { const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, info: string, dragFactory?: Doc }[] = [ { title: "WORKSPACES", icon: "bars", click: 'switchToMobileLibrary()', backgroundColor: "lightgrey", info: "Access your Workspaces from your mobile, and navigate through all of your documents. " }, - { title: "UPLOAD", icon: "upload", click: 'uploadImageMobile()', backgroundColor: "lightgrey", info: "Upload files from your mobile device so they can be accessed on Dash Web." }, - { title: "MOBILE UPLOAD", icon: "mobile", click: 'switchToMobileUploads()', backgroundColor: "lightgrey", info: "Access the collection of your mobile uploads." }, + { title: "UPLOAD", icon: "upload", click: 'openMobileUploads()', backgroundColor: "lightgrey", info: "Upload files from your mobile device so they can be accessed on Dash Web." }, + { title: "MOBILE UPLOAD", icon: "mobile", click: 'switchToMobileUploadCollection()', backgroundColor: "lightgrey", info: "Access the collection of your mobile uploads." }, { title: "RECORD", icon: "microphone", click: 'openMobileAudio()', backgroundColor: "lightgrey", info: "Use your phone to record, dictate and then upload audio onto Dash Web." }, - { title: "PRESENTATION", icon: "desktop", click: 'openMobilePresentation()', backgroundColor: "lightgrey", info: "Use your phone as a remote for you presentation." }, + { title: "PRESENTATION", icon: "desktop", click: 'switchToMobilePresentation()', backgroundColor: "lightgrey", info: "Use your phone as a remote for you presentation." }, { title: "SETTINGS", icon: "cog", click: 'openMobileSettings()', backgroundColor: "lightgrey", info: "Change your password, log out, or manage your account security." } ]; + // returns a list of mobile buttons return docProtoData.filter(d => !buttons || !buttons.includes(d.title)).map(data => this.mobileButton({ title: data.title, @@ -492,24 +507,27 @@ export class CurrentUserUtils { ); } + // sets up the main document for the mobile button static mobileButton = (opts: DocumentOptions, docs: Doc[]) => Docs.Create.MulticolumnDocument(docs, { ...opts, dropAction: undefined, removeDropProperties: new List(["dropAction"]), _nativeWidth: 900, _nativeHeight: 250, _width: 900, _height: 250, _yMargin: 15, borderRounding: "5px", boxShadow: "0 0", _chromeStatus: "disabled" }) as any as Doc + // sets up the text container for the information contained within the mobile button static mobileTextContainer = (opts: DocumentOptions, docs: Doc[]) => Docs.Create.MultirowDocument(docs, { ...opts, dropAction: undefined, removeDropProperties: new List(["dropAction"]), _nativeWidth: 450, _nativeHeight: 250, _width: 450, _height: 250, _yMargin: 25, backgroundColor: "rgba(0,0,0,0)", borderRounding: "0", boxShadow: "0 0", _chromeStatus: "disabled", ignoreClick: true }) as any as Doc - + // Sets up the title of the button static mobileButtonText = (opts: DocumentOptions, buttonTitle: string) => Docs.Create.TextDocument(buttonTitle, { ...opts, dropAction: undefined, title: buttonTitle, _fontSize: 37, _xMargin: 0, _yMargin: 0, ignoreClick: true, _chromeStatus: "disabled", backgroundColor: "rgba(0,0,0,0)" }) as any as Doc + // Sets up the description of the button static mobileButtonInfo = (opts: DocumentOptions, buttonInfo: string) => Docs.Create.TextDocument(buttonInfo, { ...opts, dropAction: undefined, title: "info", _fontSize: 25, _xMargin: 0, _yMargin: 0, ignoreClick: true, _chromeStatus: "disabled", backgroundColor: "rgba(0,0,0,0)", _dimMagnitude: 2, @@ -553,23 +571,6 @@ export class CurrentUserUtils { return CurrentUserUtils.setupWorkspaces(userDoc); } - static setupMobileInkingDoc(userDoc: Doc) { - return Docs.Create.FreeformDocument([], { title: "Mobile Inking", backgroundColor: "white" }); - } - - static setupMobileUploadDoc(userDoc: Doc) { - // const addButton = Docs.Create.FontIconDocument({ onDragStart: ScriptField.MakeScript('addWebToMobileUpload()'), title: "Add Web Doc to Upload Collection", icon: "plus", backgroundColor: "black" }) - const webDoc = Docs.Create.WebDocument("https://www.britannica.com/biography/Miles-Davis", { - title: "Upload Images From the Web", _chromeStatus: "enabled", lockedPosition: true - }); - const uploadDoc = Docs.Create.StackingDocument([], { - title: "Mobile Upload Collection", backgroundColor: "white", lockedPosition: true - }); - return Docs.Create.StackingDocument([webDoc, uploadDoc], { - _width: screen.width, lockedPosition: true, _chromeStatus: "disabled", title: "Upload", _autoHeight: true, _yMargin: 80, backgroundColor: "lightgray" - }); - } - // setup the Creator button which will display the creator panel. This panel will include the drag creators and the color picker. // when clicked, this panel will be displayed in the target container (ie, sidebarContainer) static async setupToolsBtnPanel(doc: Doc, sidebarContainer: Doc) { @@ -764,6 +765,7 @@ export class CurrentUserUtils { } } + // Right sidebar is where mobile uploads are contained static setupRightSidebar(doc: Doc) { if (doc.rightSidebarCollection === undefined) { doc.rightSidebarCollection = new PrefetchProxy(Docs.Create.StackingDocument([], { title: "Mobile Uploads" })); @@ -823,7 +825,7 @@ export class CurrentUserUtils { this.setupDefaultIconTemplates(doc); // creates a set of icon templates triggered by the document deoration icon this.setupDocTemplates(doc); // sets up the template menu of templates this.setupRightSidebar(doc); // sets up the right sidebar collection for mobile upload documents and sharing - this.setupActiveMobileMenu(doc); + this.setupActiveMobileMenu(doc); // sets up the current mobile menu for Dash Mobile this.setupOverlays(doc); // documents in overlay layer this.setupDockedButtons(doc); // the bottom bar of font icons this.setupDefaultPresentation(doc); // presentation that's initially triggered @@ -862,9 +864,5 @@ export class CurrentUserUtils { } } -Scripting.addGlobal(function setupMobileInkingDoc(userDoc: Doc) { return CurrentUserUtils.setupMobileInkingDoc(userDoc); }, - "initializes the Mobile inking document", "(userDoc: Doc)"); -Scripting.addGlobal(function setupMobileUploadDoc(userDoc: Doc) { return CurrentUserUtils.setupMobileUploadDoc(userDoc); }, - "initializes the Mobile upload document", "(userDoc: Doc)"); Scripting.addGlobal(function createNewWorkspace() { return MainView.Instance.createNewWorkspace(); }, "creates a new workspace when called"); diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index 0116c5294..1c2a2ce05 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -137,31 +137,21 @@ @media only screen and (max-device-width: 480px) { .settings-interface { - background-color: whitesmoke !important; - color: grey; width: 80vw; height: 400px; } .settings-interface .settings-body .settings-content input { - border-radius: 5px; - border: none; font-size: 30; - padding: 4px; - min-width: 100%; - margin: 2px 0; } .settings-interface button { width: 100%; font-size: 30px; - align-self: center; background: #b2cef8; - margin-top: 4px; } .settings-interface .settings-heading { - letter-spacing: .5em; font-size: 25; } } \ No newline at end of file diff --git a/src/client/views/AntimodeMenu.scss b/src/client/views/AntimodeMenu.scss index 17506b3dc..be21cec12 100644 --- a/src/client/views/AntimodeMenu.scss +++ b/src/client/views/AntimodeMenu.scss @@ -46,15 +46,8 @@ @media only screen and (max-device-width: 480px) { .antimodeMenu-cont { - position: absolute; - z-index: 10000; height: 100px; width: 100vw; - background: #323232; - box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); - border-radius: 0px 6px 6px 6px; - // overflow: hidden; - display: flex; &.with-rows { flex-direction: column-reverse; @@ -79,14 +72,5 @@ .antimodeMenu-button:hover { background-color: #121212; } - - .antimodeMenu-dragger { - height: 100%; - transition: width .2s; - background-image: url("https://logodix.com/logo/1020374.png"); - background-size: 90% 100%; - background-repeat: no-repeat; - background-position: left center; - } } } \ No newline at end of file diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index b5d113ca0..c959b79f5 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -186,18 +186,12 @@ .audiobox-container .audiobox-record, .audiobox-container-interactive .audiobox-record { - pointer-events: all; font-size: 3em; - width: 100%; - height: 100%; - position: relative; - pointer-events: none; } .audiobox-container .audiobox-controls .audiobox-player .audiobox-playhead, .audiobox-container .audiobox-controls .audiobox-player .audiobox-dictation, - .audiobox-container-interactive .audiobox-controls .audiobox-player .audiobox-playhead, - .audiobox-container-interactive .audiobox-controls .audiobox-player .audiobox-dictation { + .audiobox-container-interactive .audiobox-controls .audiobox-player .audiobox-playhead { width: 70px; } } \ No newline at end of file diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss index 974ddecdf..fbbd49a2f 100644 --- a/src/client/views/nodes/PDFBox.scss +++ b/src/client/views/nodes/PDFBox.scss @@ -11,18 +11,19 @@ .pdfBox-ui { position: absolute; - width: 100%; - height: 100%; - z-index: 1; - pointer-events: none; + width: 100%; + height: 100%; + z-index: 1; + pointer-events: none; - .pdfBox-pageNums { + .pdfBox-pageNums { display: flex; flex-direction: row; height: 25px; position: absolute; left: 5px; top: 5px; + .pdfBox-overlayButton-fwd, .pdfBox-overlayButton-back { background: #121721; @@ -35,29 +36,29 @@ border-radius: 3px; pointer-events: all; } - } - - .pdfBox-overlayButton { - border-bottom-left-radius: 50%; - display: flex; - justify-content: space-evenly; - align-items: center; - height: 20px; - background: none; - padding: 0; - position: absolute; - pointer-events: all; - - .pdfBox-overlayButton-arrow { - width: 0; - height: 0; - border-top: 10px solid transparent; - border-bottom: 10px solid transparent; - border-right: 15px solid #121721; - transition: all 0.5s; - } - - .pdfBox-overlayButton-iconCont { + } + + .pdfBox-overlayButton { + border-bottom-left-radius: 50%; + display: flex; + justify-content: space-evenly; + align-items: center; + height: 20px; + background: none; + padding: 0; + position: absolute; + pointer-events: all; + + .pdfBox-overlayButton-arrow { + width: 0; + height: 0; + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; + border-right: 15px solid #121721; + transition: all 0.5s; + } + + .pdfBox-overlayButton-iconCont { background: #121721; height: 20px; width: 25px; @@ -222,120 +223,60 @@ } } +// CSS adjusted for mobile devices @media only screen and (max-device-width: 480px) { .pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton, .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton { - border-bottom-left-radius: 50%; - display: flex; - justify-content: space-evenly; - align-items: center; height: 60px; - background: none; - padding: 0; - } - .pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton .pdfBox-settingsButton-iconCont, - .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton .pdfBox-settingsButton-iconCont { - background: #121721; - height: 60px; - width: 75px; - font-size: 30px; - display: flex; - justify-content: center; - align-items: center; - margin-left: -2px; - border-radius: 3px; + .pdfBox-settingsButton-iconCont { + height: 60px; + width: 75px; + font-size: 30px; + } + + .pdfBox-settingsButton-arrow { + height: 60; + border-top: 30px solid transparent; + border-bottom: 30px solid transparent; + border-right: 30px solid #121721; + } } + + .pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsFlyout, .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsFlyout { - position: absolute; - background: #323232; - box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); - right: 20px; - border-radius: 7px; - padding: 20px; - display: flex; - flex-direction: column; font-size: 30px; - transition: all 0.5s; } - .pdfBox .pdfBox-ui .pdfBox-settingsCont, - .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont { - position: absolute; - right: 0; - top: 3; - pointer-events: all; - } - .pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton .pdfBox-settingsButton-arrow, - .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton .pdfBox-settingsButton-arrow { - width: 0; - height: 60; - border-top: 30px solid transparent; - border-bottom: 30px solid transparent; - border-right: 30px solid #121721; - transition: all 0.5s; - } - - .pdfBox .pdfBox-ui .pdfBox-overlayButton .pdfBox-overlayButton-iconCont, - .pdfBox-interactive .pdfBox-ui .pdfBox-overlayButton .pdfBox-overlayButton-iconCont { - background: #121721; - height: 60px; - width: 75px; - display: flex; - font-size: 30; - position: relative; - align-items: center; - justify-content: center; - border-radius: 3px; - pointer-events: all; - } - - .pdfBox .pdfBox-ui .pdfBox-overlayButton .pdfBox-overlayButton-arrow, - .pdfBox-interactive .pdfBox-ui .pdfBox-overlayButton .pdfBox-overlayButton-arrow { - width: 0; - height: 0; - border-top: 30px solid transparent; - border-bottom: 30px solid transparent; - border-right: 30px solid #121721; - transition: all 0.5s; - } .pdfBox .pdfBox-ui .pdfBox-overlayCont, .pdfBox-interactive .pdfBox-ui .pdfBox-overlayCont { - position: absolute; - width: calc(100% - 40px); height: 60px; - background: #121721; - bottom: 0; - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; - transition: left .5s; - pointer-events: all; + + .pdfBox-searchBar { + font-size: 40px; + } } .pdfBox .pdfBox-ui .pdfBox-overlayButton, .pdfBox-interactive .pdfBox-ui .pdfBox-overlayButton { - border-bottom-left-radius: 50%; - display: flex; - justify-content: space-evenly; - align-items: center; height: 60px; - background: none; - padding: 0; - position: absolute; - pointer-events: all; - } - .pdfBox .pdfBox-ui .pdfBox-overlayCont .pdfBox-searchBar, - .pdfBox-interactive .pdfBox-ui .pdfBox-overlayCont .pdfBox-searchBar { - width: 70%; - font-size: 40px; + .pdfBox-overlayButton-iconCont { + height: 60px; + width: 75px; + font-size: 30; + } + + .pdfBox-overlayButton-arrow { + border-top: 30px solid transparent; + border-bottom: 30px solid transparent; + border-right: 30px solid #121721; + } } button.pdfBox-search { @@ -348,17 +289,8 @@ .pdfBox .pdfBox-ui .pdfBox-prevIcon, .pdfBox-interactive .pdfBox-ui .pdfBox-nextIcon, .pdfBox-interactive .pdfBox-ui .pdfBox-prevIcon { - background: #121721; height: 50px; width: 50px; font-size: 30px; - display: flex; - position: relative; - align-items: center; - justify-content: center; - border-radius: 3px; - pointer-events: all; - padding: 0px; } - -} +} \ No newline at end of file diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index 1261cbfdd..9f6af1bde 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -81,6 +81,7 @@ } } +// CSS adjusted for mobile devices @media only screen and (max-device-width: 480px) { .presBox-cont .presBox-buttons { position: absolute; @@ -92,37 +93,33 @@ z-index: 2; align-items: center; background: rgba(0, 0, 0, 0); - padding-top: 5px; - padding-bottom: 5px; display: inline-flex; + + .presBox-button { + margin-top: 5%; + height: 250; + width: 300; + font-size: 100; + display: flex; + align-items: center; + background: #323232; + color: white; + } + + .presBox-viewPicker { + top: -70; + left: 2.5%; + height: 50; + width: 95%; + font-size: 30px; + position: absolute; + min-width: 50px; + } } .presBox-cont .presBox-listCont { - position: absolute; top: 50; height: calc(100% - 80px); - width: 100%; - } - - .presBox-cont .presBox-buttons .presBox-button { - margin-top: 5%; - height: 250; - width: 300; - font-size: 100; - display: flex; - align-items: center; - background: 323232; - color: white; - } - - .presBox-cont .presBox-buttons .presBox-viewPicker { - top: -70; - left: 2.5%; - height: 50; - width: 95%; - font-size: 30px; - position: absolute; - min-width: 50px; } .input, diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index 79532995e..0632f6a8b 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -109,89 +109,43 @@ @media only screen and (max-device-width: 480px) { .presElementBox-buttons { display: inline-flex; - position: relative; - width: 100%; + position: absolute; + top: 0; + right: 0; + z-index: 3; + width: 50%; + + .presElementBox-interaction { + width: 50; + height: 50; + } + + .presElementBox-interaction-selected { + width: 50; + height: 50; + } } .presElementBox-item { display: inline-flex; + height: max-content; overflow: hidden; } - .presElementBox-buttons .presElementBox-interaction { - color: gray; - float: left; - padding: 0px; - width: 50; - height: 50; - } - - .presElementBox-buttons .presElementBox-interaction-selected { - color: white; - float: left; - padding: 0px; - width: 50; - height: 50; - border: solid 1px darkgray; - } - .presElementBox-closeIcon { - border-radius: 20px; transform: scale(1.5); - position: absolute; right: 10; top: 10; - padding: 8px; - } - - .presElementBox-buttons { - display: inline-flex; - position: absolute; - top: 0; - right: 0; - z-index: 3; - width: 50%; } .presElementBox-name { font-size: 30px; - position: absolute; - display: inline-block; top: 10px; z-index: 3; width: 50%; - text-overflow: ellipsis; - overflow: hidden; - white-space: pre; - } - - .presElementBox-item { - display: inline-block; - background-color: #eeeeee; - pointer-events: all; - width: 100%; - min-height: 100%; - height: max-content; - outline-color: maroon; - outline-style: dashed; - border-radius: 6px; - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - transition: all .1s; - padding: 0px; - padding-bottom: 3px; } .presElementBox-embedded { - position: relative; - display: flex; transform: translate(0, 90px) scale(1.5); - width: auto; - justify-content: center; - margin: auto; } } \ No newline at end of file diff --git a/src/mobile/AudioUpload.tsx b/src/mobile/AudioUpload.tsx index 83da41d90..590bf8f9d 100644 --- a/src/mobile/AudioUpload.tsx +++ b/src/mobile/AudioUpload.tsx @@ -1,18 +1,12 @@ -import * as ReactDOM from 'react-dom'; -import * as rp from 'request-promise'; import { Docs } from '../client/documents/Documents'; import "./ImageUpload.scss"; import React = require('react'); -import { DocServer } from '../client/DocServer'; import { observer } from 'mobx-react'; import { observable, action, computed } from 'mobx'; import { Utils, emptyPath, returnFalse, emptyFunction, returnOne, returnZero, returnTrue, returnEmptyFilter } from '../Utils'; -import { Networking } from '../client/Network'; import { Doc, Opt } from '../fields/Doc'; import { Cast, FieldValue } from '../fields/Types'; import { listSpec } from '../fields/Schema'; -import { List } from '../fields/List'; -import { Scripting } from '../client/util/Scripting'; import MainViewModal from '../client/views/MainViewModal'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { nullAudio } from '../fields/URLField'; @@ -23,40 +17,56 @@ import { DictationOverlay } from '../client/views/DictationOverlay'; import RichTextMenu from '../client/views/nodes/formattedText/RichTextMenu'; import { ContextMenu } from '../client/views/ContextMenu'; -export interface ImageUploadProps { - Document: Doc; -} - -// const onPointerDown = (e: React.TouchEvent) => { -// let imgInput = document.getElementById("input_image_file"); -// if (imgInput) { -// imgInput.click(); -// } -// } -const inputRef = React.createRef(); - @observer export class AudioUpload extends React.Component { - @observable error: string = ""; - @observable status: string = ""; - @observable nm: string = "Choose files"; - @observable process: string = ""; - @observable public _audioCol: Doc = FieldValue(Cast(Docs.Create.FreeformDocument([Cast(Docs.Create.AudioDocument(nullAudio, { title: "mobile audio", _width: 500, _height: 100 }), Doc) as Doc], { title: "mobile audio", _fitToBox: true, boxShadow: "0 0" }), Doc)) as Doc; - + @observable public _audioCol: Doc = FieldValue(Cast(Docs.Create.FreeformDocument([Cast(Docs.Create.AudioDocument(nullAudio, { title: "mobile audio", _width: 500, _height: 100 }), Doc) as Doc], { title: "mobile audio", _width: 300, _height: 300, _fitToBox: true, boxShadow: "0 0" }), Doc)) as Doc; + /** + * Handles the onclick functionality for the 'Restart' button + * Resets the document to its default view + */ @action clearUpload = () => { for (let i = 1; i < 8; i++) { this.setOpacity(i, "0.2"); } - this._audioCol = FieldValue(Cast(Docs.Create.FreeformDocument([Cast(Docs.Create.AudioDocument(nullAudio, { title: "mobile audio", _width: 500, _height: 100 }), Doc) as Doc], { title: "mobile audio", _fitToBox: true, boxShadow: "0 0" }), Doc)) as Doc; + this._audioCol = FieldValue(Cast( + Docs.Create.FreeformDocument( + [Cast(Docs.Create.AudioDocument(nullAudio, { + title: "mobile audio", + _width: 500, + _height: 100 + }), Doc) as Doc], { title: "mobile audio", _width: 300, _height: 300, _fitToBox: true, boxShadow: "0 0" }), Doc)) as Doc; } + /** + * Handles the onClick of the 'Close' button + * Reset upload interface and toggle audio + */ closeUpload = () => { this.clearUpload(); MobileInterface.Instance.toggleAudio(); } + /** + * Handles the on click of the 'Upload' button. + * Pushing the audio doc onto Dash Web through the right side bar + */ + uploadAudio = () => { + const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; + const audioDoc = this._audioCol; + const data = Cast(audioRightSidebar.data, listSpec(Doc)); + for (let i = 1; i < 8; i++) { + setTimeout(() => this.setOpacity(i, "1"), i * 200); + } + if (data) { + data.push(audioDoc); + } + // Resets uploader after 3 seconds + setTimeout(this.clearUpload, 3000); + } + + // Returns the upload audio menu private get uploadInterface() { return ( <> @@ -114,30 +124,14 @@ export class AudioUpload extends React.Component { ); } - setOpacity = (i: number, o: string) => { - const slab = document.getElementById("slab0" + i); + // Handles the setting of the loading bar + setOpacity = (index: number, opacity: string) => { + const slab = document.getElementById("slab0" + index); if (slab) { - console.log(slab?.id); - slab.style.opacity = o; + slab.style.opacity = opacity; } } - // Pushing the audio doc onto Dash Web through the right side bar - uploadAudio = () => { - console.log("uploading"); - const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; - const audioDoc = this._audioCol; - const data = Cast(audioRightSidebar.data, listSpec(Doc)); - for (let i = 1; i < 8; i++) { - setTimeout(() => this.setOpacity(i, "1"), i * 200); - } - if (data) { - data.push(audioDoc); - } - - setTimeout(this.clearUpload, 3000); - } - @observable private dialogueBoxOpacity = 1; @observable private overlayOpacity = 0.4; diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx index 6a5a2dd5b..5ea626d52 100644 --- a/src/mobile/ImageUpload.tsx +++ b/src/mobile/ImageUpload.tsx @@ -1,4 +1,3 @@ -import * as ReactDOM from 'react-dom'; import * as rp from 'request-promise'; import { Docs } from '../client/documents/Documents'; import "./ImageUpload.scss"; @@ -12,49 +11,38 @@ import { Doc, Opt } from '../fields/Doc'; import { Cast } from '../fields/Types'; import { listSpec } from '../fields/Schema'; import { List } from '../fields/List'; -import { Scripting } from '../client/util/Scripting'; import MainViewModal from '../client/views/MainViewModal'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { MobileInterface } from './MobileInterface'; -import { CurrentUserUtils } from '../client/util/CurrentUserUtils'; export interface ImageUploadProps { - Document: Doc; + Document: Doc; // Target document for upload (upload location) } -// const onPointerDown = (e: React.TouchEvent) => { -// let imgInput = document.getElementById("input_image_file"); -// if (imgInput) { -// imgInput.click(); -// } -// } const inputRef = React.createRef(); @observer export class Uploader extends React.Component { @observable error: string = ""; - @observable status: string = ""; - @observable nm: string = "Choose files"; - @observable process: string = ""; + @observable nm: string = "Choose files"; // Text of 'Choose Files' button + @observable process: string = ""; // Current status of upload onClick = async () => { try { const col = this.props.Document; await Docs.Prototypes.initialize(); const imgPrev = document.getElementById("img_preview"); - // Slab 1 - this.setOpacity(1, "1"); + this.setOpacity(1, "1"); // Slab 1 if (imgPrev) { const files: FileList | null = inputRef.current!.files; - // Slab 2 - this.setOpacity(2, "1"); + this.setOpacity(2, "1"); // Slab 2 if (files && files.length !== 0) { this.process = "Uploading Files"; for (let index = 0; index < files.length; ++index) { const file = files[index]; const res = await Networking.UploadFilesToServer(file); - // Slab 3 - this.setOpacity(3, "1"); + this.setOpacity(3, "1"); // Slab 3 + // For each item that the user has selected res.map(async ({ result }) => { const name = file.name; if (result instanceof Error) { @@ -62,16 +50,17 @@ export class Uploader extends React.Component { } const path = Utils.prepend(result.accessPaths.agnostic.client); let doc = null; - console.log("type: " + file.type); + // Case 1: File is a video if (file.type === "video/mp4") { doc = Docs.Create.VideoDocument(path, { _nativeWidth: 400, _width: 400, title: name }); + // Case 2: File is a PDF document } else if (file.type === "application/pdf") { doc = Docs.Create.PdfDocument(path, { _nativeWidth: 400, _width: 400, title: name }); + // Case 3: File is another document type (most likely Image) } else { doc = Docs.Create.ImageDocument(path, { _nativeWidth: 400, _width: 400, title: name }); } - // Slab 4 - this.setOpacity(4, "1"); + this.setOpacity(4, "1"); // Slab 4 const res = await rp.get(Utils.prepend("/getUserDocumentId")); if (!res) { throw new Error("No user id returned"); @@ -79,32 +68,27 @@ export class Uploader extends React.Component { const field = await DocServer.GetRefField(res); let pending: Opt; if (field instanceof Doc) { - // if (col === Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc) { - // pending = await Cast(field.rightSidebarCollection, Doc); - // } pending = col; - //pending = await Cast(field.col, Doc); } if (pending) { const data = await Cast(pending.data, listSpec(Doc)); if (data) data.push(doc); else pending.data = new List([doc]); - this.status = "finished"; this.setOpacity(5, "1"); // Slab 5 this.process = "File " + (index + 1).toString() + " Uploaded"; this.setOpacity(6, "1"); // Slab 6 - this.setOpacity(7, "1"); // Slab 7 } - console.log("i: " + index + 1); - console.log("l: " + files.length); if ((index + 1) === files.length) { this.process = "Uploads Completed"; + this.setOpacity(7, "1"); // Slab 7 } }); } + // Case in which the user pressed upload and no files were selected } else { this.process = "No file selected"; } + // Three seconds after upload the menu will reset setTimeout(this.clearUpload, 3000); } } catch (error) { @@ -117,14 +101,13 @@ export class Uploader extends React.Component { const files: FileList | null = inputRef.current!.files; await files; if (files && files.length === 1) { - console.log(files); this.nm = files[0].name; } else if (files && files.length > 1) { - console.log(files.length); this.nm = files.length.toString() + " files selected"; } } + // Loops through load icons, and resets buttons @action clearUpload = () => { for (let i = 1; i < 8; i++) { @@ -136,23 +119,21 @@ export class Uploader extends React.Component { inputRef.current.value = ""; } this.process = ""; - console.log(inputRef.current!.files); } + // Clears the upload and closes the upload menu closeUpload = () => { this.clearUpload(); MobileInterface.Instance.toggleUpload(); } - setOpacity = (i: number, o: string) => { - const slab = document.getElementById("slab" + i); - if (slab) { - console.log(slab?.id); - slab.style.opacity = o; - } + // Handles the setting of the loading bar + setOpacity = (index: number, opacity: string) => { + const slab = document.getElementById("slab" + index); + if (slab) slab.style.opacity = opacity; } - + // Returns the upload interface for mobile private get uploadInterface() { return (
diff --git a/src/mobile/MobileHome.scss b/src/mobile/MobileHome.scss deleted file mode 100644 index e1566b622..000000000 --- a/src/mobile/MobileHome.scss +++ /dev/null @@ -1,101 +0,0 @@ -$navbar-height: 120px; -$pathbar-height: 50px; - -* { - margin: 0px; - padding: 0px; - box-sizing: border-box; - font-family: "Open Sans"; -} - -.homeContainer { - position: relative; - top: 200px; - overflow: scroll; - width: 100%; - left: 0; - height: calc(100% - 120px); - overflow-y: scroll; -} - -.homeButton { - width: 96%; - margin-left: 2.5%; - height: 250px; - border-radius: 30px; - margin-top: 15px; - margin-bottom: 15px; -} - -.iconRight { - position: absolute; - width: 50%; - height: 80px; - transform: translate(0, 50%); - right: 0px; - text-align: center; - font-size: 80; -} - -.iconLeft { - position: absolute; - width: 50%; - height: 80px; - transform: translate(0%, 50%); - left: 0px; - text-align: center; - font-size: 80; -} - -.textLeft { - position: absolute; - width: 50%; - left: 0px; - font-size: 40px; - text-align: left; - margin-left: 110px; - margin-top: 40px; - font-family: sans-serif; - font-weight: bold; -} - -.textRight { - position: absolute; - width: 50%; - right: 0px; - font-size: 40px; - text-align: right; - margin-right: 110px; - margin-top: 40px; - font-family: sans-serif; - font-weight: bold; -} - -.menuView { - position: absolute; - top: 135px; - left: 50%; - transform: translate(-50%, 0%); - display: flex; -} - -.iconView { - height: 60px; - width: 60px; - background-color: darkgray; - border-radius: 5px; - border-style: solid; - border-width: 2px; - border-color: black; -} - -.listView { - height: 60px; - width: 60px; - margin-left: 20; - background-color: darkgray; - border-radius: 5px; - border-style: solid; - border-width: 2px; - border-color: black; -} \ No newline at end of file diff --git a/src/mobile/MobileInterface.scss b/src/mobile/MobileInterface.scss index 86b043590..ee39d4f50 100644 --- a/src/mobile/MobileInterface.scss +++ b/src/mobile/MobileInterface.scss @@ -1,36 +1,444 @@ -.mobileInterface-inkInterfaceButtons { - position: absolute; - top: 0px; - display: flex; - justify-content: space-between; - width: 100%; - z-index: 9999; - height: 50px; +$navbar-height: 120px; +$pathbar-height: 50px; - .mobileInterface-button { - height: 100%; +@media only screen and (max-device-width: 480px) { + * { + margin: 0px; + padding: 0px; + box-sizing: border-box; + font-family: sans-serif; } } +body { + overflow: hidden; +} + .mobileInterface-container { height: 100%; position: relative; touch-action: none; width: 100%; - -webkit-touch-callout:none; - -webkit-user-select:none; - -khtml-user-select:none; - -moz-user-select:none; - -ms-user-select:none; - user-select:none; - -webkit-tap-highlight-color:rgba(0,0,0,0); + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +// Topbar of Dash Mobile +.navbar { + position: fixed; + top: 0px; + left: 0px; + width: 100vw; + height: $navbar-height; + background-color: whitesmoke; + z-index: 150; + + .cover { + position: absolute; + right: 0px; + top: 0px; + height: 120px; + width: 120px; + background-color: whitesmoke; + z-index: 200; + } + + .toggle-btn { + position: absolute; + right: 20px; + top: 30px; + height: 70px; + width: 70px; + transition: all 400ms ease-in-out 200ms; + z-index: 180; + } + + .background { + position: absolute; + right: 0px; + top: 0px; + height: 120px; + width: 120px; + //border: 1px solid black; + } + + .background.active { + background-color: lightgrey; + } + + .toggle-btn-home { + right: -200px; + } + + .header { + position: absolute; + top: 50%; + top: calc(9px + 50%); + right: 50%; + transform: translate(50%, -50%); + font-size: 40; + font-weight: 700; + text-align: center; + user-select: none; + text-transform: uppercase; + font-family: Arial, Helvetica, sans-serif; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + direction: ltr; + width: 600px; + } + + .toggle-btn span { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 70%; + height: 4px; + background: black; + transition: all 200ms ease; + z-index: 180; + } + + .toggle-btn span:nth-child(1) { + transition: top 200ms ease-in-out; + top: 30%; + } + + .toggle-btn span:nth-child(3) { + transition: top 200ms ease-in-out; + top: 70%; + } + + .toggle-btn.active { + transition: transform 200ms ease-in-out 200ms; + transform: rotate(135deg); + } + + .toggle-btn.active span:nth-child(1) { + top: 50%; + } + + .toggle-btn.active span:nth-child(2) { + transform: translate(-50%, -50%) rotate(90deg); + } + + .toggle-btn.active span:nth-child(3) { + top: 50%; + } +} + +.sidebar { + position: fixed; + top: 120px; + opacity: 0; + right: -100%; + width: 80%; + height: calc(80% - (120px)); + z-index: 101; + background-color: whitesmoke; + transition: all 400ms ease 50ms; + padding: 20px; + box-shadow: 0 0 5px 5px grey; + + .item { + width: 100%; + padding: 13px 12px; + border-bottom: 1px solid rgba(200, 200, 200, 0.7); + font-family: Arial, Helvetica, sans-serif; + font-style: normal; + font-weight: normal; + user-select: none; + display: inline-flex; + font-size: 35px; + text-transform: uppercase; + color: black; + } + + .ink:focus { + outline: 1px solid blue; + } + + .sidebarButtons { + top: 80px; + position: relative; + } +} + + + + + + +.blanket { + position: fixed; + top: 120px; + opacity: 0.5; + right: -100%; + width: 100%; + height: calc(100% - (120px)); + z-index: 101; + background-color: grey; + padding: 20px; +} + +.blanket.active { + position: absolute; + right: 0%; + z-index: 100; +} + +.home { + position: absolute; + top: 30px; + left: 30px; + font-size: 60; + user-select: none; + text-transform: uppercase; + font-family: Arial, Helvetica, sans-serif; + z-index: 200; } -.mobileInterface-background { +.item-type { + display: inline; + text-transform: lowercase; + margin-left: 20px; + font-size: 35px; + font-style: italic; + color: rgb(28, 28, 28); +} + +.item-title { + max-width: 70%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.right { + margin-left: 20px; + z-index: 200; +} + +.open { + right: 20px; + font-size: 35; + position: absolute; +} + +.left { + width: 100%; height: 100%; +} + + + +.sidebar.active { + position: absolute; + right: 0%; + opacity: 1; + z-index: 101; +} + +.back { + position: absolute; + left: 42px; + top: 0; + background: #1a1a1a; + width: 50px; + height: 100%; + display: flex; + justify-content: center; + text-align: center; + flex-direction: column; + align-items: center; + border-radius: 10px; + font-size: 25px; + user-select: none; + z-index: 100; +} + +.pathbar { + position: fixed; + top: 118px; + left: 0px; + background: #1a1a1a; + z-index: 120; + border-radius: 0px; width: 100%; + height: 80px; + overflow: hidden; + + .pathname { + position: relative; + font-size: 25; + top: 50%; + width: 86%; + left: 12%; + color: whitesmoke; + transform: translate(0%, -50%); + z-index: 20; + font-family: sans-serif; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + direction: rtl; + text-align: left; + text-transform: uppercase; + } + + .scrollmenu { + overflow: auto; + width: 100%; + height: 100%; + white-space: nowrap; + display: inline-flex; + } + + .hidePath { + position: absolute; + height: 100%; + width: 200px; + left: 0px; + top: 0px; + background-image: linear-gradient(to right, #1a1a1a, rgba(0, 0, 0, 0)); + text-align: center; + user-select: none; + z-index: 99; + pointer-events: none; + } + + .pathbarItem { + position: relative; + display: flex; + align-items: center; + color: whitesmoke; + text-align: center; + justify-content: center; + user-select: none; + transform: translate(100px, 0px); + font-size: 30px; + padding: 10px; + text-transform: uppercase; + + .pathbarText { + font-family: sans-serif; + text-align: center; + height: 50px; + padding: 10px; + font-size: 30px; + border-radius: 10px; + text-transform: uppercase; + margin-left: 20px; + position: relative; + } + + .pathIcon { + transform: translate(0px, 0px); + position: relative; + } + } +} + + +/** +* docButton appears at the bottom of mobile document +* Buttons include: pin to presentation, download, upload, reload +*/ +.docButton { position: relative; - touch-action: none; - background-color: pink; + width: 100px; + display: flex; + height: 100px; + font-size: 70px; + text-align: center; + border: 3px solid black; + margin: 20px; + z-index: 100; + border-radius: 100%; + justify-content: center; + flex-direction: column; + align-items: center; +} + +.docButtonContainer { + top: 80%; + position: absolute; + display: flex; + transform: translate(-50%, 0); + left: 50%; + z-index: 100; } + +.toolbar { + left: 50%; + transform: translate(-50%); + position: absolute; + height: max-content; + top: 0px; + border-radius: 20px; + background-color: lightgrey; + opacity: 0; + transition: all 400ms ease 50ms; +} + +.toolbar.active { + display: inline-block; + width: 300px; + padding: 5px; + opacity: 1; + height: max-content; + top: -450px; +} + +.colorSelector { + position: absolute; + top: 550px; + left: 300px; + transform: translate(-50%, 0); + z-index: 100; + display: inline-flex; + width: max-content; + height: max-content; + pointer-events: all; + font-size: 90px; +} + +// Menu buttons for toggling between list and icon view +.homeSwitch { + position: fixed; + top: 212; + right: 36px; + display: inline-flex; + width: max-content; + z-index: 99; + height: 70px; + + .list { + width: 70px; + height: 70px; + margin: 5; + padding: 10; + align-items: center; + text-align: center; + font-size: 50; + border-style: solid; + border-width: 3; + border-color: black; + background: whitesmoke; + align-self: center; + border-radius: 10px; + } + + .list.active { + color: darkred; + border-color: darkred; + } +} \ No newline at end of file diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index 90672e19f..38705898b 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -11,42 +11,30 @@ import { import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; -import { trace } from 'mobx'; -import * as rp from 'request-promise'; import { Doc, DocListCast } from '../fields/Doc'; import { CurrentUserUtils } from '../client/util/CurrentUserUtils'; import { emptyFunction, emptyPath, returnEmptyString, returnFalse, returnOne, returnTrue, returnZero, returnEmptyFilter } from '../Utils'; -import { DocServer } from '../client/DocServer'; import { Docs, DocumentOptions } from '../client/documents/Documents'; import { Scripting } from '../client/util/Scripting'; import { DocumentView } from '../client/views/nodes/DocumentView'; import { Transform } from '../client/util/Transform'; import "./MobileInterface.scss"; -import "./MobileMenu.scss"; -import "./MobileHome.scss"; import "./ImageUpload.scss"; import "./AudioUpload.scss"; -import { DocumentManager } from '../client/util/DocumentManager'; import SettingsManager from '../client/util/SettingsManager'; import { Uploader } from "./ImageUpload"; import { DockedFrameRenderer } from '../client/views/collections/CollectionDockingView'; import { InkTool } from '../fields/InkField'; -import { listSpec } from '../fields/Schema'; -import { nullAudio } from '../fields/URLField'; import GestureOverlay from "../client/views/GestureOverlay"; import { ScriptField } from "../fields/ScriptField"; import InkOptionsMenu from "../client/views/collections/collectionFreeForm/InkOptionsMenu"; import { RadialMenu } from "../client/views/nodes/RadialMenu"; -import { UndoManager, undoBatch } from "../client/util/UndoManager"; -import { MainView } from "../client/views/MainView"; +import { UndoManager } from "../client/util/UndoManager"; import { List } from "../fields/List"; import { AudioUpload } from "./AudioUpload"; import { Cast, FieldValue } from '../fields/Types'; -import { CollectionView } from '../client/views/collections/CollectionView'; -import { InkingStroke } from '../client/views/InkingStroke'; import RichTextMenu from "../client/views/nodes/formattedText/RichTextMenu"; import { AudioBox } from "../client/views/nodes/AudioBox"; -import { FormattedTextBox } from "../client/views/nodes/formattedText/FormattedTextBox"; library.add(faTasks, faReply, faQuoteLeft, faHandPointLeft, faFolderOpen, faAngleDoubleLeft, faExternalLinkSquareAlt, faMobile, faThLarge, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, faTerminal, faToggleOn, fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard, @@ -82,22 +70,15 @@ export class MobileInterface extends React.Component { @action componentDidMount = () => { - // Doc.UserDoc().activeMobile = this._homeDoc; + // if the home menu is in list view -> adjust the menu toggle appropriately this._homeDoc._viewType === "stacking" ? this.menuListView = true : this.menuListView = false; - Doc.SetSelectedTool(InkTool.None); - Doc.UserDoc().activeMobile = this._homeDoc; + Doc.SetSelectedTool(InkTool.None); // ink should intially be set to none + Doc.UserDoc().activeMobile = this._homeDoc; // active mobile set to home AudioBox.Enabled = true; + // remove double click to avoid mobile zoom in document.removeEventListener("dblclick", this.onReactDoubleClick); document.addEventListener("dblclick", this.onReactDoubleClick); - document.addEventListener("dash", (e: any) => { // event used by chrome plugin to tell Dash which document to focus on - const id = FormattedTextBox.GetDocFromUrl(e.detail); - DocServer.GetRefField(id).then(doc => { - if (doc instanceof Doc) { - DocumentManager.Instance.jumpToDocument(doc, false, undefined); - } - }); - }); } @action @@ -123,6 +104,8 @@ export class MobileInterface extends React.Component { onSwitch && onSwitch(); this.renderView = renderView; + // Ensures that switching to home is not registed + UndoManager.undoStack.length = 0; } // For toggling the hamburger menu @@ -144,16 +127,18 @@ export class MobileInterface extends React.Component { */ back = () => { const header = document.getElementById("header") as HTMLElement; - const doc = Cast(this._parents.pop(), Doc) as Doc; - + const doc = Cast(this._parents.pop(), Doc) as Doc; // Parent document + // Case 1: Parent document is 'workspaces' if (doc === Cast(this._library, Doc) as Doc) { this._child = null; this.switchCurrentView(this._library); + // Case 2: Parent document is the 'home' menu (root node) } else if (doc === Cast(this._homeDoc, Doc) as Doc) { this._homeMenu = true; this._parents = []; this._child = null; this.switchCurrentView(this._homeDoc); + // Case 3: Parent document is any document } else { if (doc) { this._child = doc; @@ -162,11 +147,11 @@ export class MobileInterface extends React.Component { header.textContent = String(doc.title); } } - this._ink = false; + this._ink = false; // turns ink off } /** - * Return 'Home", which implies returning to 'Home' buttons + * Return 'Home", which implies returning to 'Home' menu buttons */ returnHome = () => { if (!this._homeMenu || this.sidebarActive) { @@ -258,11 +243,16 @@ export class MobileInterface extends React.Component { } } + /** + * Called when an item in the library is clicked and should + * be opened (open icon on RHS of all menu items) + * @param doc doc to be opened + */ openFromSidebar = (doc: Doc) => { this._parents.push(this._activeDoc); this.switchCurrentView(doc); this._homeMenu = false; - this._child = doc; //? + this._child = doc; this.toggleSidebar(); } @@ -378,12 +368,12 @@ export class MobileInterface extends React.Component {
); } - + // stores workspace documents as 'workspaces' variable let workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc; if (this._child) { workspaces = this._child; } - + // returns a list of navbar buttons as 'buttons' const buttons = DocListCast(workspaces.data).map((doc: Doc, index: any) => { if (doc.type !== "ink") { return ( @@ -445,7 +435,7 @@ export class MobileInterface extends React.Component { } /** - * Handles the Create New Workspace button in the menu (taken from MainView.tsx) + * Handles the 'Create New Workspace' button in the menu (taken from MainView.tsx) */ @action createNewWorkspace = async (id?: string) => { @@ -467,7 +457,6 @@ export class MobileInterface extends React.Component { workspaceDoc.contextMenuLabels = new List(["Toggle Theme Colors", "Toggle Comic Mode", "New Workspace Layout"]); Doc.AddDocToList(workspaces, "data", workspaceDoc); - // bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container) } stop = (e: React.MouseEvent) => { @@ -508,7 +497,6 @@ export class MobileInterface extends React.Component { inkMenu = () => { if (this._activeDoc._viewType === "docking") { if (this._ink) { - console.log("here"); return
; @@ -517,9 +505,9 @@ export class MobileInterface extends React.Component { } } - + // uses UndoManager and handles the color change opacity change if CanUndo is true undo = () => { - if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc && this._activeDoc.title !== "WORKSPACES") { + if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc && this._activeDoc !== this.userDoc.rightSidebarCollection && this._activeDoc.title !== "WORKSPACES") { return (<>
{ - if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc && this._activeDoc.title !== "WORKSPACES") { + if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc && this._activeDoc !== this.userDoc.rightSidebarCollection && this._activeDoc.title !== "WORKSPACES") { return (<>
@@ -593,7 +583,6 @@ export class MobileInterface extends React.Component { style={{ backgroundColor: "white", color: "black" }} onClick={e => { window.open(url); - console.log(url); }}> @@ -647,18 +636,13 @@ export class MobileInterface extends React.Component { this._homeDoc._viewType = "masonry"; this._homeDoc.columnWidth = 300; const menuButtons = DocListCast(this._homeDoc.data); - console.log('hello'); menuButtons.map((doc: Doc, index: any) => { - console.log(index); const buttonData = DocListCast(doc.data); buttonData[1]._nativeWidth = 0.1; buttonData[1]._width = 0.1; buttonData[1]._dimMagnitude = 0; buttonData[1]._opacity = 0; - console.log(buttonData); - console.log(doc._nativeWidth); doc._nativeWidth = 400; - console.log(doc._nativeWidth); }); } } @@ -670,22 +654,18 @@ export class MobileInterface extends React.Component { this._homeDoc._viewType = "stacking"; this.menuListView = true; const menuButtons = DocListCast(this._homeDoc.data); - console.log('hello'); menuButtons.map((doc: Doc, index: any) => { const buttonData = DocListCast(doc.data); buttonData[1]._nativeWidth = 450; buttonData[1]._dimMagnitude = 2; buttonData[1]._opacity = 1; - console.log(doc._nativeWidth); doc._nativeWidth = 900; - console.log(doc._nativeWidth); }); } } // For setting up the presentation document for the home menu setupDefaultPresentation = () => { - const presentation = Cast(Doc.UserDoc().activePresentation, Doc) as Doc; if (presentation) { @@ -698,10 +678,11 @@ export class MobileInterface extends React.Component { @action toggleUpload = () => this.imageUploadActive = !this.imageUploadActive - // For toggling image upload pop up + // For toggling audio record and dictate pop up @action toggleAudio = () => this.audioUploadActive = !this.audioUploadActive + // Button for toggling the upload pop up in a collection @action toggleUploadInCollection = () => { const button = document.getElementById("imageButton") as HTMLElement; @@ -719,12 +700,6 @@ export class MobileInterface extends React.Component { // Returns the image upload pop up uploadImage = () => { - if (this.imageUploadActive) { - console.log("active"); - } else if (!this.imageUploadActive) { - - } - let doc; let toggle; if (this._homeMenu === false) { @@ -739,6 +714,7 @@ export class MobileInterface extends React.Component { ); } + // Radial menu can only be used if it is a colleciton and it is not a homeDoc displayRadialMenu = () => { if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc) { return ; @@ -750,6 +726,7 @@ export class MobileInterface extends React.Component { e.stopPropagation(); } + // Button that appears on the bottom of the screen to initiate image upload uploadImageButton = () => { if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc && this._activeDoc._viewType !== "docking" && this._activeDoc.title !== "WORKSPACES") { return
{ const mobileUpload = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc; this.switchCurrentView(mobileUpload); @@ -800,14 +782,20 @@ export class MobileInterface extends React.Component { } - +//Global functions for mobile menu +Scripting.addGlobal(function switchToMobileLibrary() { return MobileInterface.Instance.switchToLibrary(); }, + "opens the library to navigate through workspaces on Dash Mobile"); +Scripting.addGlobal(function openMobileUploads() { return MobileInterface.Instance.toggleUpload(); }, + "opens the upload files menu for Dash Mobile"); +Scripting.addGlobal(function switchToMobileUploadCollection() { return MobileInterface.Instance.switchToMobileUploads(); }, + "opens the mobile uploads collection on Dash Mobile"); +Scripting.addGlobal(function openMobileAudio() { return MobileInterface.Instance.toggleAudio(); }, + "opens the record and dictate menu on Dash Mobile"); +Scripting.addGlobal(function switchToMobilePresentation() { return MobileInterface.Instance.setupDefaultPresentation(); }, + "opens the presentation on Dash Mobile"); +Scripting.addGlobal(function openMobileSettings() { return SettingsManager.Instance.open(); }, + "opens settings on Dash Mobile"); + +// Other global functions for mobile Scripting.addGlobal(function switchMobileView(doc: Doc, renderView?: () => JSX.Element, onSwitch?: () => void) { return MobileInterface.Instance.switchCurrentView(doc, renderView, onSwitch); }, - "changes the active document displayed on the mobile, (doc: any)"); -Scripting.addGlobal(function openMobilePresentation() { return MobileInterface.Instance.setupDefaultPresentation(); }, - "opens the presentation on mobile"); -Scripting.addGlobal(function toggleMobileSidebar() { return MobileInterface.Instance.toggleSidebar(); }); -Scripting.addGlobal(function openMobileAudio() { return MobileInterface.Instance.toggleAudio(); }); -Scripting.addGlobal(function openMobileSettings() { return SettingsManager.Instance.open(); }); -Scripting.addGlobal(function uploadImageMobile() { return MobileInterface.Instance.toggleUpload(); }); -Scripting.addGlobal(function switchToMobileUploads() { return MobileInterface.Instance.switchToMobileUploads(); }); -Scripting.addGlobal(function switchToMobileLibrary() { return MobileInterface.Instance.switchToLibrary(); }); \ No newline at end of file + "changes the active document displayed on the Dash Mobile", "(doc: any)"); diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss index b60aa308f..e69de29bb 100644 --- a/src/mobile/MobileMenu.scss +++ b/src/mobile/MobileMenu.scss @@ -1,475 +0,0 @@ -$navbar-height: 120px; -$pathbar-height: 50px; - -* { - margin: 0px; - padding: 0px; - box-sizing: border-box; - font-family: "Open Sans"; -} - -body { - overflow: hidden; -} - -.navbar { - position: fixed; - top: 0px; - left: 0px; - width: 100vw; - height: $navbar-height; - background-color: whitesmoke; - z-index: 150; -} - -.navbar .cover { - position: absolute; - right: 0px; - top: 0px; - height: 120px; - width: 120px; - background-color: whitesmoke; - z-index: 200; -} - -.navbar .toggle-btn { - position: absolute; - right: 20px; - top: 30px; - height: 70px; - width: 70px; - transition: all 400ms ease-in-out 200ms; - z-index: 180; -} - -.navbar .background { - position: absolute; - right: 0px; - top: 0px; - height: 120px; - width: 120px; - //border: 1px solid black; -} - -.navbar .background.active { - background-color: lightgrey; -} - -.navbar .toggle-btn-home { - right: -200px; -} - -.navbar .header { - position: absolute; - top: 50%; - top: calc(9px + 50%); - right: 50%; - transform: translate(50%, -50%); - font-size: 40; - font-weight: 700; - text-align: center; - user-select: none; - text-transform: uppercase; - font-family: Arial, Helvetica, sans-serif; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - direction: ltr; - width: 600px; -} - -.navbar .toggle-btn span { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 70%; - height: 4px; - background: black; - transition: all 200ms ease; - z-index: 180; -} - -.navbar .toggle-btn span:nth-child(1) { - transition: top 200ms ease-in-out; - top: 30%; -} - -.navbar .toggle-btn span:nth-child(3) { - transition: top 200ms ease-in-out; - top: 70%; -} - -.navbar .toggle-btn.active { - transition: transform 200ms ease-in-out 200ms; - transform: rotate(135deg); -} - -.navbar .toggle-btn.active span:nth-child(1) { - top: 50%; -} - -.navbar .toggle-btn.active span:nth-child(2) { - transform: translate(-50%, -50%) rotate(90deg); -} - -.navbar .toggle-btn.active span:nth-child(3) { - top: 50%; -} - -.sidebar { - position: fixed; - top: 120px; - opacity: 0; - right: -100%; - width: 80%; - height: calc(80% - (120px)); - z-index: 101; - background-color: whitesmoke; - transition: all 400ms ease 50ms; - padding: 20px; - // overflow-y: auto; - // -webkit-overflow-scrolling: touch; - // border-right: 5px solid black; - box-shadow: 0 0 5px 5px grey; -} - -.sidebar .item { - width: 100%; - padding: 13px 12px; - border-bottom: 1px solid rgba(200, 200, 200, 0.7); - font-family: Arial, Helvetica, sans-serif; - font-style: normal; - font-weight: normal; - user-select: none; - display: inline-flex; - font-size: 35px; - text-transform: uppercase; - color: black; - -} - -.sidebar .ink:focus { - outline: 1px solid blue; -} - -.sidebarButtons { - top: 80px; - position: relative; -} - -.blanket { - position: fixed; - top: 120px; - opacity: 0.5; - right: -100%; - width: 100%; - height: calc(100% - (120px)); - z-index: 101; - background-color: grey; - padding: 20px; -} - -.blanket.active { - position: absolute; - right: 0%; - z-index: 100; -} - -.home { - position: absolute; - top: 30px; - left: 30px; - font-size: 60; - user-select: none; - text-transform: uppercase; - font-family: Arial, Helvetica, sans-serif; - z-index: 200; -} - -.item-type { - display: inline; - text-transform: lowercase; - margin-left: 20px; - font-size: 35px; - font-style: italic; - color: rgb(28, 28, 28); -} - -.item-title { - max-width: 70%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.right { - margin-left: 20px; - z-index: 200; -} - -.open { - right: 20px; - font-size: 35; - position: absolute; -} - -.left { - width: 100%; - height: 100%; -} - -.sidebar .logout { - width: 100%; - padding: 13px 12px; - border-bottom: 1px solid rgba(200, 200, 200, 0.7); - font-family: Arial, Helvetica, sans-serif; - font-style: normal; - font-weight: normal; - user-select: none; - font-size: 30px; - text-transform: uppercase; - color: black; -} - -.sidebar .settings { - width: 100%; - padding: 13px 12px; - border-bottom: 1px solid rgba(200, 200, 200, 0.7); - font-family: Arial, Helvetica, sans-serif; - font-style: normal; - font-weight: normal; - user-select: none; - font-size: 30px; - text-transform: uppercase; - color: black; -} - - -.sidebar.active { - position: absolute; - right:0%; - opacity: 1; - z-index: 101; -} - -.back { - position: absolute; - left: 42px; - top: 0; - background: #1a1a1a; - width: 50px; - height: 100%; - display: flex; - justify-content: center; - text-align: center; - flex-direction: column; - align-items: center; - border-radius: 10px; - font-size: 25px; - user-select: none; - z-index: 100; -} - -.pathbar { - position: fixed; - top: 118px; - left: 0px; - background: #1a1a1a; - z-index: 120; - border-radius: 0px; - width: 100%; - height: 80px; - overflow: hidden; -} - -.pathname { - position: relative; - font-size: 25; - top: 50%; - width: 86%; - left: 12%; - color: whitesmoke; - transform: translate(0%, -50%); - z-index: 20; - font-family: sans-serif; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - direction: rtl; - text-align: left; - text-transform: uppercase; -} - -.docButton { - position: relative; - width: 100px; - display: flex; - height: 100px; - font-size: 70px; - text-align: center; - border: 3px solid black; - margin: 20px; - z-index: 100; - border-radius: 100%; - justify-content: center; - flex-direction: column; - align-items: center; -} - -.docButtonContainer { - top: 80%; - position: absolute; - display: flex; - transform: translate(-50%, 0); - left: 50%; - z-index: 100; -} - -.scrollmenu { - overflow: auto; - width: 100%; - height: 100%; - white-space: nowrap; - display: inline-flex; -} - -.pathbarItem { - position: relative; - display: flex; - align-items: center; - color: whitesmoke; - text-align: center; - justify-content: center; - user-select: none; - transform: translate(100px, 0px); - font-size: 30px; - padding: 10px; - text-transform: uppercase; -} - -.pathbarText { - font-family: sans-serif; - text-align: center; - height: 50px; - padding: 10px; - font-size: 30px; - border-radius: 10px; - text-transform: uppercase; - margin-left: 20px; - position: relative; -} - - -.pathIcon { - transform: translate(0px, 0px); - position: relative; -} - -.hidePath { - position: absolute; - height: 100%; - width: 200px; - left: 0px; - top: 0px; - background-image: linear-gradient(to right, #1a1a1a, rgba(0, 0, 0, 0)); - text-align: center; - user-select: none; - z-index: 99; - pointer-events: none; -} - -.toolbar { - left: 50%; - transform: translate(-50%); - position: absolute; - height: max-content; - top: 0px; - border-radius: 20px; - background-color: lightgrey; - opacity: 0; - transition: all 400ms ease 50ms; -} - -.toolbar.active { - display: inline-block; - width: 300px; - padding: 5px; - opacity: 1; - height: max-content; - top: -450px; -} - -.colorSelector { - position: absolute; - top: 550px; - left: 300px; - transform: translate(-50%, 0); - z-index: 100; - display: inline-flex; - width: max-content; - height: max-content; - pointer-events: all; - font-size: 90px; -} - -.widthSelector { - display: inline-flex; - width: max-content; - height: 100px; - padding: 10px; -} - -.slider { - -webkit-appearance: none; - /* Override default CSS styles */ - appearance: none; - width: 100%; - /* Full-width */ - height: 25px; - /* Specified height */ - background: #d3d3d3; - /* Grey background */ - outline: none; - /* Remove outline */ -} - -.colorButton { - width: 70px; - margin: 10px; - height: 70px; - border-style: solid; - border-width: 3px; - border-radius: 100%; -} - -.homeSwitch { - position: fixed; - top: 212; - right: 36px; - display: inline-flex; - width: max-content; - z-index: 99; - height: 70px; -} - -.list { - width: 70px; - height: 70px; - margin: 5; - padding: 10; - align-items: center; - text-align: center; - font-size: 50; - border-style: solid; - border-width: 3; - border-color: black; - background: whitesmoke; - align-self: center; - border-radius: 10px; -} - -.list.active { - color: darkred; - border-color: darkred; -} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 6b75f84565a5019175b16ee5ea69fc5330aa2c0d Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Tue, 30 Jun 2020 03:18:21 +0800 Subject: css fix from recent push --- src/client/views/presentationview/PresElementBox.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'src/client/views') diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index 0632f6a8b..dbe6b0d4f 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -128,7 +128,6 @@ .presElementBox-item { display: inline-flex; - height: max-content; overflow: hidden; } -- cgit v1.2.3-70-g09d2 From e11757174fb539d958595c42ff43f85d82b401c9 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Mon, 29 Jun 2020 16:32:01 -0400 Subject: fixed removing of ';' from script in schemaCells --- src/client/views/collections/CollectionSchemaCells.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index 5d5f1df57..d76b6d204 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -271,7 +271,7 @@ export class CollectionSchemaCell extends React.Component { } const cscript = cfield instanceof ComputedField ? cfield.script.originalScript : undefined; const cfinalScript = cscript?.split("return")[cscript.split("return").length - 1]; - const val = cscript !== undefined ? `:=${cfinalScript?.substring(0, cfinalScript.length - 2)}` : + const val = cscript !== undefined ? (cfinalScript?.endsWith(";") ? `:=${cfinalScript?.substring(0, cfinalScript.length - 2)}` : cfinalScript) : Field.IsField(cfield) ? Field.toScriptString(cfield) : ""; return val; } -- cgit v1.2.3-70-g09d2 From b1777a2b6b5ef34424ba0cdaea03d41617a0eabd Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 29 Jun 2020 15:39:15 -0500 Subject: adjusting previews --- src/client/views/DocumentButtonBar.tsx | 2 +- src/client/views/nodes/DocumentLinksButton.tsx | 18 ++++++++++-------- 2 files changed, 11 insertions(+), 9 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index c05ca33fb..d544e13eb 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -271,7 +271,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV const considerPush = isText && this.considerGoogleDocsPush; return
- +
{this.templateButton} diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index 4f4f12521..0280b0b9b 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -18,6 +18,7 @@ interface DocumentLinksButtonProps { View: DocumentView; Offset?: number[]; AlwaysOn?: boolean; + InMenu?: boolean; } @observer export class DocumentLinksButton extends React.Component { @@ -53,7 +54,7 @@ export class DocumentLinksButton extends React.Component { setupMoveUpEvents(this, e, this.onLinkButtonMoved, emptyFunction, action((e, doubleTap) => { - if (doubleTap) { + if (doubleTap && !this.props.InMenu) { DocumentLinksButton.StartLink = this.props.View; } else { DocumentLinksButton.EditLink = this.props.View; @@ -85,13 +86,14 @@ export class DocumentLinksButton extends React.Component
LinkDocPreview.LinkInfo = undefined)} - onPointerEnter={action(e => links.length && (LinkDocPreview.LinkInfo = { - addDocTab: this.props.View.props.addDocTab, - linkSrc: this.props.View.props.Document, - linkDoc: links[0], - Location: [e.clientX, e.clientY + 20] - }))} > + // onPointerLeave={action(() => LinkDocPreview.LinkInfo = undefined)} + // onPointerEnter={action(e => links.length && (LinkDocPreview.LinkInfo = { + // addDocTab: this.props.View.props.addDocTab, + // linkSrc: this.props.View.props.Document, + // linkDoc: links[0], + // Location: [e.clientX, e.clientY + 20] + // }))} + > {links.length ? links.length : }
{DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View ?
: (null)} -- cgit v1.2.3-70-g09d2 From 992a65ec6f828dda0adcd3cd121896f07f64af87 Mon Sep 17 00:00:00 2001 From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com> Date: Mon, 29 Jun 2020 14:21:57 -0700 Subject: minor fixes --- .../views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 6 +++--- src/mobile/MobileInterface.tsx | 1 - 3 files changed, 4 insertions(+), 5 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 42aa0f58e..a068e391e 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1214,7 +1214,7 @@ export class CollectionFreeFormView extends CollectionSubView this.Document._fitToBox = !this.fitToContent, icon: !this.fitToContent ? "expand-arrows-alt" : "compress-arrows-alt" }); appearanceItems.push({ description: `${this.Document.useClusters ? "Uncluster" : "Use Clusters"}`, event: () => this.updateClusters(!this.Document.useClusters), icon: "braille" }); appearanceItems.push({ description: "Use Background Color as Default", event: () => Cast(Doc.UserDoc().emptyCollection, Doc, null)._backgroundColor = StrCast(this.layoutDoc._backgroundColor), icon: "palette" }); - !appearance && ContextMenu.Instance.addItem({ description: "Appearance...", subitems: appearanceItems, icon: "eye" }); + !appearance && ContextMenu.Instance?.addItem({ description: "Appearance...", subitems: appearanceItems, icon: "eye" }); const options = ContextMenu.Instance?.findByDescription("Options..."); const optionItems = options && "subitems" in options ? options.subitems : []; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index afd28534e..0f46be345 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -749,7 +749,7 @@ export class DocumentView extends DocComponent(Docu const templateDoc = Cast(this.props.Document[StrCast(this.props.Document.layoutKey)], Doc, null); templateDoc && optionItems.push({ description: "Open Template ", event: () => this.props.addDocTab(templateDoc, "onRight"), icon: "eye" }); optionItems.push({ description: "Toggle Show Each Link Dot", event: () => this.layoutDoc.showLinks = !this.layoutDoc.showLinks, icon: "eye" }); - !options && cm.addItem({ description: "Options...", subitems: optionItems, icon: "compass" }); + !options && cm?.addItem({ description: "Options...", subitems: optionItems, icon: "compass" }); const existingOnClick = cm?.findByDescription("OnClick..."); const onClicks: ContextMenuProps[] = existingOnClick && "subitems" in existingOnClick ? existingOnClick.subitems : []; @@ -767,7 +767,7 @@ export class DocumentView extends DocComponent(Docu funcs.push({ description: "Drag an Alias", icon: "edit", event: () => this.Document.dragFactory && (this.layoutDoc.onDragStart = ScriptField.MakeFunction('getAlias(this.dragFactory)')) }); funcs.push({ description: "Drag a Copy", icon: "edit", event: () => this.Document.dragFactory && (this.layoutDoc.onDragStart = ScriptField.MakeFunction('getCopy(this.dragFactory, true)')) }); funcs.push({ description: "Drag Document", icon: "edit", event: () => this.layoutDoc.onDragStart = undefined }); - cm.addItem({ description: "OnDrag...", subitems: funcs, icon: "asterisk" }); + cm?.addItem({ description: "OnDrag...", subitems: funcs, icon: "asterisk" }); } const more = cm?.findByDescription("More..."); @@ -806,7 +806,7 @@ export class DocumentView extends DocComponent(Docu const helpItems: ContextMenuProps[] = help && "subitems" in help ? help.subitems : []; helpItems.push({ description: "Text Shortcuts Ctrl+/", event: () => this.props.addDocTab(Docs.Create.PdfDocument("http://localhost:1050/assets/cheat-sheet.pdf", { _width: 300, _height: 300 }), "onRight"), icon: "keyboard" }); helpItems.push({ description: "Show Fields ", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "onRight"), icon: "layer-group" }); - cm.addItem({ description: "Help...", subitems: helpItems, icon: "question" }); + cm?.addItem({ description: "Help...", subitems: helpItems, icon: "question" }); const existingAcls = cm?.findByDescription("Privacy..."); const aclItems: ContextMenuProps[] = existingAcls && "subitems" in existingAcls ? existingAcls.subitems : []; diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index e39349ff2..8cec03897 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -518,7 +518,6 @@ export class MobileInterface extends React.Component { inkMenu = () => { if (this._activeDoc._viewType === "docking") { if (this._ink) { - console.log("here"); return
; -- cgit v1.2.3-70-g09d2 From d81d2e814d449043c1cb20512d5e0a61c9351cfc Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 29 Jun 2020 17:08:25 -0500 Subject: adjusting menu --- src/client/views/linking/LinkMenuItem.tsx | 10 +++++++++- src/client/views/nodes/DocumentLinksButton.tsx | 5 +++-- 2 files changed, 12 insertions(+), 3 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index edc18b6a9..10c542536 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -135,6 +135,12 @@ export class LinkMenuItem extends React.Component { DocumentManager.Instance.FollowLink(this.props.linkDoc, this.props.sourceDoc, doc => this.props.addDocTab(doc, "onRight"), false); } + @action + deleteLink = (): void => { + LinkManager.Instance.deleteLink(this.props.linkDoc); + //this.props.showLinks(); + } + render() { const keys = LinkManager.Instance.getMetadataKeysInGroup(this.props.groupType);//groupMetadataKeys.get(this.props.groupType); const canExpand = keys ? keys.length > 0 : false; @@ -147,7 +153,9 @@ export class LinkMenuItem extends React.Component {
{canExpand ?
this.toggleShowMore(e)}>
: <>} -
+ + {/*
*/} +
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index 0280b0b9b..69f25093a 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -53,10 +53,11 @@ export class DocumentLinksButton extends React.Component { + setupMoveUpEvents(this, e, this.onLinkButtonMoved, emptyFunction, action((e, doubleTap) => { - if (doubleTap && !this.props.InMenu) { + if (doubleTap) { DocumentLinksButton.StartLink = this.props.View; - } else { + } else if (!!!this.props.InMenu) { DocumentLinksButton.EditLink = this.props.View; DocumentLinksButton.EditLinkLoc = [e.clientX + 10, e.clientY]; } -- cgit v1.2.3-70-g09d2 From 087cc4516cb3389324bb0b42c2240face696bfd3 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 29 Jun 2020 18:06:42 -0500 Subject: UI changes to menu & prev --- src/client/views/linking/LinkMenuGroup.tsx | 4 ++-- src/client/views/linking/LinkMenuItem.tsx | 19 +++++++++++++++++-- src/client/views/nodes/DocumentLinksButton.tsx | 2 +- 3 files changed, 20 insertions(+), 5 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/linking/LinkMenuGroup.tsx b/src/client/views/linking/LinkMenuGroup.tsx index 89deb3a55..7892d381b 100644 --- a/src/client/views/linking/LinkMenuGroup.tsx +++ b/src/client/views/linking/LinkMenuGroup.tsx @@ -80,11 +80,11 @@ export class LinkMenuGroup extends React.Component { return (
-
+ {/*

{this.props.groupType}:

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

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

{canExpand ?
this.toggleShowMore(e)}>
: <>} {/*
*/} -
+
+
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index 69f25093a..c625c4cd6 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -95,7 +95,7 @@ export class DocumentLinksButton extends React.Component - {links.length ? links.length : } + {links.length && !!!this.props.InMenu ? links.length : }
{DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View ?
: (null)} {DocumentLinksButton.StartLink === this.props.View ?
: (null)} -- cgit v1.2.3-70-g09d2 From e11191876344b191c28a8cd6606df84e94f32104 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Mon, 29 Jun 2020 18:09:26 -0500 Subject: preview fix --- src/client/views/linking/LinkMenuItem.tsx | 3 +++ 1 file changed, 3 insertions(+) (limited to 'src/client/views') diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index e8db5aff8..d5d31d1ba 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -129,6 +129,7 @@ export class LinkMenuItem extends React.Component { @action onContextMenu = (e: React.MouseEvent) => { DocumentLinksButton.EditLink = undefined; + LinkDocPreview.LinkInfo = undefined; e.preventDefault(); ContextMenu.Instance.addItem({ description: "Follow Default Link", event: () => this.followDefault(), icon: "arrow-right" }); ContextMenu.Instance.displayMenu(e.clientX, e.clientY); @@ -137,6 +138,7 @@ export class LinkMenuItem extends React.Component { @action.bound async followDefault() { DocumentLinksButton.EditLink = undefined; + LinkDocPreview.LinkInfo = undefined; DocumentManager.Instance.FollowLink(this.props.linkDoc, this.props.sourceDoc, doc => this.props.addDocTab(doc, "onRight"), false); } @@ -144,6 +146,7 @@ export class LinkMenuItem extends React.Component { deleteLink = (): void => { LinkManager.Instance.deleteLink(this.props.linkDoc); //this.props.showLinks(); + LinkDocPreview.LinkInfo = undefined; DocumentLinksButton.EditLink = undefined; } -- cgit v1.2.3-70-g09d2 From 56da30314c4d434c4b7bb8be94f3bcb5923790d8 Mon Sep 17 00:00:00 2001 From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com> Date: Mon, 29 Jun 2020 18:05:46 -0700 Subject: minor changes --- .../collectionFreeForm/InkOptionsMenu.tsx | 5 ++- src/mobile/MobileInterface.tsx | 37 +++++++++++++--------- 2 files changed, 26 insertions(+), 16 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx index e5b7023a1..218cef183 100644 --- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx +++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx @@ -320,10 +320,13 @@ export default class InkOptionsMenu extends AntimodeMenu { ]; const mobileButtons = [ - ...this.shapeButtons, + this.shapePicker, this.bezierButton, this.widthPicker, this.colorPicker, + this.fillPicker, + this.arrowPicker, + this.dashButton, ]; return (window.screen.width < 600 ? this.getElement(mobileButtons) : this.getElement(buttons)); diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index a49bfb9b1..cb7319e03 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -56,6 +56,8 @@ export class MobileInterface extends React.Component { @observable private audioUploadActive: boolean = false; @observable private menuListView: boolean = false; //to switch between menu view (list / icon) @observable private _ink: boolean = false; //toggle whether ink is being dispalyed + @observable private inkButton: boolean = false; + @observable private undoButton: boolean = false; public _activeDoc: Doc = this.mainDoc; // doc updated as the active mobile page is updated (initially home menu) public _homeDoc: Doc = this.mainDoc; // home menu as a document @@ -107,6 +109,10 @@ export class MobileInterface extends React.Component { this.renderView = renderView; // Ensures that switching to home is not registed UndoManager.undoStack.length = 0; + + if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc && this._activeDoc !== this.userDoc.rightSidebarCollection && this._activeDoc.title !== "WORKSPACES") { + this.undoButton = true; + } } // For toggling the hamburger menu @@ -445,7 +451,7 @@ export class MobileInterface extends React.Component { const freeformOptions: DocumentOptions = { x: 0, y: 400, - title: "Collection " + workspaceCount + title: "Collection " + workspaceCount, }; const freeformDoc = CurrentUserUtils.GuestTarget || Docs.Create.FreeformDocument([], freeformOptions); const workspaceDoc = Docs.Create.StandardCollectionDockingDocument([{ doc: freeformDoc, initialWidth: 600, path: [Doc.UserDoc().myCatalog as Doc] }], { title: `Workspace ${workspaceCount}` }, id, "row"); @@ -493,19 +499,21 @@ export class MobileInterface extends React.Component { // DocButton that uses UndoManager and handles the opacity change if CanUndo is true @computed get undo() { - if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc && this._activeDoc !== this.userDoc.rightSidebarCollection && this._activeDoc.title !== "WORKSPACES") { - return (<> -
{ - UndoManager.Undo(); - e.stopPropagation(); - }}> - -
- ); + if (this.mainContainer) { + if (this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc && this._activeDoc !== this.userDoc.rightSidebarCollection && this._activeDoc.title !== "WORKSPACES") { + return (<> +
{ + UndoManager.Undo(); + e.stopPropagation(); + }}> + +
+ ); + } } } @@ -704,7 +712,6 @@ export class MobileInterface extends React.Component { } onDragOver = (e: React.DragEvent) => { - console.log("drag!"); e.preventDefault(); e.stopPropagation(); } -- cgit v1.2.3-70-g09d2 From 917098c107052f825e0f9b96bdb0706371862b90 Mon Sep 17 00:00:00 2001 From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com> Date: Mon, 29 Jun 2020 23:14:41 -0700 Subject: ink fixes --- .../views/collections/collectionFreeForm/InkOptionsMenu.tsx | 13 +------------ src/client/views/nodes/DocumentView.tsx | 1 + src/mobile/MobileInterface.scss | 5 +++-- src/mobile/MobileInterface.tsx | 8 +++++++- 4 files changed, 12 insertions(+), 15 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx index 218cef183..f47fca6ac 100644 --- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx +++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx @@ -318,18 +318,7 @@ export default class InkOptionsMenu extends AntimodeMenu { this.arrowPicker, this.dashButton, ]; - - const mobileButtons = [ - this.shapePicker, - this.bezierButton, - this.widthPicker, - this.colorPicker, - this.fillPicker, - this.arrowPicker, - this.dashButton, - ]; - - return (window.screen.width < 600 ? this.getElement(mobileButtons) : this.getElement(buttons)); + return this.getElement(buttons); } } Scripting.addGlobal(function activatePen(penBtn: any) { diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 3b785a200..0ec676379 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -42,6 +42,7 @@ import { LinkAnchorBox } from './LinkAnchorBox'; import { RadialMenu } from './RadialMenu'; import React = require("react"); import { DocumentLinksButton } from './DocumentLinksButton'; +import { MobileInterface } from '../../../mobile/MobileInterface'; library.add(fa.faEdit, fa.faTrash, fa.faShare, fa.faDownload, fa.faExpandArrowsAlt, fa.faCompressArrowsAlt, fa.faLayerGroup, fa.faExternalLinkAlt, fa.faAlignCenter, fa.faCaretSquareRight, fa.faSquare, fa.faConciergeBell, fa.faWindowRestore, fa.faFolder, fa.faMapPin, fa.faLink, fa.faFingerprint, fa.faCrosshairs, fa.faDesktop, fa.faUnlock, fa.faLock, fa.faLaptopCode, fa.faMale, diff --git a/src/mobile/MobileInterface.scss b/src/mobile/MobileInterface.scss index ee39d4f50..4b32c3da0 100644 --- a/src/mobile/MobileInterface.scss +++ b/src/mobile/MobileInterface.scss @@ -401,14 +401,15 @@ body { .colorSelector { position: absolute; top: 550px; - left: 300px; + left: 280px; transform: translate(-50%, 0); z-index: 100; display: inline-flex; width: max-content; height: max-content; pointer-events: all; - font-size: 90px; + font-size: 80px; + user-select: none; } // Menu buttons for toggling between list and icon view diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index 7ff82ccc4..54461c4cc 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -107,12 +107,18 @@ export class MobileInterface extends React.Component { this.renderView = renderView; // Ensures that switching to home is not registed UndoManager.undoStack.length = 0; + UndoManager.redoStack.length = 0; } // For toggling the hamburger menu @action - toggleSidebar = () => this.sidebarActive = !this.sidebarActive + toggleSidebar = () => { + this.sidebarActive = !this.sidebarActive; + if (this._ink) { + this.onSwitchInking(); + } + } /** * Method called when 'Library' button is pressed on the home screen */ -- cgit v1.2.3-70-g09d2 From d662a26c9ef78581a823d14b56433950129b7ccb Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Tue, 30 Jun 2020 12:02:49 -0500 Subject: preview and movement adjustment --- src/client/views/linking/LinkMenu.tsx | 6 +- src/client/views/nodes/LinkDocPreview.tsx | 107 +++++++++++++++++++++--------- 2 files changed, 81 insertions(+), 32 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx index 0fcc0f0b9..6b24f96b1 100644 --- a/src/client/views/linking/LinkMenu.tsx +++ b/src/client/views/linking/LinkMenu.tsx @@ -28,9 +28,13 @@ export class LinkMenu extends React.Component { @action onClick = (e: PointerEvent) => { - if (!Array.from(this._linkMenuRef?.getElementsByTagName((e.target as HTMLElement).tagName) || []).includes(e.target as any)) { + if (this._linkMenuRef && !Array.from(this._linkMenuRef?.getElementsByTagName((e.target as HTMLElement).tagName) || []).includes(e.target as any)) { DocumentLinksButton.EditLink = undefined; } + + // if (this._linkMenuRef && !this._linkMenuRef.contains(e.target)) { + // DocumentLinksButton.EditLink = undefined; + // } } @action componentDidMount() { diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx index 92b443d3b..1d2c022a7 100644 --- a/src/client/views/nodes/LinkDocPreview.tsx +++ b/src/client/views/nodes/LinkDocPreview.tsx @@ -10,6 +10,11 @@ import { Transform } from "../../util/Transform"; import { ContentFittingDocumentView } from "./ContentFittingDocumentView"; import React = require("react"); import { DocumentView } from './DocumentView'; +import { sortAndDeduplicateDiagnostics } from 'typescript'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { LinkManager } from '../../util/LinkManager'; +import { DocumentLinksButton } from './DocumentLinksButton'; +import { ContextMenu } from '../ContextMenu'; interface Props { linkDoc?: Doc; @@ -24,6 +29,31 @@ export class LinkDocPreview extends React.Component { @observable public static LinkInfo: Opt<{ linkDoc?: Doc; addDocTab: (document: Doc, where: string) => boolean, linkSrc: Doc; href?: string; Location: number[] }>; @observable _targetDoc: Opt; @observable _toolTipText = ""; + _editRef = React.createRef(); + + @action + deleteLink = (): void => { + this.props.linkDoc ? LinkManager.Instance.deleteLink(this.props.linkDoc) : null; + //this.props.showLinks(); + LinkDocPreview.LinkInfo = undefined; + DocumentLinksButton.EditLink = undefined; + } + + @action + onContextMenu = (e: React.MouseEvent) => { + DocumentLinksButton.EditLink = undefined; + LinkDocPreview.LinkInfo = undefined; + e.preventDefault(); + ContextMenu.Instance.addItem({ description: "Follow Default Link", event: () => this.followDefault(), icon: "arrow-right" }); + ContextMenu.Instance.displayMenu(e.clientX, e.clientY); + } + + @action.bound + async followDefault() { + DocumentLinksButton.EditLink = undefined; + LinkDocPreview.LinkInfo = undefined; + this._targetDoc ? DocumentManager.Instance.FollowLink(this.props.linkDoc, this._targetDoc, doc => this.props.addDocTab(doc, "onRight"), false) : null; + } componentDidUpdate() { this.updatePreview(); } componentDidMount() { this.updatePreview(); } @@ -56,42 +86,57 @@ export class LinkDocPreview extends React.Component { this.props.addDocTab(Docs.Create.WebDocument(this.props.href, { title: this.props.href, _width: 200, _height: 400, UseCors: true }), "onRight"); } } - width = () => Math.min(350, NumCast(this._targetDoc?.[WidthSym](), 350)); - height = () => Math.min(350, NumCast(this._targetDoc?.[HeightSym](), 350)); + width = () => Math.min(225, NumCast(this._targetDoc?.[WidthSym](), 225)); + height = () => Math.min(225, NumCast(this._targetDoc?.[HeightSym](), 225)); @computed get targetDocView() { return !this._targetDoc ? -
+
{this._toolTipText}
: - ; +
+
{this._targetDoc.title} +
+
+
+
+ +
+
+
+
; } render() { @@ -99,7 +144,7 @@ export class LinkDocPreview extends React.Component { style={{ position: "absolute", left: this.props.location[0], top: this.props.location[1], width: this.width(), height: this.height(), - boxShadow: "black 2px 2px 1em" + boxShadow: "black 2px 2px 1em", zIndex: 1000 }}> {this.targetDocView}
; -- cgit v1.2.3-70-g09d2 From a4543fdc90f8c19e4a032294c2f7d16a3152662f Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Tue, 30 Jun 2020 13:33:04 -0500 Subject: working with linked text --- package-lock.json | 10 ++ package.json | 1 + src/client/views/MainView.tsx | 56 +++++----- src/client/views/linking/LinkMenu.tsx | 3 +- .../formattedText/FormattedTextBoxComment.tsx | 120 ++++++++++++++++----- 5 files changed, 133 insertions(+), 57 deletions(-) (limited to 'src/client/views') diff --git a/package-lock.json b/package-lock.json index 53b2fc009..9118cd4b0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -853,6 +853,16 @@ "@types/prosemirror-view": "*" } }, + "@types/prosemirror-dev-tools": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@types/prosemirror-dev-tools/-/prosemirror-dev-tools-2.1.0.tgz", + "integrity": "sha512-OhnSaC4yrrEMLPRUkEWcHAIPVqgKlLkE4kISqL3cHeAYxASouSPvPMLqhBIbWkGwaozy43DjjVC1OXkxTo+y5Q==", + "dev": true, + "requires": { + "@types/prosemirror-state": "*", + "@types/prosemirror-view": "*" + } + }, "@types/prosemirror-history": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/prosemirror-history/-/prosemirror-history-1.0.1.tgz", diff --git a/package.json b/package.json index 8f67704cb..765002d37 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ "@types/passport-local": "^1.0.33", "@types/pdfjs-dist": "^2.1.4", "@types/prosemirror-commands": "^1.0.1", + "@types/prosemirror-dev-tools": "^2.1.0", "@types/prosemirror-history": "^1.0.1", "@types/prosemirror-inputrules": "^1.0.2", "@types/prosemirror-keymap": "^1.0.2", diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index cea664543..daf26cfd7 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -65,7 +65,7 @@ export class MainView extends React.Component { public static Instance: MainView; private _buttonBarHeight = 36; private _flyoutSizeOnDown = 0; - private _urlState: HistoryUtil.DocUrl; + private static _urlState: HistoryUtil.DocUrl; private _docBtnRef = React.createRef(); private _mainViewRef = React.createRef(); @@ -73,12 +73,12 @@ export class MainView extends React.Component { @observable private _panelHeight: number = 0; @observable private _flyoutTranslate: boolean = true; @observable public flyoutWidth: number = 250; - private get darkScheme() { return BoolCast(Cast(this.userDoc?.activeWorkspace, Doc, null)?.darkScheme); } + private get darkScheme() { return BoolCast(Cast(MainView.userDoc?.activeWorkspace, Doc, null)?.darkScheme); } - @computed private get userDoc() { return Doc.UserDoc(); } - @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeWorkspace, Doc)) : CurrentUserUtils.GuestWorkspace; } + @computed private static get userDoc() { return Doc.UserDoc(); } + @computed private get mainContainer() { return MainView.userDoc ? FieldValue(Cast(MainView.userDoc.activeWorkspace, Doc)) : CurrentUserUtils.GuestWorkspace; } @computed public get mainFreeform(): Opt { return (docs => (docs && docs.length > 1) ? docs[1] : undefined)(DocListCast(this.mainContainer!.data)); } - @computed public get sidebarButtonsDoc() { return Cast(this.userDoc["tabs-buttons"], Doc) as Doc; } + @computed public get sidebarButtonsDoc() { return Cast(MainView.userDoc["tabs-buttons"], Doc) as Doc; } public isPointerDown = false; @@ -119,7 +119,7 @@ export class MainView extends React.Component { constructor(props: Readonly<{}>) { super(props); MainView.Instance = this; - this._urlState = HistoryUtil.parseUrl(window.location) || {} as any; + MainView._urlState = HistoryUtil.parseUrl(window.location) || {} as any; // causes errors to be generated when modifying an observable outside of an action configure({ enforceActions: "observed" }); if (window.location.pathname !== "/home") { @@ -128,7 +128,7 @@ export class MainView extends React.Component { const type = pathname[0]; if (type === "doc") { CurrentUserUtils.MainDocId = pathname[1]; - if (!this.userDoc) { + if (!MainView.userDoc) { runInAction(() => this.flyoutWidth = 0); DocServer.GetRefField(CurrentUserUtils.MainDocId).then(action((field: Opt) => field instanceof Doc && (CurrentUserUtils.GuestTarget = field))); @@ -172,14 +172,14 @@ export class MainView extends React.Component { initAuthenticationRouters = async () => { // Load the user's active workspace, or create a new one if initial session after signup const received = CurrentUserUtils.MainDocId; - if (received && !this.userDoc) { + if (received && !MainView.userDoc) { reaction( () => CurrentUserUtils.GuestTarget, target => target && this.createNewWorkspace(), { fireImmediately: true } ); } else { - if (received && this._urlState.sharing) { + if (received && MainView._urlState.sharing) { reaction(() => CollectionDockingView.Instance && CollectionDockingView.Instance.initialized, initialized => initialized && received && DocServer.GetRefField(received).then(docField => { if (docField instanceof Doc && docField._viewType !== CollectionViewType.Docking) { @@ -188,9 +188,9 @@ export class MainView extends React.Component { }), ); } - const doc = this.userDoc && await Cast(this.userDoc.activeWorkspace, Doc); + const doc = MainView.userDoc && await Cast(MainView.userDoc.activeWorkspace, Doc); if (doc) { - this.openWorkspace(doc); + MainView.openWorkspace(doc); } else { this.createNewWorkspace(); } @@ -199,7 +199,7 @@ export class MainView extends React.Component { @action createNewWorkspace = async (id?: string) => { - const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc; + const workspaces = Cast(MainView.userDoc.myWorkspaces, Doc) as Doc; const workspaceCount = DocListCast(workspaces.data).length + 1; const freeformOptions: DocumentOptions = { x: 0, @@ -219,19 +219,19 @@ export class MainView extends React.Component { Doc.AddDocToList(workspaces, "data", workspaceDoc); // bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container) - setTimeout(() => this.openWorkspace(workspaceDoc), 0); + setTimeout(() => MainView.openWorkspace(workspaceDoc), 0); } @action - openWorkspace = (doc: Doc, fromHistory = false) => { + static openWorkspace = (doc: Doc, fromHistory = false) => { CurrentUserUtils.MainDocId = doc[Id]; if (doc) { // this has the side-effect of setting the main container since we're assigning the active/guest workspace !("presentationView" in doc) && (doc.presentationView = new List([Docs.Create.TreeDocument([], { title: "Presentation" })])); - this.userDoc ? (this.userDoc.activeWorkspace = doc) : (CurrentUserUtils.GuestWorkspace = doc); + MainView.userDoc ? (MainView.userDoc.activeWorkspace = doc) : (CurrentUserUtils.GuestWorkspace = doc); } - const state = this._urlState; - if (state.sharing === true && !this.userDoc) { + const state = MainView._urlState; + if (state.sharing === true && !MainView.userDoc) { DocServer.Control.makeReadOnly(); } else { fromHistory || HistoryUtil.pushState({ @@ -257,7 +257,7 @@ export class MainView extends React.Component { } // if there is a pending doc, and it has new data, show it (syip: we use a timeout to prevent collection docking view from being uninitialized) setTimeout(async () => { - const col = this.userDoc && await Cast(this.userDoc.rightSidebarCollection, Doc); + const col = MainView.userDoc && await Cast(MainView.userDoc.rightSidebarCollection, Doc); col && Cast(col.data, listSpec(Doc)) && runInAction(() => MainViewNotifs.NotifsCol = col); }, 100); return true; @@ -305,7 +305,7 @@ export class MainView extends React.Component { DataDoc={undefined} LibraryPath={emptyPath} addDocument={undefined} - addDocTab={this.addDocTabFunc} + addDocTab={MainView.addDocTabFunc} pinToPres={emptyFunction} rootSelected={returnTrue} onClick={undefined} @@ -378,15 +378,15 @@ export class MainView extends React.Component { document.removeEventListener("pointerup", this.onPointerUp); } flyoutWidthFunc = () => this.flyoutWidth; - addDocTabFunc = (doc: Doc, where: string, libraryPath?: Doc[]): boolean => { + static addDocTabFunc = (doc: Doc, where: string, libraryPath?: Doc[]): boolean => { return where === "close" ? CollectionDockingView.CloseRightSplit(doc) : - doc.dockingConfig ? this.openWorkspace(doc) : + doc.dockingConfig ? MainView.openWorkspace(doc) : CollectionDockingView.AddRightSplit(doc, libraryPath); } mainContainerXf = () => new Transform(0, -this._buttonBarHeight, 1); @computed get flyout() { - const sidebarContent = this.userDoc?.["tabs-panelContainer"]; + const sidebarContent = MainView.userDoc?.["tabs-panelContainer"]; if (!(sidebarContent instanceof Doc)) { return (null); } @@ -398,7 +398,7 @@ export class MainView extends React.Component { LibraryPath={emptyPath} addDocument={undefined} rootSelected={returnTrue} - addDocTab={this.addDocTabFunc} + addDocTab={MainView.addDocTabFunc} pinToPres={emptyFunction} removeDocument={undefined} onClick={undefined} @@ -424,7 +424,7 @@ export class MainView extends React.Component { DataDoc={undefined} LibraryPath={emptyPath} addDocument={undefined} - addDocTab={this.addDocTabFunc} + addDocTab={MainView.addDocTabFunc} pinToPres={emptyFunction} NativeHeight={returnZero} NativeWidth={returnZero} @@ -458,8 +458,8 @@ export class MainView extends React.Component { } @computed get mainContent() { - const sidebar = this.userDoc?.["tabs-panelContainer"]; - return !this.userDoc || !(sidebar instanceof Doc) ? (null) : ( + const sidebar = MainView.userDoc?.["tabs-panelContainer"]; + return !MainView.userDoc || !(sidebar instanceof Doc) ? (null) : (
MainView.Instance.openWorkspace(copiedWorkspace), 0); + setTimeout(() => MainView.openWorkspace(copiedWorkspace), 0); }); diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx index 6b24f96b1..9fd2b98b1 100644 --- a/src/client/views/linking/LinkMenu.tsx +++ b/src/client/views/linking/LinkMenu.tsx @@ -74,7 +74,8 @@ export class LinkMenu extends React.Component { render() { const sourceDoc = this.props.docView.props.Document; const groups: Map = LinkManager.Instance.getRelatedGroupedLinks(sourceDoc); - return
this._linkMenuRef = r} style={{ left: this.props.location[0], top: this.props.location[1] }}> + return
this._linkMenuRef = r} style={{ left: this.props.location[0], top: this.props.location[1] }}> {!this._editingLink ? this.renderAllGroups(groups) : this._editingLink = undefined)} /> diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx index 90f2c0aa6..a4153a40c 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx @@ -16,6 +16,13 @@ import React = require("react"); import { Docs } from "../../../documents/Documents"; import wiki from "wikijs"; import { DocumentType } from "../../../documents/DocumentTypes"; +import { computed, action, observable } from "mobx"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { LinkManager } from "../../../util/LinkManager"; +import { LinkDocPreview } from "../LinkDocPreview"; +import { DocumentLinksButton } from "../DocumentLinksButton"; +import { ContextMenu } from "../../ContextMenu"; +import { MainView } from "../../MainView"; export let formattedTextBoxCommentPlugin = new Plugin({ view(editorView) { return new FormattedTextBoxComment(editorView); } @@ -62,6 +69,10 @@ export class FormattedTextBoxComment { static mark: Mark; static textBox: FormattedTextBox | undefined; static linkDoc: Doc | undefined; + + static targetDoc: Doc | undefined; + static _editRef = React.createRef(); + constructor(view: any) { if (!FormattedTextBoxComment.tooltip) { const root = document.getElementById("root"); @@ -75,8 +86,8 @@ export class FormattedTextBoxComment { FormattedTextBoxComment.tooltip.appendChild(FormattedTextBoxComment.tooltipText); FormattedTextBoxComment.tooltip.className = "FormattedTextBox-tooltip"; FormattedTextBoxComment.tooltip.style.pointerEvents = "all"; - FormattedTextBoxComment.tooltip.style.maxWidth = "350px"; - FormattedTextBoxComment.tooltip.style.maxHeight = "250px"; + FormattedTextBoxComment.tooltip.style.maxWidth = "225px"; + FormattedTextBoxComment.tooltip.style.maxHeight = "225px"; FormattedTextBoxComment.tooltip.style.width = "100%"; FormattedTextBoxComment.tooltip.style.height = "100%"; FormattedTextBoxComment.tooltip.style.overflow = "hidden"; @@ -106,6 +117,31 @@ export class FormattedTextBoxComment { } } + @action + public static deleteLink = (): void => { + FormattedTextBoxComment.linkDoc ? LinkManager.Instance.deleteLink(FormattedTextBoxComment.linkDoc) : null; + //this.props.showLinks(); + LinkDocPreview.LinkInfo = undefined; + DocumentLinksButton.EditLink = undefined; + } + + @action + public static onContextMenu = (e: React.MouseEvent) => { + DocumentLinksButton.EditLink = undefined; + LinkDocPreview.LinkInfo = undefined; + e.preventDefault(); + ContextMenu.Instance.addItem({ description: "Follow Default Link", event: () => FormattedTextBoxComment.followDefault(), icon: "arrow-right" }); + ContextMenu.Instance.displayMenu(e.clientX, e.clientY); + } + + @action.bound + public static async followDefault() { + DocumentLinksButton.EditLink = undefined; + LinkDocPreview.LinkInfo = undefined; + FormattedTextBoxComment.targetDoc ? DocumentManager.Instance.FollowLink(FormattedTextBoxComment.linkDoc, FormattedTextBoxComment.targetDoc, + doc => MainView.addDocTabFunc(doc, "onRight"), false) : null; + } + public static Hide() { FormattedTextBoxComment.textBox = undefined; FormattedTextBoxComment.tooltip && (FormattedTextBoxComment.tooltip.style.display = "none"); @@ -119,6 +155,22 @@ export class FormattedTextBoxComment { FormattedTextBoxComment.tooltip && (FormattedTextBoxComment.tooltip.style.display = ""); } + @action + onClick = (e: PointerEvent) => { + if (FormattedTextBoxComment._editRef && !FormattedTextBoxComment._editRef.current?.contains(e.target as Node)) { + FormattedTextBoxComment.linkDoc = undefined; + FormattedTextBoxComment.targetDoc = undefined; + } + } + @action + componentDidMount() { + document.addEventListener("pointerdown", this.onClick); + } + + componentWillUnmount() { + document.removeEventListener("pointerdown", this.onClick); + } + static showCommentbox(set: string, view: EditorView, nbef: number) { const state = view.state; if (set !== "none") { @@ -157,6 +209,7 @@ export class FormattedTextBoxComment { (FormattedTextBoxComment.tooltipText as any).href = ""; FormattedTextBoxComment.tooltipText.style.whiteSpace = ""; FormattedTextBoxComment.tooltipText.style.overflow = ""; + // this section checks to see if the insertion point is over text entered by a different user. If so, it sets ths comment text to indicate the user and the modification date if (state.selection.$from) { nbef = findStartOfMark(state.selection.$from, view, findOtherUserMark); @@ -209,33 +262,44 @@ export class FormattedTextBoxComment { target._scrollY = NumCast(anchor?.y); } if (target?.author) { + + const docPreview =
{target.title} +
+
+
+
+ +
+
+ Math.min(350, NumCast(target._width, 350))} + PanelHeight={() => Math.min(250, NumCast(target._height, 250))} + focus={emptyFunction} + whenActiveChanged={returnFalse} + bringToFront={returnFalse} + ContentScaling={returnOne} + NativeWidth={returnZero} + NativeHeight={returnZero} + /> +
; FormattedTextBoxComment.showCommentbox("", view, nbef); - ReactDOM.render( Math.min(350, NumCast(target._width, 350))} - PanelHeight={() => Math.min(250, NumCast(target._height, 250))} - focus={emptyFunction} - whenActiveChanged={returnFalse} - bringToFront={returnFalse} - ContentScaling={returnOne} - NativeWidth={returnZero} - NativeHeight={returnZero} - />, FormattedTextBoxComment.tooltipText); + ReactDOM.render(docPreview, FormattedTextBoxComment.tooltipText); FormattedTextBoxComment.tooltip.style.width = NumCast(target._width) ? `${NumCast(target._width)}` : "100%"; FormattedTextBoxComment.tooltip.style.height = NumCast(target._height) ? `${NumCast(target._height)}` : "100%"; } -- cgit v1.2.3-70-g09d2 From 45d4390a70f0a1199718f006cdbaef3029c19443 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Tue, 30 Jun 2020 15:37:22 -0400 Subject: added start of push pin annotations --- src/client/views/collections/CollectionView.tsx | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 6acf78af7..dab82185a 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -18,7 +18,7 @@ import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from '../../../fields/Ty import { ImageField } from '../../../fields/URLField'; import { TraceMobx } from '../../../fields/util'; import { emptyFunction, emptyPath, returnFalse, returnOne, returnZero, setupMoveUpEvents, Utils, returnEmptyFilter } from '../../../Utils'; -import { Docs } from '../../documents/Documents'; +import { Docs, DocUtils } from '../../documents/Documents'; import { DocumentType } from '../../documents/DocumentTypes'; import { CurrentUserUtils } from '../../util/CurrentUserUtils'; import { ImageUtils } from '../../util/Import & Export/ImageUtils'; @@ -139,7 +139,21 @@ export class CollectionView extends Touchable Doc.AddDocToList(targetDataDoc, this.props.fieldKey, doc)); } else { - added.map(doc => doc.context = this.props.Document); + added.map(doc => { + const context = Cast(doc.context, Doc, null); + if (context && (context?.type === DocumentType.VID || context.type === DocumentType.WEB || context.type === DocumentType.PDF || context.type === DocumentType.IMG)) { + const pushpin = Docs.Create.FreeformDocument([], { + title: "pushpin", x: Cast(doc.x, "number", null), y: Cast(doc.y, "number", null), + _width: 10, _height: 10, _backgroundColor: "red", isLinkButton: true, displayTimecode: Cast(doc.displayTimecode, "number", null) + }); + Doc.AddDocToList(context, Doc.LayoutFieldKey(context) + "-annotations", pushpin); + DocUtils.MakeLink({ doc: pushpin }, { doc: doc }, "pushpin"); + const first = DocListCast(pushpin.links).find(d => d instanceof Doc); + first && (first.hidden = true); + doc.displayTimecode = undefined; + } + doc.context = this.props.Document; + }); added.map(add => Doc.AddDocToList(Cast(Doc.UserDoc().myCatalog, Doc, null), "data", add)); targetDataDoc[this.props.fieldKey] = new List([...docList, ...added]); targetDataDoc[this.props.fieldKey + "-lastModified"] = new DateField(new Date(Date.now())); -- cgit v1.2.3-70-g09d2 From b8d30a43b6bfccf70678ab8536c8caacfb5889ca Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Tue, 30 Jun 2020 17:19:22 -0400 Subject: fixed clearing of search box --- src/client/views/pdf/PDFViewer.tsx | 26 +++++++++++--------------- 1 file changed, 11 insertions(+), 15 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 372d01b9c..4fdc82388 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -114,8 +114,8 @@ export class PDFViewer extends ViewBoxAnnotatableComponent this._showWaiting = this._showCover = true); this.props.startupLive && this.setupPdfJsViewer(); this._mainCont.current && (this._mainCont.current.scrollTop = this.layoutDoc._scrollTop || 0); - this._searchReactionDisposer = reaction(() => this.Document.searchMatch, search => { - if (search) { - this.search(Doc.SearchQuery(), true); - this._lastSearch = Doc.SearchQuery(); - } - else { - setTimeout(() => this._lastSearch === "mxytzlaf" && this.search("mxytzlaf", true), 200); // bcz: how do we clear search highlights? - this._lastSearch && (this._lastSearch = "mxytzlaf"); - } - }, { fireImmediately: true }); + this._searchReactionDisposer = reaction(() => this.Document.searchMatch, + m => { + if (m) (this._lastSearch = true) && this.search(Doc.SearchQuery(), true); + else !(this._lastSearch = false) && setTimeout(() => !this._lastSearch && this.search("", false, true), 200); + }, { fireImmediately: true }); this._selectionReactionDisposer = reaction(() => this.props.isSelected(), selected => { @@ -395,11 +390,12 @@ export class PDFViewer extends ViewBoxAnnotatableComponent { - if (!searchString) { + search = (searchString: string, fwd: boolean, clear: boolean = false) => { + if (clear) { + this._pdfViewer.findController.executeCommand('reset', {}); + } else if (!searchString) { fwd ? this.nextAnnotation() : this.prevAnnotation(); - } - else if (this._pdfViewer.pageViewsReady) { + } else if (this._pdfViewer.pageViewsReady) { this._pdfViewer.findController.executeCommand('findagain', { caseSensitive: false, findPrevious: !fwd, -- cgit v1.2.3-70-g09d2 From 3cc69c7f5ae7f7a747ab72b522ea81af38dd7f20 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Tue, 30 Jun 2020 16:45:23 -0500 Subject: slight mods to inline links --- src/client/views/nodes/LinkDocPreview.tsx | 79 +++++++++++----------- .../formattedText/FormattedTextBoxComment.tsx | 6 +- 2 files changed, 45 insertions(+), 40 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx index 1d2c022a7..d02896436 100644 --- a/src/client/views/nodes/LinkDocPreview.tsx +++ b/src/client/views/nodes/LinkDocPreview.tsx @@ -98,45 +98,46 @@ export class LinkDocPreview extends React.Component { {this._toolTipText}
: -
-
{this._targetDoc.title} -
-
-
-
- -
-
-
-
; + //
+ //
{this._targetDoc.title} + //
+ //
+ //
+ //
+ // + //
+ //
+ //
+ ; + //
; } render() { diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx index a4153a40c..8eeeae051 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx @@ -73,6 +73,8 @@ export class FormattedTextBoxComment { static targetDoc: Doc | undefined; static _editRef = React.createRef(); + static openDoc: any; + constructor(view: any) { if (!FormattedTextBoxComment.tooltip) { const root = document.getElementById("root"); @@ -99,6 +101,7 @@ export class FormattedTextBoxComment { if (FormattedTextBoxComment.linkDoc && !keep && textBox) { if (FormattedTextBoxComment.linkDoc.author) { if (FormattedTextBoxComment.linkDoc.type !== DocumentType.LINK) { + FormattedTextBoxComment.openDoc = textBox.props.addDocTab(FormattedTextBoxComment.linkDoc, e.ctrlKey ? "inTab" : "onRight"); textBox.props.addDocTab(FormattedTextBoxComment.linkDoc, e.ctrlKey ? "inTab" : "onRight"); } else { DocumentManager.Instance.FollowLink(FormattedTextBoxComment.linkDoc, textBox.props.Document, @@ -119,6 +122,7 @@ export class FormattedTextBoxComment { @action public static deleteLink = (): void => { + console.log(FormattedTextBoxComment.linkDoc); FormattedTextBoxComment.linkDoc ? LinkManager.Instance.deleteLink(FormattedTextBoxComment.linkDoc) : null; //this.props.showLinks(); LinkDocPreview.LinkInfo = undefined; @@ -139,7 +143,7 @@ export class FormattedTextBoxComment { DocumentLinksButton.EditLink = undefined; LinkDocPreview.LinkInfo = undefined; FormattedTextBoxComment.targetDoc ? DocumentManager.Instance.FollowLink(FormattedTextBoxComment.linkDoc, FormattedTextBoxComment.targetDoc, - doc => MainView.addDocTabFunc(doc, "onRight"), false) : null; + doc => FormattedTextBoxComment, false) : null; } public static Hide() { -- cgit v1.2.3-70-g09d2 From 6af97864aabe89153487d37bf78391ff525deadd Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Tue, 30 Jun 2020 23:57:47 -0400 Subject: added left/right/center justify text buttons. changed unpinned text menu --- src/client/views/MainView.tsx | 4 +- .../formattedText/ProsemirrorExampleTransfer.ts | 24 +++--------- .../views/nodes/formattedText/RichTextMenu.tsx | 45 +++++++++++++++++----- .../views/nodes/formattedText/RichTextRules.ts | 3 -- 4 files changed, 44 insertions(+), 32 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 200486279..f6db1af66 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -5,7 +5,7 @@ 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, - faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown + faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight } from '@fortawesome/free-solid-svg-icons'; import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -142,7 +142,7 @@ 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); + faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight); this.initEventListeners(); this.initAuthenticationRouters(); } diff --git a/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts b/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts index 1bbcb9fa8..9d69f4be7 100644 --- a/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts +++ b/src/client/views/nodes/formattedText/ProsemirrorExampleTransfer.ts @@ -1,7 +1,6 @@ import { chainCommands, exitCode, joinDown, joinUp, lift, deleteSelection, joinBackward, selectNodeBackward, setBlockType, splitBlockKeepMarks, toggleMark, wrapIn, newlineInCode } from "prosemirror-commands"; import { liftTarget } from "prosemirror-transform"; import { redo, undo } from "prosemirror-history"; -import { undoInputRule } from "prosemirror-inputrules"; import { Schema } from "prosemirror-model"; import { liftListItem, sinkListItem } from "./prosemirrorPatches.js"; import { splitListItem, wrapInList, } from "prosemirror-schema-list"; @@ -12,7 +11,6 @@ import { Doc, DataSym } from "../../../../fields/Doc"; import { FormattedTextBox } from "./FormattedTextBox"; import { Id } from "../../../../fields/FieldSymbols"; import { Docs } from "../../../documents/Documents"; -import { update } from "lodash"; const mac = typeof navigator !== "undefined" ? /Mac/.test(navigator.platform) : false; @@ -215,10 +213,13 @@ export default function buildKeymap>(schema: S, props: any marks && tx3.setStoredMarks([...marks]); dispatch(tx3); })) { + const fromattrs = state.selection.$from.node().attrs; if (!splitBlockKeepMarks(state, (tx3: Transaction) => { - splitMetadata(marks, tx3); - if (!liftListItem(schema.nodes.list_item)(tx3, dispatch as ((tx: Transaction>) => void))) { - dispatch(tx3); + const tonode = tx3.selection.$to.node(); + const tx4 = tx3.setNodeMarkup(tx3.selection.to - 1, tonode.type, fromattrs, tonode.marks); + splitMetadata(marks, tx4); + if (!liftListItem(schema.nodes.list_item)(tx4, dispatch as ((tx: Transaction>) => void))) { + dispatch(tx4); } })) { return false; @@ -281,19 +282,6 @@ export default function buildKeymap>(schema: S, props: any return false; }); - // bind("^", (state: EditorState, dispatch: (tx: Transaction) => void) => { - // let newNode = schema.nodes.footnote.create({}); - // if (dispatch && state.selection.from === state.selection.to) { - // let tr = state.tr; - // tr.replaceSelectionWith(newNode); // replace insertion with a footnote. - // dispatch(tr.setSelection(new NodeSelection( // select the footnote node to open its display - // tr.doc.resolve( // get the location of the footnote node by subtracting the nodesize of the footnote from the current insertion point anchor (which will be immediately after the footnote node) - // tr.selection.anchor - tr.selection.$anchor.nodeBefore!.nodeSize)))); - // return true; - // } - // return false; - // }); - return keys; } diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx index 839943aac..a06fcec9a 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.tsx +++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx @@ -412,6 +412,28 @@ export default class RichTextMenu extends AntimodeMenu { dispatch?.(tr.replaceSelectionWith(newNode).removeMark(tr.selection.from - 1, tr.selection.from, mark)); return true; } + alignCenter = (state: EditorState, dispatch: any) => { + return this.alignParagraphs(state, "center", dispatch); + } + alignLeft = (state: EditorState, dispatch: any) => { + return this.alignParagraphs(state, "left", dispatch); + } + alignRight = (state: EditorState, dispatch: any) => { + return this.alignParagraphs(state, "right", dispatch); + } + + alignParagraphs(state: EditorState, align: "left" | "right" | "center", dispatch: any) { + var tr = state.tr; + state.doc.nodesBetween(state.selection.from, state.selection.to, (node, pos, parent, index) => { + if (node.type === schema.nodes.paragraph) { + tr = tr.setNodeMarkup(pos, node.type, { ...node.attrs, align }, node.marks); + return false; + } + return true; + }); + dispatch?.(tr); + return true; + } insertBlockquote(state: EditorState, dispatch: any) { const path = (state.selection.$from as any).path; @@ -768,18 +790,21 @@ export default class RichTextMenu extends AntimodeMenu { TraceMobx(); const row1 =
{[ !this.collapsed ? this.getDragger() : (null), - this.createButton("bold", "Bold", this.boldActive, toggleMark(schema.marks.strong)), - this.createButton("italic", "Italic", this.italicsActive, toggleMark(schema.marks.em)), - this.createButton("underline", "Underline", this.underlineActive, toggleMark(schema.marks.underline)), - this.createButton("strikethrough", "Strikethrough", this.strikethroughActive, toggleMark(schema.marks.strikethrough)), - this.createButton("superscript", "Superscript", this.superscriptActive, toggleMark(schema.marks.superscript)), - this.createButton("subscript", "Subscript", this.subscriptActive, toggleMark(schema.marks.subscript)), + !this.Pinned ? (null) : <> {[ + this.createButton("bold", "Bold", this.boldActive, toggleMark(schema.marks.strong)), + this.createButton("italic", "Italic", this.italicsActive, toggleMark(schema.marks.em)), + this.createButton("underline", "Underline", this.underlineActive, toggleMark(schema.marks.underline)), + this.createButton("strikethrough", "Strikethrough", this.strikethroughActive, toggleMark(schema.marks.strikethrough)), + this.createButton("superscript", "Superscript", this.superscriptActive, toggleMark(schema.marks.superscript)), + this.createButton("subscript", "Subscript", this.subscriptActive, toggleMark(schema.marks.subscript)), + ]}, this.createColorButton(), this.createHighlighterButton(), this.createLinkButton(), this.createBrushButton(), - this.createButton("sort-amount-down", "Summarize", undefined, this.insertSummarizer), - this.createButton("quote-left", "Blockquote", undefined, this.insertBlockquote), + this.createButton("align-left", "Align Left", undefined, this.alignLeft), + this.createButton("align-center", "Align Center", undefined, this.alignCenter), + this.createButton("align-right", "Align Right", undefined, this.alignRight), ]}
; const row2 =
@@ -787,7 +812,9 @@ export default class RichTextMenu extends AntimodeMenu {
{[this.createMarksDropdown(this.activeFontSize, this.fontSizeOptions, "font size"), this.createMarksDropdown(this.activeFontFamily, this.fontFamilyOptions, "font family"), - this.createNodesDropdown(this.activeListType, this.listTypeOptions, "nodes")]} + this.createNodesDropdown(this.activeListType, this.listTypeOptions, "nodes"), + this.createButton("sort-amount-down", "Summarize", undefined, this.insertSummarizer), + this.createButton("quote-left", "Blockquote", undefined, this.insertBlockquote),]}
{/*
diff --git a/src/client/views/nodes/formattedText/RichTextRules.ts b/src/client/views/nodes/formattedText/RichTextRules.ts index 6a85e3b7c..612a824fc 100644 --- a/src/client/views/nodes/formattedText/RichTextRules.ts +++ b/src/client/views/nodes/formattedText/RichTextRules.ts @@ -315,8 +315,6 @@ export class RichTextRules { return node ? state.tr.replaceRangeWith(start, end, dashDoc).setStoredMarks([...node.marks, ...(sm ? sm : [])]) : state.tr; }), - - // create an inline view of a tag stored under the '#' field new InputRule( new RegExp(/#([a-zA-Z_\-]+[a-zA-Z_;\-0-9]*)\s$/), @@ -374,7 +372,6 @@ export class RichTextRules { new InputRule( new RegExp(/%\)/), (state, match, start, end) => { - return state.tr.deleteRange(start, end).removeStoredMark(state.schema.marks.summarizeInclusive.create()); }), -- cgit v1.2.3-70-g09d2 From 973e49dc36f208cc7f9a261cbe03e8d65d001b92 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 1 Jul 2020 01:53:42 -0400 Subject: added isPushpin. added 'hidden' for DocumentViews to stop displaying them. made pushpin's FontIconBox's. made Esc close context menu. --- src/client/util/DocumentManager.ts | 8 +- src/client/views/ContextMenu.tsx | 2 + src/client/views/DocumentDecorations.tsx | 92 +++++++++++----------- src/client/views/GlobalKeyHandler.ts | 6 +- src/client/views/collections/CollectionSubView.tsx | 2 +- src/client/views/collections/CollectionView.tsx | 12 +-- src/client/views/nodes/DocumentView.tsx | 3 +- src/client/views/nodes/FontIconBox.tsx | 9 ++- 8 files changed, 74 insertions(+), 60 deletions(-) (limited to 'src/client/views') diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts index fb5d1717e..1fa5faeb3 100644 --- a/src/client/util/DocumentManager.ts +++ b/src/client/util/DocumentManager.ts @@ -146,7 +146,7 @@ export class DocumentManager { }; const docView = getFirstDocView(targetDoc, originatingDoc); let annotatedDoc = await Cast(targetDoc.annotationOn, Doc); - if (annotatedDoc) { + if (annotatedDoc && !linkDoc?.isPushpin) { const first = getFirstDocView(annotatedDoc); if (first) { annotatedDoc = first.props.Document; @@ -156,7 +156,11 @@ export class DocumentManager { } } if (docView) { // we have a docView already and aren't forced to create a new one ... just focus on the document. TODO move into view if necessary otherwise just highlight? - docView.props.focus(docView.props.Document, willZoom, undefined, focusAndFinish); + if (linkDoc?.isPushpin) docView.props.Document.hidden = !docView.props.Document.hidden; + else { + docView.props.Document.hidden && (docView.props.Document.hidden = undefined); + docView.props.focus(docView.props.Document, willZoom, undefined, focusAndFinish); + } highlight(); } else { const contextDocs = docContext ? await DocListCastAsync(docContext.data) : undefined; diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx index 941d7b44a..07f7b8e6d 100644 --- a/src/client/views/ContextMenu.tsx +++ b/src/client/views/ContextMenu.tsx @@ -155,9 +155,11 @@ export class ContextMenu extends React.Component { @action closeMenu = () => { + const wasOpen = this._display; this.clearItems(); this._display = false; this._shouldDisplay = false; + return wasOpen; } @computed get filteredItems(): (OriginalMenuProps | string[])[] { diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 4fda10926..a45ef8862 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -600,52 +600,54 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> zIndex: SelectionManager.SelectedDocuments().length > 1 ? 900 : 0, }} onPointerDown={this.onBackgroundDown} onContextMenu={e => { e.preventDefault(); e.stopPropagation(); }} >
-
- {maximizeIcon} - {titleArea} - {SelectionManager.SelectedDocuments().length !== 1 || seldoc.Document.type === DocumentType.INK ? (null) : -
- {"_"} -
} -
- {SelectionManager.SelectedDocuments().length === 1 ? DocumentDecorations.DocumentIcon(StrCast(seldoc.props.Document.layout, "...")) : "..."} + {bounds.r - bounds.x < 15 && bounds.b - bounds.y < 15 ? (null) : <> +
+ {maximizeIcon} + {titleArea} + {SelectionManager.SelectedDocuments().length !== 1 || seldoc.Document.type === DocumentType.INK ? (null) : +
+ {"_"} +
} +
+ {SelectionManager.SelectedDocuments().length === 1 ? DocumentDecorations.DocumentIcon(StrCast(seldoc.props.Document.layout, "...")) : "..."} +
+
⟲
+
e.preventDefault()}>
+
e.preventDefault()}>
+
e.preventDefault()}>
+
e.preventDefault()}>
+
+
e.preventDefault()}>
+
e.preventDefault()}>
+
e.preventDefault()}>
+
e.preventDefault()}>
+ {seldoc.props.renderDepth <= 1 || !seldoc.props.ContainingCollectionView ? (null) : +
e.preventDefault()}> + +
} +
e.preventDefault()}>
+ +
+
+
-
⟲
-
e.preventDefault()}>
-
e.preventDefault()}>
-
e.preventDefault()}>
-
e.preventDefault()}>
-
-
e.preventDefault()}>
-
e.preventDefault()}>
-
e.preventDefault()}>
-
e.preventDefault()}>
- {seldoc.props.renderDepth <= 1 || !seldoc.props.ContainingCollectionView ? (null) : -
e.preventDefault()}> - -
} -
e.preventDefault()}>
- -
-
- -
+ }
); } diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts index e3546dece..c85849adb 100644 --- a/src/client/views/GlobalKeyHandler.ts +++ b/src/client/views/GlobalKeyHandler.ts @@ -20,6 +20,7 @@ import { MainView } from "./MainView"; import { DocumentView } from "./nodes/DocumentView"; import { DocumentLinksButton } from "./nodes/DocumentLinksButton"; import PDFMenu from "./pdf/PDFMenu"; +import { ContextMenu } from "./ContextMenu"; const modifiers = ["control", "meta", "shift", "alt"]; type KeyHandler = (keycode: string, e: KeyboardEvent) => KeyControlInfo | Promise; @@ -81,16 +82,17 @@ export default class KeyManager { DocumentLinksButton.StartLink = undefined; const main = MainView.Instance; Doc.SetSelectedTool(InkTool.None); + var doDeselect = true; if (main.isPointerDown) { DragManager.AbortDrag(); } else { if (CollectionDockingView.Instance.HasFullScreen()) { CollectionDockingView.Instance.CloseFullScreen(); } else { - SelectionManager.DeselectAll(); + doDeselect = !ContextMenu.Instance.closeMenu(); } } - SelectionManager.DeselectAll(); + doDeselect && SelectionManager.DeselectAll(); DictationManager.Controls.stop(); // RecommendationsBox.Instance.closeMenu(); GoogleAuthenticationManager.Instance.cancel(); diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index d107db86b..95c4898cc 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -225,7 +225,7 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: const movedDocs = docDragData.droppedDocuments.filter((d, i) => docDragData.draggedDocuments[i] === d); const addedDocs = docDragData.droppedDocuments.filter((d, i) => docDragData.draggedDocuments[i] !== d); const res = addedDocs.length ? this.addDocument(addedDocs) : true; - added = movedDocs.length ? docDragData.moveDocument(movedDocs, this.props.Document, de.embedKey || !this.props.isAnnotationOverlay ? this.addDocument : returnFalse) : res; + added = movedDocs.length ? docDragData.moveDocument(movedDocs, this.props.Document, Doc.AreProtosEqual(Cast(movedDocs[0].annotationOn, Doc, null), this.props.Document) || de.embedKey || !this.props.isAnnotationOverlay ? this.addDocument : returnFalse) : res; } else { added = this.addDocument(docDragData.droppedDocuments); } diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index dab82185a..705fbdd34 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -141,15 +141,17 @@ export class CollectionView extends Touchable { const context = Cast(doc.context, Doc, null); - if (context && (context?.type === DocumentType.VID || context.type === DocumentType.WEB || context.type === DocumentType.PDF || context.type === DocumentType.IMG)) { - const pushpin = Docs.Create.FreeformDocument([], { - title: "pushpin", x: Cast(doc.x, "number", null), y: Cast(doc.y, "number", null), - _width: 10, _height: 10, _backgroundColor: "red", isLinkButton: true, displayTimecode: Cast(doc.displayTimecode, "number", null) + if (context && (context.type === DocumentType.VID || context.type === DocumentType.WEB || context.type === DocumentType.PDF || context.type === DocumentType.IMG) && + !DocListCast(doc.links).some(d => d.isPushpin)) { + const pushpin = Docs.Create.FontIconDocument({ + icon: "map-pin", x: Cast(doc.x, "number", null), y: Cast(doc.y, "number", null), _backgroundColor: "#0000003d", color: "#ACCEF7", + _width: 15, _height: 15, _xPadding: 0, isLinkButton: true, displayTimecode: Cast(doc.displayTimecode, "number", null) }); Doc.AddDocToList(context, Doc.LayoutFieldKey(context) + "-annotations", pushpin); - DocUtils.MakeLink({ doc: pushpin }, { doc: doc }, "pushpin"); + const pushpinLink = DocUtils.MakeLink({ doc: pushpin }, { doc: doc }, "pushpin"); const first = DocListCast(pushpin.links).find(d => d instanceof Doc); first && (first.hidden = true); + pushpinLink && (Doc.GetProto(pushpinLink).isPushpin = true); doc.displayTimecode = undefined; } doc.context = this.props.Document; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 21b6d8310..09eeaee36 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1169,8 +1169,9 @@ export class DocumentView extends DocComponent(Docu } render() { - if (this.props.Document[AclSym] && this.props.Document[AclSym] === AclPrivate) return (null); if (!(this.props.Document instanceof Doc)) return (null); + if (this.props.Document[AclSym] && this.props.Document[AclSym] === AclPrivate) return (null); + if (this.props.Document.hidden) return (null); const backgroundColor = Doc.UserDoc().renderStyle === "comic" ? undefined : this.props.forcedBackgroundColor?.(this.Document) || StrCast(this.layoutDoc._backgroundColor) || StrCast(this.layoutDoc.backgroundColor) || StrCast(this.Document.backgroundColor) || this.props.backgroundColor?.(this.Document); const opacity = Cast(this.layoutDoc._opacity, "number", Cast(this.layoutDoc.opacity, "number", Cast(this.Document.opacity, "number", null))); const finalOpacity = this.props.opacity ? this.props.opacity() : opacity; diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx index cf0b16c7c..5e8dd2497 100644 --- a/src/client/views/nodes/FontIconBox.tsx +++ b/src/client/views/nodes/FontIconBox.tsx @@ -5,7 +5,7 @@ import { createSchema, makeInterface } from '../../../fields/Schema'; import { DocComponent } from '../DocComponent'; import './FontIconBox.scss'; import { FieldView, FieldViewProps } from './FieldView'; -import { StrCast, Cast } from '../../../fields/Types'; +import { StrCast, Cast, NumCast } from '../../../fields/Types'; import { Utils } from "../../../Utils"; import { runInAction, observable, reaction, IReactionDisposer } from 'mobx'; import { Doc } from '../../../fields/Doc'; @@ -59,13 +59,14 @@ export class FontIconBox extends DocComponent( render() { const referenceDoc = (this.layoutDoc.dragFactory instanceof Doc ? this.layoutDoc.dragFactory : this.layoutDoc); - const referenceLayout = Doc.Layout(referenceDoc); + const refLayout = Doc.Layout(referenceDoc); return ; } -- cgit v1.2.3-70-g09d2 From a3ce7e180110df7e5908b93418b2dbff80aa89b5 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 1 Jul 2020 02:50:28 -0400 Subject: added pasting of snipped images (mac at least) --- src/Utils.ts | 16 ++++++ src/client/documents/Documents.ts | 30 ++++++++++- src/client/views/PreviewCursor.tsx | 21 ++++++-- src/client/views/collections/CollectionSubView.tsx | 59 +++++----------------- 4 files changed, 75 insertions(+), 51 deletions(-) (limited to 'src/client/views') diff --git a/src/Utils.ts b/src/Utils.ts index dba802f98..a01a94134 100644 --- a/src/Utils.ts +++ b/src/Utils.ts @@ -7,6 +7,22 @@ import { ColorState } from 'react-color'; export namespace Utils { export let DRAG_THRESHOLD = 4; + export function readUploadedFileAsText(inputFile: File) { + const temporaryFileReader = new FileReader(); + + return new Promise((resolve, reject) => { + temporaryFileReader.onerror = () => { + temporaryFileReader.abort(); + reject(new DOMException("Problem parsing input file.")); + }; + + temporaryFileReader.onload = () => { + resolve(temporaryFileReader.result); + }; + temporaryFileReader.readAsText(inputFile); + }); + } + export function GenerateGuid(): string { return v4(); } diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 4c27cf47d..85da621e0 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -1,5 +1,5 @@ import { runInAction } from "mobx"; -import { extname } from "path"; +import { extname, basename } from "path"; import { DateField } from "../../fields/DateField"; import { Doc, DocListCast, DocListCastAsync, Field, HeightSym, Opt, WidthSym } from "../../fields/Doc"; import { HtmlField } from "../../fields/HtmlField"; @@ -48,6 +48,8 @@ import { PresElementBox } from "../views/presentationview/PresElementBox"; import { RecommendationsBox } from "../views/RecommendationsBox"; import { DashWebRTCVideo } from "../views/webcam/DashWebRTCVideo"; import { DocumentType } from "./DocumentTypes"; +import { Networking } from "../Network"; +import { Upload } from "../../server/SharedMediaTypes"; const path = require('path'); export interface DocumentOptions { @@ -1104,6 +1106,32 @@ export namespace DocUtils { }); return optionsCollection; } + + export async function uploadFilesToDocs(files: File[], options: DocumentOptions) { + const generatedDocuments: Doc[] = []; + for (const { source: { name, type }, result } of await Networking.UploadFilesToServer(files)) { + if (result instanceof Error) { + alert(`Upload failed: ${result.message}`); + return []; + } + const full = { ...options, _width: 400, title: name }; + const pathname = Utils.prepend(result.accessPaths.agnostic.client); + const doc = await DocUtils.DocumentFromType(type, pathname, full); + if (!doc) { + continue; + } + const proto = Doc.GetProto(doc); + proto.text = result.rawText; + proto.fileUpload = basename(pathname).replace("upload_", "").replace(/\.[a-z0-9]*$/, ""); + if (Upload.isImageInformation(result)) { + proto["data-nativeWidth"] = (result.nativeWidth > result.nativeHeight) ? 400 * result.nativeWidth / result.nativeHeight : 400; + proto["data-nativeHeight"] = (result.nativeWidth > result.nativeHeight) ? 400 : 400 / (result.nativeWidth / result.nativeHeight); + proto.contentSize = result.contentSize; + } + generatedDocuments.push(doc); + } + return generatedDocuments; + } } Scripting.addGlobal("Docs", Docs); diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx index 1ab99881d..6583589f3 100644 --- a/src/client/views/PreviewCursor.tsx +++ b/src/client/views/PreviewCursor.tsx @@ -3,13 +3,18 @@ import { observer } from 'mobx-react'; import "normalize.css"; import * as React from 'react'; import "./PreviewCursor.scss"; -import { Docs } from '../documents/Documents'; +import { Docs, DocUtils } from '../documents/Documents'; import { Doc } from '../../fields/Doc'; import { Transform } from "../util/Transform"; import { DocServer } from '../DocServer'; -import { undoBatch } from '../util/UndoManager'; +import { undoBatch, UndoManager } from '../util/UndoManager'; import { NumCast } from '../../fields/Types'; import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox'; +import * as rp from 'request-promise'; +import { Utils } from '../../Utils'; +import { Networking } from '../Network'; +import { Upload } from '../../server/SharedMediaTypes'; +import { basename } from 'path'; @observer export class PreviewCursor extends React.Component<{}> { @@ -26,7 +31,7 @@ export class PreviewCursor extends React.Component<{}> { document.addEventListener("paste", this.paste); } - paste = (e: ClipboardEvent) => { + paste = async (e: ClipboardEvent) => { if (PreviewCursor.Visible && e.clipboardData) { const newPoint = PreviewCursor._getTransform().transformPoint(PreviewCursor._clickPoint[0], PreviewCursor._clickPoint[1]); runInAction(() => PreviewCursor.Visible = false); @@ -104,6 +109,16 @@ export class PreviewCursor extends React.Component<{}> { x: newPoint[0], y: newPoint[1], })))(); + } else if (e.clipboardData.items.length) { + const batch = UndoManager.StartBatch("collection view drop"); + const files: File[] = []; + for (let i = 0; i < e.clipboardData.items.length; i++) { + const file = e.clipboardData.items[i].getAsFile(); + file && files.push(file); + } + const generatedDocuments = await DocUtils.uploadFilesToDocs(files, { x: newPoint[0], y: newPoint[1] }); + generatedDocuments.forEach(PreviewCursor._addDocument); + batch.end(); } } } diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 95c4898cc..ecd16d22f 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -238,21 +238,7 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: } return false; } - readUploadedFileAsText = (inputFile: File) => { - const temporaryFileReader = new FileReader(); - return new Promise((resolve, reject) => { - temporaryFileReader.onerror = () => { - temporaryFileReader.abort(); - reject(new DOMException("Problem parsing input file.")); - }; - - temporaryFileReader.onload = () => { - resolve(temporaryFileReader.result); - }; - temporaryFileReader.readAsText(inputFile); - }); - } @undoBatch @action protected async onExternalDrop(e: React.DragEvent, options: DocumentOptions, completed?: () => void) { @@ -271,8 +257,7 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: e.stopPropagation(); e.preventDefault(); - const { addDocument } = this; - if (!addDocument) { + if (!this.addDocument) { alert("this.props.addDocument does not exist. Aborting drop operation."); return; } @@ -286,14 +271,14 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: DocServer.GetRefField(docid).then(f => { if (f instanceof Doc) { if (options.x || options.y) { f.x = options.x; f.y = options.y; } // should be in CollectionFreeFormView - (f instanceof Doc) && addDocument(f); + (f instanceof Doc) && this.addDocument(f); } }); } else { - addDocument(Docs.Create.WebDocument(href, { ...options, title: href })); + this.addDocument(Docs.Create.WebDocument(href, { ...options, title: href })); } } else if (text) { - addDocument(Docs.Create.TextDocument(text, { ...options, _width: 100, _height: 25 })); + this.addDocument(Docs.Create.TextDocument(text, { ...options, _width: 100, _height: 25 })); } return; } @@ -313,7 +298,7 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: if (source.startsWith("http")) { const doc = Docs.Create.ImageDocument(source, { ...options, _width: 300 }); ImageUtils.ExtractExif(doc); - addDocument(doc); + this.addDocument(doc); } return; } else { @@ -360,7 +345,7 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: if (text) { if (text.includes("www.youtube.com/watch") || text.includes("www.youtube.com/embed")) { const url = text.replace("youtube.com/watch?v=", "youtube.com/embed/").split("&")[0]; - addDocument(Docs.Create.VideoDocument(url, { + this.addDocument(Docs.Create.VideoDocument(url, { ...options, title: url, _width: 400, @@ -413,10 +398,10 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: const file = item.getAsFile(); file?.type && files.push(file); - file?.type === "application/json" && this.readUploadedFileAsText(file).then(result => { + file?.type === "application/json" && Utils.readUploadedFileAsText(file).then(result => { console.log(result); const json = JSON.parse(result as string); - addDocument(Docs.Create.TreeDocument( + this.addDocument(Docs.Create.TreeDocument( json["rectangular-puzzle"].crossword.clues[0].clue.map((c: any) => { const label = Docs.Create.LabelDocument({ title: c["#text"], _width: 120, _height: 20 }); const proto = Doc.GetProto(label); @@ -428,38 +413,18 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: }); } } - for (const { source: { name, type }, result } of await Networking.UploadFilesToServer(files)) { - if (result instanceof Error) { - alert(`Upload failed: ${result.message}`); - return; - } - const full = { ...options, _width: 400, title: name }; - const pathname = Utils.prepend(result.accessPaths.agnostic.client); - const doc = await DocUtils.DocumentFromType(type, pathname, full); - if (!doc) { - continue; - } - const proto = Doc.GetProto(doc); - proto.text = result.rawText; - proto.fileUpload = basename(pathname).replace("upload_", "").replace(/\.[a-z0-9]*$/, ""); - if (Upload.isImageInformation(result)) { - proto["data-nativeWidth"] = (result.nativeWidth > result.nativeHeight) ? 400 * result.nativeWidth / result.nativeHeight : 400; - proto["data-nativeHeight"] = (result.nativeWidth > result.nativeHeight) ? 400 : 400 / (result.nativeWidth / result.nativeHeight); - proto.contentSize = result.contentSize; - } - generatedDocuments.push(doc); - } + generatedDocuments.push(...await DocUtils.uploadFilesToDocs(files, options)); if (generatedDocuments.length) { const set = generatedDocuments.length > 1 && generatedDocuments.map(d => DocUtils.iconify(d)); if (set) { - addDocument(DocUtils.pileup(generatedDocuments, options.x!, options.y!)!); + this.addDocument(DocUtils.pileup(generatedDocuments, options.x!, options.y!)!); } else { - generatedDocuments.forEach(addDocument); + generatedDocuments.forEach(this.addDocument); } completed?.(); } else { if (text && !text.includes("https://")) { - addDocument(Docs.Create.TextDocument(text, { ...options, _width: 400, _height: 315 })); + this.addDocument(Docs.Create.TextDocument(text, { ...options, _width: 400, _height: 315 })); } } batch.end(); -- cgit v1.2.3-70-g09d2 From 9b8b6f79bef78be68a9982ea008e308bba4872b3 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 1 Jul 2020 11:37:48 -0400 Subject: fixed text menu to make button commands undoable. fixed hiding of menu to not disappear after pulldown command selection in a cleaner way --- src/client/views/AntimodeMenu.tsx | 9 ++-- .../views/nodes/formattedText/FormattedTextBox.tsx | 38 +++++++++----- .../views/nodes/formattedText/RichTextMenu.tsx | 61 ++++++++++++++-------- 3 files changed, 68 insertions(+), 40 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/AntimodeMenu.tsx b/src/client/views/AntimodeMenu.tsx index 3e4d20fea..a4634103c 100644 --- a/src/client/views/AntimodeMenu.tsx +++ b/src/client/views/AntimodeMenu.tsx @@ -51,18 +51,15 @@ export default abstract class AntimodeMenu extends React.Component { if (this._opacity === 0.2) { this._transitionProperty = "opacity"; this._transitionDuration = "0.1s"; - this._transitionDelay = ""; - this._opacity = 0; - this._left = this._top = -300; } if (forceOut) { this._transitionProperty = ""; this._transitionDuration = ""; - this._transitionDelay = ""; - this._opacity = 0; - this._left = this._top = -300; } + this._transitionDelay = ""; + this._opacity = 0; + this._left = this._top = -300; } } diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 2cb55e0fa..f4aa7919f 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -86,6 +86,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp public static blankState = () => EditorState.create(FormattedTextBox.Instance.config); public static Instance: FormattedTextBox; public ProseRef?: HTMLDivElement; + public get EditorView() { return this._editorView; } private _ref: React.RefObject = React.createRef(); private _scrollRef: React.RefObject = React.createRef(); private _editorView: Opt; @@ -93,7 +94,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp private _searchIndex = 0; private _undoTyping?: UndoManager.Batch; private _disposers: { [name: string]: IReactionDisposer } = {}; - private dropDisposer?: DragManager.DragDropDisposer; + private _dropDisposer?: DragManager.DragDropDisposer; @computed get _recording() { return this.dataDoc.audioState === "recording"; } set _recording(value) { this.dataDoc.audioState = value ? "recording" : undefined; } @@ -291,8 +292,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp } protected createDropTarget = (ele: HTMLDivElement) => { this.ProseRef = ele; - this.dropDisposer?.(); - ele && (this.dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this), this.layoutDoc)); + this._dropDisposer?.(); + ele && (this._dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this), this.layoutDoc)); } @undoBatch @@ -660,8 +661,10 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp incomingValue => { if (incomingValue !== undefined && this._editorView && !this._applyingChange) { const updatedState = JSON.parse(incomingValue); - this._editorView.updateState(EditorState.fromJSON(this.config, updatedState)); - this.tryUpdateHeight(); + if (JSON.stringify(this._editorView!.state.toJSON()) !== JSON.stringify(updatedState)) { + this._editorView.updateState(EditorState.fromJSON(this.config, updatedState)); + this.tryUpdateHeight(); + } } } ); @@ -1046,6 +1049,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp @action onFocused = (e: React.FocusEvent): void => { + console.log("FOUCSS") FormattedTextBox.FocusedBox = this; this.tryUpdateHeight(); @@ -1163,18 +1167,28 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp }); } - public static HadSelection: boolean = false; - onBlur = (e: any) => { - FormattedTextBox.HadSelection = window.getSelection()?.toString() !== ""; - //DictationManager.Controls.stop(false); + public startUndoTypingBatch() { + this._undoTyping = UndoManager.StartBatch("undoTyping"); + } + + public endUndoTypingBatch() { + const wasUndoing = this._undoTyping; if (this._undoTyping) { this._undoTyping.end(); this._undoTyping = undefined; } + return wasUndoing; + } + public static HadSelection: boolean = false; + onBlur = (e: any) => { + console.log("BLURRR") + FormattedTextBox.HadSelection = window.getSelection()?.toString() !== ""; + //DictationManager.Controls.stop(false); + this.endUndoTypingBatch(); this.doLinkOnDeselect(); // move the richtextmenu offscreen - if (!RichTextMenu.Instance.Pinned && !RichTextMenu.Instance.overMenu) RichTextMenu.Instance.jumpTo(-300, -300); + if (!RichTextMenu.Instance.Pinned) RichTextMenu.Instance.delayHide(); } _lastTimedMark: Mark | undefined = undefined; @@ -1208,7 +1222,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp // this._editorView!.dispatch(this._editorView!.state.tr.removeStoredMark(schema.marks.user_mark.create({})).addStoredMark(mark)); if (!this._undoTyping) { - this._undoTyping = UndoManager.StartBatch("undoTyping"); + this.startUndoTypingBatch(); } } @@ -1308,7 +1322,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp onScroll={this.onscrolled} onDrop={this.ondrop} >
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx index a06fcec9a..7c7a76e1b 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.tsx +++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx @@ -2,7 +2,7 @@ import React = require("react"); import { IconProp, library } from '@fortawesome/fontawesome-svg-core'; import { faBold, faCaretDown, faChevronLeft, faEyeDropper, faHighlighter, faIndent, faItalic, faLink, faPaintRoller, faPalette, faStrikethrough, faSubscript, faSuperscript, faUnderline } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { action, observable } from "mobx"; +import { action, observable, IReactionDisposer, reaction } from "mobx"; import { observer } from "mobx-react"; import { lift, wrapIn } from "prosemirror-commands"; import { Mark, MarkType, Node as ProsNode, NodeType, ResolvedPos } from "prosemirror-model"; @@ -23,6 +23,7 @@ import { updateBullets } from "./ProsemirrorExampleTransfer"; import "./RichTextMenu.scss"; import { schema } from "./schema_rts"; import { TraceMobx } from "../../../../fields/util"; +import { UndoManager } from "../../../util/UndoManager"; const { toggleMark } = require("prosemirror-commands"); library.add(faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper, faCaretDown, faPalette, faHighlighter, faLink, faPaintRoller); @@ -68,6 +69,8 @@ export default class RichTextMenu extends AntimodeMenu { @observable private currentLink: string | undefined = ""; @observable private showLinkDropdown: boolean = false; + _reaction: IReactionDisposer | undefined; + _delayHide = false; constructor(props: Readonly<{}>) { super(props); RichTextMenu.Instance = this; @@ -138,6 +141,16 @@ export default class RichTextMenu extends AntimodeMenu { ]; } + componentDidMount() { + this._reaction = reaction(() => SelectionManager.SelectedDocuments(), + () => this._delayHide && !(this._delayHide = false) && this.fadeOut(true)); + } + componentWillUnmount() { + this._reaction?.(); + } + + public delayHide = () => { this._delayHide = true; } + @action changeView(view: EditorView) { this.view = view; @@ -147,16 +160,6 @@ export default class RichTextMenu extends AntimodeMenu { this.updateFromDash(view, lastState, this.editorProps); } - public MakeLinkToSelection = (linkDocId: string, title: string, location: string, targetDocId: string): string => { - if (this.view) { - const link = this.view.state.schema.marks.link.create({ href: Utils.prepend("/doc/" + linkDocId), title: title, location: location, linkId: linkDocId, targetId: targetDocId }); - this.view.dispatch(this.view.state.tr.removeMark(this.view.state.selection.from, this.view.state.selection.to, this.view.state.schema.marks.link). - addMark(this.view.state.selection.from, this.view.state.selection.to, link)); - return this.view.state.selection.$from.nodeAfter?.text || ""; - } - return ""; - } - @action public async updateFromDash(view: EditorView, lastState: EditorState | undefined, props: any) { if (!view) { @@ -310,8 +313,11 @@ export default class RichTextMenu extends AntimodeMenu { function onClick(e: React.PointerEvent) { e.preventDefault(); e.stopPropagation(); - self.view && command && command(self.view.state, self.view.dispatch, self.view); - self.view && onclick && onclick(self.view.state, self.view.dispatch, self.view); + self.TextView.endUndoTypingBatch(); + UndoManager.RunInBatch(() => { + self.view && command && command(self.view.state, self.view.dispatch, self.view); + self.view && onclick && onclick(self.view.state, self.view.dispatch, self.view); + }, "rich text menu command"); self.setActiveMarkButtons(self.getActiveMarksOnSelection()); } @@ -338,9 +344,10 @@ export default class RichTextMenu extends AntimodeMenu { function onChange(e: React.ChangeEvent) { e.stopPropagation(); e.preventDefault(); + self.TextView.endUndoTypingBatch(); options.forEach(({ label, mark, command }) => { if (e.target.value === label) { - self.view && mark && command(mark, self.view); + UndoManager.RunInBatch(() => self.view && mark && command(mark, self.view), "text mark dropdown"); } }); } @@ -361,9 +368,10 @@ export default class RichTextMenu extends AntimodeMenu { const self = this; function onChange(val: string) { + self.TextView.endUndoTypingBatch(); options.forEach(({ label, node, command }) => { if (val === label) { - self.view && node && command(node); + UndoManager.RunInBatch(() => self.view && node && command(node), "nodes dropdown"); } }); } @@ -461,7 +469,8 @@ export default class RichTextMenu extends AntimodeMenu { function onBrushClick(e: React.PointerEvent) { e.preventDefault(); e.stopPropagation(); - self.view && self.fillBrush(self.view.state, self.view.dispatch); + self.TextView.endUndoTypingBatch(); + UndoManager.RunInBatch(() => self.view && self.fillBrush(self.view.state, self.view.dispatch), "rt brush"); } let label = "Stored marks: "; @@ -528,19 +537,24 @@ export default class RichTextMenu extends AntimodeMenu { @action toggleColorDropdown() { this.showColorDropdown = !this.showColorDropdown; } @action setActiveColor(color: string) { this.activeFontColor = color; } + get TextView() { return (this.view as any).TextView as FormattedTextBox } createColorButton() { const self = this; function onColorClick(e: React.PointerEvent) { e.preventDefault(); e.stopPropagation(); - self.view && self.insertColor(self.activeFontColor, self.view.state, self.view.dispatch); + self.TextView.endUndoTypingBatch(); + UndoManager.RunInBatch(() => self.view && self.insertColor(self.activeFontColor, self.view.state, self.view.dispatch), "rt menu color"); + self.TextView.EditorView!.focus() } function changeColor(e: React.PointerEvent, color: string) { e.preventDefault(); e.stopPropagation(); self.setActiveColor(color); - self.view && self.insertColor(self.activeFontColor, self.view.state, self.view.dispatch); + self.TextView.endUndoTypingBatch(); + UndoManager.RunInBatch(() => self.view && self.insertColor(self.activeFontColor, self.view.state, self.view.dispatch), "rt menu color"); + self.TextView.EditorView!.focus() } const button = @@ -585,13 +599,15 @@ export default class RichTextMenu extends AntimodeMenu { function onHighlightClick(e: React.PointerEvent) { e.preventDefault(); e.stopPropagation(); - self.view && self.insertHighlight(self.activeHighlightColor, self.view.state, self.view.dispatch); + self.TextView.endUndoTypingBatch(); + UndoManager.RunInBatch(() => self.view && self.insertHighlight(self.activeHighlightColor, self.view.state, self.view.dispatch), "rt highligher"); } function changeHighlight(e: React.PointerEvent, color: string) { e.preventDefault(); e.stopPropagation(); self.setActiveHighlight(color); - self.view && self.insertHighlight(self.activeHighlightColor, self.view.state, self.view.dispatch); + self.TextView.endUndoTypingBatch(); + UndoManager.RunInBatch(() => self.view && self.insertHighlight(self.activeHighlightColor, self.view.state, self.view.dispatch), "rt highlighter"); } const button = @@ -631,7 +647,8 @@ export default class RichTextMenu extends AntimodeMenu { const self = this; function onLinkChange(e: React.ChangeEvent) { - self.setCurrentLink(e.target.value); + self.TextView.endUndoTypingBatch(); + UndoManager.RunInBatch(() => self.setCurrentLink(e.target.value), "link change"); } const link = this.currentLink ? this.currentLink : ""; @@ -766,7 +783,7 @@ export default class RichTextMenu extends AntimodeMenu { return ref_node; } - @action onPointerEnter(e: React.PointerEvent) { RichTextMenu.Instance.overMenu = true; } + @action onPointerEnter(e: React.PointerEvent) { RichTextMenu.Instance.overMenu = false; } @action onPointerLeave(e: React.PointerEvent) { RichTextMenu.Instance.overMenu = false; } @action -- cgit v1.2.3-70-g09d2 From 044c770b22f23709ac6a1b5429631e6633217282 Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Wed, 1 Jul 2020 11:04:42 -0500 Subject: modifications to text previews --- package-lock.json | 44 +++++--- src/client/views/linking/LinkMenuItem.scss | 1 - .../formattedText/FormattedTextBoxComment.scss | 57 ++++++++-- .../formattedText/FormattedTextBoxComment.tsx | 117 +++++++++++---------- 4 files changed, 141 insertions(+), 78 deletions(-) (limited to 'src/client/views') diff --git a/package-lock.json b/package-lock.json index 3136a9cc2..d42e286e2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2976,7 +2976,8 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true + "bundled": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -2994,11 +2995,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3011,15 +3014,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -3122,7 +3128,8 @@ }, "inherits": { "version": "2.0.4", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -3132,6 +3139,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3144,17 +3152,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "1.2.5", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.9.0", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3171,6 +3182,7 @@ "mkdirp": { "version": "0.5.3", "bundled": true, + "optional": true, "requires": { "minimist": "^1.2.5" } @@ -3226,7 +3238,8 @@ }, "npm-normalize-package-bin": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "npm-packlist": { "version": "1.4.8", @@ -3251,7 +3264,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -3261,6 +3275,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -3329,7 +3344,8 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true + "bundled": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -3359,6 +3375,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3376,6 +3393,7 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3414,11 +3432,13 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true + "bundled": true, + "optional": true }, "yallist": { "version": "3.1.1", - "bundled": true + "bundled": true, + "optional": true } } } diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss index fd0954f65..1669fc39d 100644 --- a/src/client/views/linking/LinkMenuItem.scss +++ b/src/client/views/linking/LinkMenuItem.scss @@ -61,7 +61,6 @@ margin: 0; margin-right: 6px; border-radius: 50%; - cursor: pointer; pointer-events: auto; background-color: $dark-color; color: $light-color; diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss b/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss index 2dd63ec21..d83583db1 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss +++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss @@ -8,10 +8,12 @@ margin-bottom: 7px; -webkit-transform: translateX(-50%); transform: translateX(-50%); - } - .FormattedTextBox-tooltip:before { +} + +.FormattedTextBox-tooltip:before { content: ""; - height: 0; width: 0; + height: 0; + width: 0; position: absolute; left: 50%; margin-left: -5px; @@ -19,10 +21,12 @@ border: 5px solid transparent; border-bottom-width: 0; border-top-color: silver; - } - .FormattedTextBox-tooltip:after { +} + +.FormattedTextBox-tooltip:after { content: ""; - height: 0; width: 0; + height: 0; + width: 0; position: absolute; left: 50%; margin-left: -5px; @@ -30,4 +34,43 @@ border: 5px solid transparent; border-bottom-width: 0; border-top-color: white; - } \ No newline at end of file +} + +.FormattedTextBox-buttons { + display: none; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + + .button { + width: 20px; + height: 20px; + margin: 0; + margin-right: 6px; + border-radius: 50%; + pointer-events: auto; + background-color: rgb(53, 146, 199); + color: rgb(150, 211, 248); + font-size: 65%; + transition: transform 0.2s; + text-align: center; + position: relative; + + .fa-icon { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + &:last-child { + margin-right: 0; + } + + &:hover { + background: rgb(53, 146, 199); + ; + } + } +} \ No newline at end of file diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx index 8eeeae051..15cd68c26 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx @@ -2,7 +2,7 @@ import { Mark, ResolvedPos } from "prosemirror-model"; import { EditorState, Plugin } from "prosemirror-state"; import { EditorView } from "prosemirror-view"; import * as ReactDOM from 'react-dom'; -import { Doc, DocCastAsync } from "../../../../fields/Doc"; +import { Doc, DocCastAsync, Opt } from "../../../../fields/Doc"; import { Cast, FieldValue, NumCast } from "../../../../fields/Types"; import { emptyFunction, returnEmptyString, returnFalse, Utils, emptyPath, returnZero, returnOne, returnEmptyFilter } from "../../../../Utils"; import { DocServer } from "../../../DocServer"; @@ -16,13 +16,11 @@ import React = require("react"); import { Docs } from "../../../documents/Documents"; import wiki from "wikijs"; import { DocumentType } from "../../../documents/DocumentTypes"; -import { computed, action, observable } from "mobx"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { LinkManager } from "../../../util/LinkManager"; -import { LinkDocPreview } from "../LinkDocPreview"; -import { DocumentLinksButton } from "../DocumentLinksButton"; -import { ContextMenu } from "../../ContextMenu"; -import { MainView } from "../../MainView"; +import { action } from "mobx"; +// import { LinkManager } from "../../../util/LinkManager"; +// import { LinkDocPreview } from "../LinkDocPreview"; +// import { DocumentLinksButton } from "../DocumentLinksButton"; export let formattedTextBoxCommentPlugin = new Plugin({ view(editorView) { return new FormattedTextBoxComment(editorView); } @@ -70,10 +68,8 @@ export class FormattedTextBoxComment { static textBox: FormattedTextBox | undefined; static linkDoc: Doc | undefined; - static targetDoc: Doc | undefined; - static _editRef = React.createRef(); - - static openDoc: any; + static _deleteRef: Opt; + static _followRef: Opt; constructor(view: any) { if (!FormattedTextBoxComment.tooltip) { @@ -88,8 +84,8 @@ export class FormattedTextBoxComment { FormattedTextBoxComment.tooltip.appendChild(FormattedTextBoxComment.tooltipText); FormattedTextBoxComment.tooltip.className = "FormattedTextBox-tooltip"; FormattedTextBoxComment.tooltip.style.pointerEvents = "all"; - FormattedTextBoxComment.tooltip.style.maxWidth = "225px"; - FormattedTextBoxComment.tooltip.style.maxHeight = "225px"; + FormattedTextBoxComment.tooltip.style.maxWidth = "350px"; + FormattedTextBoxComment.tooltip.style.maxHeight = "250px"; FormattedTextBoxComment.tooltip.style.width = "100%"; FormattedTextBoxComment.tooltip.style.height = "100%"; FormattedTextBoxComment.tooltip.style.overflow = "hidden"; @@ -100,13 +96,25 @@ export class FormattedTextBoxComment { const textBox = FormattedTextBoxComment.textBox; if (FormattedTextBoxComment.linkDoc && !keep && textBox) { if (FormattedTextBoxComment.linkDoc.author) { + + // if (FormattedTextBoxComment._deleteRef && FormattedTextBoxComment._deleteRef.contains(e.target as any)) { + // FormattedTextBoxComment.deleteLink(); + // } else if (FormattedTextBoxComment._followRef && FormattedTextBoxComment._followRef.contains(e.target as any)) { + // if (FormattedTextBoxComment.linkDoc.type !== DocumentType.LINK) { + // textBox.props.addDocTab(FormattedTextBoxComment.linkDoc, e.ctrlKey ? "inTab" : "onRight"); + // } else { + // DocumentManager.Instance.FollowLink(FormattedTextBoxComment.linkDoc, textBox.props.Document, + // (doc: Doc, followLinkLocation: string) => textBox.props.addDocTab(doc, e.ctrlKey ? "inTab" : followLinkLocation)); + // } + // } else { if (FormattedTextBoxComment.linkDoc.type !== DocumentType.LINK) { - FormattedTextBoxComment.openDoc = textBox.props.addDocTab(FormattedTextBoxComment.linkDoc, e.ctrlKey ? "inTab" : "onRight"); textBox.props.addDocTab(FormattedTextBoxComment.linkDoc, e.ctrlKey ? "inTab" : "onRight"); } else { DocumentManager.Instance.FollowLink(FormattedTextBoxComment.linkDoc, textBox.props.Document, (doc: Doc, followLinkLocation: string) => textBox.props.addDocTab(doc, e.ctrlKey ? "inTab" : followLinkLocation)); } + //} + } } else if (textBox && (FormattedTextBoxComment.tooltipText as any).href) { textBox.props.addDocTab(Docs.Create.WebDocument((FormattedTextBoxComment.tooltipText as any).href, { title: (FormattedTextBoxComment.tooltipText as any).href, _width: 200, _height: 400, UseCors: true }), "onRight"); @@ -117,33 +125,16 @@ export class FormattedTextBoxComment { e.preventDefault(); }; root && root.appendChild(FormattedTextBoxComment.tooltip); - } + }; } @action public static deleteLink = (): void => { console.log(FormattedTextBoxComment.linkDoc); - FormattedTextBoxComment.linkDoc ? LinkManager.Instance.deleteLink(FormattedTextBoxComment.linkDoc) : null; - //this.props.showLinks(); - LinkDocPreview.LinkInfo = undefined; - DocumentLinksButton.EditLink = undefined; - } - - @action - public static onContextMenu = (e: React.MouseEvent) => { - DocumentLinksButton.EditLink = undefined; - LinkDocPreview.LinkInfo = undefined; - e.preventDefault(); - ContextMenu.Instance.addItem({ description: "Follow Default Link", event: () => FormattedTextBoxComment.followDefault(), icon: "arrow-right" }); - ContextMenu.Instance.displayMenu(e.clientX, e.clientY); - } - - @action.bound - public static async followDefault() { - DocumentLinksButton.EditLink = undefined; - LinkDocPreview.LinkInfo = undefined; - FormattedTextBoxComment.targetDoc ? DocumentManager.Instance.FollowLink(FormattedTextBoxComment.linkDoc, FormattedTextBoxComment.targetDoc, - doc => FormattedTextBoxComment, false) : null; + // FormattedTextBoxComment.linkDoc ? LinkManager.Instance.deleteLink(FormattedTextBoxComment.linkDoc) : null; + // //this.props.showLinks(); + // LinkDocPreview.LinkInfo = undefined; + // DocumentLinksButton.EditLink = undefined; } public static Hide() { @@ -159,22 +150,6 @@ export class FormattedTextBoxComment { FormattedTextBoxComment.tooltip && (FormattedTextBoxComment.tooltip.style.display = ""); } - @action - onClick = (e: PointerEvent) => { - if (FormattedTextBoxComment._editRef && !FormattedTextBoxComment._editRef.current?.contains(e.target as Node)) { - FormattedTextBoxComment.linkDoc = undefined; - FormattedTextBoxComment.targetDoc = undefined; - } - } - @action - componentDidMount() { - document.addEventListener("pointerdown", this.onClick); - } - - componentWillUnmount() { - document.removeEventListener("pointerdown", this.onClick); - } - static showCommentbox(set: string, view: EditorView, nbef: number) { const state = view.state; if (set !== "none") { @@ -213,7 +188,6 @@ export class FormattedTextBoxComment { (FormattedTextBoxComment.tooltipText as any).href = ""; FormattedTextBoxComment.tooltipText.style.whiteSpace = ""; FormattedTextBoxComment.tooltipText.style.overflow = ""; - // this section checks to see if the insertion point is over text entered by a different user. If so, it sets ths comment text to indicate the user and the modification date if (state.selection.$from) { nbef = findStartOfMark(state.selection.$from, view, findOtherUserMark); @@ -266,12 +240,12 @@ export class FormattedTextBoxComment { target._scrollY = NumCast(anchor?.y); } if (target?.author) { - + FormattedTextBoxComment.showCommentbox("", view, nbef); const docPreview =
{target.title}
-
+
this._deleteRef = r}>
-
+
this._followRef = r}>
@@ -303,7 +277,34 @@ export class FormattedTextBoxComment { />
; FormattedTextBoxComment.showCommentbox("", view, nbef); - ReactDOM.render(docPreview, FormattedTextBoxComment.tooltipText); + + ReactDOM.render( Math.min(350, NumCast(target._width, 350))} + PanelHeight={() => Math.min(250, NumCast(target._height, 250))} + focus={emptyFunction} + whenActiveChanged={returnFalse} + bringToFront={returnFalse} + ContentScaling={returnOne} + NativeWidth={returnZero} + NativeHeight={returnZero} + />, FormattedTextBoxComment.tooltipText); + FormattedTextBoxComment.tooltip.style.width = NumCast(target._width) ? `${NumCast(target._width)}` : "100%"; FormattedTextBoxComment.tooltip.style.height = NumCast(target._height) ? `${NumCast(target._height)}` : "100%"; } @@ -317,4 +318,4 @@ export class FormattedTextBoxComment { } destroy() { } -} +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 3712228f853e80ff05eced253a0bf197bdf47bde Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 1 Jul 2020 12:26:54 -0400 Subject: added several new commands to RichTextMenu --- .../views/nodes/formattedText/RichTextMenu.tsx | 73 +++++++++++++++++++++- 1 file changed, 70 insertions(+), 3 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx index 7c7a76e1b..6fdcaceda 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.tsx +++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx @@ -1,6 +1,6 @@ import React = require("react"); import { IconProp, library } from '@fortawesome/fontawesome-svg-core'; -import { faBold, faCaretDown, faChevronLeft, faEyeDropper, faHighlighter, faIndent, faItalic, faLink, faPaintRoller, faPalette, faStrikethrough, faSubscript, faSuperscript, faUnderline } from "@fortawesome/free-solid-svg-icons"; +import { faBold, faCaretDown, faChevronLeft, faEyeDropper, faHighlighter, faOutdent, faIndent, faHandPointLeft, faHandPointRight, faItalic, faLink, faPaintRoller, faPalette, faStrikethrough, faSubscript, faSuperscript, faUnderline } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { action, observable, IReactionDisposer, reaction } from "mobx"; import { observer } from "mobx-react"; @@ -26,7 +26,7 @@ import { TraceMobx } from "../../../../fields/util"; import { UndoManager } from "../../../util/UndoManager"; const { toggleMark } = require("prosemirror-commands"); -library.add(faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper, faCaretDown, faPalette, faHighlighter, faLink, faPaintRoller); +library.add(faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faOutdent, faIndent, faHandPointLeft, faHandPointRight, faEyeDropper, faCaretDown, faPalette, faHighlighter, faLink, faPaintRoller); @observer @@ -443,6 +443,63 @@ export default class RichTextMenu extends AntimodeMenu { return true; } + insetParagraph(state: EditorState, dispatch: any) { + var tr = state.tr; + state.doc.nodesBetween(state.selection.from, state.selection.to, (node, pos, parent, index) => { + if (node.type === schema.nodes.paragraph) { + const inset = (node.attrs.inset ? Number(node.attrs.inset) : 0) + 10; + tr = tr.setNodeMarkup(pos, node.type, { ...node.attrs, inset }, node.marks); + return false; + } + return true; + }); + dispatch?.(tr); + return true; + } + outsetParagraph(state: EditorState, dispatch: any) { + var tr = state.tr; + state.doc.nodesBetween(state.selection.from, state.selection.to, (node, pos, parent, index) => { + if (node.type === schema.nodes.paragraph) { + const inset = Math.max(0, (node.attrs.inset ? Number(node.attrs.inset) : 0) - 10); + tr = tr.setNodeMarkup(pos, node.type, { ...node.attrs, inset }, node.marks); + return false; + } + return true; + }); + dispatch?.(tr); + return true; + } + + indentParagraph(state: EditorState, dispatch: any) { + var tr = state.tr; + state.doc.nodesBetween(state.selection.from, state.selection.to, (node, pos, parent, index) => { + if (node.type === schema.nodes.paragraph) { + const nodeval = node.attrs.indent ? Number(node.attrs.indent) : undefined; + const indent = !nodeval ? 25 : nodeval < 0 ? 0 : nodeval + 25; + tr = tr.setNodeMarkup(pos, node.type, { ...node.attrs, indent }, node.marks); + return false; + } + return true; + }); + dispatch?.(tr); + return true; + } + + hangingIndentParagraph(state: EditorState, dispatch: any) { + var tr = state.tr; + state.doc.nodesBetween(state.selection.from, state.selection.to, (node, pos, parent, index) => { + if (node.type === schema.nodes.paragraph) { + const nodeval = node.attrs.indent ? Number(node.attrs.indent) : undefined; + const indent = !nodeval ? -25 : nodeval > 0 ? 0 : nodeval - 10; + tr = tr.setNodeMarkup(pos, node.type, { ...node.attrs, indent }, node.marks); + return false; + } + return true; + }); + dispatch?.(tr); + return true; + } + insertBlockquote(state: EditorState, dispatch: any) { const path = (state.selection.$from as any).path; if (path.length > 6 && path[path.length - 6].type === schema.nodes.blockquote) { @@ -453,6 +510,11 @@ export default class RichTextMenu extends AntimodeMenu { return true; } + insertHorizontalRule(state: EditorState, dispatch: any) { + dispatch(state.tr.replaceSelectionWith(state.schema.nodes.horizontal_rule.create()).scrollIntoView()); + return true; + } + @action toggleBrushDropdown() { this.showBrushDropdown = !this.showBrushDropdown; } // todo: add brushes to brushMap to save with a style name @@ -822,6 +884,10 @@ export default class RichTextMenu extends AntimodeMenu { this.createButton("align-left", "Align Left", undefined, this.alignLeft), this.createButton("align-center", "Align Center", undefined, this.alignCenter), this.createButton("align-right", "Align Right", undefined, this.alignRight), + this.createButton("indent", "Inset More", undefined, this.insetParagraph), + this.createButton("outdent", "Inset Less", undefined, this.outsetParagraph), + this.createButton("hand-point-left", "Hanging Indent", undefined, this.hangingIndentParagraph), + this.createButton("hand-point-right", "Indent", undefined, this.indentParagraph), ]}
; const row2 =
@@ -831,7 +897,8 @@ export default class RichTextMenu extends AntimodeMenu { this.createMarksDropdown(this.activeFontFamily, this.fontFamilyOptions, "font family"), this.createNodesDropdown(this.activeListType, this.listTypeOptions, "nodes"), this.createButton("sort-amount-down", "Summarize", undefined, this.insertSummarizer), - this.createButton("quote-left", "Blockquote", undefined, this.insertBlockquote),]} + this.createButton("quote-left", "Blockquote", undefined, this.insertBlockquote), + this.createButton("minus", "Horizontal Rule", undefined, this.insertHorizontalRule),]}
{/*
-- cgit v1.2.3-70-g09d2 From c51056c7da718a7c0f98f54953f2d7fc287ecf9d Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Wed, 1 Jul 2020 11:33:52 -0500 Subject: mainview work --- src/client/views/MainView.tsx | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index da76bed11..9328198d0 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -190,7 +190,7 @@ export class MainView extends React.Component { } const doc = MainView.userDoc && await Cast(MainView.userDoc.activeWorkspace, Doc); if (doc) { - MainView.openWorkspace(doc); + this.openWorkspace(doc); } else { this.createNewWorkspace(); } @@ -219,11 +219,11 @@ export class MainView extends React.Component { Doc.AddDocToList(workspaces, "data", workspaceDoc); // bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container) - setTimeout(() => MainView.openWorkspace(workspaceDoc), 0); + setTimeout(() => this.openWorkspace(workspaceDoc), 0); } @action - static openWorkspace = (doc: Doc, fromHistory = false) => { + openWorkspace = (doc: Doc, fromHistory = false) => { CurrentUserUtils.MainDocId = doc[Id]; if (doc) { // this has the side-effect of setting the main container since we're assigning the active/guest workspace @@ -305,7 +305,7 @@ export class MainView extends React.Component { DataDoc={undefined} LibraryPath={emptyPath} addDocument={undefined} - addDocTab={MainView.addDocTabFunc} + addDocTab={this.addDocTabFunc} pinToPres={emptyFunction} rootSelected={returnTrue} onClick={undefined} @@ -378,9 +378,9 @@ export class MainView extends React.Component { document.removeEventListener("pointerup", this.onPointerUp); } flyoutWidthFunc = () => this.flyoutWidth; - static addDocTabFunc = (doc: Doc, where: string, libraryPath?: Doc[]): boolean => { + addDocTabFunc = (doc: Doc, where: string, libraryPath?: Doc[]): boolean => { return where === "close" ? CollectionDockingView.CloseRightSplit(doc) : - doc.dockingConfig ? MainView.openWorkspace(doc) : + doc.dockingConfig ? this.openWorkspace(doc) : CollectionDockingView.AddRightSplit(doc, libraryPath); } sidebarScreenToLocal = () => new Transform(0, RichTextMenu.Instance.Pinned ? -35 : 0, 1); @@ -399,7 +399,7 @@ export class MainView extends React.Component { LibraryPath={emptyPath} addDocument={undefined} rootSelected={returnTrue} - addDocTab={MainView.addDocTabFunc} + addDocTab={this.addDocTabFunc} pinToPres={emptyFunction} removeDocument={undefined} onClick={undefined} @@ -425,7 +425,7 @@ export class MainView extends React.Component { DataDoc={undefined} LibraryPath={emptyPath} addDocument={undefined} - addDocTab={MainView.addDocTabFunc} + addDocTab={this.addDocTabFunc} pinToPres={emptyFunction} NativeHeight={returnZero} NativeWidth={returnZero} @@ -531,7 +531,7 @@ export class MainView extends React.Component { moveDocument={this.moveButtonDoc} CollectionView={undefined} addDocument={this.addButtonDoc} - addDocTab={MainView.addDocTabFunc} + addDocTab={this.addDocTabFunc} pinToPres={emptyFunction} removeDocument={this.remButtonDoc} onClick={undefined} @@ -628,5 +628,7 @@ Scripting.addGlobal(function copyWorkspace() { const workspaces = Cast(Doc.UserDoc().myWorkspaces, Doc, null); Doc.AddDocToList(workspaces, "data", copiedWorkspace); // bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container) - setTimeout(() => MainView.openWorkspace(copiedWorkspace), 0); + + + // setTimeout(() => .openWorkspace(copiedWorkspace), 0); }); -- cgit v1.2.3-70-g09d2 From 4b0874c00681335a3746ad6d37c9ce08bf9978ae Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 1 Jul 2020 12:41:23 -0400 Subject: changed collpased bullets to show their current line and elide sub-bullets --- src/client/views/nodes/formattedText/nodes_rts.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/client/views') diff --git a/src/client/views/nodes/formattedText/nodes_rts.ts b/src/client/views/nodes/formattedText/nodes_rts.ts index afb1f57b7..f83cff9b9 100644 --- a/src/client/views/nodes/formattedText/nodes_rts.ts +++ b/src/client/views/nodes/formattedText/nodes_rts.ts @@ -312,7 +312,7 @@ export const nodes: { [index: string]: NodeSpec } = { const map = node.attrs.bulletStyle ? node.attrs.mapStyle + node.attrs.bulletStyle : ""; return node.attrs.visibility ? ["li", { class: `${map}`, "data-mapStyle": node.attrs.mapStyle, "data-bulletStyle": node.attrs.bulletStyle }, 0] : - ["li", { class: `${map}`, "data-mapStyle": node.attrs.mapStyle, "data-bulletStyle": node.attrs.bulletStyle }, "..."]; + ["li", { class: `${map}`, "data-mapStyle": node.attrs.mapStyle, "data-bulletStyle": node.attrs.bulletStyle }, `${node.firstChild?.textContent}...`]; } }, }; \ No newline at end of file -- cgit v1.2.3-70-g09d2 From f38485f2778c9dbcc4dd663527c58ea450acb832 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 1 Jul 2020 13:53:40 -0400 Subject: fixed drag drop within text box to call updateBullets --- src/client/views/nodes/formattedText/FormattedTextBox.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src/client/views') diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index f4aa7919f..2a79e2f13 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -32,7 +32,7 @@ import { DocumentType } from '../../../documents/DocumentTypes'; import { DictationManager } from '../../../util/DictationManager'; import { DragManager } from "../../../util/DragManager"; import { makeTemplate } from '../../../util/DropConverter'; -import buildKeymap from "./ProsemirrorExampleTransfer"; +import buildKeymap, { updateBullets } from "./ProsemirrorExampleTransfer"; import RichTextMenu from './RichTextMenu'; import { RichTextRules } from "./RichTextRules"; @@ -1227,6 +1227,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp } ondrop = (eve: React.DragEvent) => { + this._editorView!.dispatch(updateBullets(this._editorView!.state.tr, this._editorView!.state.schema)); eve.stopPropagation(); // drag n drop of text within text note will generate a new note if not caughst, as will dragging in from outside of Dash. } onscrolled = (ev: React.UIEvent) => { -- cgit v1.2.3-70-g09d2 From 581ba904dc9bd02f6e2d81f42c45f38f6ad26cab Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Wed, 1 Jul 2020 13:14:02 -0500 Subject: textbox comment changes --- src/client/views/MainView.tsx | 40 +++++---- .../formattedText/FormattedTextBoxComment.scss | 4 +- .../formattedText/FormattedTextBoxComment.tsx | 97 +++++++++------------- 3 files changed, 62 insertions(+), 79 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 9328198d0..200486279 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -65,7 +65,7 @@ export class MainView extends React.Component { public static Instance: MainView; private _buttonBarHeight = 36; private _flyoutSizeOnDown = 0; - private static _urlState: HistoryUtil.DocUrl; + private _urlState: HistoryUtil.DocUrl; private _docBtnRef = React.createRef(); private _mainViewRef = React.createRef(); @@ -73,12 +73,12 @@ export class MainView extends React.Component { @observable private _panelHeight: number = 0; @observable private _flyoutTranslate: boolean = true; @observable public flyoutWidth: number = 250; - private get darkScheme() { return BoolCast(Cast(MainView.userDoc?.activeWorkspace, Doc, null)?.darkScheme); } + private get darkScheme() { return BoolCast(Cast(this.userDoc?.activeWorkspace, Doc, null)?.darkScheme); } - @computed private static get userDoc() { return Doc.UserDoc(); } - @computed private get mainContainer() { return MainView.userDoc ? FieldValue(Cast(MainView.userDoc.activeWorkspace, Doc)) : CurrentUserUtils.GuestWorkspace; } + @computed private get userDoc() { return Doc.UserDoc(); } + @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeWorkspace, Doc)) : CurrentUserUtils.GuestWorkspace; } @computed public get mainFreeform(): Opt { return (docs => (docs && docs.length > 1) ? docs[1] : undefined)(DocListCast(this.mainContainer!.data)); } - @computed public get sidebarButtonsDoc() { return Cast(MainView.userDoc["tabs-buttons"], Doc) as Doc; } + @computed public get sidebarButtonsDoc() { return Cast(this.userDoc["tabs-buttons"], Doc) as Doc; } public isPointerDown = false; @@ -119,7 +119,7 @@ export class MainView extends React.Component { constructor(props: Readonly<{}>) { super(props); MainView.Instance = this; - MainView._urlState = HistoryUtil.parseUrl(window.location) || {} as any; + this._urlState = HistoryUtil.parseUrl(window.location) || {} as any; // causes errors to be generated when modifying an observable outside of an action configure({ enforceActions: "observed" }); if (window.location.pathname !== "/home") { @@ -128,7 +128,7 @@ export class MainView extends React.Component { const type = pathname[0]; if (type === "doc") { CurrentUserUtils.MainDocId = pathname[1]; - if (!MainView.userDoc) { + if (!this.userDoc) { runInAction(() => this.flyoutWidth = 0); DocServer.GetRefField(CurrentUserUtils.MainDocId).then(action((field: Opt) => field instanceof Doc && (CurrentUserUtils.GuestTarget = field))); @@ -172,14 +172,14 @@ export class MainView extends React.Component { initAuthenticationRouters = async () => { // Load the user's active workspace, or create a new one if initial session after signup const received = CurrentUserUtils.MainDocId; - if (received && !MainView.userDoc) { + if (received && !this.userDoc) { reaction( () => CurrentUserUtils.GuestTarget, target => target && this.createNewWorkspace(), { fireImmediately: true } ); } else { - if (received && MainView._urlState.sharing) { + if (received && this._urlState.sharing) { reaction(() => CollectionDockingView.Instance && CollectionDockingView.Instance.initialized, initialized => initialized && received && DocServer.GetRefField(received).then(docField => { if (docField instanceof Doc && docField._viewType !== CollectionViewType.Docking) { @@ -188,7 +188,7 @@ export class MainView extends React.Component { }), ); } - const doc = MainView.userDoc && await Cast(MainView.userDoc.activeWorkspace, Doc); + const doc = this.userDoc && await Cast(this.userDoc.activeWorkspace, Doc); if (doc) { this.openWorkspace(doc); } else { @@ -199,7 +199,7 @@ export class MainView extends React.Component { @action createNewWorkspace = async (id?: string) => { - const workspaces = Cast(MainView.userDoc.myWorkspaces, Doc) as Doc; + const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc; const workspaceCount = DocListCast(workspaces.data).length + 1; const freeformOptions: DocumentOptions = { x: 0, @@ -228,10 +228,10 @@ export class MainView extends React.Component { if (doc) { // this has the side-effect of setting the main container since we're assigning the active/guest workspace !("presentationView" in doc) && (doc.presentationView = new List([Docs.Create.TreeDocument([], { title: "Presentation" })])); - MainView.userDoc ? (MainView.userDoc.activeWorkspace = doc) : (CurrentUserUtils.GuestWorkspace = doc); + this.userDoc ? (this.userDoc.activeWorkspace = doc) : (CurrentUserUtils.GuestWorkspace = doc); } - const state = MainView._urlState; - if (state.sharing === true && !MainView.userDoc) { + const state = this._urlState; + if (state.sharing === true && !this.userDoc) { DocServer.Control.makeReadOnly(); } else { fromHistory || HistoryUtil.pushState({ @@ -257,7 +257,7 @@ export class MainView extends React.Component { } // if there is a pending doc, and it has new data, show it (syip: we use a timeout to prevent collection docking view from being uninitialized) setTimeout(async () => { - const col = MainView.userDoc && await Cast(MainView.userDoc.rightSidebarCollection, Doc); + const col = this.userDoc && await Cast(this.userDoc.rightSidebarCollection, Doc); col && Cast(col.data, listSpec(Doc)) && runInAction(() => MainViewNotifs.NotifsCol = col); }, 100); return true; @@ -387,7 +387,7 @@ export class MainView extends React.Component { mainContainerXf = () => this.sidebarScreenToLocal().translate(0, -this._buttonBarHeight); @computed get flyout() { - const sidebarContent = MainView.userDoc?.["tabs-panelContainer"]; + const sidebarContent = this.userDoc?.["tabs-panelContainer"]; if (!(sidebarContent instanceof Doc)) { return (null); } @@ -459,8 +459,8 @@ export class MainView extends React.Component { } @computed get mainContent() { - const sidebar = MainView.userDoc?.["tabs-panelContainer"]; - return !MainView.userDoc || !(sidebar instanceof Doc) ? (null) : ( + const sidebar = this.userDoc?.["tabs-panelContainer"]; + return !this.userDoc || !(sidebar instanceof Doc) ? (null) : (
.openWorkspace(copiedWorkspace), 0); + setTimeout(() => MainView.Instance.openWorkspace(copiedWorkspace), 0); }); diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss b/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss index d83583db1..adef7f81f 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss +++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.scss @@ -43,7 +43,7 @@ right: 0; transform: translateY(-50%); - .button { + .FormattedTextBox-button { width: 20px; height: 20px; margin: 0; @@ -57,7 +57,7 @@ text-align: center; position: relative; - .fa-icon { + .FormattedTextBox-fa-icon { position: absolute; top: 50%; left: 50%; diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx index 15cd68c26..c600e4861 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx @@ -18,9 +18,9 @@ import wiki from "wikijs"; import { DocumentType } from "../../../documents/DocumentTypes"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { action } from "mobx"; -// import { LinkManager } from "../../../util/LinkManager"; -// import { LinkDocPreview } from "../LinkDocPreview"; -// import { DocumentLinksButton } from "../DocumentLinksButton"; +import { LinkManager } from "../../../util/LinkManager"; +import { LinkDocPreview } from "../LinkDocPreview"; +import { DocumentLinksButton } from "../DocumentLinksButton"; export let formattedTextBoxCommentPlugin = new Plugin({ view(editorView) { return new FormattedTextBoxComment(editorView); } @@ -97,23 +97,23 @@ export class FormattedTextBoxComment { if (FormattedTextBoxComment.linkDoc && !keep && textBox) { if (FormattedTextBoxComment.linkDoc.author) { - // if (FormattedTextBoxComment._deleteRef && FormattedTextBoxComment._deleteRef.contains(e.target as any)) { - // FormattedTextBoxComment.deleteLink(); - // } else if (FormattedTextBoxComment._followRef && FormattedTextBoxComment._followRef.contains(e.target as any)) { - // if (FormattedTextBoxComment.linkDoc.type !== DocumentType.LINK) { - // textBox.props.addDocTab(FormattedTextBoxComment.linkDoc, e.ctrlKey ? "inTab" : "onRight"); - // } else { - // DocumentManager.Instance.FollowLink(FormattedTextBoxComment.linkDoc, textBox.props.Document, - // (doc: Doc, followLinkLocation: string) => textBox.props.addDocTab(doc, e.ctrlKey ? "inTab" : followLinkLocation)); - // } - // } else { - if (FormattedTextBoxComment.linkDoc.type !== DocumentType.LINK) { - textBox.props.addDocTab(FormattedTextBoxComment.linkDoc, e.ctrlKey ? "inTab" : "onRight"); + if (FormattedTextBoxComment._deleteRef && FormattedTextBoxComment._deleteRef.contains(e.target as any)) { + this.deleteLink(); + } else if (FormattedTextBoxComment._followRef && FormattedTextBoxComment._followRef.contains(e.target as any)) { + if (FormattedTextBoxComment.linkDoc.type !== DocumentType.LINK) { + textBox.props.addDocTab(FormattedTextBoxComment.linkDoc, e.ctrlKey ? "inTab" : "onRight"); + } else { + DocumentManager.Instance.FollowLink(FormattedTextBoxComment.linkDoc, textBox.props.Document, + (doc: Doc, followLinkLocation: string) => textBox.props.addDocTab(doc, e.ctrlKey ? "inTab" : followLinkLocation)); + } } else { - DocumentManager.Instance.FollowLink(FormattedTextBoxComment.linkDoc, textBox.props.Document, - (doc: Doc, followLinkLocation: string) => textBox.props.addDocTab(doc, e.ctrlKey ? "inTab" : followLinkLocation)); + if (FormattedTextBoxComment.linkDoc.type !== DocumentType.LINK) { + textBox.props.addDocTab(FormattedTextBoxComment.linkDoc, e.ctrlKey ? "inTab" : "onRight"); + } else { + DocumentManager.Instance.FollowLink(FormattedTextBoxComment.linkDoc, textBox.props.Document, + (doc: Doc, followLinkLocation: string) => textBox.props.addDocTab(doc, e.ctrlKey ? "inTab" : followLinkLocation)); + } } - //} } } else if (textBox && (FormattedTextBoxComment.tooltipText as any).href) { @@ -125,16 +125,16 @@ export class FormattedTextBoxComment { e.preventDefault(); }; root && root.appendChild(FormattedTextBoxComment.tooltip); - }; + } } @action - public static deleteLink = (): void => { - console.log(FormattedTextBoxComment.linkDoc); - // FormattedTextBoxComment.linkDoc ? LinkManager.Instance.deleteLink(FormattedTextBoxComment.linkDoc) : null; - // //this.props.showLinks(); - // LinkDocPreview.LinkInfo = undefined; - // DocumentLinksButton.EditLink = undefined; + deleteLink = () => { + FormattedTextBoxComment.linkDoc ? LinkManager.Instance.deleteLink(FormattedTextBoxComment.linkDoc) : null; + LinkDocPreview.LinkInfo = undefined; + DocumentLinksButton.EditLink = undefined; + //FormattedTextBoxComment.tooltipText = undefined; + FormattedTextBoxComment.Hide(); } public static Hide() { @@ -241,12 +241,22 @@ export class FormattedTextBoxComment { } if (target?.author) { FormattedTextBoxComment.showCommentbox("", view, nbef); - const docPreview =
{target.title} + const docPreview =
+ {target.title}
-
this._deleteRef = r}> -
-
this._followRef = r}> - +
this._deleteRef = r}> +
+
this._followRef = r}> +
; FormattedTextBoxComment.showCommentbox("", view, nbef); - ReactDOM.render( Math.min(350, NumCast(target._width, 350))} - PanelHeight={() => Math.min(250, NumCast(target._height, 250))} - focus={emptyFunction} - whenActiveChanged={returnFalse} - bringToFront={returnFalse} - ContentScaling={returnOne} - NativeWidth={returnZero} - NativeHeight={returnZero} - />, FormattedTextBoxComment.tooltipText); + ReactDOM.render(docPreview, FormattedTextBoxComment.tooltipText); FormattedTextBoxComment.tooltip.style.width = NumCast(target._width) ? `${NumCast(target._width)}` : "100%"; FormattedTextBoxComment.tooltip.style.height = NumCast(target._height) ? `${NumCast(target._height)}` : "100%"; -- cgit v1.2.3-70-g09d2 From 54e38339b5292c3eddca0ef9665ec0c2b4d30ba2 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 1 Jul 2020 14:20:53 -0400 Subject: added divider lines in richTextMen --- src/client/views/nodes/formattedText/FormattedTextBox.tsx | 2 -- src/client/views/nodes/formattedText/RichTextMenu.scss | 6 ++++++ src/client/views/nodes/formattedText/RichTextMenu.tsx | 7 ++++++- 3 files changed, 12 insertions(+), 3 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 2a79e2f13..7e5509e85 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -1049,7 +1049,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp @action onFocused = (e: React.FocusEvent): void => { - console.log("FOUCSS") FormattedTextBox.FocusedBox = this; this.tryUpdateHeight(); @@ -1181,7 +1180,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp } public static HadSelection: boolean = false; onBlur = (e: any) => { - console.log("BLURRR") FormattedTextBox.HadSelection = window.getSelection()?.toString() !== ""; //DictationManager.Controls.stop(false); this.endUndoTypingBatch(); diff --git a/src/client/views/nodes/formattedText/RichTextMenu.scss b/src/client/views/nodes/formattedText/RichTextMenu.scss index 7a0718c16..fbc468292 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.scss +++ b/src/client/views/nodes/formattedText/RichTextMenu.scss @@ -77,6 +77,12 @@ color: white; } } + .richTextMenu-divider { + margin: auto; + border-left: solid #ffffff70 0.5px; + height: 20px; + width: 1px; + } } .link-menu { diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx index 6fdcaceda..57719a8eb 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.tsx +++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx @@ -876,11 +876,13 @@ export default class RichTextMenu extends AntimodeMenu { this.createButton("strikethrough", "Strikethrough", this.strikethroughActive, toggleMark(schema.marks.strikethrough)), this.createButton("superscript", "Superscript", this.superscriptActive, toggleMark(schema.marks.superscript)), this.createButton("subscript", "Subscript", this.subscriptActive, toggleMark(schema.marks.subscript)), +
]}, this.createColorButton(), this.createHighlighterButton(), this.createLinkButton(), this.createBrushButton(), +
, this.createButton("align-left", "Align Left", undefined, this.alignLeft), this.createButton("align-center", "Align Center", undefined, this.alignCenter), this.createButton("align-right", "Align Right", undefined, this.alignRight), @@ -893,12 +895,15 @@ export default class RichTextMenu extends AntimodeMenu { const row2 =
{this.collapsed ? this.getDragger() : (null)}
+
, {[this.createMarksDropdown(this.activeFontSize, this.fontSizeOptions, "font size"), this.createMarksDropdown(this.activeFontFamily, this.fontFamilyOptions, "font family"), +
, this.createNodesDropdown(this.activeListType, this.listTypeOptions, "nodes"), this.createButton("sort-amount-down", "Summarize", undefined, this.insertSummarizer), this.createButton("quote-left", "Blockquote", undefined, this.insertBlockquote), - this.createButton("minus", "Horizontal Rule", undefined, this.insertHorizontalRule),]} + this.createButton("minus", "Horizontal Rule", undefined, this.insertHorizontalRule), +
,]}
{/*
-- cgit v1.2.3-70-g09d2 From eff0c84e6f42bd6be1c58f1009d8d766bcf0a819 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 1 Jul 2020 15:42:22 -0400 Subject: fixed warnings --- src/client/util/CurrentUserUtils.ts | 2 +- src/client/views/collections/CollectionSchemaView.tsx | 8 ++++---- src/client/views/collections/CollectionSubView.tsx | 1 - src/client/views/collections/CollectionViewChromes.tsx | 6 +++--- src/client/views/nodes/formattedText/FormattedTextBox.tsx | 14 +++++--------- src/client/views/nodes/formattedText/RichTextMenu.tsx | 8 ++++---- src/fields/Doc.ts | 2 +- 7 files changed, 18 insertions(+), 23 deletions(-) (limited to 'src/client/views') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index ef216001c..40bc24917 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -368,7 +368,7 @@ export class CurrentUserUtils { doc.emptyComparison = Docs.Create.ComparisonDocument({ title: "compare", _width: 300, _height: 300 }); } if (doc.emptyScript === undefined) { - doc.emptyScript = Docs.Create.ScriptingDocument(undefined, { _width: 200, _height: 250, title: "script" }) + doc.emptyScript = Docs.Create.ScriptingDocument(undefined, { _width: 200, _height: 250, title: "script" }); } if (doc.emptyDocHolder === undefined) { doc.emptyDocHolder = Docs.Create.DocumentDocument( diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 23e8a4d49..3c42a2f1c 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -581,14 +581,14 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { onZoomMenu = (e: React.WheelEvent) => { this.props.active(true) && e.stopPropagation(); if (this.menuCoordinates[0] > e.screenX) { - this.menuCoordinates[0] -= e.screenX //* this.scale; + this.menuCoordinates[0] -= e.screenX; //* this.scale; } else { - this.menuCoordinates[0] += e.screenX //* this.scale; + this.menuCoordinates[0] += e.screenX; //* this.scale; } if (this.menuCoordinates[1] > e.screenY) { - this.menuCoordinates[1] -= e.screenY //* this.scale; + this.menuCoordinates[1] -= e.screenY; //* this.scale; } else { - this.menuCoordinates[1] += e.screenY //* this.scale; + this.menuCoordinates[1] += e.screenY; //* this.scale; } } diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index ecd16d22f..ed8535ecb 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -9,7 +9,6 @@ import { ScriptField } from "../../../fields/ScriptField"; import { WebField } from "../../../fields/URLField"; import { Cast, ScriptCast, NumCast, StrCast } from "../../../fields/Types"; import { GestureUtils } from "../../../pen-gestures/GestureUtils"; -import { Upload } from "../../../server/SharedMediaTypes"; import { Utils, returnFalse, returnEmptyFilter } from "../../../Utils"; import { DocServer } from "../../DocServer"; import { Networking } from "../../Network"; diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index ab0df88f8..4e91a2928 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -452,9 +452,9 @@ export class CollectionStackingViewChrome extends React.Component { this.props.CollectionView.props.Document._columnsSort = - this.props.CollectionView.props.Document._columnsSort === "descending" ? "ascending" : - this.props.CollectionView.props.Document._columnsSort === "ascending" ? undefined : "descending"; - }; + this.props.CollectionView.props.Document._columnsSort === "descending" ? "ascending" : + this.props.CollectionView.props.Document._columnsSort === "ascending" ? undefined : "descending"; + } @action resetValue = () => { this._currentKey = this.pivotField; }; render() { diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 7e5509e85..664141607 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -68,15 +68,10 @@ export interface FormattedTextBoxProps { xMargin?: number; // used to override document's settings for xMargin --- see CollectionCarouselView yMargin?: number; } - -const richTextSchema = createSchema({ - documentText: "string", -}); - export const GoogleRef = "googleDocId"; -type RichTextDocument = makeInterface<[typeof richTextSchema, typeof documentSchema]>; -const RichTextDocument = makeInterface(richTextSchema, documentSchema); +type RichTextDocument = makeInterface<[typeof documentSchema]>; +const RichTextDocument = makeInterface(documentSchema); type PullHandler = (exportState: Opt, dataDoc: Doc) => void; @@ -661,7 +656,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp incomingValue => { if (incomingValue !== undefined && this._editorView && !this._applyingChange) { const updatedState = JSON.parse(incomingValue); - if (JSON.stringify(this._editorView!.state.toJSON()) !== JSON.stringify(updatedState)) { + if (JSON.stringify(this._editorView.state.toJSON()) !== JSON.stringify(updatedState)) { this._editorView.updateState(EditorState.fromJSON(this.config, updatedState)); this.tryUpdateHeight(); } @@ -1293,7 +1288,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp color: this.props.color ? this.props.color : StrCast(this.layoutDoc[this.props.fieldKey + "-color"], this.props.hideOnLeave ? "white" : "inherit"), pointerEvents: interactive ? undefined : "none", fontSize: Cast(this.layoutDoc._fontSize, "number", null), - fontFamily: StrCast(this.layoutDoc._fontFamily, "inherit") + fontFamily: StrCast(this.layoutDoc._fontFamily, "inherit"), + transition: "opacity 1s" }} onContextMenu={this.specificContextMenu} onKeyDown={this.onKeyPress} diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx index 57719a8eb..0fcddfc43 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.tsx +++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx @@ -149,7 +149,7 @@ export default class RichTextMenu extends AntimodeMenu { this._reaction?.(); } - public delayHide = () => { this._delayHide = true; } + public delayHide = () => this._delayHide = true; @action changeView(view: EditorView) { @@ -599,7 +599,7 @@ export default class RichTextMenu extends AntimodeMenu { @action toggleColorDropdown() { this.showColorDropdown = !this.showColorDropdown; } @action setActiveColor(color: string) { this.activeFontColor = color; } - get TextView() { return (this.view as any).TextView as FormattedTextBox } + get TextView() { return (this.view as any).TextView as FormattedTextBox; } createColorButton() { const self = this; @@ -608,7 +608,7 @@ export default class RichTextMenu extends AntimodeMenu { e.stopPropagation(); self.TextView.endUndoTypingBatch(); UndoManager.RunInBatch(() => self.view && self.insertColor(self.activeFontColor, self.view.state, self.view.dispatch), "rt menu color"); - self.TextView.EditorView!.focus() + self.TextView.EditorView!.focus(); } function changeColor(e: React.PointerEvent, color: string) { e.preventDefault(); @@ -616,7 +616,7 @@ export default class RichTextMenu extends AntimodeMenu { self.setActiveColor(color); self.TextView.endUndoTypingBatch(); UndoManager.RunInBatch(() => self.view && self.insertColor(self.activeFontColor, self.view.state, self.view.dispatch), "rt menu color"); - self.TextView.EditorView!.focus() + self.TextView.EditorView!.focus(); } const button = diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts index e4d11dd4d..4a35ef018 100644 --- a/src/fields/Doc.ts +++ b/src/fields/Doc.ts @@ -965,7 +965,7 @@ export namespace Doc { container._docFilters = new List(docFilters); } } - }) + }); } export function readDocRangeFilter(doc: Doc, key: string) { const docRangeFilters = Cast(doc._docRangeFilters, listSpec("string"), []); -- cgit v1.2.3-70-g09d2 From 24ac6997048932c4f2717651e992f744e6a5276a Mon Sep 17 00:00:00 2001 From: anika-ahluwalia Date: Wed, 1 Jul 2020 17:42:38 -0500 Subject: started clicking mode popup --- src/client/views/MainView.tsx | 4 +-- .../views/collections/CollectionLinearView.scss | 42 +++++++++++++++------- .../views/collections/CollectionLinearView.tsx | 25 ++++++++++++- src/client/views/linking/LinkMenu.tsx | 6 ++-- src/client/views/linking/LinkMenuItem.tsx | 3 +- src/client/views/nodes/DocumentLinksButton.tsx | 31 +++++++++++++--- src/client/views/nodes/DocumentView.tsx | 1 + .../views/nodes/formattedText/FormattedTextBox.tsx | 36 +++++++++++++++++++ 8 files changed, 124 insertions(+), 24 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index f6db1af66..662232810 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -4,7 +4,7 @@ import { faTerminal, faToggleOn, faFile as fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard, faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, - faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, + faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faTimesCircle, faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight } from '@fortawesome/free-solid-svg-icons'; import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss'; @@ -138,7 +138,7 @@ export class MainView extends React.Component { } library.add(faTasks, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, - faTerminal, faToggleOn, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard, fileSolid, + faTerminal, faToggleOn, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faTimesCircle, faWindowMaximize, faAddressCard, fileSolid, faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faTrashAlt, faAngleRight, faBell, diff --git a/src/client/views/collections/CollectionLinearView.scss b/src/client/views/collections/CollectionLinearView.scss index 123a27deb..90c96e08b 100644 --- a/src/client/views/collections/CollectionLinearView.scss +++ b/src/client/views/collections/CollectionLinearView.scss @@ -1,12 +1,27 @@ @import "../globalCssVariables"; @import "../_nodeModuleOverrides"; -.collectionLinearView-outer{ +.collectionLinearView-outer { overflow: hidden; - height:100%; + height: 100%; + .collectionLinearView { - display:flex; + display: flex; height: 100%; + + >span { + margin-top: "auto"; + margin-bottom: "auto"; + background: $dark-color; + color: $light-color; + display: inline-block; + border-radius: 18px; + margin-top: auto; + margin-bottom: auto; + margin-right: 3px; + cursor: pointer; + } + >label { margin-top: "auto"; margin-bottom: "auto"; @@ -17,15 +32,15 @@ font-size: 12.5px; width: 18px; height: 18px; - margin-top:auto; - margin-bottom:auto; + margin-top: auto; + margin-bottom: auto; margin-right: 3px; cursor: pointer; transition: transform 0.2s; } label p { - padding-left:5px; + padding-left: 5px; } label:hover { @@ -36,13 +51,14 @@ >input { display: none; } + >input:not(:checked)~.collectionLinearView-content { display: none; } >input:checked~label { transform: rotate(45deg); - transition: transform 0.5s; +transition: transform 0.5s; cursor: pointer; } @@ -52,12 +68,14 @@ position: relative; margin-top: auto; - .collectionLinearView-docBtn, .collectionLinearView-docBtn-scalable { - position:relative; - margin:auto; + .collectionLinearView-docBtn, + .collectionLinearView-docBtn-scalable { + position: relative; + margin: auto; margin-left: 3px; transform-origin: center 80%; } + .collectionLinearView-docBtn-scalable:hover { transform: scale(1.15); } @@ -68,10 +86,10 @@ border-radius: 18px; font-size: 15px; } - + .collectionLinearView-round-button:hover { transform: scale(1.15); } } } -} +} \ No newline at end of file diff --git a/src/client/views/collections/CollectionLinearView.tsx b/src/client/views/collections/CollectionLinearView.tsx index f38eeaf41..29deb906a 100644 --- a/src/client/views/collections/CollectionLinearView.tsx +++ b/src/client/views/collections/CollectionLinearView.tsx @@ -13,6 +13,8 @@ import { CollectionSubView } from './CollectionSubView'; import { DocumentView } from '../nodes/DocumentView'; import { documentSchema } from '../../../fields/documentSchemas'; import { Id } from '../../../fields/FieldSymbols'; +import { DocumentLinksButton } from '../nodes/DocumentLinksButton'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; type LinearDocument = makeInterface<[typeof documentSchema,]>; @@ -75,6 +77,11 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) { return new Transform(-translateX, -translateY, 1); } + @action + exitLongLinks = () => { + DocumentLinksButton.StartLink = undefined + } + render() { const guid = Utils.GenerateGuid(); const flexDir: any = StrCast(this.Document.flexDirection); @@ -82,7 +89,12 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) { const color = StrCast(this.props.Document.color, "white"); return
- @@ -130,6 +142,17 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
; })}
+ {DocumentLinksButton.StartLink ? e.stopPropagation()} > + + Creating Link From: {DocumentLinksButton.StartLink.title} + + + + : null}
; } diff --git a/src/client/views/linking/LinkMenu.tsx b/src/client/views/linking/LinkMenu.tsx index 2a9bbed39..c36e7b67c 100644 --- a/src/client/views/linking/LinkMenu.tsx +++ b/src/client/views/linking/LinkMenu.tsx @@ -32,9 +32,9 @@ export class LinkMenu extends React.Component { DocumentLinksButton.EditLink = undefined; } - // if (this._linkMenuRef && !this._linkMenuRef.contains(e.target)) { - // DocumentLinksButton.EditLink = undefined; - // } + if (this._linkMenuRef && !this._linkMenuRef.contains(e.target as any)) { + DocumentLinksButton.EditLink = undefined; + } } @action componentDidMount() { diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index d5d31d1ba..54dca261d 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -137,6 +137,7 @@ export class LinkMenuItem extends React.Component { @action.bound async followDefault() { + console.log("FOLLOWWW"); DocumentLinksButton.EditLink = undefined; LinkDocPreview.LinkInfo = undefined; DocumentManager.Instance.FollowLink(this.props.linkDoc, this.props.sourceDoc, doc => this.props.addDocTab(doc, "onRight"), false); @@ -174,7 +175,7 @@ export class LinkMenuItem extends React.Component { {/*
*/}
-
+
this.followDefault()} onContextMenu={this.onContextMenu}>
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index c625c4cd6..d04cdd34c 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -24,6 +24,8 @@ interface DocumentLinksButtonProps { export class DocumentLinksButton extends React.Component { private _linkButton = React.createRef(); + @observable public static StartLink: DocumentView | undefined; + @action onLinkButtonMoved = (e: PointerEvent) => { if (this._linkButton.current !== null) { @@ -51,11 +53,9 @@ export class DocumentLinksButton extends React.Component { - setupMoveUpEvents(this, e, this.onLinkButtonMoved, emptyFunction, action((e, doubleTap) => { - if (doubleTap) { + if (doubleTap && this.props.InMenu) { DocumentLinksButton.StartLink = this.props.View; } else if (!!!this.props.InMenu) { DocumentLinksButton.EditLink = this.props.View; @@ -63,6 +63,17 @@ export class DocumentLinksButton extends React.Component { + if (this.props.InMenu) { + DocumentLinksButton.StartLink = this.props.View; + } else if (!!!this.props.InMenu) { + DocumentLinksButton.EditLink = this.props.View; + DocumentLinksButton.EditLinkLoc = [e.clientX + 10, e.clientY]; + } + } + completeLink = (e: React.PointerEvent): void => { setupMoveUpEvents(this, e, returnFalse, emptyFunction, action((e, doubleTap) => { if (doubleTap) { @@ -76,6 +87,15 @@ export class DocumentLinksButton extends React.Component { + if (DocumentLinksButton.StartLink === this.props.View) { + DocumentLinksButton.StartLink = undefined; + } else { + DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View && + DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.props.View.props.Document }, "long drag"); + } + } + @observable public static EditLink: DocumentView | undefined; public static EditLinkLoc: number[] = [0, 0]; @@ -86,7 +106,7 @@ export class DocumentLinksButton extends React.Component
LinkDocPreview.LinkInfo = undefined)} // onPointerEnter={action(e => links.length && (LinkDocPreview.LinkInfo = { // addDocTab: this.props.View.props.addDocTab, @@ -97,7 +117,8 @@ export class DocumentLinksButton extends React.Component {links.length && !!!this.props.InMenu ? links.length : }
- {DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View ?
: (null)} + {DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View ?
: (null)} {DocumentLinksButton.StartLink === this.props.View ?
: (null)}
; } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 09eeaee36..6820b2047 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -116,6 +116,7 @@ export class DocumentView extends DocComponent(Docu protected multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer; private holdDisposer?: InteractionUtils.MultiTouchEventDisposer; + public get title() { return this.props.Document.title } public get displayName() { return "DocumentView(" + this.props.Document.title + ")"; } // this makes mobx trace() statements more descriptive public get ContentDiv() { return this._mainCont.current; } get active() { return SelectionManager.IsSelected(this, true) || this.props.parentActive(true); } diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 2a79e2f13..dc7d8c7ca 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -58,6 +58,7 @@ import { FieldView, FieldViewProps } from "../FieldView"; import "./FormattedTextBox.scss"; import { FormattedTextBoxComment, formattedTextBoxCommentPlugin } from './FormattedTextBoxComment'; import React = require("react"); +import { DocumentManager } from '../../../util/DocumentManager'; library.add(faEdit); library.add(faSmile, faTextHeight, faUpload); @@ -1047,6 +1048,40 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp } } + @action + onDoubleClick = (e: React.MouseEvent): void => { + + this.doLinkOnDeselect(); + FormattedTextBox._downEvent = true; + FormattedTextBoxComment.textBox = this; + if (this.props.onClick && e.button === 0 && !this.props.isSelected(false)) { + e.preventDefault(); + } + if (e.button === 0 && this.props.isSelected(true) && !e.altKey && !e.ctrlKey && !e.metaKey) { + if (e.clientX < this.ProseRef!.getBoundingClientRect().right) { // stop propagation if not in sidebar + e.stopPropagation(); // if the text box is selected, then it consumes all down events + } + } + if (e.button === 2 || (e.button === 0 && e.ctrlKey)) { + e.preventDefault(); + } + FormattedTextBoxComment.Hide(); + if (FormattedTextBoxComment.linkDoc) { + if (FormattedTextBoxComment.linkDoc.type !== DocumentType.LINK) { + this.props.addDocTab(FormattedTextBoxComment.linkDoc, e.ctrlKey ? "inTab" : "onRight"); + } else { + DocumentManager.Instance.FollowLink(FormattedTextBoxComment.linkDoc, this.props.Document, + (doc: Doc, followLinkLocation: string) => this.props.addDocTab(doc, e.ctrlKey ? "inTab" : followLinkLocation)); + } + } + + (e.nativeEvent as any).formattedHandled = true; + + if (e.buttons === 1 && this.props.isSelected(true) && !e.altKey) { + e.stopPropagation(); + } + } + @action onFocused = (e: React.FocusEvent): void => { console.log("FOUCSS") @@ -1317,6 +1352,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp } } })} + onDoubleClick={this.onDoubleClick} >
Date: Wed, 1 Jul 2020 18:03:22 -0500 Subject: UI change of popup --- src/client/views/collections/CollectionLinearView.scss | 12 ++++++------ src/client/views/collections/CollectionLinearView.tsx | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionLinearView.scss b/src/client/views/collections/CollectionLinearView.scss index 90c96e08b..647ce1b01 100644 --- a/src/client/views/collections/CollectionLinearView.scss +++ b/src/client/views/collections/CollectionLinearView.scss @@ -10,15 +10,15 @@ height: 100%; >span { - margin-top: "auto"; - margin-bottom: "auto"; + margin-top: 8px; + margin-left: 4px; + //margin-bottom: 2px; background: $dark-color; color: $light-color; display: inline-block; border-radius: 18px; - margin-top: auto; - margin-bottom: auto; - margin-right: 3px; + margin-right: 6px; + padding: "4px"; cursor: pointer; } @@ -58,7 +58,7 @@ >input:checked~label { transform: rotate(45deg); -transition: transform 0.5s; + transition: transform 0.5s; cursor: pointer; } diff --git a/src/client/views/collections/CollectionLinearView.tsx b/src/client/views/collections/CollectionLinearView.tsx index 29deb906a..df8e2c58e 100644 --- a/src/client/views/collections/CollectionLinearView.tsx +++ b/src/client/views/collections/CollectionLinearView.tsx @@ -146,7 +146,7 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) { background: backgroundColor === color ? "black" : backgroundColor, }} onPointerDown={e => e.stopPropagation()} > - + Creating Link From: {DocumentLinksButton.StartLink.title} Date: Wed, 1 Jul 2020 16:47:47 -0700 Subject: added color picker for highlighter --- .../views/nodes/formattedText/RichTextMenu.tsx | 2 +- src/client/views/pdf/PDFMenu.scss | 19 ++++++ src/client/views/pdf/PDFMenu.tsx | 68 ++++++++++++++++++++-- 3 files changed, 82 insertions(+), 7 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx index 0fcddfc43..b9ca82243 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.tsx +++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx @@ -933,7 +933,7 @@ interface ButtonDropdownProps { } @observer -class ButtonDropdown extends React.Component { +export class ButtonDropdown extends React.Component { @observable private showDropdown: boolean = false; private ref: HTMLDivElement | null = null; diff --git a/src/client/views/pdf/PDFMenu.scss b/src/client/views/pdf/PDFMenu.scss index 3c08ba80d..fa43a99b2 100644 --- a/src/client/views/pdf/PDFMenu.scss +++ b/src/client/views/pdf/PDFMenu.scss @@ -3,4 +3,23 @@ width: 200px; padding: 5px; grid-template-columns: 90px 20px 90px; +} + +.color-wrapper { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + + button.color-button { + width: 20px; + height: 20px; + border-radius: 15px !important; + margin: 3px; + border: 2px solid transparent !important; + padding: 3px; + + &.active { + border: 2px solid white; + } + } } \ No newline at end of file diff --git a/src/client/views/pdf/PDFMenu.tsx b/src/client/views/pdf/PDFMenu.tsx index 6dcf5cce6..00c56d73e 100644 --- a/src/client/views/pdf/PDFMenu.tsx +++ b/src/client/views/pdf/PDFMenu.tsx @@ -1,22 +1,43 @@ import React = require("react"); import "./PDFMenu.scss"; -import { observable, action, } from "mobx"; +import { observable, action, computed, } from "mobx"; import { observer } from "mobx-react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { unimplementedFunction, returnFalse } from "../../../Utils"; +import { unimplementedFunction, returnFalse, Utils } from "../../../Utils"; import AntimodeMenu from "../AntimodeMenu"; import { Doc, Opt } from "../../../fields/Doc"; +import { ColorState } from "react-color"; +import { ButtonDropdown } from "../nodes/formattedText/RichTextMenu"; + @observer export default class PDFMenu extends AntimodeMenu { static Instance: PDFMenu; private _commentCont = React.createRef(); + private _palette = [ + "rgba(208, 2, 27, 0.8)", + "rgba(238, 0, 0, 0.8)", + "rgba(245, 166, 35, 0.8)", + "rgba(248, 231, 28, 0.8)", + "rgba(245, 230, 95, 0.616)", + "rgba(139, 87, 42, 0.8)", + "rgba(126, 211, 33, 0.8)", + "rgba(65, 117, 5, 0.8)", + "rgba(144, 19, 254, 0.8)", + "rgba(238, 169, 184, 0.8)", + "rgba(224, 187, 228, 0.8)", + "rgba(225, 223, 211, 0.8)", + "rgba(255, 255, 255, 0.8)", + "rgba(155, 155, 155, 0.8)", + "rgba(0, 0, 0, 0.8)"]; @observable private _keyValue: string = ""; @observable private _valueValue: string = ""; @observable private _added: boolean = false; + @observable private highlightColor: string = "rgba(245, 230, 95, 0.616)"; + @observable public _colorBtn = false; @observable public Highlighting: boolean = false; @observable public Status: "pdf" | "annotation" | "" = ""; @@ -70,11 +91,47 @@ export default class PDFMenu extends AntimodeMenu { @action highlightClicked = (e: React.MouseEvent) => { - if (!this.Highlight("rgba(245, 230, 95, 0.616)") && this.Pinned) { // yellowish highlight color for a marker type highlight + if (!this.Highlight(this.highlightColor) && this.Pinned) { this.Highlighting = !this.Highlighting; } } + @computed get highlighter() { + const button = + ; + + const dropdownContent = +
+

Change highlighter color:

+
+ {this._palette.map(color => { + if (color) { + return this.highlightColor === color ? + : + ; + } + })} +
+
; + return ( + + ); + } + + @action + changeHighlightColor = (color: string, e: React.PointerEvent) => { + const col: ColorState = { + hex: color, hsl: { a: 0, h: 0, s: 0, l: 0, source: "" }, hsv: { a: 0, h: 0, s: 0, v: 0, source: "" }, + rgb: { a: 0, r: 0, b: 0, g: 0, source: "" }, oldHue: 0, source: "", + }; + e.preventDefault(); + e.stopPropagation(); + this.highlightColor = Utils.colorString(col); + } + deleteClicked = (e: React.PointerEvent) => { this.Delete(); } @@ -101,12 +158,11 @@ export default class PDFMenu extends AntimodeMenu { render() { const buttons = this.Status === "pdf" ? [ - , + this.highlighter, , + , ] : [ , -- cgit v1.2.3-70-g09d2 From fcbf3a161839111ac609ec737cd56c71efde18a1 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 1 Jul 2020 21:13:10 -0400 Subject: added basic synchronizatoin between links and their hypertext anchors. more work is needed to handle overlapping anchors. --- src/client/util/LinkManager.ts | 2 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 39 ++++++++++++++- .../views/nodes/formattedText/RichTextMenu.tsx | 32 ++++--------- .../nodes/formattedText/prosemirrorPatches.js | 55 ++++++++++++++++++++++ 4 files changed, 103 insertions(+), 25 deletions(-) (limited to 'src/client/views') diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts index 9b4dc2630..749fabfcc 100644 --- a/src/client/util/LinkManager.ts +++ b/src/client/util/LinkManager.ts @@ -49,7 +49,7 @@ export class LinkManager { } public deleteLink(linkDoc: Doc): boolean { - if (LinkManager.Instance.LinkManagerDoc) { + if (LinkManager.Instance.LinkManagerDoc && linkDoc instanceof Doc) { Doc.RemoveDocFromList(LinkManager.Instance.LinkManagerDoc, "data", linkDoc); return true; } diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 664141607..f32c17563 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -8,7 +8,7 @@ import { baseKeymap, selectAll } from "prosemirror-commands"; import { history } from "prosemirror-history"; import { inputRules } from 'prosemirror-inputrules'; import { keymap } from "prosemirror-keymap"; -import { Fragment, Mark, Node, Slice } from "prosemirror-model"; +import { Fragment, Mark, Node, Slice, Schema } from "prosemirror-model"; import { EditorState, NodeSelection, Plugin, TextSelection, Transaction } from "prosemirror-state"; import { ReplaceStep } from 'prosemirror-transform'; import { EditorView } from "prosemirror-view"; @@ -16,6 +16,7 @@ import { DateField } from '../../../../fields/DateField'; import { DataSym, Doc, DocListCast, DocListCastAsync, Field, HeightSym, Opt, WidthSym, AclSym } from "../../../../fields/Doc"; import { documentSchema } from '../../../../fields/documentSchemas'; import applyDevTools = require("prosemirror-dev-tools"); +import { removeMarkWithAttrs } from "./prosemirrorPatches"; import { Id } from '../../../../fields/FieldSymbols'; import { InkTool } from '../../../../fields/InkField'; import { PrefetchProxy } from '../../../../fields/Proxy'; @@ -56,7 +57,7 @@ import { DocumentButtonBar } from '../../DocumentButtonBar'; import { AudioBox } from '../AudioBox'; import { FieldView, FieldViewProps } from "../FieldView"; import "./FormattedTextBox.scss"; -import { FormattedTextBoxComment, formattedTextBoxCommentPlugin } from './FormattedTextBoxComment'; +import { FormattedTextBoxComment, formattedTextBoxCommentPlugin, findLinkMark } from './FormattedTextBoxComment'; import React = require("react"); library.add(faEdit); @@ -87,6 +88,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp private _editorView: Opt; private _applyingChange: boolean = false; private _searchIndex = 0; + private _cachedLinks: Doc[] = []; private _undoTyping?: UndoManager.Batch; private _disposers: { [name: string]: IReactionDisposer } = {}; private _dropDisposer?: DragManager.DragDropDisposer; @@ -141,6 +143,33 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp public get CurrentDiv(): HTMLDivElement { return this._ref.current!; } + // removes all hyperlink anchors for the removed linkDoc + // TODO: bcz: Argh... if a section of text has multiple anchors, this should just remove the intended one. + // but since removing one anchor from the list of attr anchors isn't implemented, this will end up removing nothing. + public RemoveLinkFromDoc(linkDoc?: Doc) { + const state = this._editorView?.state; + if (state && linkDoc && this._editorView) { + var allHrefs: any[] = []; + state.doc.nodesBetween(0, state.doc.nodeSize - 2, (node: any, pos: number, parent: any) => { + const foundMark = findLinkMark(node.marks); + const newHrefs = foundMark?.attrs.allHrefs.filter((a: any) => a.href.includes(linkDoc[Id])) || []; + allHrefs = newHrefs.length ? newHrefs : allHrefs; + return true; + }); + if (allHrefs.length) { + this._editorView.dispatch(removeMarkWithAttrs(state.tr, 0, state.doc.nodeSize - 2, state.schema.marks.link, { allHrefs })); + } + } + } + // removes all the specified link referneces from the selection. + // NOTE: as above, this won't work correctly if there are marks with overlapping but not exact sets of link references. + public RemoveLinkFromSelection(allHrefs: { href: string, title: string, linkId: string, targetId: string }[]) { + const state = this._editorView?.state; + if (state && this._editorView) { + this._editorView.dispatch(removeMarkWithAttrs(state.tr, state.selection.from, state.selection.to, state.schema.marks.link, { allHrefs })); + } + } + linkOnDeselect: Map = new Map(); doLinkOnDeselect() { @@ -626,6 +655,12 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp } } componentDidMount() { + this._cachedLinks = DocListCast(this.Document.links); + this._disposers.links = reaction(() => DocListCast(this.Document.links), // if a link is deleted, then remove all hyperlinks that reference it from the text's marks + newLinks => { + this._cachedLinks.forEach(l => !newLinks.includes(l) && this.RemoveLinkFromDoc(l)); + this._cachedLinks = newLinks; + }); this._disposers.buttonBar = reaction( () => DocumentButtonBar.Instance, instance => { diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx index 0fcddfc43..6366f299d 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.tsx +++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx @@ -772,28 +772,16 @@ export default class RichTextMenu extends AntimodeMenu { } deleteLink = () => { - if (!this.view) return; - - const node = this.view.state.selection.$from.nodeAfter; - const link = node && node.marks.find(m => m.type === this.view!.state.schema.marks.link); - const href = link!.attrs.allHrefs.length > 0 ? link!.attrs.allHrefs[0].href : undefined; - if (href) { - if (href.indexOf(Utils.prepend("/doc/")) === 0) { - const linkclicked = href.replace(Utils.prepend("/doc/"), "").split("?")[0]; - if (linkclicked) { - DocServer.GetRefField(linkclicked).then(async linkDoc => { - if (linkDoc instanceof Doc) { - LinkManager.Instance.deleteLink(linkDoc); - this.view!.dispatch(this.view!.state.tr.removeMark(this.view!.state.selection.from, this.view!.state.selection.to, this.view!.state.schema.marks.link)); - } - }); - } - } else { - if (node) { - const { tr, schema, selection } = this.view.state; - const extension = this.linkExtend(selection.$anchor, href); - this.view.dispatch(tr.removeMark(extension.from, extension.to, schema.marks.link)); - } + if (this.view) { + const link = this.view.state.selection.$from.nodeAfter?.marks.find(m => m.type === this.view!.state.schema.marks.link); + if (link) { + const allHrefs = link.attrs.allHrefs.slice(); + this.TextView.RemoveLinkFromSelection(link.attrs.allHrefs); + // bcz: Argh ... this will remove the link from the document even it's anchored somewhere else in the text which happens if only part of the anchor text was selected. + allHrefs.filter((aref: any) => aref?.href.indexOf(Utils.prepend("/doc/")) === 0).forEach((aref: any) => { + const linkId = aref.href.replace(Utils.prepend("/doc/"), "").split("?")[0]; + linkId && DocServer.GetRefField(linkId).then(linkDoc => LinkManager.Instance.deleteLink(linkDoc as Doc)) + }); } } } diff --git a/src/client/views/nodes/formattedText/prosemirrorPatches.js b/src/client/views/nodes/formattedText/prosemirrorPatches.js index 763961958..0969ea4ef 100644 --- a/src/client/views/nodes/formattedText/prosemirrorPatches.js +++ b/src/client/views/nodes/formattedText/prosemirrorPatches.js @@ -9,6 +9,7 @@ var prosemirrorModel = require('prosemirror-model'); exports.liftListItem = liftListItem; exports.sinkListItem = sinkListItem; exports.wrappingInputRule = wrappingInputRule; +exports.removeMarkWithAttrs = removeMarkWithAttrs; // :: (NodeType) → (state: EditorState, dispatch: ?(tr: Transaction)) → bool // Create a command to lift the list item around the selection up into // a wrapping list. @@ -139,3 +140,57 @@ function wrappingInputRule(regexp, nodeType, getAttrs, joinPredicate, customWith } +// :: ([Mark]) → ?Mark +// Tests whether there is a mark of this type in the given set. +function isInSetWithAttrs(mark, set, attrs) { + for (var i = 0; i < set.length; i++) { + if (set[i].type == mark) { + if (Array.from(Object.keys(attrs)).reduce((p, akey) => { + return p && JSON.stringify(set[i].attrs[akey]) === JSON.stringify(attrs[akey]); + }, true)) { + return set[i]; + } + } + } +}; + +// :: (number, number, ?union) → this +// Remove marks from inline nodes between `from` and `to`. When `mark` +// is a single mark, remove precisely that mark. When it is a mark type, +// remove all marks of that type. When it is null, remove all marks of +// any type. +function removeMarkWithAttrs(tr, from, to, mark, attrs) { + if (mark === void 0) mark = null; + + var matched = [], step = 0; + tr.doc.nodesBetween(from, to, function (node, pos) { + if (!node.isInline) { return } + step++; + var toRemove = null; + if (mark) { + if (isInSetWithAttrs(mark, node.marks, attrs)) { toRemove = [mark]; } + } else { + toRemove = node.marks; + } + if (toRemove && toRemove.length) { + var end = Math.min(pos + node.nodeSize, to); + for (var i = 0; i < toRemove.length; i++) { + var style = toRemove[i], found$1 = (void 0); + for (var j = 0; j < matched.length; j++) { + var m = matched[j]; + if (m.step == step - 1 && style.eq(matched[j].style)) { found$1 = m; } + } + if (found$1) { + found$1.to = end; + found$1.step = step; + } else { + matched.push({ style: style, from: Math.max(pos, from), to: end, step: step }); + } + } + } + }); + matched.forEach(function (m) { return tr.step(new prosemirrorTransform.RemoveMarkStep(m.from, m.to, m.style)); }); + return tr +}; + + -- cgit v1.2.3-70-g09d2 From 19a48bfe9b2087d23ab6bbb384f8edc18ed07d81 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 1 Jul 2020 21:26:35 -0400 Subject: renamed link to linkAnchor and allHrefs to allLinks in rich text code --- .../views/nodes/formattedText/FormattedTextBox.tsx | 36 +++++++++++----------- .../formattedText/FormattedTextBoxComment.tsx | 4 +-- .../views/nodes/formattedText/RichTextMenu.tsx | 18 +++++------ .../views/nodes/formattedText/RichTextRules.ts | 2 +- src/client/views/nodes/formattedText/marks_rts.ts | 20 ++++++------ src/fields/RichTextUtils.ts | 2 +- 6 files changed, 41 insertions(+), 41 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index f32c17563..9c7c46ae9 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -149,24 +149,24 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp public RemoveLinkFromDoc(linkDoc?: Doc) { const state = this._editorView?.state; if (state && linkDoc && this._editorView) { - var allHrefs: any[] = []; + var allLinks: any[] = []; state.doc.nodesBetween(0, state.doc.nodeSize - 2, (node: any, pos: number, parent: any) => { const foundMark = findLinkMark(node.marks); - const newHrefs = foundMark?.attrs.allHrefs.filter((a: any) => a.href.includes(linkDoc[Id])) || []; - allHrefs = newHrefs.length ? newHrefs : allHrefs; + const newHrefs = foundMark?.attrs.allLinks.filter((a: any) => a.href.includes(linkDoc[Id])) || []; + allLinks = newHrefs.length ? newHrefs : allLinks; return true; }); - if (allHrefs.length) { - this._editorView.dispatch(removeMarkWithAttrs(state.tr, 0, state.doc.nodeSize - 2, state.schema.marks.link, { allHrefs })); + if (allLinks.length) { + this._editorView.dispatch(removeMarkWithAttrs(state.tr, 0, state.doc.nodeSize - 2, state.schema.marks.linkAnchor, { allLinks })); } } } // removes all the specified link referneces from the selection. // NOTE: as above, this won't work correctly if there are marks with overlapping but not exact sets of link references. - public RemoveLinkFromSelection(allHrefs: { href: string, title: string, linkId: string, targetId: string }[]) { + public RemoveLinkFromSelection(allLinks: { href: string, title: string, linkId: string, targetId: string }[]) { const state = this._editorView?.state; if (state && this._editorView) { - this._editorView.dispatch(removeMarkWithAttrs(state.tr, state.selection.from, state.selection.to, state.schema.marks.link, { allHrefs })); + this._editorView.dispatch(removeMarkWithAttrs(state.tr, state.selection.from, state.selection.to, state.schema.marks.link, { allLinks })); } } @@ -206,8 +206,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp this.linkOnDeselect.set(key, value); const id = Utils.GenerateDeterministicGuid(this.dataDoc[Id] + key); - const allHrefs = [{ href: Utils.prepend("/doc/" + id), title: value, targetId: id }]; - const link = this._editorView.state.schema.marks.link.create({ allHrefs, location: "onRight", title: value }); + const allLinks = [{ href: Utils.prepend("/doc/" + id), title: value, targetId: id }]; + const link = this._editorView.state.schema.marks.linkAnchor.create({ allLinks, location: "onRight", title: value }); const mval = this._editorView.state.schema.marks.metadataVal.create(); const offset = (tx.selection.to === range!.end - 1 ? -1 : 0); tx = tx.addMark(textEndSelection - value.length + offset, textEndSelection, link).addMark(textEndSelection - value.length + offset, textEndSelection, mval); @@ -275,8 +275,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp const lastSel = Math.min(flattened.length - 1, this._searchIndex); this._searchIndex = ++this._searchIndex > flattened.length - 1 ? 0 : this._searchIndex; const alink = DocUtils.MakeLink({ doc: this.rootDoc }, { doc: target }, "automatic")!; - const allHrefs = [{ href: Utils.prepend("/doc/" + alink[Id]), title: "a link", targetId: target[Id], linkId: alink[Id] }]; - const link = this._editorView.state.schema.marks.link.create({ allHrefs, title: "a link", location }); + const allLinks = [{ href: Utils.prepend("/doc/" + alink[Id]), title: "a link", targetId: target[Id], linkId: alink[Id] }]; + const link = this._editorView.state.schema.marks.linkAnchor.create({ allLinks, title: "a link", location }); this._editorView.dispatch(tr.addMark(flattened[lastSel].from, flattened[lastSel].to, link)); } } @@ -643,9 +643,9 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp let tr = state.tr.addMark(sel.from, sel.to, splitter); sel.from !== sel.to && tr.doc.nodesBetween(sel.from, sel.to, (node: any, pos: number, parent: any) => { if (node.firstChild === null && node.marks.find((m: Mark) => m.type.name === schema.marks.splitter.name)) { - const allHrefs = [{ href, title, targetId, linkId }]; - allHrefs.push(...(node.marks.find((m: Mark) => m.type.name === schema.marks.link.name)?.attrs.allHrefs ?? [])); - const link = state.schema.marks.link.create({ allHrefs, title, location, linkId }); + const allLinks = [{ href, title, targetId, linkId }]; + allLinks.push(...(node.marks.find((m: Mark) => m.type.name === schema.marks.linkAnchor.name)?.attrs.allLinks ?? [])); + const link = state.schema.marks.linkAnchor.create({ allLinks, title, location, linkId }); tr = tr.addMark(pos, pos + node.nodeSize, link); } }); @@ -766,8 +766,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp return node.copy(content.frag); } const marks = [...node.marks]; - const linkIndex = marks.findIndex(mark => mark.type === editor.state.schema.marks.link); - return linkIndex !== -1 && marks[linkIndex].attrs.allHrefs.find((item: { href: string }) => scrollToLinkID === item.href.replace(/.*\/doc\//, "")) ? node : undefined; + const linkIndex = marks.findIndex(mark => mark.type === editor.state.schema.marks.linkAnchor); + return linkIndex !== -1 && marks[linkIndex].attrs.allLinks.find((item: { href: string }) => scrollToLinkID === item.href.replace(/.*\/doc\//, "")) ? node : undefined; }; let start = 0; @@ -949,8 +949,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp } const marks = [...node.marks]; const linkIndex = marks.findIndex(mark => mark.type.name === "link"); - const allHrefs = [{ href: Utils.prepend(`/doc/${linkId}`), title, linkId }]; - const link = view.state.schema.mark(view.state.schema.marks.link, { allHrefs, location: "onRight", title, docref: true }); + const allLinks = [{ href: Utils.prepend(`/doc/${linkId}`), title, linkId }]; + const link = view.state.schema.mark(view.state.schema.marks.linkAnchor, { allLinks, location: "onRight", title, docref: true }); marks.splice(linkIndex === -1 ? 0 : linkIndex, 1, link); return node.mark(marks); } diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx index 90f2c0aa6..4c90b6afd 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx @@ -27,7 +27,7 @@ export function findUserMark(marks: Mark[]): Mark | undefined { return marks.find(m => m.attrs.userid); } export function findLinkMark(marks: Mark[]): Mark | undefined { - return marks.find(m => m.type === schema.marks.link); + return marks.find(m => m.type === schema.marks.linkAnchor); } export function findStartOfMark(rpos: ResolvedPos, view: EditorView, finder: (marks: Mark[]) => Mark | undefined) { let before = 0; @@ -182,7 +182,7 @@ export class FormattedTextBoxComment { state.doc.nodesBetween(state.selection.from, state.selection.to, (node: any, pos: number, parent: any) => !child && node.marks.length && (child = node)); child = child || (nbef && state.selection.$from.nodeBefore); const mark = child ? findLinkMark(child.marks) : undefined; - const href = (!mark?.attrs.docref || naft === nbef) && mark?.attrs.allHrefs.find((item: { href: string }) => item.href)?.href || forceUrl; + const href = (!mark?.attrs.docref || naft === nbef) && mark?.attrs.allLinks.find((item: { href: string }) => item.href)?.href || forceUrl; if (forceUrl || (href && child && nbef && naft && mark?.attrs.showPreview)) { FormattedTextBoxComment.tooltipText.textContent = "external => " + href; (FormattedTextBoxComment.tooltipText as any).href = href; diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx index 6366f299d..3ec75e680 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.tsx +++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx @@ -737,7 +737,7 @@ export default class RichTextMenu extends AntimodeMenu { const node = this.view.state.selection.$from.nodeAfter; const link = node && node.marks.find(m => m.type.name === "link"); if (link) { - const href = link.attrs.allHrefs.length > 0 ? link.attrs.allHrefs[0].href : undefined; + const href = link.attrs.allLinks.length > 0 ? link.attrs.allLinks[0].href : undefined; if (href) { if (href.indexOf(Utils.prepend("/doc/")) === 0) { const linkclicked = href.replace(Utils.prepend("/doc/"), "").split("?")[0]; @@ -773,27 +773,27 @@ export default class RichTextMenu extends AntimodeMenu { deleteLink = () => { if (this.view) { - const link = this.view.state.selection.$from.nodeAfter?.marks.find(m => m.type === this.view!.state.schema.marks.link); + const link = this.view.state.selection.$from.nodeAfter?.marks.find(m => m.type === this.view!.state.schema.marks.linkAnchor); if (link) { - const allHrefs = link.attrs.allHrefs.slice(); - this.TextView.RemoveLinkFromSelection(link.attrs.allHrefs); + const allLinks = link.attrs.allLinks.slice(); + this.TextView.RemoveLinkFromSelection(link.attrs.allLinks); // bcz: Argh ... this will remove the link from the document even it's anchored somewhere else in the text which happens if only part of the anchor text was selected. - allHrefs.filter((aref: any) => aref?.href.indexOf(Utils.prepend("/doc/")) === 0).forEach((aref: any) => { + allLinks.filter((aref: any) => aref?.href.indexOf(Utils.prepend("/doc/")) === 0).forEach((aref: any) => { const linkId = aref.href.replace(Utils.prepend("/doc/"), "").split("?")[0]; - linkId && DocServer.GetRefField(linkId).then(linkDoc => LinkManager.Instance.deleteLink(linkDoc as Doc)) + linkId && DocServer.GetRefField(linkId).then(linkDoc => LinkManager.Instance.deleteLink(linkDoc as Doc)); }); } } } linkExtend($start: ResolvedPos, href: string) { - const mark = this.view!.state.schema.marks.link; + const mark = this.view!.state.schema.marks.linkAnchor; let startIndex = $start.index(); let endIndex = $start.indexAfter(); - while (startIndex > 0 && $start.parent.child(startIndex - 1).marks.filter(m => m.type === mark && m.attrs.allHrefs.find((item: { href: string }) => item.href === href)).length) startIndex--; - while (endIndex < $start.parent.childCount && $start.parent.child(endIndex).marks.filter(m => m.type === mark && m.attrs.allHrefs.find((item: { href: string }) => item.href === href)).length) endIndex++; + while (startIndex > 0 && $start.parent.child(startIndex - 1).marks.filter(m => m.type === mark && m.attrs.allLinks.find((item: { href: string }) => item.href === href)).length) startIndex--; + while (endIndex < $start.parent.childCount && $start.parent.child(endIndex).marks.filter(m => m.type === mark && m.attrs.allLinks.find((item: { href: string }) => item.href === href)).length) endIndex++; let startPos = $start.start(); let endPos = startPos; diff --git a/src/client/views/nodes/formattedText/RichTextRules.ts b/src/client/views/nodes/formattedText/RichTextRules.ts index 612a824fc..ca30dde9d 100644 --- a/src/client/views/nodes/formattedText/RichTextRules.ts +++ b/src/client/views/nodes/formattedText/RichTextRules.ts @@ -279,7 +279,7 @@ export class RichTextRules { DocUtils.Publish(target, docid, returnFalse, returnFalse); DocUtils.MakeLink({ doc: this.Document }, { doc: target }, "portal to"); }); - const link = state.schema.marks.link.create({ href: Utils.prepend("/doc/" + docid), location: "onRight", title: docid, targetId: docid }); + const link = state.schema.marks.linkAnchor.create({ href: Utils.prepend("/doc/" + docid), location: "onRight", title: docid, targetId: docid }); return state.tr.deleteRange(end - 1, end).deleteRange(start, start + 2).addMark(start, end - 3, link); } return state.tr; diff --git a/src/client/views/nodes/formattedText/marks_rts.ts b/src/client/views/nodes/formattedText/marks_rts.ts index 54b61aa20..3d7d71b14 100644 --- a/src/client/views/nodes/formattedText/marks_rts.ts +++ b/src/client/views/nodes/formattedText/marks_rts.ts @@ -17,12 +17,12 @@ export const marks: { [index: string]: MarkSpec } = { return ["div", { className: "dummy" }, 0]; } }, - // :: MarkSpec A link. Has `href` and `title` attributes. `title` + // :: MarkSpec A linkAnchor. The anchor can have multiple links, where each link has an href URL and a title for use in menus and hover (Dash links have linkIDs & targetIDs). `title` // defaults to the empty string. Rendered and parsed as an `` // element. - link: { + linkAnchor: { attrs: { - allHrefs: { default: [] as { href: string, title: string, linkId: string, targetId: string }[] }, + allLinks: { default: [] as { href: string, title: string, linkId: string, targetId: string }[] }, showPreview: { default: true }, location: { default: null }, title: { default: null }, @@ -31,22 +31,22 @@ export const marks: { [index: string]: MarkSpec } = { inclusive: false, parseDOM: [{ tag: "a[href]", getAttrs(dom: any) { - return { allHrefs: [{ href: dom.getAttribute("href"), title: dom.getAttribute("title"), linkId: dom.getAttribute("linkids"), targetId: dom.getAttribute("targetids") }], location: dom.getAttribute("location"), }; + return { allLinks: [{ href: dom.getAttribute("href"), title: dom.getAttribute("title"), linkId: dom.getAttribute("linkids"), targetId: dom.getAttribute("targetids") }], location: dom.getAttribute("location"), }; } }], toDOM(node: any) { - const targetids = node.attrs.allHrefs.reduce((p: string, item: { href: string, title: string, targetId: string, linkId: string }) => p + " " + item.targetId, ""); - const linkids = node.attrs.allHrefs.reduce((p: string, item: { href: string, title: string, targetId: string, linkId: string }) => p + " " + item.linkId, ""); + const targetids = node.attrs.allLinks.reduce((p: string, item: { href: string, title: string, targetId: string, linkId: string }) => p + " " + item.targetId, ""); + const linkids = node.attrs.allLinks.reduce((p: string, item: { href: string, title: string, targetId: string, linkId: string }) => p + " " + item.linkId, ""); return node.attrs.docref && node.attrs.title ? - ["div", ["span", `"`], ["span", 0], ["span", `"`], ["br"], ["a", { ...node.attrs, href: node.attrs.allHrefs[0].href, class: "prosemirror-attribution" }, node.attrs.title], ["br"]] : - node.attrs.allHrefs.length === 1 ? - ["a", { ...node.attrs, class: linkids, targetids, title: `${node.attrs.title}`, href: node.attrs.allHrefs[0].href }, 0] : + ["div", ["span", `"`], ["span", 0], ["span", `"`], ["br"], ["a", { ...node.attrs, href: node.attrs.allLinks[0].href, class: "prosemirror-attribution" }, node.attrs.title], ["br"]] : + node.attrs.allLinks.length === 1 ? + ["a", { ...node.attrs, class: linkids, targetids, title: `${node.attrs.title}`, href: node.attrs.allLinks[0].href }, 0] : ["div", { class: "prosemirror-anchor" }, ["span", { class: "prosemirror-linkBtn" }, ["a", { ...node.attrs, class: linkids, targetids, title: `${node.attrs.title}` }, 0], ["input", { class: "prosemirror-hrefoptions" }], ], - ["div", { class: "prosemirror-links" }, ...node.attrs.allHrefs.map((item: { href: string, title: string }) => + ["div", { class: "prosemirror-links" }, ...node.attrs.allLinks.map((item: { href: string, title: string }) => ["a", { class: "prosemirror-dropdownlink", href: item.href }, item.title] )] ]; diff --git a/src/fields/RichTextUtils.ts b/src/fields/RichTextUtils.ts index 7c7bf3e12..a590c88c4 100644 --- a/src/fields/RichTextUtils.ts +++ b/src/fields/RichTextUtils.ts @@ -392,7 +392,7 @@ export namespace RichTextUtils { const { attrs } = mark; switch (converted) { case "link": - let url = attrs.allHrefs.length ? attrs.allHrefs[0].href : ""; + let url = attrs.allLinks.length ? attrs.allLinks[0].href : ""; const delimiter = "/doc/"; const alreadyShared = "?sharing=true"; if (new RegExp(window.location.origin + delimiter).test(url) && !url.endsWith(alreadyShared)) { -- cgit v1.2.3-70-g09d2 From 6f0357e17c0dfe201fe60e841ab89e4714d86d16 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Thu, 2 Jul 2020 12:00:41 +0800 Subject: fixing kluge with scrolling --- src/client/views/collections/CollectionStackingView.tsx | 2 +- src/client/views/pdf/PDFViewer.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'src/client/views') diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 0af5c21be..9d8790dda 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -476,7 +476,7 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument) transformOrigin: "top left", }} onScroll={action(e => { - if (!this.props.isSelected() && this.props.renderDepth && window.screen.width > 600) e.currentTarget.scrollTop = this._scroll; + if (!this.props.isSelected() && this.props.renderDepth) e.currentTarget.scrollTop = this._scroll; else this._scroll = e.currentTarget.scrollTop; })} onDrop={this.onExternalDrop.bind(this)} diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index b03dfe217..cd6aa4e29 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -695,7 +695,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent; } @computed get pdfViewerDiv() { - return
; + return
; } @computed get contentScaling() { return this.props.ContentScaling(); } @computed get standinViews() { -- cgit v1.2.3-70-g09d2 From 713b200804fa84d654aeb0051e086641d55d95d9 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 2 Jul 2020 10:17:26 -0400 Subject: started some cleanup for Mobile .. lookslike workspaces view is broken now --- src/client/util/CurrentUserUtils.ts | 3 +- src/client/views/AntimodeMenu.tsx | 2 +- src/client/views/nodes/DocumentView.tsx | 7 +- src/client/views/nodes/PDFBox.tsx | 3 - src/client/views/nodes/RadialMenu.tsx | 2 - .../views/nodes/formattedText/FormattedTextBox.tsx | 6 +- src/mobile/MobileInterface.tsx | 393 +++++++++------------ 7 files changed, 170 insertions(+), 246 deletions(-) (limited to 'src/client/views') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index e86f72684..6906c0bb3 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -32,7 +32,6 @@ export class CurrentUserUtils { public static get MainDocId() { return this.mainDocId; } public static set MainDocId(id: string | undefined) { this.mainDocId = id; } @computed public static get UserDocument() { return Doc.UserDoc(); } - @computed public static get ActivePen() { return Doc.UserDoc().activePen instanceof Doc && (Doc.UserDoc().activePen as Doc).inkPen as Doc; } @observable public static GuestTarget: Doc | undefined; @observable public static GuestWorkspace: Doc | undefined; @@ -365,7 +364,7 @@ export class CurrentUserUtils { } else { const templateIconsDoc = Cast(doc["template-icons"], Doc, null); const requiredTypes = [doc["template-icon-view"] as Doc, doc["template-icon-view-img"] as Doc, - doc["template-icon-view-col"] as Doc, doc["template-icon-view-rtf"] as Doc, doc["template-icon-view-pdf"] as Doc]; + doc["template-icon-view-col"] as Doc, doc["template-icon-view-rtf"] as Doc]; DocListCastAsync(templateIconsDoc.data).then(async curIcons => { await Promise.all(curIcons!); requiredTypes.map(ntype => Doc.AddDocToList(templateIconsDoc, "data", ntype)); diff --git a/src/client/views/AntimodeMenu.tsx b/src/client/views/AntimodeMenu.tsx index 3e4d20fea..b8f77932d 100644 --- a/src/client/views/AntimodeMenu.tsx +++ b/src/client/views/AntimodeMenu.tsx @@ -131,7 +131,7 @@ export default abstract class AntimodeMenu extends React.Component { } protected getDragger = () => { - return
; + return
; } protected getElement(buttons: JSX.Element[]) { diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 0ec676379..8d122baeb 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -29,7 +29,6 @@ import { SelectionManager } from "../../util/SelectionManager"; import SharingManager from '../../util/SharingManager'; import { Transform } from "../../util/Transform"; import { undoBatch, UndoManager } from "../../util/UndoManager"; -import { CollectionDockingView, DockedFrameRenderer } from "../collections/CollectionDockingView"; import { CollectionView, CollectionViewType } from '../collections/CollectionView'; import { ContextMenu } from "../ContextMenu"; import { ContextMenuProps } from '../ContextMenuItem'; @@ -185,7 +184,7 @@ export class DocumentView extends DocComponent(Docu // RadialMenu.Instance.addItem({ description: "Open Fields", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "onRight"), icon: "map-pin", selected: -1 }); RadialMenu.Instance.addItem({ description: "Delete", event: () => { this.props.ContainingCollectionView?.removeDocument(this.props.Document), RadialMenu.Instance.closeMenu(); }, icon: "external-link-square-alt", selected: -1 }); // RadialMenu.Instance.addItem({ description: "Open in a new tab", event: () => this.props.addDocTab(this.props.Document, "onRight"), icon: "trash", selected: -1 }); - RadialMenu.Instance.addItem({ description: "Pin", event: () => DockedFrameRenderer.PinDoc(this.props.Document), icon: "map-pin", selected: -1 }); + RadialMenu.Instance.addItem({ description: "Pin", event: () => this.props.pinToPres(this.props.Document), icon: "map-pin", selected: -1 }); RadialMenu.Instance.addItem({ description: "Open", event: () => MobileInterface.Instance.handleClick(this.props.Document), icon: "trash", selected: -1 }); SelectionManager.DeselectAll(); @@ -945,7 +944,7 @@ export class DocumentView extends DocComponent(Docu recommendations.documentIconHeight = 150; recommendations.sourceDoc = this.props.Document; recommendations.sourceDocContext = this.props.ContainingCollectionView!.props.Document; - CollectionDockingView.AddRightSplit(recommendations, undefined); + this.props.addDocTab(recommendations, "onRight"); // RecommendationsBox.Instance.displayRecommendations(e.pageX + 100, e.pageY); } @@ -977,7 +976,7 @@ export class DocumentView extends DocComponent(Docu body.href = urls[i]; bodies.push(body); } - CollectionDockingView.AddRightSplit(Docs.Create.SchemaDocument(headers, bodies, { title: `Showing External Recommendations for "${StrCast(doc.title)}"` }), undefined); + this.props.addDocTab(Docs.Create.SchemaDocument(headers, bodies, { title: `Showing External Recommendations for "${StrCast(doc.title)}"` }), "onRight"); this._showKPQuery = true; this._queries = kps.toString(); } diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 54f44a0f9..1c5825a8f 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -226,9 +226,6 @@ export class PDFBox extends ViewBoxAnnotatableComponent 600)); - console.log("_nativeHeight: " + this.Document._nativeHeight); - console.log("%: " + `${100 / this.contentScaling}%`); const classname = "pdfBox" + (this.active() ? "-interactive" : ""); return
{ - console.log("caught"); te.stopPropagation(); te.preventDefault(); } diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index ae1db76de..270fcb01c 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -190,7 +190,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp } } const state = this._editorView.state.apply(tx); - this?._editorView?.updateState(state); + this._editorView?.updateState(state); (tx.storedMarks && !this._editorView.state.storedMarks) && (this._editorView.state.storedMarks = tx.storedMarks); const tsel = this._editorView.state.selection.$from; @@ -512,8 +512,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp } recordDictation = () => { - console.log("recording dictation"); - console.log(this._editorView); DictationManager.Controls.listen({ interimHandler: this.setCurrentBulletContent, continuous: { indefinite: false }, @@ -532,7 +530,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp } recordBullet = async () => { - console.log("recording bullet"); const completedCue = "end session"; const results = await DictationManager.Controls.listen({ interimHandler: this.setCurrentBulletContent, @@ -549,7 +546,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp setCurrentBulletContent = (value: string) => { if (this._editorView) { - console.log("this._editorView"); const state = this._editorView.state; const now = Date.now(); let mark = schema.marks.user_mark.create({ userid: Doc.CurrentUserEmail, modified: Math.floor(now / 1000) }); diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx index 1b934df93..34894250a 100644 --- a/src/mobile/MobileInterface.tsx +++ b/src/mobile/MobileInterface.tsx @@ -13,7 +13,7 @@ import { action, computed, observable, reaction, trace } from 'mobx'; import { observer } from 'mobx-react'; import { Doc, DocListCast } from '../fields/Doc'; import { CurrentUserUtils } from '../client/util/CurrentUserUtils'; -import { emptyFunction, emptyPath, returnEmptyString, returnFalse, returnOne, returnTrue, returnZero, returnEmptyFilter } from '../Utils'; +import { emptyFunction, emptyPath, returnFalse, returnOne, returnTrue, returnZero, returnEmptyFilter } from '../Utils'; import { Docs, DocumentOptions } from '../client/documents/Documents'; import { Scripting } from '../client/util/Scripting'; import { DocumentView } from '../client/views/nodes/DocumentView'; @@ -35,7 +35,6 @@ import { AudioUpload } from "./AudioUpload"; import { Cast, FieldValue } from '../fields/Types'; import RichTextMenu from "../client/views/nodes/formattedText/RichTextMenu"; import { AudioBox } from "../client/views/nodes/AudioBox"; -import { Compute } from "google-auth-library"; library.add(faTasks, faReply, faQuoteLeft, faHandPointLeft, faFolderOpen, faAngleDoubleLeft, faExternalLinkSquareAlt, faMobile, faThLarge, faWindowClose, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus, faTerminal, faToggleOn, fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard, @@ -47,22 +46,22 @@ library.add(faTasks, faReply, faQuoteLeft, faHandPointLeft, faFolderOpen, faAngl @observer export class MobileInterface extends React.Component { @observable static Instance: MobileInterface; - @computed private get userDoc() { return Doc.UserDoc(); } - @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; } - @observable private mainDoc: any = CurrentUserUtils.setupActiveMobileMenu(this.userDoc); - @observable private renderView?: () => JSX.Element; - @observable private sidebarActive: boolean = false; //to toggle sidebar display - @observable private imageUploadActive: boolean = false; //to toggle image upload - @observable private audioUploadActive: boolean = false; - @observable private menuListView: boolean = false; //to switch between menu view (list / icon) + @observable private _mainDoc: any = CurrentUserUtils.setupActiveMobileMenu(Doc.UserDoc()); + @observable private _sidebarActive: boolean = false; //to toggle sidebar display + @observable private _imageUploadActive: boolean = false; //to toggle image upload + @observable private _audioUploadActive: boolean = false; + @observable private _menuListView: boolean = false; //to switch between menu view (list / icon) @observable private _ink: boolean = false; //toggle whether ink is being dispalyed + @observable private renderView?: () => JSX.Element; - public _activeDoc: Doc = this.mainDoc; // doc updated as the active mobile page is updated (initially home menu) - public _homeDoc: Doc = this.mainDoc; // home menu as a document + private _activeDoc: Doc = this._mainDoc; // doc updated as the active mobile page is updated (initially home menu) + private _homeDoc: Doc = this._mainDoc; // home menu as a document private _homeMenu: boolean = true; // to determine whether currently at home menu private _child: Doc | null = null; // currently selected document private _parents: Array = []; // array of parent docs (for pathbar) - private _library: Doc = CurrentUserUtils.setupLibrary(this.userDoc); // to access documents in Dash Web + private _library: Doc = CurrentUserUtils.setupLibrary(Doc.UserDoc()); // to access documents in Dash Web + + @computed private get mainContainer() { return Doc.UserDoc() ? FieldValue(Cast(Doc.UserDoc().activeMobile, Doc)) : CurrentUserUtils.GuestMobile; } constructor(props: Readonly<{}>) { super(props); @@ -72,7 +71,7 @@ export class MobileInterface extends React.Component { @action componentDidMount = () => { // if the home menu is in list view -> adjust the menu toggle appropriately - this._homeDoc._viewType === "stacking" ? this.menuListView = true : this.menuListView = false; + this._menuListView = this._homeDoc._viewType === "stacking" ? true : false; Doc.SetSelectedTool(InkTool.None); // ink should intially be set to none Doc.UserDoc().activeMobile = this._homeDoc; // active mobile set to home AudioBox.Enabled = true; @@ -95,14 +94,14 @@ export class MobileInterface extends React.Component { // Switch the mobile view to the given doc @action switchCurrentView = (doc: Doc, renderView?: () => JSX.Element, onSwitch?: () => void) => { - if (!this.userDoc) return; + if (!Doc.UserDoc()) return; if (this._activeDoc === this._homeDoc) { this._parents.push(this._activeDoc); this._homeMenu = false; } this._activeDoc = doc; Doc.UserDoc().activeMobile = doc; - onSwitch && onSwitch(); + onSwitch?.(); this.renderView = renderView; // Ensures that switching to home is not registed @@ -113,7 +112,7 @@ export class MobileInterface extends React.Component { // For toggling the hamburger menu @action toggleSidebar = () => { - this.sidebarActive = !this.sidebarActive; + this._sidebarActive = !this._sidebarActive; if (this._ink) { this.onSwitchInking(); @@ -126,7 +125,6 @@ export class MobileInterface extends React.Component { this.switchCurrentView(this._library); this._homeMenu = false; this.toggleSidebar(); - //setTimeout(this.toggleSidebar, 300); } /** @@ -146,13 +144,11 @@ export class MobileInterface extends React.Component { this._child = null; this.switchCurrentView(this._homeDoc); // Case 3: Parent document is any document - } else { - if (doc) { - this._child = doc; - this.switchCurrentView(doc); - this._homeMenu = false; - header.textContent = String(doc.title); - } + } else if (doc) { + this._child = doc; + this.switchCurrentView(doc); + this._homeMenu = false; + header.textContent = String(doc.title); } this._ink = false; // turns ink off } @@ -161,13 +157,13 @@ export class MobileInterface extends React.Component { * Return 'Home", which implies returning to 'Home' menu buttons */ returnHome = () => { - if (!this._homeMenu || this.sidebarActive) { + if (!this._homeMenu || this._sidebarActive) { this._homeMenu = true; this._parents = []; this._child = null; this.switchCurrentView(this._homeDoc); } - if (this.sidebarActive) { + if (this._sidebarActive) { this.toggleSidebar(); } } @@ -185,42 +181,38 @@ export class MobileInterface extends React.Component { /** * DocumentView for graphic display of all documents */ + whitebackground = () => "white"; @computed get displayWorkspaces() { - if (this.mainContainer) { - const backgroundColor = () => "white"; - return ( -
- -
- ); - } + return !this.mainContainer ? (null) : +
+ +
; } - /** * Note: window.innerWidth and window.screen.width compute different values. * window.screen.width is the display size, however window.innerWidth is the @@ -235,8 +227,7 @@ export class MobileInterface extends React.Component { * @param doc: doc for which the method is called */ handleClick = async (doc: Doc) => { - const children = DocListCast(doc.data); - if (doc.type !== "collection" && this.sidebarActive) { + if (doc.type !== "collection" && this._sidebarActive) { this._parents.push(this._activeDoc); this.switchCurrentView(doc); this._homeMenu = false; @@ -267,12 +258,7 @@ export class MobileInterface extends React.Component { * Handles creation of array which is then rendered in renderPathbar() */ createPathname = () => { - const docArray = []; - this._parents.map((doc: Doc, index: any) => { - docArray.push(doc); - }); - docArray.push(this._activeDoc); - return docArray; + return [...this._parents, this._activeDoc]; } // Renders the graphical pathbar @@ -280,24 +266,21 @@ export class MobileInterface extends React.Component { const docArray = this.createPathname(); const items = docArray.map((doc: Doc, index: any) => { if (index === 0) { - return ( - <> - {this._homeMenu ? -
-
this.handlePathClick(doc, index)}>{doc.title} -
-
- : -
-
this.handlePathClick(doc, index)}>{doc.title} -
-
} - ); + return this._homeMenu ? +
+
this.handlePathClick(doc, index)}>{doc.title} +
+
+ : +
+
this.handlePathClick(doc, index)}>{doc.title} +
+
; } else if (doc === this._activeDoc) { return ( @@ -357,14 +340,14 @@ export class MobileInterface extends React.Component { } // Renders the contents of the menu and sidebar - renderDefaultContent = () => { + @computed get renderDefaultContent() { if (this._homeMenu) { return (
-
this.stop(e)}>
+
e.stopPropagation()}>