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 --- .../views/collections/CollectionSchemaCells.tsx | 4 - .../views/collections/CollectionSchemaView.scss | 38 ++++---- .../views/collections/CollectionSchemaView.tsx | 108 ++++----------------- 3 files changed, 40 insertions(+), 110 deletions(-) (limited to 'src') 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