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