aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package-lock.json84
-rw-r--r--src/client/views/collections/CollectionView.tsx2
-rw-r--r--src/client/views/collections/CollectionViewChromes.scss7
-rw-r--r--src/client/views/collections/CollectionViewChromes.tsx52
-rw-r--r--src/client/views/collections/collectionGrid/CollectionGridView.scss47
-rw-r--r--src/client/views/collections/collectionGrid/CollectionGridView.tsx72
-rw-r--r--src/client/views/collections/collectionGrid/Grid.tsx9
7 files changed, 180 insertions, 93 deletions
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<FieldViewProps & CollectionViewCus
subItems.push({ description: "Carousel", event: () => 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<CollectionViewChro
this.props.collapse?.(true);
break;
}
- })
+ });
@undoBatch
viewChanged = (e: React.ChangeEvent) => {
@@ -569,6 +569,9 @@ export class CollectionTreeViewChrome extends React.Component<CollectionViewChro
@observer
export class CollectionGridViewChrome extends React.Component<CollectionViewChromeProps> {
+ 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<CollectionViewChro
if (e.key === "Enter" || e.key === "Tab") {
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
}
}
@@ -602,27 +604,59 @@ export class CollectionGridViewChrome extends React.Component<CollectionViewChro
this.props.CollectionView.props.Document.flexGrid = !this.props.CollectionView.props.Document.flexGrid;
}
+ onIncrementButtonClick = () => {
+ 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 (
- <div className="collectionGridViewChrome-cont">
- <span className={"grid-control"}>
+ <div className="collectionGridViewChrome-cont" >
+ <span className="grid-control">
<span className="grid-icon">
<FontAwesomeIcon icon="columns" size="1x" />
</span>
- <input className="collectionGridViewChrome-entryBox" type="number" placeholder={this.props.CollectionView.props.Document.numCols as string} onKeyDown={this.onNumColsEnter} onClick={(e: React.MouseEvent<HTMLInputElement, MouseEvent>) => e.currentTarget.focus()} />
+ <input className="collectionGridViewChrome-entryBox" type="number" placeholder={this.props.CollectionView.props.Document.numCols as string} onKeyDown={this.onNumColsEnter} onClick={(e: React.MouseEvent<HTMLInputElement, MouseEvent>) => { e.stopPropagation(); e.preventDefault(); e.currentTarget.focus(); }} />
+ <input className="columnButton" onClick={this.onIncrementButtonClick} onMouseEnter={this.incrementValue} onMouseLeave={this.decrementValue} type="button" value="↑" />
+ <input className="columnButton" style={{ marginRight: 5 }} onClick={this.onDecrementButtonClick} onMouseEnter={this.decrementValue} onMouseLeave={this.incrementValue} type="button" value="↓" />
</span>
- <span className={"grid-control"}>
+ <span className="grid-control">
<span className="grid-icon">
<FontAwesomeIcon icon="text-height" size="1x" />
</span>
- <input className="collectionGridViewChrome-entryBox" type="number" placeholder={this.props.CollectionView.props.Document.rowHeight as string} onKeyDown={this.onRowHeightEnter} onClick={(e: React.MouseEvent<HTMLInputElement, MouseEvent>) => e.currentTarget.focus()} />
+ <input className="collectionGridViewChrome-entryBox" type="number" placeholder={this.props.CollectionView.props.Document.rowHeight as string} onKeyDown={this.onRowHeightEnter} onClick={(e: React.MouseEvent<HTMLInputElement, MouseEvent>) => { e.stopPropagation(); e.preventDefault(); e.currentTarget.focus(); }} />
</span>
- <span className={"grid-control"}>
+ <span className="grid-control">
<input style={{ marginRight: 5 }} type="checkbox" onClick={this.toggleFlex} defaultChecked={this.props.CollectionView.props.Document.flexGrid as boolean} />
<span className="grid-icon">
<FontAwesomeIcon icon="arrow-up" size="1x" />
</span>
- <label>Flexible</label>
+ <label className="flexLabel">Flexible</label>
</span>
</div>
);
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);
}
@@ -83,23 +91,6 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
}
/**
- * 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
* the sum of all the resolved column widths of the
@@ -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<Layout>;
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(
- <div className={this.props.Document.flexGrid ? "document-wrapper" : "document-wrapper static"}
+ <div className={this.props.Document.flexGrid && (this.props.isSelected() ? true : false) ? "document-wrapper" : "document-wrapper static"}
key={gridLayout.i}
>
{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<HTMLInputElement>) => {
+ 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 (
<div className="collectionGridView-contents"
style={{
@@ -290,18 +282,18 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
ref={this.containerRef}
onScroll={action((e: React.UIEvent<HTMLDivElement>) => this._scroll = e.currentTarget.scrollTop)}
>
+ <input className="rowHeightSlider" type="range" defaultValue={NumCast(this.props.Document.rowHeight)} onChange={this.onSliderChange} style={{ width: this.props.PanelHeight() - 40 }} min={1} max={this.props.PanelHeight() - 40} onPointerEnter={e => e.currentTarget.focus()} />
<Grid
width={this.props.PanelWidth()}
nodeList={childDocumentViews.length ? childDocumentViews : null}
layout={childDocumentViews.length ? this.layoutList : undefined}
childrenDraggable={this.props.isSelected() ? true : false}
- numCols={this.props.Document.numCols as number}
- rowHeight={this.props.Document.rowHeight as number}
+ numCols={NumCast(this.props.Document.numCols)}
+ rowHeight={NumCast(this.props.Document.rowHeight)}
setLayout={this.setLayout}
- //setLayout={(layout: Layout[]) => this.setLayout(layout)}
transformScale={this.props.ScreenToLocalTransform().Scale}
- // flex={this.props.Document.flexGrid as boolean}
/>
+
</div>
</div >
);
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<GridProps> {
* @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<GridProps> {
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}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-12 10:10:43 +0000