From c97b98c165e318da787361b8fc11382b0b98afa4 Mon Sep 17 00:00:00 2001 From: bob Date: Thu, 24 Oct 2019 11:54:03 -0400 Subject: several fixes to audioboxes. --- src/client/views/collections/CollectionStackingView.scss | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'src/client/views/collections/CollectionStackingView.scss') diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss index 3f4b678c7..1ff2275d4 100644 --- a/src/client/views/collections/CollectionStackingView.scss +++ b/src/client/views/collections/CollectionStackingView.scss @@ -21,6 +21,11 @@ overflow-y: auto; flex-wrap: wrap; transition: top .5s; + >div { + height: 100%; + position: relative; + display: inline-block; + } .collectionSchemaView-previewDoc { height: 100%; -- cgit v1.2.3-70-g09d2 From 93bbfe84f126c8f02ec2756b8bc236cb93c40d88 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 24 Oct 2019 19:43:46 -0400 Subject: some fixes for stacking view layouts --- .../collections/CollectionMasonryViewFieldRow.tsx | 96 +++++++--------------- .../views/collections/CollectionStackingView.scss | 6 +- .../authentication/models/current_user_utils.ts | 11 +-- 3 files changed, 39 insertions(+), 74 deletions(-) (limited to 'src/client/views/collections/CollectionStackingView.scss') diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx index 0249b90b4..d885f558e 100644 --- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx +++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx @@ -20,6 +20,7 @@ import { anchorPoints, Flyout } from "../DocumentDecorations"; import { EditableView } from "../EditableView"; import { CollectionStackingView } from "./CollectionStackingView"; import "./CollectionStackingView.scss"; +import { undo } from "prosemirror-history"; library.add(faPalette); @@ -40,27 +41,28 @@ interface CMVFieldRowProps { export class CollectionMasonryViewFieldRow extends React.Component { @observable private _background = "inherit"; @observable private _createAliasSelected: boolean = false; + @observable private _collapsed: boolean = false; + @observable private _headingsHack: number = 1; + @observable private _heading = this.props.headingObject ? this.props.headingObject.heading : this.props.heading; + @observable private _color = this.props.headingObject ? this.props.headingObject.color : "#f1efeb"; - private _dropRef: HTMLDivElement | null = null; - private dropDisposer?: DragManager.DragDropDisposer; + private _dropDisposer?: DragManager.DragDropDisposer; private _headerRef: React.RefObject = React.createRef(); private _startDragPosition: { x: number, y: number } = { x: 0, y: 0 }; private _contRef: React.RefObject = React.createRef(); private _sensitivity: number = 16; + private _counter: number = 0; - @observable _heading = this.props.headingObject ? this.props.headingObject.heading : this.props.heading; - @observable _color = this.props.headingObject ? this.props.headingObject.color : "#f1efeb"; createRowDropRef = (ele: HTMLDivElement | null) => { - this._dropRef = ele; - this.dropDisposer && this.dropDisposer(); + this._dropDisposer && this._dropDisposer(); if (ele) { - this.dropDisposer = DragManager.MakeDropTarget(ele, { handlers: { drop: this.rowDrop.bind(this) } }); + this._dropDisposer = DragManager.MakeDropTarget(ele, { handlers: { drop: this.rowDrop.bind(this) } }); } } getTrueHeight = () => { - if (this.collapsed) { + if (this._collapsed) { this.props.setDocHeight(this._heading, 20); } else { let rawHeight = this._contRef.current!.getBoundingClientRect().height + 15; //+ 15 accounts for the group header @@ -76,12 +78,7 @@ export class CollectionMasonryViewFieldRow extends React.Component d[key] = castedValue); - } - else { - de.data.droppedDocuments.forEach(d => d[key] = undefined); - } + de.data.droppedDocuments.forEach(d => d[key] = castedValue); this.props.parent.drop(e, de); e.stopPropagation(); } @@ -89,15 +86,9 @@ export class CollectionMasonryViewFieldRow extends React.Component { let parsed = parseInt(value); - if (!isNaN(parsed)) { - return parsed; - } - if (value.toLowerCase().indexOf("true") > -1) { - return true; - } - if (value.toLowerCase().indexOf("false") > -1) { - return false; - } + if (!isNaN(parsed)) return parsed; + if (value.toLowerCase().indexOf("true") > -1) return true; + if (value.toLowerCase().indexOf("false") > -1) return false; return value; } @@ -131,12 +122,7 @@ export class CollectionMasonryViewFieldRow extends React.Component { - if (SelectionManager.GetIsDragging()) { - this._background = "#b4b4b4"; - } - } + pointerEnteredRow = action(() => SelectionManager.GetIsDragging() && (this._background = "#b4b4b4")); @action pointerLeaveRow = () => { @@ -154,8 +140,7 @@ export class CollectionMasonryViewFieldRow extends React.Component { + deleteRow = undoBatch(action(() => { this._createAliasSelected = false; let key = StrCast(this.props.parent.props.Document.sectionFilter); this.props.docList.forEach(d => d[key] = undefined); @@ -163,7 +148,7 @@ export class CollectionMasonryViewFieldRow extends React.Component { @@ -205,6 +190,7 @@ export class CollectionMasonryViewFieldRow extends React.Component) => { e.stopPropagation(); e.preventDefault(); @@ -251,48 +237,31 @@ export class CollectionMasonryViewFieldRow extends React.Component { - this._createAliasSelected = true; - } + toggleAlias = action(() => this._createAliasSelected = true); + toggleVisibility = action(() => this._collapsed = !this._collapsed); renderMenu = () => { let selected = this._createAliasSelected; - return ( -
-
-
Create Alias
-
+ return (
+
+
Create Alias
+
Delete
- ); +
); } - @observable private collapsed: boolean = false; - - private toggleVisibility = action(() => { - this.collapsed = !this.collapsed; - }); - - @observable _headingsHack: number = 1; - handleResize = (size: any) => { - this.counter += 1; - if (this.counter !== 1) { + if (++this._counter !== 1) { this.getTrueHeight(); } } - private counter: number = 0; render() { - let cols = this.props.rows(); let rows = Math.max(1, Math.min(this.props.docList.length, Math.floor((this.props.parent.props.PanelWidth() - 2 * this.props.parent.xMargin) / (this.props.parent.columnWidth + this.props.parent.gridGap)))); let key = StrCast(this.props.parent.props.Document.sectionFilter); - let templatecols = ""; - let headings = this.props.headings(); let heading = this._heading; let style = this.props.parent; - let uniqueHeadings = headings.map((i, idx) => headings.indexOf(i) === idx); let evContents = heading ? heading : this.props.type && this.props.type === "number" ? "0" : `NO ${key.toUpperCase()} VALUE`; let headerEditableViewProps = { GetValue: () => evContents, @@ -315,7 +284,6 @@ export class CollectionMasonryViewFieldRow extends React.Component -
} - {evContents === `NO ${key.toUpperCase()} VALUE` ? - (null) : - } + {evContents === `NO ${key.toUpperCase()} VALUE` ? (null) :
@@ -351,7 +317,7 @@ export class CollectionMasonryViewFieldRow extends React.Component
: (null); const background = this._background; //to account for observables in Measure - const collapsed = this.collapsed; + const collapsed = this._collapsed; let chromeStatus = this.props.parent.props.Document.chromeStatus; return ( diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss index 1ff2275d4..f5530ab26 100644 --- a/src/client/views/collections/CollectionStackingView.scss +++ b/src/client/views/collections/CollectionStackingView.scss @@ -22,9 +22,8 @@ flex-wrap: wrap; transition: top .5s; >div { - height: 100%; position: relative; - display: inline-block; + display: block; } .collectionSchemaView-previewDoc { @@ -227,7 +226,6 @@ } .collectionStackingView-optionPicker { - width: 78px; .optionOptions { display: inline; @@ -235,10 +233,10 @@ .optionPicker { cursor: pointer; - width: 20px; height: 20px; border-radius: 10px; margin: 3px; + width:max-content; &.active { color: red; diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts index ee9794564..56ea5bfe1 100644 --- a/src/server/authentication/models/current_user_utils.ts +++ b/src/server/authentication/models/current_user_utils.ts @@ -71,7 +71,7 @@ export class CurrentUserUtils { } // setup the Creator button which will display the creator panel. This panel will include the drag creators and the color picker. when clicked, this panel will be displayed in the target container (ie, sidebarContainer) - static setupCreatePanel(sidebarContainer: Doc, doc: Doc) { + static setupToolsPanel(sidebarContainer: Doc, doc: Doc) { // setup a masonry view of all he creators const dragCreators = Docs.Create.MasonryDocument(CurrentUserUtils.setupCreatorButtons(doc), { width: 500, autoHeight: true, columnWidth: 35, ignoreClick: true, lockedPosition: true, chromeStatus: "disabled", title: "buttons", @@ -83,9 +83,9 @@ export class CurrentUserUtils { }); return Docs.Create.ButtonDocument({ - width: 35, height: 35, borderRounding: "50%", boxShadow: "2px 2px 1px", title: "Create", targetContainer: sidebarContainer, + width: 35, height: 35, borderRounding: "50%", boxShadow: "2px 2px 1px", title: "Tools", targetContainer: sidebarContainer, sourcePanel: Docs.Create.StackingDocument([dragCreators, color], { - width: 500, height: 800, chromeStatus: "disabled", title: "creator stack" + width: 500, height: 800, lockedPosition: true, chromeStatus: "disabled", title: "tools stack" }), onClick: ScriptField.MakeScript("this.targetContainer.proto = this.sourcePanel"), }); @@ -125,6 +125,7 @@ export class CurrentUserUtils { title: "search stack", ignoreClick: true }), targetContainer: sidebarContainer, + lockedPosition: true, onClick: ScriptField.MakeScript("this.targetContainer.proto = this.sourcePanel") }); } @@ -135,12 +136,12 @@ export class CurrentUserUtils { (doc.sidebarContainer as Doc).chromeStatus = "disabled"; (doc.sidebarContainer as Doc).onClick = ScriptField.MakeScript("freezeSidebar()"); - doc.CreateBtn = this.setupCreatePanel(doc.sidebarContainer as Doc, doc); + doc.ToolsBtn = this.setupToolsPanel(doc.sidebarContainer as Doc, doc); doc.LibraryBtn = this.setupLibraryPanel(doc.sidebarContainer as Doc, doc); doc.SearchBtn = this.setupSearchPanel(doc.sidebarContainer as Doc); // Finally, setup the list of buttons to display in the sidebar - doc.sidebarButtons = Docs.Create.StackingDocument([doc.SearchBtn as Doc, doc.LibraryBtn as Doc, doc.CreateBtn as Doc], { + doc.sidebarButtons = Docs.Create.StackingDocument([doc.SearchBtn as Doc, doc.LibraryBtn as Doc, doc.ToolsBtn as Doc], { width: 500, height: 80, boxShadow: "0 0", sectionFilter: "title", hideHeadings: true, ignoreClick: true, backgroundColor: "lightgrey", chromeStatus: "disabled", title: "library stack" }); -- cgit v1.2.3-70-g09d2 From 2786a2e4b33ff874f320697b89fecec3105df201 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 24 Oct 2019 22:55:57 -0400 Subject: fixed some stacking view layout. added a miniHeader layout for stacks --- .../collections/CollectionMasonryViewFieldRow.tsx | 74 ++++++++++++---------- .../views/collections/CollectionSchemaView.scss | 1 - .../views/collections/CollectionStackingView.scss | 33 +++++++++- .../views/collections/CollectionStackingView.tsx | 7 +- .../CollectionStackingViewFieldColumn.tsx | 2 +- 5 files changed, 77 insertions(+), 40 deletions(-) (limited to 'src/client/views/collections/CollectionStackingView.scss') diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx index d885f558e..52ebfafd3 100644 --- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx +++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx @@ -76,6 +76,8 @@ export class CollectionMasonryViewFieldRow extends React.Component { this._createAliasSelected = false; if (de.data instanceof DragManager.DocumentDragData) { + (this.props.parent.Document.dropConverter instanceof ScriptField) && + this.props.parent.Document.dropConverter.script.run({ dragData: de.data }); let key = StrCast(this.props.parent.props.Document.sectionFilter); let castedValue = this.getValue(this._heading); de.data.droppedDocuments.forEach(d => d[key] = castedValue); @@ -282,40 +284,44 @@ export class CollectionMasonryViewFieldRow extends React.Component -
- {} - {evContents === `NO ${key.toUpperCase()} VALUE` ? (null) : -
- - - -
- } - - {evContents === `NO ${key.toUpperCase()} VALUE` ? (null) : -
- - - -
- } -
- : (null); + let headingView = this.props.parent.props.Document.miniHeaders ? +
+ {} +
: + this.props.headingObject ? +
+
+ {} + {evContents === `NO ${key.toUpperCase()} VALUE` ? (null) : +
+ + + +
+ } + + {evContents === `NO ${key.toUpperCase()} VALUE` ? (null) : +
+ + + +
+ } +
+
: (null); const background = this._background; //to account for observables in Measure const collapsed = this._collapsed; let chromeStatus = this.props.parent.props.Document.chromeStatus; diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index e0cedc210..6a9392253 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -40,7 +40,6 @@ .collectionSchemaView-previewRegion { position: relative; - background: $light-color; height: auto !important; .collectionSchemaView-previewDoc { diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss index f5530ab26..29178b909 100644 --- a/src/client/views/collections/CollectionStackingView.scss +++ b/src/client/views/collections/CollectionStackingView.scss @@ -124,7 +124,38 @@ background: red; } } - + .collectionStackingView-miniHeader { + width: 100%; + .editableView-container-editing-oneLine { + min-height: 20px; + display: flex; + align-items: center; + flex-direction: row; + } + span::before , span::after{ + content: ""; + width: 50%; + border-top: dashed gray 1px; + position: relative; + display: inline-block; + } + span::before { + margin-right: 10px; + } + span::after{ + margin-left: 10px; + } + span { + position: relative; + text-align: center; + white-space: nowrap; + overflow: visible; + width: 100%; + display: flex; + color:gray; + align-items: center; + } + } .collectionStackingView-sectionHeader { text-align: center; margin-left: 2px; diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 96940acbc..7f0165ad4 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -44,7 +44,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { @computed get gridGap() { return NumCast(this.props.Document.gridGap, 10); } @computed get isStackingView() { return BoolCast(this.props.Document.singleColumn, true); } @computed get numGroupColumns() { return this.isStackingView ? Math.max(1, this.Sections.size + (this.showAddAGroup ? 1 : 0)) : 1; } - @computed get showAddAGroup() { return (this.sectionFilter && this.props.ContainingCollectionDoc && (this.props.ContainingCollectionDoc.chromeStatus !== 'view-mode' && this.props.ContainingCollectionDoc.chromeStatus !== 'disabled')); } + @computed get showAddAGroup() { return (this.sectionFilter && (this.props.Document.chromeStatus !== 'view-mode' && this.props.Document.chromeStatus !== 'disabled')); } @computed get columnWidth() { return Math.min(this.props.PanelWidth() / (this.props as any).ContentScaling() - 2 * this.xMargin, this.isStackingView ? Number.MAX_VALUE : NumCast(this.props.Document.columnWidth, 250)); @@ -121,7 +121,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { return res; } else { let sum = Array.from(this._heightMap.values()).reduce((acc: number, curr: number) => acc += curr, 0); - return this.props.ContentScaling() * (sum + (this.Sections.size ? 85 : -15)); + return this.props.ContentScaling() * (sum + (this.Sections.size ? (this.props.Document.miniHeaders ? 20 : 85) : -15)); } } return -1; @@ -363,7 +363,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { } onToggle = (checked: Boolean) => { - this.props.ContainingCollectionDoc && (this.props.ContainingCollectionDoc.chromeStatus = checked ? "collapsed" : "view-mode"); + this.props.Document.chromeStatus = checked ? "collapsed" : "view-mode"; } onContextMenu = (e: React.MouseEvent): void => { @@ -393,6 +393,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { let entries = Array.from(this.Sections.entries()); sections = entries.sort(this.sortFunc); } + console.log("NUM = " + this.numGroupColumns); return (
{/* the default bucket (no key value) has a tooltip that describes what it is. -- cgit v1.2.3-70-g09d2