aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx20
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx117
-rw-r--r--src/server/public/assets/dash-colon-menu.gifbin0 -> 348794 bytes
-rw-r--r--src/server/public/assets/dash-create-link-board.gifbin0 -> 167854 bytes
-rw-r--r--src/server/public/assets/dash-following-link.gifbin0 -> 181851 bytes
5 files changed, 83 insertions, 54 deletions
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
index 58f6b1593..688f84cd5 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
@@ -5,7 +5,6 @@ import * as React from 'react';
import { SettingsManager } from '../../../util/SettingsManager';
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.
@@ -15,18 +14,18 @@ import './CollectionFreeFormView.scss';
export type infoArc = [() => any, (res?: any) => infoState];
export const StateMessage = Symbol('StateMessage');
-export const StateEntryFunc = Symbol('StateEntryFunc');
export const StateMessageGIF = Symbol('StateMessageGIF');
+export const StateEntryFunc = Symbol('StateEntryFunc');
export class infoState {
[StateMessage]: string = '';
- [StateEntryFunc]?: () => any;
- [StateMessageGIF]?: string = '';
[key: string]: infoArc;
- constructor(message: string, arcs: { [key: string]: infoArc }, entryFunc?: () => any, messageGif?: string) {
+ [StateMessageGIF]?: string = '';
+ [StateEntryFunc]?: () => any;
+ constructor(message: string, arcs: { [key: string]: infoArc }, messageGif?: string, entryFunc?: () => any) {
this[StateMessage] = message;
Object.assign(this, arcs);
- this[StateEntryFunc] = entryFunc;
this[StateMessageGIF] = messageGif;
+ this[StateEntryFunc] = entryFunc;
}
}
@@ -36,16 +35,17 @@ export class infoState {
* @param arcs an object with fields containing @infoArcs (an object with field names indicating the arc transition and
* field values being a tuple of an arc transition trigger function (that returns a truthy value when the arc should fire),
* and an arc transition action function (that sets the next state)
+ * @param gif the gif displayed when in this state
* @param entryFunc a function to call when entering the state
* @returns an FSA state
*/
export function InfoState(
msg: string, //
arcs: { [key: string]: infoArc },
- entryFunc?: () => any,
- gif?: string
+ gif?: string,
+ entryFunc?: () => any
) {
- return new infoState(msg, arcs, entryFunc, gif);
+ return new infoState(msg, arcs, gif, entryFunc);
}
export interface CollectionFreeFormInfoStateProps {
@@ -103,7 +103,7 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
<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>
+ <img className="gif" src={`/assets/${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.props.close())} />
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
index 8628ca3c3..cd76003c4 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
@@ -11,6 +11,7 @@ import { DocButtonState, DocumentLinksButton } from '../../nodes/DocumentLinksBu
import { CollectionFreeFormInfoState, InfoState, StateEntryFunc, infoState } from './CollectionFreeFormInfoState';
import { CollectionFreeFormView } from './CollectionFreeFormView';
import './CollectionFreeFormView.scss';
+import { TopBar } from '../../topbar/TopBar';
export interface CollectionFreeFormInfoUIProps {
Document: Doc;
@@ -75,72 +76,98 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
// set of states
const start = InfoState('Click anywhere and begin typing to create your first text document.', {
- docCreated: [() => numDocs(), () => {
- docX = firstDoc()?.x;
- docY = firstDoc()?.y;
- return oneDoc;
- }],
- }, setBackground("blue")); // prettier-ignore
+ docCreated: [() => numDocs(), () => {
+ docX = firstDoc()?.x;
+ docY = firstDoc()?.y;
+ return oneDoc;
+ }],
+ }); // prettier-ignore
const oneDoc = InfoState('Hello world! You can drag and drop to move your document around.', {
- // docCreated: [() => numDocs() > 1, () => multipleDocs],
- docDeleted: [() => numDocs() < 1, () => start],
- docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
- docX = firstDoc()?.x;
- docY = firstDoc()?.y;
- return movedDoc1;
- }],
- }, setBackground("red")); // prettier-ignore
+ // docCreated: [() => numDocs() > 1, () => multipleDocs],
+ docDeleted: [() => numDocs() < 1, () => start],
+ docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
+ docX = firstDoc()?.x;
+ docY = firstDoc()?.y;
+ return movedDoc1;
+ }],
+ }); // prettier-ignore
- const movedDoc1 = InfoState('Great moves. Try creating a second document.', {
+ const movedDoc1 = InfoState(
+ 'Great moves. Try creating a second document. You can see the list of supported document types by typing \":\".',
+ {
docCreated: [() => numDocs() == 2, () => multipleDocs],
docDeleted: [() => numDocs() < 1, () => start],
docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
- docX = firstDoc()?.x;
- docY = firstDoc()?.y;
- return movedDoc2;
- }],
- }, setBackground("yellow")); // prettier-ignore
+ docX = firstDoc()?.x;
+ docY = firstDoc()?.y;
+ return movedDoc2;
+ }],
+ },
+ 'dash-colon-menu.gif'
+ ); // prettier-ignore
- const movedDoc2 = InfoState('Slick moves. Try creating a second document.', {
+ const movedDoc2 = InfoState(
+ 'Slick moves. Try creating a second document. You can see the list of supported document types by typing \":\".',
+ {
docCreated: [() => numDocs() == 2, () => multipleDocs],
docDeleted: [() => numDocs() < 1, () => start],
docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
- docX = firstDoc()?.x;
- docY = firstDoc()?.y;
- return movedDoc3;
- }],
- }, setBackground("pink")); // prettier-ignore
+ docX = firstDoc()?.x;
+ docY = firstDoc()?.y;
+ return movedDoc3;
+ }],
+ },
+ 'dash-colon-menu.gif'
+ ); // prettier-ignore
- const movedDoc3 = InfoState('Groovy moves. Try creating a second document.', {
+ const movedDoc3 = InfoState(
+ 'Groovy moves. Try creating a second document. You can see the list of supported document types by typing \":\".',
+ {
docCreated: [() => numDocs() == 2, () => multipleDocs],
docDeleted: [() => numDocs() < 1, () => start],
docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
- docX = firstDoc()?.x;
- docY = firstDoc()?.y;
- return movedDoc1;
- }],
- }, setBackground("green")); // prettier-ignore
+ docX = firstDoc()?.x;
+ docY = firstDoc()?.y;
+ return movedDoc1;
+ }],
+ },
+ 'dash-colon-menu.gif'
+ ); // prettier-ignore
- const multipleDocs = InfoState('Let\'s create a new link. Click the link icon on one of your documents.', {
+ 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("purple")); // prettier-ignore
+ },
+ 'dash-create-link-board.gif'
+ ); // prettier-ignore
- const startedLink = InfoState('Now click the highlighted link icon on your other document.', {
+ const startedLink = InfoState(
+ 'Now click the highlighted link icon on your other document.',
+ {
linkCreated: [() => numDocLinks(), () => madeLink],
docRemoved: [() => numDocs() < 2, () => oneDoc],
- }, setBackground("orange")); // prettier-ignore
+ },
+ 'dash-create-link-board.gif'
+ ); // prettier-ignore
- const madeLink = InfoState('You made your first link! You can view your links by selecting the blue dot.', {
+ const madeLink = InfoState(
+ 'You made your first link! You can view your links by selecting the blue dot.',
+ {
linkCreated: [() => !numDocLinks(), () => multipleDocs],
linkViewed: [() => linkMenuOpen(), () => {
- alert(numDocLinks() + " cheer for " + numDocLinks() + " link!");
- return viewedLink;
+ alert(numDocLinks() + " cheer for " + numDocLinks() + " link!");
+ return viewedLink;
}],
- }, setBackground("blue")); // prettier-ignore
+ },
+ 'dash-following-link.gif'
+ ); // prettier-ignore
- const viewedLink = InfoState('Great work. You are now ready to create your own hypermedia world.', {
+ const viewedLink = InfoState(
+ 'Great work. You are now ready to create your own hypermedia world. Click the blinking question mark to learn more.',
+ {
linkDeleted: [() => !numDocLinks(), () => multipleDocs],
docRemoved: [() => numDocs() < 2, () => oneDoc],
docCreated: [() => numDocs() == 3, () => {
@@ -148,7 +175,10 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
return presentDocs;
}],
activePen: [() => activeTool() === InkTool.Pen, () => penMode],
- }, setBackground("black")); // prettier-ignore
+ },
+ 'documentation.png',
+
+ ); // prettier-ignore
const presentDocs = InfoState(
'Another document! You could make a presentation. Click the pin icon in the top left corner.',
@@ -162,7 +192,6 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
],
docRemoved: [() => numDocs() < 3, () => viewedLink],
},
- setBackground('black'),
'/assets/dash-pin-with-view.gif'
);
@@ -244,7 +273,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
const completed = InfoState('Eager to learn more? Click the ? icon in the top right corner to read our full documentation.', {
docRemoved: [() => numDocs() == 1, () => oneDoc],
- }, setBackground("white")); // prettier-ignore
+ }); // prettier-ignore
return start;
};
diff --git a/src/server/public/assets/dash-colon-menu.gif b/src/server/public/assets/dash-colon-menu.gif
new file mode 100644
index 000000000..b5512afb1
--- /dev/null
+++ b/src/server/public/assets/dash-colon-menu.gif
Binary files differ
diff --git a/src/server/public/assets/dash-create-link-board.gif b/src/server/public/assets/dash-create-link-board.gif
new file mode 100644
index 000000000..354188fd9
--- /dev/null
+++ b/src/server/public/assets/dash-create-link-board.gif
Binary files differ
diff --git a/src/server/public/assets/dash-following-link.gif b/src/server/public/assets/dash-following-link.gif
new file mode 100644
index 000000000..9e3e6df82
--- /dev/null
+++ b/src/server/public/assets/dash-following-link.gif
Binary files differ
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 22:18:17 +0000