aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx
diff options
context:
space:
mode:
authorgeireann <60007097+geireann@users.noreply.github.com>2021-08-20 13:05:04 -0400
committergeireann <60007097+geireann@users.noreply.github.com>2021-08-20 13:05:04 -0400
commit0eede4546f2ddc862a42a43e0daa1fc02dfe6cae (patch)
tree24a6b31f9615cafc32b597ead5bbaf33a3f785a2 /src/client/views/collections/collectionLinearView/CollectionLinearView.tsx
parentf7173baebe101d6c9dac3635a50c1bf37e7ed74b (diff)
more updates
Diffstat (limited to 'src/client/views/collections/collectionLinearView/CollectionLinearView.tsx')
-rw-r--r--src/client/views/collections/collectionLinearView/CollectionLinearView.tsx16
1 files changed, 11 insertions, 5 deletions
diff --git a/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx b/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx
index 3327bef36..713d93f97 100644
--- a/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx
+++ b/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx
@@ -108,12 +108,13 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
}
render() {
- const guid = Utils.GenerateGuid();
- const flexDir: any = StrCast(this.Document.flexDirection);
- const expandable: boolean = BoolCast(this.props.Document.linearViewExpandable);
+ const guid = Utils.GenerateGuid(); // Generate a unique ID to use as the label
+ const flexDir: any = StrCast(this.Document.flexDirection); // Specify direction of linear view content
+ const flexGap: number = NumCast(this.Document.flexGap); // Specify the gap between linear view content
+ const expandable: boolean = BoolCast(this.props.Document.linearViewExpandable); // Specify whether it is expandable or not
const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
- const icon: string = StrCast(this.props.Document.icon);
+ const icon: string = StrCast(this.props.Document.icon); // Menu opener toggle
const menuOpener = <label htmlFor={`${guid}`}
style={{
@@ -134,7 +135,12 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
<input id={`${guid}`} type="checkbox" checked={BoolCast(this.props.Document.linearViewIsExpanded)} ref={this.addMenuToggle}
onChange={action(() => this.props.Document.linearViewIsExpanded = this.addMenuToggle.current!.checked)} />
- <div className="collectionLinearView-content" style={{ height: this.dimension(), flexDirection: flexDir }}>
+ <div className="collectionLinearView-content"
+ style={{
+ height: this.dimension(),
+ flexDirection: flexDir,
+ gap: flexGap
+ }}>
{this.childLayoutPairs.map((pair, ind) => {
const nested = pair.layout._viewType === CollectionViewType.Linear;
const dref = React.createRef<HTMLDivElement>();