aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/button/FontIconBox.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/button/FontIconBox.tsx')
-rw-r--r--src/client/views/nodes/button/FontIconBox.tsx63
1 files changed, 21 insertions, 42 deletions
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index b1d74261b..9d1ef937f 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -26,12 +26,10 @@ import { SetActiveInkColor, ActiveFillColor, SetActiveFillColor, ActiveInkWidth,
import { StyleProp } from '../../StyleProvider';
import { FieldView, FieldViewProps } from '.././FieldView';
import { RichTextMenu } from '../formattedText/RichTextMenu';
-import { TextButton } from './textButton';
-import { ToggleButton } from './toggleButton';
+import { Utils } from '../../../../Utils';
import { IButtonProps } from './ButtonInterface';
import { FontIconBadge } from './FontIconBadge';
import './FontIconBox.scss';
-import { undo } from 'prosemirror-history';
import { WebBox } from '../WebBox';
const FontIconSchema = createSchema({
icon: "string",
@@ -246,7 +244,6 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
let text: string | undefined;
let dropdown = true;
let icon: IconProp = "caret-down";
- let noneSelected: boolean = false;
if (script === 'setView') {
const selected = SelectionManager.Docs().lastElement();
@@ -301,7 +298,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
<div className={`menuButton ${this.type} ${active}`}
style={{ backgroundColor: this.rootDoc.dropDownOpen ? Colors.MEDIUM_BLUE : backgroundColor, color: color, display: dropdown ? undefined : "flex" }}
onClick={dropdown ? () => this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen : undefined}>
- {dropdown || noneSelected ? (null) : <FontAwesomeIcon style={{ marginLeft: 5 }} className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />}
+ {dropdown ? (null) : <FontAwesomeIcon style={{ marginLeft: 5 }} className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />}
<div className="menuButton-dropdown-header">
{text && text[0].toUpperCase() + text.slice(1)}
</div>
@@ -334,23 +331,14 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
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 = (<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', "transparent"];
const colorBox = (func: (color: ColorState) => void) => <SketchPicker
- disableAlpha={!stroke}
- onChange={func} color={boolResult ? boolResult : "#FFFFFF"}
+ disableAlpha={false}
+ onChange={func}
+ color={boolResult ? boolResult : "#FFFFFF"}
presetColors={colorOptions} />;
const label = !this.label || !Doc.UserDoc()._showLabel ? (null) :
<div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor, position: "absolute" }}>
@@ -364,21 +352,16 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
</div>;
const click = (value: ColorState) => {
- const hex: string = value.hex;
- const s = ScriptField.MakeScript(script + '("' + hex + '", false)');
- if (s) {
- undoBatch(() => s.script.run().result)();
- }
+ const s = ScriptField.MakeScript(script + '("' + Utils.colorString(value) + '", false)');
+ s && undoBatch(() => s.script.run().result)();
};
return (
<div className={`menuButton ${this.type} ${active}`}
style={{ color: color, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
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></>}
+ <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
+ <div className="colorButton-color" style={{ backgroundColor: boolResult ? boolResult : "#FFFFFF" }} />
{label}
{/* {dropdownCaret} */}
{this.rootDoc.dropDownOpen ?
@@ -499,7 +482,7 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
backgroundColor: backgroundColor,
icon: this.icon,
color: color
- }
+ };
const buttonText = StrCast(this.rootDoc.buttonText);
@@ -522,7 +505,6 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
// button = <TextButton {...buttonProps}></TextButton>
break;
case ButtonType.EditableText:
- console.log("Editable text");
button = this.editableText;
break;
case ButtonType.NumberButton:
@@ -592,7 +574,6 @@ Scripting.addGlobal(function setBackgroundColor(color?: string, checkResult?: bo
const selected = SelectionManager.Docs().lastElement();
if (checkResult) {
if (selected) {
- console.log("[Background] (selected): " + StrCast(selected._backgroundColor));
return selected._backgroundColor;
} else {
return "#FFFFFF";
@@ -605,6 +586,9 @@ Scripting.addGlobal(function setBackgroundColor(color?: string, checkResult?: bo
// toggle: Set overlay status of selected document
Scripting.addGlobal(function setHeaderColor(color?: string, checkResult?: boolean) {
+ if (checkResult) {
+ return Doc.SharingDoc().userColor;
+ }
Doc.SharingDoc().userColor = undefined;
Doc.GetProto(Doc.SharingDoc()).userColor = color;
Doc.UserDoc().showTitle = color === "transparent" ? undefined : StrCast(Doc.UserDoc().showTitle, "creationDate");
@@ -685,14 +669,12 @@ Scripting.addGlobal(function setBulletList(mapStyle: "bullet" | "decimal", check
const editorView = RichTextMenu.Instance?.TextView?.EditorView;
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) {
const active = editorView?.state && RichTextMenu.Instance.getActiveListStyle();
if (active === mapStyle) {
- console.log("set bullet list");
editorView?.state && RichTextMenu.Instance.changeListType(editorView.state.schema.nodes.ordered_list.create({ mapStyle: "" }));
} else {
editorView?.state && RichTextMenu.Instance.changeListType(editorView.state.schema.nodes.ordered_list.create({ mapStyle: mapStyle }));
@@ -707,10 +689,8 @@ Scripting.addGlobal(function setFontColor(color?: string, checkResult?: boolean)
if (checkResult) {
if (selected) {
- console.log("[Font color] (selected): " + StrCast(selected._fontColor));
return selected._fontColor;
} else {
- console.log("[Font color] (global): " + StrCast(Doc.UserDoc()._fontColor));
return Doc.UserDoc()._fontColor;
}
}
@@ -760,12 +740,16 @@ Scripting.addGlobal(function setFontSize(size: string, checkResult?: boolean) {
Scripting.addGlobal(function toggleBold(checkResult?: boolean) {
if (checkResult) {
- if (Doc.UserDoc().bold) return Colors.MEDIUM_BLUE;
+ const editorView = RichTextMenu.Instance.TextView?.EditorView;
+ if (editorView) {
+ const bold: boolean = editorView?.state && RichTextMenu.Instance.getBoldStatus();
+ if (bold) return Colors.MEDIUM_BLUE;
+ else return "transparent";
+ }
else return "transparent";
}
const editorView = RichTextMenu.Instance.TextView?.EditorView;
if (editorView) {
- console.log("editorView");
editorView?.state && RichTextMenu.Instance.toggleBold(editorView, true);
}
SelectionManager.Docs().filter(doc => StrCast(doc.type) === DocumentType.RTF).map(doc => doc.bold = !doc.bold);
@@ -775,12 +759,10 @@ Scripting.addGlobal(function toggleBold(checkResult?: boolean) {
Scripting.addGlobal(function toggleUnderline(checkResult?: boolean) {
if (checkResult) {
- if (Doc.UserDoc().underline) return Colors.MEDIUM_BLUE;
- else return "transparent";
+ return "transparent";
}
const editorView = RichTextMenu.Instance.TextView?.EditorView;
if (editorView) {
- console.log("editorView");
editorView?.state && RichTextMenu.Instance.toggleUnderline(editorView, true);
}
SelectionManager.Docs().filter(doc => StrCast(doc.type) === DocumentType.RTF).map(doc => doc.underline = !doc.underline);
@@ -790,12 +772,10 @@ Scripting.addGlobal(function toggleUnderline(checkResult?: boolean) {
Scripting.addGlobal(function toggleItalic(checkResult?: boolean) {
if (checkResult) {
- if (Doc.UserDoc().italic) return Colors.MEDIUM_BLUE;
- else return "transparent";
+ return "transparent";
}
const editorView = RichTextMenu.Instance.TextView?.EditorView;
if (editorView) {
- console.log("editorView");
editorView?.state && RichTextMenu.Instance.toggleItalic(editorView, true);
}
SelectionManager.Docs().filter(doc => StrCast(doc.type) === DocumentType.RTF).map(doc => doc.italic = !doc.italic);
@@ -909,7 +889,6 @@ Scripting.addGlobal(function webBack() {
**/
Scripting.addGlobal(function toggleSchemaPreview(checkResult?: boolean) {
const selected = SelectionManager.Docs().lastElement();
- console.log(selected && selected.title);
if (checkResult && selected) {
const result: boolean = NumCast(selected.schemaPreviewWidth) > 0;
if (result) return Colors.MEDIUM_BLUE;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-13 19:59:28 +0000