aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/documents/Documents.ts10
-rw-r--r--src/client/util/CurrentUserUtils.ts6
-rw-r--r--src/client/views/StyleProvider.tsx3
-rw-r--r--src/client/views/collections/collectionLinear/CollectionLinearView.scss8
-rw-r--r--src/client/views/collections/collectionLinear/CollectionLinearView.tsx133
5 files changed, 77 insertions, 83 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index bbb896d6e..d789d4ee3 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -261,7 +261,7 @@ export class DocumentOptions {
presDuration?: number; //the duration of the slide in presentation view
presProgressivize?: boolean;
borderRounding?: string;
- boxShadow?: string;
+ boxShadow?: string; // box-shadow css string OR "standard" to use dash standard box shadow
data?: any;
baseProto?: boolean; // is this a base prototoype
dontRegisterView?: boolean;
@@ -298,7 +298,6 @@ export class DocumentOptions {
linearViewExpandable?: boolean; // can linear view be expanded
linearViewToggleButton?: string; // button to open close linear view group
linearViewSubMenu?: boolean;
- linearViewFloating?: boolean;
flexGap?: number; // Linear view flex gap
flexDirection?: 'unset' | 'row' | 'column' | 'row-reverse' | 'column-reverse';
@@ -1384,11 +1383,12 @@ export namespace DocUtils {
);
}
- export function AssignScripts(doc: Doc, scripts?: { [key: string]: string }, funcs?: { [key: string]: string }) {
+ export function AssignScripts(doc: Doc, scripts?: { [key: string]: string | undefined }, funcs?: { [key: string]: string }) {
scripts &&
Object.keys(scripts).map(key => {
- if (ScriptCast(doc[key])?.script.originalScript !== scripts[key] && scripts[key]) {
- doc[key] = ScriptField.MakeScript(scripts[key], {
+ const script = scripts[key];
+ if (ScriptCast(doc[key])?.script.originalScript !== scripts[key] && script) {
+ doc[key] = ScriptField.MakeScript(script, {
dragData: DragManager.DocumentDragData.name,
value: 'any',
_readOnly_: 'boolean',
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index a2974177e..114dbac93 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -582,20 +582,22 @@ export class CurrentUserUtils {
/// initializes the required buttons in the expanding button menu at the bottom of the Dash window
static setupDockedButtons(doc: Doc, field="myDockedBtns") {
const dockedBtns = DocCast(doc[field]);
- const dockBtn = (opts: DocumentOptions, scripts: {[key:string]:string}, funcs?: {[key:string]:string}) =>
+ const dockBtn = (opts: DocumentOptions, scripts: {[key:string]:string|undefined}, funcs?: {[key:string]:string}) =>
DocUtils.AssignScripts(DocUtils.AssignOpts(DocListCast(dockedBtns?.data)?.find(doc => doc.title === opts.title), opts) ??
CurrentUserUtils.createToolButton(opts), scripts, funcs);
const btnDescs = [// setup reactions to change the highlights on the undo/redo buttons -- would be better to encode this in the undo/redo buttons, but the undo/redo stacks are not wired up that way yet
{ scripts: { onClick: "undo()"}, opts: { title: "undo", icon: "undo-alt", toolTip: "Click to undo" }},
{ scripts: { onClick: "redo()"}, opts: { title: "redo", icon: "redo-alt", toolTip: "Click to redo" }},
+ { scripts: { }, opts: { title: "linker", icon: "linkui", toolTip: "link started"}},
+ { scripts: { }, opts: { title: "currently playing", icon: "currentlyplayingui", toolTip: "currently playing audio"}},
// { scripts: { onClick: 'prevKeyFrame(_readOnly_)'}, opts: { title: "Back", icon: "chevron-left", toolTip: "Prev Animation Frame", btnType: ButtonType.ClickButton, width: 20}},
// { scripts: { onClick:""}, opts: { title: "Num", icon: "", toolTip: "Frame Number", btnType: ButtonType.TextButton, width: 20}, funcs: { buttonText: 'selectedDocs()?.lastElement()?.currentFrame.toString()'}},
// { scripts: { onClick: 'nextKeyFrame(_readOnly_)'}, opts:{title: "Fwd", icon: "chevron-right", toolTip: "Next Animation Frame", btnType: ButtonType.ClickButton, width: 20,} },
];
const btns = btnDescs.map(desc => dockBtn({_width: 30, _height: 30, dontUndo: true, _stayInCollection: true, ...desc.opts}, desc.scripts));
const dockBtnsReqdOpts = {
- title: "docked buttons", _height: 40, flexGap: 0, linearViewFloating: true,
+ title: "docked buttons", _height: 40, flexGap: 0, boxShadow: "standard",
childDontRegisterViews: true, linearViewIsExpanded: true, linearViewExpandable: true, ignoreClick: true
};
reaction(() => UndoManager.redoStack.slice(), () => Doc.GetProto(btns.find(btn => btn.title === "redo")!).opacity = UndoManager.CanRedo() ? 1 : 0.4, { fireImmediately: true });
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index bc8bd7b7f..869570a17 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -18,6 +18,7 @@ import { FieldViewProps } from './nodes/FieldView';
import { SliderBox } from './nodes/SliderBox';
import './StyleProvider.scss';
import React = require('react');
+import { Shadows } from 'browndash-components';
export enum StyleProp {
TreeViewIcon = 'treeViewIcon',
@@ -250,7 +251,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
}
case StyleProp.BoxShadow: {
if (!doc || opacity() === 0) return undefined; // if it's not visible, then no shadow)
-
+ if (doc.boxShadow === 'standard') return Shadows.STANDARD_SHADOW;
if (doc?.isLinkButton && ![DocumentType.LINK, DocumentType.INK].includes(doc.type as any)) return StrCast(doc?._linkButtonShadow, 'lightblue 0em 0em 1em');
switch (doc?.type) {
diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.scss b/src/client/views/collections/collectionLinear/CollectionLinearView.scss
index e8df192cf..521bcda1e 100644
--- a/src/client/views/collections/collectionLinear/CollectionLinearView.scss
+++ b/src/client/views/collections/collectionLinear/CollectionLinearView.scss
@@ -1,6 +1,10 @@
-@import "../../global/globalCssVariables";
-@import "../../_nodeModuleOverrides";
+@import '../../global/globalCssVariables';
+@import '../../_nodeModuleOverrides';
+.collectionLinearView-label {
+ color: black;
+ background-color: $light-gray;
+}
.collectionLinearView-outer {
overflow: visible;
height: 100%;
diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
index 92f6bbb64..9778fc4fe 100644
--- a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
+++ b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
@@ -1,12 +1,12 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Tooltip } from '@material-ui/core';
+import { StylesProvider, Tooltip } from '@material-ui/core';
import { action, IReactionDisposer, observable, reaction, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import { Doc, HeightSym, Opt, WidthSym } from '../../../../fields/Doc';
import { Id } from '../../../../fields/FieldSymbols';
-import { BoolCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types';
-import { emptyFunction, returnEmptyDoclist, returnTrue, Utils } from '../../../../Utils';
+import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types';
+import { emptyFunction, returnEmptyDoclist, returnTrue, StopEvent, Utils } from '../../../../Utils';
import { CollectionViewType } from '../../../documents/DocumentTypes';
import { DocumentManager } from '../../../util/DocumentManager';
import { DragManager } from '../../../util/DragManager';
@@ -119,7 +119,49 @@ export class CollectionLinearView extends CollectionSubView() {
e.preventDefault();
};
+ getLinkUI = () => {
+ return !DocumentLinksButton.StartLink ? null : (
+ <span className="bottomPopup-background" style={{ pointerEvents: 'all' }} onPointerDown={e => e.stopPropagation()}>
+ <span className="bottomPopup-text">
+ Creating link from:{' '}
+ <b>
+ {(DocumentLinksButton.AnnotationId ? 'Annotation in ' : ' ') +
+ (StrCast(DocumentLinksButton.StartLink.title).length < 51 ? DocumentLinksButton.StartLink.title : StrCast(DocumentLinksButton.StartLink.title).slice(0, 50) + '...')}
+ </b>
+ </span>
+
+ <Tooltip title={<div className="dash-tooltip">{'Toggle description pop-up'} </div>} placement="top">
+ <span className="bottomPopup-descriptions" onClick={this.changeDescriptionSetting}>
+ Labels: {LinkDescriptionPopup.showDescriptions ? LinkDescriptionPopup.showDescriptions : 'ON'}
+ </span>
+ </Tooltip>
+
+ <Tooltip title={<div className="dash-tooltip">Exit linking mode</div>} placement="top">
+ <span className="bottomPopup-exit" onClick={this.exitLongLinks}>
+ Stop
+ </span>
+ </Tooltip>
+ </span>
+ );
+ };
+ getCurrentlyPlayingUI = () => {
+ return !CollectionStackedTimeline.CurrentlyPlaying?.length ? null : (
+ <span className="bottomPopup-background">
+ <span className="bottomPopup-text">
+ Currently playing:
+ {CollectionStackedTimeline.CurrentlyPlaying.map((clip, i) => (
+ <span className="audio-title" onPointerDown={() => DocumentManager.Instance.jumpToDocument(clip, true, undefined, [])}>
+ {clip.title + (i === CollectionStackedTimeline.CurrentlyPlaying.length - 1 ? '' : ',')}
+ </span>
+ ))}
+ </span>
+ </span>
+ );
+ };
getDisplayDoc = (doc: Doc, preview: boolean = false) => {
+ if (doc.icon === 'linkui') return this.getLinkUI();
+ if (doc.icon === 'currentlyplayingui') return this.getCurrentlyPlayingUI();
+
const nested = doc._viewType === CollectionViewType.Linear;
const hidden = doc.hidden === true;
@@ -172,40 +214,32 @@ export class CollectionLinearView extends CollectionSubView() {
};
render() {
- const guid = Utils.GenerateGuid(); // Generate a unique ID to use as the label
- const flexDir: any = StrCast(this.Document.flexDirection); // Specify direction of linear view content
- const flexGap: number = NumCast(this.Document.flexGap); // Specify the gap between linear view content
- const expandable: boolean = BoolCast(this.props.Document.linearViewExpandable); // Specify whether it is expandable or not
- const floating: boolean = BoolCast(this.props.Document.linearViewFloating); // Specify whether it is expandable or not
+ const flexDir = StrCast(this.Document.flexDirection); // Specify direction of linear view content
+ const flexGap = NumCast(this.Document.flexGap); // Specify the gap between linear view content
+ const isExpanded = BoolCast(this.layoutDoc.linearViewIsExpanded);
- const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
- const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
- const icon: string = StrCast(this.props.Document.icon); // Menu opener toggle
const menuOpener = (
<label
- htmlFor={`${guid}`}
- style={{
- boxShadow: floating ? Shadows.STANDARD_SHADOW : undefined,
- color: BoolCast(this.layoutDoc.linearViewIsExpanded) ? undefined : Colors.BLACK,
- backgroundColor: backgroundColor === color ? 'black' : BoolCast(this.layoutDoc.linearViewIsExpanded) ? undefined : Colors.LIGHT_GRAY,
- }}
- onPointerDown={e => e.stopPropagation()}>
- <div className="collectionLinearView-menuOpener">{BoolCast(this.layoutDoc.linearViewIsExpanded) ? icon ? icon : <FontAwesomeIcon icon={'minus'} /> : icon ? icon : <FontAwesomeIcon icon={'plus'} />}</div>
+ className={`collectionlinearView-label${isExpanded ? '-expanded' : ''}`}
+ htmlFor={this.Document[Id] + '-input'}
+ style={{ boxShadow: this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BoxShadow) }}
+ onPointerDown={StopEvent}>
+ <div className="collectionLinearView-menuOpener">{Cast(this.props.Document.icon, 'string', null) ?? <FontAwesomeIcon icon={isExpanded ? 'minus' : 'plus'} />}</div>
</label>
);
return (
- <div className={`collectionLinearView-outer ${this.layoutDoc.linearViewSubMenu}`} style={{ backgroundColor: BoolCast(this.layoutDoc.linearViewIsExpanded) ? undefined : 'transparent' }}>
+ <div className={`collectionLinearView-outer ${this.layoutDoc.linearViewSubMenu}`} style={{ backgroundColor: this.layoutDoc.linearViewIsExpanded ? undefined : 'transparent' }}>
<div className="collectionLinearView" ref={this.createDashEventsTarget} onContextMenu={this.myContextMenu}>
- {!expandable ? null : (
- <Tooltip title={<div className="dash-tooltip">{BoolCast(this.props.Document.linearViewIsExpanded) ? 'Close' : 'Open'}</div>} placement="top">
+ {!this.props.Document.linearViewExpandable ? null : (
+ <Tooltip title={<div className="dash-tooltip">{isExpanded ? 'Close' : 'Open'}</div>} placement="top">
{menuOpener}
</Tooltip>
)}
<input
- id={`${guid}`}
+ id={this.Document[Id] + '-input'}
type="checkbox"
- checked={BoolCast(this.props.Document.linearViewIsExpanded)}
+ checked={isExpanded}
ref={this.addMenuToggle}
onChange={action(e => {
ScriptCast(this.Document.onClick)?.script.run({
@@ -216,7 +250,7 @@ export class CollectionLinearView extends CollectionSubView() {
thisContainer: this.props.ContainingCollectionDoc,
documentView: this.props.docViewPath().lastElement(),
});
- this.props.Document.linearViewIsExpanded = this.addMenuToggle.current!.checked;
+ this.layoutDoc.linearViewIsExpanded = this.addMenuToggle.current!.checked;
})}
/>
@@ -224,58 +258,11 @@ export class CollectionLinearView extends CollectionSubView() {
className="collectionLinearView-content"
style={{
height: this.dimension(),
- flexDirection: flexDir,
+ flexDirection: flexDir as any,
gap: flexGap,
}}>
{this.childLayoutPairs.map(pair => this.getDisplayDoc(pair.layout))}
</div>
- {!DocumentLinksButton.StartLink || this.layoutDoc !== Doc.MyDockedBtns ? null : (
- <span className="bottomPopup-background" style={{ pointerEvents: 'all' }} onPointerDown={e => e.stopPropagation()}>
- <span className="bottomPopup-text">
- Creating link from:{' '}
- <b>
- {(DocumentLinksButton.AnnotationId ? 'Annotation in ' : ' ') +
- (StrCast(DocumentLinksButton.StartLink.title).length < 51 ? DocumentLinksButton.StartLink.title : StrCast(DocumentLinksButton.StartLink.title).slice(0, 50) + '...')}
- </b>
- </span>
-
- <Tooltip
- title={
- <>
- <div className="dash-tooltip">{'Toggle description pop-up'} </div>
- </>
- }
- placement="top">
- <span className="bottomPopup-descriptions" onClick={this.changeDescriptionSetting}>
- Labels: {LinkDescriptionPopup.showDescriptions ? LinkDescriptionPopup.showDescriptions : 'ON'}
- </span>
- </Tooltip>
-
- <Tooltip
- title={
- <>
- <div className="dash-tooltip">Exit linking mode</div>
- </>
- }
- placement="top">
- <span className="bottomPopup-exit" onClick={this.exitLongLinks}>
- Stop
- </span>
- </Tooltip>
- </span>
- )}
- {!CollectionStackedTimeline.CurrentlyPlaying || !CollectionStackedTimeline.CurrentlyPlaying.length || this.layoutDoc !== Doc.MyDockedBtns ? null : (
- <span className="bottomPopup-background">
- <span className="bottomPopup-text">
- Currently playing:
- {CollectionStackedTimeline.CurrentlyPlaying.map((clip, i) => (
- <span className="audio-title" onPointerDown={() => DocumentManager.Instance.jumpToDocument(clip, true, undefined, [])}>
- {clip.title + (i === CollectionStackedTimeline.CurrentlyPlaying.length - 1 ? '' : ',')}
- </span>
- ))}
- </span>
- </span>
- )}
</div>
</div>
);
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 14:46:01 +0000