From 270ee7f9d01ed8d3432f162f40cfe28db9503cfc Mon Sep 17 00:00:00 2001 From: alinayejin Date: Mon, 18 Dec 2023 17:35:58 -0500 Subject: add state message gif --- .../CollectionFreeFormInfoState.tsx | 16 ++++++-- .../CollectionFreeFormInfoUI.tsx | 41 +++++++++++---------- .../assets/dash-pin-with-view.gif | Bin 0 -> 695946 bytes .../collections/collectionFreeForm/assets/link.png | Bin 0 -> 8908 bytes .../collectionFreeForm/declaration.d.ts | 3 ++ 5 files changed, 37 insertions(+), 23 deletions(-) create mode 100644 src/client/views/collections/collectionFreeForm/assets/dash-pin-with-view.gif create mode 100644 src/client/views/collections/collectionFreeForm/assets/link.png create mode 100644 src/client/views/collections/collectionFreeForm/declaration.d.ts (limited to 'src') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx index 66aa29de0..deab92258 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx @@ -3,6 +3,7 @@ import { observer } from 'mobx-react'; import * as React from 'react'; import { ObservableReactComponent } from '../../ObservableReactComponent'; import './CollectionFreeFormView.scss'; +import assets from './assets/link.png'; /** * An Fsa Arc. The first array element is a test condition function that will be observed. @@ -13,11 +14,13 @@ export type infoArc = [() => any, (res?: any) => infoState]; export const StateMessage = Symbol('StateMessage'); export const StateEntryFunc = Symbol('StateEntryFunc'); +export const StateMessageGIF = Symbol('StateMessageGIF'); export class infoState { [StateMessage]: string = ''; [StateEntryFunc]?: () => any; + [StateMessageGIF]?: string = ''; [key: string]: infoArc; - constructor(message: string, arcs: { [key: string]: infoArc }, entryFunc?: () => any) { + constructor(message: string, arcs: { [key: string]: infoArc }, entryFunc?: () => any, messageGif?: string) { this[StateMessage] = message; Object.assign(this, arcs); this[StateEntryFunc] = entryFunc; @@ -36,9 +39,10 @@ export class infoState { export function InfoState( msg: string, // arcs: { [key: string]: infoArc }, - entryFunc?: () => any + entryFunc?: () => any, + gif?: string, ) { - return new infoState(msg, arcs, entryFunc); + return new infoState(msg, arcs, entryFunc, gif); } export interface CollectionFreeFormInfoStateProps { @@ -90,6 +94,10 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent{this.State?.[StateMessage]}; + return
+ {/* state message gif */} + + {this.State?.[StateMessage]} +
; } } diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx index ff0968ef8..dc0930a23 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx @@ -73,7 +73,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent numDocs() > 1, () => multipleDocs], @@ -136,22 +136,25 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent !numDocLinks(), () => multipleDocs], docRemoved: [() => numDocs() < 2, () => oneDoc], - docCreated: [() => numDocs() == 3, () => demos], - // docPinned: [() => pin(), () => pinnedDoc], + docCreated: [() => numDocs() == 3, () => { + trail = pin().length; + return presentDocs; + }], + activePen: [() => activeTool() === InkTool.Pen, () => penMode], }, setBackground("black")); // prettier-ignore - const demos = InfoState('', { - // activePen: [() => activeTool() === InkTool.Pen, () => penMode], - docPinned: [() => pin().length, () => { + const presentDocs = InfoState('Another document! You could make a presentation. Click the pin icon on the top left corner.', { + docPinned: [() => pin().length > trail, () => { trail = pin().length; return pinnedDoc1; }], - }); + docRemoved: [() => numDocs() < 3, () => viewedLink], + }, setBackground("pink"), "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], - // docRemoved: [() => numDocs() < 3, () => demos], - // }); // prettier-ignore + const penMode = InfoState('You\'re in pen mode. Click and drag to draw your first masterpiece.', { + // activePen: [() => activeTool() === InkTool.Eraser, () => eraserMode], + activePen: [() => activeTool() !== InkTool.Pen, () => viewedLink], + }); // prettier-ignore // const eraserMode = InfoState('You\'re in eraser mode. Say goodbye to your first masterpiece.', { // docsRemoved: [() => numDocs() == 3, () => demos], @@ -165,10 +168,10 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent presentationMode() === 'edit', () => editPresentationMode], // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode], autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode], - docRemoved: [() => numDocs() < 3, () => demos], + docRemoved: [() => numDocs() < 3, () => viewedLink], }); - const pinnedDoc2 = InfoState('You pinned another doc.', { + const pinnedDoc2 = InfoState(`You pinned ${pin().length} docs.`, { docPinned: [() => pin().length > trail, () => { trail = pin().length; return pinnedDoc3; @@ -176,10 +179,10 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent presentationMode() === 'edit', () => editPresentationMode], // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode], autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode], - docRemoved: [() => numDocs() < 3, () => demos], + docRemoved: [() => numDocs() < 3, () => viewedLink], }); - const pinnedDoc3 = InfoState('You pinned yet another doc.', { + const pinnedDoc3 = InfoState(`You pinned ${pin().length} docs.`, { docPinned: [() => pin().length > trail, () => { trail = pin().length; return pinnedDoc2; @@ -187,7 +190,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent presentationMode() === 'edit', () => editPresentationMode], // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode], autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode], - docRemoved: [() => numDocs() < 3, () => demos], + docRemoved: [() => numDocs() < 3, () => viewedLink], }); // const openedTrail = InfoState('This is your trails tab.', { @@ -204,18 +207,18 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent presentationMode() === 'edit', () => editPresentationMode], autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode], - docRemoved: [() => numDocs() < 3, () => demos], + docRemoved: [() => numDocs() < 3, () => viewedLink], docCreated: [() => numDocs() == 4, () => completed], }); const autoPresentationMode = InfoState('You\'re in auto presentation mode.', { // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode], manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode], - docRemoved: [() => numDocs() < 3, () => demos], + docRemoved: [() => numDocs() < 3, () => viewedLink], 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 on the top right corner to read our full documentation.', { docRemoved: [() => numDocs() == 1, () => oneDoc], }, setBackground("white")); // prettier-ignore diff --git a/src/client/views/collections/collectionFreeForm/assets/dash-pin-with-view.gif b/src/client/views/collections/collectionFreeForm/assets/dash-pin-with-view.gif new file mode 100644 index 000000000..b0896d5c7 Binary files /dev/null and b/src/client/views/collections/collectionFreeForm/assets/dash-pin-with-view.gif differ diff --git a/src/client/views/collections/collectionFreeForm/assets/link.png b/src/client/views/collections/collectionFreeForm/assets/link.png new file mode 100644 index 000000000..1e10fc658 Binary files /dev/null and b/src/client/views/collections/collectionFreeForm/assets/link.png differ diff --git a/src/client/views/collections/collectionFreeForm/declaration.d.ts b/src/client/views/collections/collectionFreeForm/declaration.d.ts new file mode 100644 index 000000000..e56a93143 --- /dev/null +++ b/src/client/views/collections/collectionFreeForm/declaration.d.ts @@ -0,0 +1,3 @@ +declare module '*.jpg'; +declare module '*.png'; +declare module '*.gif'; \ No newline at end of file -- cgit v1.2.3-70-g09d2