diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx | 82 |
1 files changed, 58 insertions, 24 deletions
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx index 7445b3b7c..ff0968ef8 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx @@ -10,6 +10,7 @@ import { CollectionFreeFormView } from './CollectionFreeFormView'; import './CollectionFreeFormView.scss'; import { InkTool } from '../../../../fields/InkField'; import { DocumentManager } from '../../../util/DocumentManager'; +import TrailsIcon from '../../nodes/FontIconBox/TrailsIcon'; export interface CollectionFreeFormInfoUIProps { Document: Doc; @@ -39,7 +40,8 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio setupStates = () => { // state entry functions - const setBackground = (col: string) => () => (this._props.Freeform.layoutDoc.backgroundColor = col); + const setBackground = (colour: string) => () => (this._props.Freeform.layoutDoc.backgroundColor = colour); + const setOpacity = (opacity: number) => () => (this._props.Freeform.layoutDoc.opacity = opacity); // arc transition trigger conditions const firstDoc = () => (this._props.Freeform.childDocs.length ? this._props.Freeform.childDocs[0] : undefined); const numDocs = () => this._props.Freeform.childDocs.length; @@ -58,6 +60,9 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio const activeTool = () => Doc.ActiveTool; const pin = () => DocListCast(Doc.ActivePresentation?.data); + + let trail: number; + const trailView = () => DocumentManager.Instance.DocumentViews.find(view => view.Document === Doc.MyTrails); const presentationMode = () => Doc.ActivePresentation?.presentation_status; @@ -78,7 +83,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio docY = firstDoc()?.y; return movedDoc1; }], - }, setBackground("green")); // prettier-ignore + }, setBackground("red")); // prettier-ignore const movedDoc1 = InfoState('Great moves. Try creating a second document.', { docCreated: [() => numDocs() == 2, () => multipleDocs], @@ -88,7 +93,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio docY = firstDoc()?.y; return movedDoc2; }], - }, setBackground("green")); // prettier-ignore + }, setBackground("yellow")); // prettier-ignore const movedDoc2 = InfoState('Slick moves. Try creating a second document.', { docCreated: [() => numDocs() == 2, () => multipleDocs], @@ -98,7 +103,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio docY = firstDoc()?.y; return movedDoc3; }], - }, setBackground("green")); // prettier-ignore + }, setBackground("pink")); // prettier-ignore const movedDoc3 = InfoState('Groovy moves. Try creating a second document.', { docCreated: [() => numDocs() == 2, () => multipleDocs], @@ -113,7 +118,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio const multipleDocs = InfoState('Let\'s create a new link. Click the link icon on one of your documents.', { linkStarted: [() => linkStart(), () => startedLink], docRemoved: [() => numDocs() < 2, () => oneDoc], - }, setBackground("orange")); // prettier-ignore + }, setBackground("purple")); // prettier-ignore const startedLink = InfoState('Now click the highlighted link icon on your other document.', { linkCreated: [() => numDocLinks(), () => madeLink], @@ -126,18 +131,21 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio alert(numDocLinks() + " cheer for " + numDocLinks() + " link!"); return viewedLink; }], - }, setBackground("yellow")); // prettier-ignore + }, setBackground("blue")); // prettier-ignore const viewedLink = InfoState('Great work. You are now ready to create your own hypermedia world.', { linkDeleted: [() => !numDocLinks(), () => multipleDocs], docRemoved: [() => numDocs() < 2, () => oneDoc], docCreated: [() => numDocs() == 3, () => demos], // docPinned: [() => pin(), () => pinnedDoc], - }, setBackground("white")); // prettier-ignore + }, setBackground("black")); // prettier-ignore - const demos = InfoState('Wanna explore more?', { + const demos = InfoState('', { // activePen: [() => activeTool() === InkTool.Pen, () => penMode], - docPinned: [() => pin().length, () => pinnedDoc], + docPinned: [() => pin().length, () => { + trail = pin().length; + return pinnedDoc1; + }], }); // const penMode = InfoState('You\'re in pen mode. Click and drag to draw your first masterpiece.', { @@ -149,40 +157,66 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio // docsRemoved: [() => numDocs() == 3, () => demos], // }); // prettier-ignore - const pinnedDoc = InfoState('You just pinned your doc.', { - editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode], - manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode], + const pinnedDoc1 = InfoState('You just pinned your doc.', { + docPinned: [() => pin().length > trail, () => { + trail = pin().length; + return pinnedDoc2; + }], + // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode], + // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode], autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode], docRemoved: [() => numDocs() < 3, () => demos], }); - // const openedTrail = InfoState('This is your trails tab.', { - // trailView: [() => presentationMode() === 'edit', () => editPresentationMode], - // }); + const pinnedDoc2 = InfoState('You pinned another doc.', { + docPinned: [() => pin().length > trail, () => { + trail = pin().length; + return pinnedDoc3; + }], + // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode], + // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode], + autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode], + docRemoved: [() => numDocs() < 3, () => demos], + }); - const editPresentationMode = InfoState('You are editing your presentation.', { - manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode], + const pinnedDoc3 = InfoState('You pinned yet another doc.', { + docPinned: [() => pin().length > trail, () => { + trail = pin().length; + return pinnedDoc2; + }], + // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode], + // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode], autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode], docRemoved: [() => numDocs() < 3, () => demos], - docCreated: [() => numDocs() == 4, () => completed], }); - const manualPresentationMode = InfoState('Manual presentation mode.', { - editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode], + // const openedTrail = InfoState('This is your trails tab.', { + // trailView: [() => presentationMode() === 'edit', () => editPresentationMode], + // }); + + // const editPresentationMode = InfoState('You are editing your presentation.', { + // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode], + // autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode], + // docRemoved: [() => numDocs() < 3, () => demos], + // docCreated: [() => numDocs() == 4, () => completed], + // }); + + const manualPresentationMode = InfoState('You\'re in manual presentation mode.', { + // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode], autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode], docRemoved: [() => numDocs() < 3, () => demos], docCreated: [() => numDocs() == 4, () => completed], }); - const autoPresentationMode = InfoState('Auto presentation mode.', { - editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode], + const autoPresentationMode = InfoState('You\'re in auto presentation mode.', { + // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode], manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode], docRemoved: [() => numDocs() < 3, () => demos], docCreated: [() => numDocs() == 4, () => completed], }); - const completed = InfoState('Eager to learn more? Click the ? icon to read our full documentation', { - // + const completed = InfoState('Eager to learn more? Click the ? icon to read our full documentation.', { + docRemoved: [() => numDocs() == 1, () => oneDoc], }, setBackground("white")); // prettier-ignore return start; |