diff options
5 files changed, 61 insertions, 43 deletions
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 38ebc86e7..081115879 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -816,7 +816,7 @@ pie title Minerals in my tap water } /// initializes a context menu button for the top bar context menu - static setupContextMenuButton(params:Button, btnDoc?:Doc) { + static setupContextMenuButton(params:Button, btnDoc?:Doc, btnContainer?:Doc) { const reqdOpts:DocumentOptions = { ...OmitKeys(params, ["scripts", "funcs", "subMenu"]).omit, color: Colors.WHITE, isSystem: true, @@ -824,6 +824,7 @@ pie title Minerals in my tap water _height: 30, _nativeHeight: 30, linearBtnWidth: params.linearBtnWidth, toolType: params.toolType, expertMode: params.expertMode, _dragOnlyWithinContainer: true, _lockedPosition: true, + _embedContainer: btnContainer }; const reqdFuncs:{[key:string]:any} = { ...params.funcs, @@ -833,15 +834,15 @@ pie title Minerals in my tap water static setupContextMenuBtn(params:Button, menuDoc:Doc):Doc { - const menuBtnDoc = DocListCast(menuDoc?.data).find(doc => doc.title === params.title); + const menuBtnDoc = DocListCast(menuDoc?.data).find( doc => doc.title === params.title); const subMenu = params.subMenu; if (!subMenu) { // button does not have a sub menu - return this.setupContextMenuButton(params, menuBtnDoc); + return this.setupContextMenuButton(params, menuBtnDoc, menuDoc); } // linear view const reqdSubMenuOpts = { ...OmitKeys(params, ["scripts", "funcs", "subMenu"]).omit, undoIgnoreFields: new List<string>(['width', "linearView_IsOpen"]), childDontRegisterViews: true, flexGap: 0, _height: 30, ignoreClick: params.scripts?.onClick ? false : true, - linearView_SubMenu: true, linearView_Expandable: true}; + linearView_SubMenu: true, linearView_Expandable: true, embedContainer: menuDoc}; const items = (menuBtnDoc?:Doc) => !menuBtnDoc ? [] : subMenu.map(sub => this.setupContextMenuBtn(sub, menuBtnDoc) ); const creator = params.btnType === ButtonType.MultiToggleButton ? this.multiToggleList : this.linearButtonList; diff --git a/src/client/views/collections/CollectionNoteTakingView.scss b/src/client/views/collections/CollectionNoteTakingView.scss index 4c2dcf9ab..81000e7a5 100644 --- a/src/client/views/collections/CollectionNoteTakingView.scss +++ b/src/client/views/collections/CollectionNoteTakingView.scss @@ -1,7 +1,7 @@ @import '../global/globalCssVariables.module.scss'; .collectionNoteTakingView-DocumentButtons { - display: none; + opacity: 0; justify-content: space-between; margin: auto; } @@ -15,7 +15,6 @@ .editableView-container-editing-oneLine, .editableView-container-editing { - color: grey; padding: 10px; width: 100%; } @@ -29,7 +28,6 @@ .editableView-input { outline-color: black; letter-spacing: 2px; - color: grey; border: 0px; padding: 12px 10px 11px 10px; } @@ -41,7 +39,6 @@ .editableView-input { outline-color: black; letter-spacing: 2px; - color: grey; border: 0px; padding: 12px 10px 11px 10px; } @@ -51,9 +48,9 @@ display: flex; } -.collectionNoteTakingViewFieldColumn:hover { +.collectionNoteTakingViewFieldColumnHover:hover { .collectionNoteTakingView-DocumentButtons { - display: flex; + opacity: 1; } } @@ -100,6 +97,9 @@ flex-direction: column; height: max-content; } + .collectionNoteTakingViewFieldColumnHover { + min-height: 100%; // if we use this, then we can't have autoHeight + } .collectionSchemaView-previewDoc { height: 100%; @@ -250,7 +250,6 @@ overflow: visible; width: 100%; display: flex; - color: gray; align-items: center; } } @@ -262,10 +261,6 @@ background: $medium-gray; // overflow: hidden; overflow is visible so the color menu isn't hidden -ftong - .editableView-input { - color: $dark-gray; - } - .editableView-input:hover, .editableView-container-editing:hover, .editableView-container-editing-oneLine:hover { @@ -288,7 +283,6 @@ .editableView-container-editing-oneLine, .editableView-container-editing { - color: grey; padding: 10px; } @@ -301,7 +295,6 @@ .editableView-input { padding: 12px 10px 11px 10px; border: 0px; - color: grey; text-align: center; letter-spacing: 2px; outline-color: black; @@ -409,7 +402,6 @@ .editableView-container-editing-oneLine, .editableView-container-editing { - color: grey; padding: 10px; width: 100%; } @@ -423,13 +415,16 @@ .editableView-input { outline-color: black; letter-spacing: 2px; - color: grey; border: 0px; padding: 12px 10px 11px 10px; + &::placeholder { + color: black; + } } } .collectionNoteTakingView-addDocumentButton { + opacity: 0.5; font-size: 75%; letter-spacing: 2px; cursor: pointer; @@ -437,10 +432,12 @@ .editableView-input { outline-color: black; letter-spacing: 2px; - color: grey; border: 0px; padding: 12px 10px 11px 10px; } + &:hover { + opacity: unset; + } } .collectionNoteTakingView-addGroupButton { @@ -499,6 +496,15 @@ } } +.collectionNoteTakingViewLight { + .collectionNoteTakingView-addDocumentButton, + .collectionNoteTakingView-addGroupButton { + .editableView-input::placeholder { + color: white; + } + } +} + @media only screen and (max-device-width: 480px) { .collectionNoteTakingView .collectionNoteTakingView-columnDragger, .collectionNoteTakingView-columnDragger { diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index 5b91216cb..12e2cc1a8 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -9,7 +9,7 @@ import { listSpec } from '../../../fields/Schema'; import { SchemaHeaderField } from '../../../fields/SchemaHeaderField'; import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from '../../../fields/Types'; import { TraceMobx } from '../../../fields/util'; -import { DivHeight, emptyFunction, returnZero, smoothScroll, Utils } from '../../../Utils'; +import { DivHeight, emptyFunction, lightOrDark, returnZero, smoothScroll, Utils } from '../../../Utils'; import { Docs, DocUtils } from '../../documents/Documents'; import { DragManager, dropActionType } from '../../util/DragManager'; import { SnappingManager } from '../../util/SnappingManager'; @@ -26,6 +26,7 @@ import './CollectionNoteTakingView.scss'; import { CollectionNoteTakingViewColumn } from './CollectionNoteTakingViewColumn'; import { CollectionNoteTakingViewDivider } from './CollectionNoteTakingViewDivider'; import { CollectionSubView } from './CollectionSubView'; +import { Colors } from '../global/globalEnums'; const _global = (window /* browser */ || global) /* node */ as any; /** @@ -500,10 +501,11 @@ export class CollectionNoteTakingView extends CollectionSubView() { editableViewProps = () => ({ GetValue: () => '', SetValue: this.addGroup, - contents: '+ New Column', + contents: '+ Column', }); refList = () => this._refList; + backgroundColor = () => this._props.DocumentView?.().backgroundColor(); // sectionNoteTaking returns a CollectionNoteTakingViewColumn (which is an individual column) sectionNoteTaking = (heading: SchemaHeaderField | undefined, docList: Doc[]) => ( @@ -511,7 +513,9 @@ export class CollectionNoteTakingView extends CollectionSubView() { key={heading?.heading ?? 'unset'} PanelWidth={this._props.PanelWidth} refList={this._refList} + backgroundColor={this.backgroundColor} select={this._props.select} + isContentActive={this.isContentActive} addDocument={this.addDocument} chromeHidden={this.chromeHidden} colHeaderData={this.colHeaderData} @@ -613,12 +617,11 @@ export class CollectionNoteTakingView extends CollectionSubView() { TraceMobx(); return ( <div - className="collectionNoteTakingView" + className={`collectionNoteTakingView ${lightOrDark(this.backgroundColor()) === Colors.WHITE ? 'collectionNoteTakingViewLight' : ''}`} ref={this.createRef} - key="notes" style={{ - overflowY: this._props.isContentActive() ? 'auto' : 'hidden', - background: this._props.styleProvider?.(this.Document, this._props, StyleProp.BackgroundColor), + overflowY: this.isContentActive() ? 'auto' : 'hidden', + background: this.backgroundColor(), pointerEvents: this.backgroundEvents, }} onScroll={action(e => (this._scroll = e.currentTarget.scrollTop))} diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx index db178d500..788490b82 100644 --- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx +++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx @@ -1,8 +1,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { action, computed, observable } from 'mobx'; +import { action, computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { returnEmptyString } from '../../../Utils'; +import { lightOrDark, returnEmptyString } from '../../../Utils'; import { Doc, DocListCast, Opt } from '../../../fields/Doc'; import { Id } from '../../../fields/FieldSymbols'; import { RichTextField } from '../../../fields/RichTextField'; @@ -26,6 +26,7 @@ import './CollectionNoteTakingView.scss'; interface CSVFieldColumnProps { Document: Doc; TemplateDataDocument: Opt<Doc>; + backgroundColor?: (() => string) | undefined; docList: Doc[]; heading: string; pivotField: string; @@ -38,6 +39,7 @@ interface CSVFieldColumnProps { gridGap: number; headings: () => object[]; select: (ctrlPressed: boolean) => void; + isContentActive: () => boolean | undefined; renderChildren: (docs: Doc[]) => JSX.Element[]; addDocument: (doc: Doc | Doc[]) => boolean; createDropTarget: (ele: HTMLDivElement) => void; @@ -57,7 +59,12 @@ interface CSVFieldColumnProps { */ @observer export class CollectionNoteTakingViewColumn extends ObservableReactComponent<CSVFieldColumnProps> { - @observable private _background = 'inherit'; + @observable private _hover = false; + + constructor(props: CSVFieldColumnProps) { + super(props); + makeObservable(this); + } // columnWidth returns the width of a column in absolute pixels @computed get columnWidth() { @@ -122,8 +129,8 @@ export class CollectionNoteTakingViewColumn extends ObservableReactComponent<CSV return false; }; - @action pointerEntered = () => SnappingManager.IsDragging && (this._background = '#b4b4b4'); - @action pointerLeave = () => (this._background = 'inherit'); + @action pointerEntered = () => (this._hover = true); + @action pointerLeave = () => (this._hover = false); @undoBatch addTextNote = (char: string) => this.addNewTextDoc('-typed text-', false, true); @@ -273,11 +280,11 @@ export class CollectionNoteTakingViewColumn extends ObservableReactComponent<CSV </div> {!this._props.chromeHidden ? ( - <div className="collectionNoteTakingView-DocumentButtons" style={{ marginBottom: 10 }}> - <div key={`${heading}-add-document`} className="collectionNoteTakingView-addDocumentButton"> - <EditableView GetValue={returnEmptyString} SetValue={this.addNewTextDoc} textCallback={this.addTextNote} placeholder={"Type ':' for commands"} contents={'+ New Node'} menuCallback={this.menuCallback} /> + <div className="collectionNoteTakingView-DocumentButtons" style={{ display: this._props.isContentActive() ? 'flex' : 'none', marginBottom: 10 }}> + <div className="collectionNoteTakingView-addDocumentButton" style={{ color: lightOrDark(this._props.backgroundColor?.()) }}> + <EditableView GetValue={returnEmptyString} SetValue={this.addNewTextDoc} textCallback={this.addTextNote} placeholder={"Type ':' for commands"} contents={'+ Node'} menuCallback={this.menuCallback} /> </div> - <div key={`${this._props.Document[Id]}-addGroup`} className="collectionNoteTakingView-addDocumentButton"> + <div className="collectionNoteTakingView-addDocumentButton" style={{ color: lightOrDark(this._props.backgroundColor?.()) }}> <EditableView {...this._props.editableViewProps()} /> </div> </div> @@ -292,17 +299,17 @@ export class CollectionNoteTakingViewColumn extends ObservableReactComponent<CSV TraceMobx(); return ( <div - className="collectionNoteTakingViewFieldColumn" - key={this._heading} + className="collectionNoteTakingViewFieldColumnHover" + onPointerEnter={this.pointerEntered} + onPointerLeave={this.pointerLeave} style={{ width: this.columnWidth, - background: this._background, + background: this._hover && SnappingManager.IsDragging ? '#b4b4b4' : 'inherit', marginLeft: this._props.headings().findIndex((h: any) => h[0] === this._props.headingObject) === 0 ? NumCast(this._props.Document.xMargin) : 0, - }} - ref={this.createColumnDropRef} - onPointerEnter={this.pointerEntered} - onPointerLeave={this.pointerLeave}> - {this.innards} + }}> + <div className="collectionNoteTakingViewFieldColumn" key={this._heading} ref={this.createColumnDropRef}> + {this.innards} + </div> </div> ); } diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index fc2da18d9..ee7bbbdba 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1382,6 +1382,7 @@ export class DocumentView extends DocComponent<DocumentViewProps>() { } } }; + backgroundColor = () => this._docViewInternal?.backgroundBoxColor; DataTransition = () => this._props.DataTransition?.() || StrCast(this.Document.dataTransition); ShouldNotScale = () => this.shouldNotScale; NativeWidth = () => this.effectiveNativeWidth; |