merge

7 files changed, 109 insertions, 160 deletions

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>
         );