aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/MainView.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/MainView.tsx')
-rw-r--r--src/client/views/MainView.tsx79
1 files changed, 66 insertions, 13 deletions
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 7f50dda72..845e93ecb 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -60,6 +60,7 @@ import { OverlayView } from './OverlayView';
import PDFMenu from './pdf/PDFMenu';
import { PreviewCursor } from './PreviewCursor';
import { undoBatch } from '../util/UndoManager';
+import { SearchBox } from './search/SearchBox';
@observer
export class MainView extends React.Component {
@@ -79,6 +80,7 @@ export class MainView extends React.Component {
@computed private get userDoc() { return Doc.UserDoc(); }
@computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeWorkspace, Doc)) : CurrentUserUtils.GuestWorkspace; }
@computed public get mainFreeform(): Opt<Doc> { return (docs => (docs && docs.length > 1) ? docs[1] : undefined)(DocListCast(this.mainContainer!.data)); }
+ @computed public get searchDoc() { return Cast(this.userDoc["search-panel"], Doc) as Doc; }
@observable public sidebarContent: any = this.userDoc?.sidebar;
@observable public panelContent: string = "none";
@@ -191,6 +193,20 @@ export class MainView extends React.Component {
if (targets && (targets.length && targets[0].className.toString() !== "timeline-menu-desc" && targets[0].className.toString() !== "timeline-menu-item" && targets[0].className.toString() !== "timeline-menu-input")) {
TimelineMenu.Instance.closeMenu();
}
+ if (targets && targets.length && SearchBox.Instance._searchbarOpen) {
+ let check = false;
+ const icon = "icon";
+ targets.forEach((thing) => {
+ if (thing.className.toString() === "collectionSchemaView-table" || (thing as any)?.dataset[icon] === "filter" || thing.className.toString() === "beta" || thing.className.toString() === "collectionSchemaView-menuOptions-wrapper") {
+ check = true;
+ }
+ });
+ if (check === false) {
+ SearchBox.Instance.closeSearch();
+ }
+ }
+
+
});
globalPointerUp = () => this.isPointerDown = false;
@@ -316,6 +332,16 @@ export class MainView extends React.Component {
defaultBackgroundColors = (doc: Opt<Doc>) => {
if (this.panelContent === doc?.title) return "lightgrey";
+
+ if (doc?.type === DocumentType.COL) {
+ if (doc.title === "Basic Item Creators" || doc.title === "sidebar-tools"
+ || doc.title === "sidebar-recentlyClosed" || doc.title === "sidebar-catalog"
+ || doc.title === "Mobile Uploads" || doc.title === "COLLECTION_PROTO"
+ || doc.title === "Advanced Item Prototypes" || doc.title === "all Creators") {
+ return "lightgrey";
+ }
+ return StrCast(Doc.UserDoc().defaultColor);
+ }
if (this.darkScheme) {
switch (doc?.type) {
case DocumentType.FONTICON: return "white";
@@ -340,6 +366,7 @@ export class MainView extends React.Component {
}
}
}
+
@computed get mainDocView() {
return <DocumentView
Document={this.mainContainer!}
@@ -368,11 +395,12 @@ export class MainView extends React.Component {
renderDepth={-1}
/>;
}
+
@computed get dockingContent() {
TraceMobx();
const mainContainer = this.mainContainer;
const width = this.flyoutWidth + this.propertiesWidth();
- return <div className="mainContent-div" onDrop={this.onDrop} style={{ width: `calc(100% - ${width}px)` }}>
+ return <div className="mainContent-div" onDrop={this.onDrop} style={{ width: `calc(100% - ${width}px)`, height: `calc(100% - 32px)` }}>
{!mainContainer ? (null) : this.mainDocView}
</div>;
}
@@ -417,11 +445,11 @@ export class MainView extends React.Component {
@computed get flyout() {
if (!this.sidebarContent) return null;
return <div className="mainView-libraryFlyout">
- <div className="mainView-contentArea" style={{ position: "relative", height: `100%`, width: "100%", overflow: "visible" }}>
- {this.flyoutWidth > 0 ? <div className="mainView-libraryFlyout-close"
+ <div className="mainView-contentArea" style={{ position: "relative", height: `calc(100% - 32px)`, width: "100%", overflow: "visible" }}>
+ {/* {this.flyoutWidth > 0 ? <div className="mainView-libraryFlyout-close"
onPointerDown={this.closeFlyout}>
<FontAwesomeIcon icon="times" color="black" size="lg" />
- </div> : null}
+ </div> : null} */}
<DocumentView
Document={this.sidebarContent}
@@ -449,6 +477,7 @@ export class MainView extends React.Component {
ContainingCollectionView={undefined}
ContainingCollectionDoc={undefined}
relative={true}
+ forcedBackgroundColor={() => "lightgrey"}
/>
</div>
{this.docButtons}</div>;
@@ -488,7 +517,7 @@ export class MainView extends React.Component {
}
- @action @undoBatch
+ @action
closeFlyout = () => {
this._lastButton && (this._lastButton.color = "white");
this._lastButton && (this._lastButton._backgroundColor = "");
@@ -499,7 +528,7 @@ export class MainView extends React.Component {
get groupManager() { return GroupManager.Instance; }
_lastButton: Doc | undefined;
- @action @undoBatch
+ @action
selectMenu = (button: Doc, str: string) => {
this._lastButton && (this._lastButton.color = "white");
this._lastButton && (this._lastButton._backgroundColor = "");
@@ -528,7 +557,7 @@ export class MainView extends React.Component {
return true;
}
- @action @undoBatch
+ @action
closeProperties = () => {
CurrentUserUtils.propertiesWidth = 0;
}
@@ -556,7 +585,8 @@ export class MainView extends React.Component {
<div className="mainView-flyoutContainer" style={{ width: this.flyoutWidth }}>
{this.flyoutWidth !== 0 ? <div className="mainView-libraryHandle"
onPointerDown={this.onFlyoutPointerDown}
- style={{ backgroundColor: 'lightgrey' }}>
+ //style={{ backgroundColor: '#8c8b8b' }}
+ >
<span title="library View Dragger" style={{
width: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "3vw",
//height: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "100vh",
@@ -583,7 +613,7 @@ export class MainView extends React.Component {
<div className="mainView-propertiesDragger" title="Properties View Dragger" onPointerDown={this.onPropertiesPointerDown}
style={{ right: rightFlyout, top: "50%" }}>
<div className="mainView-propertiesDragger-icon">
- <FontAwesomeIcon icon={this.propertiesIcon} color="white" size="sm" /> </div>
+ <FontAwesomeIcon icon={this.propertiesIcon} color="black" size="sm" /> </div>
</div>
}
{this.propertiesWidth() < 10 ? (null) :
@@ -593,7 +623,6 @@ export class MainView extends React.Component {
}
@computed get mainContent() {
- //const n = (RichTextMenu.Instance?.Pinned ? 1 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0);
const n = (CollectionMenu.Instance?.Pinned ? 1 : 0);
const height = `calc(100% - ${n * Number(ANTIMODEMENU_HEIGHT.replace("px", ""))}px)`;
const pinned = FormatShapePane.Instance?.Pinned;
@@ -716,8 +745,32 @@ export class MainView extends React.Component {
@computed get search() {
return <div className="mainView-searchPanel">
- <div style={{ float: "left", marginLeft: "10px" }}>{Doc.CurrentUserEmail}</div>
- <div>SEARCH GOES HERE</div>
+ {/* <div style={{ float: "left", marginLeft: "10px" }}>{Doc.CurrentUserEmail}</div> */}
+ <div><DocumentView Document={this.searchDoc}
+ DataDoc={undefined}
+ LibraryPath={emptyPath}
+ addDocument={undefined}
+ addDocTab={this.addDocTabFunc}
+ pinToPres={emptyFunction}
+ rootSelected={returnTrue}
+ onClick={undefined}
+ backgroundColor={this.defaultBackgroundColors}
+ removeDocument={undefined}
+ ScreenToLocalTransform={Transform.Identity}
+ ContentScaling={returnOne}
+ NativeHeight={returnZero}
+ NativeWidth={returnZero}
+ PanelWidth={this.getPWidth}
+ PanelHeight={this.getPHeight}
+ renderDepth={0}
+ focus={emptyFunction}
+ parentActive={returnTrue}
+ whenActiveChanged={emptyFunction}
+ bringToFront={emptyFunction}
+ docFilters={returnEmptyFilter}
+ ContainingCollectionView={undefined}
+ ContainingCollectionDoc={undefined}
+ /></div>
</div>;
}
@@ -732,7 +785,7 @@ export class MainView extends React.Component {
<GoogleAuthenticationManager />
<HypothesisAuthenticationManager />
<DocumentDecorations />
- {/* {this.search} */}
+ {this.search}
<CollectionMenu />
<FormatShapePane />
<div style={{ display: "none" }}><RichTextMenu key="rich" /></div>