From 7c619e7cd6f919536422d12eb67c0da267186759 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sun, 2 Aug 2020 19:23:14 -0400 Subject: made fontFamily and fontSize active settings on user doc. made alignment settings on rich text make field non-empty. all to start allowing for better template styles. --- src/client/views/nodes/formattedText/RichTextMenu.tsx | 6 ++++++ src/fields/RichTextField.ts | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx index 757459253..863c9d787 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.tsx +++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx @@ -436,10 +436,16 @@ export default class RichTextMenu extends AntimodeMenu { } changeFontSize = (mark: Mark, view: EditorView) => { + if ((this.view?.state.selection.$from.pos || 0) < 2) { + this.TextView.layoutDoc._fontSize = mark.attrs.fontSize; + } this.setMark(view.state.schema.marks.pFontSize.create({ fontSize: mark.attrs.fontSize }), view.state, view.dispatch, true); } changeFontFamily = (mark: Mark, view: EditorView) => { + if ((this.view?.state.selection.$from.pos || 0) < 2) { + this.TextView.layoutDoc._fontFamily = mark.attrs.family; + } this.setMark(view.state.schema.marks.pFontFamily.create({ family: mark.attrs.family }), view.state, view.dispatch, true); } diff --git a/src/fields/RichTextField.ts b/src/fields/RichTextField.ts index 5cf0e0cc3..2ca5ac082 100644 --- a/src/fields/RichTextField.ts +++ b/src/fields/RichTextField.ts @@ -20,7 +20,7 @@ export class RichTextField extends ObjectField { } Empty() { - return !(this.Text || this.Data.toString().includes("dashField")); + return !(this.Text || this.Data.toString().includes("dashField") || this.Data.toString().includes("align")); } [Copy]() { -- cgit v1.2.3-70-g09d2 From 36f9a30619416e2cbef93bddd045ed262f9fe4fa Mon Sep 17 00:00:00 2001 From: bobzel Date: Sun, 2 Aug 2020 22:05:11 -0400 Subject: changed server printout again. --- src/server/websocket.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/server/websocket.ts b/src/server/websocket.ts index 9e6ea8640..33985bb71 100644 --- a/src/server/websocket.ts +++ b/src/server/websocket.ts @@ -208,12 +208,12 @@ export namespace WebSocket { } function GetRefField([id, callback]: [string, (result?: Transferable) => void]) { - process.stdout.write(`…`) + process.stdout.write(`.`); Database.Instance.getDocument(id, callback); } function GetRefFields([ids, callback]: [string[], (result?: Transferable[]) => void]) { - console.log(green(`> ${ids.length} fields`)); + process.stdout.write(`${ids.length}…`); Database.Instance.getDocuments(ids, callback); } -- cgit v1.2.3-70-g09d2 From 6ab1be67787779c8a6b26f9fbb058a8ccc973fa6 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 3 Aug 2020 02:30:28 -0400 Subject: cleaned up fonticonbox --- src/client/documents/DocumentTypes.ts | 1 - src/client/documents/Documents.ts | 2 +- src/client/util/CurrentUserUtils.ts | 42 +++++----- src/client/views/MainView.tsx | 51 ++++++------- .../views/collections/CollectionLinearView.tsx | 2 +- src/client/views/collections/CollectionMenu.tsx | 2 +- src/client/views/collections/CollectionSubView.tsx | 8 +- .../views/nodes/ContentFittingDocumentView.tsx | 3 - src/client/views/nodes/FontIconBox.scss | 89 +++++++++------------- src/client/views/nodes/FontIconBox.tsx | 60 ++++----------- 10 files changed, 101 insertions(+), 159 deletions(-) (limited to 'src') diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts index 659f78970..985fcce11 100644 --- a/src/client/documents/DocumentTypes.ts +++ b/src/client/documents/DocumentTypes.ts @@ -13,7 +13,6 @@ export enum DocumentType { INK = "ink", // ink stroke SCREENSHOT = "screenshot", // view of a desktop application FONTICON = "fonticonbox", // font icon - MENUICON = "menuiconbox", QUERY = "query", // search query LABEL = "label", // simple text label BUTTON = "button", // onClick button diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 300af4e50..92942bd58 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -151,7 +151,7 @@ export interface DocumentOptions { annotationOn?: Doc; removeDropProperties?: List; // list of properties that should be removed from a document when it is dropped. e.g., a creator button may be forceActive to allow it be dragged, but the forceActive property can be removed from the dropped document dbDoc?: Doc; - menuIcon?: boolean; // if the font icon box is in the menu + iconShape?: string; // shapes of the fonticon border linkRelationship?: string; // type of relatinoship a link represents ischecked?: ScriptField; // returns whether a font icon box is checked activeInkPen?: Doc; // which pen document is currently active (used as the radio button state for the 'unhecked' pen tool scripts) diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 7b6868f73..abedb2cd2 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -42,13 +42,11 @@ export class CurrentUserUtils { @observable public static libraryBtn: any | undefined; @observable public static searchBtn: any | undefined; - @observable public static toolsStack: any | undefined; - @observable public static workspaceStack: any | undefined; - @observable public static catalogStack: any | undefined; - @observable public static closedStack: any | undefined; - @observable public static searchStack: any | undefined; - - @observable public static selectedPanel: string = "none"; + @observable public static toolsStack: Doc | undefined; + @observable public static workspaceStack: Doc | undefined; + @observable public static catalogStack: Doc | undefined; + @observable public static closedStack: Doc | undefined; + @observable public static searchStack: Doc | undefined; // sets up the default User Templates - slideView, queryView, descriptionView static setupUserTemplateButtons(doc: Doc) { @@ -441,7 +439,7 @@ export class CurrentUserUtils { { toolTip: "Drag a collection", title: "Col", icon: "folder", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc }, { toolTip: "Drag a web page", title: "Web", icon: "globe-asia", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyWebpage as Doc }, { toolTip: "Drag a cat image", title: "Image", icon: "cat", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyImage as Doc }, - { toolTip: "Drag a comparison box", title: "Comp", icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc }, + { toolTip: "Drag a comparison box", title: "Compare", icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc }, { toolTip: "Drag a screengrabber", title: "Grab", icon: "photo-video", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScreenshot as Doc }, // { title: "Drag a webcam", title: "Cam", icon: "video", ignoreClick: true, drag: 'Docs.Create.WebCamDocument("", { _width: 400, _height: 400, title: "a test cam" })' }, { toolTip: "Drag a audio recorder", title: "Audio", icon: "microphone", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyAudio as Doc }, @@ -477,7 +475,7 @@ export class CurrentUserUtils { } const buttons = CurrentUserUtils.creatorBtnDescriptors(doc).filter(d => !alreadyCreatedButtons?.includes(d.title)); const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag, click, ischecked, activeInkPen, backgroundColor, dragFactory }) => Docs.Create.FontIconDocument({ - _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100, + _nativeWidth: 50, _nativeHeight: 50, _width: 50, _height: 50, icon, title, toolTip, @@ -508,14 +506,14 @@ export class CurrentUserUtils { title: string, icon: string, click: string, }[] { return [ - { title: "Workspace", icon: "desktop", click: 'scriptContext.selectMenu("Workspace")' }, - { title: "Catalog", icon: "file", click: 'scriptContext.selectMenu("Catalog")' }, - { title: "Archive", icon: "archive", click: 'scriptContext.selectMenu("Archive")' }, - { title: "Import", icon: "upload", click: 'scriptContext.selectMenu("Import")' }, - { title: "Sharing", icon: "users", click: 'scriptContext.selectMenu("Sharing")' }, - { title: "Tools", icon: "wrench", click: 'scriptContext.selectMenu("Tools")' }, - { title: "Help", icon: "question-circle", click: 'scriptContext.selectMenu("Help")' }, - { title: "Settings", icon: "cog", click: 'scriptContext.selectMenu("Settings")' }, + { title: "Workspace", icon: "desktop", click: 'scriptContext.selectMenu(self, "Workspace")' }, + { title: "Catalog", icon: "file", click: 'scriptContext.selectMenu(self, "Catalog")' }, + { title: "Archive", icon: "archive", click: 'scriptContext.selectMenu(self, "Archive")' }, + { title: "Import", icon: "upload", click: 'scriptContext.selectMenu(self, "Import")' }, + { title: "Sharing", icon: "users", click: 'scriptContext.selectMenu(self, "Sharing")' }, + { title: "Tools", icon: "wrench", click: 'scriptContext.selectMenu(self, "Tools")' }, + { title: "Help", icon: "question-circle", click: 'scriptContext.selectMenu(self, "Help")' }, + { title: "Settings", icon: "cog", click: 'scriptContext.selectMenu(self, "Settings")' }, ]; } @@ -524,10 +522,11 @@ export class CurrentUserUtils { const buttons = CurrentUserUtils.menuBtnDescriptions(); const menuBtns = buttons.map(({ title, icon, click }) => Docs.Create.FontIconDocument({ icon, - menuIcon: true, + iconShape: "square", title, _backgroundColor: "black", stayInCollection: true, + childDropAction: "same", _width: 60, _height: 60, onClick: ScriptField.MakeScript(click, { scriptContext: "any" }), @@ -535,6 +534,7 @@ export class CurrentUserUtils { doc.menuStack = new PrefetchProxy(Docs.Create.StackingDocument(menuBtns, { title: "menuItemPanel", + dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), _backgroundColor: "black", _gridGap: 0, _yMargin: 0, @@ -678,7 +678,7 @@ export class CurrentUserUtils { CurrentUserUtils.toolsStack = toolsStack; doc["tabs-button-tools"] = new PrefetchProxy(Docs.Create.ButtonDocument({ - _width: 35, _height: 25, title: "Tools", _fontSize: "10pt", + _width: 35, _height: 25, title: "Tools", _fontSize: "10pt", color: "black", letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)", sourcePanel: toolsStack, onDragStart: ScriptField.MakeFunction('getCopy(this.dragFactory, true)'), @@ -773,7 +773,7 @@ export class CurrentUserUtils { lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" })) as any as Doc; doc["tabs-button-library"] = new PrefetchProxy(Docs.Create.ButtonDocument({ - _width: 50, _height: 25, title: "Library", _fontSize: "10pt", targetDropAction: "same", + _width: 50, _height: 25, title: "Library", _fontSize: "10pt", targetDropAction: "same", color: "black", letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)", sourcePanel: libraryStack, onDragStart: ScriptField.MakeFunction('getCopy(this.dragFactory, true)'), @@ -792,7 +792,7 @@ export class CurrentUserUtils { doc["tabs-button-search"] = undefined; if (doc["tabs-button-search"] === undefined) { doc["tabs-button-search"] = new PrefetchProxy(Docs.Create.ButtonDocument({ - _width: 50, _height: 25, title: "Search", _fontSize: "10pt", + _width: 50, _height: 25, title: "Search", _fontSize: "10pt", color: "black", letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)", sourcePanel: new PrefetchProxy(Docs.Create.QueryDocument({ title: "search stack", })) as any as Doc, searchFileTypes: new List([DocumentType.RTF, DocumentType.IMG, DocumentType.PDF, DocumentType.VID, DocumentType.WEB, DocumentType.SCRIPTING]), diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index c83aeee25..d535f0d1b 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -314,7 +314,7 @@ export class MainView extends React.Component { if (this.panelContent === doc?.title) return "lightgrey"; if (this.darkScheme) { switch (doc?.type) { - case DocumentType.MENUICON: return "white"; + case DocumentType.FONTICON: return "white"; case DocumentType.RTF || DocumentType.LABEL || DocumentType.BUTTON: return "#2d2d2d"; case DocumentType.LINK: case DocumentType.COL: { @@ -324,7 +324,7 @@ export class MainView extends React.Component { } } else { switch (doc?.type) { - case DocumentType.MENUICON: return "black"; + case DocumentType.FONTICON: return "black"; case DocumentType.RTF: return "#f1efeb"; case DocumentType.BUTTON: case DocumentType.LABEL: return "lightgray"; @@ -388,16 +388,10 @@ export class MainView extends React.Component { setupMoveUpEvents(this, e, action((e: PointerEvent) => { this.flyoutWidth = Math.max(e.clientX, 0); this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30; - if (this.flyoutWidth === 0) { - CurrentUserUtils.selectedPanel = "none"; - } return false; }), emptyFunction, action(() => { this.flyoutWidth = this.flyoutWidth < 15 ? 250 : 0; this.flyoutWidth && (this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30); - if (this.flyoutWidth === 0) { - CurrentUserUtils.selectedPanel = "none"; - } })); } } @@ -454,7 +448,7 @@ export class MainView extends React.Component { } @computed get menuPanel() { - + setTimeout(() => DocListCast((Doc.UserDoc().menuStack as Doc).data).forEach(action(doc => { doc.color = "white"; doc._backgroundColor = ""; })), 0); return
60} PanelHeight={this.getContentsHeight} @@ -490,37 +484,37 @@ export class MainView extends React.Component { @action @undoBatch closeFlyout = () => { - CurrentUserUtils.selectedPanel = "none"; this.panelContent = "none"; this.flyoutWidth = 0; } get groupManager() { return GroupManager.Instance; } + _lastButton: Doc | undefined; @action @undoBatch - selectMenu = (str: string) => { + selectMenu = (button: Doc, str: string) => { + this._lastButton && (this._lastButton.color = "white"); + this._lastButton && (this._lastButton._backgroundColor = ""); if (this.panelContent === str && this.flyoutWidth !== 0) { - CurrentUserUtils.selectedPanel = "none"; this.panelContent = "none"; this.flyoutWidth = 0; } else { - this.panelContent = str; - CurrentUserUtils.selectedPanel = str; - switch (this.panelContent) { - case "Tools": this.sidebarContent.proto = CurrentUserUtils.toolsStack; break; - case "Workspace": this.sidebarContent.proto = CurrentUserUtils.workspaceStack; break; - case "Catalog": this.sidebarContent.proto = CurrentUserUtils.catalogStack; break; - case "Archive": this.sidebarContent.proto = CurrentUserUtils.closedStack; break; - case "Settings": this.sidebarContent.proto = SettingsManager.Instance.open(); break; - case "Sharing": this.sidebarContent.proto = GroupManager.Instance.open(); break; + let panelDoc: Doc | undefined; + switch (this.panelContent = str) { + case "Tools": panelDoc = CurrentUserUtils.toolsStack; break; + case "Workspace": panelDoc = CurrentUserUtils.workspaceStack; break; + case "Catalog": panelDoc = CurrentUserUtils.catalogStack; break; + case "Archive": panelDoc = CurrentUserUtils.closedStack; break; + case "Settings": SettingsManager.Instance.open(); break; + case "Sharing": GroupManager.Instance.open(); break; } - if (str === "Settings" || str === "Sharing" || str === "Help" || str === "Import") { - CurrentUserUtils.selectedPanel = "none"; - this.panelContent = "none"; - this.flyoutWidth = 0; - } else { + this.sidebarContent.proto = panelDoc; + if (panelDoc) { MainView.expandFlyout(); - } + button._backgroundColor = "lightgrey"; + button.color = "black"; + this._lastButton = button; + } else this.flyoutWidth = 0; } return true; } @@ -640,6 +634,7 @@ export class MainView extends React.Component { fieldKey={"data"} dropAction={"alias"} annotationsKey={""} + backgroundColor={this.defaultBackgroundColors} rootSelected={returnTrue} bringToFront={emptyFunction} select={emptyFunction} diff --git a/src/client/views/collections/CollectionLinearView.tsx b/src/client/views/collections/CollectionLinearView.tsx index 3b31947f7..a9e812ad3 100644 --- a/src/client/views/collections/CollectionLinearView.tsx +++ b/src/client/views/collections/CollectionLinearView.tsx @@ -161,7 +161,7 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) { PanelHeight={nested ? pair.layout[HeightSym] : () => this.dimension()} renderDepth={this.props.renderDepth + 1} focus={emptyFunction} - backgroundColor={returnEmptyString} + backgroundColor={this.props.backgroundColor} parentActive={returnTrue} whenActiveChanged={emptyFunction} bringToFront={emptyFunction} diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 59e6ac7ff..47ff9ec40 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -331,7 +331,7 @@ export class CollectionViewBaseChrome extends React.Component {this.props.type === CollectionViewType.Invalid || this.props.type === CollectionViewType.Docking || this.isText ? (null) : this.viewModes} - {this.props.type === CollectionViewType.Docking || this.isText ? (null) : this.templateChrome} + {this.props.type === CollectionViewType.Docking || (this.isText && Doc.UserDoc().noviceMode) ? (null) : this.templateChrome} {Doc.UserDoc().noviceMode ? (null) :
; - - return menuBTN; - } else { - const referenceDoc = (this.layoutDoc.dragFactory instanceof Doc ? this.layoutDoc.dragFactory : this.layoutDoc); - const refLayout = Doc.Layout(referenceDoc); - const button = ; - return !this.layoutDoc.toolTip ? button : - {StrCast(this.layoutDoc.toolTip)}
}> - {button} - ; - } - + + ; + return !this.layoutDoc.toolTip ? button : + {StrCast(this.layoutDoc.toolTip)}}> + {button} + ; } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 1749944379d80acf0429a3662e3254f2e1e2f087 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 3 Aug 2020 02:44:46 -0400 Subject: fixed warnings about missing keys in colleciton Menu --- src/client/views/collections/CollectionMenu.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 05fe84f86..ec3b3dc0c 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -77,8 +77,8 @@ export default class CollectionMenu extends AntimodeMenu { } render() { - const button = Pin Menu} placement="bottom"> - ; @@ -86,7 +86,7 @@ export default class CollectionMenu extends AntimodeMenu { const propIcon = CurrentUserUtils.propertiesWidth > 0 ? "angle-double-right" : "angle-double-left"; const propTitle = CurrentUserUtils.propertiesWidth > 0 ? "Close Properties Panel" : "Open Properties Panel"; - const prop = {propTitle}} placement="bottom"> + const prop = {propTitle}} key="properties" placement="bottom"> ; @@ -372,7 +371,7 @@ export class CollectionViewBaseChrome extends React.ComponentToggle Overlay Layer} placement="bottom"> @@ -451,10 +450,6 @@ export class CollectionFreeFormViewChrome extends React.Component {this._draw.map((icon, i) => - {this._title[i]}} placement="bottom"> + {this._title[i]}} placement="bottom"> )} ; @@ -594,53 +587,55 @@ export class CollectionFreeFormViewChrome extends React.Component - {this.props.docView.props.renderDepth !== 0 || this.isText ? (null) : Toggle Mini Map} placement="bottom"> -
- -
- - } - {!!!this.isText ? Back Frame} placement="bottom"> -
- -
- : null} - {!!!this.isText ? Toggle View All} placement="bottom"> -
this.document.editing = !this.document.editing)} > - {NumCast(this.document.currentFrame)} -
- : null} - {!!!this.isText ? Forward Frame} placement="bottom"> -
- -
- : null} - - {!this.props.isOverlay || this.document.type !== DocumentType.WEB || this.isText ? (null) : - Use Hypothesis} placement="bottom"> - - - } - {(!this.props.isOverlay || this.props.docView.layoutDoc.isAnnotating) && !this.isText ? - <> - {this.drawButtons} - {this.widthPicker} - {this.colorPicker} - {this.fillPicker} - : - (null) - } - {this.isText ? : null} - ; + return !this.props.docView.layoutDoc ? (null) : +
+ {this.props.docView.props.renderDepth !== 0 || this.isText ? (null) : + Toggle Mini Map
} placement="bottom"> +
+ +
+ + } + {!this.isText ? Back Frame} placement="bottom"> +
+ +
+ : null} + {!this.isText ? Toggle View All} placement="bottom"> +
this.document.editing = !this.document.editing)} > + {NumCast(this.document.currentFrame)} +
+ : null} + {!this.isText ? Forward Frame} placement="bottom"> +
+ +
+ : null} + + {!this.props.isOverlay || this.document.type !== DocumentType.WEB || this.isText ? (null) : + Use Hypothesis} placement="bottom"> + + + } + {(!this.props.isOverlay || this.props.docView.layoutDoc.isAnnotating) && !this.isText ? + <> + {this.drawButtons} + {this.widthPicker} + {this.colorPicker} + {this.fillPicker} + : + (null) + } + {this.isText ? : null} + ; } } @observer diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx index d7b6da52e..6e268be48 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.tsx +++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx @@ -800,7 +800,9 @@ export default class RichTextMenu extends AntimodeMenu { const link = this.currentLink ? this.currentLink : ""; const button = set hyperlink} placement="bottom"> -
+ ; const dropdownContent = @@ -1056,10 +1058,10 @@ export class ButtonDropdown extends React.Component { render() { return (
this.ref = node}> - +
+
{this.showDropdown ? this.props.dropdownContent : (null)} ); diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts index 6d01785aa..f4505d475 100644 --- a/src/fields/Doc.ts +++ b/src/fields/Doc.ts @@ -409,7 +409,7 @@ export namespace Doc { // and returns the document who's proto is undefined or whose proto is marked as a base prototype ('isPrototype'). export function GetProto(doc: Doc): Doc { if (doc instanceof Promise) { - console.log("GetProto: error: got Promise insead of Doc"); + console.log("GetProto: warning: got Promise insead of Doc"); } const proto = doc && (Doc.GetT(doc, "isPrototype", "boolean", true) ? doc : (doc.proto || doc)); return proto === doc ? proto : Doc.GetProto(proto); -- cgit v1.2.3-70-g09d2 From 9d2204b09a88315f4bb294dce3043a87e14ae45f Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 3 Aug 2020 10:41:51 -0400 Subject: cleaned up currentUserUtils --- src/client/util/CurrentUserUtils.ts | 173 ++++++++++++------------------------ src/client/views/MainView.tsx | 20 ++--- 2 files changed, 63 insertions(+), 130 deletions(-) (limited to 'src') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 5a5f6c1a2..cce853b2d 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -12,7 +12,7 @@ import { Cast, PromiseValue, StrCast, NumCast } from "../../fields/Types"; import { nullAudio } from "../../fields/URLField"; import { DragManager } from "./DragManager"; import { Scripting } from "./Scripting"; -import { CollectionViewType } from "../views/collections/CollectionView"; +import { CollectionViewType, CollectionView } from "../views/collections/CollectionView"; import { makeTemplate } from "./DropConverter"; import { RichTextField } from "../../fields/RichTextField"; import { PrefetchProxy } from "../../fields/Proxy"; @@ -38,16 +38,6 @@ export class CurrentUserUtils { @observable public static GuestWorkspace: Doc | undefined; @observable public static GuestMobile: Doc | undefined; - @observable public static toolsBtn: any | undefined; - @observable public static libraryBtn: any | undefined; - @observable public static searchBtn: any | undefined; - - @observable public static toolsStack: Doc | undefined; - @observable public static workspaceStack: Doc | undefined; - @observable public static catalogStack: Doc | undefined; - @observable public static closedStack: Doc | undefined; - @observable public static searchStack: Doc | undefined; - @observable public static propertiesWidth: number = 0; // sets up the default User Templates - slideView, queryView, descriptionView @@ -516,6 +506,7 @@ export class CurrentUserUtils { { title: "Tools", icon: "wrench", click: 'scriptContext.selectMenu(self, "Tools")' }, { title: "Help", icon: "question-circle", click: 'scriptContext.selectMenu(self, "Help")' }, { title: "Settings", icon: "cog", click: 'scriptContext.selectMenu(self, "Settings")' }, + { title: "User Doc", icon: "address-card", click: 'scriptContext.selectMenu(self, "UserDoc")' }, ]; } @@ -533,6 +524,9 @@ export class CurrentUserUtils { _height: 60, onClick: ScriptField.MakeScript(click, { scriptContext: "any" }), })); + const userDoc = menuBtns[menuBtns.length - 1]; + userDoc.target = doc; + userDoc.hidden = ComputedField.MakeFunction("self.target.noviceMode"); doc.menuStack = new PrefetchProxy(Docs.Create.StackingDocument(menuBtns, { title: "menuItemPanel", @@ -645,10 +639,6 @@ export class CurrentUserUtils { return Cast(userDoc.thumbDoc, Doc); } - static setupLibrary(userDoc: Doc) { - return CurrentUserUtils.setupWorkspaces(userDoc); - } - // setup the Creator button which will display the creator panel. This panel will include the drag creators and the color picker. // when clicked, this panel will be displayed in the target container (ie, sidebarContainer) static async setupToolsBtnPanel(doc: Doc, sidebarContainer: Doc) { @@ -672,29 +662,13 @@ export class CurrentUserUtils { doc.myColorPicker = new PrefetchProxy(color); } - if (doc["tabs-button-tools"] === undefined) { + if (doc["sidebar-tools"] === undefined) { const toolsStack = new PrefetchProxy(Docs.Create.StackingDocument([doc.myCreators as Doc, doc.myColorPicker as Doc], { - _width: 500, lockedPosition: true, _chromeStatus: "disabled", hideFilterView: true, title: "tools stack", forceActive: true + title: "sidebar-tools", _width: 500, lockedPosition: true, _chromeStatus: "disabled", hideFilterView: true, forceActive: true })) as any as Doc; - CurrentUserUtils.toolsStack = toolsStack; - - doc["tabs-button-tools"] = new PrefetchProxy(Docs.Create.ButtonDocument({ - _width: 35, _height: 25, title: "Tools", _fontSize: "10pt", color: "black", - letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)", - sourcePanel: toolsStack, - onDragStart: ScriptField.MakeFunction('getCopy(this.dragFactory, true)'), - dragFactory: toolsStack, - removeDropProperties: new List(["lockedPosition"]), - stayInCollection: true, - hideFilterView: true, - targetContainer: new PrefetchProxy(sidebarContainer) as any as Doc, - onClick: ScriptField.MakeScript("this.targetContainer.proto = this.sourcePanel"), - })); + doc["sidebar-tools"] = toolsStack; } - (doc["tabs-button-tools"] as any as Doc).sourcePanel; // prefetch sourcePanel - - return doc["tabs-button-tools"] as any as Doc; } static setupWorkspaces(doc: Doc) { @@ -705,20 +679,21 @@ export class CurrentUserUtils { title: "WORKSPACES", _height: 100, forceActive: true, boxShadow: "0 0", lockedPosition: true, treeViewOpen: true, })); } - const newWorkspace = ScriptField.MakeScript(`createNewWorkspace()`); - (doc.myWorkspaces as Doc).contextMenuScripts = new List([newWorkspace!]); - (doc.myWorkspaces as Doc).contextMenuLabels = new List(["Create New Workspace"]); - - const workspaces = doc.myWorkspaces as Doc; + if (doc["sidebar-workspaces"] === undefined) { + const newWorkspace = ScriptField.MakeScript(`createNewWorkspace()`); + (doc.myWorkspaces as Doc).contextMenuScripts = new List([newWorkspace!]); + (doc.myWorkspaces as Doc).contextMenuLabels = new List(["Create New Workspace"]); - CurrentUserUtils.workspaceStack = new PrefetchProxy(Docs.Create.TreeDocument([workspaces], { - title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", - treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, treeViewOpen: true, - lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" - })) as any as Doc; + const workspaces = doc.myWorkspaces as Doc; - return doc.myWorkspaces as Doc; + doc["sidebar-workspaces"] = new PrefetchProxy(Docs.Create.TreeDocument([workspaces], { + treeViewHideTitle: true, _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", + treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, treeViewOpen: true, + lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" + })) as any as Doc; + } } + static setupCatalog(doc: Doc) { doc.myCatalog === undefined; if (doc.myCatalog === undefined) { @@ -728,15 +703,16 @@ export class CurrentUserUtils { })); } - const catalog = doc.myCatalog as Doc; + if (doc["sidebar-catalog"] === undefined) { + const catalog = doc.myCatalog as Doc; - CurrentUserUtils.catalogStack = new PrefetchProxy(Docs.Create.TreeDocument([catalog], { - title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", - treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, treeViewOpen: true, - lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" - })) as any as Doc; - - return doc.myCatalog as Doc; + doc["sidebar-catalog"] = new PrefetchProxy(Docs.Create.TreeDocument([catalog], { + title: "sidebar-catalog", + treeViewHideTitle: true, _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", + treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, treeViewOpen: true, + lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" + })) as any as Doc; + } } static setupRecentlyClosed(doc: Doc) { // setup Recently Closed library item @@ -748,90 +724,51 @@ export class CurrentUserUtils { } // this is equivalent to using PrefetchProxies to make sure the recentlyClosed doc is ready PromiseValue(Cast(doc.myRecentlyClosed, Doc)).then(recent => recent && PromiseValue(recent.data).then(DocListCast)); - const clearAll = ScriptField.MakeScript(`self.data = new List([])`); - (doc.myRecentlyClosed as Doc).contextMenuScripts = new List([clearAll!]); - (doc.myRecentlyClosed as Doc).contextMenuLabels = new List(["Clear All"]); + if (doc["sidebar-recentlyClosed"] === undefined) { + const clearAll = ScriptField.MakeScript(`self.data = new List([])`); + (doc.myRecentlyClosed as Doc).contextMenuScripts = new List([clearAll!]); + (doc.myRecentlyClosed as Doc).contextMenuLabels = new List(["Clear All"]); - const recentlyClosed = doc.myRecentlyClosed as Doc; + const recentlyClosed = doc.myRecentlyClosed as Doc; - CurrentUserUtils.closedStack = new PrefetchProxy(Docs.Create.TreeDocument([recentlyClosed], { - title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", - treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, treeViewOpen: true, - lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" - })) as any as Doc; - - return doc.myRecentlyClosed as Doc; - } - // setup the Library button which will display the library panel. This panel includes a collection of workspaces, documents, and recently closed views - static setupLibraryPanel(doc: Doc, sidebarContainer: Doc) { - const workspaces = CurrentUserUtils.setupWorkspaces(doc); - const documents = CurrentUserUtils.setupCatalog(doc); - const recentlyClosed = CurrentUserUtils.setupRecentlyClosed(doc); - - if (doc["tabs-button-library"] === undefined) { - const libraryStack = new PrefetchProxy(Docs.Create.TreeDocument([workspaces, documents, recentlyClosed, doc], { - title: "Library", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", - treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, + doc["sidebar-recentlyClosed"] = new PrefetchProxy(Docs.Create.TreeDocument([recentlyClosed], { + title: "sidebar-recentlyClosed", + treeViewHideTitle: true, _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias", + treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, treeViewOpen: true, lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" })) as any as Doc; - doc["tabs-button-library"] = new PrefetchProxy(Docs.Create.ButtonDocument({ - _width: 50, _height: 25, title: "Library", _fontSize: "10pt", targetDropAction: "same", color: "black", - letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)", - sourcePanel: libraryStack, - onDragStart: ScriptField.MakeFunction('getCopy(this.dragFactory, true)'), - dragFactory: libraryStack, - removeDropProperties: new List(["lockedPosition"]), - stayInCollection: true, - targetContainer: new PrefetchProxy(sidebarContainer) as any as Doc, - onClick: ScriptField.MakeScript("this.targetContainer.proto = this.sourcePanel") - })); } - return doc["tabs-button-library"] as Doc; } - - // setup the Search button which will display the search panel. - static setupSearchBtnPanel(doc: Doc, sidebarContainer: Doc) { - doc["tabs-button-search"] = undefined; - if (doc["tabs-button-search"] === undefined) { - doc["tabs-button-search"] = new PrefetchProxy(Docs.Create.ButtonDocument({ - _width: 50, _height: 25, title: "Search", _fontSize: "10pt", color: "black", - letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)", - sourcePanel: new PrefetchProxy(Docs.Create.QueryDocument({ title: "search stack", })) as any as Doc, - searchFileTypes: new List([DocumentType.RTF, DocumentType.IMG, DocumentType.PDF, DocumentType.VID, DocumentType.WEB, DocumentType.SCRIPTING]), - targetContainer: new PrefetchProxy(sidebarContainer) as any as Doc, - lockedPosition: true, - onClick: ScriptField.MakeScript("this.targetContainer.proto = this.sourcePanel") - })); - CurrentUserUtils.searchStack = new PrefetchProxy(Docs.Create.QueryDocument({ title: "search stack", })) as any as Doc; + static setupUserDoc(doc: Doc) { + if (doc["sidebar-userDoc"] === undefined) { + doc.treeViewOpen = true; + doc.treeViewExpandedView = "fields"; + doc["sidebar-userDoc"] = new PrefetchProxy(Docs.Create.TreeDocument([doc], { + treeViewHideTitle: true, _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, title: "sidebar-userDoc", + treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, + lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same" + })) as any as Doc; } - return doc["tabs-button-search"] as any as Doc; } static setupSidebarContainer(doc: Doc) { - if (doc["tabs-panelContainer"] === undefined) { + if (doc["sidebar"] === undefined) { const sidebarContainer = new Doc(); sidebarContainer._chromeStatus = "disabled"; sidebarContainer.onClick = ScriptField.MakeScript("freezeSidebar()"); - doc["tabs-panelContainer"] = new PrefetchProxy(sidebarContainer); + doc["sidebar"] = new PrefetchProxy(sidebarContainer); } - return doc["tabs-panelContainer"] as Doc; + return doc["sidebar"] as Doc; } // setup the list of sidebar mode buttons which determine what is displayed in the sidebar static async setupSidebarButtons(doc: Doc) { const sidebarContainer = CurrentUserUtils.setupSidebarContainer(doc); - CurrentUserUtils.toolsBtn = await CurrentUserUtils.setupToolsBtnPanel(doc, sidebarContainer); - CurrentUserUtils.libraryBtn = CurrentUserUtils.setupLibraryPanel(doc, sidebarContainer); - CurrentUserUtils.searchBtn = CurrentUserUtils.setupSearchBtnPanel(doc, sidebarContainer); - - // Finally, setup the list of buttons to display in the sidebar - if (doc["tabs-buttons"] === undefined) { - doc["tabs-buttons"] = new PrefetchProxy(Docs.Create.StackingDocument([CurrentUserUtils.libraryBtn, CurrentUserUtils.searchBtn, CurrentUserUtils.toolsBtn], { - _width: 500, _height: 80, boxShadow: "0 0", _pivotField: "title", _columnsHideIfEmpty: true, ignoreClick: true, _chromeStatus: "view-mode", - title: "sidebar btn row stack", backgroundColor: "dimGray", - })); - (CurrentUserUtils.toolsBtn.onClick as ScriptField).script.run({ this: CurrentUserUtils.toolsBtn }); - } + await CurrentUserUtils.setupToolsBtnPanel(doc, sidebarContainer); + CurrentUserUtils.setupWorkspaces(doc); + CurrentUserUtils.setupCatalog(doc); + CurrentUserUtils.setupRecentlyClosed(doc); + CurrentUserUtils.setupUserDoc(doc); } static blist = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.LinearDocument(docs, { diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 350be7fbf..a5dbc0627 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -79,9 +79,8 @@ export class MainView extends React.Component { @computed private get userDoc() { return Doc.UserDoc(); } @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeWorkspace, Doc)) : CurrentUserUtils.GuestWorkspace; } @computed public get mainFreeform(): Opt { return (docs => (docs && docs.length > 1) ? docs[1] : undefined)(DocListCast(this.mainContainer!.data)); } - @computed public get sidebarButtonsDoc() { return Cast(this.userDoc["tabs-buttons"], Doc) as Doc; } - @observable public sidebarContent: any = this.userDoc?.["tabs-panelContainer"]; + @observable public sidebarContent: any = this.userDoc?.["sidebar"]; @observable public panelContent: string = "none"; @observable public showProperties: boolean = false; public isPointerDown = false; @@ -389,12 +388,8 @@ export class MainView extends React.Component { if (this._flyoutTranslate) { setupMoveUpEvents(this, e, action((e: PointerEvent) => { this.flyoutWidth = Math.max(e.clientX, 0); - this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30; return false; - }), emptyFunction, action(() => { - this.flyoutWidth = this.flyoutWidth < 15 ? 250 : 0; - this.flyoutWidth && (this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30); - })); + }), emptyFunction, action(() => this.flyoutWidth = this.flyoutWidth < 15 ? 250 : 0)); } } @@ -503,12 +498,13 @@ export class MainView extends React.Component { } else { let panelDoc: Doc | undefined; switch (this.panelContent = str) { - case "Tools": panelDoc = CurrentUserUtils.toolsStack; break; - case "Workspace": panelDoc = CurrentUserUtils.workspaceStack; break; - case "Catalog": panelDoc = CurrentUserUtils.catalogStack; break; - case "Archive": panelDoc = CurrentUserUtils.closedStack; break; + case "Tools": panelDoc = Doc.UserDoc()["sidebar-tools"] as Doc ?? undefined; break; + case "Workspace": panelDoc = Doc.UserDoc()["sidebar-workspaces"] as Doc ?? undefined; break; + case "Catalog": panelDoc = Doc.UserDoc()["sidebar-catalog"] as Doc ?? undefined; break; + case "Archive": panelDoc = Doc.UserDoc()["sidebar-recentlyClosed"] as Doc ?? undefined; break; case "Settings": SettingsManager.Instance.open(); break; case "Sharing": GroupManager.Instance.open(); break; + case "UserDoc": panelDoc = Doc.UserDoc()["sidebar-userDoc"] as Doc ?? undefined; break; } this.sidebarContent.proto = panelDoc; if (panelDoc) { @@ -607,7 +603,7 @@ export class MainView extends React.Component { public static expandFlyout = action(() => { MainView.Instance._flyoutTranslate = true; MainView.Instance.flyoutWidth = (MainView.Instance.flyoutWidth || 250); - MainView.Instance.sidebarButtonsDoc._columnWidth = MainView.Instance.flyoutWidth / 3 - 30; + }); @computed get expandButton() { -- cgit v1.2.3-70-g09d2