aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/button
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/button')
-rw-r--r--src/client/views/nodes/button/FontIconBadge.tsx32
-rw-r--r--src/client/views/nodes/button/FontIconBox.tsx71
-rw-r--r--src/client/views/nodes/button/colorDropdown/ColorDropdown.tsx3
3 files changed, 55 insertions, 51 deletions
diff --git a/src/client/views/nodes/button/FontIconBadge.tsx b/src/client/views/nodes/button/FontIconBadge.tsx
index cf86b5e07..df17d603f 100644
--- a/src/client/views/nodes/button/FontIconBadge.tsx
+++ b/src/client/views/nodes/button/FontIconBadge.tsx
@@ -6,31 +6,31 @@ import { emptyFunction, returnFalse, setupMoveUpEvents } from "../../../../Utils
import { DragManager } from "../../../util/DragManager";
import "./FontIconBadge.scss";
-interface FontIconBadgeProps {
- collection: Doc | undefined;
+interface FontIconBadgeProps {
+ value: string | undefined;
}
@observer
export class FontIconBadge extends React.Component<FontIconBadgeProps> {
_notifsRef = React.createRef<HTMLDivElement>();
- onPointerDown = (e: React.PointerEvent) => {
- setupMoveUpEvents(this, e,
- (e: PointerEvent) => {
- const dragData = new DragManager.DocumentDragData([this.props.collection!]);
- DragManager.StartDocumentDrag([this._notifsRef.current!], dragData, e.x, e.y);
- return true;
- },
- returnFalse, emptyFunction, false);
- }
+ // onPointerDown = (e: React.PointerEvent) => {
+ // setupMoveUpEvents(this, e,
+ // (e: PointerEvent) => {
+ // const dragData = new DragManager.DocumentDragData([this.props.collection!]);
+ // DragManager.StartDocumentDrag([this._notifsRef.current!], dragData, e.x, e.y);
+ // return true;
+ // },
+ // returnFalse, emptyFunction, false);
+ // }
render() {
- if (!(this.props.collection instanceof Doc)) return (null);
- const length = DocListCast(this.props.collection.data).filter(d => GetEffectiveAcl(d) !== AclPrivate).length; // Object.keys(d).length).length; // filter out any documents that we can't read
+ if (this.props.value === undefined) return (null);
return <div className="fontIconBadge-container" ref={this._notifsRef}>
- <div className="fontIconBadge" style={length > 0 ? { "display": "initial" } : { "display": "none" }}
- onPointerDown={this.onPointerDown} >
- {length}
+ <div className="fontIconBadge" style={{ "display": "initial" }}
+ // onPointerDown={this.onPointerDown}
+ >
+ {this.props.value}
</div>
</div>;
}
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index a1b9023f3..85efc67a5 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -1,6 +1,7 @@
import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Tooltip } from '@material-ui/core';
+import { StringIterator } from 'lodash';
import { action, computed, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
@@ -70,7 +71,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
useAsPrototype = (): void => { this.layoutDoc.onDragStart = ScriptField.MakeFunction('makeDelegate(this.dragFactory, true)'); };
specificContextMenu = (): void => {
- if (!Doc.UserDoc().noviceMode) {
+ if (!Doc.noviceMode) {
const cm = ContextMenu.Instance;
cm.addItem({ description: "Show Template", event: this.showTemplate, icon: "tag" });
cm.addItem({ description: "Use as Render Template", event: this.dragAsTemplate, icon: "tag" });
@@ -78,6 +79,9 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
}
}
+ static GetShowLabels() { return BoolCast(Doc.UserDoc()._showLabel); }
+ static SetShowLabels(show:boolean) { Doc.UserDoc()._showLabel = show; }
+
// Determining UI Specs
@observable private label = StrCast(this.rootDoc.label, StrCast(this.rootDoc.title));
@observable private icon = StrCast(this.dataDoc.icon, "user") as any;
@@ -110,7 +114,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
// Script for checking the outcome of the toggle
const checkResult: number = numScript?.script.run({ value: 0, _readOnly_: true }).result || 0;
- const label = !Doc.UserDoc()._showLabel ? (null) :
+ const label = !FontIconBox.GetShowLabels() ? (null) :
<div className="fontIconBox-label">
{this.label}
</div>;
@@ -211,7 +215,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
style={{ color: color, backgroundColor: backgroundColor, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
onClick={action(() => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen)}>
<FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
- {!this.label || !Doc.UserDoc()._showLabel ? (null) : <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor }}> {this.label} </div>}
+ {!this.label || !FontIconBox.GetShowLabels() ? (null) : <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor }}> {this.label} </div>}
<div
className="menuButton-dropdown"
style={{ borderBottomRightRadius: this.dropdown ? 0 : undefined }}>
@@ -269,7 +273,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
// Get items to place into the list
const list = this.buttonList.map((value) => {
- if (Doc.UserDoc().noviceMode && !noviceList.includes(value)) {
+ if (Doc.noviceMode && !noviceList.includes(value)) {
return;
}
return <div className="list-item" key={`${value}`}
@@ -282,7 +286,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
</div>;
});
- const label = !this.label || !Doc.UserDoc()._showLabel ? (null) :
+ const label = !this.label || !FontIconBox.GetShowLabels() ? (null) :
<div className="fontIconBox-label" style={{ bottom: 0, position: "absolute", color: color, backgroundColor: backgroundColor }}>
{this.label}
</div>;
@@ -336,7 +340,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
const curColor = this.colorScript?.script.run({ value: undefined, _readOnly_: true }).result ?? "transparent";
- const label = !this.label || !Doc.UserDoc()._showLabel ? (null) :
+ const label = !this.label || !FontIconBox.GetShowLabels() ? (null) :
<div className="fontIconBox-label" style={{ color, backgroundColor }}>
{this.label}
</div>;
@@ -348,7 +352,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
</div>;
setTimeout(() => this.colorPicker(curColor)); // cause an update to the color picker rendered in MainView
return (
- <div className={`menuButton ${this.type + (Doc.UserDoc()._showLabel ? "Label" : "")} ${this.colorPickerClosed}`}
+ <div className={`menuButton ${this.type + (FontIconBox.GetShowLabels() ? "Label" : "")} ${this.colorPickerClosed}`}
style={{ color: color, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
onClick={action(() => this.colorPickerClosed = !this.colorPickerClosed)}
onPointerDown={e => e.stopPropagation()}>
@@ -380,7 +384,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
// Button label
- const label = !this.label || !Doc.UserDoc()._showLabel ? (null) :
+ const label = !this.label || !FontIconBox.GetShowLabels() ? (null) :
<div className="fontIconBox-label" style={{ color, backgroundColor }}>
{this.label}
</div>;
@@ -399,7 +403,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
);
} else {
return (
- <div className={`menuButton ${this.type + (Doc.UserDoc()._showLabel ? "Label" : "")}`}
+ <div className={`menuButton ${this.type + (FontIconBox.GetShowLabels() ? "Label" : "")}`}
style={{ opacity: 1, backgroundColor, color }}>
<FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
{label}
@@ -422,7 +426,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
style={{ backgroundColor: "transparent", borderBottomLeftRadius: this.dropdown ? 0 : undefined }}>
<div className="menuButton-wrap">
<FontAwesomeIcon className={`menuButton-icon-${this.type}`} icon={this.icon} color={"black"} size={"sm"} />
- {!this.label || !Doc.UserDoc()._showLabel ? (null) :
+ {!this.label || !FontIconBox.GetShowLabels() ? (null) :
<div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor }}> {this.label} </div>}
</div>
</div>
@@ -449,12 +453,12 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
render() {
const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
- const label = !this.label || !Doc.UserDoc()._showLabel ? (null) :
+ const label = !this.label || !FontIconBox.GetShowLabels() ? (null) :
<div className="fontIconBox-label" style={{ color, backgroundColor }}>
{this.label}
</div>;
- const menuLabel = !this.label || !Doc.UserDoc()._showMenuLabel ? (null) :
+ const menuLabel = !this.label || !FontIconBox.GetShowLabels() ? (null) :
<div className="fontIconBox-label" style={{ color, backgroundColor: "transparent" }}>
{this.label}
</div>;
@@ -496,7 +500,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
break;
case ButtonType.ToolButton:
button = (
- <div className={`menuButton ${this.type + (Doc.UserDoc()._showLabel ? "Label" : "")}`} style={{ opacity: 1, backgroundColor, color }}>
+ <div className={`menuButton ${this.type + (FontIconBox.GetShowLabels() ? "Label" : "")}`} style={{ opacity: 1, backgroundColor, color }}>
<FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
{label}
</div>
@@ -508,7 +512,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
break;
case ButtonType.ClickButton:
button = (
- <div className={`menuButton ${this.type + (Doc.UserDoc()._showLabel ? "Label" : "")}`} style={{ color, backgroundColor, opacity: 1 }}>
+ <div className={`menuButton ${this.type + (FontIconBox.GetShowLabels() ? "Label" : "")}`} style={{ color, backgroundColor, opacity: 1 }}>
<FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
{label}
</div>
@@ -521,7 +525,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
<div className={`menuButton ${this.type}`} style={{ color, backgroundColor }}>
{this.icon === "pres-trail" ? trailsIcon : <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />}
{menuLabel}
- <FontIconBadge collection={Cast(this.rootDoc.watchedDocuments, Doc, null)} />
+ <FontIconBadge value={Cast(this.Document.badgeValue,"string",null)} />
</div >
);
break;
@@ -567,8 +571,8 @@ ScriptingGlobals.add(function setHeaderColor(color?: string, checkResult?: boole
// toggle: Set overlay status of selected document
ScriptingGlobals.add(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 (checkResult) {
+ if (NumCast(selected?.Document.z) >= 1) return Colors.MEDIUM_BLUE;
return "transparent";
}
selected ? selected.props.CollectionFreeFormDocumentView?.().float() : console.log("[FontIconBox.tsx] toggleOverlay failed");
@@ -674,10 +678,9 @@ ScriptingGlobals.add(function setFontSize(size: string | number, checkResult?: b
ScriptingGlobals.add(function toggleNoAutoLinkAnchor(checkResult?: boolean) {
const editorView = RichTextMenu.Instance?.TextView?.EditorView;
if (checkResult) {
- return (editorView ? RichTextMenu.Instance.noAutoLink : Doc.UserDoc().noAutoLink) ? Colors.MEDIUM_BLUE : "transparent";
+ return (editorView ? RichTextMenu.Instance.noAutoLink : false) ? Colors.MEDIUM_BLUE : "transparent";
}
if (editorView) RichTextMenu.Instance?.toggleNoAutoLinkAnchor();
- else Doc.UserDoc().noAutoLink = Doc.UserDoc().noAutoLink ? true : false;
});
ScriptingGlobals.add(function toggleBold(checkResult?: boolean) {
@@ -710,7 +713,7 @@ ScriptingGlobals.add(function toggleItalic(checkResult?: boolean) {
export function checkInksToGroup() {
// console.log("getting here to inks group");
- if (CurrentUserUtils.SelectedTool === InkTool.Write) {
+ if (CurrentUserUtils.ActiveTool === InkTool.Write) {
CollectionFreeFormView.collectionsWithUnprocessedInk.forEach(ffView => {
// TODO: nda - will probably want to go through ffView unprocessed docs and then see if any of the inksToGroup docs are in it and only use those
// find all inkDocs in ffView.unprocessedDocs that are within 200 pixels of each other
@@ -723,7 +726,7 @@ export function checkInksToGroup() {
export function createInkGroup(inksToGroup?: Doc[], isSubGroup?: boolean) {
// TODO nda - if document being added to is a inkGrouping then we can just add to that group
- if (CurrentUserUtils.SelectedTool === InkTool.Write) {
+ if (CurrentUserUtils.ActiveTool === InkTool.Write) {
CollectionFreeFormView.collectionsWithUnprocessedInk.forEach(ffView => {
// TODO: nda - will probably want to go through ffView unprocessed docs and then see if any of the inksToGroup docs are in it and only use those
const selected = ffView.unprocessedDocs;
@@ -785,38 +788,38 @@ export function createInkGroup(inksToGroup?: Doc[], isSubGroup?: boolean) {
/** INK
- * setActiveInkTool
+ * setActiveTool
* setStrokeWidth
* setStrokeColor
**/
-ScriptingGlobals.add(function setActiveInkTool(tool: string, checkResult?: boolean) {
+ScriptingGlobals.add(function setActiveTool(tool: string, checkResult?: boolean) {
InkTranscription.Instance?.createInkGroup();
if (checkResult) {
- return ((Doc.UserDoc().activeInkTool === tool && !GestureOverlay.Instance?.InkShape) || GestureOverlay.Instance?.InkShape === tool) ?
+ return ((CurrentUserUtils.ActiveTool === tool && !GestureOverlay.Instance?.InkShape) || GestureOverlay.Instance?.InkShape === tool) ?
Colors.MEDIUM_BLUE : "transparent";
}
if (["circle", "square", "line"].includes(tool)) {
if (GestureOverlay.Instance.InkShape === tool) {
- Doc.UserDoc().activeInkTool = InkTool.None;
+ CurrentUserUtils.ActiveTool = InkTool.None;
GestureOverlay.Instance.InkShape = InkTool.None;
} else {
- Doc.UserDoc().activeInkTool = InkTool.Pen;
+ CurrentUserUtils.ActiveTool = InkTool.Pen;
GestureOverlay.Instance.InkShape = tool;
}
} else if (tool) { // pen or eraser
- if (Doc.UserDoc().activeInkTool === tool && !GestureOverlay.Instance.InkShape) {
- Doc.UserDoc().activeInkTool = InkTool.None;
- } else if (tool == "write") {
+ if (CurrentUserUtils.ActiveTool === tool && !GestureOverlay.Instance.InkShape) {
+ CurrentUserUtils.ActiveTool = InkTool.None;
+ } else if (tool == InkTool.Write) {
// console.log("write mode selected - create groupDoc here!", tool)
- Doc.UserDoc().activeInkTool = tool;
+ CurrentUserUtils.ActiveTool = tool;
GestureOverlay.Instance.InkShape = "";
} else {
- Doc.UserDoc().activeInkTool = tool;
+ CurrentUserUtils.ActiveTool = tool as any;
GestureOverlay.Instance.InkShape = "";
}
} else {
- Doc.UserDoc().activeInkTool = InkTool.None;
+ CurrentUserUtils.ActiveTool = InkTool.None;
}
});
@@ -900,9 +903,9 @@ ScriptingGlobals.add(function toggleSchemaPreview(checkResult?: boolean) {
}
else if (selected) {
if (NumCast(selected.schemaPreviewWidth) > 0) {
- selected.schemaPreviewWidth = 200;
- } else {
selected.schemaPreviewWidth = 0;
+ } else {
+ selected.schemaPreviewWidth = 200;
}
}
});
diff --git a/src/client/views/nodes/button/colorDropdown/ColorDropdown.tsx b/src/client/views/nodes/button/colorDropdown/ColorDropdown.tsx
index 235495250..7f414ddbb 100644
--- a/src/client/views/nodes/button/colorDropdown/ColorDropdown.tsx
+++ b/src/client/views/nodes/button/colorDropdown/ColorDropdown.tsx
@@ -5,6 +5,7 @@ import { IButtonProps } from '../ButtonInterface';
import { ColorState, SketchPicker } from 'react-color';
import { ScriptField } from '../../../../../fields/ScriptField';
import { Doc } from '../../../../../fields/Doc';
+import { FontIconBox } from '../FontIconBox';
export class ColorDropdown extends Component<IButtonProps> {
render() {
@@ -31,7 +32,7 @@ export class ColorDropdown extends Component<IButtonProps> {
disableAlpha={!stroke}
onChange={func} color={boolResult ? boolResult : "#FFFFFF"}
presetColors={colorOptions} />;
- const label = !this.props.label || !Doc.UserDoc()._showLabel ? (null) :
+ const label = !this.props.label || !FontIconBox.GetShowLabels() ? (null) :
<div className="fontIconBox-label" style={{ color: this.props.color, backgroundColor: this.props.backgroundColor, position: "absolute" }}>
{this.props.label}
</div>;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 19:40:04 +0000