aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/util/DocumentManager.ts2
-rw-r--r--src/client/views/PropertiesButtons.tsx44
-rw-r--r--src/client/views/PropertiesView.tsx9
-rw-r--r--src/client/views/linking/LinkEditor.tsx3
-rw-r--r--src/client/views/nodes/DocumentView.tsx2
5 files changed, 48 insertions, 12 deletions
diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 01ca24439..ef0a339ce 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -321,7 +321,7 @@ export class DocumentManager {
() =>
this.jumpToDocument(
targetDoc,
- true,
+ willZoom,
(doc: Doc, finished?: () => void) => doc !== targetDocContext && createViewFunc(doc, finished),
docContext,
linkDoc,
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 80c2c7705..aefc91751 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -2,7 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Tooltip } from '@material-ui/core';
import { action, computed, observable } from 'mobx';
import { observer } from 'mobx-react';
-import { Doc, Opt } from '../../fields/Doc';
+import { Doc, DocListCast, Opt } from '../../fields/Doc';
import { Id } from '../../fields/FieldSymbols';
import { InkField } from '../../fields/InkField';
import { RichTextField } from '../../fields/RichTextField';
@@ -93,6 +93,14 @@ export class PropertiesButtons extends React.Component<{}, {}> {
on => 'lock'
);
}
+ @computed get forceActiveButton() {
+ return this.propertyToggleBtn(
+ 'Active',
+ '_forceActive',
+ on => `${on ? 'Select to activate' : 'Contents always active'} `,
+ on => 'eye'
+ );
+ }
@computed get fitContentButton() {
return this.propertyToggleBtn(
'View All',
@@ -101,6 +109,34 @@ export class PropertiesButtons extends React.Component<{}, {}> {
on => 'eye'
);
}
+ // this implments a container pattern by marking the targetDoc (collection) as an inPlace container,
+ // and then making the contained collection be a "menu" such that when any of its contents are clicked,
+ // they will open their targets in the outer container. To get back to the "menu", you click on the main container.
+ @computed get inPlaceContainerButton() {
+ return this.propertyToggleBtn(
+ 'In Place',
+ 'isInPlaceContainer',
+ on => `${on ? 'Make' : 'Remove'} in place container flag`,
+ on => 'window',
+ onClick => {
+ SelectionManager.Views().forEach(dv => {
+ const containerDoc = dv.rootDoc;
+ containerDoc._isLinkButton = containerDoc._fitContentsToBox = containerDoc._forceActive = containerDoc._isInPlaceContainer = !containerDoc._isInPlaceContainer;
+ containerDoc.followLinkLocation = containerDoc._isInPlaceContainer ? 'inPlace' : undefined;
+ containerDoc._xPadding = containerDoc._yPadding = containerDoc._isInPlaceContainer ? 10 : undefined;
+ const menuDoc = DocListCast(dv.dataDoc[dv.props.fieldKey ?? Doc.LayoutFieldKey(containerDoc)]).lastElement();
+ if (menuDoc) {
+ menuDoc._forceActive = menuDoc._fitContentsToBox = menuDoc._isLinkButton = true;
+ DocUtils.MakeLink({ doc: dv.rootDoc }, { doc: menuDoc }, 'back link to container');
+ DocListCast(menuDoc[Doc.LayoutFieldKey(menuDoc)]).forEach(menuItem => {
+ menuItem._isLinkButton = true;
+ menuItem._followLinkLocation = 'inPlace';
+ });
+ }
+ });
+ }
+ );
+ }
@computed get fitWidthButton() {
return this.propertyToggleBtn(
'Fit\xA0Width',
@@ -256,7 +292,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
docView.setToggleDetail();
break;
case 'linkInPlace':
- docView.toggleFollowLink('inPlace', true, false);
+ docView.toggleFollowLink('inPlace', false, false);
break;
case 'linkOnRight':
docView.toggleFollowLink('add:right', false, false);
@@ -277,7 +313,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
['nothing', 'Select Document'],
['enterPortal', 'Enter Portal'],
['toggleDetail', 'Toggle Detail'],
- ['linkInPlace', 'Follow Link'],
+ ['linkInPlace', 'Open in Place'],
['linkOnRight', 'Open Link on Right'],
];
const currentSelection = this.selectedDoc.onClickBehavior;
@@ -360,7 +396,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{toggle(this.onClickButton)}
{toggle(this.fitWidthButton)}
{toggle(this.freezeThumb)}
+ {toggle(this.forceActiveButton, { display: !isFreeForm && !isMap ? 'none' : '' })}
{toggle(this.fitContentButton, { display: !isFreeForm && !isMap ? 'none' : '' })}
+ {toggle(this.inPlaceContainerButton, { display: !isFreeForm && !isMap ? 'none' : '' })}
{toggle(this.autoHeightButton, { display: !isText && !isStacking && !isTree ? 'none' : '' })}
{toggle(this.maskButton, { display: !isInk ? 'none' : '' })}
{toggle(this.chromeButton, { display: !isCollection || isNovice ? 'none' : '' })}
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 1f161c01b..e5ff9e267 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -33,7 +33,6 @@ import { PropertiesDocBacklinksSelector } from './PropertiesDocBacklinksSelector
import { PropertiesDocContextSelector } from './PropertiesDocContextSelector';
import './PropertiesView.scss';
import { DefaultStyleProvider } from './StyleProvider';
-import { listSpec } from '../../fields/Schema';
const higflyout = require('@hig/flyout');
export const { anchorPoints } = higflyout;
export const Flyout = higflyout.default;
@@ -115,12 +114,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
return this.selectedDoc?.type === DocumentType.INK;
}
- rtfWidth = () => {
- return !this.selectedDoc ? 0 : Math.min(this.selectedDoc?.[WidthSym](), this.props.width - 20);
- };
- rtfHeight = () => {
- return !this.selectedDoc ? 0 : this.rtfWidth() <= this.selectedDoc?.[WidthSym]() ? Math.min(this.selectedDoc?.[HeightSym](), this.MAX_EMBED_HEIGHT) : this.MAX_EMBED_HEIGHT;
- };
+ rtfWidth = () => (!this.selectedDoc ? 0 : Math.min(this.selectedDoc?.[WidthSym](), this.props.width - 20));
+ rtfHeight = () => (!this.selectedDoc ? 0 : this.rtfWidth() <= this.selectedDoc?.[WidthSym]() ? Math.min(this.selectedDoc?.[HeightSym](), this.MAX_EMBED_HEIGHT) : this.MAX_EMBED_HEIGHT);
@action
docWidth = () => {
diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx
index 1697062f4..2fb8e3d4c 100644
--- a/src/client/views/linking/LinkEditor.tsx
+++ b/src/client/views/linking/LinkEditor.tsx
@@ -282,6 +282,9 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
<div className="linkEditor-followingDropdown-option" onPointerDown={() => this.changeFollowBehavior('replace')}>
Replace Tab
</div>
+ <div className="linkEditor-followingDropdown-option" onPointerDown={() => this.changeFollowBehavior('inPlace')}>
+ In Place
+ </div>
{this.props.linkDoc.linksToAnnotation ? (
<div className="linkEditor-followingDropdown-option" onPointerDown={() => this.changeFollowBehavior('openExternal')}>
Always open in external page
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index c669d2b96..7accd49a4 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -909,7 +909,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
!options && cm.addItem({ description: 'Options...', subitems: optionItems, icon: 'compass' });
onClicks.push({ description: this.Document.ignoreClick ? 'Select' : 'Do Nothing', event: () => (this.Document.ignoreClick = !this.Document.ignoreClick), icon: this.Document.ignoreClick ? 'unlock' : 'lock' });
- onClicks.push({ description: this.Document.isLinkButton ? 'Remove Follow Behavior' : 'Follow Link in Place', event: () => this.toggleFollowLink('inPlace', true, false), icon: 'link' });
+ onClicks.push({ description: this.Document.isLinkButton ? 'Remove Follow Behavior' : 'Follow Link in Place', event: () => this.toggleFollowLink('inPlace', false, false), icon: 'link' });
!this.Document.isLinkButton && onClicks.push({ description: 'Follow Link on Right', event: () => this.toggleFollowLink('add:right', false, false), icon: 'link' });
onClicks.push({ description: this.Document.isLinkButton || this.onClickHandler ? 'Remove Click Behavior' : 'Follow Link', event: () => this.toggleFollowLink(undefined, false, false), icon: 'link' });
onClicks.push({ description: (this.Document.isPushpin ? 'Remove' : 'Make') + ' Pushpin', event: () => this.toggleFollowLink(undefined, false, true), icon: 'map-pin' });