From 3a048ae3acbbf63611bfbb7cded772fc3decd526 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 11 Sep 2023 22:58:56 -0400 Subject: usercolor cleanup --- src/client/util/RTFMarkup.tsx | 2 +- src/client/views/AntimodeMenu.tsx | 7 +- src/client/views/ContextMenu.tsx | 7 +- src/client/views/PropertiesButtons.tsx | 5 +- src/client/views/PropertiesSection.tsx | 7 +- src/client/views/PropertiesView.tsx | 21 +++--- src/client/views/StyleProvider.tsx | 8 +-- src/client/views/collections/CollectionMenu.tsx | 6 +- .../views/collections/CollectionStackingView.tsx | 3 +- src/client/views/collections/TreeView.tsx | 5 +- .../collectionFreeForm/MarqueeOptionsMenu.tsx | 38 ++--------- src/client/views/nodes/MapBox/MapAnchorMenu.tsx | 75 +++++++++++----------- src/client/views/nodes/MapBox/MapBox.tsx | 3 +- 13 files changed, 82 insertions(+), 105 deletions(-) (limited to 'src') diff --git a/src/client/util/RTFMarkup.tsx b/src/client/util/RTFMarkup.tsx index 9dd14a3c3..c8940194c 100644 --- a/src/client/util/RTFMarkup.tsx +++ b/src/client/util/RTFMarkup.tsx @@ -137,7 +137,7 @@ export class RTFMarkup extends React.Component<{}> { render() { return ( extends React.Co left: this._left, top: this._top, opacity: this._opacity, - background: StrCast(Doc.UserDoc().userBackgroundColor), + background: SettingsManager.userBackgroundColor, transitionProperty: this._transitionProperty, transitionDuration: this._transitionDuration, transitionDelay: this._transitionDelay, @@ -176,7 +177,7 @@ export abstract class AntimodeMenu extends React.Co height: 'inherit', width: 200, opacity: this._opacity, - background: StrCast(Doc.UserDoc().userBackgroundColor), + background: SettingsManager.userBackgroundColor, transitionProperty: this._transitionProperty, transitionDuration: this._transitionDuration, transitionDelay: this._transitionDelay, @@ -199,7 +200,7 @@ export abstract class AntimodeMenu extends React.Co left: this._left, top: this._top, opacity: this._opacity, - background: StrCast(Doc.UserDoc().userBackgroundColor), + background: SettingsManager.userBackgroundColor, transitionProperty: this._transitionProperty, transitionDuration: this._transitionDuration, transitionDelay: this._transitionDelay, diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx index 8412a9aae..adefc7e9c 100644 --- a/src/client/views/ContextMenu.tsx +++ b/src/client/views/ContextMenu.tsx @@ -7,6 +7,7 @@ import { ContextMenuItem, ContextMenuProps, OriginalMenuProps } from './ContextM import { Utils } from '../../Utils'; import { StrCast } from '../../fields/Types'; import { Doc } from '../../fields/Doc'; +import { SettingsManager } from '../util/SettingsManager'; @observer export class ContextMenu extends React.Component { @@ -195,7 +196,7 @@ export class ContextMenu extends React.Component {
{value.join(' -> ')}
@@ -222,8 +223,8 @@ export class ContextMenu extends React.Component { style={{ left: this.pageX, ...(this._yRelativeToTop ? { top: this.pageY } : { bottom: this.pageY }), - background: StrCast(Doc.UserDoc().userBackgroundColor), - color: StrCast(Doc.UserDoc().userColor), + background: SettingsManager.userBackgroundColor, + color: SettingsManager.userColor, }}> {!this.itemsNeedSearch ? null : ( diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 8b2b77aca..40d42a4de 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -32,6 +32,7 @@ import { TfiBarChart } from 'react-icons/tfi'; import { CiGrid31 } from 'react-icons/ci'; import { RxWidth } from 'react-icons/rx'; import { Dropdown, DropdownType, IListItemProps, Toggle, ToggleType, Type } from 'browndash-components'; +import { SettingsManager } from '../util/SettingsManager'; enum UtilityButtonState { Default, @@ -57,7 +58,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { { selectedVal={this.onClickVal} setSelectedVal={val => this.handleOptionChange(val as string)} title={'Choose onClick behaviour'} - color={StrCast(Doc.UserDoc().userColor)} + color={SettingsManager.userColor} dropdownType={DropdownType.SELECT} type={Type.SEC} fillWidth diff --git a/src/client/views/PropertiesSection.tsx b/src/client/views/PropertiesSection.tsx index 0e7cd7e92..bd586b2f9 100644 --- a/src/client/views/PropertiesSection.tsx +++ b/src/client/views/PropertiesSection.tsx @@ -5,6 +5,7 @@ import { observer } from 'mobx-react'; import './PropertiesSection.scss'; import { Doc } from '../../fields/Doc'; import { StrCast } from '../../fields/Types'; +import { SettingsManager } from '../util/SettingsManager'; export interface PropertiesSectionProps { title: string; @@ -19,15 +20,15 @@ export interface PropertiesSectionProps { @observer export class PropertiesSection extends React.Component { @computed get color() { - return StrCast(Doc.UserDoc().userColor); + return SettingsManager.userColor; } @computed get backgroundColor() { - return StrCast(Doc.UserDoc().userBackgroundColor); + return SettingsManager.userBackgroundColor; } @computed get variantColor() { - return StrCast(Doc.UserDoc().userVariantColor); + return SettingsManager.userVariantColor; } @observable isDouble: boolean = false; diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index b25ac7903..699aafe80 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -368,7 +368,7 @@ export class PropertiesView extends React.Component { } size={Size.XSMALL} - color={StrCast(Doc.UserDoc().userColor)} + color={SettingsManager.userColor} onClick={action(() => { if (this.selectedDocumentView || this.selectedDoc) { SharingManager.Instance.open(this.selectedDocumentView?.props.Document === this.selectedDoc ? this.selectedDocumentView : undefined, this.selectedDoc); @@ -518,7 +518,7 @@ export class PropertiesView extends React.Component {


Individuals with Access to this Document
-
+
{
{individualTableEntries}
}
{groupTableEntries.length > 0 ? ( @@ -526,7 +526,7 @@ export class PropertiesView extends React.Component {


Groups with Access to this Document
-
+
{
{groupTableEntries}
}
@@ -546,15 +546,15 @@ export class PropertiesView extends React.Component { toggleCheckbox = () => (this.layoutFields = !this.layoutFields); @computed get color() { - return StrCast(Doc.UserDoc().userColor); + return SettingsManager.userColor; } @computed get backgroundColor() { - return StrCast(Doc.UserDoc().userBackgroundColor); + return SettingsManager.userBackgroundColor; } @computed get variantColor() { - return StrCast(Doc.UserDoc().userVariantColor); + return SettingsManager.userVariantColor; } @computed get editableTitle() { @@ -585,8 +585,6 @@ export class PropertiesView extends React.Component { } @computed get currentType() { - // console.log("current type " + this.selectedDoc?.type) - const documentType = StrCast(this.selectedDoc?.type); var currentType: string = documentType; var capitalizedDocType = Utils.cleanDocumentType(currentType as DocumentType); @@ -610,9 +608,8 @@ export class PropertiesView extends React.Component { if (iconName) { const Icon = Icons[iconName as keyof typeof Icons]; return ; - } else { - return ; } + return ; } @undoBatch @@ -1683,8 +1680,8 @@ export class PropertiesView extends React.Component {
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 8a5ad3139..85aa5ad83 100644 --- a/src/client/views/StyleProvider.tsx +++ b/src/client/views/StyleProvider.tsx @@ -162,8 +162,8 @@ export function DefaultStyleProvider(doc: Opt, props: Opt = StrCast(doc?.[fieldKey + 'color'], StrCast(doc?._color)); if (docColor) return docColor; const docView = props?.DocumentView?.(); @@ -196,7 +196,7 @@ export function DefaultStyleProvider(doc: Opt, props: Opt = StrCast(doc?.[fieldKey + '_backgroundColor'], StrCast(doc?._backgroundColor, isCaption ? 'rgba(0,0,0,0.4)' : '')); // prettier-ignore switch (doc?.type) { @@ -350,7 +350,7 @@ export function DefaultStyleProvider(doc: Opt, props: Opt void) { - const color = StrCast(Doc.UserDoc().userColor); + const color = SettingsManager.userColor; return ( { 0} icon={} @@ -167,7 +167,7 @@ export class CollectionMenu extends AntimodeMenu { 0} icon={} @@ -183,7 +183,7 @@ export class CollectionMenu extends AntimodeMenu { className="collectionMenu-container" style={{ background: SettingsManager.userBackgroundColor, - // borderColor: StrCast(Doc.UserDoc().userColor) + // borderColor: SettingsManager.userColor }}> {this.contMenuButtons} {hardCodedButtons} diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index e4a0d6dad..9ba4cb6cf 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -31,6 +31,7 @@ import { CollectionMasonryViewFieldRow } from './CollectionMasonryViewFieldRow'; import './CollectionStackingView.scss'; import { CollectionStackingViewFieldColumn } from './CollectionStackingViewFieldColumn'; import { CollectionSubView } from './CollectionSubView'; +import { SettingsManager } from '../../util/SettingsManager'; const _global = (window /* browser */ || global) /* node */ as any; export type collectionStackingViewProps = { @@ -426,7 +427,7 @@ export class CollectionStackingView extends CollectionSubView + style={{ cursor: this._cursor, color: SettingsManager.userColor, left: `${this.columnWidth + this.xMargin}px`, top: `${Math.max(0, this.yMargin - 9)}px` }}>
); diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index f1268119e..71e9f4dfa 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -36,6 +36,7 @@ import './TreeView.scss'; import React = require('react'); import { IconButton, Size } from 'browndash-components'; import { TreeSort } from './TreeSort'; +import { SettingsManager } from '../../util/SettingsManager'; export interface TreeViewProps { treeView: CollectionTreeView; @@ -736,7 +737,7 @@ export class TreeView extends React.Component { @computed get renderBullet() { TraceMobx(); const iconType = this.props.treeView.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.TreeViewIcon + (this.treeViewOpen ? ':open' : !this.childDocs.length ? ':empty' : '')) || 'question'; - const color = StrCast(Doc.UserDoc().userColor); + const color = SettingsManager.userColor; const checked = this.onCheckedClick ? this.doc.treeView_Checked ?? 'unchecked' : undefined; return (
{ @observable headerEleWidth = 0; @computed get titleButtons() { const customHeaderButtons = this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations); - const color = StrCast(Doc.UserDoc().userColor); + const color = SettingsManager.userColor; return this.props.treeViewHideHeaderFields() || this.doc.treeView_HideHeaderFields ? null : ( <> {customHeaderButtons} {/* e.g.,. hide button is set by dashboardStyleProvider */} diff --git a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx index 71900c63f..607f9fb95 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx @@ -8,6 +8,7 @@ import { IconButton } from 'browndash-components'; import { StrCast } from '../../../../fields/Types'; import { Doc } from '../../../../fields/Doc'; import { computed } from 'mobx'; +import { SettingsManager } from '../../../util/SettingsManager'; @observer export class MarqueeOptionsMenu extends AntimodeMenu { @@ -27,43 +28,18 @@ export class MarqueeOptionsMenu extends AntimodeMenu { } @computed get userColor() { - return StrCast(Doc.UserDoc().userColor) + return SettingsManager.userColor; } render() { const presPinWithViewIcon = ; const buttons = ( <> - } - color={this.userColor} - /> - this.createCollection(e, true)} - icon={} - color={this.userColor} - /> - } - color={this.userColor} - /> - } - color={this.userColor} - /> - } - color={this.userColor} - /> + } color={this.userColor} /> + this.createCollection(e, true)} icon={} color={this.userColor} /> + } color={this.userColor} /> + } color={this.userColor} /> + } color={this.userColor} /> ); return this.getElement(buttons); diff --git a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx index f731763af..f0827936b 100644 --- a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx +++ b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx @@ -6,7 +6,7 @@ import { ColorState } from 'react-color'; import { Doc, Opt } from '../../../../fields/Doc'; import { returnFalse, setupMoveUpEvents, unimplementedFunction, Utils } from '../../../../Utils'; import { SelectionManager } from '../../../util/SelectionManager'; -import { AntimodeMenu, AntimodeMenuProps } from "../../AntimodeMenu" +import { AntimodeMenu, AntimodeMenuProps } from '../../AntimodeMenu'; import { LinkPopup } from '../../linking/LinkPopup'; import { gptAPICall, GPTCallType } from '../../../apis/gpt/GPT'; // import { GPTPopup, GPTPopupMode } from './../../GPTPopup/GPTPopup'; @@ -15,6 +15,7 @@ import './MapAnchorMenu.scss'; import { ColorPicker, Group, IconButton, Popup, Size, Toggle, ToggleType, Type } from 'browndash-components'; import { StrCast } from '../../../../fields/Types'; import { DocumentType } from '../../../documents/DocumentTypes'; +import { SettingsManager } from '../../../util/SettingsManager'; @observer export class MapAnchorMenu extends AntimodeMenu { @@ -24,9 +25,6 @@ export class MapAnchorMenu extends AntimodeMenu { private _disposer2: IReactionDisposer | undefined; private _commentCont = React.createRef(); - - - public onMakeAnchor: () => Opt = () => undefined; // Method to get anchor from text search public Center: () => void = unimplementedFunction; @@ -90,41 +88,39 @@ export class MapAnchorMenu extends AntimodeMenu { // ); // }; - static top = React.createRef(); // public get Top(){ // return this.top // } - render() { - const buttons =( - <> - {( - } - color={StrCast(Doc.UserDoc().userColor)} - /> - )} - {( - } - color={StrCast(Doc.UserDoc().userColor)} - /> - )} - {( - } - color={StrCast(Doc.UserDoc().userColor)} - /> - )} - {/* {this.IsTargetToggler !== returnFalse && ( + const buttons = ( + <> + { + } + color={SettingsManager.userColor} + /> + } + { + } + color={SettingsManager.userColor} + /> + } + { + } + color={SettingsManager.userColor} + /> + } + {/* {this.IsTargetToggler !== returnFalse && ( { toggleStatus={this.IsTargetToggler()} onClick={this.MakeTargetToggle} icon={} - color={StrCast(Doc.UserDoc().userColor)} + color={SettingsManager.userColor} /> )} */} - - ); + + ); - return this.getElement(
- {buttons} -
+ return this.getElement( +
+ {buttons} +
); } } diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx index 01810fa00..81ca3ff36 100644 --- a/src/client/views/nodes/MapBox/MapBox.tsx +++ b/src/client/views/nodes/MapBox/MapBox.tsx @@ -760,8 +760,9 @@ export class MapBox extends ViewBoxAnnotatableComponent !anno.layout_unrendered) - .map(pushpin => ( + .map((pushpin, i) => (