From 5e559aa308102d7dd11adb7ed8c07d6c4b4c092b Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Tue, 23 Jun 2020 18:57:47 -0400
Subject: fixed coloring links

---
 src/client/views/nodes/ColorBox.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

(limited to 'src/client/views/nodes/ColorBox.tsx')

diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx
index d04da8f5b..61aeb1efa 100644
--- a/src/client/views/nodes/ColorBox.tsx
+++ b/src/client/views/nodes/ColorBox.tsx
@@ -36,8 +36,11 @@ export class ColorBox extends ViewBoxBaseComponent<FieldViewProps, ColorDocument
                     view.props.Document.layout instanceof Doc ? view.props.Document.layout :
                         view.props.Document.isTemplateForField ? view.props.Document : Doc.GetProto(view.props.Document);
                 if (targetDoc) {
-                    if (StrCast(Doc.Layout(view.props.Document).layout).indexOf("FormattedTextBox") !== -1 && FormattedTextBox.HadSelection) {
-                        Doc.Layout(view.props.Document).color = Doc.UserDoc().bacgroundColor;
+                    if (view.props.LayoutTemplate || view.props.LayoutTemplateString) {  // this situation typically occurs when you have a link dot -- it's _backgroundColor will be transparent (to not obscure the document it's attached to). so try to set its backgroundColor which will be used in the LinkAnchorBox
+                        targetDoc.backgroundColor = Doc.UserDoc().backgroundColor;  // bcz: don't know how to change the color of an inline template...
+                    }
+                    else if (StrCast(Doc.Layout(view.props.Document).layout).indexOf("FormattedTextBox") !== -1 && FormattedTextBox.HadSelection) {
+                        Doc.Layout(view.props.Document).color = Doc.UserDoc().backgroundColor;
                     } else {
                         Doc.Layout(view.props.Document)._backgroundColor = Doc.UserDoc().backgroundColor; // '_backgroundColor' is template specific.  'backgroundColor' would apply to all templates, but has no UI at the moment
                     }
-- 
cgit v1.2.3-70-g09d2


From a80aa9609f0cf1d2431e17f31af4cd3369d2a2c1 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Tue, 23 Jun 2020 19:28:01 -0400
Subject: cleaner approach to fixing linkAnchor colors

---
 src/client/documents/Documents.ts         | 2 +-
 src/client/util/CurrentUserUtils.ts       | 2 +-
 src/client/views/linking/LinkMenuItem.tsx | 1 -
 src/client/views/nodes/ColorBox.tsx       | 2 +-
 src/client/views/nodes/DocumentView.tsx   | 5 +++--
 src/client/views/nodes/LinkAnchorBox.tsx  | 2 +-
 6 files changed, 7 insertions(+), 7 deletions(-)

(limited to 'src/client/views/nodes/ColorBox.tsx')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index ceacd3630..6c2c6faea 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -625,7 +625,7 @@ export namespace Docs {
         export function LinkDocument(source: { doc: Doc, ctx?: Doc }, target: { doc: Doc, ctx?: Doc }, options: DocumentOptions = {}, id?: string) {
             const doc = InstanceFromProto(Prototypes.get(DocumentType.LINK), undefined, {
                 isLinkButton: true, treeViewHideTitle: true, treeViewOpen: false, backgroundColor: "lightBlue", // lightBlue is default color for linking dot and link documents text comment area
-                removeDropProperties: new List(["isBackground", "isLinkButton", "_backgroundColor"]), ...options
+                removeDropProperties: new List(["isBackground", "isLinkButton"]), ...options
             }, id);
             const linkDocProto = Doc.GetProto(doc);
             linkDocProto.anchor1 = source.doc;
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 29dabd67c..76c1fc9f7 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -88,7 +88,7 @@ export class CurrentUserUtils {
         }
 
         if (doc["template-button-link"] === undefined) {  // set _backgroundColor to transparent to prevent link dot from obscuring document it's attached to.
-            const linkTemplate = Docs.Create.TextDocument(" ", { title: "header", _backgroundColor: "transparent", _height: 100 }, "header"); // text needs to be a space to allow templateText to be created
+            const linkTemplate = Docs.Create.TextDocument(" ", { title: "header", _height: 100 }, "header"); // text needs to be a space to allow templateText to be created
             Doc.GetProto(linkTemplate).layout =
                 "<div>" +
                 "    <FormattedTextBox {...props} height='{this._headerHeight||75}px' background='{this._headerColor||`lightGray`}' fieldKey={'header'}/>" +
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index 3e28e8572..edc18b6a9 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -78,7 +78,6 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
 
     editMoved = (e: PointerEvent) => {
         const dragData = new DragManager.DocumentDragData([this.props.linkDoc]);
-        dragData.dropAction = "alias"; // need to alias the link since it will have its _backgroundColor removed on drop
         DragManager.StartDocumentDrag([this._editRef.current!], dragData, e.x, e.y);
         return true;
     }
diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx
index 61aeb1efa..7b7c4d266 100644
--- a/src/client/views/nodes/ColorBox.tsx
+++ b/src/client/views/nodes/ColorBox.tsx
@@ -36,7 +36,7 @@ export class ColorBox extends ViewBoxBaseComponent<FieldViewProps, ColorDocument
                     view.props.Document.layout instanceof Doc ? view.props.Document.layout :
                         view.props.Document.isTemplateForField ? view.props.Document : Doc.GetProto(view.props.Document);
                 if (targetDoc) {
-                    if (view.props.LayoutTemplate || view.props.LayoutTemplateString) {  // this situation typically occurs when you have a link dot -- it's _backgroundColor will be transparent (to not obscure the document it's attached to). so try to set its backgroundColor which will be used in the LinkAnchorBox
+                    if (view.props.LayoutTemplate || view.props.LayoutTemplateString) {  // this situation typically occurs when you have a link dot 
                         targetDoc.backgroundColor = Doc.UserDoc().backgroundColor;  // bcz: don't know how to change the color of an inline template...
                     }
                     else if (StrCast(Doc.Layout(view.props.Document).layout).indexOf("FormattedTextBox") !== -1 && FormattedTextBox.HadSelection) {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 6f3c46be6..5d5460544 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -90,6 +90,7 @@ export interface DocumentViewProps {
     pinToPres: (document: Doc) => void;
     backgroundHalo?: () => boolean;
     backgroundColor?: (doc: Doc) => string | undefined;
+    forcedBackgroundColor?: (doc: Doc) => string | undefined;
     opacity?: () => number | undefined;
     ChromeHeight?: () => number;
     dontRegisterView?: boolean;
@@ -1064,7 +1065,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 PanelWidth={this.anchorPanelWidth}
                 PanelHeight={this.anchorPanelHeight}
                 ContentScaling={returnOne}
-                backgroundColor={returnTransparent}
+                forcedBackgroundColor={returnTransparent}
                 removeDocument={this.hideLinkAnchor}
                 pointerEvents={false}
                 LayoutTemplate={undefined}
@@ -1150,7 +1151,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     render() {
         if (this.props.Document[AclSym] && this.props.Document[AclSym] === AclPrivate) return (null);
         if (!(this.props.Document instanceof Doc)) return (null);
-        const backgroundColor = Doc.UserDoc().renderStyle === "comic" ? undefined : StrCast(this.layoutDoc._backgroundColor) || StrCast(this.layoutDoc.backgroundColor) || StrCast(this.Document.backgroundColor) || this.props.backgroundColor?.(this.Document);
+        const backgroundColor = Doc.UserDoc().renderStyle === "comic" ? undefined : this.props.forcedBackgroundColor?.(this.Document) || StrCast(this.layoutDoc._backgroundColor) || StrCast(this.layoutDoc.backgroundColor) || StrCast(this.Document.backgroundColor) || this.props.backgroundColor?.(this.Document);
         const opacity = Cast(this.layoutDoc._opacity, "number", Cast(this.layoutDoc.opacity, "number", Cast(this.Document.opacity, "number", null)));
         const finalOpacity = this.props.opacity ? this.props.opacity() : opacity;
         const finalColor = this.layoutDoc.type === DocumentType.FONTICON || this.layoutDoc._viewType === CollectionViewType.Linear ? undefined : backgroundColor;
diff --git a/src/client/views/nodes/LinkAnchorBox.tsx b/src/client/views/nodes/LinkAnchorBox.tsx
index 9f252c651..2b64cdab6 100644
--- a/src/client/views/nodes/LinkAnchorBox.tsx
+++ b/src/client/views/nodes/LinkAnchorBox.tsx
@@ -116,7 +116,7 @@ export class LinkAnchorBox extends ViewBoxBaseComponent<FieldViewProps, LinkAnch
         TraceMobx();
         const x = this.props.PanelWidth() > 1 ? NumCast(this.rootDoc[this.fieldKey + "_x"], 100) : 0;
         const y = this.props.PanelWidth() > 1 ? NumCast(this.rootDoc[this.fieldKey + "_y"], 100) : 0;
-        const c = StrCast(this.layoutDoc.backgroundColor, StrCast(this.dataDoc.backgroundColor, "lightBlue")); // note this is not where the typical lightBlue default color comes from.  See Documents.Create.LinkDocument()
+        const c = StrCast(this.layoutDoc._backgroundColor, StrCast(this.layoutDoc.backgroundColor, StrCast(this.dataDoc.backgroundColor, "lightBlue"))); // note this is not where the typical lightBlue default color comes from.  See Documents.Create.LinkDocument()
         const anchor = this.fieldKey === "anchor1" ? "anchor2" : "anchor1";
         const anchorScale = (x === 0 || x === 100 || y === 0 || y === 100) ? 1 : .25;
 
-- 
cgit v1.2.3-70-g09d2


From 9e37056e3b1e5412e2eca9020841a56503f70d32 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Wed, 24 Jun 2020 01:46:42 -0400
Subject: changed richTextMenu to dock at top of window.  fixed ColorBox to set
 foreground color of selected text.

---
 deploy/index.html                                  |  2 +-
 src/client/views/AntimodeMenu.tsx                  |  6 ++++-
 src/client/views/MainView.tsx                      |  2 +-
 src/client/views/MetadataEntryMenu.tsx             | 26 +++++++++++++---------
 .../views/collections/CollectionDockingView.tsx    | 17 +++++++-------
 src/client/views/nodes/ColorBox.tsx                |  6 ++---
 .../views/nodes/formattedText/RichTextMenu.tsx     |  6 ++---
 7 files changed, 37 insertions(+), 28 deletions(-)

(limited to 'src/client/views/nodes/ColorBox.tsx')

diff --git a/deploy/index.html b/deploy/index.html
index fdfd77cc2..e441e3610 100644
--- a/deploy/index.html
+++ b/deploy/index.html
@@ -10,7 +10,7 @@
 
 <body>
     <!-- <script src="https://hypothes.is/embed.js" async></script> -->
-    <div id="root"></div>
+    <div id="root" style="position:relative"></div>
     <script src="/bundle.js"></script>
 </body>
 
diff --git a/src/client/views/AntimodeMenu.tsx b/src/client/views/AntimodeMenu.tsx
index 2d26afcf6..3e4d20fea 100644
--- a/src/client/views/AntimodeMenu.tsx
+++ b/src/client/views/AntimodeMenu.tsx
@@ -147,7 +147,11 @@ export default abstract class AntimodeMenu extends React.Component {
     protected getElementWithRows(rows: JSX.Element[], numRows: number, hasDragger: boolean = true) {
         return (
             <div className="antimodeMenu-cont with-rows" onPointerLeave={this.pointerLeave} onPointerEnter={this.pointerEntered} ref={this._mainCont} onContextMenu={this.handleContextMenu}
-                style={{ left: this._left, top: this._top, opacity: this._opacity, transitionProperty: this._transitionProperty, transitionDuration: this._transitionDuration, transitionDelay: this._transitionDelay, height: "auto" }}>
+                style={{
+                    left: this._left, top: this._top, opacity: this._opacity, transitionProperty: this._transitionProperty,
+                    transitionDuration: this._transitionDuration, transitionDelay: this._transitionDelay, height: "auto",
+                    flexDirection: this.Pinned ? "row" : undefined, position: this.Pinned ? "unset" : undefined
+                }}>
                 {hasDragger ? <div className="antimodeMenu-dragger" onPointerDown={this.dragStart} style={{ width: "20px" }} /> : (null)}
                 {rows}
             </div>
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index d6c46e3b0..0686e797e 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -570,6 +570,7 @@ export class MainView extends React.Component {
             <GoogleAuthenticationManager />
             <DocumentDecorations />
             <GestureOverlay>
+                <RichTextMenu key="rich" />
                 {this.mainContent}
             </GestureOverlay>
             <PreviewCursor />
@@ -578,7 +579,6 @@ export class MainView extends React.Component {
             <PDFMenu />
             <MarqueeOptionsMenu />
             <InkOptionsMenu />
-            <RichTextMenu />
             <OverlayView />
             <TimelineMenu />
             {this.snapLines}
diff --git a/src/client/views/MetadataEntryMenu.tsx b/src/client/views/MetadataEntryMenu.tsx
index e100d3f52..b0752ffb2 100644
--- a/src/client/views/MetadataEntryMenu.tsx
+++ b/src/client/views/MetadataEntryMenu.tsx
@@ -197,19 +197,23 @@ export class MetadataEntryMenu extends React.Component<MetadataEntryProps>{
     render() {
         return (<div className="metadataEntry-outerDiv" id="metadataEntry-outer" onPointerDown={e => e.stopPropagation()}>
             <div className="metadataEntry-inputArea">
-                Key:
-                <div className="metadataEntry-autoSuggester" onClick={e => this.autosuggestRef.current!.input?.focus()}  >
-                    <Autosuggest inputProps={{ value: this._currentKey, onChange: this.onKeyChange }}
-                        getSuggestionValue={this.getSuggestionValue}
-                        suggestions={emptyPath}
-                        alwaysRenderSuggestions={false}
-                        renderSuggestion={this.renderSuggestion}
-                        onSuggestionsFetchRequested={emptyFunction}
-                        onSuggestionsClearRequested={emptyFunction}
-                        ref={this.autosuggestRef} />
+                <div style={{ display: "flex", flexDirection: "row" }}>
+                    <span>Key:</span>
+                    <div className="metadataEntry-autoSuggester" onClick={e => this.autosuggestRef.current!.input?.focus()}  >
+                        <Autosuggest inputProps={{ value: this._currentKey, onChange: this.onKeyChange }}
+                            getSuggestionValue={this.getSuggestionValue}
+                            suggestions={emptyPath}
+                            alwaysRenderSuggestions={false}
+                            renderSuggestion={this.renderSuggestion}
+                            onSuggestionsFetchRequested={emptyFunction}
+                            onSuggestionsClearRequested={emptyFunction}
+                            ref={this.autosuggestRef} />
+                    </div>
                 </div>
-                Value:
+                <div style={{ display: "flex", flexDirection: "row" }}>
+                    <span>Value:</span>
                     <input className="metadataEntry-input" ref={this._ref} value={this._currentValue} onClick={e => this._ref.current!.focus()} onChange={this.onValueChange} onKeyDown={this.onValueKeyDown} />
+                </div>
                 {this.considerChildOptions}
             </div>
             <div className="metadataEntry-keys" >
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index a969e302d..ee987abdb 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -11,7 +11,7 @@ import { Id } from '../../../fields/FieldSymbols';
 import { FieldId } from "../../../fields/RefField";
 import { Cast, NumCast, StrCast } from "../../../fields/Types";
 import { TraceMobx } from '../../../fields/util';
-import { emptyFunction, returnOne, returnTrue, Utils, returnZero, returnEmptyFilter } from "../../../Utils";
+import { emptyFunction, returnOne, returnTrue, Utils, returnZero, returnEmptyFilter, setupMoveUpEvents, returnFalse } from "../../../Utils";
 import { DocServer } from "../../DocServer";
 import { Docs } from '../../documents/Documents';
 import { DocumentManager } from '../../util/DocumentManager';
@@ -521,13 +521,14 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
                     tab.setActive(true);
                 };
                 const onDown = (e: React.PointerEvent) => {
-                    if (!(e.nativeEvent as any).defaultPrevented) {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        const dragData = new DragManager.DocumentDragData([doc]);
-                        dragData.dropAction = doc.dropAction as dropActionType;
-                        DragManager.StartDocumentDrag([gearSpan], dragData, e.clientX, e.clientY);
-                    }
+                    setupMoveUpEvents(this, e, (e) => {
+                        if (!(e as any).defaultPrevented) {
+                            const dragData = new DragManager.DocumentDragData([doc]);
+                            dragData.dropAction = doc.dropAction as dropActionType;
+                            DragManager.StartDocumentDrag([gearSpan], dragData, e.clientX, e.clientY);
+                            return true;
+                        } return false
+                    }, returnFalse, emptyFunction);
                 };
 
                 tab.buttonDisposer = reaction(() => ((view: Opt<DocumentView>) => view ? [view] : [])(DocumentManager.Instance.getDocumentView(doc)),
diff --git a/src/client/views/nodes/ColorBox.tsx b/src/client/views/nodes/ColorBox.tsx
index 7b7c4d266..d6d9a8cfd 100644
--- a/src/client/views/nodes/ColorBox.tsx
+++ b/src/client/views/nodes/ColorBox.tsx
@@ -36,11 +36,11 @@ export class ColorBox extends ViewBoxBaseComponent<FieldViewProps, ColorDocument
                     view.props.Document.layout instanceof Doc ? view.props.Document.layout :
                         view.props.Document.isTemplateForField ? view.props.Document : Doc.GetProto(view.props.Document);
                 if (targetDoc) {
-                    if (view.props.LayoutTemplate || view.props.LayoutTemplateString) {  // this situation typically occurs when you have a link dot 
+                    if (view.props.LayoutTemplate?.() || view.props.LayoutTemplateString) {  // this situation typically occurs when you have a link dot 
                         targetDoc.backgroundColor = Doc.UserDoc().backgroundColor;  // bcz: don't know how to change the color of an inline template...
                     }
-                    else if (StrCast(Doc.Layout(view.props.Document).layout).indexOf("FormattedTextBox") !== -1 && FormattedTextBox.HadSelection) {
-                        Doc.Layout(view.props.Document).color = Doc.UserDoc().backgroundColor;
+                    else if (StrCast(Doc.Layout(view.props.Document).layout).includes("FormattedTextBox") && FormattedTextBox.HadSelection) {
+                        Doc.Layout(view.props.Document)[Doc.LayoutFieldKey(view.props.Document) + "-color"] = Doc.UserDoc().backgroundColor;
                     } else {
                         Doc.Layout(view.props.Document)._backgroundColor = Doc.UserDoc().backgroundColor; // '_backgroundColor' is template specific.  'backgroundColor' would apply to all templates, but has no UI at the moment
                     }
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index 1a961ae21..e80951918 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -776,11 +776,11 @@ export default class RichTextMenu extends AntimodeMenu {
                 this.createNodesDropdown(this.activeListType, this.listTypeOptions, "nodes")]}
             </div>
             <div key="button">
-                <div key="collapser">
+                {/* <div key="collapser">
                     <button className="antimodeMenu-button" key="collapse menu" title="Collapse menu" onClick={this.toggleCollapse} style={{ backgroundColor: this.collapsed ? "#121212" : "", width: 25 }}>
                         <FontAwesomeIcon icon="chevron-left" size="lg" style={{ transitionProperty: "transform", transitionDuration: "0.3s", transform: `rotate(${this.collapsed ? 180 : 0}deg)` }} />
                     </button>
-                </div>
+                </div> */}
                 <button className="antimodeMenu-button" key="pin menu" title="Pin menu" onClick={this.toggleMenuPin} style={{ backgroundColor: this.Pinned ? "#121212" : "", display: this.collapsed ? "none" : undefined }}>
                     <FontAwesomeIcon icon="thumbtack" size="lg" style={{ transitionProperty: "transform", transitionDuration: "0.1s", transform: `rotate(${this.Pinned ? 45 : 0}deg)` }} />
                 </button>
@@ -788,7 +788,7 @@ export default class RichTextMenu extends AntimodeMenu {
         </div>;
 
         return (
-            <div className="richTextMenu" onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}>
+            <div className="richTextMenu" onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave} >
                 {this.getElementWithRows([row1, row2], 2, false)}
             </div>
         );
-- 
cgit v1.2.3-70-g09d2

