reworked LabelBox's to be fully editable. gor rid of singleLine for label boxes. made a text_fitBox field to render text with a labelBox. fixed styleprovider in freeformview clusters to be untracked() to avoid invalidations. added a default text color to Settings panel. fixed clicking text buttons to not lose focus in labelBox.

1 files changed, 22 insertions, 2 deletions

diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 9200d68db..33d7d90a8 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button, ColorPicker, Dropdown, DropdownType, EditableText, Group, NumberDropdown, Size, Toggle, ToggleType, Type } from 'browndash-components';
+import { Button, ColorPicker, Colors, Dropdown, DropdownType, EditableText, Group, NumberDropdown, Size, Toggle, ToggleType, Type } from 'browndash-components';
 import { action, computed, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -45,7 +45,6 @@ export class SettingsManager extends React.Component<object> {
     public closeMgr = action(() => {
         this._isOpen = false;
     });
-    // eslint-disable-next-line react/no-unused-class-component-methods
     public openMgr = action(() => {
         this._isOpen = true;
     });
@@ -354,6 +353,27 @@ export class SettingsManager extends React.Component<object> {
                                     Doc.UserDoc().fontSize = val + 'px';
                                 }}
                             />
+                            <ColorPicker
+                                color={SettingsManager.userColor}
+                                type={Type.PRIM}
+                                defaultPickerType="Classic"
+                                selectedColor={StrCast(Doc.UserDoc().textBackgroundColor, Colors.LIGHT_GRAY)}
+                                background={SnappingManager.userBackgroundColor}
+                                icon={<FontAwesomeIcon icon="palette" size="lg" />}
+                                tooltip="default text background color"
+                                label="background"
+                                setSelectedColor={value => {
+                                    Doc.UserDoc().textBackgroundColor = value;
+                                    // if (!this.colorBatch) this.colorBatch = UndoManager.StartBatch(`Set ${tooltip} color`);
+                                    // this.colorScript?.script.run({ this: this.Document, value: value, _readOnly_: false });
+                                }}
+                                setFinalColor={value => {
+                                    Doc.UserDoc().textBackgroundColor = value;
+                                    // this.colorScript?.script.run({ this: this.Document, value: value, _readOnly_: false });
+                                    // this.colorBatch?.end();
+                                    // this.colorBatch = undefined;
+                                }}
+                            />
                             <Dropdown
                                 items={fontFamilies.map(val => ({
                                     text: val,