diff options
3 files changed, 63 insertions, 35 deletions
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx index d9f7ca6ea..2606304d0 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx @@ -51,6 +51,7 @@ export function InfoState( export interface CollectionFreeFormInfoStateProps { infoState: infoState; next: (state: infoState) => any; + close: () => void; } @observer @@ -99,13 +100,13 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec } render() { return ( - <div className="collectionFreeform-infoUI" style={{display:this._hide ? 'none':undefined}}> + <div className="collectionFreeform-infoUI" style={{ display: this._hide ? 'none' : undefined }}> <div className="msg">{this.State?.[StateMessage]}</div> <div className="gif-container" style={{ display: this.State?.[StateMessageGIF] ? undefined : 'none' }}> <img className="gif" src={this.State?.[StateMessageGIF]} alt="state message gif"></img> </div> - <div style={{position:"absolute", top:-10, left:-10}}> - <IconButton icon="x" color={SettingsManager.userColor} size={Size.XSMALL} type={Type.TERT} background={SettingsManager.userBackgroundColor} onClick={action(e => this._hide = true)} /> + <div style={{ position: 'absolute', top: -10, left: -10 }}> + <IconButton icon="x" color={SettingsManager.userColor} size={Size.XSMALL} type={Type.TERT} background={SettingsManager.userBackgroundColor} onClick={action(e => this.props.close())} /> </div> </div> ); diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx index 181f325f3..15e4d8360 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx @@ -10,10 +10,12 @@ import { ObservableReactComponent } from '../../ObservableReactComponent'; import { CollectionFreeFormInfoState, InfoState, infoState, StateEntryFunc } from './CollectionFreeFormInfoState'; import { CollectionFreeFormView } from './CollectionFreeFormView'; import './CollectionFreeFormView.scss'; +import { StrCast } from '../../../../fields/Types'; export interface CollectionFreeFormInfoUIProps { Document: Doc; Freeform: CollectionFreeFormView; + close: () => boolean; } @observer @@ -25,11 +27,16 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio makeObservable(this); this.currState = this.setupStates(); } + _originalbackground: string | undefined; @observable _currState: infoState | undefined = undefined; get currState() { return this._currState!; } // prettier-ignore set currState(val) { runInAction(() => (this._currState = val)); } // prettier-ignore + componentWillUnmount(): void { + this._props.Freeform.layoutDoc.backgroundColor = this._originalbackground; + } + setCurrState = (state: infoState) => { if (state) { this.currState = state; @@ -38,6 +45,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio }; setupStates = () => { + this._originalbackground = StrCast(this._props.Freeform.layoutDoc.backgroundColor); // state entry functions const setBackground = (colour: string) => () => (this._props.Freeform.layoutDoc.backgroundColor = colour); const setOpacity = (opacity: number) => () => (this._props.Freeform.layoutDoc.opacity = opacity); @@ -142,13 +150,21 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio activePen: [() => activeTool() === InkTool.Pen, () => penMode], }, setBackground("black")); // prettier-ignore - const presentDocs = InfoState('Another document! You could make a presentation. Click the pin icon in the top left corner.', { - docPinned: [() => pin().length > trail, () => { - trail = pin().length; - return pinnedDoc1; - }], - docRemoved: [() => numDocs() < 3, () => viewedLink], - }, setBackground("black"), "/assets/dash-pin-with-view.gif"); + const presentDocs = InfoState( + 'Another document! You could make a presentation. Click the pin icon in the top left corner.', + { + docPinned: [ + () => pin().length > trail, + () => { + trail = pin().length; + return pinnedDoc1; + }, + ], + docRemoved: [() => numDocs() < 3, () => viewedLink], + }, + setBackground('black'), + '/assets/dash-pin-with-view.gif' + ); const penMode = InfoState('You\'re in pen mode. Click and drag to draw your first masterpiece.', { // activePen: [() => activeTool() === InkTool.Eraser, () => eraserMode], @@ -160,10 +176,13 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio // }); // prettier-ignore const pinnedDoc1 = InfoState('You just pinned your doc.', { - docPinned: [() => pin().length > trail, () => { - trail = pin().length; - return pinnedDoc2; - }], + docPinned: [ + () => pin().length > trail, + () => { + trail = pin().length; + return pinnedDoc2; + }, + ], // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode], // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode], autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode], @@ -171,10 +190,13 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio }); const pinnedDoc2 = InfoState(`You pinned another doc.`, { - docPinned: [() => pin().length > trail, () => { - trail = pin().length; - return pinnedDoc3; - }], + docPinned: [ + () => pin().length > trail, + () => { + trail = pin().length; + return pinnedDoc3; + }, + ], // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode], // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode], autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode], @@ -182,10 +204,13 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio }); const pinnedDoc3 = InfoState(`You pinned yet another doc.`, { - docPinned: [() => pin().length > trail, () => { - trail = pin().length; - return pinnedDoc2; - }], + docPinned: [ + () => pin().length > trail, + () => { + trail = pin().length; + return pinnedDoc2; + }, + ], // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode], // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode], autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode], @@ -203,14 +228,14 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio // docCreated: [() => numDocs() == 4, () => completed], // }); - const manualPresentationMode = InfoState('You\'re in manual presentation mode.', { + const manualPresentationMode = InfoState("You're in manual presentation mode.", { // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode], autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode], docRemoved: [() => numDocs() < 3, () => viewedLink], docCreated: [() => numDocs() == 4, () => completed], }); - const autoPresentationMode = InfoState('You\'re in auto presentation mode.', { + const autoPresentationMode = InfoState("You're in auto presentation mode.", { // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode], manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode], docRemoved: [() => numDocs() < 3, () => viewedLink], @@ -225,6 +250,6 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio }; render() { - return <CollectionFreeFormInfoState next={this.setCurrState} infoState={this.currState} />; + return <CollectionFreeFormInfoState next={this.setCurrState} close={this._props.close} infoState={this.currState} />; } } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 88cdd51ff..1574deede 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1435,7 +1435,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection return anchor; }; - infoUI = () => (this.Document.annotationOn ? null : <CollectionFreeFormInfoUI Document={this.Document} Freeform={this} />); + @observable _hideInfo = false; + @action closeInfo = () => (this._hideInfo = true); + infoUI = () => (this._hideInfo || this.Document.annotationOn ? null : <CollectionFreeFormInfoUI Document={this.Document} Freeform={this} close={this.closeInfo} />); componentDidMount() { this._props.setContentView?.(this); @@ -1985,38 +1987,38 @@ ScriptingGlobals.add(function sendToBack(doc: Doc) { }); ScriptingGlobals.add(function datavizFromSchema(doc: Doc) { SelectionManager.Views.forEach(view => { - if (!view.layoutDoc.schema_columnKeys){ - view.layoutDoc.schema_columnKeys = new List<string>(['title', 'type', 'author', 'author_date']) + if (!view.layoutDoc.schema_columnKeys) { + view.layoutDoc.schema_columnKeys = new List<string>(['title', 'type', 'author', 'author_date']); } - const keys = Cast(view.layoutDoc.schema_columnKeys, listSpec('string'))?.filter(key => key!="text"); + const keys = Cast(view.layoutDoc.schema_columnKeys, listSpec('string'))?.filter(key => key != 'text'); if (!keys) return; const children = DocListCast(view.Document[Doc.LayoutFieldKey(view.Document)]); let csvRows = []; csvRows.push(keys.join(',')); - for (let i=0; i < children.length; i++) { + for (let i = 0; i < children.length; i++) { let eachRow = []; - for (let j=0; j<keys.length; j++){ + for (let j = 0; j < keys.length; j++) { var cell = children[i][keys[j]]; - if (cell && cell as string) cell = cell.toString().replace(/\,/g, ''); + if (cell && (cell as string)) cell = cell.toString().replace(/\,/g, ''); eachRow.push(cell); } csvRows.push(eachRow); } const blob = new Blob([csvRows.join('\n')], { type: 'text/csv' }); - const options = { x:0, y:-300, title: 'schemaTable', _width: 300, _height: 100, type: 'text/csv' }; + const options = { x: 0, y: -300, title: 'schemaTable', _width: 300, _height: 100, type: 'text/csv' }; const file = new File([blob], 'schemaTable', options); const loading = Docs.Create.LoadingDocument(file, options); loading.presentation_openInLightbox = true; DocUtils.uploadFileToDoc(file, {}, loading); if (view.ComponentView?.addDocument) { - // loading.dataViz_fromSchema = true; + // loading.dataViz_fromSchema = true; loading.dataViz_asSchema = view.layoutDoc; SchemaCSVPopUp.Instance.setView(view); SchemaCSVPopUp.Instance.setTarget(view.layoutDoc); SchemaCSVPopUp.Instance.setDataVizDoc(loading); SchemaCSVPopUp.Instance.setVisible(true); } - }) + }); }); |