aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes')
-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
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>
);