aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/util/CurrentUserUtils.ts6
-rw-r--r--src/client/views/MainView.scss49
-rw-r--r--src/client/views/MainView.tsx173
-rw-r--r--src/client/views/collections/collectionFreeForm/PropertiesView.scss27
-rw-r--r--src/client/views/collections/collectionFreeForm/PropertiesView.tsx14
5 files changed, 89 insertions, 180 deletions
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 725be882e..3d8bd6bd5 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -508,12 +508,12 @@ export class CurrentUserUtils {
return [
{ title: "Workspace", icon: "desktop", click: 'scriptContext.selectMenu("Workspace")' },
{ title: "Catalog", icon: "file", click: 'scriptContext.selectMenu("Catalog")' },
- { title: "Archive", icon: "archive", click: 'scriptContext.selectMenu("deleted")' },
+ { title: "Archive", icon: "archive", click: 'scriptContext.selectMenu("Archive")' },
{ title: "Import", icon: "upload", click: 'scriptContext.selectMenu("Import")' },
- { title: "Sharing", icon: "users", click: 'scriptContext.groupManager.open()' },
+ { title: "Sharing", icon: "users", click: 'scriptContext.selectMenu("Sharing")' },
{ title: "Tools", icon: "wrench", click: 'scriptContext.selectMenu("Tools")' },
{ title: "Help", icon: "question-circle", click: 'scriptContext.selectMenu("Help")' },
- { title: "Settings", icon: "cog", click: 'SettingsManager.Instance.open()' },
+ { title: "Settings", icon: "cog", click: 'scriptContext.selectMenu("Settings")' },
];
}
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index fe01c27a3..054a409df 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -124,14 +124,13 @@
}
&:hover {
- cursor: pointer;
+ cursor: grab;
}
}
.mainiView-propertiesView {
display: flex;
flex-direction: column;
- width: 200px;
height: 100%;
position: absolute;
right: 0;
@@ -212,50 +211,6 @@
}
}
-// .mainView-menuPanel-bottomButton {
-// width: 45px;
-// height: 45px;
-// padding: 10px;
-// pointer-events: all;
-// touch-action: none;
-// //border-radius: inherit;
-// background: black;
-// background-color: black;
-// //border-radius: 100%;
-// transform-origin: top left;
-// margin-bottom: 20px;
-// margin-top: 5px;
-
-// margin-right: 25px;
-
-// .mainView-menuPanel-bottomButton-label {
-// background: black;
-// color: white;
-// margin-left: -10px;
-// border-radius: 8px;
-// width: 65px;
-// position: absolute;
-// text-align: center;
-// font-size: 9.5px;
-// margin-top: 2px;
-// letter-spacing: normal;
-// padding: 3px;
-// //margin-bottom: 23px;
-// }
-
-// .mainView-menuPanel-bottomButton-icon {
-// width: 50px;
-// height: 50px;
-// color: white;
-// }
-
-// svg {
-// width: 95% !important;
-// height: 95%;
-// }
-// }
-
-
.mainView-searchPanel {
width: 100%;
height: 33px;
@@ -342,7 +297,7 @@
position: absolute;
z-index: 2;
touch-action: none;
- cursor: grab;
+ cursor: ew-resize;
.mainView-libraryHandle-icon {
width: 10px;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index ec0bff8a7..825a75afa 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -101,6 +101,7 @@ export class MainView extends React.Component {
return "chevron-right";
}
}
+ @observable propertiesDownX: number | undefined;
componentDidMount() {
DocServer.setPlaygroundFields(["dataTransition", "_viewTransition", "_panX", "_panY", "_viewScale", "_viewType", "_chromeStatus"]); // can play with these fields on someone else's
@@ -233,7 +234,7 @@ export class MainView extends React.Component {
const freeformOptions: DocumentOptions = {
x: 0,
y: 400,
- _width: this._panelWidth * .7 - this._propertiesWidth,
+ _width: this._panelWidth * .7 - this.propertiesWidth(),
_height: this._panelHeight,
title: "Collection " + workspaceCount,
};
@@ -299,12 +300,12 @@ export class MainView extends React.Component {
@action
onResize = (r: any) => {
- this._panelWidth = r.offset.width - this._propertiesWidth;
+ this._panelWidth = r.offset.width - this.propertiesWidth();
this._panelHeight = r.offset.height;
}
@action
- getPWidth = () => this._panelWidth - this._propertiesWidth;
+ getPWidth = () => this._panelWidth - this.propertiesWidth();
getPHeight = () => this._panelHeight;
getContentsHeight = () => this._panelHeight - this._buttonBarHeight;
@@ -402,19 +403,66 @@ export class MainView extends React.Component {
}
@action
+ onDown = (e: React.PointerEvent) => {
+ this.propertiesDownX = e.screenX;
+ document.removeEventListener("pointermove", this.onPointerMove);
+ document.removeEventListener("pointerup", this.onPointerUp);
+ document.addEventListener("pointermove", this.onPointerMove);
+ document.addEventListener("pointerup", this.onPointerUp);
+ e.stopPropagation();
+ e.preventDefault();
+ // setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => {
+ // this._propertiesWidth = this._panelWidth - Math.max(Transform.Identity().transformPoint(e.clientX, 0)[0], 0);
+ // return false;
+ // }), returnFalse, action(() => this._propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._panelWidth - 50, 200) : 0), false);
+ }
+
+ @action
onPointerMove = (e: PointerEvent) => {
- this.flyoutWidth = Math.max(e.clientX, 0);
- Math.abs(this.flyoutWidth - this._flyoutSizeOnDown) > 6 && (this._canClick = false);
- this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30;
+ if (this.propertiesDownX) {
+ this._propertiesWidth = this._propertiesWidth + (this.propertiesDownX - e.screenX) * .5;
+ if (this._propertiesWidth < 150) {
+ this._propertiesWidth = 0;
+ this.propertiesDownX = undefined;
+ } else if (this._propertiesWidth > 400) {
+ this._propertiesWidth = 400;
+ this.propertiesDownX = undefined;
+ }
+ document.removeEventListener("pointermove", this.onPointerMove);
+ document.removeEventListener("pointerup", this.onPointerUp);
+ } else {
+ this.flyoutWidth = Math.max(e.clientX, 0);
+ Math.abs(this.flyoutWidth - this._flyoutSizeOnDown) > 6 && (this._canClick = false);
+ this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30;
+ }
}
@action
onPointerUp = (e: PointerEvent) => {
- if (Math.abs(e.clientX - this._flyoutSizeOnDown) < 4 && this._canClick) {
- this.flyoutWidth = this.flyoutWidth < 15 ? 250 : 0;
- this.flyoutWidth && (this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30);
+ if (this.propertiesDownX) {
+ if (Math.abs(this.propertiesDownX - e.screenX) < 3) {
+ if (this._propertiesWidth < 10) {
+ this._propertiesWidth = 200;
+ } else {
+ this._propertiesWidth = 0;
+ }
+ } else {
+ this._propertiesWidth = this._propertiesWidth + (this.propertiesDownX - e.screenX) * .5;
+ if (this._propertiesWidth < 150) {
+ this._propertiesWidth = 0;
+ } else if (this._propertiesWidth > 400) {
+ this._propertiesWidth = 400;
+ }
+ }
+ this.propertiesDownX = undefined;
+ } else {
+ if (Math.abs(e.clientX - this._flyoutSizeOnDown) < 4 && this._canClick) {
+ this.flyoutWidth = this.flyoutWidth < 15 ? 250 : 0;
+ this.flyoutWidth && (this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30);
+ }
}
document.removeEventListener("pointermove", this.onPointerMove);
document.removeEventListener("pointerup", this.onPointerUp);
+
}
flyoutWidthFunc = () => this.flyoutWidth;
addDocTabFunc = (doc: Doc, where: string, libraryPath?: Doc[]): boolean => {
@@ -501,91 +549,6 @@ export class MainView extends React.Component {
</div>;
}
- // @computed get menuPanel() {
- // return <div className="mainView-menuPanel">
- // <div className="mainView-menuPanel-button" style={{ backgroundColor: this.panelContent === "workspace" ? "lightgrey" : "" }}>
- // <div className="mainView-menuPanel-button-wrap"
- // style={{ backgroundColor: this.panelContent === "workspace" ? "lightgrey" : "" }}
- // onPointerDown={e => this.selectPanel("workspace")}>
- // <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="desktop"
- // color={this.panelContent === "workspace" ? "black" : "white"} size="lg" />
- // <div className="mainView-menuPanel-button-label"
- // style={{ color: this.panelContent === "workspace" ? "black" : "white" }}> Workspace </div>
- // </div>
- // </div>
-
- // <div className="mainView-menuPanel-button" style={{ backgroundColor: this.panelContent === "catalog" ? "lightgrey" : "" }}>
- // <div className="mainView-menuPanel-button-wrap"
- // style={{ backgroundColor: this.panelContent === "catalog" ? "lightgrey" : "" }}
- // onPointerDown={e => this.selectPanel("catalog")}>
- // <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="file"
- // color={this.panelContent === "catalog" ? "black" : "white"} size="lg" />
- // <div className="mainView-menuPanel-button-label"
- // style={{ color: this.panelContent === "catalog" ? "black" : "white" }}> Catalog </div>
- // </div>
- // </div>
-
- // <div className="mainView-menuPanel-button" style={{ backgroundColor: this.panelContent === "deleted" ? "lightgrey" : "" }}>
- // <div className="mainView-menuPanel-button-wrap"
- // style={{ backgroundColor: this.panelContent === "deleted" ? "lightgrey" : "" }}
- // onPointerDown={e => this.selectPanel("deleted")}>
- // <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="archive"
- // color={this.panelContent === "deleted" ? "black" : "white"} size="lg" />
- // <div className="mainView-menuPanel-button-label"
- // style={{ color: this.panelContent === "deleted" ? "black" : "white" }}> Recently Used </div>
- // </div>
- // </div>
-
- // <div className="mainView-menuPanel-button">
- // <div className="mainView-menuPanel-button-wrap"
- // onPointerDown={e => this.selectPanel("upload")}>
- // <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="upload" color="white" size="lg" />
- // <div className="mainView-menuPanel-button-label"> Import </div>
- // </div>
- // </div>
-
- // <div className="mainView-menuPanel-button">
- // <div className="mainView-menuPanel-button-wrap"
- // //onPointerDown={e => this.selectPanel("sharing")}
- // onClick={() => GroupManager.Instance.open()}>
- // <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="users" color="white" size="lg" />
- // <div className="mainView-menuPanel-button-label"> Sharing </div>
- // </div>
- // </div>
-
- // <div className="mainView-menuPanel-button" style={{ marginBottom: "110px", backgroundColor: this.panelContent === "tools" ? "lightgrey" : "", }}>
- // <div className="mainView-menuPanel-button-wrap"
- // onPointerDown={e => this.selectPanel("tools")}
- // style={{
- // backgroundColor: this.panelContent === "tools" ? "lightgrey" : "",
- // }}>
- // <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="wrench"
- // color={this.panelContent === "tools" ? "black" : "white"} size="lg" />
- // <div className="mainView-menuPanel-button-label"
- // style={{ color: this.panelContent === "tools" ? "black" : "white" }}> Tools </div>
- // </div>
- // </div>
-
- // <div className="mainView-menuPanel-button">
- // <div className="mainView-menuPanel-button-wrap"
- // // style={{backgroundColor: this.panelContent= "help" ? "lightgrey" : "black"}}
- // onPointerDown={e => this.selectPanel("help")} >
- // <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="question-circle" color="white" size="lg" />
- // <div className="mainView-menuPanel-button-label"> Help </div>
- // </div>
- // </div>
-
- // <div className="mainView-menuPanel-button">
- // <div className="mainView-menuPanel-button-wrap"
- // // onPointerDown={e => this.selectPanel("settings")}
- // onClick={() => SettingsManager.Instance.open()}>
- // <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="cog" color="white" size="lg" />
- // <div className="mainView-menuPanel-button-label"> Settings </div>
- // </div>
- // </div>
- // </div>;
- // }
-
@action @undoBatch
closeFlyout = () => {
@@ -606,8 +569,9 @@ export class MainView extends React.Component {
case "Tools": this.sidebarContent.proto = CurrentUserUtils.toolsStack; break;
case "Workspace": this.sidebarContent.proto = CurrentUserUtils.workspaceStack; break;
case "Catalog": this.sidebarContent.proto = CurrentUserUtils.catalogStack; break;
- case "deleted": this.sidebarContent.proto = CurrentUserUtils.closedStack; break;
- case "Search": this.sidebarContent.proto = CurrentUserUtils.searchStack; break;
+ case "Archive": this.sidebarContent.proto = CurrentUserUtils.closedStack; break;
+ case "Settings": this.sidebarContent.proto = SettingsManager.Instance.open(); break;
+ case "Sharing": this.sidebarContent.proto = GroupManager.Instance.open(); break;
}
MainView.expandFlyout();
}
@@ -615,25 +579,21 @@ export class MainView extends React.Component {
}
@action @undoBatch
- onDown = (e: React.PointerEvent) => {
- setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => {
- this._propertiesWidth = this._panelWidth - Math.max(Transform.Identity().transformPoint(e.clientX, 0)[0], 0);
- return false;
- }), returnFalse, action(() => this._propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._panelWidth - 50, 200) : 0), false);
+ closeProperties = () => {
+ this._propertiesWidth = 0;
}
@computed get propertiesView() {
TraceMobx();
return <div className="mainView-propertiesView" style={{
- width: `200px`,
overflow: this.propertiesWidth() < 15 ? "hidden" : undefined
}}>
<PropertiesView
- width={200}
+ width={this.propertiesWidth()}
height={this._panelHeight}
renderDepth={1}
ScreenToLocalTransform={Transform.Identity}
- onDown={this.onDown}
+ onDown={this.closeProperties}
/>
</div>;
}
@@ -643,7 +603,7 @@ export class MainView extends React.Component {
const n = (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;
+ const rightFlyout = this.propertiesWidth() - 1;
return !this.userDoc ? (null) : (
<div className="mainView-mainContent" style={{
color: this.darkScheme ? "rgb(205,205,205)" : "black",
@@ -684,7 +644,8 @@ export class MainView extends React.Component {
<FontAwesomeIcon icon={this.propertiesIcon} color="white" size="sm" /> </div>
</div>
}
- {this.propertiesWidth() < 10 ? (null) : this.propertiesView}
+ {this.propertiesWidth() < 10 ? (null) :
+ <div style={{ width: this.propertiesWidth() }}> {this.propertiesView} </div>}
</div>
</div>);
}
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index 83e0fc0d5..76c934551 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -57,7 +57,6 @@
font-size: 12.5px;
padding: 4px;
display: flex;
- width: 200px;
color: white;
padding-left: 8px;
background-color: rgb(51, 51, 51);
@@ -92,7 +91,6 @@
font-size: 12.5px;
padding: 4px;
display: flex;
- width: 200px;
color: white;
padding-left: 8px;
background-color: rgb(51, 51, 51);
@@ -126,7 +124,6 @@
font-size: 12.5px;
padding: 4px;
display: flex;
- width: 200px;
color: white;
padding-left: 8px;
background-color: rgb(51, 51, 51);
@@ -160,7 +157,6 @@
font-size: 12.5px;
padding: 4px;
display: flex;
- width: 200px;
color: white;
padding-left: 8px;
background-color: rgb(51, 51, 51);
@@ -275,7 +271,6 @@
font-size: 12.5px;
padding: 4px;
display: flex;
- width: 200px;
color: white;
padding-left: 8px;
background-color: rgb(51, 51, 51);
@@ -299,18 +294,17 @@
cursor: pointer;
}
}
+ }
- .propertiesView-fields-title-checkbox {
- float: right;
- height: 20px;
- margin-top: -13px;
- margin-left: 115px;
-
- .propertiesView-fields-title-checkbox-text {
- font-size: 7px;
- margin-top: -10px;
- margin-left: 6px;
- }
+ .propertiesView-fields-checkbox {
+ float: right;
+ height: 20px;
+ margin-top: -9px;
+
+ .propertiesView-fields-checkbox-text {
+ font-size: 7px;
+ margin-top: -10px;
+ margin-left: 6px;
}
}
@@ -352,7 +346,6 @@
font-size: 12.5px;
padding: 4px;
display: flex;
- width: 200px;
color: white;
padding-left: 8px;
background-color: rgb(51, 51, 51);
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index c4291f2a4..976e52fda 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -361,16 +361,16 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
render() {
if (!this.selectedDoc) {
- return <div className="propertiesView" >
- <div className="propertiesView-title">
+ return <div className="propertiesView" style={{ width: this.props.width }}>
+ <div className="propertiesView-title" style={{ width: this.props.width, paddingLeft: 6 }}>
No Document Selected
</div> </div>;
}
const novice = Doc.UserDoc().noviceMode;
- return <div className="propertiesView" >
- <div className="propertiesView-title">
+ return <div className="propertiesView" style={{ width: this.props.width }} >
+ <div className="propertiesView-title" style={{ width: this.props.width }}>
<div className="propertiesView-title-name">Properties </div>
<div className="propertiesView-title-icon" onPointerDown={this.props.onDown}>
<FontAwesomeIcon icon="times" color="black" size="sm" />
@@ -381,7 +381,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
</div>
<div className="propertiesView-settings">
<div className="propertiesView-settings-title" style={{ backgroundColor: this.openActions ? "black" : "" }}>
- Document Actions
+ Actions
<div className="propertiesView-settings-title-icon"
onPointerDown={() => runInAction(() => { this.openActions = !this.openActions; })}>
<FontAwesomeIcon icon={this.openActions ? "caret-down" : "caret-right"} size="lg" color="white" />
@@ -447,9 +447,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
</div>
</div>
</div>
- {!novice && this.openFields ? <div className="propertiesView-fields-title-checkbox">
+ {!novice && this.openFields ? <div className="propertiesView-fields-checkbox">
{this.fieldsCheckbox}
- <div className="propertiesView-fields-title-checkbox-text">Layout</div>
+ <div className="propertiesView-fields-checkbox-text">Layout</div>
</div> : null}
{this.openFields ?
<div className="propertiesView-fields-content">
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 09:35:57 +0000