From 507cdb40d5553c8a325ddb158b9a1f4e5672ac15 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 11 Sep 2023 22:35:42 -0400 Subject: moved edit on click script to developer. fixed highlight options for My text. enabled chromeHidden for all doc types and applied it to RTF text boxes. updated sliders in properties view to undo properly and to autorange, and cleaned up ode. --- src/client/views/PropertiesSection.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src/client/views/PropertiesSection.tsx') diff --git a/src/client/views/PropertiesSection.tsx b/src/client/views/PropertiesSection.tsx index b72e048df..0e7cd7e92 100644 --- a/src/client/views/PropertiesSection.tsx +++ b/src/client/views/PropertiesSection.tsx @@ -8,7 +8,7 @@ import { StrCast } from '../../fields/Types'; export interface PropertiesSectionProps { title: string; - content?: JSX.Element | string | null; + children?: JSX.Element | string | null; isOpen: boolean; setIsOpen: (bool: boolean) => any; inSection?: boolean; @@ -33,7 +33,7 @@ export class PropertiesSection extends React.Component { @observable isDouble: boolean = false; render() { - if (this.props.content === undefined || this.props.content === null) return null; + if (this.props.children === undefined || this.props.children === null) return null; else return (
this.props.setInSection && this.props.setInSection(true))} onPointerLeave={action(() => this.props.setInSection && this.props.setInSection(false))}> @@ -58,7 +58,7 @@ export class PropertiesSection extends React.Component {
- {!this.props.isOpen ? null :
{this.props.content}
} + {!this.props.isOpen ? null :
{this.props.children}
} ); } -- cgit v1.2.3-70-g09d2 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/client/views/PropertiesSection.tsx') 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) => (