diff options
| -rw-r--r-- | src/client/util/CurrentUserUtils.ts | 5 | ||||
| -rw-r--r-- | src/client/views/nodes/importBox/ImportElementBox.tsx | 70 |
2 files changed, 74 insertions, 1 deletions
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 11a8dcaf6..074e89753 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -30,6 +30,8 @@ import { LinkManager } from "./LinkManager"; import { ScriptingGlobals } from "./ScriptingGlobals"; import { ColorScheme } from "./SettingsManager"; import { UndoManager } from "./UndoManager"; +import { PresElementBox } from "../views/nodes/trails"; +import { ImportElementBox } from "../views/nodes/importBox/importElementBox"; interface Button { // DocumentOptions fields a button can set @@ -800,8 +802,9 @@ export class CurrentUserUtils { /// Import option on the left side button panel static setupImportSidebar(doc: Doc, field:string) { + // PresElementBox.LayoutString('data') const reqdOpts:DocumentOptions = { - title: "My Imports", _forceActive: true, ignoreClick: true, _layout_showTitle: "title", + title: "My Imports", _forceActive: true, ignoreClick: true, _layout_showTitle: "title", childLayoutString: ImportElementBox.LayoutString('data'), _dragOnlyWithinContainer: true, _layout_hideContextMenu: true, childLimitHeight: 0, childDragAction: "copy", _layout_autoHeight: true, _yMargin: 50, _gridGap: 15, layout_boxShadow: "0 0", _lockedPosition: true, isSystem: true, _chromeHidden: true, dontRegisterView: true, layout_explainer: "This is where documents that are Imported into Dash will go." diff --git a/src/client/views/nodes/importBox/ImportElementBox.tsx b/src/client/views/nodes/importBox/ImportElementBox.tsx new file mode 100644 index 000000000..a5d21cc8e --- /dev/null +++ b/src/client/views/nodes/importBox/ImportElementBox.tsx @@ -0,0 +1,70 @@ +import { observer } from "mobx-react"; +import { ViewBoxBaseComponent } from "../../DocComponent"; +import { FieldView, FieldViewProps } from "../FieldView"; +import { computed } from "mobx"; +import { Id } from "../../../../fields/FieldSymbols"; +import React from "react"; +import { EditableView } from "../../EditableView"; +import { DocListCast } from "../../../../fields/Doc"; +import { StrCast } from "../../../../fields/Types"; + + +@observer +export class ImportElementBox extends ViewBoxBaseComponent<FieldViewProps>() { + public static LayoutString(fieldKey: string) { + return FieldView.LayoutString(ImportElementBox, fieldKey); + } + + private _itemRef: React.RefObject<HTMLDivElement> = React.createRef(); + private _dragRef: React.RefObject<HTMLDivElement> = React.createRef(); + private _titleRef: React.RefObject<EditableView> = React.createRef(); + + @computed importBoxVoew() { + return this.props.DocumentView?.()?.props.docViewPath().lastElement()?.ComponentView as PresBox; + } + + @computed get indexInPres() { + return DocListCast(this.presBox?.[StrCast(this.presBox.presFieldKey, 'data')]).indexOf(this.rootDoc); + } + + @computed get presBox() { + return this.props.DocumentView?.().props.docViewPath().lastElement()?.rootDoc; + } + + // @computed get selectedArray() { + // return this.presBoxView?.selectedArray; + // } + +@computed get mainItem() { + const isCurrent: boolean = this.presBox?._itemIndex === this.indexInPres; + //const isSelected: boolean = this.selectedArray?.has(this.rootDoc) ? true : false; + // const activeItem: Doc = this.rootDoc; + + return( + <div + className = {`presItem-container`} + // key={this.props.Document[Id] + this.indexInPres} + style = {{backgroundColor: 'pink'}} + + > + <div + ref = {this._dragRef} + className = {`presItem-slide ${isCurrent ? 'active' : ''}`} + style = {{ + backgroundColor: 'green' + }}> + <div + className="presItem-number" + title = "select without navigation" + + > + {/* <EditableView ref={this._titleRef} oneLine={true} editing={!isSelected ? false : undefined} contents={activeItem.title} overflow={'ellipsis'} GetValue={() => StrCast(activeItem.title)} SetValue={this.onSetValue} /> */} + + </div> + </div> + + </div> + ) +} + +}
\ No newline at end of file |