From 0513a1bda8dc923ef5e72ecac0d3d61680b9e60e Mon Sep 17 00:00:00 2001 From: eeng5 Date: Wed, 21 Aug 2019 18:09:10 -0400 Subject: masonry is kinda collapsible --- src/client/views/EditableView.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) (limited to 'src/client/views/EditableView.tsx') diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index c3612fee9..87af19062 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -3,6 +3,7 @@ import { observer } from 'mobx-react'; import { observable, action, trace } from 'mobx'; import "./EditableView.scss"; import * as Autosuggest from 'react-autosuggest'; +import { SchemaHeaderField } from '../../new_fields/SchemaHeaderField'; export interface EditableProps { /** @@ -40,6 +41,8 @@ export interface EditableProps { editing?: boolean; onClick?: (e: React.MouseEvent) => boolean; isEditingCallback?: (isEditing: boolean) => void; + // HeadingObject: SchemaHeaderField | undefined; + // HeadingsHack: number; } /** @@ -50,6 +53,8 @@ export interface EditableProps { @observer export class EditableView extends React.Component { @observable _editing: boolean = false; + @observable _collapsed: boolean = false; + @observable _headingsHack: number = 1; constructor(props: EditableProps) { super(props); @@ -66,6 +71,15 @@ export class EditableView extends React.Component { } } + // collapseSection() { + // if (this.props.HeadingObject) { + // this._headingsHack++; + // this.props.HeadingObject.setCollapsed(!this.props.HeadingObject.collapsed); + // this._collapsed = !this._collapsed; + // console.log("THIS IS COLLAPSE FROM EDITABLEVIEW" + this._collapsed); + // } + // } + @action onKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Tab") { @@ -93,6 +107,9 @@ export class EditableView extends React.Component { @action onClick = (e: React.MouseEvent) => { e.nativeEvent.stopPropagation(); + // if (e.ctrlKey) { + // this.collapseSection(); + // } if (!this.props.onClick || !this.props.onClick(e)) { this._editing = true; this.props.isEditingCallback && this.props.isEditingCallback(true); -- cgit v1.2.3-70-g09d2 From b895fcf2f63c4bddf413f9572964dfdfa083fd37 Mon Sep 17 00:00:00 2001 From: eeng5 Date: Fri, 23 Aug 2019 12:59:17 -0400 Subject: masonry + stacking color, delete, collapse, drag --- src/client/views/EditableView.tsx | 30 +++++----- .../collections/CollectionMasonryViewFieldRow.tsx | 32 +++++------ .../views/collections/CollectionStackingView.tsx | 43 -------------- .../CollectionStackingViewFieldColumn.tsx | 66 ++++++++++++++-------- src/new_fields/SchemaHeaderField.ts | 3 +- 5 files changed, 75 insertions(+), 99 deletions(-) (limited to 'src/client/views/EditableView.tsx') diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 87af19062..757ddbad1 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -41,8 +41,10 @@ export interface EditableProps { editing?: boolean; onClick?: (e: React.MouseEvent) => boolean; isEditingCallback?: (isEditing: boolean) => void; - // HeadingObject: SchemaHeaderField | undefined; - // HeadingsHack: number; + HeadingObject?: SchemaHeaderField | undefined; + HeadingsHack?: number; + toggle?: () => void; + color?: string | undefined; } /** @@ -53,7 +55,6 @@ export interface EditableProps { @observer export class EditableView extends React.Component { @observable _editing: boolean = false; - @observable _collapsed: boolean = false; @observable _headingsHack: number = 1; constructor(props: EditableProps) { @@ -71,14 +72,13 @@ export class EditableView extends React.Component { } } - // collapseSection() { - // if (this.props.HeadingObject) { - // this._headingsHack++; - // this.props.HeadingObject.setCollapsed(!this.props.HeadingObject.collapsed); - // this._collapsed = !this._collapsed; - // console.log("THIS IS COLLAPSE FROM EDITABLEVIEW" + this._collapsed); - // } - // } + collapseSection() { + if (this.props.HeadingObject) { + this._headingsHack++; + this.props.HeadingObject.setCollapsed(!this.props.HeadingObject.collapsed); + this.props.toggle && this.props.toggle(); + } + } @action onKeyDown = (e: React.KeyboardEvent) => { @@ -107,13 +107,15 @@ export class EditableView extends React.Component { @action onClick = (e: React.MouseEvent) => { e.nativeEvent.stopPropagation(); - // if (e.ctrlKey) { - // this.collapseSection(); - // } if (!this.props.onClick || !this.props.onClick(e)) { this._editing = true; this.props.isEditingCallback && this.props.isEditingCallback(true); } + if (e.ctrlKey) { + this._editing = false; + this.props.isEditingCallback && this.props.isEditingCallback(false); + this.collapseSection(); + } e.stopPropagation(); } diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx index 8943fea3b..ca386f91b 100644 --- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx +++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx @@ -248,7 +248,12 @@ export class CollectionMasonryViewFieldRow extends React.Component { + this.collapsed = !this.collapsed; + }); + @observable _headingsHack: number = 1; + render() { let cols = this.props.rows(); let rows = Math.max(1, Math.min(this.props.docList.length, Math.floor((this.props.parent.props.PanelWidth() - 2 * this.props.parent.xMargin) / (this.props.parent.columnWidth + this.props.parent.gridGap)))); @@ -264,30 +269,23 @@ export class CollectionMasonryViewFieldRow extends React.Component "", SetValue: this.addDocument, contents: "+ NEW", - // HeadingObject: this.props.headingObject, - // HeadingsHack: this._headingsHack + HeadingObject: this.props.headingObject, + HeadingsHack: this._headingsHack, + toggle: this.toggleVisibility, + color: this.props.color }; - // let headingView = this.props.headingObject ? let headingView =
-
{ - if (this.props.headingObject) { - this._headingsHack++; - this.props.headingObject.setCollapsed(!this.props.headingObject.collapsed); - this.collapsed = !this.collapsed; - console.log("value of collapse: " + this.collapsed); - } - })} - > - {this.props.heading} +
{headingView} {this.collapsed ? (null) : -
+ < div >
doc) { translate(offset[0], offset[1]). scale(NumCast(doc.width, 1) / this.columnWidth); } - // masonryChildren(docs: Doc[]) { - // this._docXfs.length = 0; - // return docs.map((d, i) => { - // let dref = React.createRef(); - // let layoutDoc = Doc.expandTemplateLayout(d, this.props.DataDoc); - // let width = () => (d.nativeWidth && !d.ignoreAspect && !this.props.Document.fillColumn ? Math.min(d[WidthSym](), this.columnWidth) : this.columnWidth);/// (uniqueHeadings.length + 1); - // let height = () => this.getDocHeight(layoutDoc); - // let dxf = () => this.getDocTransform(layoutDoc, dref.current!); - // let rowSpan = Math.ceil((height() + this.gridGap) / this.gridGap); - // this._docXfs.push({ dxf: dxf, width: width, height: height }); - // return
- // {this.getDisplayDoc(layoutDoc, d, dxf, width)} - //
; - // }); - // } - - // @observable _headingsHack: number = 1; - // sectionMasonry(heading: SchemaHeaderField | undefined, docList: Doc[]) { - // let cols = Math.max(1, Math.min(docList.length, - // Math.floor((this.props.PanelWidth() - 2 * this.xMargin) / (this.columnWidth + this.gridGap)))); - // // let specialCols = () => this.isMasonryView ? 1 : Math.max(1, Math.min(docList.length, - // // Math.floor((this.props.PanelWidth() - 2 * this.xMargin) / (this.columnWidth + this.gridGap)))); - // // let type: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" | undefined = undefined; - // return
- // {!heading ? (null) : - //
this._headingsHack++ && heading.setCollapsed(!heading.collapsed))} > - // {heading.heading} - //
} - // {this._headingsHack && heading && heading.collapsed ? (null) : - //
list + ` ${this.columnWidth}px`, ""), - // }}> - // {this.masonryChildren(docList)} - // {this.columnDragger} - //
- // } - //
; - // } sectionMasonry = (heading: SchemaHeaderField | undefined, docList: Doc[]) => { let key = this.sectionFilter; diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx index a3db46584..01bfd813b 100644 --- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx +++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx @@ -247,6 +247,14 @@ export class CollectionStackingViewFieldColumn extends React.Component { + this.collapsed = !this.collapsed; + }); + + @observable _headingsHack: number = 1; + render() { let cols = this.props.cols(); let key = StrCast(this.props.parent.props.Document.sectionFilter); @@ -261,12 +269,20 @@ export class CollectionStackingViewFieldColumn extends React.Component evContents, SetValue: this.headingChanged, contents: evContents, - oneLine: true + oneLine: true, + HeadingObject: this.props.headingObject, + HeadingsHack: this._headingsHack, + toggle: this.toggleVisibility, + color: this._color }; let newEditableViewProps = { GetValue: () => "", SetValue: this.addDocument, - contents: "+ NEW" + contents: "+ NEW", + HeadingObject: this.props.headingObject, + HeadingsHack: this._headingsHack, + toggle: this.toggleVisibility, + color: this._color }; let headingView = this.props.headingObject ?
{headingView} -
- {this.children(this.props.docList)} - {singleColumn ? (null) : this.props.parent.columnDragger} -
- {(this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'view-mode' && this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'disabled') ? -
- -
: null} + {this.collapsed ? (null) : +
+
+ {this.children(this.props.docList)} + {singleColumn ? (null) : this.props.parent.columnDragger} +
+ {(this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'view-mode' && this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'disabled') ? +
+ +
: null} +
+ }
); } diff --git a/src/new_fields/SchemaHeaderField.ts b/src/new_fields/SchemaHeaderField.ts index 7494c9bd1..92d0aec9a 100644 --- a/src/new_fields/SchemaHeaderField.ts +++ b/src/new_fields/SchemaHeaderField.ts @@ -105,5 +105,4 @@ export class SchemaHeaderField extends ObjectField { [ToScriptString]() { return `invalid`; } -} - +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 2b26a9e8b718fb595a0f40914741e4f7d7c19d14 Mon Sep 17 00:00:00 2001 From: eeng5 Date: Tue, 1 Oct 2019 18:52:53 -0400 Subject: UI changes: 3 buttons, bar, menu w/ alias --- src/client/views/EditableView.tsx | 13 ---------- .../collections/CollectionMasonryViewFieldRow.tsx | 25 +++++++++++++++---- .../views/collections/CollectionStackingView.scss | 10 +++++++- .../CollectionStackingViewFieldColumn.tsx | 28 ++++++++++++++++------ 4 files changed, 51 insertions(+), 25 deletions(-) (limited to 'src/client/views/EditableView.tsx') diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 4a77db3d6..58f5d662d 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -73,14 +73,6 @@ export class EditableView extends React.Component { } } - collapseSection() { - if (this.props.HeadingObject) { - this._headingsHack++; - this.props.HeadingObject.setCollapsed(!this.props.HeadingObject.collapsed); - this.props.toggle && this.props.toggle(); - } - } - @action onKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Tab") { @@ -110,11 +102,6 @@ export class EditableView extends React.Component { this._editing = true; this.props.isEditingCallback && this.props.isEditingCallback(true); } - if (e.ctrlKey) { - this._editing = false; - this.props.isEditingCallback && this.props.isEditingCallback(false); - this.collapseSection(); - } e.stopPropagation(); } diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx index ad84b7635..8ba33b38d 100644 --- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx +++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx @@ -40,6 +40,7 @@ interface CMVFieldRowProps { @observer export class CollectionMasonryViewFieldRow extends React.Component { @observable private _background = "inherit"; + @observable private _createAliasSelected: boolean = false; private _dropRef: HTMLDivElement | null = null; private dropDisposer?: DragManager.DragDropDisposer; @@ -186,6 +187,15 @@ export class CollectionMasonryViewFieldRow extends React.Component { + if (this.props.headingObject) { + this._headingsHack++; + this.props.headingObject.setCollapsed(!this.props.headingObject.collapsed); + this.toggleVisibility(); + } + } + startDrag = (e: PointerEvent) => { let [dx, dy] = this.props.screenToLocalTransform().transformDirection(e.clientX - this._startDragPosition.x, e.clientY - this._startDragPosition.y); if (Math.abs(dx) + Math.abs(dy) > this._sensitivity) { @@ -223,12 +233,13 @@ export class CollectionMasonryViewFieldRow extends React.Component { @@ -261,12 +272,17 @@ export class CollectionMasonryViewFieldRow extends React.Component { + this._createAliasSelected = true; + } + renderMenu = () => { let selected = this.props.headingObject ? this.props.headingObject.color : "#f1efeb"; return (
-
Create Alias
+
Create Alias
); @@ -320,6 +336,7 @@ export class CollectionMasonryViewFieldRow extends React.Component +
@@ -345,7 +362,7 @@ export class CollectionMasonryViewFieldRow extends React.Component} {evContents === `NO ${key.toUpperCase()} VALUE` ? (null) :
- + diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss index d3deff9f1..818db1669 100644 --- a/src/client/views/collections/CollectionStackingView.scss +++ b/src/client/views/collections/CollectionStackingView.scss @@ -102,12 +102,20 @@ margin: auto; } + .collectionStackingView-collapseBar { + margin-left: 2px; + margin-right: 2px; + margin-top: 2px; + background: $main-accent; + height: 5px; + } + .collectionStackingView-sectionHeader { text-align: center; margin-left: 2px; margin-right: 2px; margin-top: 10px; - background: gray; + background: $main-accent; // overflow: hidden; overflow is visible so the color menu isn't hidden -ftong .editableView-input { diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx index e94a7d7f6..a8015472a 100644 --- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx +++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx @@ -39,9 +39,7 @@ interface CSVFieldColumnProps { @observer export class CollectionStackingViewFieldColumn extends React.Component { @observable private _background = "inherit"; - @observable private _selected: boolean = false; - @observable private _mouseX: number = 0; - @observable private _mouseY: number = 0; + @observable private _createAliasSelected: boolean = false; private _dropRef: HTMLDivElement | null = null; private dropDisposer?: DragManager.DragDropDisposer; @@ -177,6 +175,15 @@ export class CollectionStackingViewFieldColumn extends React.Component { + if (this.props.headingObject) { + this._headingsHack++; + this.props.headingObject.setCollapsed(!this.props.headingObject.collapsed); + this.toggleVisibility(); + } + } + startDrag = (e: PointerEvent) => { let [dx, dy] = this.props.screenToLocalTransform().transformDirection(e.clientX - this._startDragPosition.x, e.clientY - this._startDragPosition.y); if (Math.abs(dx) + Math.abs(dy) > this._sensitivity) { @@ -214,12 +221,13 @@ export class CollectionStackingViewFieldColumn extends React.Component { @@ -252,14 +260,19 @@ export class CollectionStackingViewFieldColumn extends React.Component { + this._createAliasSelected = true; + } + renderMenu = () => { let selected = this.props.headingObject ? this.props.headingObject.color : "#f1efeb"; return (
-
Create Alias
+
Create Alias
-
+
); } @@ -307,6 +320,7 @@ export class CollectionStackingViewFieldColumn extends React.Component +
{/* the default bucket (no key value) has a tooltip that describes what it is. Further, it does not have a color and cannot be deleted. */}
} {evContents === `NO ${key.toUpperCase()} VALUE` ? (null) :
- + -- cgit v1.2.3-70-g09d2