aboutsummaryrefslogtreecommitdiff
path: root/src/client/views
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views')
-rw-r--r--src/client/views/MainView.scss26
-rw-r--r--src/client/views/MainView.tsx253
-rw-r--r--src/client/views/PropertiesButtons.tsx4
-rw-r--r--src/client/views/nodes/DocumentContentsView.tsx3
-rw-r--r--src/client/views/nodes/MenuIconBox.scss49
-rw-r--r--src/client/views/nodes/MenuIconBox.tsx41
6 files changed, 247 insertions, 129 deletions
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index 7318d451b..8bf38ebe9 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -155,8 +155,9 @@
.mainView-menuPanel {
- max-width: 60px;
+ width: 60px;
background-color: black;
+ height: 100%;
//overflow-y: scroll;
//overflow-x: hidden;
@@ -165,22 +166,23 @@
padding: 7px;
padding-left: 7px;
width: 100%;
+
.mainView-menuPanel-button-wrap {
- width: 45px;
- /* padding: 5px; */
- touch-action: none;
- background: black;
- transform-origin: top left;
- /* margin-bottom: 5px; */
- margin-top: 5px;
- margin-right: 25px;
- border-radius: 8px;
-
+ width: 45px;
+ /* padding: 5px; */
+ touch-action: none;
+ background: black;
+ transform-origin: top left;
+ /* margin-bottom: 5px; */
+ margin-top: 5px;
+ margin-right: 25px;
+ border-radius: 8px;
+
&:hover {
background: rgb(61, 61, 61);
cursor: pointer;
}
- }
+ }
}
.mainView-menuPanel-button-label {
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 891d08214..5f7f7ca03 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -381,6 +381,7 @@ export class MainView extends React.Component {
onPointerDown = (e: React.PointerEvent) => {
if (this._flyoutTranslate) {
this.panelContent = "none";
+ CurrentUserUtils.panelContent = "none";
this._canClick = true;
this._flyoutSizeOnDown = e.clientX;
document.removeEventListener("pointermove", this.onPointerMove);
@@ -462,125 +463,125 @@ export class MainView extends React.Component {
{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={() => 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}
- // scriptContext={this}
- // />
- // </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>
+ 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={() => 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}
+ scriptContext={this}
+ />
</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
selectPanel = (str: string) => {
if (this.panelContent === str && this.flyoutWidth !== 0) {
@@ -606,6 +607,30 @@ export class MainView extends React.Component {
}
@action
+ selectMenu = (str: string) => {
+ if (CurrentUserUtils.panelContent === str && this.flyoutWidth !== 0) {
+ CurrentUserUtils.panelContent = "none";
+ this.flyoutWidth = 0;
+ } else {
+ CurrentUserUtils.panelContent = str;
+ MainView.expandFlyout();
+ if (str === "tools") {
+ CurrentUserUtils.toolsBtn;
+ this.sidebarContent.proto = CurrentUserUtils.toolsStack;
+ } else if (str === "workspace") {
+ this.sidebarContent.proto = CurrentUserUtils.workspaceStack;
+ } else if (str === "catalog") {
+ this.sidebarContent.proto = CurrentUserUtils.catalogStack;
+ } else if (str === "deleted") {
+ this.sidebarContent.proto = CurrentUserUtils.closedStack;
+ } else if (str === "search") {
+ this.sidebarContent.proto = CurrentUserUtils.searchStack;
+ }
+ }
+ return true;
+ }
+
+ @action
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);
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index eecf670e6..3113d8cb4 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -392,10 +392,10 @@ export class PropertiesButtons extends React.Component<{}, {}> {
this.selectedDocumentView?.toggleDetail();
} else if (value === "linkInPlace") {
this.selectedDocumentView?.noOnClick();
- this.selectedDocumentView?.toggleFollowInPlace();
+ this.selectedDocumentView?.toggleFollowLink("inPlace", true, false);
} else if (value === "linkOnRight") {
this.selectedDocumentView?.noOnClick();
- this.selectedDocumentView?.toggleFollowOnRight();
+ this.selectedDocumentView?.toggleFollowLink("onRight", false, false);
}
}
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index 47dc0a773..d72133cb9 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -18,6 +18,7 @@ import { DocHolderBox } from "./DocHolderBox";
import { DocumentViewProps } from "./DocumentView";
import "./DocumentView.scss";
import { FontIconBox } from "./FontIconBox";
+import { MenuIconBox } from "./MenuIconBox";
import { FieldView, FieldViewProps } from "./FieldView";
import { FormattedTextBox } from "./formattedText/FormattedTextBox";
import { ImageBox } from "./ImageBox";
@@ -190,7 +191,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & {
blacklistedAttrs={[]}
renderInWrapper={false}
components={{
- FormattedTextBox, ImageBox, DirectoryImportBox, FontIconBox, LabelBox, SliderBox, FieldView,
+ FormattedTextBox, ImageBox, DirectoryImportBox, FontIconBox, MenuIconBox, LabelBox, SliderBox, FieldView,
CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox,
PDFBox, VideoBox, AudioBox, PresBox, YoutubeBox, PresElementBox, QueryBox,
ColorBox, DashWebRTCVideo, LinkAnchorBox, InkingStroke, DocHolderBox, LinkBox, ScriptingBox,
diff --git a/src/client/views/nodes/MenuIconBox.scss b/src/client/views/nodes/MenuIconBox.scss
new file mode 100644
index 000000000..1b72f5a8f
--- /dev/null
+++ b/src/client/views/nodes/MenuIconBox.scss
@@ -0,0 +1,49 @@
+.menuButton {
+ //padding: 7px;
+ padding-left: 7px;
+ width: 100%;
+ width: 60px;
+ height: 70px;
+
+ .menuButton-wrap {
+ width: 45px;
+ /* padding: 5px; */
+ touch-action: none;
+ background: black;
+ transform-origin: top left;
+ /* margin-bottom: 5px; */
+ margin-top: 5px;
+ margin-right: 25px;
+ border-radius: 8px;
+
+ &:hover {
+ background: rgb(61, 61, 61);
+ cursor: pointer;
+ }
+ }
+
+ .menuButton-label {
+ color: white;
+ margin-right: 4px;
+ border-radius: 8px;
+ width: 42px;
+ position: relative;
+ text-align: center;
+ font-size: 8px;
+ margin-top: 1px;
+ letter-spacing: normal;
+ padding: 3px;
+ background-color: inherit;
+ }
+
+ .menuButton-icon {
+ width: auto;
+ height: 35px;
+ padding: 5px;
+ }
+
+ svg {
+ width: 95% !important;
+ height: 95%;
+ }
+} \ No newline at end of file
diff --git a/src/client/views/nodes/MenuIconBox.tsx b/src/client/views/nodes/MenuIconBox.tsx
new file mode 100644
index 000000000..e1656fcba
--- /dev/null
+++ b/src/client/views/nodes/MenuIconBox.tsx
@@ -0,0 +1,41 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { createSchema, makeInterface } from '../../../fields/Schema';
+import { DocComponent } from '../DocComponent';
+import './MenuIconBox.scss';
+import { FieldView, FieldViewProps } from './FieldView';
+import { StrCast, Cast, NumCast } from '../../../fields/Types';
+import { Utils } from "../../../Utils";
+import { runInAction, observable, reaction, IReactionDisposer } from 'mobx';
+import { Doc } from '../../../fields/Doc';
+import { ScriptField } from '../../../fields/ScriptField';
+import { CurrentUserUtils } from '../../util/CurrentUserUtils';
+const MenuIconSchema = createSchema({
+ icon: "string"
+});
+
+type MenuIconDocument = makeInterface<[typeof MenuIconSchema]>;
+const MenuIconDocument = makeInterface(MenuIconSchema);
+@observer
+export class MenuIconBox extends DocComponent<FieldViewProps, MenuIconDocument>(MenuIconDocument) {
+ public static LayoutString(fieldKey: string) { return FieldView.LayoutString(MenuIconBox, fieldKey); }
+ _ref: React.RefObject<HTMLButtonElement> = React.createRef();
+
+ render() {
+
+ const menuBTN = <div className="menuButton" style={{ backgroundColor: CurrentUserUtils.panelContent === this.dataDoc.title ? "lightgrey" : "" }}>
+ <div className="menuButton-wrap"
+ style={{ backgroundColor: CurrentUserUtils.panelContent === this.dataDoc.title ? "lightgrey" : "" }}
+ //onPointerDown={this.dataDoc.click}
+ >
+ <FontAwesomeIcon className="menuButton-icon" icon={StrCast(this.dataDoc.icon, "user") as any}
+ color={CurrentUserUtils.panelContent === this.dataDoc.title ? "black" : "white"} size="lg" />
+ <div className="menuButton-label"
+ style={{ color: CurrentUserUtils.panelContent === this.dataDoc.title ? "black" : "white" }}> {this.dataDoc.title} </div>
+ </div>
+ </div>;
+
+ return menuBTN;
+ }
+} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-02 08:21:10 +0000