From 462cd06a1bff6e510132a4434a72fd7b4245cfdf Mon Sep 17 00:00:00 2001
From: Stanley Yip <stanley_yip@brown.edu>
Date: Tue, 15 Oct 2019 17:29:57 -0400
Subject: good enough for stanley to start texting i think

---
 .../views/collections/CollectionDockingView.scss   | 69 ++++++++++++++++++++--
 1 file changed, 64 insertions(+), 5 deletions(-)

(limited to 'src/client/views/collections/CollectionDockingView.scss')

diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index 6f5abd05b..b4ab8d550 100644
--- a/src/client/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -1,12 +1,13 @@
 @import "../../views/globalCssVariables.scss";
 
-.lm_active .messageCounter{
-    color:white;
+.lm_active .messageCounter {
+    color: white;
     background: #999999;
 }
+
 .messageCounter {
-    width:18px;
-    height:20px;
+    width: 18px;
+    height: 20px;
     text-align: center;
     border-radius: 20px;
     margin-left: 5px;
@@ -18,22 +19,29 @@
 
 .collectiondockingview-container {
     width: 100%;
-    height:100%;
+    height: 100%;
     border-style: solid;
     border-width: $COLLECTION_BORDER_WIDTH;
     position: absolute;
     top: 0;
     left: 0;
     overflow: hidden;
+
+    .collectionDockingView-dragAsDocument {
+        touch-action: none;
+    }
+
     .lm_controls>li {
         opacity: 0.6;
         transform: scale(1.2);
     }
+
     .lm_maximised .lm_controls .lm_maximise {
         opacity: 1;
         transform: scale(0.8);
         background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==) !important;
     }
+
     .flexlayout__layout {
         left: 0;
         top: 0;
@@ -42,17 +50,21 @@
         position: absolute;
         overflow: hidden;
     }
+
     .flexlayout__splitter {
         background-color: black;
     }
+
     .flexlayout__splitter:hover {
         background-color: #333;
     }
+
     .flexlayout__splitter_drag {
         border-radius: 5px;
         background-color: #444;
         z-index: 1000;
     }
+
     .flexlayout__outline_rect {
         position: absolute;
         cursor: move;
@@ -62,6 +74,7 @@
         z-index: 1000;
         box-sizing: border-box;
     }
+
     .flexlayout__outline_rect_edge {
         cursor: move;
         border: 2px solid #b7d1b5;
@@ -70,12 +83,14 @@
         z-index: 1000;
         box-sizing: border-box;
     }
+
     .flexlayout__edge_rect {
         position: absolute;
         z-index: 1000;
         box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
         background-color: lightgray;
     }
+
     .flexlayout__drag_rect {
         position: absolute;
         cursor: move;
@@ -94,11 +109,13 @@
         padding: 10px;
         word-wrap: break-word;
     }
+
     .flexlayout__tabset {
         overflow: hidden;
         background-color: #222;
         box-sizing: border-box;
     }
+
     .flexlayout__tab {
         overflow: auto;
         position: absolute;
@@ -106,6 +123,7 @@
         background-color: #222;
         color: black;
     }
+
     .flexlayout__tab_button {
         cursor: pointer;
         padding: 2px 8px 3px 8px;
@@ -117,28 +135,35 @@
         vertical-align: top;
         box-sizing: border-box;
     }
+
     .flexlayout__tab_button--selected {
         color: #ddd;
         background-color: #222;
     }
+
     .flexlayout__tab_button--unselected {
         color: gray;
     }
+
     .flexlayout__tab_button_leading {
         display: inline-block;
     }
+
     .flexlayout__tab_button_content {
         display: inline-block;
     }
+
     .flexlayout__tab_button_textbox {
         float: left;
         border: none;
         color: lightgreen;
         background-color: #222;
     }
+
     .flexlayout__tab_button_textbox:focus {
         outline: none;
     }
+
     .flexlayout__tab_button_trailing {
         display: inline-block;
         margin-left: 5px;
@@ -146,10 +171,12 @@
         width: 8px;
         height: 8px;
     }
+
     .flexlayout__tab_button:hover .flexlayout__tab_button_trailing,
     .flexlayout__tab_button--selected .flexlayout__tab_button_trailing {
         background: transparent url("../../../../node_modules/flexlayout-react/images/close_white.png") no-repeat center;
     }
+
     .flexlayout__tab_button_overflow {
         float: left;
         width: 20px;
@@ -162,6 +189,7 @@
         font-family: Arial, sans-serif;
         background: transparent url("../../../../node_modules/flexlayout-react/images/more.png") no-repeat left;
     }
+
     .flexlayout__tabset_header {
         position: absolute;
         left: 0;
@@ -172,6 +200,7 @@
         /*box-shadow: inset 0px 0px 3px 0px rgba(136, 136, 136, 0.54);*/
         box-sizing: border-box;
     }
+
     .flexlayout__tab_header_inner {
         position: absolute;
         left: 0;
@@ -179,6 +208,7 @@
         bottom: 0;
         width: 10000px;
     }
+
     .flexlayout__tab_header_outer {
         background-color: black;
         position: absolute;
@@ -188,12 +218,15 @@
         /*height: 100px;*/
         overflow: hidden;
     }
+
     .flexlayout__tabset-selected {
         background-image: linear-gradient(#111, #444);
     }
+
     .flexlayout__tabset-maximized {
         background-image: linear-gradient(#666, #333);
     }
+
     .flexlayout__tab_toolbar {
         position: absolute;
         display: flex;
@@ -203,6 +236,7 @@
         bottom: 0;
         right: 0;
     }
+
     .flexlayout__tab_toolbar_button-min {
         width: 20px;
         height: 20px;
@@ -210,6 +244,7 @@
         outline-width: 0;
         background: transparent url("../../../../node_modules/flexlayout-react/images/maximize.png") no-repeat center;
     }
+
     .flexlayout__tab_toolbar_button-max {
         width: 20px;
         height: 20px;
@@ -217,14 +252,18 @@
         outline-width: 0;
         background: transparent url("../../../../node_modules/flexlayout-react/images/restore.png") no-repeat center;
     }
+
     .flexlayout__popup_menu {}
+
     .flexlayout__popup_menu_item {
         padding: 2px 10px 2px 10px;
         color: #ddd;
     }
+
     .flexlayout__popup_menu_item:hover {
         background-color: #444444;
     }
+
     .flexlayout__popup_menu_container {
         box-shadow: inset 0 0 5px rgba(0, 0, 0, .15);
         border: 1px solid #555;
@@ -233,33 +272,39 @@
         position: absolute;
         z-index: 1000;
     }
+
     .flexlayout__border_top {
         background-color: black;
         border-bottom: 1px solid #ddd;
         box-sizing: border-box;
         overflow: hidden;
     }
+
     .flexlayout__border_bottom {
         background-color: black;
         border-top: 1px solid #333;
         box-sizing: border-box;
         overflow: hidden;
     }
+
     .flexlayout__border_left {
         background-color: black;
         border-right: 1px solid #333;
         box-sizing: border-box;
         overflow: hidden;
     }
+
     .flexlayout__border_right {
         background-color: black;
         border-left: 1px solid #333;
         box-sizing: border-box;
         overflow: hidden;
     }
+
     .flexlayout__border_inner_bottom {
         display: flex;
     }
+
     .flexlayout__border_inner_left {
         position: absolute;
         white-space: nowrap;
@@ -267,6 +312,7 @@
         transform-origin: top right;
         transform: rotate(-90deg);
     }
+
     .flexlayout__border_inner_right {
         position: absolute;
         white-space: nowrap;
@@ -274,6 +320,7 @@
         transform-origin: top left;
         transform: rotate(90deg);
     }
+
     .flexlayout__border_button {
         background-color: #222;
         color: white;
@@ -285,29 +332,36 @@
         vertical-align: top;
         box-sizing: border-box;
     }
+
     .flexlayout__border_button--selected {
         color: #ddd;
         background-color: #222;
     }
+
     .flexlayout__border_button--unselected {
         color: gray;
     }
+
     .flexlayout__border_button_leading {
         float: left;
         display: inline;
     }
+
     .flexlayout__border_button_content {
         display: inline-block;
     }
+
     .flexlayout__border_button_textbox {
         float: left;
         border: none;
         color: green;
         background-color: #ddd;
     }
+
     .flexlayout__border_button_textbox:focus {
         outline: none;
     }
+
     .flexlayout__border_button_trailing {
         display: inline-block;
         margin-left: 5px;
@@ -315,10 +369,12 @@
         width: 8px;
         height: 8px;
     }
+
     .flexlayout__border_button:hover .flexlayout__border_button_trailing,
     .flexlayout__border_button--selected .flexlayout__border_button_trailing {
         background: transparent url("../../../../node_modules/flexlayout-react/images/close_white.png") no-repeat center;
     }
+
     .flexlayout__border_toolbar_left {
         position: absolute;
         display: flex;
@@ -328,6 +384,7 @@
         left: 0;
         right: 0;
     }
+
     .flexlayout__border_toolbar_right {
         position: absolute;
         display: flex;
@@ -337,6 +394,7 @@
         left: 0;
         right: 0;
     }
+
     .flexlayout__border_toolbar_top {
         position: absolute;
         display: flex;
@@ -346,6 +404,7 @@
         bottom: 0;
         right: 0;
     }
+
     .flexlayout__border_toolbar_bottom {
         position: absolute;
         display: flex;
-- 
cgit v1.2.3-70-g09d2


From bce5f3aac4e31745e679c9eec92f836f3b136be9 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Fri, 13 Dec 2019 00:35:54 -0500
Subject: fixed doc button bar to stay on screen

---
 src/client/views/MetadataEntryMenu.tsx             |  7 ++---
 src/client/views/TemplateMenu.scss                 |  8 +++---
 src/client/views/TemplateMenu.tsx                  | 12 +++++----
 .../views/collections/CollectionDockingView.scss   |  2 +-
 .../views/collections/ParentDocumentSelector.scss  | 12 +++++++--
 .../views/collections/ParentDocumentSelector.tsx   | 31 +++++++++++-----------
 6 files changed, 41 insertions(+), 31 deletions(-)

(limited to 'src/client/views/collections/CollectionDockingView.scss')

diff --git a/src/client/views/MetadataEntryMenu.tsx b/src/client/views/MetadataEntryMenu.tsx
index 8859c14cb..243cdb8f6 100644
--- a/src/client/views/MetadataEntryMenu.tsx
+++ b/src/client/views/MetadataEntryMenu.tsx
@@ -6,7 +6,7 @@ import { KeyValueBox } from './nodes/KeyValueBox';
 import { Doc, Field, DocListCastAsync } from '../../new_fields/Doc';
 import * as Autosuggest from 'react-autosuggest';
 import { undoBatch } from '../util/UndoManager';
-import { emptyFunction } from '../../Utils';
+import { emptyFunction, emptyPath } from '../../Utils';
 
 export type DocLike = Doc | Doc[] | Promise<Doc> | Promise<Doc[]>;
 export interface MetadataEntryProps {
@@ -194,6 +194,7 @@ export class MetadataEntryMenu extends React.Component<MetadataEntryProps>{
         );
     }
 
+    _ref = React.createRef<HTMLInputElement>();
     render() {
         return (
             <div className="metadataEntry-outerDiv">
@@ -201,14 +202,14 @@ export class MetadataEntryMenu extends React.Component<MetadataEntryProps>{
                     Key:
                     <Autosuggest inputProps={{ value: this._currentKey, onChange: this.onKeyChange }}
                         getSuggestionValue={this.getSuggestionValue}
-                        suggestions={[]}
+                        suggestions={emptyPath}
                         alwaysRenderSuggestions={false}
                         renderSuggestion={this.renderSuggestion}
                         onSuggestionsFetchRequested={emptyFunction}
                         onSuggestionsClearRequested={emptyFunction}
                         ref={this.autosuggestRef} />
                     Value:
-                    <input className="metadataEntry-input" value={this._currentValue} onChange={this.onValueChange} onKeyDown={this.onValueKeyDown} />
+                    <input className="metadataEntry-input" ref={this._ref} value={this._currentValue} onClick={e => this._ref.current!.focus()} onChange={this.onValueChange} onKeyDown={this.onValueKeyDown} />
                     {this.considerChildOptions}
                 </div>
                 <div className="metadataEntry-keys" >
diff --git a/src/client/views/TemplateMenu.scss b/src/client/views/TemplateMenu.scss
index 186d3ab0d..69bebe0e9 100644
--- a/src/client/views/TemplateMenu.scss
+++ b/src/client/views/TemplateMenu.scss
@@ -30,15 +30,15 @@
 }
 
 .template-list {
-    position: absolute;
-    top: 25px;
-    left: 0px;
-    width: max-content;
     font-family: $sans-serif;
     font-size: 12px;
     background-color: $light-color-secondary;
     padding: 2px 12px;
     list-style: none;
+    position: relative;
+    display: inline-block;
+    height: 100%;
+    width: 100%;
 
     .templateToggle, .chromeToggle {
         text-align: left;
diff --git a/src/client/views/TemplateMenu.tsx b/src/client/views/TemplateMenu.tsx
index f7cfc4022..598bcd56d 100644
--- a/src/client/views/TemplateMenu.tsx
+++ b/src/client/views/TemplateMenu.tsx
@@ -159,13 +159,15 @@ export class TemplateMenu extends React.Component<TemplateMenuProps> {
         templateMenu.push(<OtherToggle key={"custom"} name={"Custom"} checked={StrCast(this.props.docs[0].Document.layoutKey, "layout") !== "layout"} toggle={this.toggleCustom} />);
         templateMenu.push(<OtherToggle key={"chrome"} name={"Chrome"} checked={layout.chromeStatus !== "disabled"} toggle={this.toggleChrome} />);
         return (
-            <div className="templating-menu" onPointerDown={this.onAliasButtonDown}>
-                <div title="Drag:(create alias). Tap:(modify layout)." className="templating-button" onClick={() => this.toggleTemplateActivity()}>+</div>
-                <ul className="template-list" ref={this._dragRef} style={{ display: this._hidden ? "none" : "block" }}>
+            <Flyout anchorPoint={anchorPoints.RIGHT_TOP}
+                content={<ul className="template-list" ref={this._dragRef} style={{ display: this._hidden ? "none" : "block" }}>
                     {templateMenu}
                     {<button onClick={this.clearTemplates}>Restore Defaults</button>}
-                </ul>
-            </div>
+                </ul>}>
+                <div className="templating-menu" onPointerDown={this.onAliasButtonDown}>
+                    <div title="Drag:(create alias). Tap:(modify layout)." className="templating-button" onClick={() => this.toggleTemplateActivity()}>+</div>
+                </div>
+            </Flyout>
         );
     }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index bcdc9c97e..f518ef8fb 100644
--- a/src/client/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -25,7 +25,7 @@
     position: absolute;
     top: 0;
     left: 0;
-    overflow: hidden;
+    // overflow: hidden;  // bcz: menus don't show up when this is on (e.g., the parentSelectorMenu)
 
     .collectionDockingView-dragAsDocument {
         touch-action: none;
diff --git a/src/client/views/collections/ParentDocumentSelector.scss b/src/client/views/collections/ParentDocumentSelector.scss
index aa25a900c..5d2245292 100644
--- a/src/client/views/collections/ParentDocumentSelector.scss
+++ b/src/client/views/collections/ParentDocumentSelector.scss
@@ -1,11 +1,19 @@
-.PDS-flyout {
+.parentDocumentSelector-linkFlyout {
+    div {
+        overflow: visible !important;
+    }
+    .metadataEntry-outerDiv {
+        overflow: hidden !important;
+        pointer-events: all;
+    }
+}
+.parentDocumentSelector-flyout {
     position: absolute;
     z-index: 9999;
     background-color: #eeeeee;
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
     min-width: 150px;
     color: black;
-    top: 12px;
 
     padding: 10px;
     border-radius: 3px;
diff --git a/src/client/views/collections/ParentDocumentSelector.tsx b/src/client/views/collections/ParentDocumentSelector.tsx
index 75ee8de32..b2f5c92b5 100644
--- a/src/client/views/collections/ParentDocumentSelector.tsx
+++ b/src/client/views/collections/ParentDocumentSelector.tsx
@@ -93,22 +93,21 @@ export class ParentDocSelector extends React.Component<SelectorProps> {
     }
 
     render() {
-        let flyout;
-        if (this.hover) {
-            flyout = (
-                <div className="PDS-flyout" title=" ">
-                    <SelectorContextMenu {...this.props} />
-                </div>
-            );
-        }
-        return (
-            <span className="parentDocumentSelector-button" style={{ position: "relative", display: "inline-block", paddingLeft: "5px", paddingRight: "5px" }}
-                onMouseEnter={this.onMouseEnter}
-                onMouseLeave={this.onMouseLeave}>
-                <p>^</p>
-                {flyout}
-            </span>
+        let flyout = (
+            <div className="parentDocumentSelector-flyout" style={{ position: "relative", display: "inline-block", height: "100%", width: "100%", }} title=" ">
+                <SelectorContextMenu {...this.props} />
+            </div>
         );
+        return <div title="Drag(create link) Tap(view links)" className="parentDocumentSelector-linkFlyout">
+            <Flyout anchorPoint={anchorPoints.RIGHT_TOP}
+                content={flyout}>
+                <span className="parentDocumentSelector-button" style={{ position: "relative", display: "inline-block", paddingLeft: "5px", paddingRight: "5px" }}
+                    onMouseEnter={this.onMouseEnter}
+                    onMouseLeave={this.onMouseLeave}>
+                    <p>^</p>
+                </span>
+            </Flyout>
+        </div>;
     }
 }
 
@@ -131,7 +130,7 @@ export class ButtonSelector extends React.Component<{ Document: Doc, Stack: any
         if (this.hover) {
             const view = DocumentManager.Instance.getDocumentView(this.props.Document);
             flyout = !view ? (null) : (
-                <div className="PDS-flyout" title=" " onMouseLeave={this.onMouseLeave}>
+                <div className="ParentDocumentSelector-flyout" title=" " onMouseLeave={this.onMouseLeave}>
                     <DocumentButtonBar views={[view]} stack={this.props.Stack} />
                 </div>
             );
-- 
cgit v1.2.3-70-g09d2