aboutsummaryrefslogtreecommitdiff
path: root/src/client/views
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views')
-rw-r--r--src/client/views/MainView.tsx18
-rw-r--r--src/client/views/nodes/DocumentContentsView.tsx3
-rw-r--r--src/client/views/nodes/FontIconBox.scss56
-rw-r--r--src/client/views/nodes/FontIconBox.tsx59
-rw-r--r--src/client/views/nodes/MenuIconBox.scss49
-rw-r--r--src/client/views/nodes/MenuIconBox.tsx33
6 files changed, 112 insertions, 106 deletions
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index d095a9836..c83aeee25 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -234,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() * 0.7,
_height: this._panelHeight,
title: "Collection " + workspaceCount,
};
@@ -367,7 +367,7 @@ export class MainView extends React.Component {
@computed get dockingContent() {
TraceMobx();
const mainContainer = this.mainContainer;
- const width = this.flyoutWidth;
+ const width = this.flyoutWidth + this.propertiesWidth();
return <div className="mainContent-div" onDrop={this.onDrop} style={{ width: `calc(100% - ${width}px)` }}>
{!mainContainer ? (null) : this.mainDocView}
</div>;
@@ -388,10 +388,16 @@ export class MainView extends React.Component {
setupMoveUpEvents(this, e, action((e: PointerEvent) => {
this.flyoutWidth = Math.max(e.clientX, 0);
this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30;
+ if (this.flyoutWidth === 0) {
+ CurrentUserUtils.selectedPanel = "none";
+ }
return false;
}), emptyFunction, action(() => {
this.flyoutWidth = this.flyoutWidth < 15 ? 250 : 0;
this.flyoutWidth && (this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30);
+ if (this.flyoutWidth === 0) {
+ CurrentUserUtils.selectedPanel = "none";
+ }
}));
}
}
@@ -464,7 +470,7 @@ export class MainView extends React.Component {
onClick={undefined}
ScreenToLocalTransform={this.mainContainerXf}
ContentScaling={returnOne}
- PanelWidth={() => 70}
+ PanelWidth={() => 60}
PanelHeight={this.getContentsHeight}
renderDepth={0}
focus={emptyFunction}
@@ -484,6 +490,7 @@ export class MainView extends React.Component {
@action @undoBatch
closeFlyout = () => {
+ CurrentUserUtils.selectedPanel = "none";
this.panelContent = "none";
this.flyoutWidth = 0;
}
@@ -493,10 +500,12 @@ export class MainView extends React.Component {
@action @undoBatch
selectMenu = (str: string) => {
if (this.panelContent === str && this.flyoutWidth !== 0) {
+ CurrentUserUtils.selectedPanel = "none";
this.panelContent = "none";
this.flyoutWidth = 0;
} else {
this.panelContent = str;
+ CurrentUserUtils.selectedPanel = str;
switch (this.panelContent) {
case "Tools": this.sidebarContent.proto = CurrentUserUtils.toolsStack; break;
case "Workspace": this.sidebarContent.proto = CurrentUserUtils.workspaceStack; break;
@@ -505,7 +514,8 @@ export class MainView extends React.Component {
case "Settings": this.sidebarContent.proto = SettingsManager.Instance.open(); break;
case "Sharing": this.sidebarContent.proto = GroupManager.Instance.open(); break;
}
- if (str === "Settings" || str === "Sharing" || str === "Help") {
+ if (str === "Settings" || str === "Sharing" || str === "Help" || str === "Import") {
+ CurrentUserUtils.selectedPanel = "none";
this.panelContent = "none";
this.flyoutWidth = 0;
} else {
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index e3f258b8d..e8173d103 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -18,7 +18,6 @@ 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 +189,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & {
blacklistedAttrs={[]}
renderInWrapper={false}
components={{
- FormattedTextBox, ImageBox, DirectoryImportBox, FontIconBox, MenuIconBox, LabelBox, SliderBox, FieldView,
+ FormattedTextBox, ImageBox, DirectoryImportBox, FontIconBox, 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/FontIconBox.scss b/src/client/views/nodes/FontIconBox.scss
index 69c835318..13af511a6 100644
--- a/src/client/views/nodes/FontIconBox.scss
+++ b/src/client/views/nodes/FontIconBox.scss
@@ -10,9 +10,9 @@
.fontIconBox-label {
background: gray;
- color:white;
+ color: white;
border-radius: 8px;
- width:100%;
+ width: 100%;
position: absolute;
text-align: center;
font-size: 8px;
@@ -26,4 +26,56 @@
width: 95% !important;
height: 95%;
}
+}
+
+.menuButton {
+ //padding: 7px;
+ padding-left: 5px;
+ width: 100%;
+ width: 60px;
+ height: 70px;
+ padding-top: 3px;
+ padding-bottom: 3px;
+
+ .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: 7px;
+ margin-top: 1px;
+ letter-spacing: normal;
+ padding: 3px;
+ background-color: inherit;
+ }
+
+ .menuButton-icon {
+ width: auto;
+ height: 32px;
+ padding: 5px;
+ }
+
+ svg {
+ width: 95% !important;
+ height: 95%;
+ }
} \ No newline at end of file
diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx
index 2611d2ca7..720d6a15d 100644
--- a/src/client/views/nodes/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox.tsx
@@ -12,8 +12,10 @@ import { Doc } from '../../../fields/Doc';
import { ContextMenu } from '../ContextMenu';
import { ScriptField } from '../../../fields/ScriptField';
import { Tooltip } from '@material-ui/core';
+import { createUnionOrIntersectionTypeNode } from 'typescript';
+import { CurrentUserUtils } from '../../util/CurrentUserUtils';
const FontIconSchema = createSchema({
- icon: "string"
+ icon: "string",
});
type FontIconDocument = makeInterface<[typeof FontIconSchema]>;
@@ -59,20 +61,45 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(
}
render() {
- const referenceDoc = (this.layoutDoc.dragFactory instanceof Doc ? this.layoutDoc.dragFactory : this.layoutDoc);
- const refLayout = Doc.Layout(referenceDoc);
- const button = <button className="fontIconBox-outerDiv" ref={this._ref} onContextMenu={this.specificContextMenu}
- style={{
- padding: Cast(this.layoutDoc._xPadding, "number", null),
- background: StrCast(refLayout._backgroundColor, StrCast(refLayout.backgroundColor)),
- boxShadow: this.layoutDoc.ischecked ? `4px 4px 12px black` : undefined
- }}>
- <FontAwesomeIcon className="fontIconBox-icon" icon={StrCast(this.dataDoc.icon, "user") as any} color={StrCast(this.layoutDoc.color, this._foregroundColor)} size="sm" />
- {!this.rootDoc.title ? (null) : <div className="fontIconBox-label" style={{ width: this.rootDoc.label ? "max-content" : undefined }}> {StrCast(this.rootDoc.label, StrCast(this.rootDoc.title).substring(0, 6))} </div>}
- </button>;
- return !this.layoutDoc.toolTip ? button :
- <Tooltip title={<div className="dash-tooltip">{StrCast(this.layoutDoc.toolTip)}</div>}>
- {button}
- </Tooltip>;
+
+ //style={{ backgroundColor: this.props.backgroundColor?.(this.props.Document) }}>
+
+ if (this.layoutDoc.menuIcon) {
+
+ let backgroundColor = "black";
+ if (this.dataDoc.title === "Sharing" || this.dataDoc.title === "Help" || this.dataDoc.title === "Settings" || this.dataDoc.title === "Import") {
+ backgroundColor = "black";
+ } else {
+ backgroundColor = CurrentUserUtils.selectedPanel === this.dataDoc.title ? "lightgrey" : "black";
+ }
+
+ const color = backgroundColor === "lightgrey" ? "black" : "white";
+ const menuBTN = <div className="menuButton" style={{ backgroundColor: backgroundColor }}>
+
+ <div className="menuButton-wrap" style={{ backgroundColor: backgroundColor }}>
+ <FontAwesomeIcon className="menuButton-icon" icon={StrCast(this.dataDoc.icon, "user") as any} color={color} size="lg" />
+ <div className="menuButton-label" style={{ color: color }}> {this.dataDoc.title} </div>
+ </div>
+ </div>;
+
+ return menuBTN;
+ } else {
+ const referenceDoc = (this.layoutDoc.dragFactory instanceof Doc ? this.layoutDoc.dragFactory : this.layoutDoc);
+ const refLayout = Doc.Layout(referenceDoc);
+ const button = <button className="fontIconBox-outerDiv" ref={this._ref} onContextMenu={this.specificContextMenu}
+ style={{
+ padding: Cast(this.layoutDoc._xPadding, "number", null),
+ background: StrCast(refLayout._backgroundColor, StrCast(refLayout.backgroundColor)),
+ boxShadow: this.layoutDoc.ischecked ? `4px 4px 12px black` : undefined
+ }}>
+ <FontAwesomeIcon className="fontIconBox-icon" icon={StrCast(this.dataDoc.icon, "user") as any} color={StrCast(this.layoutDoc.color, this._foregroundColor)} size="sm" />
+ {!this.rootDoc.title ? (null) : <div className="fontIconBox-label" style={{ width: this.rootDoc.label ? "max-content" : undefined }}> {StrCast(this.rootDoc.label, StrCast(this.rootDoc.title).substring(0, 6))} </div>}
+ </button>;
+ return !this.layoutDoc.toolTip ? button :
+ <Tooltip title={<div className="dash-tooltip">{StrCast(this.layoutDoc.toolTip)}</div>}>
+ {button}
+ </Tooltip>;
+ }
+
}
} \ No newline at end of file
diff --git a/src/client/views/nodes/MenuIconBox.scss b/src/client/views/nodes/MenuIconBox.scss
deleted file mode 100644
index 1b72f5a8f..000000000
--- a/src/client/views/nodes/MenuIconBox.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-.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
deleted file mode 100644
index 0aa7b327e..000000000
--- a/src/client/views/nodes/MenuIconBox.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { observer } from 'mobx-react';
-import * as React from 'react';
-import { createSchema, makeInterface } from '../../../fields/Schema';
-import { StrCast } from '../../../fields/Types';
-import { DocComponent } from '../DocComponent';
-import { FieldView, FieldViewProps } from './FieldView';
-import './MenuIconBox.scss';
-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 color = this.props.backgroundColor?.(this.props.Document) === "lightgrey" ? "black" : "white";
- const menuBTN = <div className="menuButton" style={{ backgroundColor: this.props.backgroundColor?.(this.props.Document) }}>
- <div className="menuButton-wrap"
- style={{ backgroundColor: this.props.backgroundColor?.(this.props.Document) }} >
- <FontAwesomeIcon className="menuButton-icon" icon={StrCast(this.dataDoc.icon, "user") as any} color={color} size="lg" />
- <div className="menuButton-label" style={{ color: color }}> {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-12-01 10:29:08 +0000