From 83d282a6b5e607e3c7dae4b5e5d37a8b458f81cc Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Sun, 24 May 2020 10:36:31 +0530 Subject: Added chrome to grid view and modified grid mechanism --- .../views/collections/CollectionViewChromes.scss | 30 ++++++++++++++-------- 1 file changed, 20 insertions(+), 10 deletions(-) (limited to 'src/client/views/collections/CollectionViewChromes.scss') diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index e4581eb46..9795a3a22 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -3,7 +3,7 @@ .collectionViewChrome-cont { position: absolute; - width:100%; + width: 100%; opacity: 0.9; z-index: 9001; transition: top .5s; @@ -33,7 +33,7 @@ outline-color: black; } - .collectionViewBaseChrome-button{ + .collectionViewBaseChrome-button { font-size: 75%; text-transform: uppercase; letter-spacing: 2px; @@ -44,6 +44,7 @@ padding: 12px 10px 11px 10px; margin-left: 10px; } + .collectionViewBaseChrome-cmdPicker { margin-left: 3px; margin-right: 0px; @@ -51,14 +52,16 @@ border: none; color: grey; } + .commandEntry-outerDiv { pointer-events: all; background-color: gray; display: flex; flex-direction: row; + .commandEntry-drop { - color:white; - width:25px; + color: white; + width: 25px; margin-top: auto; margin-bottom: auto; } @@ -72,15 +75,17 @@ pointer-events: all; // margin-top: 10px; } + .collectionViewBaseChrome-template, .collectionViewBaseChrome-viewModes { display: grid; background: rgb(238, 238, 238); - color:grey; - margin-top:auto; - margin-bottom:auto; + color: grey; + margin-top: auto; + margin-bottom: auto; margin-left: 5px; } + .collectionViewBaseChrome-viewModes { margin-left: 25px; } @@ -88,7 +93,7 @@ .collectionViewBaseChrome-viewSpecs { margin-left: 5px; display: grid; - + .collectionViewBaseChrome-filterIcon { position: relative; display: flex; @@ -202,7 +207,7 @@ .collectionStackingViewChrome-pivotField, .collectionTreeViewChrome-pivotField { color: white; - width:100%; + width: 100%; min-width: 100px; text-align: center; background: rgb(238, 238, 238); @@ -232,6 +237,10 @@ .collectionTreeViewChrome-pivotField:hover { cursor: text; } + + .collectionGridViewChrome-entryBox { + width: 50%; + } } } @@ -292,8 +301,9 @@ flex-direction: column; height: 40px; } + .commandEntry-inputArea { - display:flex; + display: flex; flex-direction: row; width: 150px; margin: auto auto auto auto; -- cgit v1.2.3-70-g09d2 From 85553878a01877efb9e9d3b748064db66a6d8e30 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Mon, 1 Jun 2020 10:06:31 +0530 Subject: added grid ref and fixed css --- .../views/collections/CollectionViewChromes.scss | 23 ++++++++++-- .../views/collections/CollectionViewChromes.tsx | 41 +++++++++++---------- .../collectionGrid/CollectionGridView.scss | 43 +++++++++++++--------- .../collectionGrid/CollectionGridView.tsx | 37 ++++++++++++------- .../views/collections/collectionGrid/Grid.tsx | 9 +++-- 5 files changed, 95 insertions(+), 58 deletions(-) (limited to 'src/client/views/collections/CollectionViewChromes.scss') diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index 9795a3a22..910c14060 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -164,13 +164,31 @@ } } - .collectionStackingViewChrome-cont, .collectionTreeViewChrome-cont { display: flex; justify-content: space-between; } + .collectionGridViewChrome-cont { + display: flex; + margin-left: 10; + + .grid-control { + align-self: center; + width: 30%; + + .grid-icon { + margin-right: 5px; + } + } + + .collectionGridViewChrome-entryBox { + width: 50%; + } + } + + .collectionStackingViewChrome-sort, .collectionTreeViewChrome-sort { display: flex; @@ -238,9 +256,6 @@ cursor: text; } - .collectionGridViewChrome-entryBox { - width: 50%; - } } } diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 2bffbdf7d..9423e417d 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -15,8 +15,6 @@ import { COLLECTION_BORDER_WIDTH } from "../globalCssVariables.scss"; import { CollectionViewType } from "./CollectionView"; import { CollectionView } from "./CollectionView"; import "./CollectionViewChromes.scss"; -import { CollectionGridView } from "./collectionGrid/CollectionGridView"; -import HeightLabel from "./collectionMulticolumn/MultirowHeightLabel"; const datepicker = require('js-datepicker'); interface CollectionViewChromeProps { @@ -516,10 +514,10 @@ export class CollectionGridViewChrome extends React.Component) => { if (e.key === "Enter" || e.key === "Tab") { - if (this.props.CollectionView.props.Document.numCols as number !== e.currentTarget.valueAsNumber) { + if (e.currentTarget.valueAsNumber > 0 && this.props.CollectionView.props.Document.numCols as number !== e.currentTarget.valueAsNumber) { this.props.CollectionView.props.Document.numCols = e.currentTarget.valueAsNumber; //this.props.CollectionView.forceUpdate(); // to be used if CollectionGridView is not an observer } @@ -530,39 +528,44 @@ export class CollectionGridViewChrome extends React.Component) => { if (e.key === "Enter" || e.key === "Tab") { - if (this.props.CollectionView.props.Document.rowHeight as number !== e.currentTarget.valueAsNumber) { + if (e.currentTarget.valueAsNumber > 0 && this.props.CollectionView.props.Document.rowHeight as number !== e.currentTarget.valueAsNumber) { this.props.CollectionView.props.Document.rowHeight = e.currentTarget.valueAsNumber; - //this.props.CollectionView.forceUpdate(); } } } - onCheck = (event: React.ChangeEvent) => this.props.CollectionView.props.Document.flexGrid = event.target.checked; + /** + * Sets whether the grid is flexible or not on the grid's Document. + */ + @undoBatch + toggleFlex = () => { + this.props.CollectionView.props.Document.flexGrid = !this.props.CollectionView.props.Document.flexGrid; + } render() { return ( -
- - +
+ + - + ) => e.currentTarget.focus()} /> - - + + - + ) => e.currentTarget.focus()} /> - - + + + - - +
); diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss index b88721b4d..49d463441 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.scss +++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss @@ -1,14 +1,4 @@ -// .react-grid-layout.layout { -// // max-height: 100%;// min-height: 100%; -// overflow-y: auto; -// } - -// .collectionView {// background-color: white; -// overflow-y: scroll; -// } - - -.collectionGridView_contents { +.collectionGridView-contents { display: flex; overflow: hidden; width: 100%; @@ -16,13 +6,32 @@ flex-direction: column; } -.collectionGridView_contents .document-wrapper { - display: flex; - flex-direction: column; - width: 100%; +.collectionGridView-contents .collectionGridView-gridContainer { height: 100%; + overflow-y: auto; + background-color: white; +} + +.documentDecorations-container .documentDecorations-resizer { + pointer-events: none; + +} + +#documentDecorations-bottomRightResizer, +#documentDecorations-bottomLeftResizer, +#documentDecorations-topRightResizer, +#documentDecorations-topLeftResizer { + visibility: collapse; +} + +/* Chrome, Safari, Edge, Opera */ +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; } -.react-grid-layout.layout { - height: 100% +/* Firefox */ +input[type=number] { + -moz-appearance: textfield; } \ No newline at end of file diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index 111ce4beb..5eeaa9b0d 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -1,4 +1,4 @@ -import { computed, observable } from 'mobx'; +import { computed, observable, action } from 'mobx'; import * as React from "react"; import { Doc, DocListCast } from '../../../../fields/Doc'; import { documentSchema } from '../../../../fields/documentSchemas'; @@ -23,6 +23,8 @@ const GridSchema = makeInterface(documentSchema); @observer export class CollectionGridView extends CollectionSubView(GridSchema) { + private containerRef: React.RefObject; + @observable private _scroll: number = 0; constructor(props: Readonly) { super(props); @@ -33,6 +35,8 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { this.setLayout = this.setLayout.bind(this); this.deleteInContext = this.deleteInContext.bind(this); + + this.containerRef = React.createRef(); } componentDidMount() { @@ -66,7 +70,8 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { * documents before the target. */ private lookupIndividualTransform = (doc: Doc) => { - const yTranslation = this.rowHeightPlusGap * NumCast(doc.y) + 10; + const yTranslation = this.rowHeightPlusGap * NumCast(doc.y) + 10 - this._scroll; + console.log("CollectionGridView -> privatelookupIndividualTransform -> this.containerRef.current!.scrollTop", this.containerRef.current!.scrollTop) const xTranslation = this.colWidthPlusGap * NumCast(doc.x) + 10; return this.props.ScreenToLocalTransform().translate(-xTranslation, -yTranslation); } @@ -113,7 +118,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { onClick={this.onChildClickHandler} renderDepth={this.props.renderDepth + 1} parentActive={this.props.active} - display={"contents"} + display={"contents"} // this causes an issue- this is the reason the decorations box is weird with images and web boxes removeDocument={this.deleteInContext} />; } @@ -291,17 +296,21 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { ref={this.createDashEventsTarget} onPointerDown={e => { ((e.target as any)?.className.includes("react-resizable-handle")) && e.stopPropagation(); }} // the grid doesn't stopPropagation when its widgets are hit, so we need to otherwise the outer documents will respond > - DIV HERE with ref to access scroll of and adjust in getting position - +
) => this._scroll = e.currentTarget.scrollTop)} + > + +
); } diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index 673f670a6..be6c4343a 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -26,9 +26,11 @@ interface GridProps { */ @observer export default class Grid extends React.Component { + gridRef: React.RefObject; constructor(props: Readonly) { super(props); + this.gridRef = React.createRef(); this.onLayoutChange = this.onLayoutChange.bind(this); } @@ -50,13 +52,12 @@ export default class Grid extends React.Component { width={this.props.width} compactType={null} isDroppable={true} - useCSSTransforms={true} + // useCSSTransforms={true} margin={[10, 10]} onLayoutChange={this.onLayoutChange} preventCollision={false} // change this to true later - transformScale={0.8} // 1.2/scale - style={{ height: "100%", overflowY: "scroll" }} - // draggableHandle={".documentDecorations-resizer"} + // transformScale={2} // 1.2/scale + onDrop={({ x, y, e }) => { console.log("Grid -> render -> x, y, e", x, y, e) }} > {this.props.nodeList} -- cgit v1.2.3-70-g09d2 From 4cdd53c1208cd17593e0ecdb34e89265760a6512 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Thu, 4 Jun 2020 12:46:51 +0530 Subject: added numcols buttons to chrome + fixed some chrome css + added rowheight slider + rowheight slider css + fixed bug on document delete in freeform and reenter grid --- package-lock.json | 84 +++++++++++++--------- src/client/views/collections/CollectionView.tsx | 2 +- .../views/collections/CollectionViewChromes.scss | 7 ++ .../views/collections/CollectionViewChromes.tsx | 52 +++++++++++--- .../collectionGrid/CollectionGridView.scss | 47 ++++++++++-- .../collectionGrid/CollectionGridView.tsx | 72 +++++++++---------- .../views/collections/collectionGrid/Grid.tsx | 9 ++- 7 files changed, 180 insertions(+), 93 deletions(-) (limited to 'src/client/views/collections/CollectionViewChromes.scss') diff --git a/package-lock.json b/package-lock.json index adf71ee58..14b279ef6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2836,7 +2836,8 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true + "bundled": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -2854,11 +2855,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2871,15 +2874,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -2982,7 +2988,8 @@ }, "inherits": { "version": "2.0.4", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -2992,6 +2999,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3004,17 +3012,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "1.2.5", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.9.0", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3031,6 +3042,7 @@ "mkdirp": { "version": "0.5.3", "bundled": true, + "optional": true, "requires": { "minimist": "^1.2.5" } @@ -3086,7 +3098,8 @@ }, "npm-normalize-package-bin": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "npm-packlist": { "version": "1.4.8", @@ -3111,7 +3124,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -3121,6 +3135,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -3189,7 +3204,8 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true + "bundled": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -3219,6 +3235,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3236,6 +3253,7 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3274,11 +3292,13 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true + "bundled": true, + "optional": true }, "yallist": { "version": "3.1.1", - "bundled": true + "bundled": true, + "optional": true } } } @@ -9500,7 +9520,7 @@ }, "chownr": { "version": "1.1.4", - "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz", + "resolved": false, "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==" }, "ci-info": { @@ -9806,7 +9826,7 @@ }, "deep-extend": { "version": "0.6.0", - "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz", + "resolved": false, "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==" }, "defaults": { @@ -10305,7 +10325,7 @@ }, "glob": { "version": "7.1.6", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", + "resolved": false, "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==", "requires": { "fs.realpath": "^1.0.0", @@ -10393,7 +10413,7 @@ }, "hosted-git-info": { "version": "2.8.8", - "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz", + "resolved": false, "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==" }, "http-cache-semantics": { @@ -10529,7 +10549,7 @@ }, "is-ci": { "version": "1.2.1", - "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-1.2.1.tgz", + "resolved": false, "integrity": "sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==", "requires": { "ci-info": "^1.5.0" @@ -10605,7 +10625,7 @@ }, "is-retry-allowed": { "version": "1.2.0", - "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz", + "resolved": false, "integrity": "sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg==" }, "is-stream": { @@ -11114,7 +11134,7 @@ }, "mkdirp": { "version": "0.5.4", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.4.tgz", + "resolved": false, "integrity": "sha512-iG9AK/dJLtJ0XNgTuDbSyNS3zECqDlAhnQW4CsNxBG3LQJBbHmRX1egw39DmtOdCAqY+dKXV+sgPgilNWUKMVw==", "requires": { "minimist": "^1.2.5" @@ -11122,7 +11142,7 @@ "dependencies": { "minimist": { "version": "1.2.5", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", + "resolved": false, "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==" } } @@ -11174,7 +11194,7 @@ }, "node-gyp": { "version": "5.1.0", - "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-5.1.0.tgz", + "resolved": false, "integrity": "sha512-OUTryc5bt/P8zVgNUmC6xdXiDJxLMAW8cF5tLQOT9E5sOQj+UeQxnnPy74K3CLCa/SOjjBlbuzDLR8ANwA+wmw==", "requires": { "env-paths": "^2.2.0", @@ -11288,7 +11308,7 @@ }, "npm-packlist": { "version": "1.4.8", - "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.8.tgz", + "resolved": false, "integrity": "sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==", "requires": { "ignore-walk": "^3.0.1", @@ -11308,7 +11328,7 @@ }, "npm-profile": { "version": "4.0.4", - "resolved": "https://registry.npmjs.org/npm-profile/-/npm-profile-4.0.4.tgz", + "resolved": false, "integrity": "sha512-Ta8xq8TLMpqssF0H60BXS1A90iMoM6GeKwsmravJ6wYjWwSzcYBTdyWa3DZCYqPutacBMEm7cxiOkiIeCUAHDQ==", "requires": { "aproba": "^1.1.2 || 2", @@ -11318,7 +11338,7 @@ }, "npm-registry-fetch": { "version": "4.0.3", - "resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-4.0.3.tgz", + "resolved": false, "integrity": "sha512-WGvUx0lkKFhu9MbiGFuT9nG2NpfQ+4dCJwRwwtK2HK5izJEvwDxMeUyqbuMS7N/OkpVCqDorV6rO5E4V9F8lJw==", "requires": { "JSONStream": "^1.3.4", @@ -11753,7 +11773,7 @@ }, "rc": { "version": "1.2.8", - "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz", + "resolved": false, "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==", "requires": { "deep-extend": "^0.6.0", @@ -11764,7 +11784,7 @@ "dependencies": { "minimist": { "version": "1.2.5", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", + "resolved": false, "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==" } } @@ -11823,7 +11843,7 @@ }, "readable-stream": { "version": "3.6.0", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", + "resolved": false, "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==", "requires": { "inherits": "^2.0.3", @@ -11844,7 +11864,7 @@ }, "registry-auth-token": { "version": "3.4.0", - "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-3.4.0.tgz", + "resolved": false, "integrity": "sha512-4LM6Fw8eBQdwMYcES4yTnn2TqIasbXuwDx3um+QRs7S55aMKCBKBxvPXl2RiUjHwuJLTyYfxSpmfSAjQpcuP+A==", "requires": { "rc": "^1.1.6", @@ -11908,7 +11928,7 @@ }, "rimraf": { "version": "2.7.1", - "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz", + "resolved": false, "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", "requires": { "glob": "^7.1.3" @@ -12207,7 +12227,7 @@ }, "string_decoder": { "version": "1.3.0", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz", + "resolved": false, "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==", "requires": { "safe-buffer": "~5.2.0" @@ -12215,7 +12235,7 @@ "dependencies": { "safe-buffer": { "version": "5.2.0", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.0.tgz", + "resolved": false, "integrity": "sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==" } } @@ -12527,7 +12547,7 @@ }, "widest-line": { "version": "2.0.1", - "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-2.0.1.tgz", + "resolved": false, "integrity": "sha512-Ba5m9/Fa4Xt9eb2ELXt77JxVDV8w7qQrH0zS/TWSJdLyAwQjWoOzpzj5lwVftDz6n/EOu3tNACS84v509qwnJA==", "requires": { "string-width": "^2.1.1" diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index bcb190de4..df84cab56 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -232,7 +232,7 @@ export class CollectionView extends Touchable func(CollectionViewType.Carousel), icon: "columns" }); subItems.push({ description: "Pivot/Time", event: () => func(CollectionViewType.Time), icon: "columns" }); subItems.push({ description: "Map", event: () => func(CollectionViewType.Map), icon: "globe-americas" }); - subItems.push({ description: "Grid", event: () => func(CollectionViewType.Grid), icon: "border-all" }); + subItems.push({ description: "Grid", event: () => func(CollectionViewType.Grid), icon: "th-list" }); if (addExtras && this.props.Document._viewType === CollectionViewType.Freeform) { subItems.push({ description: "Custom", icon: "fingerprint", event: AddCustomFreeFormLayout(this.props.Document, this.props.fieldKey) }); } diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index 42ec35853..f6027471b 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -181,9 +181,16 @@ .grid-control { align-self: center; width: 30%; + display: flex; + flex-direction: row; .grid-icon { margin-right: 5px; + align-self: center; + } + + .flexLabel { + margin-bottom: 0; } } diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 3d712e4f5..5a76a4605 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -93,7 +93,7 @@ export class CollectionViewBaseChrome extends React.Component { @@ -569,6 +569,9 @@ export class CollectionTreeViewChrome extends React.Component { + private clicked: boolean = false; + private entered: boolean = false; + /** * Sets the value of `numCols` on the grid's Document to the value entered. */ @@ -577,7 +580,6 @@ export class CollectionGridViewChrome extends React.Component 0 && this.props.CollectionView.props.Document.numCols as number !== e.currentTarget.valueAsNumber) { this.props.CollectionView.props.Document.numCols = e.currentTarget.valueAsNumber; - //this.props.CollectionView.forceUpdate(); // to be used if CollectionGridView is not an observer } } @@ -602,27 +604,59 @@ export class CollectionGridViewChrome extends React.Component { + this.clicked = true; + this.entered && (this.props.CollectionView.props.Document.numCols as number)--; + undoBatch(() => (this.props.CollectionView.props.Document.numCols as number)++)(); + this.entered = false; + } + + onDecrementButtonClick = () => { + this.clicked = true; + this.entered && (this.props.CollectionView.props.Document.numCols as number)++; + undoBatch(() => (this.props.CollectionView.props.Document.numCols as number)--)(); + this.entered = false; + } + + incrementValue = () => { + this.entered = true; + if (!this.clicked) { + (this.props.CollectionView.props.Document.numCols as number)++; + } + this.clicked = false; + } + + decrementValue = () => { + this.entered = true; + if (!this.clicked) { + (this.props.CollectionView.props.Document.numCols as number)--; + } + this.clicked = false; + } + render() { return ( -
- +
+ - ) => e.currentTarget.focus()} /> + ) => { e.stopPropagation(); e.preventDefault(); e.currentTarget.focus(); }} /> + + - + - ) => e.currentTarget.focus()} /> + ) => { e.stopPropagation(); e.preventDefault(); e.currentTarget.focus(); }} /> - + - +
); diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss index 94b0d958c..e06e8dc90 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.scss +++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss @@ -9,6 +9,43 @@ height: 100%; overflow-y: auto; background-color: white; + overflow-x: hidden; + + display: flex; + flex-direction: row; + + .rowHeightSlider { + + -webkit-appearance: none; + appearance: none; + width: 100%; + height: 15px; + background: #d3d3d3; + // border-radius: 5px; + + position: absolute; + height: 3; + left: 5; + top: 40; + transform-origin: left; + transform: rotate(90deg); + outline: none; + opacity: 0.7; + } + + .rowHeightSlider:hover { + opacity: 1; + } + + .rowHeightSlider::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 10px; + height: 10px; + border-radius: 50%; + background: darkgrey; + opacity: 1; + } } .collectionGridView-addDocumentButton { @@ -17,7 +54,8 @@ margin: auto; width: 90%; cursor: text; - + min-height: 30px; + max-height: 30px; font-size: 75%; letter-spacing: 2px; @@ -31,15 +69,14 @@ .editableView-container-editing, .editableView-container-editing-oneLine { - min-height: 20px; display: flex; align-items: center; flex-direction: row; - height: auto; + height: 20px; + width: 100%; color: grey; padding: 10px; - width: 100%; span::before, span::after { @@ -67,8 +104,6 @@ align-items: center; } } - - } } diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index c56d6ee53..68612c9dc 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -3,7 +3,7 @@ import * as React from "react"; import { Doc, Opt } from '../../../../fields/Doc'; import { documentSchema } from '../../../../fields/documentSchemas'; import { makeInterface } from '../../../../fields/Schema'; -import { BoolCast, NumCast, ScriptCast } from '../../../../fields/Types'; +import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types'; import { Transform } from '../../../util/Transform'; import { undoBatch } from '../../../util/UndoManager'; import { ContentFittingDocumentView } from '../../nodes/ContentFittingDocumentView'; @@ -15,9 +15,9 @@ import Grid, { Layout } from "./Grid"; import { Id } from '../../../../fields/FieldSymbols'; import { observer } from 'mobx-react'; import { SnappingManager } from '../../../util/SnappingManager'; -import "./CollectionGridView.scss"; import { Docs } from '../../../documents/Documents'; import { EditableView, EditableProps } from '../../EditableView'; +import "./CollectionGridView.scss"; type GridSchema = makeInterface<[typeof documentSchema]>; @@ -37,28 +37,38 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { this.props.Document.flexGrid = BoolCast(this.props.Document.flexGrid, true); this.setLayout = this.setLayout.bind(this); - // this.addTextDoc = this.addTextDoc.bind(this); + this.onSliderChange = this.onSliderChange.bind(this); this.containerRef = React.createRef(); } componentDidMount() { - this.changeListenerDisposer = computed(() => this.childLayoutPairs).observe(({ oldValue, newValue }) => { const layouts: Layout[] = this.parsedLayoutList; + + // if grid view has been opened and then exited and a document has been deleted + // this deletes the layout of that document from the layouts list + if (!oldValue) { + layouts.forEach(({ i }, index) => { + const targetId = i; + if (!newValue.find(({ layout: preserved }) => preserved[Id] === targetId)) { + layouts.splice(index, 1); + } + }); + } + if (!oldValue || newValue.length > oldValue.length) { // for each document that was added, add a corresponding grid layout document newValue.forEach(({ layout }, i) => { const targetId = layout[Id]; if (!layouts.find((gridLayout: Layout) => gridLayout.i === targetId)) { - console.log("pushing") layouts.push({ i: targetId, w: 2, h: 2, - x: 2 * (i % Math.floor(this.props.Document.numCols as number / 2)), - y: 2 * Math.floor(i / Math.floor(this.props.Document.numCols as number / 2)) + x: 2 * (i % Math.floor(NumCast(this.props.Document.numCols) / 2)), + y: 2 * Math.floor(i / Math.floor(NumCast(this.props.Document.numCols) / 2)) }); } }); @@ -72,9 +82,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { } }); } - this.unStringifiedLayoutList = layouts; - // this.props.Document.gridLayoutString = JSON.stringify(layouts); }, true); } @@ -82,23 +90,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { this.changeListenerDisposer && this.changeListenerDisposer(); } - /** - * Establishes the x and y properties of the @param layoutDoc, currently - * using the @param previousLength for the computations. - * - * However, this could also be more of a first fit algorithm, iterating through - * this.toLayoutList(DocListCast(this.props.Document.gridLayouts)) and finding the - * first gap in the layout structure that suits the width and height. It would be - * easiest to see that a column is free (for a given row, if two documents' x are separated - * by a value greater than the ratio width of the document you're trying to insert), - * but you would then have to ensure that the next row at that column has a y at least - * as big as the ratio height of the document you're trying to insert. - */ - private findNextLayout(layoutDoc: Doc, previousLength: number) { - layoutDoc.x = 2 * (previousLength % Math.floor(this.props.Document.numCols as number / 2)); - layoutDoc.y = 2 * Math.floor(previousLength / Math.floor(this.props.Document.numCols as number / 2)); - } - /** * @returns the transform that will correctly place * the document decorations box, shifted to the right by @@ -108,8 +99,8 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { private lookupIndividualTransform = (layout: Layout) => { const index = this.childLayoutPairs.findIndex(({ layout: layoutDoc }) => layoutDoc[Id] === layout.i); - const yTranslation = (this.props.Document.flexGrid ? NumCast(layout.y) : 2 * Math.floor(index / Math.floor(this.props.Document.numCols as number / 2))) * this.rowHeightPlusGap + 10 - this._scroll; - const xTranslation = (this.props.Document.flexGrid ? NumCast(layout.x) : 2 * (index % Math.floor(this.props.Document.numCols as number / 2))) * this.colWidthPlusGap + 10; + const yTranslation = (this.props.Document.flexGrid ? NumCast(layout.y) : 2 * Math.floor(index / Math.floor(NumCast(this.props.Document.numCols) / 2))) * this.rowHeightPlusGap + 10 - this._scroll + 30; // 30 is the height of the add text doc bar + const xTranslation = (this.props.Document.flexGrid ? NumCast(layout.x) : 2 * (index % Math.floor(NumCast(this.props.Document.numCols) / 2))) * this.colWidthPlusGap + 10; return this.props.ScreenToLocalTransform().translate(-xTranslation, -yTranslation); } @@ -119,7 +110,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { @computed get onChildClickHandler() { return ScriptCast(this.Document.onChildClick); } - get parsedLayoutList() { return this.props.Document.gridLayoutString ? JSON.parse(this.props.Document.gridLayoutString as string) : []; } + get parsedLayoutList() { return this.props.Document.gridLayoutString ? JSON.parse(StrCast(this.props.Document.gridLayoutString)) : []; } set unStringifiedLayoutList(layouts: Layout[]) { this.props.Document.gridLayoutString = JSON.stringify(layouts); } @@ -177,7 +168,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { let update: Opt; const targetId = doc[Id]; const gridLayout = layouts.find(gridLayout => gridLayout.i === targetId); - // const gridLayout = DocListCast(this.props.Document.gridLayouts).find(gridLayout => StrCast(gridLayout.i) === targetId); if (this.props.Document.flexGrid && gridLayout && (update = layoutArray.find(layout => layout.i === targetId))) { gridLayout.x = update.x; gridLayout.y = update.y; @@ -186,7 +176,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { } }); - // this.props.Document.gridLayoutString = JSON.stringify(layouts); this.unStringifiedLayoutList = layouts; } @@ -210,7 +199,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { const width = () => this.width(gridLayout); const height = () => this.height(gridLayout); collector.push( -
{this.getDisplayDoc(layout, dxf, width, height)} @@ -231,14 +220,18 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { return this.props.Document.flexGrid ? layouts : layouts.map(({ i }, index) => ({ i: i, - x: 2 * (index % Math.floor(this.props.Document.numCols as number / 2)), - y: 2 * Math.floor(index / Math.floor(this.props.Document.numCols as number / 2)), + x: 2 * (index % Math.floor(NumCast(this.props.Document.numCols) / 2)), + y: 2 * Math.floor(index / Math.floor(NumCast(this.props.Document.numCols) / 2)), w: 2, h: 2, static: true })); } + onSliderChange = (event: React.ChangeEvent) => { + this.props.Document.rowHeight = event.currentTarget.valueAsNumber; + } + @undoBatch @action addTextDocument = (value: string) => this.props.addDocument(Docs.Create.TextDocument(value, { title: value })); /** @@ -254,14 +247,13 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { const newEditableViewProps: EditableProps = { GetValue: () => "", SetValue: this.addTextDocument, - contents: "+ NEW", + contents: "+ ADD TEXT DOCUMENT AT END", }; const childDocumentViews: JSX.Element[] = this.contents; const chromeStatus = this.props.Document._chromeStatus; const showChrome = (chromeStatus !== 'view-mode' && chromeStatus !== 'disabled'); - return (
) => this._scroll = e.currentTarget.scrollTop)} > + e.currentTarget.focus()} /> this.setLayout(layout)} transformScale={this.props.ScreenToLocalTransform().Scale} - // flex={this.props.Document.flexGrid as boolean} /> +
); diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index cae06c4e7..29bafda9b 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -36,7 +36,6 @@ export default class Grid extends React.Component { * @param layout `Layout[]` */ onLayoutChange(layout: Layout[]) { - console.log("layout changed"); this.props.setLayout(layout); } @@ -50,12 +49,12 @@ export default class Grid extends React.Component { width={this.props.width} compactType={null} isDroppable={true} - // isDraggable={this.props.childrenDraggable} + isDraggable={this.props.childrenDraggable} + isResizable={this.props.childrenDraggable} useCSSTransforms={true} - margin={[10, 10]} onLayoutChange={this.onLayoutChange} - preventCollision={false} // change this to true later - // transformScale={2} // 1.2/scale + preventCollision={true} + transformScale={this.props.transformScale} style={{ zIndex: 5 }} > {this.props.nodeList} -- cgit v1.2.3-70-g09d2 From e30e5e4139be5312c46868f17de4dee5d516fd23 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Sat, 6 Jun 2020 14:30:48 +0530 Subject: added choice to compact, prevent collisions + fixed document repositioning on reducing columns + removed row height input --- package-lock.json | 101 +++++++++++++++++++++ package.json | 3 +- .../views/collections/CollectionViewChromes.scss | 1 + .../views/collections/CollectionViewChromes.tsx | 56 ++++++++---- .../collectionGrid/CollectionGridView.scss | 8 ++ .../collectionGrid/CollectionGridView.tsx | 35 +++++-- .../views/collections/collectionGrid/Grid.tsx | 8 +- 7 files changed, 185 insertions(+), 27 deletions(-) (limited to 'src/client/views/collections/CollectionViewChromes.scss') diff --git a/package-lock.json b/package-lock.json index 14b279ef6..d1db185a3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3532,6 +3532,11 @@ "delayed-stream": "~1.0.0" } }, + "command-exists": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/command-exists/-/command-exists-1.2.6.tgz", + "integrity": "sha512-Qst/zUUNmS/z3WziPxyqjrcz09pm+2Knbs5mAZL4VAE0sSrNY1/w8+/YxeHcoBTsO6iojA6BW7eFf27Eg2MRuw==" + }, "command-line-usage": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/command-line-usage/-/command-line-usage-4.1.0.tgz", @@ -12948,6 +12953,11 @@ "os-tmpdir": "^1.0.0" } }, + "p-debounce": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/p-debounce/-/p-debounce-1.0.0.tgz", + "integrity": "sha1-y38svu/YegnrqGHhErZ1J+Yh4v0=" + }, "p-defer": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz", @@ -15983,6 +15993,20 @@ "readable-stream": "^3.1.1" } }, + "temp-dir": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-1.0.0.tgz", + "integrity": "sha1-CnwOom06Oa+n4OvqnB/AvE2qAR0=" + }, + "tempy": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/tempy/-/tempy-0.2.1.tgz", + "integrity": "sha512-LB83o9bfZGrntdqPuRdanIVCPReam9SOZKW0fOy5I9X3A854GGWi0tjCqoXEk84XIEYBc/x9Hq3EFop/H5wJaw==", + "requires": { + "temp-dir": "^1.0.0", + "unique-string": "^1.0.0" + } + }, "term-size": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/term-size/-/term-size-1.2.0.tgz", @@ -16558,6 +16582,40 @@ "resolved": "https://registry.npmjs.org/typescript-collections/-/typescript-collections-1.3.3.tgz", "integrity": "sha512-7sI4e/bZijOzyURng88oOFZCISQPTHozfE2sUu5AviFYk5QV7fYGb6YiDl+vKjF/pICA354JImBImL9XJWUvdQ==" }, + "typescript-language-server": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/typescript-language-server/-/typescript-language-server-0.4.0.tgz", + "integrity": "sha512-K8jNOmDFn+QfrCh8ujby2pGDs5rpjYZQn+zvQnf42rxG4IHbfw5CHoMvbGkWPK/J5Gw8/l5K3i03kVZC2IBElg==", + "requires": { + "command-exists": "1.2.6", + "commander": "^2.11.0", + "fs-extra": "^7.0.0", + "p-debounce": "^1.0.0", + "tempy": "^0.2.1", + "vscode-languageserver": "^5.3.0-next", + "vscode-uri": "^1.0.5" + }, + "dependencies": { + "fs-extra": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz", + "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==", + "requires": { + "graceful-fs": "^4.1.2", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + } + }, + "jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=", + "requires": { + "graceful-fs": "^4.1.6" + } + } + } + }, "typical": { "version": "2.6.1", "resolved": "https://registry.npmjs.org/typical/-/typical-2.6.1.tgz", @@ -16712,6 +16770,11 @@ "crypto-random-string": "^1.0.0" } }, + "universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==" + }, "unpack-string": { "version": "0.0.2", "resolved": "https://registry.npmjs.org/unpack-string/-/unpack-string-0.0.2.tgz", @@ -16954,6 +17017,44 @@ "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz", "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=" }, + "vscode-jsonrpc": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-5.0.1.tgz", + "integrity": "sha512-JvONPptw3GAQGXlVV2utDcHx0BiY34FupW/kI6mZ5x06ER5DdPG/tXWMVHjTNULF5uKPOUUD0SaXg5QaubJL0A==" + }, + "vscode-languageserver": { + "version": "5.3.0-next.10", + "resolved": "https://registry.npmjs.org/vscode-languageserver/-/vscode-languageserver-5.3.0-next.10.tgz", + "integrity": "sha512-QL7Fe1FT6PdLtVzwJeZ78pTic4eZbzLRy7yAQgPb9xalqqgZESR0+yDZPwJrM3E7PzOmwHBceYcJR54eQZ7Kng==", + "requires": { + "vscode-languageserver-protocol": "^3.15.0-next.8", + "vscode-textbuffer": "^1.0.0" + } + }, + "vscode-languageserver-protocol": { + "version": "3.15.3", + "resolved": "https://registry.npmjs.org/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.15.3.tgz", + "integrity": "sha512-zrMuwHOAQRhjDSnflWdJG+O2ztMWss8GqUUB8dXLR/FPenwkiBNkMIJJYfSN6sgskvsF0rHAoBowNQfbyZnnvw==", + "requires": { + "vscode-jsonrpc": "^5.0.1", + "vscode-languageserver-types": "3.15.1" + } + }, + "vscode-languageserver-types": { + "version": "3.15.1", + "resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.15.1.tgz", + "integrity": "sha512-+a9MPUQrNGRrGU630OGbYVQ+11iOIovjCkqxajPa9w57Sd5ruK8WQNsslzpa0x/QJqC8kRc2DUxWjIFwoNm4ZQ==" + }, + "vscode-textbuffer": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/vscode-textbuffer/-/vscode-textbuffer-1.0.0.tgz", + "integrity": "sha512-zPaHo4urgpwsm+PrJWfNakolRpryNja18SUip/qIIsfhuEqEIPEXMxHOlFPjvDC4JgTaimkncNW7UMXRJTY6ow==" + }, + "vscode-uri": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-1.0.8.tgz", + "integrity": "sha512-obtSWTlbJ+a+TFRYGaUumtVwb+InIUVI0Lu0VBUAPmj2cU5JutEXg3xUE0c2J5Tcy7h2DEKVJBFi+Y9ZSFzzPQ==" + }, "vue-template-compiler": { "version": "2.6.11", "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz", diff --git a/package.json b/package.json index 74b7bf9d1..a8ff42c91 100644 --- a/package.json +++ b/package.json @@ -206,10 +206,10 @@ "react-compound-slider": "^2.5.0", "react-dom": "^16.12.0", "react-grid-layout": "^0.18.3", - "react-resizable": "^1.10.1", "react-image-lightbox-with-rotate": "^5.1.1", "react-jsx-parser": "^1.21.0", "react-measure": "^2.2.4", + "react-resizable": "^1.10.1", "react-table": "^6.11.5", "readline": "^1.3.0", "request": "^2.88.0", @@ -223,6 +223,7 @@ "solr-node": "^1.2.1", "standard-http-error": "^2.0.1", "typescript-collections": "^1.3.3", + "typescript-language-server": "^0.4.0", "url-loader": "^1.1.2", "uuid": "^3.4.0", "valid-url": "^1.0.9", diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index f6027471b..398b02d3f 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -183,6 +183,7 @@ width: 30%; display: flex; flex-direction: row; + margin-right: 5px; .grid-icon { margin-right: 5px; diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 5a76a4605..95774adca 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -571,6 +571,7 @@ export class CollectionGridViewChrome extends React.Component) => { - if (e.key === "Enter" || e.key === "Tab") { - if (e.currentTarget.valueAsNumber > 0 && this.props.CollectionView.props.Document.rowHeight as number !== e.currentTarget.valueAsNumber) { - this.props.CollectionView.props.Document.rowHeight = e.currentTarget.valueAsNumber; - } - } - } + // @undoBatch + // onRowHeightEnter = (e: React.KeyboardEvent) => { + // if (e.key === "Enter" || e.key === "Tab") { + // if (e.currentTarget.valueAsNumber > 0 && this.props.CollectionView.props.Document.rowHeight as number !== e.currentTarget.valueAsNumber) { + // this.props.CollectionView.props.Document.rowHeight = e.currentTarget.valueAsNumber; + // } + // } + // } /** * Sets whether the grid is flexible or not on the grid's Document. @@ -613,27 +614,44 @@ export class CollectionGridViewChrome extends React.Component { this.clicked = true; - this.entered && (this.props.CollectionView.props.Document.numCols as number)++; - undoBatch(() => (this.props.CollectionView.props.Document.numCols as number)--)(); + if (!this.decrementLimitReached) { + this.entered && (this.props.CollectionView.props.Document.numCols as number)++; + undoBatch(() => (this.props.CollectionView.props.Document.numCols as number)--)(); + } this.entered = false; } incrementValue = () => { this.entered = true; - if (!this.clicked) { + if (!this.clicked && !this.decrementLimitReached) { (this.props.CollectionView.props.Document.numCols as number)++; } + this.decrementLimitReached = false; this.clicked = false; } decrementValue = () => { this.entered = true; if (!this.clicked) { - (this.props.CollectionView.props.Document.numCols as number)--; + if (this.props.CollectionView.props.Document.numCols as number !== 1) { + (this.props.CollectionView.props.Document.numCols as number)--; + } + else { + this.decrementLimitReached = true; + } } + this.clicked = false; } + toggleCollisions = () => { + this.props.CollectionView.props.Document.preventCollision = !this.props.CollectionView.props.Document.preventCollision; + } + + changeCompactType = () => { + this.props.CollectionView.props.Document.compactType = this.props.CollectionView.props.Document.compactType === "vertical" ? "horizontal" : this.props.CollectionView.props.Document.compactType === "horizontal" ? "null" : "vertical"; + } + render() { return (
@@ -645,17 +663,23 @@ export class CollectionGridViewChrome extends React.Component - + {/* ) => { e.stopPropagation(); e.preventDefault(); e.currentTarget.focus(); }} /> + */} + + + + + + + + - - -
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.scss b/src/client/views/collections/collectionGrid/CollectionGridView.scss index e06e8dc90..578dae966 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.scss +++ b/src/client/views/collections/collectionGrid/CollectionGridView.scss @@ -46,6 +46,14 @@ background: darkgrey; opacity: 1; } + + .rowHeightSlider::-moz-range-thumb { + width: 10px; + height: 10px; + border-radius: 50%; + background: darkgrey; + opacity: 1; + } } .collectionGridView-addDocumentButton { diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx index dd4e28e33..e97cb9f0e 100644 --- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx +++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx @@ -18,6 +18,7 @@ import { SnappingManager } from '../../../util/SnappingManager'; import { Docs } from '../../../documents/Documents'; import { EditableView, EditableProps } from '../../EditableView'; import "./CollectionGridView.scss"; +import { ContextMenu } from '../../ContextMenu'; type GridSchema = makeInterface<[typeof documentSchema]>; @@ -29,6 +30,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { @observable private _scroll: number = 0; private changeListenerDisposer: Opt; private rowHeight: number = 0; + private sliderDragged: boolean = false; constructor(props: Readonly) { super(props); @@ -37,6 +39,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { this.props.Document.rowHeight = NumCast(this.props.Document.rowHeight, 100); this.props.Document.flexGrid = BoolCast(this.props.Document.flexGrid, true); + this.props.Document.compactType = StrCast(this.props.Document.compactType, "vertical"); + this.props.Document.preventCollision = BoolCast(this.props.Document.preventCollision, false); + this.setLayout = this.setLayout.bind(this); this.onSliderChange = this.onSliderChange.bind(this); // this.deletePlaceholder = this.deletePlaceholder.bind(this); @@ -44,6 +49,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { } componentDidMount() { + this.changeListenerDisposer = computed(() => this.childLayoutPairs).observe(({ oldValue, newValue }) => { const layouts: Layout[] = this.parsedLayoutList; @@ -61,6 +67,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { if (!oldValue || newValue.length > oldValue.length) { // for each document that was added, add a corresponding grid layout document + newValue.forEach(({ layout }, i) => { const targetId = layout[Id]; if (!layouts.find((gridLayout: Layout) => gridLayout.i === targetId)) { @@ -89,7 +96,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { componentWillUnmount() { this.changeListenerDisposer && this.changeListenerDisposer(); - console.log("unmounted") } // deletePlaceholder(placeholder: Layout, e: MouseEvent) { @@ -222,9 +228,10 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { collector.push(
ContextMenu.Instance.addItem({ description: "test", event: () => console.log("test"), icon: "rainbow" })} > {this.getDisplayDoc(layout, dxf, width, height)} -
+
); } @@ -237,9 +244,17 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { */ get layoutList(): Layout[] { const layouts: Layout[] = this.parsedLayoutList; + this.unStringifiedLayoutList = layouts; return this.props.Document.flexGrid ? - layouts : layouts.map(({ i }, index) => ({ + layouts.map(({ i, x, y, w, h }) => ({ + i: i, + x: x + w > NumCast(this.props.Document.numCols) ? 0 : x, + y: y, + w: w, + h: h + })) + : layouts.map(({ i }, index) => ({ i: i, x: 2 * (index % Math.floor(NumCast(this.props.Document.numCols) / 2)), y: 2 * Math.floor(index / Math.floor(NumCast(this.props.Document.numCols) / 2)), @@ -250,7 +265,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { } onSliderChange = (event: React.ChangeEvent) => { + NumCast(this.props.Document.rowHeight) !== event.currentTarget.valueAsNumber && (this.sliderDragged = true); this.props.Document.rowHeight = event.currentTarget.valueAsNumber; + } onSliderDown = () => { @@ -277,7 +294,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { const newEditableViewProps: EditableProps = { GetValue: () => "", SetValue: this.addTextDocument, - contents: "+ ADD TEXT DOCUMENT AT END", + contents: "+ ADD TEXT DOCUMENT", }; const childDocumentViews: JSX.Element[] = this.contents; @@ -287,10 +304,9 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { return (
ContextMenu.Instance.addItem({ description: "test", event: () => console.log("test"), icon: "rainbow" })} ref={this.createDashEventsTarget} onPointerDown={e => { if (this.props.active(true)) { @@ -301,7 +317,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { // is the following section needed? it prevents the slider from being easily used and I'm not sure what it's preventing // if (this.props.isSelected(true)) { - // !((e.target as any)?.className.includes("react-resizable-handle")) && e.preventDefault(); + // !((e.target as any)?.className.includes("react-resizable-handle")) && e.preventDefault(); // } }} // the grid doesn't stopPropagation when its widgets are hit, so we need to otherwise the outer documents will respond @@ -316,7 +332,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) { onScroll={action(e => this._scroll = e.currentTarget.scrollTop)} onWheel={e => e.stopPropagation()} > - e.currentTarget.focus()} /> + !this.sliderDragged && console.log("clicking") && (this.sliderDragged = false)} /> diff --git a/src/client/views/collections/collectionGrid/Grid.tsx b/src/client/views/collections/collectionGrid/Grid.tsx index df550e3c2..5779bf463 100644 --- a/src/client/views/collections/collectionGrid/Grid.tsx +++ b/src/client/views/collections/collectionGrid/Grid.tsx @@ -20,6 +20,8 @@ interface GridProps { transformScale: number; childrenDraggable: boolean; // deletePlaceholder: Function; + preventCollision: boolean; + compactType: string; } /** @@ -57,19 +59,21 @@ export default class Grid extends React.Component { render() { console.log(this.props.transformScale); + const compactType = this.props.compactType === "vertical" || this.props.compactType === "horizontal" ? this.props.compactType : null; + return ( -- cgit v1.2.3-70-g09d2 From bb283aa88662b98078ccaabe9369ce56129883c1 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Mon, 8 Jun 2020 19:23:51 +0530 Subject: changed compact type to dropdown menu --- .../views/collections/CollectionViewChromes.scss | 15 +++++++++++++++ .../views/collections/CollectionViewChromes.tsx | 22 ++++++++++++++++------ 2 files changed, 31 insertions(+), 6 deletions(-) (limited to 'src/client/views/collections/CollectionViewChromes.scss') diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index 398b02d3f..bfa20f42a 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -178,6 +178,21 @@ display: flex; margin-left: 10; + .collectionGridViewChrome-viewPicker { + font-size: 75%; + //text-transform: uppercase; + //letter-spacing: 2px; + background: rgb(238, 238, 238); + color: grey; + outline-color: black; + border: none; + //padding: 12px 10px 11px 10px; + } + + .collectionGridViewChrome-viewPicker:active { + outline-color: black; + } + .grid-control { align-self: center; width: 30%; diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 95774adca..6fb517940 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -648,8 +648,8 @@ export class CollectionGridViewChrome extends React.Component { - this.props.CollectionView.props.Document.compactType = this.props.CollectionView.props.Document.compactType === "vertical" ? "horizontal" : this.props.CollectionView.props.Document.compactType === "horizontal" ? "null" : "vertical"; + changeCompactType = (e: React.ChangeEvent) => { + this.props.CollectionView.props.Document.compactType = e.target.selectedOptions[0].value; } render() { @@ -671,12 +671,22 @@ export class CollectionGridViewChrome extends React.Component */} - + - - - + -- cgit v1.2.3-70-g09d2 From fd000c9de458737ea48b319c159c6824148640d0 Mon Sep 17 00:00:00 2001 From: usodhi <61431818+usodhi@users.noreply.github.com> Date: Thu, 11 Jun 2020 16:39:52 +0530 Subject: resizing chrome text on panelwidth decrease --- .../views/collections/CollectionViewChromes.scss | 1 - .../views/collections/CollectionViewChromes.tsx | 37 ++++++++++++++++------ 2 files changed, 28 insertions(+), 10 deletions(-) (limited to 'src/client/views/collections/CollectionViewChromes.scss') diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index bfa20f42a..f85cbfee2 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -195,7 +195,6 @@ .grid-control { align-self: center; - width: 30%; display: flex; flex-direction: row; margin-right: 5px; diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 7654c9d9e..63080d2e6 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -1,8 +1,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { action, computed, observable, runInAction } from "mobx"; +import { action, computed, observable, runInAction, autorun, Lambda } from "mobx"; import { observer } from "mobx-react"; import * as React from "react"; -import { Doc, DocListCast, HeightSym } from "../../../fields/Doc"; +import { Doc, DocListCast, HeightSym, Opt } from "../../../fields/Doc"; import { Id } from "../../../fields/FieldSymbols"; import { List } from "../../../fields/List"; import { listSpec } from "../../../fields/Schema"; @@ -572,6 +572,22 @@ export class CollectionGridViewChrome extends React.Component; + + componentDidMount() { + + runInAction(() => this.resize = this.props.CollectionView.props.PanelWidth() < 700); + + // listener to reduce text on chrome resize (panel resize) + this.resizeListenerDisposer = computed(() => this.props.CollectionView.props.PanelWidth()).observe(({ newValue }) => { + runInAction(() => this.resize = newValue < 700); + }); + } + + componentWillUnmount() { + this.resizeListenerDisposer?.(); + } /** * Sets the value of `numCols` on the grid's Document to the value entered. @@ -673,7 +689,7 @@ export class CollectionGridViewChrome extends React.Component - + @@ -687,9 +703,9 @@ export class CollectionGridViewChrome extends React.Component ) => { e.stopPropagation(); e.preventDefault(); e.currentTarget.focus(); }} /> */} - + - + - + - + - +
); -- cgit v1.2.3-70-g09d2 From d8feecd0542670233e6ea87006a89eb00d10a17e Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 18 Jun 2020 17:59:48 -0400 Subject: fixed keyvalue pane inputting new key values. made collection chromes shrink a little when window shrinks. --- src/client/views/MainView.tsx | 8 ++-- src/client/views/collections/CollectionView.tsx | 11 ++--- .../views/collections/CollectionViewChromes.scss | 2 +- .../views/collections/CollectionViewChromes.tsx | 10 ++--- src/client/views/nodes/KeyValueBox.tsx | 51 +++++++++------------- 5 files changed, 34 insertions(+), 48 deletions(-) (limited to 'src/client/views/collections/CollectionViewChromes.scss') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 4a09f9ff3..fcaa349cd 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -201,9 +201,9 @@ export class MainView extends React.Component { const toggleTheme = ScriptField.MakeScript(`self.darkScheme = !self.darkScheme`); const toggleComic = ScriptField.MakeScript(`toggleComicMode()`); - const cloneWorkspace = ScriptField.MakeScript(`cloneWorkspace()`); - workspaceDoc.contextMenuScripts = new List([toggleTheme!, toggleComic!, cloneWorkspace!]); - workspaceDoc.contextMenuLabels = new List(["Toggle Theme Colors", "Toggle Comic Mode", "New Workspace Layout"]); + const copyWorkspace = ScriptField.MakeScript(`copyWorkspace()`); + workspaceDoc.contextMenuScripts = new List([toggleTheme!, toggleComic!, copyWorkspace!]); + workspaceDoc.contextMenuLabels = new List(["Toggle Theme Colors", "Toggle Comic Mode", "Snapshot Workspace"]); Doc.AddDocToList(workspaces, "data", workspaceDoc); // bcz: strangely, we need a timeout to prevent exceptions/issues initializing GoldenLayout (the rendering engine for Main Container) @@ -582,7 +582,7 @@ export class MainView extends React.Component { } Scripting.addGlobal(function freezeSidebar() { MainView.expandFlyout(); }); Scripting.addGlobal(function toggleComicMode() { Doc.UserDoc().fontFamily = "Comic Sans MS"; Doc.UserDoc().renderStyle = Doc.UserDoc().renderStyle === "comic" ? undefined : "comic"; }); -Scripting.addGlobal(function cloneWorkspace() { +Scripting.addGlobal(function copyWorkspace() { const copiedWorkspace = Doc.MakeCopy(Cast(Doc.UserDoc().activeWorkspace, Doc, null), true); const workspaces = Cast(Doc.UserDoc().myWorkspaces, Doc, null); Doc.AddDocToList(workspaces, "data", copiedWorkspace); diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 33615cc68..508b9e5e7 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -516,13 +516,10 @@ export class CollectionView extends Touchable + const boxShadow = Doc.UserDoc().renderStyle === "comic" || this.props.Document.isBackground || this.collectionViewType === CollectionViewType.Linear ? undefined : + `${Cast(Doc.UserDoc().activeWorkspace, Doc, null)?.darkScheme ? "rgb(30, 32, 31) " : "#9c9396 "} ${StrCast(this.props.Document.boxShadow, "0.2vw 0.2vw 0.8vw")}`; + return (
{this.showIsTagged()}
{this.collectionViewType !== undefined ? this.SubView(this.collectionViewType, props) : (null)} diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index f85cbfee2..77a12ed37 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -15,7 +15,7 @@ padding-bottom: 1px; height: 32px; border-bottom: .5px solid rgb(180, 180, 180); - overflow: hidden; + overflow: visible; .collectionViewBaseChrome { display: flex; diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 48810f1e9..52fb63386 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -259,10 +259,8 @@ export class CollectionViewBaseChrome extends React.Component
@@ -713,7 +711,7 @@ export class CollectionGridViewChrome extends React.Component + + { this._valInput.current!.select(); e.stopPropagation(); }} style={{ width: `${this.splitPercentage}%` }}> + + + } - @action - valueChanged = (e: React.ChangeEvent) => { - this._valueInput = e.currentTarget.value; - } - - newKeyValue = () => - ( - - - - - - - - - ) - @action onDividerMove = (e: PointerEvent): void => { const nativeWidth = this._mainCont.current!.getBoundingClientRect(); @@ -260,8 +251,8 @@ export class KeyValueBox extends React.Component { >Key Fields - {this.createTable()} - {this.newKeyValue()} + {this.createTable} + {this.newKeyValue} {dividerDragger} -- cgit v1.2.3-70-g09d2