aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/util/LinkManager.ts2
-rw-r--r--src/client/util/SettingsManager.tsx3
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx58
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx172
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss39
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx4
-rw-r--r--src/fields/Doc.ts2
-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
10 files changed, 147 insertions, 133 deletions
diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts
index dd3b9bd07..0c8d18a7a 100644
--- a/src/client/util/LinkManager.ts
+++ b/src/client/util/LinkManager.ts
@@ -162,7 +162,7 @@ export class LinkManager {
return this.relatedLinker(anchor);
} // finds all links that contain the given anchor
public getAllDirectLinks(anchor?: Doc): Doc[] {
- return anchor ? Array.from(anchor[DirectLinks]) : [];
+ return anchor ? Array.from(anchor[DocData][DirectLinks]) : [];
} // finds all links that contain the given anchor
relatedLinker = computedFn(function relatedLinker(this: any, anchor: Doc): Doc[] {
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 682704770..8594a1c92 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -483,7 +483,8 @@ export class SettingsManager extends React.Component<{}> {
toggleStatus={BoolCast(Doc.defaultAclPrivate)}
onClick={action(() => (Doc.defaultAclPrivate = !Doc.defaultAclPrivate))}
/>
- <Toggle toggleType={ToggleType.SWITCH} formLabel={'Enable Sharing UI'} color={SettingsManager.userColor} toggleStatus={BoolCast(Doc.IsSharingEnabled)} onClick={action(() => (Doc.IsSharingEnabled = !Doc.IsSharingEnabled))} />
+ <Toggle toggleType={ToggleType.SWITCH} formLabel="Enable Sharing UI" color={SettingsManager.userColor} toggleStatus={BoolCast(Doc.IsSharingEnabled)} onClick={action(() => (Doc.IsSharingEnabled = !Doc.IsSharingEnabled))} />
+ <Toggle toggleType={ToggleType.SWITCH} formLabel="Disable Info UI" color={SettingsManager.userColor} toggleStatus={BoolCast(Doc.IsInfoUIDisabled)} onClick={action(() => (Doc.IsInfoUIDisabled = !Doc.IsInfoUIDisabled))} />
</div>
</div>
</div>
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
index 58f6b1593..73dd7fea3 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
@@ -5,7 +5,7 @@ import * as React from 'react';
import { SettingsManager } from '../../../util/SettingsManager';
import { ObservableReactComponent } from '../../ObservableReactComponent';
import './CollectionFreeFormView.scss';
-// import assets from './assets/link.png';
+import { Doc } from '../../../../fields/Doc';
/**
* An Fsa Arc. The first array element is a test condition function that will be observed.
@@ -15,18 +15,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 = '';
+ [StateEntryFunc]?: () => any;
[key: string]: infoArc;
- constructor(message: string, arcs: { [key: string]: infoArc }, entryFunc?: () => any, messageGif?: string) {
+ 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 +36,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 {
@@ -57,7 +58,7 @@ export interface CollectionFreeFormInfoStateProps {
@observer
export class CollectionFreeFormInfoState extends ObservableReactComponent<CollectionFreeFormInfoStateProps> {
_disposers: IReactionDisposer[] = [];
- @observable _hide = false;
+ @observable _expanded = false;
constructor(props: any) {
super(props);
@@ -72,22 +73,16 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
}
clearState = () => this._disposers.map(disposer => disposer());
- initState = () =>
- (this._disposers = this.Arcs.map(arc => ({ test: arc[0], act: arc[1] })).map(arc => {
- return reaction(
- //
+ initState = () => (this._disposers =
+ this.Arcs.map(arc => ({ test: arc[0], act: arc[1] })).map(
+ arc => reaction(
arc.test,
- res => {
- if (res) {
- const next = arc.act(res);
- this._props.next(next);
- }
- },
+ res => res && this._props.next(arc.act(res)),
{ fireImmediately: true }
- );
- }));
+ )
+ )); // prettier-ignore
- componentDidMount(): void {
+ componentDidMount() {
this.initState();
}
componentDidUpdate(prevProps: Readonly<CollectionFreeFormInfoStateProps>) {
@@ -95,17 +90,24 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
this.clearState();
this.initState();
}
- componentWillUnmount(): void {
+ componentWillUnmount() {
this.clearState();
}
+
render() {
+ const gif = this.State?.[StateMessageGIF];
return (
- <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 className={'collectionFreeform-infoUI'}>
+ <p className="collectionFreeform-infoUI-msg">
+ {this.State?.[StateMessage]}
+ <button className={'collectionFreeform-' + (!gif ? 'hidden' : 'infoUI-button')} onClick={action(() => (this._expanded = !this._expanded))}>
+ {this._expanded ? 'Less...' : 'More...'}
+ </button>
+ </p>
+ <div className={'collectionFreeform-' + (!this._expanded || !gif ? 'hidden' : 'infoUI-gif-container')}>
+ <img src={`/assets/${gif}`} alt="state message gif" />
</div>
- <div style={{ position: 'absolute', top: -10, left: -10 }}>
+ <div className="collectionFreeform-infoUI-close">
<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 43b877705..cc729decc 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
@@ -8,6 +8,7 @@ import { DocumentManager } from '../../../util/DocumentManager';
import { LinkManager } from '../../../util/LinkManager';
import { ObservableReactComponent } from '../../ObservableReactComponent';
import { DocButtonState, DocumentLinksButton } from '../../nodes/DocumentLinksButton';
+import { TopBar } from '../../topbar/TopBar';
import { CollectionFreeFormInfoState, InfoState, StateEntryFunc, infoState } from './CollectionFreeFormInfoState';
import { CollectionFreeFormView } from './CollectionFreeFormView';
import './CollectionFreeFormView.scss';
@@ -25,12 +26,12 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
constructor(props: any) {
super(props);
makeObservable(this);
- this.currState = this.setupStates();
+ this._currState = this.setupStates();
}
_originalbackground: string | undefined;
@observable _currState: infoState | undefined = undefined;
- get currState() { return this._currState!; } // prettier-ignore
+ get currState() { return this._currState; } // prettier-ignore
set currState(val) { runInAction(() => (this._currState = val)); } // prettier-ignore
componentWillUnmount(): void {
@@ -60,6 +61,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
const docNewY = () => firstDoc()?.y;
const linkStart = () => DocumentLinksButton.StartLink;
+ const linkUnstart = () => !DocumentLinksButton.StartLink;
const numDocLinks = () => LinkManager.Instance.getAllDirectLinks(firstDoc())?.length;
const linkMenuOpen = () => DocButtonState.Instance.LinkEditorDocView;
@@ -74,81 +76,85 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
const presentationMode = () => Doc.ActivePresentation?.presentation_status;
// 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
-
- 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
-
- const movedDoc1 = InfoState('Great moves. Try creating a second document.', {
- 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
-
- const movedDoc2 = InfoState('Slick moves. Try creating a second document.', {
- 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
-
- const movedDoc3 = InfoState('Groovy moves. Try creating a second document.', {
- 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
-
- 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
-
- const startedLink = InfoState('Now click the highlighted link icon on your other document.', {
- linkCreated: [() => numDocLinks(), () => madeLink],
- docRemoved: [() => numDocs() < 2, () => oneDoc],
- }, setBackground("orange")); // prettier-ignore
-
- 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;
- }],
- }, 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, () => {
- trail = pin().length;
- return presentDocs;
- }],
- activePen: [() => activeTool() === InkTool.Pen, () => penMode],
- }, setBackground("black")); // prettier-ignore
+ const start = InfoState(
+ 'Click anywhere and begin typing to create your first text document.',
+ {
+ 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 movedDoc;
+ }],
+ }
+ ); // prettier-ignore
+
+ const movedDoc = InfoState(
+ 'Great moves. Try creating a second document. You can see the list of supported document types by typing a colon (\":\")',
+ {
+ docCreated: [() => numDocs() == 2, () => multipleDocs],
+ docDeleted: [() => numDocs() < 1, () => start],
+ },
+ 'dash-colon-menu.gif',
+ () => TopBar.Instance.FlipDocumentationIcon()
+ ); // prettier-ignore
+
+ 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],
+ },
+ 'dash-create-link-board.gif'
+ ); // prettier-ignore
+
+ const startedLink = InfoState(
+ 'Now click the highlighted link icon on your other document.',
+ {
+ linkUnstart: [() => linkUnstart(), () => multipleDocs],
+ linkCreated: [() => numDocLinks(), () => madeLink],
+ docRemoved: [() => numDocs() < 2, () => oneDoc],
+ },
+ '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.',
+ {
+ linkCreated: [() => !numDocLinks(), () => multipleDocs],
+ linkViewed: [() => linkMenuOpen(), () => {
+ alert(numDocLinks() + " cheer for " + numDocLinks() + " link!");
+ return viewedLink;
+ }],
+ },
+ 'dash-following-link.gif'
+ ); // prettier-ignore
+
+ const viewedLink = InfoState(
+ 'Great work. You are now ready to create your own hypermedia world. Click the ? icon in the top right corner to learn more.',
+ {
+ linkDeleted: [() => !numDocLinks(), () => multipleDocs],
+ docRemoved: [() => numDocs() < 2, () => oneDoc],
+ docCreated: [() => numDocs() == 3, () => {
+ trail = pin().length;
+ return presentDocs;
+ }],
+ activePen: [() => activeTool() === InkTool.Pen, () => penMode],
+ },
+ 'documentation.png',
+ () => TopBar.Instance.FlipDocumentationIcon()
+ ); // prettier-ignore
const presentDocs = InfoState(
'Another document! You could make a presentation. Click the pin icon in the top left corner.',
@@ -162,7 +168,6 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
],
docRemoved: [() => numDocs() < 3, () => viewedLink],
},
- setBackground('black'),
'/assets/dash-pin-with-view.gif'
);
@@ -242,14 +247,17 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
docCreated: [() => numDocs() == 4, () => completed],
});
- 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
+ const completed = InfoState(
+ 'Eager to learn more? Click the ? icon in the top right corner to read our full documentation.',
+ { docRemoved: [() => numDocs() == 1, () => oneDoc] },
+ 'documentation.png',
+ () => TopBar.Instance.FlipDocumentationIcon()
+ ); // prettier-ignore
return start;
};
render() {
- return <CollectionFreeFormInfoState next={this.setCurrState} close={this._props.close} infoState={this.currState} />;
+ return !this.currState ? null : <CollectionFreeFormInfoState next={this.setCurrState} close={this._props.close} infoState={this.currState} />;
}
}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
index 9e7d364ea..2c94446fb 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
@@ -273,33 +273,34 @@
margin: 15px;
padding: 10px;
+ .collectionFreeform-infoUI-close {
+ position: absolute;
+ top: -10;
+ left: -10;
+ }
- .msg {
+ .collectionFreeform-infoUI-msg {
+ position: relative;
+ max-width: 500;
+ margin: 10;
+ }
+ .collectionFreeform-infoUI-button {
+ border-radius: 50px;
+ font-size: 12px;
+ padding: 6;
position: relative;
- // display: block;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -o-user-select: none;
- user-select: none;
}
- .gif-container {
+ .collectionFreeform-infoUI-gif-container {
position: relative;
margin-top: 5px;
- // display: block;
+ pointer-events: none;
- justify-content: center;
- align-items: center;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -o-user-select: none;
- user-select: none;
-
- .gif {
- background-color: transparent;
+ > img {
height: 300px;
}
}
+ .collectionFreeform-hidden {
+ display: none;
+ }
}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 9500b918a..7bfbbf3f9 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1417,8 +1417,8 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
return anchor;
};
- @action closeInfo = () => (this.Document._hideInfo = true);
- infoUI = () => (this.Document._hideInfo || this.Document.annotationOn || this._props.renderDepth ? null : <CollectionFreeFormInfoUI Document={this.Document} Freeform={this} close={this.closeInfo} />);
+ @action closeInfo = () => (Doc.IsInfoUIDisabled = true);
+ infoUI = () => (Doc.IsInfoUIDisabled || this.Document.annotationOn || this._props.renderDepth ? null : <CollectionFreeFormInfoUI Document={this.Document} Freeform={this} close={this.closeInfo} />);
componentDidMount() {
this._props.setContentViewBox?.(this);
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index e47bfcbed..7060202d7 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -182,6 +182,8 @@ export class Doc extends RefField {
public static set noviceMode(val) { Doc.UserDoc().noviceMode = val; } // prettier-ignore
public static get IsSharingEnabled() { return BoolCast(Doc.UserDoc().isSharingEnabled); } // prettier-ignore
public static set IsSharingEnabled(val) { Doc.UserDoc().isSharingEnabled = val; } // prettier-ignore
+ public static get IsInfoUIDisabled() { return Doc.UserDoc().isInfoUIDisabled ? true : false; } // prettier-ignore
+ public static set IsInfoUIDisabled(val) { Doc.UserDoc().isInfoUIDisabled = val; } // prettier-ignore
public static get defaultAclPrivate() { return Doc.UserDoc().defaultAclPrivate; } // prettier-ignore
public static set defaultAclPrivate(val) { Doc.UserDoc().defaultAclPrivate = val; } // prettier-ignore
public static get ActivePage() { return StrCast(Doc.UserDoc().activePage); } // prettier-ignore
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 19:52:02 +0000