diff options
6 files changed, 75 insertions, 18 deletions
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 3e7b0bd0f..25b1381fe 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -1,6 +1,6 @@ import React = require("react"); -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faAnchor, faArrowRight } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Checkbox, Tooltip } from "@material-ui/core"; import { intersection } from "lodash"; import { action, autorun, computed, Lambda, observable } from "mobx"; @@ -17,6 +17,7 @@ import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, retu import { DocumentType } from "../documents/DocumentTypes"; import { CurrentUserUtils } from "../util/CurrentUserUtils"; import { DocumentManager } from "../util/DocumentManager"; +import { LinkManager } from "../util/LinkManager"; import { SelectionManager } from "../util/SelectionManager"; import { SharingManager } from "../util/SharingManager"; import { Transform } from "../util/Transform"; @@ -27,12 +28,10 @@ import { EditableView } from "./EditableView"; import { InkStrokeProperties } from "./InkStrokeProperties"; import { DocumentView, StyleProviderFunc } from "./nodes/DocumentView"; import { KeyValueBox } from "./nodes/KeyValueBox"; -import { PresBox } from "./nodes/trails/PresBox"; import { PropertiesButtons } from "./PropertiesButtons"; import { PropertiesDocContextSelector } from "./PropertiesDocContextSelector"; import "./PropertiesView.scss"; import { DefaultStyleProvider } from "./StyleProvider"; -import { LinkManager } from "../util/LinkManager"; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss index 3c3d040d2..8aa813f1e 100644 --- a/src/client/views/collections/CollectionStackingView.scss +++ b/src/client/views/collections/CollectionStackingView.scss @@ -131,9 +131,37 @@ margin-left: -5; } + // Documents in stacking view .collectionStackingView-columnDoc { - display: inline-block; - margin: auto; + display: flex; + // margin: auto; // Removed auto so that it is no longer center aligned - this could be something we change + position: relative; + + &:hover { + .hoverButtons{ + opacity: 1; + } + } + + .hoverButtons { + display: flex; + opacity: 0; + position: absolute; + height: 100%; + left: -35px; + justify-content: center; + align-items: center; + padding: 0px 10px; + + .buttonWrapper { + padding: 3px; + border-radius: 3px; + + &:hover { + background: rgba(0, 0, 0, 0.26); + } + } + } } .collectionStackingView-masonryDoc { diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index cdc680a08..419b9a943 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -65,6 +65,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument, @computed get isStackingView() { return (this.props.viewType ?? this.layoutDoc._viewType) === CollectionViewType.Stacking; } @computed get numGroupColumns() { return this.isStackingView ? Math.max(1, this.Sections.size + (this.showAddAGroup ? 1 : 0)) : 1; } @computed get showAddAGroup() { return this.pivotField && !this.chromeHidden; } + // columnWidth handles the margin on the left and right side of the documents @computed get columnWidth() { return Math.min(this.props.PanelWidth() - 2 * this.xMargin, this.isStackingView ? Number.MAX_VALUE : this.layoutDoc._columnWidth === -1 ? this.props.PanelWidth() - 2 * this.xMargin : NumCast(this.layoutDoc._columnWidth, 250)); @@ -79,17 +80,32 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument, } } + // TODO: plj - these are the children children = (docs: Doc[]) => { TraceMobx(); this._docXfs.length = 0; + // Go through each of the documents that are contained return docs.map((d, i) => { const height = () => this.getDocHeight(d); const width = () => this.getDocWidth(d); const rowSpan = Math.ceil((height() + this.gridGap) / this.gridGap); const style = this.isStackingView ? { width: width(), marginTop: i ? this.gridGap : 0, height: height() } : { gridRowEnd: `span ${rowSpan}` }; return <div className={`collectionStackingView-${this.isStackingView ? "columnDoc" : "masonryDoc"}`} key={d[Id]} style={style} > + <div className="hoverButtons"> + {/* We'll want to add an onPointerDown that uses DragManager.DocumentDragData + -- we also want to remember to preventDefault (so other drag events are not recognized over this one) + -- Design discussion as to whether we want dragging to be on the document itself or with a drag button + -- Do we want clicking on this button to do anything as well? + -- Design Question: Schema view also has the notion of a drag manager (different from this one), do we want + the same functionality? + -- Problem: This only shows when the outer container is selected... + */} + <div className="buttonWrapper"> + <FontAwesomeIcon icon={"grip-vertical"} onPointerDown={e => e.stopPropagation()} /> + </div> + </div> {this.getDisplayDoc(d, width)} - </div>; + </div> }); } @action @@ -275,7 +291,13 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument, getDocWidth(d?: Doc) { if (!d) return 0; const childLayoutDoc = Doc.Layout(d, this.props.childLayoutTemplate?.()); - const maxWidth = this.columnWidth / this.numGroupColumns; + // TODO: pj - replace with a better way to calculate the margin + let margin = 25; + d.margin = 25; + if (this.columnWidth < 150){ + margin = 0; + } + const maxWidth = (this.columnWidth / this.numGroupColumns) - (margin * 2); if (!this.layoutDoc._columnsFill && !(childLayoutDoc._fitWidth || this.props.childFitWidth?.(d))) { return Math.min(d[WidthSym](), maxWidth); } @@ -317,9 +339,19 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument, </div>; } + // TODO: plj + @action + onPointerOver = (e: React.PointerEvent) => { + if (DragManager.docsBeingDragged.length){ + console.log(DragManager.docsBeingDragged[0].title) + } + } + + // TODO: plj - look at this @undoBatch @action onInternalDrop = (e: Event, de: DragManager.DropEvent) => { + console.log('drop') const where = [de.x, de.y]; let dropInd = -1; let dropAfter = 0; @@ -371,6 +403,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument, @undoBatch @action onExternalDrop = async (e: React.DragEvent): Promise<void> => { + console.log('external drop') const where = [e.clientX, e.clientY]; let targInd = -1; this._docXfs.map((cd, i) => { @@ -600,6 +633,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument, pointerEvents: this.backgroundEvents ? "all" : undefined }} onScroll={action(e => this._scroll = e.currentTarget.scrollTop)} + onPointerOver={this.onPointerOver} onDrop={this.onExternalDrop.bind(this)} onContextMenu={this.onContextMenu} onWheel={e => this.props.isContentActive(true) && e.stopPropagation()} > diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx index 32424bdc8..1a27be764 100644 --- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx +++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx @@ -315,22 +315,16 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC //TODO: would be great if there was additional space beyond the frame, so that you can actually see your // bottom note <div key={`${heading}-add-document`} className="collectionStackingView-addDocumentButton" - style={{ width: this.props.columnWidth / this.props.numGroupColumns, marginBottom: 10 }}> + style={{ width: this.props.columnWidth / this.props.numGroupColumns, marginBottom: 10, marginLeft: 25 }}> <EditableView GetValue={returnEmptyString} SetValue={this.addNewTextDoc} textCallback={this.textCallback} - contents={"+ NEW"} + placeholder={"Type ':' for commands"} + contents={<FontAwesomeIcon icon={"plus"}/>} toggle={this.toggleVisibility} - menuCallback={this.menuCallback} /> - <EditableView - GetValue={returnEmptyString} - SetValue={this.addNewTextDoc} - textCallback={this.textCallback} - contents={"+ OLD"} - toggle={this.toggleVisibility} - menuCallback={this.menuCallback} - showMenuOnLoad={true} /> + menuCallback={this.menuCallback} + /> </div> : null} </div> } diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index fc1bcb8b9..34209ebc9 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -446,6 +446,7 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?: generatedDocuments.push(...await DocUtils.uploadFilesToDocs(files, options)); } if (generatedDocuments.length) { + // Creating a dash document const isFreeformView = this.props.Document._viewType === CollectionViewType.Freeform; const set = !isFreeformView ? generatedDocuments : generatedDocuments.length > 1 ? generatedDocuments.map(d => { DocUtils.iconify(d); return d; }) : []; diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx index b30e8cc13..a93e1e8d3 100644 --- a/src/client/views/nodes/trails/PresElementBox.tsx +++ b/src/client/views/nodes/trails/PresElementBox.tsx @@ -167,6 +167,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc } /** + * TODO: glr, pj - factor this logic into collectionStackingView * Function to drag and drop the pres element to a diferent location */ //TODO: this is what you need to look into |