aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/MetadataEntryMenu.tsx7
-rw-r--r--src/client/views/TemplateMenu.scss8
-rw-r--r--src/client/views/TemplateMenu.tsx12
-rw-r--r--src/client/views/collections/CollectionDockingView.scss2
-rw-r--r--src/client/views/collections/ParentDocumentSelector.scss12
-rw-r--r--src/client/views/collections/ParentDocumentSelector.tsx31
6 files changed, 41 insertions, 31 deletions
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>
);
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 23:07:17 +0000