aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/FontIconBox
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/FontIconBox')
-rw-r--r--src/client/views/nodes/FontIconBox/FontIconBox.tsx118
1 files changed, 61 insertions, 57 deletions
diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
index d132707fa..14a3d16ef 100644
--- a/src/client/views/nodes/FontIconBox/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
@@ -6,11 +6,11 @@ import { observer } from 'mobx-react';
import * as React from 'react';
import { Doc, DocListCast, StrListCast } from '../../../../fields/Doc';
import { ScriptField } from '../../../../fields/ScriptField';
-import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types';
-import { colorMapping } from '../../../../server/DashSession/Session/utilities/session_config';
-import { Utils } from '../../../../Utils';
+import { BoolCast, Cast, DocCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types';
+import { emptyFunction, setupMoveUpEvents, Utils } from '../../../../Utils';
import { CollectionViewType, DocumentType } from '../../../documents/DocumentTypes';
import { SelectionManager } from '../../../util/SelectionManager';
+import { SettingsManager } from '../../../util/SettingsManager';
import { undoable, UndoManager } from '../../../util/UndoManager';
import { ContextMenu } from '../../ContextMenu';
import { DocComponent } from '../../DocComponent';
@@ -19,7 +19,6 @@ import { SelectedDocView } from '../../selectedDoc';
import { StyleProp } from '../../StyleProvider';
import { OpenWhere } from '../DocumentView';
import { FieldView, FieldViewProps } from '../FieldView';
-import { RichTextMenu } from '../formattedText/RichTextMenu';
import './FontIconBox.scss';
import TrailsIcon from './TrailsIcon';
@@ -68,19 +67,6 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
}
};
- static GetShowLabels() {
- return BoolCast(Doc.UserDoc()._showLabel);
- }
- static SetShowLabels(show: boolean) {
- Doc.UserDoc()._showLabel = show;
- }
- static GetRecognizeGestures() {
- return BoolCast(Doc.UserDoc()._recognizeGestures);
- }
- static SetRecognizeGestures(show: boolean) {
- Doc.UserDoc()._recognizeGestures = show;
- }
-
// Determining UI Specs
@computed get label() {
return StrCast(this.rootDoc.icon_label, StrCast(this.rootDoc.title));
@@ -140,11 +126,11 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
// Script for checking the outcome of the toggle
const checkResult = Number(Number(numScript().result ?? 0).toPrecision(NumCast(this.dataDoc.numPrecision, 3)));
- const label = !FontIconBox.GetShowLabels() ? null : <div className="fontIconBox-label">{this.label}</div>;
return (
<NumberDropdown
color={color}
+ background={SettingsManager.userBackgroundColor}
numberDropdownType={type}
showPlusMinus={false}
tooltip={this.label}
@@ -168,14 +154,14 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
return (
<div
className={`menuButton ${this.type} ${active}`}
- style={{ color: color, backgroundColor: backgroundColor, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
+ style={{ color, backgroundColor, borderBottomLeftRadius: this.dropdown ? 0 : undefined }}
onClick={action(() => {
this.rootDoc.dropDownOpen = !this.rootDoc.dropDownOpen;
this.noTooltip = this.rootDoc.dropDownOpen;
Doc.UnBrushAllDocs();
})}>
{this.Icon(color)}
- {!this.label || !FontIconBox.GetShowLabels() ? null : (
+ {!this.label || !Doc.GetShowIconLabels() ? null : (
<div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor }}>
{' '}
{this.label}{' '}
@@ -189,59 +175,69 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
);
}
+ dropdownItemDown = (e: React.PointerEvent, value: string | number) => {
+ setupMoveUpEvents(
+ this,
+ e,
+ (e: PointerEvent) => {
+ return ScriptCast(this.rootDoc.onDragScript)?.script.run({ this: this.layoutDoc, self: this.rootDoc, value: { doc: value, e } }).result;
+ },
+ emptyFunction,
+ emptyFunction
+ );
+ return false;
+ };
+
/**
* Dropdown list
*/
@computed get dropdownListButton() {
- const active: string = StrCast(this.rootDoc.dropDownOpen);
- const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
- const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
-
const script = ScriptCast(this.rootDoc.script);
let noviceList: string[] = [];
let text: string | undefined;
- let dropdown = true;
let getStyle: (val: string) => any = () => {};
let icon: IconProp = 'caret-down';
- let isViewDropdown: boolean = script?.script.originalScript.startsWith('setView');
- try {
- if (isViewDropdown) {
- const selectedDocs: Doc[] = SelectionManager.Docs();
- const selected = SelectionManager.Docs().lastElement();
- if (selected) {
- if (StrCast(selected.type) === DocumentType.COL) {
- text = StrCast(selected._type_collection);
+ const isViewDropdown = script?.script.originalScript.startsWith('setView');
+ if (isViewDropdown) {
+ const selected = SelectionManager.Docs();
+ if (selected.lastElement()) {
+ if (StrCast(selected.lastElement().type) === DocumentType.COL) {
+ text = StrCast(selected.lastElement()._type_collection);
+ } else {
+ if (selected.length > 1) {
+ text = selected.length + ' selected';
} else {
- dropdown = false;
- if (selectedDocs.length > 1) {
- text = selectedDocs.length + ' selected';
- } else {
- text = Utils.cleanDocumentType(StrCast(selected.type) as DocumentType);
- icon = Doc.toIcon(selected);
- }
- return <Popup icon={<FontAwesomeIcon size={'1x'} icon={icon} />} text={text} type={Type.TERT} color={color} popup={<SelectedDocView selectedDocs={selectedDocs} />} fillWidth />;
+ text = Utils.cleanDocumentType(StrCast(selected.lastElement().type) as DocumentType);
+ icon = Doc.toIcon(selected.lastElement());
}
- } else {
- dropdown = false;
- return <Button text={`None Selected`} type={Type.TERT} color={color} fillWidth inactive />;
+ return (
+ <Popup
+ icon={<FontAwesomeIcon size={'1x'} icon={icon} />}
+ text={text}
+ type={Type.TERT}
+ color={SettingsManager.userColor}
+ background={SettingsManager.userVariantColor}
+ popup={<SelectedDocView selectedDocs={selected} />}
+ fillWidth
+ />
+ );
}
- noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Stacking, CollectionViewType.NoteTaking];
} else {
- text = StrCast((RichTextMenu.Instance?.TextView?.EditorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily);
- getStyle = (val: string) => {
- return { fontFamily: val };
- };
+ return <Button text="None Selected" type={Type.TERT} color={SettingsManager.userColor} background={SettingsManager.userVariantColor} fillWidth inactive />;
}
- } catch (e) {
- console.log(e);
+ noviceList = [CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Carousel3D, CollectionViewType.Stacking, CollectionViewType.NoteTaking];
+ } else {
+ text = script?.script.run({ this: this.layoutDoc, self: this.rootDoc, value: '', _readOnly_: true }).result;
+ // text = StrCast((RichTextMenu.Instance?.TextView?.EditorView ? RichTextMenu.Instance : Doc.UserDoc()).fontFamily);
+ getStyle = (val: string) => ({ fontFamily: val });
}
// Get items to place into the list
const list: IListItemProps[] = this.buttonList
.filter(value => !Doc.noviceMode || !noviceList.length || noviceList.includes(value))
.map(value => ({
- text: value.charAt(0).toUpperCase() + value.slice(1),
+ text: typeof value === 'string' ? value.charAt(0).toUpperCase() + value.slice(1) : StrCast(DocCast(value)?.title),
val: value,
style: getStyle(value),
onClick: undoable(() => script.script.run({ this: this.layoutDoc, self: this.rootDoc, value }), value),
@@ -251,10 +247,13 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
return (
<Dropdown
selectedVal={text}
- setSelectedVal={undoable(val => script.script.run({ this: this.layoutDoc, self: this.rootDoc, val }), `dropdown select ${this.label}`)}
- color={color}
- type={isViewDropdown ? Type.TERT : Type.PRIM}
+ setSelectedVal={undoable(value => script.script.run({ this: this.layoutDoc, self: this.rootDoc, value }), `dropdown select ${this.label}`)}
+ color={SettingsManager.userColor}
+ background={SettingsManager.userVariantColor}
+ type={Type.TERT}
+ closeOnSelect={false}
dropdownType={DropdownType.SELECT}
+ onItemDown={this.dropdownItemDown}
items={list}
tooltip={this.label}
fillWidth
@@ -290,6 +289,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
selectedColor={curColor}
type={Type.PRIM}
color={color}
+ background={SettingsManager.userBackgroundColor}
icon={this.Icon(color)!}
tooltip={tooltip}
label={this.label}
@@ -310,6 +310,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
tooltip={`Toggle ${tooltip}`}
type={Type.PRIM}
color={color}
+ background={SettingsManager.userBackgroundColor}
label={this.label}
items={DocListCast(this.rootDoc.data).map(item => ({
icon: <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={StrCast(item.icon) as any} color={color} />,
@@ -344,6 +345,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
toggleStatus={toggleStatus}
text={buttonText}
color={color}
+ //background={SettingsManager.userBackgroundColor}
icon={this.Icon(color)!}
label={this.label}
onPointerDown={() => script.script.run({ this: this.layoutDoc, self: this.rootDoc, value: !toggleStatus, _readOnly_: false })}
@@ -400,8 +402,10 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
case ButtonType.ToggleButton: return this.toggleButton;
case ButtonType.ClickButton:
case ButtonType.ToolButton: return <IconButton {...btnProps} size={Size.LARGE} color={color} />;
- case ButtonType.TextButton: return <Button {...btnProps} text={StrCast(this.rootDoc.buttonText)}/>;
- case ButtonType.MenuButton: return <IconButton {...btnProps} color={color} size={Size.LARGE} tooltipPlacement='right' onPointerDown={scriptFunc} />;
+ case ButtonType.TextButton: return <Button {...btnProps} color={color}
+ background={SettingsManager.userBackgroundColor} text={StrCast(this.rootDoc.buttonText)}/>;
+ case ButtonType.MenuButton: return <IconButton {...btnProps} color={color}
+ background={SettingsManager.userBackgroundColor} size={Size.LARGE} tooltipPlacement='right' onPointerDown={scriptFunc} />;
}
return this.defaultButton;
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-02-27 21:09:53 +0000