From 59458f5c11e7e0891391da65a54269a56c5c71b6 Mon Sep 17 00:00:00 2001 From: geireann Date: Tue, 31 Aug 2021 15:03:37 -0400 Subject: there will be issues as a result of this --- src/client/documents/Documents.ts | 1 + src/client/util/CurrentUserUtils.ts | 59 +++++++++-------- src/client/views/MainView.tsx | 6 +- src/client/views/PropertiesView.scss | 5 +- src/client/views/PropertiesView.tsx | 19 +++--- .../collectionLinearView/CollectionLinearView.tsx | 2 +- src/client/views/nodes/button/ButtonInterface.ts | 12 ++++ src/client/views/nodes/button/FontIconBox.scss | 4 ++ src/client/views/nodes/button/FontIconBox.tsx | 49 ++++++++++---- .../nodes/button/colorDropdown/ColorDropdown.tsx | 77 ++++++++++++++++++++++ .../views/nodes/button/colorDropdown/index.ts | 1 + .../views/nodes/button/textButton/TextButton.tsx | 17 +++++ src/client/views/nodes/button/textButton/index.ts | 1 + .../nodes/button/toggleButton/ToggleButton.tsx | 34 ++++++++++ .../views/nodes/button/toggleButton/index.ts | 1 + src/client/views/nodes/trails/PresBox.tsx | 2 +- 16 files changed, 234 insertions(+), 56 deletions(-) create mode 100644 src/client/views/nodes/button/ButtonInterface.ts create mode 100644 src/client/views/nodes/button/colorDropdown/ColorDropdown.tsx create mode 100644 src/client/views/nodes/button/colorDropdown/index.ts create mode 100644 src/client/views/nodes/button/textButton/TextButton.tsx create mode 100644 src/client/views/nodes/button/textButton/index.ts create mode 100644 src/client/views/nodes/button/toggleButton/ToggleButton.tsx create mode 100644 src/client/views/nodes/button/toggleButton/index.ts (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 9d5dcb217..c4a713dc6 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -219,6 +219,7 @@ export class DocumentOptions { _backgroundGridShow?: boolean; //BUTTONS + buttonText?: string; iconShape?: string; // shapes of the fonticon border btnType?: string; btnList?: List; diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index aebcbcdff..cc0c19ab0 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -576,10 +576,10 @@ export class CurrentUserUtils { { title: "Search", target: Cast(doc.mySearchPanel, Doc, null), icon: "search", click: 'selectMainMenu(self)' }, { title: "My Files", target: Cast(doc.myFilesystem, Doc, null), icon: "file", click: 'selectMainMenu(self)' }, { title: "Tools", target: Cast(doc.myTools, Doc, null), icon: "wrench", click: 'selectMainMenu(self)' }, - { title: "Import", target: Cast(doc.myImportPanel, Doc, null), icon: "upload", click: 'selectMainMenu(self)' }, + { title: "Import", target: Cast(doc.myImportDocs, Doc, null), icon: "upload", click: 'selectMainMenu(self)' }, { title: "Recently Closed", target: Cast(doc.myRecentlyClosedDocs, Doc, null), icon: "archive", click: 'selectMainMenu(self)' }, { title: "Sharing", target: Cast(doc.mySharedDocs, Doc, null), icon: "users", click: 'selectMainMenu(self)', watchedDocuments: doc.mySharedDocs as Doc }, - { title: "Pres. Trails", target: Cast(doc.myPresentations, Doc, null), icon: "pres-trail", click: 'selectMainMenu(self)' }, + { title: "Trails", target: Cast(doc.myTrails, Doc, null), icon: "pres-trail", click: 'selectMainMenu(self)' }, // { title: "Help", target: undefined as any, icon: "question-circle", click: 'selectMainMenu(self)' }, // { title: "Settings", target: undefined as any, icon: "cog", click: 'selectMainMenu(self)' }, { title: "User Doc", target: Cast(doc.myUserDoc, Doc, null), icon: "address-card", click: 'selectMainMenu(self)' }, @@ -815,32 +815,34 @@ export class CurrentUserUtils { _lockedPosition: true, boxShadow: "0 0", childDontRegisterViews: true, targetDropAction: "same", treeViewType: "fileSystem", isFolder: true, system: true })); const newDashboard = ScriptField.MakeScript(`createNewDashboard(Doc.UserDoc())`); - const toggleTheme = ScriptField.MakeScript(`Doc.UserDoc().darkScheme = !Doc.UserDoc().darkScheme`); - const toggleComic = ScriptField.MakeScript(`toggleComicMode()`); - const snapshotDashboard = ScriptField.MakeScript(`snapshotDashboard()`); + // const toggleTheme = ScriptField.MakeScript(`Doc.UserDoc().darkScheme = !Doc.UserDoc().darkScheme`); + // const toggleComic = ScriptField.MakeScript(`toggleComicMode()`); + // const snapshotDashboard = ScriptField.MakeScript(`snapshotDashboard()`); const shareDashboard = ScriptField.MakeScript(`shareDashboard(self)`); const removeDashboard = ScriptField.MakeScript('removeDashboard(self)'); - (doc.myDashboards as any as Doc).childContextMenuScripts = new List([newDashboard!, toggleTheme!, toggleComic!, snapshotDashboard!, shareDashboard!, removeDashboard!]); - (doc.myDashboards as any as Doc).childContextMenuLabels = new List(["Create New Dashboard", "Toggle Theme Colors", "Toggle Comic Mode", "Snapshot Dashboard", "Share Dashboard", "Remove Dashboard"]); + (doc.myDashboards as any as Doc).childContextMenuScripts = new List([newDashboard!, shareDashboard!, removeDashboard!]); + (doc.myDashboards as any as Doc).childContextMenuLabels = new List(["Create New Dashboard", "Share Dashboard", "Remove Dashboard"]); + // (doc.myDashboards as any as Doc).childContextMenuScripts = new List([newDashboard!, toggleTheme!, toggleComic!, snapshotDashboard!, shareDashboard!, removeDashboard!]); + // (doc.myDashboards as any as Doc).childContextMenuLabels = new List(["Create New Dashboard", "Toggle Theme Colors", "Toggle Comic Mode", "Snapshot Dashboard", "Share Dashboard", "Remove Dashboard"]); } return doc.myDashboards as any as Doc; } static async setupPresentations(doc: Doc) { - await doc.myPresentations; - if (doc.myPresentations === undefined) { - doc.myPresentations = new PrefetchProxy(Docs.Create.TreeDocument([], { + await doc.myTrails; + if (doc.myTrails === undefined) { + doc.myTrails = new PrefetchProxy(Docs.Create.TreeDocument([], { title: "My Trails", _showTitle: "title", _height: 100, treeViewHideTitle: true, _xMargin: 5, _yMargin: 5, _gridGap: 5, _forceActive: true, childDropAction: "alias", treeViewTruncateTitleWidth: 150, ignoreClick: true, _lockedPosition: true, boxShadow: "0 0", childDontRegisterViews: true, targetDropAction: "same", system: true })); const newPresentations = ScriptField.MakeScript(`createNewPresentation()`); - (doc.myPresentations as any as Doc).contextMenuScripts = new List([newPresentations!]); - (doc.myPresentations as any as Doc).contextMenuLabels = new List(["Create New Presentation"]); - const presentations = doc.myPresentations as any as Doc; + (doc.myTrails as any as Doc).contextMenuScripts = new List([newPresentations!]); + (doc.myTrails as any as Doc).contextMenuLabels = new List(["Create New Trail"]); + const presentations = doc.myTrails as any as Doc; } - return doc.myPresentations as any as Doc; + return doc.myTrails as any as Doc; } static async setupFilesystem(doc: Doc) { @@ -862,8 +864,9 @@ export class CurrentUserUtils { static setupRecentlyClosedDocs(doc: Doc) { // setup Recently Closed library item if (doc.myRecentlyClosedDocs === undefined) { - doc.myRecentlyClosedDocs = new PrefetchProxy(Docs.Create.TreeDocument([], { - title: "Recently Closed", _showTitle: "title", treeViewShowClearButton: true, childHideLinkButton: true, + const clearDocs = CurrentUserUtils.ficon({ onClick: ScriptField.MakeScript(`getProto(self).data = new List([])`), toolTip: "Empty", _stayInCollection: true, _hideContextMenu: true, title: "Empty", btnType: ButtonType.TextButton, _width: 200, buttonText: "Empty Recently Closed", icon: "trash", system: true }); + doc.myRecentlyClosedDocs = new PrefetchProxy(Docs.Create.TreeDocument([clearDocs], { + title: "My Recently Closed", _showTitle: "title", treeViewShowClearButton: true, childHideLinkButton: true, treeViewHideTitle: true, _xMargin: 5, _yMargin: 5, _gridGap: 5, _forceActive: true, childDropAction: "alias", treeViewTruncateTitleWidth: 150, ignoreClick: true, _lockedPosition: true, boxShadow: "0 0", childDontRegisterViews: true, targetDropAction: "same", system: true @@ -878,7 +881,7 @@ export class CurrentUserUtils { // setup Filter item if (doc.currentFilter === undefined) { doc.currentFilter = Docs.Create.FilterDocument({ - title: "unnamed filter", _height: 150, + title: "Unnamed Filter", _height: 150, treeViewHideTitle: true, _xMargin: 5, _yMargin: 5, _gridGap: 5, _forceActive: true, childDropAction: "none", treeViewTruncateTitleWidth: 150, ignoreClick: true, _lockedPosition: true, boxShadow: "0 0", childDontRegisterViews: true, targetDropAction: "same", system: true, _autoHeight: true, _fitWidth: true @@ -982,8 +985,12 @@ export class CurrentUserUtils { { title: "Circle", toolTip: "Circle (Ctrl+Shift+C)", btnType: ButtonType.ToggleButton, icon: "circle", click: 'setActiveInkTool("circle")', checkResult: 'setActiveInkTool("circle" , true)' }, // { title: "Square", toolTip: "Square (Ctrl+Shift+S)", btnType: ButtonType.ToggleButton, icon: "square", click: 'setActiveInkTool("square")', checkResult: 'setActiveInkTool("square" , true)' }, { title: "Line", toolTip: "Line (Ctrl+Shift+L)", btnType: ButtonType.ToggleButton, icon: "minus", click: 'setActiveInkTool("line")', checkResult: 'setActiveInkTool("line" , true)' }, + { + title: "Fill color", toolTip: "Fill color", btnType: ButtonType.ColorButton, ignoreClick: true, icon: "fill-drip", + script: "setBackgroundColor" + }, { title: "Stroke width", toolTip: "Stroke width", btnType: ButtonType.NumberButton, numBtnType: NumButtonType.Slider, numBtnMin: 1, ignoreClick: true, script: 'setStrokeWidth' }, - { title: "Stroke color", toolTip: "Stroke color", btnType: ButtonType.ColorButton, icon: "minus", ignoreClick: true, script: 'setStrokeColor' }, + { title: "Stroke color", toolTip: "Stroke color", btnType: ButtonType.ColorButton, icon: "pen", ignoreClick: true, script: 'setStrokeColor' }, ]; return tools; } @@ -1027,7 +1034,7 @@ export class CurrentUserUtils { script: 'setView', }, // Always show { - title: "Background", toolTip: "Background", btnType: ButtonType.ColorButton, ignoreClick: true, icon: "fill-drip", + title: "Background Color", toolTip: "Background Color", btnType: ButtonType.ColorButton, ignoreClick: true, icon: "fill-drip", script: "setBackgroundColor", hidden: 'selectedDocumentType()' }, // Only when a document is selected { title: "Overlay", toolTip: "Overlay", btnType: ButtonType.ToggleButton, icon: "layer-group", click: 'toggleOverlay()', checkResult: 'toggleOverlay(true)', hidden: 'selectedDocumentType(undefined, "freeform", true)' }, // Only when floating document is selected in freeform @@ -1192,16 +1199,12 @@ export class CurrentUserUtils { // Import sidebar is where shared documents are contained static setupImportSidebar(doc: Doc) { if (doc.myImportDocs === undefined) { - doc.myImportDocs = new PrefetchProxy(Docs.Create.StackingDocument([], { + const newUpload = CurrentUserUtils.ficon({ onClick: ScriptField.MakeScript("importDocument()"), toolTip: "Import External document", _width: 100, _stayInCollection: true, _hideContextMenu: true, title: "Import", btnType: ButtonType.TextButton, _width: 200, buttonText: "Upload From Computer", icon: "upload", system: true }); + doc.myImportDocs = new PrefetchProxy(Docs.Create.StackingDocument([newUpload], { title: "My ImportDocuments", _forceActive: true, ignoreClick: true, _stayInCollection: true, _hideContextMenu: true, childLimitHeight: 0, - childDropAction: "alias", _autoHeight: true, _yMargin: 50, _gridGap: 15, _lockedPosition: true, system: true, _chromeHidden: true, + childDropAction: "alias", _autoHeight: true, _yMargin: 50, _gridGap: 15, boxShadow: "0 0", _lockedPosition: true, system: true, _chromeHidden: true, })); } - if (doc.myImportPanel === undefined) { - const uploads = Cast(doc.myImportDocs, Doc, null); - const newUpload = CurrentUserUtils.ficon({ onClick: ScriptField.MakeScript("importDocument()"), toolTip: "Import External document", _stayInCollection: true, _hideContextMenu: true, title: "Import", btnType: ButtonType.ToolButton, icon: "upload", system: true }); - doc.myImportPanel = new PrefetchProxy(Docs.Create.StackingDocument([newUpload, uploads], { title: "My ImportPanel", _yMargin: 20, _showTitle: "title", ignoreClick: true, _chromeHidden: true, _stayInCollection: true, _hideContextMenu: true, _lockedPosition: true, system: true, boxShadow: "0 0" })); - } } // Search sidebar is where searches within the document are performed @@ -1209,7 +1212,7 @@ export class CurrentUserUtils { if (doc.mySearchPanel === undefined) { doc.mySearchPanel = new PrefetchProxy(Docs.Create.SearchDocument({ backgroundColor: "dimGray", ignoreClick: true, _searchDoc: true, - childDropAction: "alias", _lockedPosition: true, _viewType: CollectionViewType.Schema, title: "Search Sidebar", system: true + childDropAction: "alias", _lockedPosition: true, _viewType: CollectionViewType.Schema, title: "Search Panel", system: true })) as any as Doc; } } @@ -1453,7 +1456,7 @@ export class CurrentUserUtils { } public static createNewDashboard = async (userDoc: Doc, id?: string) => { - const myPresentations = await userDoc.myPresentations as Doc; + const myTrails = await userDoc.myTrails as Doc; const presentation = Doc.MakeCopy(userDoc.emptyPresentation as Doc, true); const dashboards = await Cast(userDoc.myDashboards, Doc) as Doc; const dashboardCount = DocListCast(dashboards.data).length + 1; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 9047951ee..60016fc3d 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -227,8 +227,8 @@ export class MainView extends React.Component { @action createNewPresentation = async () => { - if (!await this.userDoc.myPresentations) { - this.userDoc.myPresentations = new PrefetchProxy(Docs.Create.TreeDocument([], { + if (!await this.userDoc.myTrails) { + this.userDoc.myTrails = new PrefetchProxy(Docs.Create.TreeDocument([], { title: "PRESENTATION TRAILS", childDontRegisterViews: true, _height: 100, _forceActive: true, boxShadow: "0 0", _lockedPosition: true, treeViewOpen: true, system: true })); } @@ -236,7 +236,7 @@ export class MainView extends React.Component { { title: "Untitled Presentation", _viewType: CollectionViewType.Stacking, _width: 400, _height: 500, targetDropAction: "alias", _chromeHidden: true, boxShadow: "0 0" }); CollectionDockingView.AddSplit(pres, "right"); this.userDoc.activePresentation = pres; - Doc.AddDocToList(this.userDoc.myPresentations as Doc, "data", pres); + Doc.AddDocToList(this.userDoc.myTrails as Doc, "data", pres); } getPWidth = () => this._panelWidth - this.propertiesWidth(); diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss index 321b83f52..554f137cb 100644 --- a/src/client/views/PropertiesView.scss +++ b/src/client/views/PropertiesView.scss @@ -825,9 +825,8 @@ } .editable-title { - padding: 6px; - padding-bottom: 2px; - border: solid 1px $dark-gray; + border: solid 1px #323232; + height: fit-content; &:hover { border: 0.75px solid $medium-blue; diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 17b137c31..09e12443b 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -2,17 +2,19 @@ import React = require("react"); import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Checkbox, Tooltip } from "@material-ui/core"; import { intersection } from "lodash"; -import { action, autorun, computed, Lambda, observable, reaction, runInAction } from "mobx"; +import { action, autorun, computed, Lambda, observable } from "mobx"; import { observer } from "mobx-react"; import { ColorState, SketchPicker } from "react-color"; -import { AclAugment, AclAdmin, AclEdit, AclPrivate, AclReadonly, AclSym, AclUnset, DataSym, Doc, Field, HeightSym, Opt, WidthSym, AclSelfEdit } from "../../fields/Doc"; +import { AclAdmin, AclAugment, AclEdit, AclPrivate, AclReadonly, AclSelfEdit, AclSym, AclUnset, DataSym, Doc, Field, HeightSym, Opt, WidthSym } from "../../fields/Doc"; import { Id } from "../../fields/FieldSymbols"; import { InkField } from "../../fields/InkField"; +import { List } from "../../fields/List"; import { ComputedField } from "../../fields/ScriptField"; -import { Cast, NumCast, StrCast } from "../../fields/Types"; +import { BoolCast, Cast, NumCast, StrCast } from "../../fields/Types"; import { denormalizeEmail, GetEffectiveAcl, SharingPermissions } from "../../fields/util"; import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from "../../Utils"; import { DocumentType } from "../documents/DocumentTypes"; +import { CurrentUserUtils } from "../util/CurrentUserUtils"; import { DocumentManager } from "../util/DocumentManager"; import { SelectionManager } from "../util/SelectionManager"; import { SharingManager } from "../util/SharingManager"; @@ -29,8 +31,6 @@ import { PropertiesButtons } from "./PropertiesButtons"; import { PropertiesDocContextSelector } from "./PropertiesDocContextSelector"; import "./PropertiesView.scss"; import { DefaultStyleProvider } from "./StyleProvider"; -import { CurrentUserUtils } from "../util/CurrentUserUtils"; -import { List } from "../../fields/List"; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -1086,6 +1086,7 @@ export class PropertiesView extends React.Component { // } render() { + const isNovice = BoolCast(Doc.UserDoc().noviceMode); if (!this.selectedDoc && !this.isPres) { return
@@ -1110,15 +1111,15 @@ export class PropertiesView extends React.Component { {this.sharingSubMenu} - {this.filtersSubMenu} + {isNovice ? null : this.filtersSubMenu} {this.inkSubMenu} - {this.fieldsSubMenu} + {isNovice ? null : this.fieldsSubMenu} - {this.contextsSubMenu} + {isNovice ? null : this.contextsSubMenu} - {this.layoutSubMenu} + {isNovice ? null : this.layoutSubMenu}
; } if (this.isPres) { diff --git a/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx b/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx index 6b1fd9e1b..f3ffb4e0b 100644 --- a/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx +++ b/src/client/views/collections/collectionLinearView/CollectionLinearView.tsx @@ -126,7 +126,7 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) { }} onPointerDown={e => e.stopPropagation()} >
- {BoolCast(this.layoutDoc.linearViewIsExpanded) ? icon ? icon : : icon ? icon : } + {BoolCast(this.layoutDoc.linearViewIsExpanded) ? icon ? icon : : icon ? icon : }
; diff --git a/src/client/views/nodes/button/ButtonInterface.ts b/src/client/views/nodes/button/ButtonInterface.ts new file mode 100644 index 000000000..0aa2ac8e1 --- /dev/null +++ b/src/client/views/nodes/button/ButtonInterface.ts @@ -0,0 +1,12 @@ +import { Doc } from "../../../../fields/Doc"; +import { IconProp } from "@fortawesome/fontawesome-svg-core"; +import { ButtonType } from "./FontIconBox"; + +export interface IButtonProps { + type: string | ButtonType; + rootDoc: Doc; + label: any; + icon: IconProp; + color: string; + backgroundColor: string; +} \ No newline at end of file diff --git a/src/client/views/nodes/button/FontIconBox.scss b/src/client/views/nodes/button/FontIconBox.scss index b080f1dab..48fb2c8dc 100644 --- a/src/client/views/nodes/button/FontIconBox.scss +++ b/src/client/views/nodes/button/FontIconBox.scss @@ -49,6 +49,10 @@ } } + &.textBtn { + width: 100%; + } + &.tglBtn { cursor: pointer; diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx index a6887cbba..96db929eb 100644 --- a/src/client/views/nodes/button/FontIconBox.tsx +++ b/src/client/views/nodes/button/FontIconBox.tsx @@ -27,11 +27,15 @@ import { StyleProp } from '../../StyleProvider'; import { FieldView, FieldViewProps } from '.././FieldView'; import './FontIconBox.scss'; import { RichTextMenu } from '../formattedText/RichTextMenu'; +import { TextButton } from './textButton'; +import { ToggleButton } from './toggleButton'; +import { IButtonProps } from './ButtonInterface'; const FontIconSchema = createSchema({ icon: "string", }); export enum ButtonType { + TextButton = "textBtn", MenuButton = "menuBtn", DropdownList = "drpdownList", DropdownButton = "drpdownBtn", @@ -331,13 +335,13 @@ export class FontIconBox extends DocComponent(Fon let stroke: boolean = false; let strokeIcon: any; - if (script === "setStrokeColor") { - stroke = true; - const checkWidth = ScriptField.MakeScript("setStrokeWidth(0, true)")?.script.run().result; - const width = 20 + (checkWidth / 100) * 70; - const height = 20 + (checkWidth / 100) * 70; - strokeIcon = (
); - } + // if (script === "setStrokeColor") { + // stroke = true; + // const checkWidth = ScriptField.MakeScript("setStrokeWidth(0, true)")?.script.run().result; + // const width = 20 + (checkWidth / 100) * 70; + // const height = 20 + (checkWidth / 100) * 70; + // strokeIcon = (
); + // } const colorOptions: string[] = ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', @@ -473,25 +477,47 @@ export class FontIconBox extends DocComponent(Fon render() { const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color); const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor); - // Variables called through eval (from button) - const numSelected = SelectionManager.Views().length; - const dark: boolean = Doc.UserDoc().colorScheme === ColorScheme.Dark; - const active: string = StrCast(this.rootDoc.dropDownOpen); const label = !this.label || !Doc.UserDoc()._showLabel ? (null) :
{this.label}
; + const menuLabel = !this.label || !Doc.UserDoc()._showMenuLabel ? (null) :
{this.label}
; + const buttonProps:IButtonProps = { + type: this.type, + rootDoc: this.rootDoc, + label: label, + backgroundColor: backgroundColor, + icon: this.icon, + color: color + } + + const buttonText = StrCast(this.rootDoc.buttonText); + // TODO:glr Add label of button type let button = this.defaultButton; switch (this.type) { + case ButtonType.TextButton: + button = ( +
+ + {buttonText ? +
+ {buttonText} +
+ : null} + {label} +
+ ); + // button = + break; case ButtonType.EditableText: console.log("Editable text"); button = this.editableText; @@ -518,6 +544,7 @@ export class FontIconBox extends DocComponent(Fon break; case ButtonType.ToggleButton: button = this.toggleButton; + // button = break; case ButtonType.ClickButton: button = ( diff --git a/src/client/views/nodes/button/colorDropdown/ColorDropdown.tsx b/src/client/views/nodes/button/colorDropdown/ColorDropdown.tsx new file mode 100644 index 000000000..1809f4e2e --- /dev/null +++ b/src/client/views/nodes/button/colorDropdown/ColorDropdown.tsx @@ -0,0 +1,77 @@ +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import React, { Component } from 'react'; +import { BoolCast, StrCast } from '../../../../../fields/Types'; +import { IButtonProps } from '../ButtonInterface'; +import { ColorState, SketchPicker } from 'react-color'; +import { ScriptField } from '../../../../../fields/ScriptField'; +import { Doc } from '../../../../../fields/Doc'; + +export class ColorDropdown extends Component { + render() { + const active: string = StrCast(this.props.rootDoc.dropDownOpen); + + const script: string = StrCast(this.props.rootDoc.script); + const scriptCheck: string = script + "(undefined, true)"; + const boolResult = ScriptField.MakeScript(scriptCheck)?.script.run().result; + + let stroke: boolean = false; + let strokeIcon: any; + // if (script === "setStrokeColor") { + // stroke = true; + // const checkWidth = ScriptField.MakeScript("setStrokeWidth(0, true)")?.script.run().result; + // const width = 20 + (checkWidth / 100) * 70; + // const height = 20 + (checkWidth / 100) * 70; + // strokeIcon = (
); + // } + + const colorOptions: string[] = ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', + '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', + '#FFFFFF', '#f1efeb']; + + const colorBox = (func: (color: ColorState) => void) => ; + const label = !this.props.label || !Doc.UserDoc()._showLabel ? (null) : +
+ {this.props.label} +
; + + const dropdownCaret =
+ +
; + + const click = (value: ColorState) => { + const hex: string = value.hex; + const s = ScriptField.MakeScript(script + '("' + hex + '", false)'); + if (s) { + s.script.run().result; + } + }; + return ( +
this.props.rootDoc.dropDownOpen = !this.props.rootDoc.dropDownOpen} + onPointerDown={e => e.stopPropagation()}> + {stroke ? strokeIcon : <> +
} + {label} + {/* {dropdownCaret} */} + {this.props.rootDoc.dropDownOpen ? +
+
e.stopPropagation()} + onClick={e => e.stopPropagation()}> + {colorBox(click)} +
+
{ e.stopPropagation(); this.props.rootDoc.dropDownOpen = false; }} /> +
+ : null} +
+ ); + } +} \ No newline at end of file diff --git a/src/client/views/nodes/button/colorDropdown/index.ts b/src/client/views/nodes/button/colorDropdown/index.ts new file mode 100644 index 000000000..1147d6457 --- /dev/null +++ b/src/client/views/nodes/button/colorDropdown/index.ts @@ -0,0 +1 @@ +export * from './ColorDropdown'; \ No newline at end of file diff --git a/src/client/views/nodes/button/textButton/TextButton.tsx b/src/client/views/nodes/button/textButton/TextButton.tsx new file mode 100644 index 000000000..414b50dcb --- /dev/null +++ b/src/client/views/nodes/button/textButton/TextButton.tsx @@ -0,0 +1,17 @@ +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import React, { Component } from 'react'; +import { BoolCast } from '../../../../../fields/Types'; +import { IButtonProps } from '../ButtonInterface'; + +export class TextButton extends Component { + render() { + const type = this.props.type; + // Determine the type of toggle button + const buttonText: boolean = BoolCast(this.props.rootDoc.switchToggle); + + return (
+ + {this.props.label} +
) + } +} \ No newline at end of file diff --git a/src/client/views/nodes/button/textButton/index.ts b/src/client/views/nodes/button/textButton/index.ts new file mode 100644 index 000000000..01fcde54f --- /dev/null +++ b/src/client/views/nodes/button/textButton/index.ts @@ -0,0 +1 @@ +export * from './TextButton' \ No newline at end of file diff --git a/src/client/views/nodes/button/toggleButton/ToggleButton.tsx b/src/client/views/nodes/button/toggleButton/ToggleButton.tsx new file mode 100644 index 000000000..dca6487d8 --- /dev/null +++ b/src/client/views/nodes/button/toggleButton/ToggleButton.tsx @@ -0,0 +1,34 @@ +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import React, { Component } from 'react'; +import { BoolCast } from '../../../../../fields/Types'; +import { Colors } from '../../../global/globalEnums'; +import { IButtonProps } from '../ButtonInterface'; + +export class ToggleButton extends Component { + render() { + const type = this.props.type; + // Determine the type of toggle button + const switchToggle: boolean = BoolCast(this.props.rootDoc.switchToggle); + + if (switchToggle) { + return ( +
+ +
+ ); + } else { + return ( +
+ + {this.props.label} +
+ ); + } + } +} \ No newline at end of file diff --git a/src/client/views/nodes/button/toggleButton/index.ts b/src/client/views/nodes/button/toggleButton/index.ts new file mode 100644 index 000000000..48b28fb4c --- /dev/null +++ b/src/client/views/nodes/button/toggleButton/index.ts @@ -0,0 +1 @@ +export * from './ToggleButton' \ No newline at end of file diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx index cfc3e75cc..b805aa6ae 100644 --- a/src/client/views/nodes/trails/PresBox.tsx +++ b/src/client/views/nodes/trails/PresBox.tsx @@ -166,7 +166,7 @@ export class PresBox extends ViewBoxBaseComponent this.layoutDoc._gridGap = 0; this.layoutDoc._yMargin = 0; this.turnOffEdit(true); - DocListCastAsync((Doc.UserDoc().myPresentations as Doc).data).then(pres => + DocListCastAsync((Doc.UserDoc().myTrails as Doc).data).then(pres => !pres?.includes(this.rootDoc) && Doc.AddDocToList(Doc.UserDoc().myPresentations as Doc, "data", this.rootDoc)); this._disposers.selection = reaction(() => SelectionManager.Views(), views => views.some(view => view.props.Document === this.rootDoc) && this.updateCurrentPresentation()); -- cgit v1.2.3-70-g09d2