aboutsummaryrefslogtreecommitdiff
path: root/src/client/views
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views')
-rw-r--r--src/client/views/PropertiesDocContextSelector.tsx10
-rw-r--r--src/client/views/StyleProvider.scss4
-rw-r--r--src/client/views/StyleProvider.tsx17
-rw-r--r--src/client/views/collections/TreeView.scss5
-rw-r--r--src/client/views/collections/TreeView.tsx28
-rw-r--r--src/client/views/global/globalScripts.ts2
-rw-r--r--src/client/views/newlightbox/NewLightboxView.tsx4
-rw-r--r--src/client/views/nodes/DocumentView.tsx5
-rw-r--r--src/client/views/nodes/FontIconBox/FontIconBox.tsx17
-rw-r--r--src/client/views/nodes/LinkBox.scss8
-rw-r--r--src/client/views/topbar/TopBar.tsx9
11 files changed, 51 insertions, 58 deletions
diff --git a/src/client/views/PropertiesDocContextSelector.tsx b/src/client/views/PropertiesDocContextSelector.tsx
index 6a54f0002..395aa2b61 100644
--- a/src/client/views/PropertiesDocContextSelector.tsx
+++ b/src/client/views/PropertiesDocContextSelector.tsx
@@ -3,11 +3,10 @@ import { observer } from 'mobx-react';
import * as React from 'react';
import { Doc, DocListCast } from '../../fields/Doc';
import { Id } from '../../fields/FieldSymbols';
-import { Cast, NumCast, StrCast } from '../../fields/Types';
-import { CollectionViewType } from '../documents/DocumentTypes';
+import { Cast, StrCast } from '../../fields/Types';
import { DocFocusOrOpen } from '../util/DocumentManager';
import { CollectionDockingView } from './collections/CollectionDockingView';
-import { DocumentView, OpenWhere, OpenWhereMod } from './nodes/DocumentView';
+import { DocumentView, OpenWhere } from './nodes/DocumentView';
import './PropertiesDocContextSelector.scss';
type PropertiesDocContextSelectorProps = {
@@ -19,7 +18,6 @@ type PropertiesDocContextSelectorProps = {
@observer
export class PropertiesDocContextSelector extends React.Component<PropertiesDocContextSelectorProps> {
-
@computed get _docs() {
if (!this.props.DocView) return [];
const target = this.props.DocView.props.Document;
@@ -40,7 +38,7 @@ export class PropertiesDocContextSelector extends React.Component<PropertiesDocC
}, new Set<Doc>())
.keys()
);
- console.log("embeddings " + embeddings.length);
+ console.log('embeddings ' + embeddings.length);
return doclayouts
.filter(doc => !Doc.AreProtosEqual(doc, CollectionDockingView.Instance?.props.Document))
@@ -56,7 +54,7 @@ export class PropertiesDocContextSelector extends React.Component<PropertiesDocC
};
render() {
- if (this._docs.length < 1) return undefined
+ if (this._docs.length < 1) return undefined;
return (
<div>
{this.props.hideTitle ? null : <p key="contexts">Contexts:</p>}
diff --git a/src/client/views/StyleProvider.scss b/src/client/views/StyleProvider.scss
index 80c878386..c06bb287e 100644
--- a/src/client/views/StyleProvider.scss
+++ b/src/client/views/StyleProvider.scss
@@ -31,8 +31,8 @@
.styleProvider-treeView-icon,
.styleProvider-treeView-icon-active {
- margin-left: 0.25rem;
- margin-right: 0.25rem;
+ margin-left: 0;
+ margin-right: 0;
}
.styleProvider-treeView-icon {
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index a030c7052..c7616a9ba 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -1,7 +1,7 @@
import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Tooltip } from '@material-ui/core';
-import { Shadows } from 'browndash-components';
+import { IconButton, Shadows, Size } from 'browndash-components';
import { action, runInAction } from 'mobx';
import { extname } from 'path';
import { Doc, Opt, StrListCast } from '../../fields/Doc';
@@ -323,18 +323,19 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
}
export function DashboardToggleButton(doc: Doc, field: string, onIcon: IconProp, offIcon: IconProp, clickFunc?: () => void) {
+ const color = StrCast(Doc.UserDoc().userColor);
return (
- <div
- title={field}
- className={`styleProvider-treeView-icon${doc[field] ? '-active' : ''}`}
+ <IconButton
+ size={Size.XSMALL}
+ color={color}
+ icon={<FontAwesomeIcon icon={(doc[field] ? (onIcon as any) : offIcon) as IconProp} />}
onClick={undoBatch(
action((e: React.MouseEvent) => {
e.stopPropagation();
clickFunc ? clickFunc() : (doc[field] = doc[field] ? undefined : true);
})
- )}>
- <FontAwesomeIcon icon={(doc[field] ? (onIcon as any) : offIcon) as IconProp} size="sm" />
- </div>
+ )}
+ />
);
}
/**
@@ -342,7 +343,7 @@ export function DashboardToggleButton(doc: Doc, field: string, onIcon: IconProp,
*/
export function DashboardStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps | DocumentViewProps>, property: string) {
if (doc && property.split(':')[0] === StyleProp.Decorations) {
- return doc._type_collection === CollectionViewType.Docking
+ return doc._type_collection === CollectionViewType.Docking || Doc.IsSystem(doc)
? null
: DashboardToggleButton(doc, 'hidden', 'eye-slash', 'eye', () => DocFocusOrOpen(doc, { toggleTarget: true, willZoomCentered: true, zoomScale: 0 }, DocCast(doc?.embedContainer ?? doc?.annotationOn)));
}
diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss
index 85f99b9c2..cfa658944 100644
--- a/src/client/views/collections/TreeView.scss
+++ b/src/client/views/collections/TreeView.scss
@@ -13,7 +13,7 @@
.treeView-container-active {
.bullet-outline {
position: relative;
- width: $TREE_BULLET_WIDTH;
+ width: fit-content;
color: $medium-gray;
transform: scale(0.5);
display: inline-flex;
@@ -21,7 +21,6 @@
}
.treeView-bulletIcons {
- // width: $TREE_BULLET_WIDTH;
width: 100%;
height: 100%;
position: relative;
@@ -43,7 +42,7 @@
justify-content: center;
align-items: center;
position: relative;
- width: $TREE_BULLET_WIDTH;
+ width: fit-content;
min-height: 20px;
color: $medium-gray;
border: #80808030 1px solid;
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index fa9f895fd..9158508fc 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -712,23 +712,23 @@ export class TreeView extends React.Component<TreeViewProps> {
!(this.doc.text as RichTextField)?.Text ? null : (
<IconButton
color={color}
- icon={<FontAwesomeIcon icon={[this.childDocs?.length && !this.treeViewOpen ? 'fas' : 'far', 'circle']} />}
+ icon={<FontAwesomeIcon
+ icon={[this.childDocs?.length && !this.treeViewOpen ? 'fas' : 'far', 'circle']} />}
size={Size.XSMALL}
/>
)
) : (
<div className="treeView-bulletIcons" style={{ color: Doc.IsSystem(DocCast(this.doc.proto)) ? 'red' : undefined }}>
- <IconButton
+ {this.onCheckedClick ? <IconButton
color={color}
icon={<FontAwesomeIcon size="sm" icon={checked === 'check' ? 'check' : checked === 'x' ? 'times' : checked === 'unchecked' ? 'square' : !this.treeViewOpen ? 'caret-right' : 'caret-down'} />}
size={Size.XSMALL}
- />
- {this.onCheckedClick ? null :
- <IconButton
- color={color}
- icon={<FontAwesomeIcon icon={iconType as IconProp} />}
- size={Size.XSMALL}
- />
+ /> :
+ <IconButton
+ color={color}
+ icon={<FontAwesomeIcon icon={iconType as IconProp} />}
+ size={Size.XSMALL}
+ />
}
</div>
)}
@@ -757,15 +757,15 @@ export class TreeView extends React.Component<TreeViewProps> {
@observable headerEleWidth = 0;
@computed get titleButtons() {
const customHeaderButtons = this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations);
+ const color = this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Color);
return this.props.treeViewHideHeaderFields() || this.doc.treeViewHideHeaderFields ? null : (
<>
{customHeaderButtons} {/* e.g.,. hide button is set by dashboardStyleProvider */}
{this.doc._layout_hideContextMenu ? null : (
- <FontAwesomeIcon
- title="context menu"
- key="bars"
- icon="bars"
- size="sm"
+ <IconButton
+ color={color}
+ icon={<FontAwesomeIcon icon="bars" />}
+ size={Size.XSMALL}
onClick={e => {
this.showContextMenu(e);
e.stopPropagation();
diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts
index d22b6b4d9..b906065a0 100644
--- a/src/client/views/global/globalScripts.ts
+++ b/src/client/views/global/globalScripts.ts
@@ -20,6 +20,8 @@ import { WebBox } from "../nodes/WebBox";
import { RichTextMenu } from "../nodes/formattedText/RichTextMenu";
import { DocumentType } from "../../documents/DocumentTypes";
+ScriptingGlobals.add(function IsNoneSelected() { return SelectionManager.Views().length <= 0; }, "are no document selected");
+
// toggle: Set overlay status of selected document
ScriptingGlobals.add(function setView(view: string) {
const selected = SelectionManager.Docs().lastElement();
diff --git a/src/client/views/newlightbox/NewLightboxView.tsx b/src/client/views/newlightbox/NewLightboxView.tsx
index c5e98da86..3acbd1a32 100644
--- a/src/client/views/newlightbox/NewLightboxView.tsx
+++ b/src/client/views/newlightbox/NewLightboxView.tsx
@@ -305,8 +305,8 @@ export class NewLightboxView extends React.Component<LightboxViewProps> {
renderDepth={0}
rootSelected={returnTrue}
docViewPath={returnEmptyDoclist}
- docFilters={this.docFilters}
- docRangeFilters={returnEmptyFilter}
+ childFilters={this.docFilters}
+ childFiltersByRanges={returnEmptyFilter}
searchFilterDocs={returnEmptyDoclist}
addDocument={undefined}
removeDocument={undefined}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 6b47564a4..91390e488 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -800,17 +800,16 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
!more && moreItems.length && cm.addItem({ description: 'More...', subitems: moreItems, icon: 'compass' });
}
const constantItems: ContextMenuProps[] = [];
- constantItems.push({ description: 'Show Metadata', event: () => this.props.addDocTab(this.props.Document, (OpenWhere.addRight.toString() + 'KeyValue') as OpenWhere), icon: 'layer-group' });
if (!Doc.IsSystem(this.rootDoc)) {
constantItems.push({ description: 'Export as Zip file', icon: 'download', event: async () => Doc.Zip(this.props.Document) });
- constantItems.push({ description: 'Import Zipped file', icon: 'upload', event: ({ x, y }) => this.importDocument() });
(this.rootDoc._type_collection !== CollectionViewType.Docking || !Doc.noviceMode) && constantItems.push({ description: 'Share', event: () => SharingManager.Instance.open(this.props.DocumentView()), icon: 'users' });
if (this.props.removeDocument && Doc.ActiveDashboard !== this.props.Document) {
// need option to gray out menu items ... preferably with a '?' that explains why they're grayed out (eg., no permissions)
constantItems.push({ description: 'Close', event: this.deleteClicked, icon: 'times' });
}
}
- cm.addItem({ description: 'General...', noexpand: !Doc.IsSystem(this.rootDoc), subitems: constantItems, icon: 'question' });
+ constantItems.push({ description: 'Show Metadata', event: () => this.props.addDocTab(this.props.Document, (OpenWhere.addRight.toString() + 'KeyValue') as OpenWhere), icon: 'layer-group' });
+ cm.addItem({ description: 'General...', noexpand: false, subitems: constantItems, icon: 'question' });
const help = cm.findByDescription('Help...');
const helpItems: ContextMenuProps[] = help && 'subitems' in help ? help.subitems : [];
diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
index 39be4022e..3ec53beac 100644
--- a/src/client/views/nodes/FontIconBox/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
@@ -376,6 +376,8 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
const tooltip: string = StrCast(this.rootDoc.toolTip);
+ const onClickScript = ScriptCast(this.rootDoc.onClick);
+ const script = ScriptCast(this.rootDoc.script);
// TODO:glr Add label of button type
let button: JSX.Element = this.defaultButton;
// prettier-ignore
@@ -398,22 +400,19 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
button = this.dropdownButton;
break;
case ButtonType.ToggleButton: button = this.toggleButton; break;
- case ButtonType.TextButton:
- const script = ScriptCast(this.rootDoc.script);
- const checkResult = script?.script.run({ _readOnly_: true }).result;
- // Script for checking the outcome of the toggle
+ case ButtonType.ClickButton:
+ case ButtonType.ToolButton:
button = (
- <Button tooltip={tooltip} color={checkResult ?? backgroundColor} icon={this.Icon(color)!} text={StrCast(this.rootDoc.buttonText)} label={this.label}/>
+ <IconButton tooltip={tooltip} onPointerDown={() => onClickScript?.script.run({ _readOnly_: false })} color={color} icon={this.Icon(color)!} label={this.label}/>
);
break;
- case ButtonType.ClickButton:
- case ButtonType.ToolButton:
+ case ButtonType.TextButton:
button = (
- <IconButton tooltip={tooltip} onPointerDown={() => script?.script.run({ _readOnly_: false })} color={color} icon={this.Icon(color)!} label={this.label}/>
+ <Button tooltip={tooltip} icon={this.Icon(color)!} text={StrCast(this.rootDoc.buttonText)} label={this.label}/>
);
break;
case ButtonType.MenuButton: button = (
- <IconButton tooltip={tooltip} tooltipPlacement='right' size={Size.LARGE} color={color} icon={this.Icon(color)!} label={this.label}/>
+ <IconButton tooltip={tooltip} onPointerDown={() => onClickScript?.script.run({ self: this.rootDoc, _readOnly_: false })} tooltipPlacement='right' size={Size.LARGE} color={color} icon={this.Icon(color)!} label={this.label}/>
);
break;
}
diff --git a/src/client/views/nodes/LinkBox.scss b/src/client/views/nodes/LinkBox.scss
index b5b8e660f..767f0291b 100644
--- a/src/client/views/nodes/LinkBox.scss
+++ b/src/client/views/nodes/LinkBox.scss
@@ -1,3 +1,7 @@
-.linkBox-container-interactive {
+.linkBox-container-interactive {
pointer-events: all;
-} \ No newline at end of file
+ width: 100%;
+}
+.linkBox-container {
+ width: 100%;
+}
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index 130e47a41..79f41fe9d 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -106,15 +106,6 @@ export class TopBar extends React.Component {
onClick={(e: React.MouseEvent) => {
const dashView = Doc.ActiveDashboard && DocumentManager.Instance.getDocumentView(Doc.ActiveDashboard);
ContextMenu.Instance.addItem({ description: 'Open Dashboard View', event: this.navigateToHome, icon: 'edit' });
- ContextMenu.Instance.addItem({
- description: 'Snapshot Dashboard',
- event: async () => {
- const batch = UndoManager.StartBatch('snapshot');
- await DashboardView.snapshotDashboard();
- batch.end();
- },
- icon: 'edit',
- });
dashView?.showContextMenu(e.clientX + 20, e.clientY + 30);
}}
/>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-03-05 16:08:35 +0000