aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/util/CurrentUserUtils.ts21
-rw-r--r--src/client/views/MainView.scss5
-rw-r--r--src/client/views/MainView.tsx304
-rw-r--r--src/client/views/collections/collectionFreeForm/PropertiesView.scss1
-rw-r--r--src/client/views/nodes/DocumentView.tsx12
5 files changed, 180 insertions, 163 deletions
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index c89f9b8fe..d41aa4b58 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -498,14 +498,14 @@ export class CurrentUserUtils {
title: string, icon: string, click: string, backgroundColor?: string,
}[] {
return [
- { title: "Workspace", icon: "desktop", click: 'this.selectPanel("workspace")' },
- { title: "Catalog", icon: "file", click: 'this.selectPanel("catalog")' },
- { title: "Recently Deleted", icon: "trash-alt", click: 'this.selectPanel("deleted")' },
+ { title: "Workspace", icon: "desktop", click: 'MainView.selectPanel("workspace")' },
+ { title: "Catalog", icon: "file", click: 'MainView.selectPanel("catalog")' },
+ { title: "Recently Deleted", icon: "trash-alt", click: 'MainView.selectPanel("deleted")' },
{ title: "Import", icon: "upload", click: 'this.selectPanel("upload")' },
{ title: "Sharing", icon: "users", click: 'GroupManager.Instance.open()' },
- { title: "Tools", icon: "wrench", click: 'this.selectPanel("tools")' },
- { title: "Search", icon: "search", click: 'this.selectPanel("search")' },
- { title: "Help", icon: "question-circle", click: 'this.selectPanel("help")' },
+ { title: "Tools", icon: "wrench", click: 'MainView.selectPanel("tools")' },
+ { title: "Search", icon: "search", click: 'MainView.selectPanel("search")' },
+ { title: "Help", icon: "question-circle", click: 'MainView.selectPanel("help")' },
{ title: "Settings", icon: "cog", click: 'SettingsManager.Instance.open()' },
];
}
@@ -514,7 +514,7 @@ export class CurrentUserUtils {
if (doc.menuStackBtns === undefined) {
const buttons = CurrentUserUtils.menuBtnDescriptions();
const menuBtns = buttons.map(({ title, icon, click, backgroundColor }) => Docs.Create.FontIconDocument({
- _width: 100, _height: 100,
+ _width: 40, _height: 40,
icon,
title,
onClick: click ? ScriptField.MakeScript(click) : undefined,
@@ -522,18 +522,19 @@ export class CurrentUserUtils {
}));
doc.menuStackBtns = new PrefetchProxy(Docs.Create.MasonryDocument(menuBtns, {
- _xMargin: 0, _autoHeight: true, _width: 100, _columnWidth: 60, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled",
+ _xMargin: 0, _autoHeight: true, _width: 80, _columnWidth: 50, lockedPosition: true, _chromeStatus: "disabled",
}));
}
return doc.menuStackBtns as Doc;
}
static setupMenuPanel(doc: Doc) {
+ doc.menuStack = undefined;
if (doc.menuStack === undefined) {
const menuBtns = CurrentUserUtils.setupMenuButtons(doc);
doc.menuStack = new PrefetchProxy(Docs.Create.StackingDocument([menuBtns], {
- title: "all Creators", _yMargin: 0, _autoHeight: true, _xMargin: 0,
- _width: 100, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled",
+ _yMargin: 0, _autoHeight: true, _xMargin: 0,
+ _width: 80, lockedPosition: true, _chromeStatus: "disabled",
})) as any as Doc;
}
return doc.menuStack;
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index bd074adea..10e7f471b 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -137,7 +137,8 @@
right: 0;
top: 0;
border-left: solid 1px;
- z-index: 10;
+ z-index: 10000;
+ cursor: auto;
}
.mainView-flyoutContainer {
@@ -160,7 +161,7 @@
padding-right: 50px;
overflow-y: scroll;
- overflow-x: hidden;
+ overflow-x: clip;
.mainView-menuPanel-button {
width: 45px;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index bc20059e8..beee9289e 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -84,7 +84,7 @@ export class MainView extends React.Component {
@observable private _panelWidth: number = 0;
@observable private _panelHeight: number = 0;
@observable private _flyoutTranslate: boolean = false;
- @observable public flyoutWidth: number = 250;
+ @observable public flyoutWidth: number = 275;
private get darkScheme() { return BoolCast(Cast(this.userDoc?.activeWorkspace, Doc, null)?.darkScheme); }
@computed private get userDoc() { return Doc.UserDoc(); }
@@ -96,6 +96,11 @@ export class MainView extends React.Component {
@observable public panelContent: string = "none";
@observable public showProperties: boolean = false;
public isPointerDown = false;
+ @computed get selectedDocumentView() {
+ if (SelectionManager.SelectedDocuments().length) {
+ return SelectionManager.SelectedDocuments()[0];
+ } else { return undefined; }
+ }
@observable _propertiesWidth: number = 0;
propertiesWidth = () => Math.max(0, Math.min(this._panelWidth - 50, this._propertiesWidth));
@@ -447,148 +452,152 @@ export class MainView extends React.Component {
bringToFront={emptyFunction}
docFilters={returnEmptyFilter}
ContainingCollectionView={undefined}
- ContainingCollectionDoc={undefined} />
+ ContainingCollectionDoc={undefined}
+ relative={true}
+ />
</div>
{this.docButtons}</div>;
}
- @computed get menuPanel() {
-
- return <div className="mainView-menuPanel">
- <DocumentView
- Document={Doc.UserDoc().menuStack as Doc}
- DataDoc={undefined}
- LibraryPath={emptyPath}
- addDocument={undefined}
- addDocTab={this.addDocTabFunc}
- pinToPres={emptyFunction}
- NativeHeight={returnZero}
- NativeWidth={returnZero}
- rootSelected={returnTrue}
- removeDocument={returnFalse}
- onClick={undefined}
- ScreenToLocalTransform={this.mainContainerXf}
- ContentScaling={returnOne}
- PanelWidth={() => 100}
- PanelHeight={this.getContentsHeight}
- renderDepth={0}
- focus={emptyFunction}
- backgroundColor={this.defaultBackgroundColors}
- parentActive={returnTrue}
- whenActiveChanged={emptyFunction}
- bringToFront={emptyFunction}
- docFilters={returnEmptyFilter}
- ContainingCollectionView={undefined}
- ContainingCollectionDoc={undefined} />
- </div>;
- }
-
// @computed get menuPanel() {
+
// return <div className="mainView-menuPanel">
- // <button className="mainView-menuPanel-button"
- // onPointerDown={e => this.selectPanel("workspace")}
- // style={{
- // padding: "5px",
- // background: "black",
- // boxShadow: "4px 4px 12px black"
- // }}>
- // <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="desktop" color="white" size="lg" />
- // <div className="mainView-menuPanel-button-label"> Workspace </div>
- // </button>
-
- // <button className="mainView-menuPanel-button"
- // onPointerDown={e => this.selectPanel("catalog")}
- // style={{
- // padding: "5px",
- // background: "black",
- // boxShadow: "4px 4px 12px black"
- // }}>
- // <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="file" color="white" size="lg" />
- // <div className="mainView-menuPanel-button-label"> Catalog </div>
- // </button>
-
- // <button className="mainView-menuPanel-button"
- // onPointerDown={e => this.selectPanel("deleted")}
- // style={{
- // padding: "5px",
- // background: "black",
- // boxShadow: "4px 4px 12px black",
- // marginBottom: "30px"
- // }}>
- // <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="trash-alt" color="white" size="lg" />
- // <div className="mainView-menuPanel-button-label"> Recently Closed </div>
- // </button>
-
- // <button className="mainView-menuPanel-button"
- // onPointerDown={e => this.selectPanel("upload")}
- // style={{
- // padding: "5px",
- // background: "black",
- // boxShadow: "4px 4px 12px black",
- // }}>
- // <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="upload" color="white" size="lg" />
- // <div className="mainView-menuPanel-button-label"> Import </div>
- // </button>
-
- // <button className="mainView-menuPanel-button"
- // //onPointerDown={e => this.selectPanel("sharing")}
- // onClick={() => GroupManager.Instance.open()}
- // style={{
- // padding: "5px",
- // background: "black",
- // boxShadow: "4px 4px 12px black"
- // }}>
- // <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="users" color="white" size="lg" />
- // <div className="mainView-menuPanel-button-label"> Sharing </div>
- // </button>
-
- // <button className="mainView-menuPanel-button"
- // onPointerDown={e => this.selectPanel("tools")}
- // style={{
- // padding: "5px",
- // background: "black",
- // boxShadow: "4px 4px 12px black",
- // //marginBottom: "45px"
- // }}>
- // <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="wrench" color="white" size="lg" />
- // <div className="mainView-menuPanel-button-label"> Tools </div>
- // </button>
-
- // <button className="mainView-menuPanel-button"
- // onPointerDown={e => this.selectPanel("search")}
- // style={{
- // padding: "5px",
- // background: "black",
- // boxShadow: "4px 4px 12px black",
- // //marginBottom: "45px"
- // }}>
- // <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="search" color="white" size="lg" />
- // <div className="mainView-menuPanel-button-label"> Search </div>
- // </button>
-
- // <button className="mainView-menuPanel-bottomButton"
- // onPointerDown={e => this.selectPanel("help")}
- // style={{
- // padding: "5px",
- // background: "323232",
- // }}>
- // <FontAwesomeIcon className="mainView-menuPanel-bottomButton-icon" icon="question-circle" color="white" size="lg" />
- // <div className="mainView-menuPanel-bottomButton-label"> Help </div>
- // </button>
-
- // <button className="mainView-menuPanel-bottomButton"
- // // onPointerDown={e => this.selectPanel("settings")}
- // onClick={() => SettingsManager.Instance.open()}
- // style={{
- // padding: "5px",
- // background: "323232",
- // }}>
- // <FontAwesomeIcon className="mainView-menuPanel-bottomButton-icon" icon="cog" color="white" size="lg" />
- // <div className="mainView-menuPanel-bottomButton-label"> Settings </div>
- // </button>
+ // <DocumentView
+ // Document={Doc.UserDoc().menuStack as Doc}
+ // DataDoc={undefined}
+ // LibraryPath={emptyPath}
+ // addDocument={undefined}
+ // addDocTab={this.addDocTabFunc}
+ // pinToPres={emptyFunction}
+ // NativeHeight={returnZero}
+ // NativeWidth={returnZero}
+ // rootSelected={returnTrue}
+ // removeDocument={returnFalse}
+ // onClick={undefined}
+ // ScreenToLocalTransform={this.mainContainerXf}
+ // ContentScaling={returnOne}
+ // PanelWidth={() => 80}
+ // PanelHeight={this.getContentsHeight}
+ // renderDepth={0}
+ // focus={emptyFunction}
+ // backgroundColor={this.defaultBackgroundColors}
+ // parentActive={returnTrue}
+ // whenActiveChanged={emptyFunction}
+ // bringToFront={emptyFunction}
+ // docFilters={returnEmptyFilter}
+ // ContainingCollectionView={undefined}
+ // ContainingCollectionDoc={undefined}
+ // relative={true}
+ // />
// </div>;
// }
+ @computed get menuPanel() {
+ return <div className="mainView-menuPanel">
+ <button className="mainView-menuPanel-button"
+ onPointerDown={e => this.selectPanel("workspace")}
+ style={{
+ padding: "5px",
+ background: "black",
+ boxShadow: "4px 4px 12px black"
+ }}>
+ <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="desktop" color="white" size="lg" />
+ <div className="mainView-menuPanel-button-label"> Workspace </div>
+ </button>
+
+ <button className="mainView-menuPanel-button"
+ onPointerDown={e => this.selectPanel("catalog")}
+ style={{
+ padding: "5px",
+ background: "black",
+ boxShadow: "4px 4px 12px black"
+ }}>
+ <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="file" color="white" size="lg" />
+ <div className="mainView-menuPanel-button-label"> Catalog </div>
+ </button>
+
+ <button className="mainView-menuPanel-button"
+ onPointerDown={e => this.selectPanel("deleted")}
+ style={{
+ padding: "5px",
+ background: "black",
+ boxShadow: "4px 4px 12px black",
+ marginBottom: "30px"
+ }}>
+ <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="trash-alt" color="white" size="lg" />
+ <div className="mainView-menuPanel-button-label"> Recently Closed </div>
+ </button>
+
+ <button className="mainView-menuPanel-button"
+ onPointerDown={e => this.selectPanel("upload")}
+ style={{
+ padding: "5px",
+ background: "black",
+ boxShadow: "4px 4px 12px black",
+ }}>
+ <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="upload" color="white" size="lg" />
+ <div className="mainView-menuPanel-button-label"> Import </div>
+ </button>
+
+ <button className="mainView-menuPanel-button"
+ //onPointerDown={e => this.selectPanel("sharing")}
+ onClick={() => GroupManager.Instance.open()}
+ style={{
+ padding: "5px",
+ background: "black",
+ boxShadow: "4px 4px 12px black"
+ }}>
+ <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="users" color="white" size="lg" />
+ <div className="mainView-menuPanel-button-label"> Sharing </div>
+ </button>
+
+ <button className="mainView-menuPanel-button"
+ onPointerDown={e => this.selectPanel("tools")}
+ style={{
+ padding: "5px",
+ background: "black",
+ boxShadow: "4px 4px 12px black",
+ //marginBottom: "45px"
+ }}>
+ <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="wrench" color="white" size="lg" />
+ <div className="mainView-menuPanel-button-label"> Tools </div>
+ </button>
+
+ <button className="mainView-menuPanel-button"
+ onPointerDown={e => this.selectPanel("search")}
+ style={{
+ padding: "5px",
+ background: "black",
+ boxShadow: "4px 4px 12px black",
+ //marginBottom: "45px"
+ }}>
+ <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="search" color="white" size="lg" />
+ <div className="mainView-menuPanel-button-label"> Search </div>
+ </button>
+
+ <button className="mainView-menuPanel-bottomButton"
+ onPointerDown={e => this.selectPanel("help")}
+ style={{
+ padding: "5px",
+ background: "323232",
+ }}>
+ <FontAwesomeIcon className="mainView-menuPanel-bottomButton-icon" icon="question-circle" color="white" size="lg" />
+ <div className="mainView-menuPanel-bottomButton-label"> Help </div>
+ </button>
+
+ <button className="mainView-menuPanel-bottomButton"
+ // onPointerDown={e => this.selectPanel("settings")}
+ onClick={() => SettingsManager.Instance.open()}
+ style={{
+ padding: "5px",
+ background: "323232",
+ }}>
+ <FontAwesomeIcon className="mainView-menuPanel-bottomButton-icon" icon="cog" color="white" size="lg" />
+ <div className="mainView-menuPanel-bottomButton-label"> Settings </div>
+ </button>
+ </div>;
+ }
+
@action
selectPanel = (str: string) => {
if (this.panelContent === str && this.flyoutWidth !== 0) {
@@ -623,23 +632,24 @@ export class MainView extends React.Component {
@computed get propertiesView() {
TraceMobx();
- return this._propertiesWidth === 0 ? (null) :
- <div className="mainView-propertiesView" style={{
- width: `${this.propertiesWidth()}px`,
- overflow: this.propertiesWidth() < 15 ? "hidden" : undefined
- }}>
- <PropertiesView
- width={this._propertiesWidth}
- height={this._panelHeight}
- renderDepth={1}
- ScreenToLocalTransform={Transform.Identity}
- />
- </div>;
+ return <div className="mainView-propertiesView" style={{
+ width: `200px`,
+ overflow: this.propertiesWidth() < 15 ? "hidden" : undefined
+ }}>
+ <PropertiesView
+ width={200}
+ height={this._panelHeight}
+ renderDepth={1}
+ ScreenToLocalTransform={Transform.Identity}
+ />
+ </div>;
}
@computed get mainContent() {
const n = (RichTextMenu.Instance?.Pinned ? 1 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0);
const height = `calc(100% - ${n * Number(ANTIMODEMENU_HEIGHT.replace("px", ""))}px)`;
+
+ const rightFlyout = this.selectedDocumentView ? this._propertiesWidth - 1 : this.propertiesWidth() > 10 ? 151.5 : 0;
return !this.userDoc || !(this.sidebarContent instanceof Doc) ? (null) : (
<div className="mainView-mainContent" style={{
color: this.darkScheme ? "rgb(205,205,205)" : "black",
@@ -675,7 +685,7 @@ export class MainView extends React.Component {
{this.dockingContent}
{this.showProperties ? (null) :
<div className="mainView-propertiesDragger" title="Properties View Dragger" onPointerDown={this.onDown}
- style={{ right: this._propertiesWidth - 1, top: "45%" }}>
+ style={{ right: rightFlyout, top: "45%" }}>
<div className="mainView-propertiesDragger-icon">
<FontAwesomeIcon icon={this.propertiesIcon} color="white" size="sm" /> </div>
</div>
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index 98eae1ac7..f64ef2211 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -2,7 +2,6 @@
background-color: rgb(205, 205, 205);
height: 100%;
- z-index: 1;
font-family: "Noto Sans";
cursor: auto;
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 998c6798e..02fe60255 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -100,6 +100,7 @@ export interface DocumentViewProps {
layoutKey?: string;
radialMenu?: String[];
display?: string;
+ relative?: boolean;
}
@observer
@@ -1021,8 +1022,9 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
}
childScaling = () => (this.layoutDoc._fitWidth ? this.props.PanelWidth() / this.nativeWidth : this.props.ContentScaling());
@computed get contents() {
+ const pos = this.props.relative ? "relative " : "absolute";
TraceMobx();
- return (<div style={{ position: "absolute", width: "100%", height: "100%" }}>
+ return (<div style={{ position: pos, width: "100%", height: "100%" }}>
<DocumentContentsView key={1}
docFilters={this.props.docFilters}
ContainingCollectionView={this.props.ContainingCollectionView}
@@ -1109,8 +1111,12 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
}
@computed get innards() {
TraceMobx();
+ const pos = this.props.relative ? "relative" : undefined;
if (this.props.treeViewDoc && !this.props.LayoutTemplateString?.includes("LinkAnchorBox")) { // this happens when the document is a tree view label (but not an anchor dot)
- return <div className="documentView-treeView" style={{ maxWidth: this.props.PanelWidth() || undefined }}>
+ return <div className="documentView-treeView" style={{
+ maxWidth: this.props.PanelWidth() || undefined,
+ position: pos
+ }}>
{StrCast(this.props.Document.title)}
{this.allAnchors}
</div>;
@@ -1235,7 +1241,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
background: finalColor,
opacity: finalOpacity,
fontFamily: StrCast(this.Document._fontFamily, "inherit"),
- fontSize: Cast(this.Document._fontSize, "string", null)
+ fontSize: Cast(this.Document._fontSize, "string", null),
}}>
{this.onClickHandler && this.props.ContainingCollectionView?.props.Document._viewType === CollectionViewType.Time ? <>
{this.innards}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-10 14:45:18 +0000