diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/util/CurrentUserUtils.ts | 16 | ||||
| -rw-r--r-- | src/client/views/nodes/button/FontIconBox.scss | 1 | ||||
| -rw-r--r-- | src/client/views/nodes/button/FontIconBox.tsx | 89 |
3 files changed, 53 insertions, 53 deletions
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index d75fc7207..66799d62f 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -474,7 +474,7 @@ export class CurrentUserUtils { ((doc.emptyScript as Doc).proto as Doc)["dragFactory-count"] = 0; } if (doc.emptyScreenshot === undefined) { - doc.emptyScreenshot = Docs.Create.ScreenshotDocument("empty screenshot", { _fitWidth: true, title:"empty screenshot", _width: 400, _height: 200, system: true, cloneFieldFilter: new List<string>(["system"]) }); + doc.emptyScreenshot = Docs.Create.ScreenshotDocument("empty screenshot", { _fitWidth: true, title: "empty screenshot", _width: 400, _height: 200, system: true, cloneFieldFilter: new List<string>(["system"]) }); } if (doc.emptyWall === undefined) { doc.emptyWall = Docs.Create.ScreenshotDocument("", { _fitWidth: true, _width: 400, _height: 200, title: "screen snapshot", system: true, cloneFieldFilter: new List<string>(["system"]) }); @@ -670,7 +670,7 @@ export class CurrentUserUtils { // SEts up mobile buttons for inside mobile menu static setupMobileButtons(doc?: Doc, buttons?: string[]) { - const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, activePen?: Doc, backgroundColor?: string, info: string, dragFactory?: Doc }[] = [ + const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, backgroundColor?: string, info: string, dragFactory?: Doc }[] = [ { title: "DASHBOARDS", icon: "bars", click: 'switchToMobileLibrary()', backgroundColor: "lightgrey", info: "Access your Dashboards from your mobile, and navigate through all of your documents. " }, { title: "UPLOAD", icon: "upload", click: 'openMobileUploads()', backgroundColor: "lightgrey", info: "Upload files from your mobile device so they can be accessed on Dash Web." }, { title: "MOBILE UPLOAD", icon: "mobile", click: 'switchToMobileUploadCollection()', backgroundColor: "lightgrey", info: "Access the collection of your mobile uploads." }, @@ -982,7 +982,7 @@ 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: "Stroke width", toolTip: "Stroke width", btnType: ButtonType.NumberButton, numBtnType: NumButtonType.Slider, ignoreClick: true, script: 'setStrokeWidth' }, + { 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' }, ]; return tools; @@ -1065,7 +1065,7 @@ export class CurrentUserUtils { tools = CurrentUserUtils.textTools(doc); break; } - tools.map(({ title, toolTip, icon, btnType, numBtnType, click, script, width, list, ignoreClick, switchToggle, checkResult }) => { + tools.map(({ title, toolTip, icon, btnType, numBtnType, numBtnMax, numBtnMin, click, script, width, list, ignoreClick, switchToggle, checkResult }) => { menuDocList.push(Docs.Create.FontIconDocument({ _nativeWidth: width ? width : 25, _nativeHeight: 25, @@ -1074,6 +1074,8 @@ export class CurrentUserUtils { icon, toolTip, numBtnType, + numBtnMin, + numBtnMax, script, btnType: btnType, btnList: new List<string>(list), @@ -1086,7 +1088,7 @@ export class CurrentUserUtils { title, switchToggle, color: Colors.WHITE, - backgroundColor: checkResult ? ComputedField.MakeFunction(checkResult) as any : "transparent", + backgroundColor: checkResult ? ComputedField.MakeFunction(checkResult) as any : "transparent", _dropAction: "alias", _removeDropProperties: new List<string>(["dropAction", "_stayInCollection"]), onClick: click ? ScriptField.MakeScript(click, { doc: Doc.name }) : undefined @@ -1099,7 +1101,7 @@ export class CurrentUserUtils { linearViewExpandable: true, icon: title, _height: 30, - backgroundColor: checkResult ? ComputedField.MakeFunction(checkResult) as any : "transparent", + backgroundColor: checkResult ? ComputedField.MakeFunction(checkResult) as any : "transparent", linearViewIsExpanded: expanded ? !(ComputedField.MakeFunction(expanded) as any) : undefined, hidden: hidden ? ComputedField.MakeFunction(hidden) as any : undefined, }, menuDocList)); @@ -1278,7 +1280,7 @@ export class CurrentUserUtils { doc._showLabel = false; doc._showMenuLabel = true; doc.textAlign = StrCast(doc.textAlign, "left"); - doc.activeInkColor = StrCast(doc.activeInkColor, "rgb(0, 0, 0, 0)"); + doc.activeInkColor = StrCast(doc.activeInkColor, "rgb(0, 0, 0)"); doc.activeInkWidth = NumCast(doc.activeInkWidth, 1); doc.activeInkBezier = StrCast(doc.activeInkBezier, "0"); doc.activeFillColor = StrCast(doc.activeFillColor, ""); diff --git a/src/client/views/nodes/button/FontIconBox.scss b/src/client/views/nodes/button/FontIconBox.scss index 8de97ea89..b080f1dab 100644 --- a/src/client/views/nodes/button/FontIconBox.scss +++ b/src/client/views/nodes/button/FontIconBox.scss @@ -169,6 +169,7 @@ height: fit-content; color: black; top: 100%; + left: 0; z-index: 21; background-color: #e3e3e3; box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3); diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx index 7b11791b5..040e8f0f4 100644 --- a/src/client/views/nodes/button/FontIconBox.tsx +++ b/src/client/views/nodes/button/FontIconBox.tsx @@ -117,13 +117,12 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon <div className="menuButton-dropdownBox" onPointerDown={e => e.stopPropagation()} - style={{ left: 0 }} > - <input type="range" step="1" min="0" max="100" value={checkResult} + <input type="range" step="1" min={NumCast(this.rootDoc.numBtnMin, 0)} max={NumCast(this.rootDoc.numBtnMax, 100)} value={checkResult} className={"menu-slider"} id="slider" - onPointerDown={() => { this._batch = UndoManager.StartBatch("presDuration"); }} - onPointerUp={() => { if (this._batch) this._batch.end(); }} - onChange={(e: React.ChangeEvent<HTMLInputElement>) => { e.stopPropagation(); setValue(Number(e.target.value)); }} + onPointerDown={() => this._batch = UndoManager.StartBatch("presDuration")} + onPointerUp={() => this._batch?.end()} + onChange={e => { e.stopPropagation(); setValue(Number(e.target.value)); }} /> </div>; return ( @@ -218,8 +217,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon <FontAwesomeIcon icon={'caret-down'} color={color} size="sm" /> </div> {this.rootDoc.dropDownOpen ? - <div className="menuButton-dropdownBox" - style={{ left: 0 }}> + <div className="menuButton-dropdownBox"> {/* DROPDOWN BOX CONTENTS */} </div> : null} </div> @@ -240,7 +238,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon let text: string | undefined; let dropdown = true; let icon: IconProp = "caret-down"; - let noneSelected:boolean = false; + let noneSelected: boolean = false; if (script === 'setView') { const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined; @@ -333,19 +331,19 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon let stroke: boolean = false; let strokeIcon: any; - if (script === "setStrokeColor"){ + 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 = (<div style={{borderRadius: "100%", width: width+'%', height: height+'%', backgroundColor: boolResult ? boolResult : "#FFFFFF" }}/>) + strokeIcon = (<div style={{ borderRadius: "100%", width: width + '%', height: height + '%', backgroundColor: boolResult ? boolResult : "#FFFFFF" }} />) } const colorOptions: string[] = ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF', '#f1efeb']; - const colorBox = (func: (color: ColorState) => void) => <SketchPicker + const colorBox = (func: (color: ColorState) => void) => <SketchPicker disableAlpha={!stroke} onChange={func} color={boolResult ? boolResult : "#FFFFFF"} presetColors={colorOptions} />; @@ -373,17 +371,16 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon onClick={() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen} onPointerDown={e => e.stopPropagation()}> {stroke ? strokeIcon : <><FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} /> - <div className="colorButton-color" - style={{ backgroundColor: boolResult ? boolResult : "#FFFFFF" }} - ></div></>} + <div className="colorButton-color" + style={{ backgroundColor: boolResult ? boolResult : "#FFFFFF" }} + ></div></>} {label} {/* {dropdownCaret} */} {this.rootDoc.dropDownOpen ? <div> <div className="menuButton-dropdownBox" onPointerDown={e => e.stopPropagation()} - onClick={e => e.stopPropagation()} - style={{ left: 0 }}> + onClick={e => e.stopPropagation()}> {colorBox(click)} </div> <div className="dropbox-background" onClick={(e) => { e.stopPropagation(); this.rootDoc.dropDownOpen = false; }} /> @@ -454,13 +451,13 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon const script: string = StrCast(this.rootDoc.script); // Script for checking the outcome of the toggle - let checkScript:string = StrCast(this.rootDoc.script) + "('', true)"; + let checkScript: string = StrCast(this.rootDoc.script) + "('', true)"; // Function to run the script const checkResult = ScriptField.MakeScript(checkScript)?.script.run().result; const setValue = (value: string, shiftDown?: boolean): boolean => { - ScriptField.MakeScript(script + "('"+value+"')")?.script.run(); + ScriptField.MakeScript(script + "('" + value + "')")?.script.run(); return true; }; return ( @@ -576,7 +573,7 @@ Scripting.addGlobal(function setBackgroundColor(color?: string, checkResult?: bo Scripting.addGlobal(function toggleOverlay(checkResult?: boolean) { const selected = SelectionManager.Views().length ? SelectionManager.Views()[0] : undefined; if (checkResult && selected) { - if(NumCast(selected.Document.z) === 1) return Colors.MEDIUM_BLUE; + if (NumCast(selected.Document.z) === 1) return Colors.MEDIUM_BLUE; else return "transparent"; } selected ? selected.props.CollectionFreeFormDocumentView?.().float() : console.log("[FontIconBox.tsx] toggleOverlay failed"); @@ -592,7 +589,7 @@ Scripting.addGlobal(function toggleOverlay(checkResult?: boolean) { * toggleBold * toggleItalic * toggleUnderline - **/ + **/ // toggle: Set overlay status of selected document Scripting.addGlobal(function setFont(font: string, checkResult?: boolean) { @@ -603,10 +600,10 @@ Scripting.addGlobal(function setFont(font: string, checkResult?: boolean) { return Doc.UserDoc()._fontFamily; }); -Scripting.addGlobal(function getActiveTextInfo(info:"family" | "size" | "color" | "highlight"){ +Scripting.addGlobal(function getActiveTextInfo(info: "family" | "size" | "color" | "highlight") { const editorView = RichTextMenu.Instance.TextView?.EditorView; const style = editorView?.state && RichTextMenu.Instance.getActiveFontStylesOnSelection(); - switch(info){ + switch (info) { case "family": return style?.activeColors[0]; case "size": return style?.activeSizes[0]; case "color": return style?.activeColors[0]; @@ -617,19 +614,19 @@ Scripting.addGlobal(function getActiveTextInfo(info:"family" | "size" | "color" Scripting.addGlobal(function setAlignment(align: "left" | "right" | "center", checkResult?: boolean) { const editorView = RichTextMenu.Instance?.TextView?.EditorView; if (checkResult) { - let active:string; - if (editorView){ + let active: string; + if (editorView) { active = editorView?.state && RichTextMenu.Instance.getActiveAlignment(); } else { - active = StrCast(Doc.UserDoc().textAlign); + active = StrCast(Doc.UserDoc().textAlign); } if (active === align) return Colors.MEDIUM_BLUE; else return "transparent"; } SelectionManager.Views().map(dv => dv.props.Document.textAlign = align); - switch(align){ + switch (align) { case "left": - editorView?.state && RichTextMenu.Instance.alignLeft( editorView, editorView.dispatch); + editorView?.state && RichTextMenu.Instance.alignLeft(editorView, editorView.dispatch); break; case "center": editorView?.state && RichTextMenu.Instance.alignCenter(editorView, editorView.dispatch); @@ -643,15 +640,15 @@ Scripting.addGlobal(function setAlignment(align: "left" | "right" | "center", ch Doc.UserDoc().textAlign = align; }); -Scripting.addGlobal(function setBulletList(mapStyle: "bullet" | "decimal", checkResult?:boolean){ +Scripting.addGlobal(function setBulletList(mapStyle: "bullet" | "decimal", checkResult?: boolean) { const editorView = RichTextMenu.Instance?.TextView?.EditorView; - if (checkResult){ + if (checkResult) { const active = editorView?.state && RichTextMenu.Instance.getActiveListStyle(); console.log(active, mapStyle); if (active === mapStyle) return Colors.MEDIUM_BLUE; else return "transparent"; } - if (editorView){ + if (editorView) { const active = editorView?.state && RichTextMenu.Instance.getActiveListStyle(); if (active === mapStyle) { console.log("set bullet list"); @@ -726,7 +723,7 @@ Scripting.addGlobal(function toggleBold(checkResult?: boolean) { else return "transparent"; } const editorView = RichTextMenu.Instance.TextView?.EditorView; - if (editorView){ + if (editorView) { console.log("editorView"); editorView?.state && RichTextMenu.Instance.toggleBold(editorView, true); } @@ -741,7 +738,7 @@ Scripting.addGlobal(function toggleUnderline(checkResult?: boolean) { else return "transparent"; } const editorView = RichTextMenu.Instance.TextView?.EditorView; - if (editorView){ + if (editorView) { console.log("editorView"); editorView?.state && RichTextMenu.Instance.toggleUnderline(editorView, true); } @@ -756,7 +753,7 @@ Scripting.addGlobal(function toggleItalic(checkResult?: boolean) { else return "transparent"; } const editorView = RichTextMenu.Instance.TextView?.EditorView; - if (editorView){ + if (editorView) { console.log("editorView"); editorView?.state && RichTextMenu.Instance.toggleItalic(editorView, true); } @@ -772,7 +769,7 @@ Scripting.addGlobal(function toggleItalic(checkResult?: boolean) { * setActiveInkTool * setStrokeWidth * setStrokeColor - **/ + **/ Scripting.addGlobal(function setActiveInkTool(tool: string, checkResult?: boolean) { if (checkResult) { @@ -789,7 +786,7 @@ Scripting.addGlobal(function setActiveInkTool(tool: string, checkResult?: boolea Doc.UserDoc().activeInkTool = "pen"; GestureOverlay.Instance.InkShape = tool; } else if (tool) { - if (Doc.UserDoc().activeInkTool === tool && GestureOverlay.Instance.InkShape === "" || GestureOverlay.Instance.InkShape === tool){ + if (Doc.UserDoc().activeInkTool === tool && GestureOverlay.Instance.InkShape === "" || GestureOverlay.Instance.InkShape === tool) { GestureOverlay.Instance.InkShape = ""; Doc.UserDoc().activeInkTool = InkTool.None; } else { @@ -803,7 +800,7 @@ Scripting.addGlobal(function setActiveInkTool(tool: string, checkResult?: boolea Scripting.addGlobal(function setStrokeWidth(width: number, checkResult?: boolean) { if (checkResult) { const selected = SelectionManager.Views().length ? SelectionManager.Views()[0].rootDoc : undefined; - if (selected && selected.type === DocumentType.INK){ + if (selected && selected.type === DocumentType.INK) { return Number(selected.strokeWidth); } else { const width: number = NumCast(Doc.UserDoc().activeInkWidth); @@ -818,7 +815,7 @@ Scripting.addGlobal(function setStrokeWidth(width: number, checkResult?: boolean Scripting.addGlobal(function setStrokeColor(color?: string, checkResult?: boolean) { if (checkResult) { const selected = SelectionManager.Views().length ? SelectionManager.Views()[0].rootDoc : undefined; - if (selected && selected.type === DocumentType.INK){ + if (selected && selected.type === DocumentType.INK) { return selected.color; } else { const color: string = StrCast(Doc.UserDoc().activeInkColor); @@ -832,14 +829,14 @@ Scripting.addGlobal(function setStrokeColor(color?: string, checkResult?: boolea /** WEB * webSetURL - **/ + **/ Scripting.addGlobal(function webSetURL(url: string, checkResult?: boolean) { const selected = SelectionManager.Views().length ? SelectionManager.Views()[0].rootDoc : undefined; console.log("URL: ", url); - if (checkResult && selected && selected.type === DocumentType.WEB){ + if (checkResult && selected && selected.type === DocumentType.WEB) { return Cast(selected.data, WebField, null).url; } - else if (selected && selected.type === DocumentType.WEB){ + else if (selected && selected.type === DocumentType.WEB) { selected.data = url; } }); @@ -847,16 +844,16 @@ Scripting.addGlobal(function webSetURL(url: string, checkResult?: boolean) { /** Schema * toggleSchemaPreview - **/ - Scripting.addGlobal(function toggleSchemaPreview(checkResult?: boolean) { + **/ +Scripting.addGlobal(function toggleSchemaPreview(checkResult?: boolean) { const selected = SelectionManager.Views().length ? SelectionManager.Views()[0].rootDoc : undefined; - if (checkResult && selected){ - const result:boolean = NumCast(selected.schemaPreviewWidth) > 0; + if (checkResult && selected) { + const result: boolean = NumCast(selected.schemaPreviewWidth) > 0; if (result) return Colors.MEDIUM_BLUE; else return "transparent"; } - else if (selected){ - if (NumCast(selected.schemaPreviewWidth) > 0){ + else if (selected) { + if (NumCast(selected.schemaPreviewWidth) > 0) { selected.schemaPreviewWidth = 200; } else { selected.schemaPreviewWidth = 0; |