From 6886bf8c0549f09e9d911ab105fcf4b2d2f051de Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Fri, 13 Mar 2020 09:47:36 -0400 Subject: added reification of view menu items. tweaked sizing of collection chrome display --- src/client/util/DragManager.ts | 2 +- src/client/views/collections/CollectionView.tsx | 2 +- .../views/collections/CollectionViewChromes.scss | 2 - .../views/collections/CollectionViewChromes.tsx | 68 +++++++++++++++------- src/client/views/nodes/DocumentView.tsx | 2 +- 5 files changed, 49 insertions(+), 27 deletions(-) (limited to 'src') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index a09d78a06..f4461d2f7 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -216,7 +216,7 @@ export namespace DragManager { // drag a button template and drop a new button export function StartButtonDrag(eles: HTMLElement[], script: string, title: string, vars: { [name: string]: Field }, params: string[], initialize: (button: Doc) => void, downX: number, downY: number, options?: DragOptions) { const finishDrag = (e: DragCompleteEvent) => { - const bd = Docs.Create.ButtonDocument({ _width: 150, _height: 50, title, dontSelect: true, onClick: ScriptField.MakeScript(script) }); + const bd = Docs.Create.ButtonDocument({ _width: 150, _height: 50, title, isButton: true, onClick: ScriptField.MakeScript(script) }); params.map(p => Object.keys(vars).indexOf(p) !== -1 && (Doc.GetProto(bd)[p] = new PrefetchProxy(vars[p] as Doc))); initialize?.(bd); bd.buttonParams = new List(params); diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 2d56f00d5..c74b9ad6d 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -9,7 +9,6 @@ import 'react-image-lightbox-with-rotate/style.css'; // This only needs to be im import { DateField } from '../../../new_fields/DateField'; import { Doc, DocListCast, DataSym } from '../../../new_fields/Doc'; import { Id } from '../../../new_fields/FieldSymbols'; -import { listSpec } from '../../../new_fields/Schema'; import { BoolCast, Cast, StrCast, NumCast } from '../../../new_fields/Types'; import { ImageField } from '../../../new_fields/URLField'; import { TraceMobx } from '../../../new_fields/util'; @@ -76,6 +75,7 @@ export namespace CollectionViewType { ]); export const valueOf = (value: string) => stringMapping.get(value.toLowerCase()); + export const stringFor = (value: number) => Array.from(stringMapping.entries()).find(entry => entry[1] === value)[0]; } export interface CollectionRenderProps { diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index 19a14976c..428897ac4 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -27,7 +27,6 @@ outline-color: black; border: none; padding: 12px 10px 11px 10px; - margin-left: 50px; } .collectionViewBaseChrome-viewPicker:active { @@ -62,7 +61,6 @@ // margin-top: 10px; } .collectionViewBaseChrome-template { - margin-left: 10px; display: grid; background: rgb(238, 238, 238); color:grey; diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 689d3674f..5ab61645f 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -8,7 +8,7 @@ import { List } from "../../../new_fields/List"; import { listSpec } from "../../../new_fields/Schema"; import { ScriptField } from "../../../new_fields/ScriptField"; import { BoolCast, Cast, NumCast, StrCast } from "../../../new_fields/Types"; -import { Utils, emptyFunction } from "../../../Utils"; +import { Utils, emptyFunction, setupMoveUpEvents } from "../../../Utils"; import { DragManager } from "../../util/DragManager"; import { undoBatch } from "../../util/UndoManager"; import { EditableView } from "../EditableView"; @@ -82,6 +82,7 @@ export class CollectionViewBaseChrome extends React.Component(); + private _viewRef = React.createRef(); private _autosuggestRef = React.createRef(); @observable private _currentKey: string = ""; @observable private _viewSpecsOpen: boolean = false; @@ -344,8 +345,21 @@ export class CollectionViewBaseChrome extends React.Component { + setupMoveUpEvents(this, e, (e, down, delta) => { + const vtype = NumCast(this.props.CollectionView.props.Document._viewType) as CollectionViewType; + const c = { + params: ["target"], title: CollectionViewType.stringFor(vtype), + script: `this.target._viewType = ${NumCast(this.props.CollectionView.props.Document._viewType)}`, + immediate: (source: Doc[]) => Doc.setChildLayout(this.target, source?.[0]), + initialize: emptyFunction, + }; + DragManager.StartButtonDrag([this._viewRef.current!], c.script, c.title, + { target: this.props.CollectionView.props.Document }, c.params, c.initialize, e.clientX, e.clientY); + return true; + }, emptyFunction, emptyFunction); + } dragCommandDown = (e: React.PointerEvent) => { - this._startDragPosition = { x: e.clientX, y: e.clientY }; document.addEventListener("pointermove", this.dragPointerMove); document.addEventListener("pointerup", this.dragPointerUp); @@ -368,13 +382,17 @@ export class CollectionViewBaseChrome extends React.Component { document.removeEventListener("pointermove", this.dragPointerMove); document.removeEventListener("pointerup", this.dragPointerUp); - } render() { const collapsed = this.props.CollectionView.props.Document._chromeStatus !== "enabled"; return ( -
+
- +
+
+
+ +
+ +
+
@@ -449,7 +473,7 @@ export class CollectionViewBaseChrome extends React.Component
- +