aboutsummaryrefslogtreecommitdiff
path: root/src/client/views
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views')
-rw-r--r--src/client/views/MainView.tsx63
-rw-r--r--src/client/views/collections/CollectionLinearView.tsx2
-rw-r--r--src/client/views/collections/CollectionMenu.tsx119
-rw-r--r--src/client/views/collections/CollectionSubView.tsx8
-rw-r--r--src/client/views/linking/LinkEditor.tsx24
-rw-r--r--src/client/views/nodes/ContentFittingDocumentView.tsx3
-rw-r--r--src/client/views/nodes/DocumentLinksButton.tsx87
-rw-r--r--src/client/views/nodes/DocumentView.scss9
-rw-r--r--src/client/views/nodes/DocumentView.tsx4
-rw-r--r--src/client/views/nodes/FontIconBox.scss89
-rw-r--r--src/client/views/nodes/FontIconBox.tsx61
-rw-r--r--src/client/views/nodes/formattedText/RichTextMenu.tsx16
12 files changed, 206 insertions, 279 deletions
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index fdf4c1626..a5dbc0627 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -79,9 +79,8 @@ export class MainView extends React.Component {
@computed private get userDoc() { return Doc.UserDoc(); }
@computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeWorkspace, Doc)) : CurrentUserUtils.GuestWorkspace; }
@computed public get mainFreeform(): Opt<Doc> { return (docs => (docs && docs.length > 1) ? docs[1] : undefined)(DocListCast(this.mainContainer!.data)); }
- @computed public get sidebarButtonsDoc() { return Cast(this.userDoc["tabs-buttons"], Doc) as Doc; }
- @observable public sidebarContent: any = this.userDoc?.["tabs-panelContainer"];
+ @observable public sidebarContent: any = this.userDoc?.["sidebar"];
@observable public panelContent: string = "none";
@observable public showProperties: boolean = false;
public isPointerDown = false;
@@ -316,7 +315,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: {
@@ -326,7 +325,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";
@@ -389,18 +388,8 @@ export class MainView extends React.Component {
if (this._flyoutTranslate) {
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";
- }
- }));
+ }), emptyFunction, action(() => this.flyoutWidth = this.flyoutWidth < 15 ? 250 : 0));
}
}
@@ -456,7 +445,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}
@@ -470,7 +459,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}
@@ -492,37 +481,38 @@ 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 = Doc.UserDoc()["sidebar-tools"] as Doc ?? undefined; break;
+ case "Workspace": panelDoc = Doc.UserDoc()["sidebar-workspaces"] as Doc ?? undefined; break;
+ case "Catalog": panelDoc = Doc.UserDoc()["sidebar-catalog"] as Doc ?? undefined; break;
+ case "Archive": panelDoc = Doc.UserDoc()["sidebar-recentlyClosed"] as Doc ?? undefined; break;
+ case "Settings": SettingsManager.Instance.open(); break;
+ case "Sharing": GroupManager.Instance.open(); break;
+ case "UserDoc": panelDoc = Doc.UserDoc()["sidebar-userDoc"] as Doc ?? undefined; 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;
}
@@ -613,7 +603,7 @@ export class MainView extends React.Component {
public static expandFlyout = action(() => {
MainView.Instance._flyoutTranslate = true;
MainView.Instance.flyoutWidth = (MainView.Instance.flyoutWidth || 250);
- MainView.Instance.sidebarButtonsDoc._columnWidth = MainView.Instance.flyoutWidth / 3 - 30;
+
});
@computed get expandButton() {
@@ -642,6 +632,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 0a3f77888..8c4118e89 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -77,8 +77,8 @@ export default class CollectionMenu extends AntimodeMenu {
}
render() {
- const button = <Tooltip title={<div className="dash-tooltip">Pin Menu</div>} placement="bottom">
- <button className="antimodeMenu-button" key="pin menu" onClick={this.toggleMenuPin} style={{ backgroundColor: "#121721" }}>
+ const button = <Tooltip title={<div className="dash-tooltip">Pin Menu</div>} key="pin menu" placement="bottom">
+ <button className="antimodeMenu-button" onClick={this.toggleMenuPin} style={{ backgroundColor: "#121721" }}>
<FontAwesomeIcon icon="thumbtack" size="lg" style={{ transitionProperty: "transform", transitionDuration: "0.1s", transform: `rotate(${this.Pinned ? 45 : 0}deg)` }} />
</button>
</Tooltip>;
@@ -86,9 +86,8 @@ export default class CollectionMenu extends AntimodeMenu {
const propIcon = CurrentUserUtils.propertiesWidth > 0 ? "angle-double-right" : "angle-double-left";
const propTitle = CurrentUserUtils.propertiesWidth > 0 ? "Close Properties Panel" : "Open Properties Panel";
- const prop = <Tooltip title={<div className="dash-tooltip">{propTitle}</div>} placement="bottom">
- <button className="antimodeMenu-button" key="properties"
- onPointerDown={this.toggleProperties}>
+ const prop = <Tooltip title={<div className="dash-tooltip">{propTitle}</div>} key="properties" placement="bottom">
+ <button className="antimodeMenu-button" key="properties" onPointerDown={this.toggleProperties}>
<FontAwesomeIcon icon={propIcon} size="lg" />
</button>
</Tooltip>;
@@ -359,7 +358,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) :
<Tooltip title={<div className="dash-tooltip">filter documents to show</div>} placement="bottom">
<div className="collectionViewBaseChrome-viewSpecs" style={{ display: "grid" }}>
@@ -372,7 +371,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
{this.props.docView.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Freeform ? (null) :
<Tooltip title={<div className="dash-tooltip">Toggle Overlay Layer</div>} placement="bottom">
<button className={"antimodeMenu-button"} key="float"
- style={{ backgroundColor: !this.props.docView.layoutDoc.isAnnotating ? "121212" : undefined, borderRight: "1px solid gray" }}
+ style={{ backgroundColor: this.props.docView.layoutDoc.z ? "121212" : undefined, borderRight: "1px solid gray" }}
onClick={() => DocumentView.FloatDoc(this.props.docView)}>
<FontAwesomeIcon icon={["fab", "buffer"]} size={"lg"} />
</button>
@@ -451,10 +450,6 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
private _palette = ["#D0021B", "#F5A623", "#F8E71C", "#8B572A", "#7ED321", "#417505", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF", ""];
private _width = ["1", "5", "10", "100"];
- // private _draw = ["⎯", "→", "↔︎", "∿", "↝", "↭", "ロ", "O", "∆"];
- // private _head = ["", "", "arrow", "", "", "arrow", "", "", ""];
- // private _end = ["", "arrow", "arrow", "", "arrow", "arrow", "", "", ""];
- // private _shape = ["line", "line", "line", "", "", "", "rectangle", "circle", "triangle"];
private _dotsize = [10, 20, 30, 40];
private _draw = ["∿", "⎯", "→", "↔︎", "ロ", "O"];
private _head = ["", "", "", "arrow", "", ""];
@@ -524,12 +519,10 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
});
return <div className="btn-draw" key="draw">
{this._draw.map((icon, i) =>
- <Tooltip title={<div className="dash-tooltip">{this._title[i]}</div>} placement="bottom">
- <button className="antimodeMenu-button" key={icon} onPointerDown={() => func(i, false)} onDoubleClick={() => func(i, true)}
+ <Tooltip key={icon} title={<div className="dash-tooltip">{this._title[i]}</div>} placement="bottom">
+ <button className="antimodeMenu-button" onPointerDown={() => func(i, false)} onDoubleClick={() => func(i, true)}
style={{ backgroundColor: i === this._selected ? "121212" : "", fontSize: "20" }}>
- {/* {this._draw[i]} */}
<FontAwesomeIcon icon={this._faName[i] as IconProp} size="sm" />
-
</button>
</Tooltip>)}
</div>;
@@ -594,53 +587,55 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
}
render() {
- return !this.props.docView.layoutDoc ? (null) : <div className="collectionFreeFormMenu-cont">
- {this.props.docView.props.renderDepth !== 0 || this.isText ? (null) : <Tooltip title={<div className="dash-tooltip">Toggle Mini Map</div>} placement="bottom">
- <div key="map" className="backKeyframe" onClick={this.miniMap}>
- <FontAwesomeIcon icon={"map"} size={"lg"} />
- </div>
- </Tooltip>
- }
- {!!!this.isText ? <Tooltip title={<div className="dash-tooltip">Back Frame</div>} placement="bottom">
- <div key="back" className="backKeyframe" onClick={this.prevKeyframe}>
- <FontAwesomeIcon icon={"caret-left"} size={"lg"} />
- </div>
- </Tooltip> : null}
- {!!!this.isText ? <Tooltip title={<div className="dash-tooltip">Toggle View All</div>} placement="bottom">
- <div key="num" className="numKeyframe" style={{ backgroundColor: this.document.editing ? "#759c75" : "#c56565" }}
- onClick={action(() => this.document.editing = !this.document.editing)} >
- {NumCast(this.document.currentFrame)}
- </div>
- </Tooltip> : null}
- {!!!this.isText ? <Tooltip title={<div className="dash-tooltip">Forward Frame</div>} placement="bottom">
- <div key="fwd" className="fwdKeyframe" onClick={this.nextKeyframe}>
- <FontAwesomeIcon icon={"caret-right"} size={"lg"} />
- </div>
- </Tooltip> : null}
-
- {!this.props.isOverlay || this.document.type !== DocumentType.WEB || this.isText ? (null) :
- <Tooltip title={<div className="dash-tooltip">Use Hypothesis</div>} placement="bottom">
- <button className={"antimodeMenu-button"} key="hypothesis"
- style={{
- backgroundColor: !this.props.docView.layoutDoc.isAnnotating ? "121212" : undefined,
- borderRight: "1px solid gray"
- }}
- onClick={() => this.props.docView.layoutDoc.isAnnotating = !this.props.docView.layoutDoc.isAnnotating}>
- <FontAwesomeIcon icon={["fab", "hire-a-helper"]} size={"lg"} />
- </button>
- </Tooltip>
- }
- {(!this.props.isOverlay || this.props.docView.layoutDoc.isAnnotating) && !this.isText ?
- <>
- {this.drawButtons}
- {this.widthPicker}
- {this.colorPicker}
- {this.fillPicker}
- </> :
- (null)
- }
- {this.isText ? <RichTextMenu key="rich" /> : null}
- </div>;
+ return !this.props.docView.layoutDoc ? (null) :
+ <div className="collectionFreeFormMenu-cont">
+ {this.props.docView.props.renderDepth !== 0 || this.isText ? (null) :
+ <Tooltip key="map" title={<div className="dash-tooltip">Toggle Mini Map</div>} placement="bottom">
+ <div className="backKeyframe" onClick={this.miniMap}>
+ <FontAwesomeIcon icon={"map"} size={"lg"} />
+ </div>
+ </Tooltip>
+ }
+ {!this.isText ? <Tooltip key="back" title={<div className="dash-tooltip">Back Frame</div>} placement="bottom">
+ <div className="backKeyframe" onClick={this.prevKeyframe}>
+ <FontAwesomeIcon icon={"caret-left"} size={"lg"} />
+ </div>
+ </Tooltip> : null}
+ {!this.isText ? <Tooltip key="num" title={<div className="dash-tooltip">Toggle View All</div>} placement="bottom">
+ <div className="numKeyframe" style={{ backgroundColor: this.document.editing ? "#759c75" : "#c56565" }}
+ onClick={action(() => this.document.editing = !this.document.editing)} >
+ {NumCast(this.document.currentFrame)}
+ </div>
+ </Tooltip> : null}
+ {!this.isText ? <Tooltip key="fwd" title={<div className="dash-tooltip">Forward Frame</div>} placement="bottom">
+ <div className="fwdKeyframe" onClick={this.nextKeyframe}>
+ <FontAwesomeIcon icon={"caret-right"} size={"lg"} />
+ </div>
+ </Tooltip> : null}
+
+ {!this.props.isOverlay || this.document.type !== DocumentType.WEB || this.isText ? (null) :
+ <Tooltip key="hypothesis" title={<div className="dash-tooltip">Use Hypothesis</div>} placement="bottom">
+ <button className={"antimodeMenu-button"} key="hypothesis"
+ style={{
+ backgroundColor: !this.props.docView.layoutDoc.isAnnotating ? "121212" : undefined,
+ borderRight: "1px solid gray"
+ }}
+ onClick={() => this.props.docView.layoutDoc.isAnnotating = !this.props.docView.layoutDoc.isAnnotating}>
+ <FontAwesomeIcon icon={["fab", "hire-a-helper"]} size={"lg"} />
+ </button>
+ </Tooltip>
+ }
+ {(!this.props.isOverlay || this.props.docView.layoutDoc.isAnnotating) && !this.isText ?
+ <>
+ {this.drawButtons}
+ {this.widthPicker}
+ {this.colorPicker}
+ {this.fillPicker}
+ </> :
+ (null)
+ }
+ {this.isText ? <RichTextMenu key="rich" /> : null}
+ </div>;
}
}
@observer
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/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx
index c9aae0598..660afd4b9 100644
--- a/src/client/views/linking/LinkEditor.tsx
+++ b/src/client/views/linking/LinkEditor.tsx
@@ -1,20 +1,16 @@
import { library } from "@fortawesome/fontawesome-svg-core";
import { faArrowLeft, faCog, faEllipsisV, faExchangeAlt, faPlus, faTable, faTimes, faTrash } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { action, observable, computed, toJS } from "mobx";
+import { Tooltip } from "@material-ui/core";
+import { action, computed, observable } from "mobx";
import { observer } from "mobx-react";
-import { Doc, Opt } from "../../../fields/Doc";
-import { StrCast, DateCast } from "../../../fields/Types";
+import { Doc } from "../../../fields/Doc";
+import { DateCast, StrCast } from "../../../fields/Types";
import { Utils } from "../../../Utils";
import { LinkManager } from "../../util/LinkManager";
+import { undoBatch } from "../../util/UndoManager";
import './LinkEditor.scss';
import React = require("react");
-import { DocumentView } from "../nodes/DocumentView";
-import { DocumentLinksButton } from "../nodes/DocumentLinksButton";
-import { EditableView } from "../EditableView";
-import { RefObject } from "react";
-import { Tooltip } from "@material-ui/core";
-import { undoBatch } from "../../util/UndoManager";
library.add(faArrowLeft, faEllipsisV, faTable, faTrash, faCog, faExchangeAlt, faTimes, faPlus);
@@ -296,20 +292,18 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
//@observable description = this.props.linkDoc.description ? StrCast(this.props.linkDoc.description) : "DESCRIPTION";
- @action @undoBatch
+ @undoBatch @action
deleteLink = (): void => {
LinkManager.Instance.deleteLink(this.props.linkDoc);
this.props.showLinks();
}
- @action @undoBatch
+ @undoBatch @action
setDescripValue = (value: string) => {
if (LinkManager.currentLink) {
LinkManager.currentLink.description = value;
this.buttonColor = "rgb(62, 133, 55)";
- setTimeout(action(() => {
- this.buttonColor = "black";
- }), 750);
+ setTimeout(action(() => this.buttonColor = "black"), 750);
return true;
}
}
@@ -361,7 +355,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
this.openDropdown = !this.openDropdown;
}
- @action @undoBatch
+ @undoBatch @action
changeFollowBehavior = (follow: string) => {
this.openDropdown = false;
Doc.GetProto(this.props.linkDoc).followLinkLocation = follow;
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/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index b00de14a8..9395ac961 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -95,72 +95,55 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
}
}
- @action @undoBatch
completeLink = (e: React.PointerEvent): void => {
- setupMoveUpEvents(this, e, returnFalse, emptyFunction, action((e, doubleTap) => {
- if (doubleTap && this.props.InMenu && !!!this.props.StartLink) {
+ setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action((e, doubleTap) => {
+ if (doubleTap && this.props.InMenu && !this.props.StartLink) {
if (DocumentLinksButton.StartLink === this.props.View) {
DocumentLinksButton.StartLink = undefined;
- } else {
-
- if (DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View) {
- const linkDoc = DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.props.View.props.Document }, "long drag");
- LinkManager.currentLink = linkDoc;
-
- runInAction(() => {
- if (linkDoc) {
- TaskCompletionBox.textDisplayed = "Link Created";
- TaskCompletionBox.popupX = e.screenX;
- TaskCompletionBox.popupY = e.screenY - 133;
- TaskCompletionBox.taskCompleted = true;
-
- LinkDescriptionPopup.popupX = e.screenX;
- LinkDescriptionPopup.popupY = e.screenY - 100;
- LinkDescriptionPopup.descriptionPopup = true;
+ } else if (DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View) {
+ const linkDoc = DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.props.View.props.Document }, "long drag");
+ LinkManager.currentLink = linkDoc;
+ if (linkDoc) {
+ TaskCompletionBox.textDisplayed = "Link Created";
+ TaskCompletionBox.popupX = e.screenX;
+ TaskCompletionBox.popupY = e.screenY - 133;
+ TaskCompletionBox.taskCompleted = true;
- setTimeout(action(() => { TaskCompletionBox.taskCompleted = false; }), 2500);
- }
+ LinkDescriptionPopup.popupX = e.screenX;
+ LinkDescriptionPopup.popupY = e.screenY - 100;
+ LinkDescriptionPopup.descriptionPopup = true;
- });
+ setTimeout(action(() => TaskCompletionBox.taskCompleted = false), 2500);
}
}
}
- }));
+ })));
}
-
- @action @undoBatch
- finishLinkClick = (screenX: number, screenY: number) => {
+ finishLinkClick = undoBatch(action((screenX: number, screenY: number) => {
if (DocumentLinksButton.StartLink === this.props.View) {
DocumentLinksButton.StartLink = undefined;
- } else {
- if (this.props.InMenu && !this.props.StartLink) {
- if (DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View) {
- const linkDoc = DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.props.View.props.Document }, "long drag");
- // this notifies any of the subviews that a document is made so that they can make finer-grained hyperlinks (). see note above in onLInkButtonMoved
- runInAction(() => DocumentLinksButton.StartLink!._link = this.props.View._link = linkDoc);
- setTimeout(action(() => DocumentLinksButton.StartLink!._link = this.props.View._link = undefined), 0);
- LinkManager.currentLink = linkDoc;
-
- runInAction(() => {
- if (linkDoc) {
- TaskCompletionBox.textDisplayed = "Link Created";
- TaskCompletionBox.popupX = screenX;
- TaskCompletionBox.popupY = screenY - 133;
- TaskCompletionBox.taskCompleted = true;
-
- if (LinkDescriptionPopup.showDescriptions === "ON" || !LinkDescriptionPopup.showDescriptions) {
- LinkDescriptionPopup.popupX = screenX;
- LinkDescriptionPopup.popupY = screenY - 100;
- LinkDescriptionPopup.descriptionPopup = true;
- }
-
- setTimeout(action(() => { TaskCompletionBox.taskCompleted = false; }), 2500);
- }
- });
+ } else if (this.props.InMenu && !this.props.StartLink && DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View) {
+ const linkDoc = DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.props.View.props.Document }, "long drag");
+ // this notifies any of the subviews that a document is made so that they can make finer-grained hyperlinks (). see note above in onLInkButtonMoved
+ DocumentLinksButton.StartLink!._link = this.props.View._link = linkDoc;
+ setTimeout(action(() => DocumentLinksButton.StartLink!._link = this.props.View._link = undefined), 0);
+ LinkManager.currentLink = linkDoc;
+ if (linkDoc) {
+ TaskCompletionBox.textDisplayed = "Link Created";
+ TaskCompletionBox.popupX = screenX;
+ TaskCompletionBox.popupY = screenY - 133;
+ TaskCompletionBox.taskCompleted = true;
+
+ if (LinkDescriptionPopup.showDescriptions === "ON" || !LinkDescriptionPopup.showDescriptions) {
+ LinkDescriptionPopup.popupX = screenX;
+ LinkDescriptionPopup.popupY = screenY - 100;
+ LinkDescriptionPopup.descriptionPopup = true;
}
+
+ setTimeout(action(() => TaskCompletionBox.taskCompleted = false), 2500);
}
}
- }
+ }));
@observable
public static EditLink: DocumentView | undefined;
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index b978f6245..e6b8928d4 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -54,6 +54,15 @@
}
}
+ .documentView-anchorCont {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: inline-block;
+ }
+
.documentView-lock {
width: 20;
height: 20;
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index ec0a5f3ac..a195f2813 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -890,7 +890,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
this.rootDoc.type === DocumentType.LINK ||
this.props.dontRegisterView ? (null) : // view that are not registered
DocUtils.FilterDocs(this.directLinks, this.props.docFilters(), []).filter(d => !d.hidden && this.isNonTemporalLink).map((d, i) =>
- <DocumentView {...this.props} key={i + 1}
+ <div className="documentView-anchorCont" key={i + 1}> <DocumentView {...this.props}
Document={d}
ContainingCollectionView={this.props.ContainingCollectionView}
ContainingCollectionDoc={this.props.Document} // bcz: hack this.props.Document is not a collection Need a better prop for passing the containing document to the LinkAnchorBox
@@ -903,7 +903,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
pointerEvents={false}
LayoutTemplate={undefined}
LayoutTemplateString={LinkAnchorBox.LayoutString(`anchor${Doc.LinkEndpoint(d, this.props.Document)}`)}
- />);
+ /></div >);
}
@computed get innards() {
TraceMobx();
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 48f9d7cc6..2f540e62a 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,49 +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"
- onDoubleClick={emptyFunction}
- 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
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index d7eb73bb4..6e268be48 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -437,10 +437,16 @@ export default class RichTextMenu extends AntimodeMenu {
}
changeFontSize = (mark: Mark, view: EditorView) => {
+ if ((this.view?.state.selection.$from.pos || 0) < 2) {
+ this.TextView.layoutDoc._fontSize = mark.attrs.fontSize;
+ }
this.setMark(view.state.schema.marks.pFontSize.create({ fontSize: mark.attrs.fontSize }), view.state, view.dispatch, true);
}
changeFontFamily = (mark: Mark, view: EditorView) => {
+ if ((this.view?.state.selection.$from.pos || 0) < 2) {
+ this.TextView.layoutDoc._fontFamily = mark.attrs.family;
+ }
this.setMark(view.state.schema.marks.pFontFamily.create({ family: mark.attrs.family }), view.state, view.dispatch, true);
}
@@ -794,7 +800,9 @@ export default class RichTextMenu extends AntimodeMenu {
const link = this.currentLink ? this.currentLink : "";
const button = <Tooltip title={<div className="dash-tooltip">set hyperlink</div>} placement="bottom">
- <div style={{ marginTop: 8 }}><FontAwesomeIcon icon="link" size="lg" /> </div>
+ <button className="antimodeMenu-button color-preview-button">
+ <FontAwesomeIcon icon="link" size="lg" />
+ </button>
</Tooltip>;
const dropdownContent =
@@ -1050,10 +1058,10 @@ export class ButtonDropdown extends React.Component<ButtonDropdownProps> {
render() {
return (
<div className="button-dropdown-wrapper" ref={node => this.ref = node}>
- <button className="antimodeMenu-button dropdown-button-combined" onPointerDown={this.onDropdownClick}>
+ <div className="antimodeMenu-button dropdown-button-combined" onPointerDown={this.onDropdownClick}>
{this.props.button}
- <div style={{ marginTop: this.props.link ? "4.5" : "-8.5" }}><FontAwesomeIcon icon="caret-down" size="sm" /></div>
- </button>
+ <div style={{ marginTop: "-8.5" }}><FontAwesomeIcon icon="caret-down" size="sm" /></div>
+ </div>
{this.showDropdown ? this.props.dropdownContent : (null)}
</div>
);
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-27 10:36:16 +0000