aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/PropertiesButtons.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/PropertiesButtons.tsx')
-rw-r--r--src/client/views/PropertiesButtons.tsx109
1 files changed, 57 insertions, 52 deletions
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 66c3ed439..ac1b66013 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -6,7 +6,8 @@ import { Doc, DocListCast, Opt } from '../../fields/Doc';
import { Id } from '../../fields/FieldSymbols';
import { InkField } from '../../fields/InkField';
import { RichTextField } from '../../fields/RichTextField';
-import { BoolCast, StrCast } from '../../fields/Types';
+import { ScriptField } from '../../fields/ScriptField';
+import { BoolCast, ScriptCast, StrCast } from '../../fields/Types';
import { ImageField } from '../../fields/URLField';
import { DocUtils } from '../documents/Documents';
import { CollectionViewType, DocumentType } from '../documents/DocumentTypes';
@@ -15,10 +16,11 @@ import { undoBatch } from '../util/UndoManager';
import { Colors } from './global/globalEnums';
import { InkingStroke } from './InkingStroke';
import { DocumentView, OpenWhere } from './nodes/DocumentView';
-import { VideoBox } from './nodes/VideoBox';
import { pasteImageBitmap } from './nodes/WebBoxRenderer';
import './PropertiesButtons.scss';
import React = require('react');
+import { LinkManager } from '../util/LinkManager';
+import { Utils } from '../../Utils';
const higflyout = require('@hig/flyout');
export const { anchorPoints } = higflyout;
export const Flyout = higflyout.default;
@@ -77,6 +79,14 @@ export class PropertiesButtons extends React.Component<{}, {}> {
(dv, doc) => InkingStroke.toggleMask(dv?.layoutDoc || doc)
);
}
+ @computed get hideImageButton() {
+ return this.propertyToggleBtn(
+ 'Background',
+ '_hideImage',
+ on => (on ? 'Show Image' : 'Show Background'),
+ on => 'portrait'
+ );
+ }
@computed get clustersButton() {
return this.propertyToggleBtn(
'Clusters',
@@ -106,42 +116,32 @@ export class PropertiesButtons extends React.Component<{}, {}> {
'View All',
'_fitContentsToBox',
on => `${on ? "Don't" : 'Do'} fit content to container visible area`,
- on => 'eye'
+ on => 'object-group'
);
}
- // 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() {
+ // this implments a container pattern by marking the targetDoc (collection) as a lightbox
+ // that always fits its contents to its container and that hides all other documents when
+ // a link is followed that targets a 'lightbox' destination
+ @computed get isLightboxButton() {
return this.propertyToggleBtn(
- 'In Place',
- 'isInPlaceContainer',
- on => `${on ? 'Make' : 'Remove'} in place container flag`,
+ 'Lightbox',
+ 'isLightbox',
+ on => `${on ? 'Set' : 'Remove'} lightbox flag`,
on => 'window-restore',
onClick => {
SelectionManager.Views().forEach(dv => {
const containerDoc = dv.rootDoc;
- containerDoc.followAllLinks =
- containerDoc.noShadow =
- containerDoc.noHighlighting =
- containerDoc._isLinkButton =
- containerDoc._fitContentsToBox =
- containerDoc._forceActive =
- containerDoc._isInPlaceContainer =
- !containerDoc._isInPlaceContainer;
- containerDoc.followLinkLocation = containerDoc._isInPlaceContainer ? OpenWhere.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.hideDecorations = menuDoc._forceActive = menuDoc._fitContentsToBox = menuDoc._isLinkButton = menuDoc._noShadow = menuDoc.noHighlighting = containerDoc._isInPlaceContainer;
- if (!dv.allLinks.find(link => link.anchor1 === menuDoc || link.anchor2 === menuDoc)) {
- DocUtils.MakeLink({ doc: dv.rootDoc }, { doc: menuDoc }, 'back link to container');
- }
- DocListCast(menuDoc[Doc.LayoutFieldKey(menuDoc)]).forEach(menuItem => {
- menuItem.followLinkAudio = menuItem.followAllLinks = menuItem._isLinkButton = true;
- menuItem._followLinkLocation = OpenWhere.inPlace;
- });
- }
+ //containerDoc.followAllLinks =
+ // containerDoc.noShadow =
+ // containerDoc.noHighlighting =
+ // containerDoc._forceActive =
+ containerDoc._fitContentsToBox = containerDoc._isLightbox = !containerDoc._isLightbox;
+ containerDoc._xPadding = containerDoc._yPadding = containerDoc._isLightbox ? 10 : undefined;
+ const containerContents = DocListCast(dv.dataDoc[dv.props.fieldKey ?? Doc.LayoutFieldKey(containerDoc)]);
+ dv.rootDoc.onClick = ScriptField.MakeScript('{self.data = undefined; documentView.select(false)}', { documentView: 'any' });
+ containerContents.forEach(doc => {
+ DocListCast(doc.links).forEach(link => (link.linkDisplay = false));
+ });
});
}
);
@@ -214,7 +214,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
'FreezeThumb',
'_thumb-frozen',
on => `${on ? 'Freeze' : 'Unfreeze'} thumbnail`,
- on => 'arrows-alt-h',
+ on => 'snowflake',
(dv, doc) => {
if (doc['thumb-frozen']) doc['thumb-frozen'] = undefined;
else {
@@ -222,7 +222,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
setTimeout(() =>
pasteImageBitmap((data_url: any, error: any) => {
error && console.log(error);
- data_url && VideoBox.convertDataUri(data_url, doc[Id] + '-thumb-frozen', true).then(returnedfilename => (doc['thumb-frozen'] = new ImageField(returnedfilename)));
+ data_url && Utils.convertDataUri(data_url, doc[Id] + '-thumb-frozen', true).then(returnedfilename => (doc['thumb-frozen'] = new ImageField(returnedfilename)));
})
);
}
@@ -234,7 +234,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
'Snap\xA0Lines',
'showSnapLines',
on => `Display snapping lines when objects are dragged`,
- on => 'border-all',
+ on => 'th',
undefined,
true
);
@@ -287,7 +287,6 @@ export class PropertiesButtons extends React.Component<{}, {}> {
@undoBatch
@action
handleOptionChange = (onClick: string) => {
- this.selectedDoc && (this.selectedDoc.onClickBehavior = onClick);
SelectionManager.Views()
.filter(dv => dv.docView)
.map(dv => dv.docView!)
@@ -301,10 +300,12 @@ export class PropertiesButtons extends React.Component<{}, {}> {
docView.setToggleDetail();
break;
case 'linkInPlace':
- docView.toggleFollowLink('inPlace', false, false);
+ docView.toggleFollowLink(false, false);
+ docView.props.Document.followLinkLocation = docView.props.Document._isLinkButton ? OpenWhere.lightbox : undefined;
break;
case 'linkOnRight':
- docView.toggleFollowLink('add:right', false, false);
+ docView.toggleFollowLink(false, false);
+ docView.props.Document.followLinkLocation = docView.props.Document._isLinkButton ? OpenWhere.addRight : undefined;
break;
}
});
@@ -322,24 +323,26 @@ export class PropertiesButtons extends React.Component<{}, {}> {
['nothing', 'Select Document'],
['enterPortal', 'Enter Portal'],
['toggleDetail', 'Toggle Detail'],
- ['linkInPlace', 'Open in Place'],
+ ['linkInPlace', 'Open Link in Lightbox'],
['linkOnRight', 'Open Link on Right'],
];
- const currentSelection = this.selectedDoc.onClickBehavior;
- // Get items to place into the list
-
const list = buttonList.map(value => {
- const click = () => {
- this.handleOptionChange(value[0]);
- };
+ const click = () => this.handleOptionChange(value[0]);
+ const linkButton = BoolCast(this.selectedDoc._isLinkButton);
+ const followLoc = this.selectedDoc._followLinkLocation;
+ const linkedToLightboxView = () => DocListCast(this.selectedDoc.links).some(link => LinkManager.getOppositeAnchor(link, this.selectedDoc)?._isLightbox);
+
+ let active = false;
+ // prettier-ignore
+ switch (value[0]) {
+ case 'linkInPlace': active = linkButton && followLoc === OpenWhere.lightbox && !linkedToLightboxView(); break;
+ case 'linkOnRight': active = linkButton && followLoc === OpenWhere.addRight; break;
+ case 'enterPortal': active = linkButton && this.selectedDoc._followLinkLocation === OpenWhere.lightbox && linkedToLightboxView(); break;
+ case 'toggleDetail':active = ScriptCast(this.selectedDoc.onClick)?.script.originalScript.includes('toggleDetail'); break;
+ case 'nothing': active = !linkButton && this.selectedDoc.onClick === undefined;break;
+ }
return (
- <div
- className="list-item"
- key={`${value}`}
- style={{
- backgroundColor: value[0] === currentSelection ? Colors.LIGHT_BLUE : undefined,
- }}
- onClick={click}>
+ <div className="list-item" key={`${value}`} style={{ backgroundColor: active ? Colors.LIGHT_BLUE : undefined }} onClick={click}>
{value[1]}
</div>
);
@@ -383,6 +386,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
const layoutField = this.selectedDoc?.[Doc.LayoutFieldKey(this.selectedDoc)];
const isText = layoutField instanceof RichTextField;
const isInk = layoutField instanceof InkField;
+ const isImage = layoutField instanceof ImageField;
const isMap = this.selectedDoc?.type === DocumentType.MAP;
const isCollection = this.selectedDoc?.type === DocumentType.COL;
//TODO: will likely need to create separate note-taking view type here
@@ -407,9 +411,10 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{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.isLightboxButton, { display: !isFreeForm && !isMap ? 'none' : '' })}
{toggle(this.autoHeightButton, { display: !isText && !isStacking && !isTree ? 'none' : '' })}
{toggle(this.maskButton, { display: !isInk ? 'none' : '' })}
+ {toggle(this.hideImageButton, { display: !isImage ? 'none' : '' })}
{toggle(this.chromeButton, { display: !isCollection || isNovice ? 'none' : '' })}
{toggle(this.gridButton, { display: !isCollection ? 'none' : '' })}
{toggle(this.groupButton, { display: isTabView || !isCollection ? 'none' : '' })}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-14 13:31:21 +0000