aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/documents/DocumentTypes.ts1
-rw-r--r--src/client/documents/Documents.ts2
-rw-r--r--src/client/util/CurrentUserUtils.ts42
-rw-r--r--src/client/views/MainView.tsx51
-rw-r--r--src/client/views/collections/CollectionLinearView.tsx2
-rw-r--r--src/client/views/collections/CollectionMenu.tsx2
-rw-r--r--src/client/views/collections/CollectionSubView.tsx8
-rw-r--r--src/client/views/nodes/ContentFittingDocumentView.tsx3
-rw-r--r--src/client/views/nodes/FontIconBox.scss89
-rw-r--r--src/client/views/nodes/FontIconBox.tsx60
10 files changed, 101 insertions, 159 deletions
diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts
index 659f78970..985fcce11 100644
--- a/src/client/documents/DocumentTypes.ts
+++ b/src/client/documents/DocumentTypes.ts
@@ -13,7 +13,6 @@ export enum DocumentType {
INK = "ink", // ink stroke
SCREENSHOT = "screenshot", // view of a desktop application
FONTICON = "fonticonbox", // font icon
- MENUICON = "menuiconbox",
QUERY = "query", // search query
LABEL = "label", // simple text label
BUTTON = "button", // onClick button
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 300af4e50..92942bd58 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -151,7 +151,7 @@ export interface DocumentOptions {
annotationOn?: Doc;
removeDropProperties?: List<string>; // list of properties that should be removed from a document when it is dropped. e.g., a creator button may be forceActive to allow it be dragged, but the forceActive property can be removed from the dropped document
dbDoc?: Doc;
- menuIcon?: boolean; // if the font icon box is in the menu
+ iconShape?: string; // shapes of the fonticon border
linkRelationship?: string; // type of relatinoship a link represents
ischecked?: ScriptField; // returns whether a font icon box is checked
activeInkPen?: Doc; // which pen document is currently active (used as the radio button state for the 'unhecked' pen tool scripts)
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 7b6868f73..abedb2cd2 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -42,13 +42,11 @@ export class CurrentUserUtils {
@observable public static libraryBtn: any | undefined;
@observable public static searchBtn: any | undefined;
- @observable public static toolsStack: any | undefined;
- @observable public static workspaceStack: any | undefined;
- @observable public static catalogStack: any | undefined;
- @observable public static closedStack: any | undefined;
- @observable public static searchStack: any | undefined;
-
- @observable public static selectedPanel: string = "none";
+ @observable public static toolsStack: Doc | undefined;
+ @observable public static workspaceStack: Doc | undefined;
+ @observable public static catalogStack: Doc | undefined;
+ @observable public static closedStack: Doc | undefined;
+ @observable public static searchStack: Doc | undefined;
// sets up the default User Templates - slideView, queryView, descriptionView
static setupUserTemplateButtons(doc: Doc) {
@@ -441,7 +439,7 @@ export class CurrentUserUtils {
{ toolTip: "Drag a collection", title: "Col", icon: "folder", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc },
{ toolTip: "Drag a web page", title: "Web", icon: "globe-asia", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyWebpage as Doc },
{ toolTip: "Drag a cat image", title: "Image", icon: "cat", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyImage as Doc },
- { toolTip: "Drag a comparison box", title: "Comp", icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc },
+ { toolTip: "Drag a comparison box", title: "Compare", icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc },
{ toolTip: "Drag a screengrabber", title: "Grab", icon: "photo-video", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScreenshot as Doc },
// { title: "Drag a webcam", title: "Cam", icon: "video", ignoreClick: true, drag: 'Docs.Create.WebCamDocument("", { _width: 400, _height: 400, title: "a test cam" })' },
{ toolTip: "Drag a audio recorder", title: "Audio", icon: "microphone", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyAudio as Doc },
@@ -477,7 +475,7 @@ export class CurrentUserUtils {
}
const buttons = CurrentUserUtils.creatorBtnDescriptors(doc).filter(d => !alreadyCreatedButtons?.includes(d.title));
const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag, click, ischecked, activeInkPen, backgroundColor, dragFactory }) => Docs.Create.FontIconDocument({
- _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100,
+ _nativeWidth: 50, _nativeHeight: 50, _width: 50, _height: 50,
icon,
title,
toolTip,
@@ -508,14 +506,14 @@ export class CurrentUserUtils {
title: string, icon: string, click: string,
}[] {
return [
- { title: "Workspace", icon: "desktop", click: 'scriptContext.selectMenu("Workspace")' },
- { title: "Catalog", icon: "file", click: 'scriptContext.selectMenu("Catalog")' },
- { title: "Archive", icon: "archive", click: 'scriptContext.selectMenu("Archive")' },
- { title: "Import", icon: "upload", click: 'scriptContext.selectMenu("Import")' },
- { 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: 'scriptContext.selectMenu("Settings")' },
+ { title: "Workspace", icon: "desktop", click: 'scriptContext.selectMenu(self, "Workspace")' },
+ { title: "Catalog", icon: "file", click: 'scriptContext.selectMenu(self, "Catalog")' },
+ { title: "Archive", icon: "archive", click: 'scriptContext.selectMenu(self, "Archive")' },
+ { title: "Import", icon: "upload", click: 'scriptContext.selectMenu(self, "Import")' },
+ { title: "Sharing", icon: "users", click: 'scriptContext.selectMenu(self, "Sharing")' },
+ { title: "Tools", icon: "wrench", click: 'scriptContext.selectMenu(self, "Tools")' },
+ { title: "Help", icon: "question-circle", click: 'scriptContext.selectMenu(self, "Help")' },
+ { title: "Settings", icon: "cog", click: 'scriptContext.selectMenu(self, "Settings")' },
];
}
@@ -524,10 +522,11 @@ export class CurrentUserUtils {
const buttons = CurrentUserUtils.menuBtnDescriptions();
const menuBtns = buttons.map(({ title, icon, click }) => Docs.Create.FontIconDocument({
icon,
- menuIcon: true,
+ iconShape: "square",
title,
_backgroundColor: "black",
stayInCollection: true,
+ childDropAction: "same",
_width: 60,
_height: 60,
onClick: ScriptField.MakeScript(click, { scriptContext: "any" }),
@@ -535,6 +534,7 @@ export class CurrentUserUtils {
doc.menuStack = new PrefetchProxy(Docs.Create.StackingDocument(menuBtns, {
title: "menuItemPanel",
+ dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }),
_backgroundColor: "black",
_gridGap: 0,
_yMargin: 0,
@@ -678,7 +678,7 @@ export class CurrentUserUtils {
CurrentUserUtils.toolsStack = toolsStack;
doc["tabs-button-tools"] = new PrefetchProxy(Docs.Create.ButtonDocument({
- _width: 35, _height: 25, title: "Tools", _fontSize: "10pt",
+ _width: 35, _height: 25, title: "Tools", _fontSize: "10pt", color: "black",
letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)",
sourcePanel: toolsStack,
onDragStart: ScriptField.MakeFunction('getCopy(this.dragFactory, true)'),
@@ -773,7 +773,7 @@ export class CurrentUserUtils {
lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same"
})) as any as Doc;
doc["tabs-button-library"] = new PrefetchProxy(Docs.Create.ButtonDocument({
- _width: 50, _height: 25, title: "Library", _fontSize: "10pt", targetDropAction: "same",
+ _width: 50, _height: 25, title: "Library", _fontSize: "10pt", targetDropAction: "same", color: "black",
letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)",
sourcePanel: libraryStack,
onDragStart: ScriptField.MakeFunction('getCopy(this.dragFactory, true)'),
@@ -792,7 +792,7 @@ export class CurrentUserUtils {
doc["tabs-button-search"] = undefined;
if (doc["tabs-button-search"] === undefined) {
doc["tabs-button-search"] = new PrefetchProxy(Docs.Create.ButtonDocument({
- _width: 50, _height: 25, title: "Search", _fontSize: "10pt",
+ _width: 50, _height: 25, title: "Search", _fontSize: "10pt", color: "black",
letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)",
sourcePanel: new PrefetchProxy(Docs.Create.QueryDocument({ title: "search stack", })) as any as Doc,
searchFileTypes: new List<string>([DocumentType.RTF, DocumentType.IMG, DocumentType.PDF, DocumentType.VID, DocumentType.WEB, DocumentType.SCRIPTING]),
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index c83aeee25..d535f0d1b 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -314,7 +314,7 @@ export class MainView extends React.Component {
if (this.panelContent === doc?.title) return "lightgrey";
if (this.darkScheme) {
switch (doc?.type) {
- case DocumentType.MENUICON: return "white";
+ case DocumentType.FONTICON: return "white";
case DocumentType.RTF || DocumentType.LABEL || DocumentType.BUTTON: return "#2d2d2d";
case DocumentType.LINK:
case DocumentType.COL: {
@@ -324,7 +324,7 @@ export class MainView extends React.Component {
}
} else {
switch (doc?.type) {
- case DocumentType.MENUICON: return "black";
+ case DocumentType.FONTICON: return "black";
case DocumentType.RTF: return "#f1efeb";
case DocumentType.BUTTON:
case DocumentType.LABEL: return "lightgray";
@@ -388,16 +388,10 @@ 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";
- }
}));
}
}
@@ -454,7 +448,7 @@ export class MainView extends React.Component {
}
@computed get menuPanel() {
-
+ setTimeout(() => DocListCast((Doc.UserDoc().menuStack as Doc).data).forEach(action(doc => { doc.color = "white"; doc._backgroundColor = ""; })), 0);
return <div className="mainView-menuPanel">
<DocumentView
Document={Doc.UserDoc().menuStack as Doc}
@@ -468,7 +462,7 @@ export class MainView extends React.Component {
rootSelected={returnTrue}
removeDocument={returnFalse}
onClick={undefined}
- ScreenToLocalTransform={this.mainContainerXf}
+ ScreenToLocalTransform={this.sidebarScreenToLocal}
ContentScaling={returnOne}
PanelWidth={() => 60}
PanelHeight={this.getContentsHeight}
@@ -490,37 +484,37 @@ export class MainView extends React.Component {
@action @undoBatch
closeFlyout = () => {
- CurrentUserUtils.selectedPanel = "none";
this.panelContent = "none";
this.flyoutWidth = 0;
}
get groupManager() { return GroupManager.Instance; }
+ _lastButton: Doc | undefined;
@action @undoBatch
- selectMenu = (str: string) => {
+ selectMenu = (button: Doc, str: string) => {
+ this._lastButton && (this._lastButton.color = "white");
+ this._lastButton && (this._lastButton._backgroundColor = "");
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;
- case "Catalog": this.sidebarContent.proto = CurrentUserUtils.catalogStack; 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;
+ let panelDoc: Doc | undefined;
+ switch (this.panelContent = str) {
+ case "Tools": panelDoc = CurrentUserUtils.toolsStack; break;
+ case "Workspace": panelDoc = CurrentUserUtils.workspaceStack; break;
+ case "Catalog": panelDoc = CurrentUserUtils.catalogStack; break;
+ case "Archive": panelDoc = CurrentUserUtils.closedStack; break;
+ case "Settings": SettingsManager.Instance.open(); break;
+ case "Sharing": GroupManager.Instance.open(); break;
}
- if (str === "Settings" || str === "Sharing" || str === "Help" || str === "Import") {
- CurrentUserUtils.selectedPanel = "none";
- this.panelContent = "none";
- this.flyoutWidth = 0;
- } else {
+ this.sidebarContent.proto = panelDoc;
+ if (panelDoc) {
MainView.expandFlyout();
- }
+ button._backgroundColor = "lightgrey";
+ button.color = "black";
+ this._lastButton = button;
+ } else this.flyoutWidth = 0;
}
return true;
}
@@ -640,6 +634,7 @@ export class MainView extends React.Component {
fieldKey={"data"}
dropAction={"alias"}
annotationsKey={""}
+ backgroundColor={this.defaultBackgroundColors}
rootSelected={returnTrue}
bringToFront={emptyFunction}
select={emptyFunction}
diff --git a/src/client/views/collections/CollectionLinearView.tsx b/src/client/views/collections/CollectionLinearView.tsx
index 3b31947f7..a9e812ad3 100644
--- a/src/client/views/collections/CollectionLinearView.tsx
+++ b/src/client/views/collections/CollectionLinearView.tsx
@@ -161,7 +161,7 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
PanelHeight={nested ? pair.layout[HeightSym] : () => this.dimension()}
renderDepth={this.props.renderDepth + 1}
focus={emptyFunction}
- backgroundColor={returnEmptyString}
+ backgroundColor={this.props.backgroundColor}
parentActive={returnTrue}
whenActiveChanged={emptyFunction}
bringToFront={emptyFunction}
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 59e6ac7ff..47ff9ec40 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -331,7 +331,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
<div className="collectionViewBaseChrome">
{this.props.type === CollectionViewType.Invalid ||
this.props.type === CollectionViewType.Docking || this.isText ? (null) : this.viewModes}
- {this.props.type === CollectionViewType.Docking || this.isText ? (null) : this.templateChrome}
+ {this.props.type === CollectionViewType.Docking || (this.isText && Doc.UserDoc().noviceMode) ? (null) : this.templateChrome}
{Doc.UserDoc().noviceMode ? (null) : <div className="collectionViewBaseChrome-viewSpecs" title="filter documents to show" style={{ display: "grid" }}>
<button className={"antimodeMenu-button"} onClick={this.toggleViewSpecs} >
<FontAwesomeIcon icon="filter" size="lg" />
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index c90e85271..3ebc6baca 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -185,13 +185,10 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?:
@action
protected onInternalDrop(e: Event, de: DragManager.DropEvent): boolean {
const docDragData = de.complete.docDragData;
- ScriptCast(this.props.Document.dropConverter)?.script.run({ dragData: docDragData });
if (docDragData) {
let added = false;
- const dropaction = docDragData.dropAction || docDragData.userDropAction;
- if (dropaction && dropaction !== "move") {
- added = this.addDocument(docDragData.droppedDocuments);
- } else if (docDragData.moveDocument) {
+ const dropAction = docDragData.dropAction || docDragData.userDropAction;
+ if ((!dropAction || dropAction === "move") && docDragData.moveDocument) {
const movedDocs = docDragData.droppedDocuments.filter((d, i) => docDragData.draggedDocuments[i] === d);
const addedDocs = docDragData.droppedDocuments.filter((d, i) => docDragData.draggedDocuments[i] !== d);
const res = addedDocs.length ? this.addDocument(addedDocs) : true;
@@ -201,6 +198,7 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?:
added = docDragData.moveDocument(movedDocs, this.props.Document, canAdd ? this.addDocument : returnFalse);
} else added = res;
} else {
+ ScriptCast(this.props.Document.dropConverter)?.script.run({ dragData: docDragData });
added = this.addDocument(docDragData.droppedDocuments);
}
added && e.stopPropagation();
diff --git a/src/client/views/nodes/ContentFittingDocumentView.tsx b/src/client/views/nodes/ContentFittingDocumentView.tsx
index f7e253f42..6081def5d 100644
--- a/src/client/views/nodes/ContentFittingDocumentView.tsx
+++ b/src/client/views/nodes/ContentFittingDocumentView.tsx
@@ -78,9 +78,6 @@ export class ContentFittingDocumentView extends React.Component<DocumentViewProp
render() {
TraceMobx();
- if (this.props.Document.title === "Archive") {
- console.log("");
- }
return (<div className="contentFittingDocumentView" style={{
width: Math.abs(this.centeringYOffset) > 0.001 ? "auto" : this.props.PanelWidth(),
height: Math.abs(this.centeringOffset) > 0.0001 ? "auto" : this.props.PanelHeight(),
diff --git a/src/client/views/nodes/FontIconBox.scss b/src/client/views/nodes/FontIconBox.scss
index a142d873a..31bc471de 100644
--- a/src/client/views/nodes/FontIconBox.scss
+++ b/src/client/views/nodes/FontIconBox.scss
@@ -1,51 +1,46 @@
-.fontIconBox-outerDiv {
- width: 100%;
- height: 100%;
- pointer-events: all;
- touch-action: none;
- border-radius: inherit;
- background: black;
- border-radius: 100%;
- transform-origin: top left;
+
+.fontIconBox-label {
+ color: white;
+ margin-right: 4px;
+ margin-top: 1px;
+ position: relative;
+ text-align: center;
+ font-size: 7px;
+ letter-spacing: normal;
+ background-color: inherit;
+ border-radius: 8px;
+ margin-top: -8px;
+ padding: 0;
+ width: 100%;
+}
+
+.menuButton-round {
+ border-radius: 100%;
.fontIconBox-label {
- background: gray;
- color: white;
- border-radius: 8px;
- width: 100%;
+ margin-left: -10px; // button padding is 10px;
+ bottom:0;
position: absolute;
- text-align: center;
- font-size: 8px;
- //margin-top:4px;
- letter-spacing: normal;
- left: 0;
- overflow: hidden;
- }
-
- svg {
- width: 95% !important;
- height: 95%;
}
}
-
-.menuButton {
- //padding: 7px;
- padding-left: 5px;
- width: 100%;
- width: 60px;
- height: 60px;
+.menuButton-square {
padding-top: 3px;
padding-bottom: 3px;
+ padding-left: 5px;
+ .fontIconBox-label {
+ border-radius: 0px;
+ margin-top: 0px;
+ border-radius: "inherit";
+ }
+}
+.menuButton, .menuButton-round, .menuButton-square{
+ width: 100%;
+ height:100%;
+ pointer-events: all;
+ touch-action: none;
.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 {
@@ -54,24 +49,10 @@
}
}
- .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 {
+ .menuButton-icon-square {
width: auto;
height: 32px;
- padding: 5px;
+ padding: 4px;
}
svg {
diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx
index 7c538df92..98522b2dd 100644
--- a/src/client/views/nodes/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox.tsx
@@ -12,8 +12,6 @@ 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",
});
@@ -61,48 +59,22 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(
}
render() {
-
- //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" : "";
- // }
-
- const color = CurrentUserUtils.selectedPanel === this.dataDoc.title ? "black" : "white";
- const menuBTN = <div className="menuButton"
- style={{ backgroundColor: CurrentUserUtils.selectedPanel === this.dataDoc.title ? "lightgrey" : "" }}>
-
- <div className="menuButton-wrap"
- style={{ backgroundColor: CurrentUserUtils.selectedPanel === this.dataDoc.title ? "lightgrey" : "" }}>
- <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>
+ const label = StrCast(this.rootDoc.label, StrCast(this.rootDoc.title));
+ const color = StrCast(this.layoutDoc.color, this._foregroundColor);
+ const backgroundColor = StrCast(this.layoutDoc._backgroundColor, StrCast(this.rootDoc.backgroundColor, this.props.backgroundColor?.(this.rootDoc)));
+ const shape = StrCast(this.layoutDoc.iconShape, "round");
+ const button = <>
+ <button className={`menuButton-${shape}`} ref={this._ref} onContextMenu={this.specificContextMenu}
+ style={{ boxShadow: this.layoutDoc.ischecked ? `4px 4px 12px black` : undefined, backgroundColor }}>
+ <div className="menuButton-wrap">
+ {<FontAwesomeIcon className={`menuButton-icon-${shape}`} icon={StrCast(this.dataDoc.icon, "user") as any} color={color} size="lg" />}
+ {!label ? (null) : <div className="fontIconBox-label" style={{ color, backgroundColor }}> {label} </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>;
- }
-
+ </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
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 07:21:35 +0000