diff options
9 files changed, 133 insertions, 66 deletions
diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss index 8f112de0c..30938688d 100644 --- a/src/client/views/ContextMenu.scss +++ b/src/client/views/ContextMenu.scss @@ -61,6 +61,42 @@ letter-spacing: 2px; text-transform: uppercase; padding-right: 30px; + + .icon-background { + pointer-events: all; + background-color: transparent; + width: 35px; + text-align: center; + font-size: 20px; + margin-left: 5px; + margin-top: 5px; + margin-bottom: 5px; + height: 20px; + } +} +.contextMenu-description { + // width: 11vw; //10vw + background: whitesmoke; + display: flex; //comment out to allow search icon to be inline with search text + justify-content: left; + -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; + border-style: none; + // padding: 10px 0px 10px 0px; + white-space: nowrap; + font-size: 13px; + color: grey; + letter-spacing: 2px; + text-transform: uppercase; + padding-right: 30px; + margin-top: 5px; + height: 20px; + margin-bottom: 5px; } .contextMenu-item:hover { @@ -121,15 +157,4 @@ padding-left: 10px; border: solid black 1px; border-radius: 5px; -} - -.icon-background { - pointer-events: all; - height:100%; - margin-top: 15px; - background-color: transparent; - width: 35px; - text-align: center; - font-size: 20px; - margin-left: 5px; }
\ No newline at end of file diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx index fef9e5f60..99840047f 100644 --- a/src/client/views/ContextMenuItem.tsx +++ b/src/client/views/ContextMenuItem.tsx @@ -51,7 +51,8 @@ export class ContextMenuItem extends React.Component<ContextMenuProps & { select currentTimeout?: any; static readonly timeout = 300; - onPointerEnter = () => { + _overPosY = 0; + onPointerEnter = (e: React.MouseEvent) => { if (this.currentTimeout) { clearTimeout(this.currentTimeout); this.currentTimeout = undefined; @@ -59,6 +60,7 @@ export class ContextMenuItem extends React.Component<ContextMenuProps & { select if (this.overItem) { return; } + this._overPosY = e.clientY; this.currentTimeout = setTimeout(action(() => this.overItem = true), ContextMenuItem.timeout); } @@ -88,18 +90,22 @@ export class ContextMenuItem extends React.Component<ContextMenuProps & { select </div> ); } else if ("subitems" in this.props) { + const where = !this.overItem ? "" : this._overPosY < window.innerHeight / 3 ? "flex-start" : this._overPosY > window.innerHeight * 2 / 3 ? "flex-end" : "center"; + const marginTop = !this.overItem ? "" : this._overPosY < window.innerHeight / 3 ? "20px" : this._overPosY > window.innerHeight * 2 / 3 ? "-20px" : ""; const submenu = !this.overItem ? (null) : - <div className="contextMenu-subMenu-cont" style={{ marginLeft: "25%", left: "0px" }}> + <div className="contextMenu-subMenu-cont" style={{ marginLeft: "25%", left: "0px", marginTop }}> {this._items.map(prop => <ContextMenuItem {...prop} key={prop.description} closeMenu={this.props.closeMenu} />)} </div>; return ( - <div className={"contextMenu-item" + (this.props.selected ? " contextMenu-itemSelected" : "")} onMouseLeave={this.onPointerLeave} onMouseEnter={this.onPointerEnter}> + <div className={"contextMenu-item" + (this.props.selected ? " contextMenu-itemSelected" : "")} style={{ alignItems: where }} + onMouseLeave={this.onPointerLeave} onMouseEnter={this.onPointerEnter}> {this.props.icon ? ( - <span className="icon-background" onMouseEnter={this.onPointerLeave}> + <span className="icon-background" onMouseEnter={this.onPointerLeave} style={{ alignItems: "center" }}> <FontAwesomeIcon icon={this.props.icon} size="sm" /> </span> ) : null} - <div className="contextMenu-description" onMouseEnter={this.onPointerEnter} > + <div className="contextMenu-description" onMouseEnter={this.onPointerEnter} + style={{ alignItems: "center" }} > {this.props.description} <FontAwesomeIcon icon={faAngleRight} size="lg" style={{ position: "absolute", right: "10px" }} /> </div> diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 24a3119cc..799bc7f67 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -189,8 +189,8 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { active={this.props.active} whenActiveChanged={this.props.whenActiveChanged} addDocTab={this.addDocTab} - pinToPres={this.props.pinToPres}> - </ContentFittingDocumentView>; + pinToPres={this.props.pinToPres} + />; } getDocWidth(d?: Doc) { diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 7f5dc98f1..218c5705d 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -348,7 +348,9 @@ class TreeView extends React.Component<TreeViewProps> { </div></ul>; } else { const layoutDoc = Doc.Layout(this.props.document); - return <div ref={this._dref} style={{ display: "inline-block", height: this.docHeight() }} key={this.props.document[Id] + this.props.document.title}> + const panelHeight = layoutDoc.type === DocumentType.RTF ? this.rtfHeight : this.docHeight; + const panelWidth = layoutDoc.type === DocumentType.RTF ? this.rtfWidth : this.docWidth; + return <div ref={this._dref} style={{ display: "inline-block", height: panelHeight() }} key={this.props.document[Id] + this.props.document.title}> <ContentFittingDocumentView Document={layoutDoc} DataDocument={this.templateDataDoc} @@ -360,8 +362,8 @@ class TreeView extends React.Component<TreeViewProps> { FreezeDimensions={true} NativeWidth={layoutDoc.type === DocumentType.RTF ? this.rtfWidth : undefined} NativeHeight={layoutDoc.type === DocumentType.RTF ? this.rtfHeight : undefined} - PanelWidth={layoutDoc.type === DocumentType.RTF ? this.rtfWidth : this.docWidth} - PanelHeight={layoutDoc.type === DocumentType.RTF ? this.rtfHeight : this.docHeight} + PanelWidth={panelWidth} + PanelHeight={panelHeight} getTransform={this.docTransform} CollectionDoc={this.props.containingCollection} CollectionView={undefined} @@ -727,7 +729,7 @@ export class CollectionTreeView extends CollectionSubView<Document, Partial<coll } }); }); - const { TextDocument, ImageDocument, CarouselDocument } = Docs.Create; + const { TextDocument, ImageDocument, CarouselDocument, TreeDocument } = Docs.Create; const { Document } = this.props; const fallbackImg = "http://www.cs.brown.edu/~bcz/face.gif"; const detailedTemplate = `{ "doc": { "type": "doc", "content": [ { "type": "paragraph", "content": [ { "type": "dashField", "attrs": { "fieldKey": "year" } } ] }, { "type": "paragraph", "content": [ { "type": "dashField", "attrs": { "fieldKey": "company" } } ] } ] }, "selection":{"type":"text","anchor":1,"head":1},"storedMarks":[] }`; @@ -735,10 +737,12 @@ export class CollectionTreeView extends CollectionSubView<Document, Partial<coll const textDoc = TextDocument("", { title: "details", _autoHeight: true }); const detailView = Docs.Create.StackingDocument([ CarouselDocument([], { title: "data", _height: 350, _itemIndex: 0, backgroundColor: "#9b9b9b3F" }), - // textDoc, - TextDocument("", { title: "shortDescription", _autoHeight: true }), - // TreeDocument([], { title: "narratives", _height: 75, treeViewHideTitle: true }), - TextDocument("", { title: "longDescription", _height: 350 }) + TreeDocument([ + // textDoc, + TextDocument("", { title: "shortDescription", _autoHeight: true }), + // TreeDocument([], { title: "narratives", _height: 75, treeViewHideTitle: true }), + TextDocument("", { title: "longDescription", _height: 350 }) + ], { title: "stuff", _height: 100 }) ], { _chromeStatus: "disabled", _width: 300, _height: 300, _autoHeight: true, title: "detailView" }); textDoc.data = new RichTextField(detailedTemplate, "year company"); detailView.isTemplateDoc = makeTemplate(detailView); diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx index 0e1cc2010..9d09ecc3b 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx @@ -5,7 +5,7 @@ import { Doc } from '../../../../new_fields/Doc'; import { documentSchema } from '../../../../new_fields/documentSchemas'; import { makeInterface } from '../../../../new_fields/Schema'; import { BoolCast, NumCast, ScriptCast, StrCast, Cast } from '../../../../new_fields/Types'; -import { DragManager } from '../../../util/DragManager'; +import { DragManager, dropActionType } from '../../../util/DragManager'; import { Transform } from '../../../util/Transform'; import { undoBatch } from '../../../util/UndoManager'; import { ContentFittingDocumentView } from '../../nodes/ContentFittingDocumentView'; @@ -214,21 +214,32 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu } getDisplayDoc(layout: Doc, dxf: () => Transform, width: () => number, height: () => number) { return <ContentFittingDocumentView - {...this.props} Document={layout} DataDocument={layout.resolvedDataDoc as Doc} - NativeHeight={returnZero} - NativeWidth={returnZero} - addDocTab={this.addDocTab} - fitToBox={BoolCast(this.props.Document._freezeChildDimensions)} - FreezeDimensions={BoolCast(this.props.Document._freezeChildDimensions)} backgroundColor={this.props.backgroundColor} - CollectionDoc={this.props.Document} + LayoutDoc={this.props.childLayoutTemplate} + LibraryPath={this.props.LibraryPath} + FreezeDimensions={this.props.freezeChildDimensions} + renderDepth={this.props.renderDepth + 1} PanelWidth={width} PanelHeight={height} - getTransform={dxf} + NativeHeight={returnZero} + NativeWidth={returnZero} + fitToBox={BoolCast(this.props.Document._freezeChildDimensions)} + rootSelected={this.rootSelected} + dropAction={StrCast(this.props.Document.childDropAction) as dropActionType} onClick={this.onChildClickHandler} - renderDepth={this.props.renderDepth + 1} + getTransform={dxf} + focus={this.props.focus} + CollectionDoc={this.props.CollectionView?.props.Document} + CollectionView={this.props.CollectionView} + addDocument={this.props.addDocument} + moveDocument={this.props.moveDocument} + removeDocument={this.props.removeDocument} + active={this.props.active} + whenActiveChanged={this.props.whenActiveChanged} + addDocTab={this.addDocTab} + pinToPres={this.props.pinToPres} />; } /** diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx index 1eb486c4f..af0cc3b5c 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMultirowView.tsx @@ -13,7 +13,7 @@ import { Transform } from '../../../util/Transform'; import HeightLabel from './MultirowHeightLabel'; import ResizeBar from './MultirowResizer'; import { undoBatch } from '../../../util/UndoManager'; -import { DragManager } from '../../../util/DragManager'; +import { DragManager, dropActionType } from '../../../util/DragManager'; import { List } from '../../../../new_fields/List'; type MultirowDocument = makeInterface<[typeof documentSchema]>; @@ -214,21 +214,32 @@ export class CollectionMultirowView extends CollectionSubView(MultirowDocument) } getDisplayDoc(layout: Doc, dxf: () => Transform, width: () => number, height: () => number) { return <ContentFittingDocumentView - {...this.props} Document={layout} DataDocument={layout.resolvedDataDoc as Doc} - NativeHeight={returnZero} - NativeWidth={returnZero} - addDocTab={this.addDocTab} - fitToBox={BoolCast(this.props.Document._freezeChildDimensions)} - FreezeDimensions={BoolCast(this.props.Document._freezeChildDimensions)} backgroundColor={this.props.backgroundColor} - CollectionDoc={this.props.Document} + LayoutDoc={this.props.childLayoutTemplate} + LibraryPath={this.props.LibraryPath} + FreezeDimensions={this.props.freezeChildDimensions} + renderDepth={this.props.renderDepth + 1} PanelWidth={width} PanelHeight={height} - getTransform={dxf} + NativeHeight={returnZero} + NativeWidth={returnZero} + fitToBox={BoolCast(this.props.Document._freezeChildDimensions)} + rootSelected={this.rootSelected} + dropAction={StrCast(this.props.Document.childDropAction) as dropActionType} onClick={this.onChildClickHandler} - renderDepth={this.props.renderDepth + 1} + getTransform={dxf} + focus={this.props.focus} + CollectionDoc={this.props.CollectionView?.props.Document} + CollectionView={this.props.CollectionView} + addDocument={this.props.addDocument} + moveDocument={this.props.moveDocument} + removeDocument={this.props.removeDocument} + active={this.props.active} + whenActiveChanged={this.props.whenActiveChanged} + addDocTab={this.addDocTab} + pinToPres={this.props.pinToPres} />; } /** diff --git a/src/client/views/nodes/RadialMenu.scss b/src/client/views/nodes/RadialMenu.scss index ce0c263ef..daa620d12 100644 --- a/src/client/views/nodes/RadialMenu.scss +++ b/src/client/views/nodes/RadialMenu.scss @@ -67,17 +67,4 @@ s margin-left: 5px; text-align: left; display: inline; //need this? -} - - - -.icon-background { - pointer-events: all; - height:100%; - margin-top: 15px; - background-color: transparent; - width: 35px; - text-align: center; - font-size: 20px; - margin-left: 5px; }
\ No newline at end of file diff --git a/src/client/views/nodes/RadialMenu.tsx b/src/client/views/nodes/RadialMenu.tsx index 0ffed78de..ddfdb67b4 100644 --- a/src/client/views/nodes/RadialMenu.tsx +++ b/src/client/views/nodes/RadialMenu.tsx @@ -1,12 +1,9 @@ import React = require("react"); +import { action, computed, IReactionDisposer, observable, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; -import { action, observable, computed, IReactionDisposer, reaction, runInAction } from "mobx"; -import { RadialMenuItem, RadialMenuProps } from "./RadialMenuItem"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import Measure from "react-measure"; -import "./RadialMenu.scss"; -import MobileInkOverlay from "../../../mobile/MobileInkOverlay"; import MobileInterface from "../../../mobile/MobileInterface"; +import "./RadialMenu.scss"; +import { RadialMenuItem, RadialMenuProps } from "./RadialMenuItem"; @observer export class RadialMenu extends React.Component { diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts index 25775edef..76aa51f63 100644 --- a/src/server/authentication/models/current_user_utils.ts +++ b/src/server/authentication/models/current_user_utils.ts @@ -82,8 +82,34 @@ export class CurrentUserUtils { }); } + if (doc["template-button-detail"] === undefined) { + const { TextDocument, ImageDocument, CarouselDocument, TreeDocument } = Docs.Create; + const fallbackImg = "http://www.cs.brown.edu/~bcz/face.gif"; + const detailedTemplate = `{ "doc": { "type": "doc", "content": [ { "type": "paragraph", "content": [ { "type": "dashField", "attrs": { "fieldKey": "year" } } ] }, { "type": "paragraph", "content": [ { "type": "dashField", "attrs": { "fieldKey": "company" } } ] } ] }, "selection":{"type":"text","anchor":1,"head":1},"storedMarks":[] }`; + + const textDoc = TextDocument("", { title: "details", _autoHeight: true }); + const detailView = Docs.Create.MultirowDocument([ + CarouselDocument([], { title: "data", _height: 350, _itemIndex: 0, backgroundColor: "#9b9b9b3F" }), + TreeDocument([ + // textDoc, + TextDocument("", { title: "short description", _autoHeight: true }), + // TreeDocument([], { title: "narratives", _height: 75, treeViewHideTitle: true }), + TextDocument("", { title: "long description", _height: 350 }) + ], { title: "stuff", _height: 100 }) + ], { _chromeStatus: "disabled", _width: 300, _height: 300, _autoHeight: true, title: "detailView" }); + textDoc.data = new RichTextField(detailedTemplate, "year company"); + detailView.isTemplateDoc = makeTemplate(detailView); + + doc["template-button-detail"] = CurrentUserUtils.ficon({ + onDragStart: ScriptField.MakeFunction('getCopy(this.dragFactory, true)'), + dragFactory: new PrefetchProxy(detailView) as any as Doc, + removeDropProperties: new List<string>(["dropAction"]), title: "detail view", icon: "window-maximize" + }); + } + if (doc["template-buttons"] === undefined) { - doc["template-buttons"] = new PrefetchProxy(Docs.Create.MasonryDocument([doc["template-button-slides"] as Doc, doc["template-button-description"] as Doc, doc["template-button-query"] as Doc], { + doc["template-buttons"] = new PrefetchProxy(Docs.Create.MasonryDocument([doc["template-button-slides"] as Doc, doc["template-button-description"] as Doc, + doc["template-button-query"] as Doc, doc["template-button-detail"] as Doc], { title: "Compound Item Creators", _xMargin: 0, _showTitle: "title", _autoHeight: true, _width: 500, columnWidth: 35, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), |