From 19af1ce5d8216dd5eac3df0def1c059d7d8975ec Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 17 Sep 2020 02:58:34 -0400 Subject: changed text box headers from a template to a title bar. --- src/client/util/CurrentUserUtils.ts | 35 ++++++++++++++++++++++++----------- src/client/util/SettingsManager.tsx | 6 +++--- src/client/util/SharingManager.tsx | 6 ++++-- 3 files changed, 31 insertions(+), 16 deletions(-) (limited to 'src/client/util') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 2e7fd1b21..c9c369fba 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -271,8 +271,7 @@ export class CurrentUserUtils { } if (doc["template-notes"] === undefined) { - doc["template-notes"] = new PrefetchProxy(Docs.Create.TreeDocument([doc["template-note-Note"] as any as Doc, - doc["template-note-Idea"] as any as Doc, doc["template-note-Topic"] as any as Doc, doc["template-note-Todo"] as any as Doc], + doc["template-notes"] = new PrefetchProxy(Docs.Create.TreeDocument([doc["template-note-Note"] as any as Doc, doc["template-note-Idea"] as any as Doc, doc["template-note-Topic"] as any as Doc], // doc["template-note-Todo"] as any as Doc], { title: "Note Layouts", _height: 75, system: true })); } else { const curNoteTypes = Cast(doc["template-notes"], Doc, null); @@ -943,7 +942,7 @@ export class CurrentUserUtils { doc.system = true; doc.noviceMode = doc.noviceMode === undefined ? "true" : doc.noviceMode; doc.title = Doc.CurrentUserEmail; - doc.userColor = "orange"; + doc.userColor = doc.userColor || "#12121233"; doc._raiseWhenDragged = true; doc.activeInkPen = doc; doc.activeInkColor = StrCast(doc.activeInkColor, "rgb(0, 0, 0)"); @@ -984,14 +983,14 @@ export class CurrentUserUtils { doc["dockedBtn-redo"] && reaction(() => UndoManager.redoStack.slice(), () => Doc.GetProto(doc["dockedBtn-redo"] as Doc).opacity = UndoManager.CanRedo() ? 1 : 0.4, { fireImmediately: true }); // uncomment this to setup a default note style that uses the custom header layout - PromiseValue(doc.emptyHeader).then(factory => { - if (Cast(doc.defaultTextLayout, Doc, null)?.version !== headerViewVersion) { - const deleg = Doc.delegateDragFactory(factory as Doc); - deleg.title = "header"; - doc.defaultTextLayout = new PrefetchProxy(deleg); - Doc.AddDocToList(Cast(doc["template-notes"], Doc, null), "data", deleg); - } - }); + // PromiseValue(doc.emptyHeader).then(factory => { + // if (Cast(doc.defaultTextLayout, Doc, null)?.version !== headerViewVersion) { + // const deleg = Doc.delegateDragFactory(factory as Doc); + // deleg.title = "header"; + // doc.defaultTextLayout = new PrefetchProxy(deleg); + // Doc.AddDocToList(Cast(doc["template-notes"], Doc, null), "data", deleg); + // } + // }); return doc; } @@ -1128,6 +1127,20 @@ export class CurrentUserUtils { CurrentUserUtils.openDashboard(userDoc, dashboardDoc); } + public static GetNewTextDoc(title: string, x: number, y: number, width?: number, height?: number) { + const tbox = Docs.Create.TextDocument("", { + _width: width || 200, _height: height || 100, x: x, y: y, _autoHeight: true, _fontSize: StrCast(Doc.UserDoc().fontSize), + _fontFamily: StrCast(Doc.UserDoc().fontFamily), title + }); + const template = FormattedTextBox.DefaultLayout; + if (template instanceof Doc) { + tbox._width = NumCast(template._width); + tbox.layoutKey = "layout_" + StrCast(template.title); + Doc.GetProto(tbox)[StrCast(tbox.layoutKey)] = template; + } + return tbox; + } + public static get MySearchPanelDoc() { return Cast(Doc.UserDoc().mySearchPanelDoc, Doc, null); } public static get ActiveDashboard() { return Cast(Doc.UserDoc().activeDashboard, Doc, null); } public static get ActivePresentation() { return Cast(Doc.UserDoc().activePresentation, Doc, null); } diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index 5b8fe3576..fc8bc382e 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -52,7 +52,7 @@ export class SettingsManager extends React.Component<{}> { } @undoBatch selectUserMode = action((e: React.ChangeEvent) => Doc.UserDoc().noviceMode = (e.currentTarget as any)?.value === "Novice"); - @undoBatch changeShowTitle = action((e: React.ChangeEvent) => Doc.UserDoc().showTitle = (e.currentTarget as any).value); + @undoBatch changeShowTitle = action((e: React.ChangeEvent) => Doc.UserDoc().showTitle = (e.currentTarget as any).value ? "title" : undefined); @undoBatch changeFontFamily = action((e: React.ChangeEvent) => Doc.UserDoc().fontFamily = (e.currentTarget as any).value); @undoBatch changeFontSize = action((e: React.ChangeEvent) => Doc.UserDoc().fontSize = (e.currentTarget as any).value); @undoBatch switchActiveBackgroundColor = action((color: ColorState) => Doc.UserDoc().activeCollectionBackground = String(color.hex)); @@ -109,8 +109,8 @@ export class SettingsManager extends React.Component<{}> { {fontSizes.map(size => )}
-
Show title
- Doc.UserDoc().showTitle = !Doc.UserDoc().showTitle} checked={BoolCast(Doc.UserDoc().showTitle)} /> +
Show header
+ Doc.UserDoc().showTitle = Doc.UserDoc().showTitle ? undefined : "creationDate"} checked={Doc.UserDoc().showTitle !== undefined} />
Alt Buttons
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx index 6fdbac41b..de50deee7 100644 --- a/src/client/util/SharingManager.tsx +++ b/src/client/util/SharingManager.tsx @@ -51,6 +51,7 @@ const storage = "data"; interface ValidatedUser { user: User; notificationDoc: Doc; + userColor: string; } @@ -58,7 +59,7 @@ interface ValidatedUser { export class SharingManager extends React.Component<{}> { public static Instance: SharingManager; @observable private isOpen = false; // whether the SharingManager modal is open or not - @observable private users: ValidatedUser[] = []; // the list of users with notificationDocs + @observable public users: ValidatedUser[] = []; // the list of users with notificationDocs @observable private targetDoc: Doc | undefined; // the document being shared @observable private targetDocView: DocumentView | undefined; // the DocumentView of the document being shared // @observable private copied = false; @@ -129,9 +130,10 @@ export class SharingManager extends React.Component<{}> { const userDocument = await DocServer.GetRefField(user.userDocumentId); if (userDocument instanceof Doc) { const notificationDoc = await Cast(userDocument.mySharedDocs, Doc); + const userColor = StrCast(userDocument.userColor); runInAction(() => { if (notificationDoc instanceof Doc) { - this.users.push({ user, notificationDoc }); + this.users.push({ user, notificationDoc, userColor }); } }); } -- cgit v1.2.3-70-g09d2 From 80bbbb3842cb89949d2b949ce8f5a2ed3921b112 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 17 Sep 2020 10:46:27 -0400 Subject: fixed deleting text links to work when there are multiple links in the same linkAnchor mark. addressed problem with text getting a negative height when its resized to fit content in a preview window when its also displayed in freeform. --- src/client/util/SharingManager.tsx | 4 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 16 ++---- .../formattedText/FormattedTextBoxComment.tsx | 59 ++++++++++++++-------- src/client/views/nodes/formattedText/marks_rts.ts | 23 +++++---- .../nodes/formattedText/prosemirrorPatches.js | 6 ++- 5 files changed, 59 insertions(+), 49 deletions(-) (limited to 'src/client/util') diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx index de50deee7..87c620d6d 100644 --- a/src/client/util/SharingManager.tsx +++ b/src/client/util/SharingManager.tsx @@ -445,7 +445,7 @@ export class SharingManager extends React.Component<{}> { const commonKeys = intersection(...docs.map(doc => this.layoutDocAcls ? doc?.[AclSym] && Object.keys(doc[AclSym]) : doc?.[DataSym]?.[AclSym] && Object.keys(doc[DataSym][AclSym]))); // the list of users shared with - const userListContents: (JSX.Element | null)[] = users.filter(({ user }) => docs.length > 1 ? commonKeys.includes(`ACL-${user.email.replace('.', '_')}`) : true).map(({ user, notificationDoc }) => { + const userListContents: (JSX.Element | null)[] = users.filter(({ user }) => docs.length > 1 ? commonKeys.includes(`ACL-${user.email.replace('.', '_')}`) : true).map(({ user, notificationDoc, userColor }) => { const userKey = `ACL-${user.email.replace('.', '_')}`; const uniform = docs.every(doc => this.layoutDocAcls ? doc?.[AclSym]?.[userKey] === docs[0]?.[AclSym]?.[userKey] : doc?.[DataSym]?.[AclSym]?.[userKey] === docs[0]?.[DataSym]?.[AclSym]?.[userKey]); const permissions = uniform ? StrCast(targetDoc?.[userKey]) : "-multiple-"; @@ -461,7 +461,7 @@ export class SharingManager extends React.Component<{}> { diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 188ed03da..83012bab5 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -1233,7 +1233,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp FormattedTextBoxComment.textBox = this; const pcords = editor.posAtCoords({ left: e.clientX, top: e.clientY }); !this.props.isSelected(true) && editor.dispatch(editor.state.tr.setSelection(new TextSelection(editor.state.doc.resolve(pcords?.pos || 0)))); - FormattedTextBoxComment.update(editor, undefined, (e.target as any)?.className === "prosemirror-dropdownlink" ? (e.target as any).href : ""); + const target = (e.target as any).parentElement; // hrefs are store don the database of the node that wraps the hyerlink + FormattedTextBoxComment.update(editor, undefined, target?.dataset?.targethrefs); } (e.nativeEvent as any).formattedHandled = true; @@ -1487,7 +1488,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp @action tryUpdateHeight(limitHeight?: number) { let scrollHeight = this.ProseRef?.scrollHeight || 0; - if (this.props.renderDepth && this.layoutDoc._autoHeight && !this.props.ignoreAutoHeight && scrollHeight) { // if top === 0, then the text box is growing upward (as the overlay caption) which doesn't contribute to the height computation + if (this.props.renderDepth && this.layoutDoc._autoHeight && !this.props.ignoreAutoHeight && scrollHeight && !this.props.dontRegisterView) { // if top === 0, then the text box is growing upward (as the overlay caption) which doesn't contribute to the height computation scrollHeight = scrollHeight * NumCast(this.layoutDoc._viewScale, 1); if (limitHeight && scrollHeight > limitHeight) { scrollHeight = limitHeight; @@ -1506,18 +1507,9 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp }, 10); } else { try { - // let ele = this._boxRef.current; - // while (ele && ele.className !== "documentView-contentsView") ele = ele.parentElement as any; - // if (ele) { - // const docHeight = Number(getComputedStyle(ele).height.replace("px", "")); - // const boxHeight = Number(getComputedStyle(this._boxRef.current!).height.replace("px", "")); - // const outer = docHeight - boxHeight - (this.props.ChromeHeight ? this.props.ChromeHeight() : 0); - // this.rootDoc._height = newHeight + outer; - // this.layoutDoc._nativeHeight = nh ? scrollHeight : undefined; - // } const boxHeight = Number(getComputedStyle(this._boxRef.current!).height.replace("px", "")); const outer = this.rootDoc[HeightSym]() - boxHeight - (this.props.ChromeHeight ? this.props.ChromeHeight() : 0); - this.rootDoc._height = newHeight + outer; + this.rootDoc._height = newHeight + Math.max(0, outer); this.layoutDoc._nativeHeight = nh ? scrollHeight : undefined; } catch (e) { console.log("Error in tryUpdateHeight"); } } diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx index 1bf885636..249aca812 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx @@ -1,6 +1,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Tooltip } from "@material-ui/core"; -import { action } from "mobx"; +import { action, observable } from "mobx"; import { Mark, ResolvedPos } from "prosemirror-model"; import { EditorState, Plugin } from "prosemirror-state"; import { EditorView } from "prosemirror-view"; @@ -23,6 +23,7 @@ import { FormattedTextBox } from "./FormattedTextBox"; import './FormattedTextBoxComment.scss'; import { schema } from "./schema_rts"; import React = require("react"); +import { observer } from "mobx-react"; export let formattedTextBoxCommentPlugin = new Plugin({ view(editorView) { return new FormattedTextBoxComment(editorView); } @@ -60,6 +61,7 @@ export function findEndOfMark(rpos: ResolvedPos, view: EditorView, finder: (mark // this view appears when clicking on text that has a hyperlink which is configured to show a preview of its target. // this will also display metadata information about text when the view is configured to display things like other people who authored text. // + export class FormattedTextBoxComment { static tooltip: HTMLElement; static tooltipText: HTMLElement; @@ -72,6 +74,13 @@ export class FormattedTextBoxComment { static _deleteRef: Opt; static _followRef: Opt; + static _nextRef: Opt; + + static _lastState?: EditorState; + static _lastView?: EditorView; + + @observable static _hrefInd = 0; + static _hrefs: string[] | undefined = []; constructor(view: any) { if (!FormattedTextBoxComment.tooltip) { @@ -101,6 +110,8 @@ export class FormattedTextBoxComment { if (linkDoc.author) { if (FormattedTextBoxComment._deleteRef?.contains(e.target as any)) { this.deleteLink(); + } else if (FormattedTextBoxComment._nextRef?.contains(e.target as any)) { + FormattedTextBoxComment.showPreview(FormattedTextBoxComment._lastView!, FormattedTextBoxComment._lastState, FormattedTextBoxComment._hrefs?.[(++FormattedTextBoxComment._hrefInd) % FormattedTextBoxComment._hrefs?.length]) } else { FormattedTextBoxComment.linkDoc = undefined; if (linkDoc.type !== DocumentType.LINK) { @@ -128,7 +139,6 @@ export class FormattedTextBoxComment { FormattedTextBoxComment.linkDoc ? LinkManager.Instance.deleteLink(FormattedTextBoxComment.linkDoc) : null; LinkDocPreview.LinkInfo = undefined; DocumentLinksButton.EditLink = undefined; - //FormattedTextBoxComment.tooltipText = undefined; FormattedTextBoxComment.Hide(); }); @@ -164,14 +174,20 @@ export class FormattedTextBoxComment { } static update(view: EditorView, lastState?: EditorState, forceUrl: string = "") { - const state = view.state; // Don't do anything if the document/selection didn't change - if (lastState && lastState.doc.eq(state.doc) && - lastState.selection.eq(state.selection)) { + if (!forceUrl && lastState?.doc.eq(view.state.doc) && lastState?.selection.eq(view.state.selection)) { return; } + FormattedTextBoxComment._lastState = lastState; + FormattedTextBoxComment._lastView = view; + FormattedTextBoxComment._hrefs = forceUrl ? forceUrl.trim().split(" ") : undefined; + FormattedTextBoxComment._hrefInd = 0; FormattedTextBoxComment.linkDoc = undefined; + FormattedTextBoxComment.showPreview(view, lastState, FormattedTextBoxComment._hrefs?.[FormattedTextBoxComment._hrefInd]); + } + static showPreview(view: EditorView, lastState?: EditorState, forceUrl: string = "") { + const state = view.state; const textBox = FormattedTextBoxComment.textBox; if (!textBox || !textBox.props) { return; @@ -209,7 +225,7 @@ export class FormattedTextBoxComment { state.doc.nodesBetween(state.selection.from, state.selection.to, (node: any, pos: number, parent: any) => !child && node.marks.length && (child = node)); child = child || (nbef && state.selection.$from.nodeBefore); const mark = child ? findLinkMark(child.marks) : undefined; - const href = (!mark?.attrs.docref || naft === nbef) && mark?.attrs.allLinks.find((item: { href: string }) => item.href)?.href || forceUrl; + const href = forceUrl || (!mark?.attrs.docref || naft === nbef) && mark?.attrs.allLinks.find((item: { href: string }) => item.href)?.href; if (forceUrl || (href && child && nbef && naft && mark?.attrs.showPreview)) { try { ReactDOM.unmountComponentAtNode(FormattedTextBoxComment.tooltipText); @@ -245,34 +261,35 @@ export class FormattedTextBoxComment { if (target?.author) { FormattedTextBoxComment.showCommentbox("", view, nbef); - const title = StrCast(target.title).length > 16 ? - StrCast(target.title).substr(0, 16) + "..." : target.title; - + const title = StrCast(target.title).length > 16 ? StrCast(target.title).substr(0, 16) + "..." : target.title; const docPreview =
{title} - {FormattedTextBoxComment.linkDoc.description !== "" ?

- {StrCast(FormattedTextBoxComment.linkDoc.description)}

: null} + {FormattedTextBoxComment.linkDoc.description === "" ? (null) : +

{StrCast(FormattedTextBoxComment.linkDoc.description)}

}
+ {(FormattedTextBoxComment._hrefs?.length || 0) <= 1 ? (null) :
Next Link
} placement="top"> +
this._nextRef = r}> + +
+ }
Delete Link
} placement="top"> -
this._deleteRef = r}> -
+
this._deleteRef = r}> + +
Follow Link
} placement="top"> -
this._followRef = r}> - +
this._followRef = r}> +
-
+
+
; - - FormattedTextBoxComment.showCommentbox("", view, nbef); ReactDOM.render(docPreview, FormattedTextBoxComment.tooltipText); diff --git a/src/client/views/nodes/formattedText/marks_rts.ts b/src/client/views/nodes/formattedText/marks_rts.ts index 066ceb5c8..cca7ea013 100644 --- a/src/client/views/nodes/formattedText/marks_rts.ts +++ b/src/client/views/nodes/formattedText/marks_rts.ts @@ -36,20 +36,21 @@ export const marks: { [index: string]: MarkSpec } = { }], toDOM(node: any) { const targetids = node.attrs.allLinks.reduce((p: string, item: { href: string, title: string, targetId: string, linkId: string }) => p + " " + item.targetId, ""); + const targethrefs = node.attrs.allLinks.reduce((p: string, item: { href: string, title: string, targetId: string, linkId: string }) => p + " " + item.href, ""); const linkids = node.attrs.allLinks.reduce((p: string, item: { href: string, title: string, targetId: string, linkId: string }) => p + " " + item.linkId, ""); return node.attrs.docref && node.attrs.title ? ["div", ["span", `"`], ["span", 0], ["span", `"`], ["br"], ["a", { ...node.attrs, href: node.attrs.allLinks[0].href, class: "prosemirror-attribution" }, node.attrs.title], ["br"]] : - node.attrs.allLinks.length === 1 ? - ["a", { ...node.attrs, class: linkids, "data-targetids": targetids, title: `${node.attrs.title}`, href: node.attrs.allLinks[0].href, style: `text-decoration: ${linkids === " " ? "underline" : undefined}` }, 0] : - ["div", { class: "prosemirror-anchor" }, - ["span", { class: "prosemirror-linkBtn" }, - ["a", { ...node.attrs, class: linkids, "data-targetids": targetids, title: `${node.attrs.title}` }, 0], - ["input", { class: "prosemirror-hrefoptions" }], - ], - ["div", { class: "prosemirror-links" }, ...node.attrs.allLinks.map((item: { href: string, title: string }) => - ["a", { class: "prosemirror-dropdownlink", href: item.href }, item.title] - )] - ]; + //node.attrs.allLinks.length === 1 ? + ["a", { ...node.attrs, class: linkids, "data-targetids": targetids, "data-targethrefs": targethrefs, title: `${node.attrs.title}`, href: node.attrs.allLinks[0].href, style: `text-decoration: ${linkids === " " ? "underline" : undefined}` }, 0]; + // ["div", { class: "prosemirror-anchor" }, + // ["span", { class: "prosemirror-linkBtn" }, + // ["a", { ...node.attrs, class: linkids, "data-targetids": targetids, title: `${node.attrs.title}` }, 0], + // ["input", { class: "prosemirror-hrefoptions" }], + // ], + // ["div", { class: "prosemirror-links" }, ...node.attrs.allLinks.map((item: { href: string, title: string }) => + // ["a", { class: "prosemirror-dropdownlink", href: item.href }, item.title] + // )] + // ]; } }, diff --git a/src/client/views/nodes/formattedText/prosemirrorPatches.js b/src/client/views/nodes/formattedText/prosemirrorPatches.js index 0969ea4ef..746c93868 100644 --- a/src/client/views/nodes/formattedText/prosemirrorPatches.js +++ b/src/client/views/nodes/formattedText/prosemirrorPatches.js @@ -146,7 +146,9 @@ function isInSetWithAttrs(mark, set, attrs) { for (var i = 0; i < set.length; i++) { if (set[i].type == mark) { if (Array.from(Object.keys(attrs)).reduce((p, akey) => { - return p && JSON.stringify(set[i].attrs[akey]) === JSON.stringify(attrs[akey]); + if (p && JSON.stringify(set[i].attrs[akey]) === JSON.stringify(attrs[akey])) return true; + set[i].attrs.allLinks = Array.from(set[i].attrs.allLinks).filter(a => !Array.from(attrs.allLinks.map(al => al.targetId)).includes(a.targetId) || !Array.from(attrs.allLinks.map(al => al.linkId).includes(a.linkId))) + return false; }, true)) { return set[i]; } @@ -178,7 +180,7 @@ function removeMarkWithAttrs(tr, from, to, mark, attrs) { var style = toRemove[i], found$1 = (void 0); for (var j = 0; j < matched.length; j++) { var m = matched[j]; - if (m.step == step - 1 && style.eq(matched[j].style)) { found$1 = m; } + if (m.step == step - 1 /*&& style.eq(matched[j].style)*/) { found$1 = m; } // bcz: not sure what this is even trying to do, but style.eq doesn't seem to exist anymore } if (found$1) { found$1.to = end; -- cgit v1.2.3-70-g09d2 From 04ab7a6a6d206014f99b46a6a8771c205cdb079a Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 17 Sep 2020 12:00:15 -0400 Subject: restored template button option for customizing layout but added a Full Toolbar mode to enable it. --- src/client/util/SettingsManager.tsx | 6 ++-- src/client/views/ContextMenu.tsx | 2 +- src/client/views/DocumentButtonBar.tsx | 38 +++++++++++--------- src/client/views/TemplateMenu.tsx | 28 +++++++-------- src/client/views/Templates.tsx | 41 ---------------------- .../views/collections/CollectionTreeView.tsx | 3 +- src/client/views/nodes/DocumentView.tsx | 3 +- .../formattedText/FormattedTextBoxComment.tsx | 2 +- 8 files changed, 42 insertions(+), 81 deletions(-) delete mode 100644 src/client/views/Templates.tsx (limited to 'src/client/util') diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index fc8bc382e..17e93ad17 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -113,9 +113,9 @@ export class SettingsManager extends React.Component<{}> { Doc.UserDoc().showTitle = Doc.UserDoc().showTitle ? undefined : "creationDate"} checked={Doc.UserDoc().showTitle !== undefined} />
-
Alt Buttons
- Doc.UserDoc()["documentLinksButton-hideEnd"] = !Doc.UserDoc()["documentLinksButton-hideEnd"]} - checked={BoolCast(Doc.UserDoc()["documentLinksButton-hideEnd"])} /> +
Full Toolbar
+ Doc.UserDoc()["documentLinksButton-fullMenu"] = !Doc.UserDoc()["documentLinksButton-fullMenu"]} + checked={BoolCast(Doc.UserDoc()["documentLinksButton-fullMenu"])} />
Raise on drag
diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx index 349fd077c..1f7abf61a 100644 --- a/src/client/views/ContextMenu.tsx +++ b/src/client/views/ContextMenu.tsx @@ -233,7 +233,7 @@ export class ContextMenu extends React.Component { - + {this.menuItems} diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index 979b1198a..b155e33ff 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -23,7 +23,6 @@ import { DocumentLinksButton } from './nodes/DocumentLinksButton'; import { DocumentView } from './nodes/DocumentView'; import { GoogleRef } from "./nodes/formattedText/FormattedTextBox"; import { TemplateMenu } from "./TemplateMenu"; -import { Template, Templates } from "./Templates"; import React = require("react"); const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; @@ -255,9 +254,11 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
; } @observable _aliasDown = false; - onAliasButtonDown = (e: React.PointerEvent): void => { + onAliasButtonDown = action((e: React.PointerEvent): void => { + this.props.views()[0]?.select(false); + this._tooltipOpen = false; setupMoveUpEvents(this, e, this.onAliasButtonMoved, emptyFunction, emptyFunction); - } + }) onAliasButtonMoved = () => { if (this._dragRef.current) { const dragDocView = this.view0!; @@ -274,23 +275,28 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV return false; } + _ref = React.createRef(); + @observable _tooltipOpen: boolean = false; @computed get templateButton() { const view0 = this.view0; - const templates: Map = new Map(); + const templates: Map = new Map(); const views = this.props.views(); - Array.from(Object.values(Templates.TemplateList)).map(template => - templates.set(template, views.reduce((checked, doc) => checked || doc?.props.Document["_show" + template.Name] ? true : false, false as boolean))); + Array.from(["Caption", "Title", "TitleHover"]).map(template => + templates.set(template, views.reduce((checked, doc) => checked || doc?.props.Document["_show" + template] ? true : false, false as boolean))); return !view0 ? (null) : -
Tap: Customize layout. Drag: Create alias
}> -
+ CustomizeLayout
} open={this._tooltipOpen} onClose={action(() => this._tooltipOpen = false)} placement="bottom"> +
!this._ref.current?.getBoundingClientRect().width && (this._tooltipOpen = true))} > + this._aliasDown = true)} onClose={action(() => this._aliasDown = false)} - content={!this._aliasDown ? (null) : v).map(v => v as DocumentView)} templates={templates} />}> + content={!this._aliasDown ? (null) :
v).map(v => v as DocumentView)} templates={templates} />
}>
{}
-
; + + ; } openContextMenu = (e: React.MouseEvent) => { @@ -315,13 +321,13 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
- {DocumentLinksButton.StartLink || !Doc.UserDoc()["documentLinksButton-hideEnd"] ?
+ {DocumentLinksButton.StartLink || !Doc.UserDoc()["documentLinksButton-fullMenu"] ?
: (null)} - {/*
+ {!Doc.UserDoc()["documentLinksButton-fullMenu"] ? (null) :
{this.templateButton}
-
+ /*
{this.metadataButton}
@@ -330,7 +336,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
{this.pinButton}
- {!Doc.UserDoc()["documentLinksButton-hideEnd"] ? (null) :
+ {!Doc.UserDoc()["documentLinksButton-fullMenu"] ? (null) :
{this.shareButton}
} {![DocumentType.VID, DocumentType.WEB].includes(StrCast(this.view0.props.Document.type) as DocumentType) ? (null) :
@@ -345,9 +351,9 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
{this.menuButton}
-
+ {/* {Doc.UserDoc().noviceMode ? (null) :
{this.moreButton} -
+
} */}
; } } diff --git a/src/client/views/TemplateMenu.tsx b/src/client/views/TemplateMenu.tsx index c1878115d..cf2118cb2 100644 --- a/src/client/views/TemplateMenu.tsx +++ b/src/client/views/TemplateMenu.tsx @@ -1,10 +1,8 @@ import { action, observable, runInAction, ObservableSet, trace, computed } from "mobx"; import { observer } from "mobx-react"; -import { SelectionManager } from "../util/SelectionManager"; import { undoBatch } from "../util/UndoManager"; import './TemplateMenu.scss'; import { DocumentView } from "./nodes/DocumentView"; -import { Template } from "./Templates"; import React = require("react"); import { Doc, DocListCast } from "../../fields/Doc"; import { Docs, DocUtils, } from "../documents/Documents"; @@ -18,13 +16,13 @@ import { List } from "../../fields/List"; import { TraceMobx } from "../../fields/util"; @observer -class TemplateToggle extends React.Component<{ template: Template, checked: boolean, toggle: (event: React.ChangeEvent, template: Template) => void }> { +class TemplateToggle extends React.Component<{ template: string, checked: boolean, toggle: (event: React.ChangeEvent, template: string) => void }> { render() { if (this.props.template) { return (
  • this.props.toggle(event, this.props.template)} /> - {this.props.template.Name} + {this.props.template}
    • ); } else { @@ -46,7 +44,7 @@ class OtherToggle extends React.Component<{ checked: boolean, name: string, togg export interface TemplateMenuProps { docViews: DocumentView[]; - templates: Map; + templates: Map; } @@ -69,8 +67,8 @@ export class TemplateMenu extends React.Component { @undoBatch @action - toggleTemplate = (event: React.ChangeEvent, template: Template): void => { - this.props.docViews.forEach(d => Doc.Layout(d.layoutDoc)["_show" + template.Name] = event.target.checked ? template.Name.toLowerCase() : ""); + toggleTemplate = (event: React.ChangeEvent, template: string): void => { + this.props.docViews.forEach(d => Doc.Layout(d.layoutDoc)["_show" + template] = event.target.checked ? template.toLowerCase() : ""); } @action @@ -113,21 +111,21 @@ export class TemplateMenu extends React.Component { const firstDoc = this.props.docViews[0].props.Document; const templateName = StrCast(firstDoc.layoutKey, "layout").replace("layout_", ""); const noteTypes = DocListCast(Cast(Doc.UserDoc()["template-notes"], Doc, null)?.data); - const addedTypes = DocListCast(Cast(Doc.UserDoc()["template-buttons"], Doc, null)?.data); + const addedTypes = Doc.UserDoc().noviceMode ? [] : DocListCast(Cast(Doc.UserDoc()["template-buttons"], Doc, null)?.data); const layout = Doc.Layout(firstDoc); const templateMenu: Array = []; - //this.props.templates.forEach((checked, template) => - // templateMenu.push()); - //templateMenu.push(); - templateMenu.push(); + this.props.templates.forEach((checked, template) => + templateMenu.push()); + templateMenu.push(); templateMenu.push(); + !Doc.UserDoc().noviceMode && templateMenu.push(); addedTypes.concat(noteTypes).map(template => template.treeViewChecked = this.templateIsUsed(firstDoc, template)); this._addedKeys && Array.from(this._addedKeys).filter(key => !noteTypes.some(nt => nt.title === key)).forEach(template => templateMenu.push( this.toggleLayout(e, template)} />)); return
      - + {Doc.UserDoc().noviceMode ? (null) : } {templateMenu} - { fieldKey={"data"} moveDocument={returnFalse} removeDocument={returnFalse} - addDocument={returnFalse} /> + addDocument={returnFalse} />}
    ; } } diff --git a/src/client/views/Templates.tsx b/src/client/views/Templates.tsx deleted file mode 100644 index a6dbaa650..000000000 --- a/src/client/views/Templates.tsx +++ /dev/null @@ -1,41 +0,0 @@ -export class Template { - constructor(name: string, layout: string) { - this._name = name; - this._layout = layout; - } - - private _name: string; - private _layout: string; - - get Name(): string { - return this._name; - } - - get Layout(): string { - return this._layout; - } -} - -export namespace Templates { - export const Caption = new Template("Caption", - `
    -
    {layout}
    -
    - -
    -
    ` ); - - export const Title = new Template("Title", - `
    -
    - {props.Document.title} -
    -
    -
    {layout}
    -
    -
    ` ); - export const TitleHover = new Template("TitleHover", Title.Layout); - - export const TemplateList: Template[] = [Title, TitleHover, Caption]; -} - diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index e8944a5eb..19b8400c8 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -22,7 +22,6 @@ import { EditableView } from "../EditableView"; import { ContentFittingDocumentView } from '../nodes/ContentFittingDocumentView'; import { DocumentView } from '../nodes/DocumentView'; import { KeyValueBox } from '../nodes/KeyValueBox'; -import { Templates } from '../Templates'; import { CollectionSubView } from "./CollectionSubView"; import "./CollectionTreeView.scss"; import { CollectionViewType, CollectionView } from './CollectionView'; @@ -185,7 +184,7 @@ class TreeView extends React.Component { } public static makeTextBullet() { - const bullet = Docs.Create.TextDocument("-text-", { title: "-title-", _viewType: CollectionViewType.Tree, hideLinkButton: true, _showSidebar: true, treeViewOutlineMode: true, x: 0, y: 0, _xMargin: 0, _yMargin: 0, _autoHeight: true, _singleLine: true, _backgroundColor: "transparent", _width: 1000, _height: 10, templates: new List([Templates.Title.Layout]) }); + const bullet = Docs.Create.TextDocument("-text-", { title: "-title-", _viewType: CollectionViewType.Tree, hideLinkButton: true, _showSidebar: true, treeViewOutlineMode: true, x: 0, y: 0, _xMargin: 0, _yMargin: 0, _autoHeight: true, _singleLine: true, _backgroundColor: "transparent", _width: 1000, _height: 10 }); Doc.GetProto(bullet).layout = CollectionView.LayoutString("data"); Doc.GetProto(bullet).title = ComputedField.MakeFunction('self.text?.Text'); Doc.GetProto(bullet).data = new List([]); diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 0b4f45dd6..7ff8b635c 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -118,7 +118,7 @@ export class DocumentView extends DocComponent(Docu private get active() { return SelectionManager.IsSelected(this, true) || this.props.parentActive(true); } public get displayName() { return "DocumentView(" + this.props.Document.title + ")"; } // this makes mobx trace() statements more descriptive public get ContentDiv() { return this._mainCont.current; } - public get LayoutFieldKey() { return StrCast(this.props.layoutKey, Doc.LayoutFieldKey(this.layoutDoc)); } + public get LayoutFieldKey() { return this.props.layoutKey || Doc.LayoutFieldKey(this.layoutDoc); } @computed get ShowTitle() { return StrCast(this.layoutDoc._showTitle, !Doc.IsSystem(this.layoutDoc) && this.rootDoc.type === DocumentType.RTF && !this.props.treeViewDoc ? @@ -855,7 +855,6 @@ export class DocumentView extends DocComponent(Docu moreItems.push({ description: "Write Back Link to Album", event: () => GooglePhotos.Transactions.AddTextEnrichment(this.props.Document), icon: "caret-square-right" }); } moreItems.push({ description: "Copy ID", event: () => Utils.CopyText(Utils.prepend("/doc/" + this.props.Document[Id])), icon: "fingerprint" }); - Doc.AreProtosEqual(this.props.Document, Cast(Doc.UserDoc().myUserDoc, Doc, null)) && moreItems.push({ description: "Toggle Alternate Button Bar", event: () => Doc.UserDoc()["documentLinksButton-hideEnd"] = !Doc.UserDoc()["documentLinksButton-hideEnd"], icon: "eye" }); } } diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx index 47150c51a..f015d329c 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx @@ -110,7 +110,7 @@ export class FormattedTextBoxComment { if (FormattedTextBoxComment._deleteRef?.contains(e.target as any)) { this.deleteLink(); } else if (FormattedTextBoxComment._nextRef?.contains(e.target as any)) { - FormattedTextBoxComment.showPreview(FormattedTextBoxComment._lastView!, FormattedTextBoxComment._lastState, FormattedTextBoxComment._hrefs?.[(++FormattedTextBoxComment._hrefInd) % FormattedTextBoxComment._hrefs?.length]) + FormattedTextBoxComment.showPreview(FormattedTextBoxComment._lastView!, FormattedTextBoxComment._lastState, FormattedTextBoxComment._hrefs?.[(++FormattedTextBoxComment._hrefInd) % FormattedTextBoxComment._hrefs?.length]); } else { FormattedTextBoxComment.linkDoc = undefined; if (linkDoc.type !== DocumentType.LINK) { -- cgit v1.2.3-70-g09d2