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.tsx71
1 files changed, 28 insertions, 43 deletions
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 452ce61ff..747bde64d 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -16,7 +16,6 @@ import { emptyFunction, emptyPath, returnEmptyDoclist, returnEmptyFilter, return
import { GoogleAuthenticationManager } from '../apis/GoogleAuthenticationManager';
import { DocServer } from '../DocServer';
import { Docs } from '../documents/Documents';
-import { DocumentType } from '../documents/DocumentTypes';
import { CurrentUserUtils } from '../util/CurrentUserUtils';
import { DocumentManager } from '../util/DocumentManager';
import { GroupManager } from '../util/GroupManager';
@@ -59,6 +58,7 @@ import { SearchBox } from './search/SearchBox';
import { TraceMobx } from '../../fields/util';
import { SelectionManager } from '../util/SelectionManager';
import { UndoManager } from '../util/UndoManager';
+import { TabDocView } from './collections/TabDocView';
const _global = (window /* browser */ || global /* node */) as any;
@observer
@@ -75,6 +75,7 @@ export class MainView extends React.Component {
@observable private _flyoutWidth: number = 0;
@computed private get topOffset() { return (CollectionMenu.Instance?.Pinned ? 35 : 0) + Number(SEARCH_PANEL_HEIGHT.replace("px", "")); }
+ @computed private get leftOffset() { return this.menuPanelWidth() - 2; }
@computed private get userDoc() { return Doc.UserDoc(); }
@computed private get darkScheme() { return BoolCast(CurrentUserUtils.ActiveDashboard?.darkScheme); }
@computed private get mainContainer() { return this.userDoc ? CurrentUserUtils.ActiveDashboard : CurrentUserUtils.GuestDashboard; }
@@ -85,6 +86,17 @@ export class MainView extends React.Component {
componentDidMount() {
document.getElementById("root")?.addEventListener("scroll", e => ((ele) => ele.scrollLeft = ele.scrollTop = 0)(document.getElementById("root")!));
+ const ele = document.getElementById("loader");
+ const prog = document.getElementById("dash-progress");
+ if (ele && prog) {
+ // remove from DOM
+ setTimeout(() => {
+ clearTimeout();
+ prog.style.transition = "1s";
+ prog.style.width = "100%";
+ }, 0);
+ setTimeout(() => ele.outerHTML = '', 1000);
+ }
new InkStrokeProperties();
this._sidebarContent.proto = undefined;
DocServer.setPlaygroundFields(["x", "y", "dataTransition", "_delayAutoHeight", "_autoHeight", "_showSidebar", "_sidebarWidthPercent", "_width", "_height", "_viewTransition", "_panX", "_panY", "_viewScale", "_scrollY", "_scrollTop", "hidden", "_curPage", "_viewType", "_chromeStatus"]); // can play with these fields on someone else's
@@ -140,7 +152,7 @@ export class MainView extends React.Component {
fa.faSearch, fa.faFileDownload, fa.faFileUpload, fa.faStop, fa.faCalculator, fa.faWindowMaximize, fa.faAddressCard, fa.faQuestionCircle, fa.faArrowLeft,
fa.faArrowRight, fa.faArrowDown, fa.faArrowUp, fa.faBolt, fa.faBullseye, fa.faCaretUp, fa.faCat, fa.faCheck, fa.faChevronRight, fa.faChevronLeft, fa.faChevronDown, fa.faChevronUp,
fa.faClone, fa.faCloudUploadAlt, fa.faCommentAlt, fa.faCompressArrowsAlt, fa.faCut, fa.faEllipsisV, fa.faEraser, fa.faExclamation, fa.faFileAlt,
- fa.faFileAudio, fa.faFilePdf, fa.faFilm, fa.faFilter, fa.faFont, fa.faGlobeAmericas, fa.faGlobeAsia, fa.faHighlighter, fa.faLongArrowAltRight, fa.faMousePointer,
+ fa.faFileAudio, fa.faFileVideo, fa.faFilePdf, fa.faFilm, fa.faFilter, fa.faFont, fa.faGlobeAmericas, fa.faGlobeAsia, fa.faHighlighter, fa.faLongArrowAltRight, fa.faMousePointer,
fa.faMusic, fa.faObjectGroup, fa.faPause, fa.faPen, fa.faPenNib, fa.faPhone, fa.faPlay, fa.faPortrait, fa.faRedoAlt, fa.faStamp, fa.faStickyNote,
fa.faTimesCircle, fa.faThumbtack, fa.faTree, fa.faTv, fa.faUndoAlt, fa.faVideo, fa.faAsterisk, fa.faBrain, fa.faImage, fa.faPaintBrush, fa.faTimes,
fa.faEye, fa.faArrowsAlt, fa.faQuoteLeft, fa.faSortAmountDown, fa.faAlignLeft, fa.faAlignCenter, fa.faAlignRight, fa.faHeading, fa.faRulerCombined,
@@ -228,35 +240,6 @@ export class MainView extends React.Component {
getPHeight = () => this._panelHeight;
getContentsHeight = () => this._panelHeight - Number(SEARCH_PANEL_HEIGHT.replace("px", ""));
- defaultBackgroundColors = (doc: Opt<Doc>, renderDepth: number) => {
- if (this.darkScheme) {
- switch (doc?.type) {
- case DocumentType.PRESELEMENT: return "dimgrey";
- case DocumentType.PRES: return "#3e3e3e";
- case DocumentType.FONTICON: return "black";
- case DocumentType.RTF || DocumentType.LABEL || DocumentType.BUTTON: return "#2d2d2d";
- case DocumentType.LINK:
- case DocumentType.COL:
- return Doc.IsSystem(doc) ? "rgb(62,62,62)" : StrCast(renderDepth > 0 ? Doc.UserDoc().activeCollectionNestedBackground : Doc.UserDoc().activeCollectionBackground);
- //if (doc._viewType !== CollectionViewType.Freeform && doc._viewType !== CollectionViewType.Time) return "rgb(62,62,62)";
- default: return "black";
- }
- } else {
- switch (doc?.type) {
- case DocumentType.PRESELEMENT: return "";
- case DocumentType.FONTICON: return "black";
- case DocumentType.RTF: return "#f1efeb";
- case DocumentType.BUTTON:
- case DocumentType.LABEL: return "lightgray";
- case DocumentType.LINK:
- case DocumentType.COL:
- return Doc.IsSystem(doc) ? "lightgrey" : StrCast(renderDepth > 0 ? Doc.UserDoc().activeCollectionNestedBackground : Doc.UserDoc().activeCollectionBackground);
- //if (doc._viewType !== CollectionViewType.Freeform && doc._viewType !== CollectionViewType.Time) return "lightgray";
- default: return "white";
- }
- }
- }
-
@computed get mainDocView() {
return <DocumentView
Document={this.mainContainer!}
@@ -267,7 +250,6 @@ export class MainView extends React.Component {
pinToPres={emptyFunction}
rootSelected={returnTrue}
onClick={undefined}
- backgroundColor={this.defaultBackgroundColors}
removeDocument={undefined}
ScreenToLocalTransform={Transform.Identity}
ContentScaling={returnOne}
@@ -310,8 +292,8 @@ export class MainView extends React.Component {
}
flyoutWidthFunc = () => this._flyoutWidth;
- sidebarScreenToLocal = () => new Transform(0, (CollectionMenu.Instance.Pinned ? -35 : 0) - Number(SEARCH_PANEL_HEIGHT.replace("px", "")), 1);
- mainContainerXf = () => this.sidebarScreenToLocal().translate(-58, 0);
+ sidebarScreenToLocal = () => new Transform(0, -this.topOffset, 1);
+ mainContainerXf = () => this.sidebarScreenToLocal().translate(-this.leftOffset, 0);
addDocTabFunc = (doc: Doc, where: string, libraryPath?: Doc[]): boolean => {
return where === "close" ? CollectionDockingView.CloseSplit(doc) :
doc.dockingConfig ? CurrentUserUtils.openDashboard(Doc.UserDoc(), doc) : CollectionDockingView.AddSplit(doc, "right");
@@ -324,7 +306,7 @@ export class MainView extends React.Component {
<div className="mainView-libraryFlyout" style={{ minWidth: this._flyoutWidth, width: this._flyoutWidth }} >
<div className="mainView-contentArea" >
<DocumentView
- Document={this._sidebarContent}
+ Document={this._sidebarContent.proto || this._sidebarContent}
DataDoc={undefined}
LibraryPath={emptyPath}
addDocument={undefined}
@@ -339,7 +321,7 @@ export class MainView extends React.Component {
PanelHeight={this.getContentsHeight}
renderDepth={0}
focus={emptyFunction}
- backgroundColor={this.defaultBackgroundColors}
+ styleProvider={TabDocView.styleProvider}
parentActive={returnTrue}
whenActiveChanged={emptyFunction}
bringToFront={emptyFunction}
@@ -349,7 +331,6 @@ export class MainView extends React.Component {
ContainingCollectionView={undefined}
ContainingCollectionDoc={undefined}
relative={true}
- forcedBackgroundColor={() => this.darkScheme ? "rgb(62,62,62)" : "lightgrey"}
/>
</div>
{this.docButtons}
@@ -374,7 +355,7 @@ export class MainView extends React.Component {
PanelHeight={this.getContentsHeight}
renderDepth={0}
focus={emptyFunction}
- backgroundColor={this.defaultBackgroundColors}
+ styleProvider={TabDocView.styleProvider}
parentActive={returnTrue}
whenActiveChanged={emptyFunction}
bringToFront={emptyFunction}
@@ -426,7 +407,7 @@ export class MainView extends React.Component {
<div className="mainView-propertiesDragger" onPointerDown={this.onPropertiesPointerDown} style={{ right: this.propertiesWidth() - 1 }}>
<FontAwesomeIcon icon={this.propertiesWidth() < 10 ? "chevron-left" : "chevron-right"} color={this.darkScheme ? "white" : "black"} size="sm" />
</div>
- {this.propertiesWidth() < 10 ? (null) : <PropertiesView backgroundColor={this.defaultBackgroundColors} width={this.propertiesWidth()} height={this.getContentsHeight()} />}
+ {this.propertiesWidth() < 10 ? (null) : <PropertiesView styleProvider={TabDocView.styleProvider} width={this.propertiesWidth()} height={this.getContentsHeight()} />}
</div>
</>;
}
@@ -480,7 +461,8 @@ export class MainView extends React.Component {
fieldKey={"data"}
dropAction={"alias"}
annotationsKey={""}
- backgroundColor={this.defaultBackgroundColors}
+ parentActive={returnFalse}
+ styleProvider={TabDocView.styleProvider}
rootSelected={returnTrue}
bringToFront={emptyFunction}
select={emptyFunction}
@@ -556,7 +538,7 @@ export class MainView extends React.Component {
pinToPres={emptyFunction}
rootSelected={returnTrue}
onClick={undefined}
- backgroundColor={this.defaultBackgroundColors}
+ styleProvider={TabDocView.styleProvider}
removeDocument={undefined}
ScreenToLocalTransform={Transform.Identity}
ContentScaling={returnOne}
@@ -564,6 +546,7 @@ export class MainView extends React.Component {
PanelHeight={this.getPHeight}
renderDepth={0}
focus={emptyFunction}
+ parentActive={returnFalse}
whenActiveChanged={emptyFunction}
bringToFront={emptyFunction}
docFilters={returnEmptyFilter}
@@ -588,6 +571,7 @@ export class MainView extends React.Component {
select={returnFalse}
rootSelected={returnFalse}
renderDepth={0}
+ parentActive={returnFalse}
addDocTab={returnFalse}
pinToPres={returnFalse}
ScreenToLocalTransform={Transform.Identity}
@@ -613,12 +597,12 @@ export class MainView extends React.Component {
<SettingsManager />
<GroupManager />
<GoogleAuthenticationManager />
- <DocumentDecorations />
+ <DocumentDecorations boundsLeft={this.leftOffset} boundsTop={this.topOffset} />
{this.search}
<CollectionMenu />
{LinkDescriptionPopup.descriptionPopup ? <LinkDescriptionPopup /> : null}
{DocumentLinksButton.EditLink ? <LinkMenu docView={DocumentLinksButton.EditLink} addDocTab={DocumentLinksButton.EditLink.props.addDocTab} changeFlyout={emptyFunction} /> : (null)}
- {LinkDocPreview.LinkInfo ? <LinkDocPreview location={LinkDocPreview.LinkInfo.Location} backgroundColor={this.defaultBackgroundColors}
+ {LinkDocPreview.LinkInfo ? <LinkDocPreview location={LinkDocPreview.LinkInfo.Location} styleProvider={TabDocView.styleProvider}
linkDoc={LinkDocPreview.LinkInfo.linkDoc} linkSrc={LinkDocPreview.LinkInfo.linkSrc} href={LinkDocPreview.LinkInfo.href}
addDocTab={LinkDocPreview.LinkInfo.addDocTab} /> : (null)}
<GestureOverlay >
@@ -659,6 +643,7 @@ export class MainView extends React.Component {
ScreenToLocalTransform={Transform.Identity}
bringToFront={returnFalse}
active={returnFalse}
+ parentActive={returnFalse}
whenActiveChanged={returnFalse}
focus={returnFalse}
PanelWidth={() => 500}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-11 18:05:04 +0000