From 888ddd78737781f8a2d045b5f1e41788c512c94d Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 8 Sep 2023 17:02:49 -0400 Subject: don't remove current recording from overlay, added closeOnSelect option for dropdown. place recording box on screen. fixe overlayView to keep views on screen. fixed schema view checkboxes. don't cause tab to rerender when colelctoin type changes. add dropdown to filter indicator to find filters. --- src/client/util/CurrentUserUtils.ts | 1 - src/client/util/SettingsManager.tsx | 6 +++- src/client/util/reportManager/ReportManager.tsx | 2 ++ src/client/views/DashboardView.tsx | 1 + src/client/views/MainView.tsx | 6 +++- src/client/views/OverlayView.tsx | 15 ++++++++ src/client/views/PropertiesButtons.tsx | 1 + src/client/views/PropertiesView.tsx | 39 ++++++++++---------- src/client/views/StyleProvider.scss | 9 +++-- src/client/views/StyleProvider.tsx | 41 +++++++++++++++++++--- src/client/views/UndoStack.tsx | 12 +++---- src/client/views/collections/TabDocView.tsx | 10 +++--- .../collectionSchema/CollectionSchemaView.tsx | 8 ++--- src/client/views/nodes/FontIconBox/FontIconBox.tsx | 3 +- .../views/nodes/RecordingBox/RecordingBox.tsx | 9 +++-- 15 files changed, 111 insertions(+), 52 deletions(-) (limited to 'src') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index aa5f2658a..8bedea562 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -763,7 +763,6 @@ export class CurrentUserUtils { } /// Initializes all the default buttons for the top bar context menu static setupTopbarButtons(doc: Doc, field="myTopBarBtns") { - if (Doc.UserDoc().currentRecording) Doc.RemFromMyOverlay(DocCast(Doc.UserDoc().currentRecording)); Doc.UserDoc().currentRecording = undefined; Doc.UserDoc().workspaceRecordingState = undefined; Doc.UserDoc().workspaceReplayingState = undefined; diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index 720badd40..53cfbc947 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -142,6 +142,7 @@ export class SettingsManager extends React.Component<{}> { formLabel="Theme" size={Size.SMALL} type={Type.TERT} + closeOnSelect={false} selectedVal={userTheme} setSelectedVal={scheme => this.changeColorScheme(scheme as string)} items={colorSchemes.map((scheme, i) => ({ @@ -294,6 +295,7 @@ export class SettingsManager extends React.Component<{}> { }, }; })} + closeOnSelect={true} dropdownType={DropdownType.SELECT} type={Type.TERT} selectedVal={StrCast(Doc.UserDoc().fontFamily)} @@ -373,6 +375,7 @@ export class SettingsManager extends React.Component<{}> {
{
{ { @@ -320,6 +321,7 @@ export class ReportManager extends React.Component<{}> { { diff --git a/src/client/views/DashboardView.tsx b/src/client/views/DashboardView.tsx index 1d1d0eaab..014a6358f 100644 --- a/src/client/views/DashboardView.tsx +++ b/src/client/views/DashboardView.tsx @@ -371,6 +371,7 @@ export class DashboardView extends React.Component { Doc.AddDocToList(Doc.MyHeaderBar, 'data', freeformDoc); dashboardDoc['pane-count'] = 1; + freeformDoc.embedContainer = dashboardDoc; Doc.AddDocToList(Doc.MyDashboards, 'data', dashboardDoc); diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 8adb28fe1..2b4f4d5f7 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -810,7 +810,11 @@ export class MainView extends React.Component {
)}
- {this.propertiesWidth() < 10 ? null : } + { +
+ +
+ }
diff --git a/src/client/views/OverlayView.tsx b/src/client/views/OverlayView.tsx index 5d95c5fda..c174befc0 100644 --- a/src/client/views/OverlayView.tsx +++ b/src/client/views/OverlayView.tsx @@ -16,6 +16,7 @@ import { LightboxView } from './LightboxView'; import { DocumentView, DocumentViewInternal } from './nodes/DocumentView'; import './OverlayView.scss'; import { DefaultStyleProvider } from './StyleProvider'; +const _global = (window /* browser */ || global) /* node */ as any; export type OverlayDisposer = () => void; @@ -115,6 +116,20 @@ export class OverlayView extends React.Component { super(props); if (!OverlayView.Instance) { OverlayView.Instance = this; + new _global.ResizeObserver( + action((entries: any) => { + for (const entry of entries) { + DocListCast(Doc.MyOverlayDocs?.data).forEach(doc => { + if (NumCast(doc.overlayX) > entry.contentRect.width - 10) { + doc.overlayX = entry.contentRect.width - 10; + } + if (NumCast(doc.overlayY) > entry.contentRect.height - 10) { + doc.overlayY = entry.contentRect.height - 10; + } + }); + } + }) + ).observe(window.document.body); } } diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 42db0b9be..d939470e9 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -376,6 +376,7 @@ export class PropertiesButtons extends React.Component<{}, {}> { this.handleOptionChange(val as string)} title={'Choose onClick behaviour'} diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 72ff906f6..9cc75b1c6 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -52,6 +52,12 @@ interface PropertiesViewProps { export class PropertiesView extends React.Component { private _widthUndo?: UndoManager.Batch; + public static Instance: PropertiesView | undefined; + constructor(props: any) { + super(props); + PropertiesView.Instance = this; + } + @computed get MAX_EMBED_HEIGHT() { return 200; } @@ -75,6 +81,7 @@ export class PropertiesView extends React.Component { } @observable layoutFields: boolean = false; + @observable layoutDocAcls: boolean = false; @observable openOptions: boolean = true; @observable openSharing: boolean = true; @@ -86,8 +93,6 @@ export class PropertiesView extends React.Component { @observable openTransform: boolean = true; @observable openFilters: boolean = false; - @observable layoutDocAcls: boolean = false; - //Pres Trails booleans: @observable openPresTransitions: boolean = true; @observable openPresProgressivize: boolean = false; @@ -103,7 +108,7 @@ export class PropertiesView extends React.Component { this._disposers.link = reaction( () => LinkManager.currentLink, link => { - link && this.onDoubleClick(); + link && this.CloseAll(); link && (this.openLinks = true); }, { fireImmediately: true } @@ -970,7 +975,7 @@ export class PropertiesView extends React.Component { }; @action - onDoubleClick = () => { + CloseAll = () => { this.openContexts = false; this.openLinks = false; this.openOptions = false; @@ -1120,7 +1125,7 @@ export class PropertiesView extends React.Component { isOpen={this.openOptions} setInSection={bool => (this.inOptions = bool)} setIsOpen={bool => (this.openOptions = bool)} - onDoubleClick={this.onDoubleClick} + onDoubleClick={this.CloseAll} /> ); } @@ -1147,7 +1152,7 @@ export class PropertiesView extends React.Component { } isOpen={this.openSharing} setIsOpen={bool => (this.openSharing = bool)} - onDoubleClick={() => this.onDoubleClick()} + onDoubleClick={() => this.CloseAll()} /> ); } @@ -1187,7 +1192,7 @@ export class PropertiesView extends React.Component { } isOpen={this.openFilters} setIsOpen={bool => (this.openFilters = bool)} - onDoubleClick={() => this.onDoubleClick()} + onDoubleClick={() => this.CloseAll()} /> ); } @@ -1197,8 +1202,8 @@ export class PropertiesView extends React.Component { return ( <> - (this.openAppearance = bool)} onDoubleClick={() => this.onDoubleClick()} /> - (this.openTransform = bool)} onDoubleClick={() => this.onDoubleClick()} /> + (this.openAppearance = bool)} onDoubleClick={() => this.CloseAll()} /> + (this.openTransform = bool)} onDoubleClick={() => this.CloseAll()} /> ); } @@ -1210,29 +1215,23 @@ export class PropertiesView extends React.Component { content={
{Doc.noviceMode ? this.noviceFields : this.expandedField}
} isOpen={this.openFields} setIsOpen={bool => (this.openFields = bool)} - onDoubleClick={() => this.onDoubleClick()} + onDoubleClick={() => this.CloseAll()} /> ); } @computed get contextsSubMenu() { return ( - 0 ? this.contexts : 'There are no other contexts.'} - isOpen={this.openContexts} - setIsOpen={bool => (this.openContexts = bool)} - onDoubleClick={() => this.onDoubleClick()} - /> + 0 ? this.contexts : 'There are no other contexts.'} isOpen={this.openContexts} setIsOpen={bool => (this.openContexts = bool)} onDoubleClick={() => this.CloseAll()} /> ); } @computed get linksSubMenu() { - return 0 ? this.links : 'There are no current links.'} isOpen={this.openLinks} setIsOpen={bool => (this.openLinks = bool)} onDoubleClick={this.onDoubleClick} />; + return 0 ? this.links : 'There are no current links.'} isOpen={this.openLinks} setIsOpen={bool => (this.openLinks = bool)} onDoubleClick={this.CloseAll} />; } @computed get layoutSubMenu() { - return (this.openLayout = bool)} onDoubleClick={this.onDoubleClick} />; + return (this.openLayout = bool)} onDoubleClick={this.CloseAll} />; } @computed get description() { @@ -1723,7 +1722,7 @@ export class PropertiesView extends React.Component { {this.contextsSubMenu} {this.fieldsSubMenu} {isNovice ? null : this.sharingSubMenu} - {isNovice ? null : this.filtersSubMenu} + {this.filtersSubMenu} {isNovice ? null : this.layoutSubMenu} ); diff --git a/src/client/views/StyleProvider.scss b/src/client/views/StyleProvider.scss index c06bb287e..f069e7e1b 100644 --- a/src/client/views/StyleProvider.scss +++ b/src/client/views/StyleProvider.scss @@ -18,10 +18,15 @@ cursor: default; } .styleProvider-filter { - right: 0; + right: 15; + .styleProvider-filterShift { + left: 0; + top: 0; + position: absolute; + } } .styleProvider-audio { - right: 15; + right: 30; } .styleProvider-lock:hover, .styleProvider-audio:hover, diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx index 069bfd049..8a5ad3139 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 { IconButton, Shadows, Size } from 'browndash-components'; +import { Dropdown, DropdownType, IconButton, IListItemProps, ListBox, ListItem, Popup, Shadows, Size, Type } from 'browndash-components'; import { action, runInAction } from 'mobx'; import { extname } from 'path'; import { BsArrowDown, BsArrowDownUp, BsArrowUp } from 'react-icons/bs'; @@ -24,6 +24,8 @@ import { KeyValueBox } from './nodes/KeyValueBox'; import { SliderBox } from './nodes/SliderBox'; import './StyleProvider.scss'; import React = require('react'); +import { PropertiesView } from './PropertiesView'; +import { FaFilter } from 'react-icons/fa'; export enum StyleProp { TreeViewIcon = 'treeView_Icon', @@ -283,13 +285,44 @@ export function DefaultStyleProvider(doc: Opt, props: Opt { const showFilterIcon = StrListCast(doc?._childFilters).length || StrListCast(doc?._childFiltersByRanges).length - ? '#18c718bd' //'hasFilter' + ? 'green' // #18c718bd' //'hasFilter' : docProps?.childFilters?.().filter(f => Utils.IsRecursiveFilter(f) && f !== Utils.noDragsDocFilter).length || docProps?.childFiltersByRanges().length ? 'orange' //'inheritsFilter' : undefined; return !showFilterIcon ? null : ( -
(SettingsManager.propertiesWidth = 250))}> - +
+
} + closeOnSelect={true} + setSelectedVal={ + action((dv) => { + (dv as any).select(false); + (SettingsManager.propertiesWidth = 250); + setTimeout(action(() => { + if (PropertiesView.Instance) { + PropertiesView.Instance.CloseAll(); + PropertiesView.Instance.openFilters = true; + } + })); + }) + } + size={Size.XSMALL} + width={15} + height={15} + title={showFilterIcon === 'green' ? + "This view is filtered. Click to view/change filters": + "this view inherits filters from one of its parents"} + color={SettingsManager.userColor} + background={showFilterIcon} + items={[...(props?.docViewPath?.()??[]), ...(props?.DocumentView?[props?.DocumentView?.()]:[])].map(dv => ({ + text: StrCast(dv.rootDoc.title), + val: dv as any, + style: {color:SettingsManager.userColor, background:SettingsManager.userBackgroundColor}, + } as IListItemProps)) } + />
); }; diff --git a/src/client/views/UndoStack.tsx b/src/client/views/UndoStack.tsx index 1afd5ad22..093bb8b9c 100644 --- a/src/client/views/UndoStack.tsx +++ b/src/client/views/UndoStack.tsx @@ -1,14 +1,12 @@ -import { action, observable } from 'mobx'; +import { Tooltip } from '@mui/material'; +import { Popup, Type } from 'browndash-components'; +import { observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { UndoManager } from '../util/UndoManager'; -import './UndoStack.scss'; import { StrCast } from '../../fields/Types'; -import { Doc } from '../../fields/Doc'; -import { Popup, Type, isDark } from 'browndash-components'; -import { Colors } from './global/globalEnums'; import { SettingsManager } from '../util/SettingsManager'; -import { Tooltip } from '@mui/material'; +import { UndoManager } from '../util/UndoManager'; +import './UndoStack.scss'; interface UndoStackProps { width?: number; diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 9ea1ed2de..d9faab063 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -17,6 +17,7 @@ import { CollectionViewType, DocumentType } from '../../documents/DocumentTypes' import { DocumentManager } from '../../util/DocumentManager'; import { DragManager, dropActionType } from '../../util/DragManager'; import { SelectionManager } from '../../util/SelectionManager'; +import { SettingsManager } from '../../util/SettingsManager'; import { SnappingManager } from '../../util/SnappingManager'; import { Transform } from '../../util/Transform'; import { undoable, UndoManager } from '../../util/UndoManager'; @@ -33,7 +34,6 @@ import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormV import { CollectionView } from './CollectionView'; import './TabDocView.scss'; import React = require('react'); -import { SettingsManager } from '../../util/SettingsManager'; const _global = (window /* browser */ || global) /* node */ as any; interface TabDocViewProps { @@ -420,7 +420,7 @@ export class TabDocView extends React.Component { PanelHeight = () => this._panelHeight; miniMapColor = () => Colors.MEDIUM_GRAY; tabView = () => this._view; - disableMinimap = () => !this._document || this._document.layout !== CollectionView.LayoutString(Doc.LayoutFieldKey(this._document)) || this._document?._type_collection !== CollectionViewType.Freeform; + disableMinimap = () => !this._document; whenChildContentActiveChanges = (isActive: boolean) => (this._isAnyChildContentActive = isActive); isContentActive = () => this._isContentActive; waitForDoubleClick = () => (DocumentView.ExploreMode ? 'never' : undefined); @@ -461,9 +461,7 @@ export class TabDocView extends React.Component { bringToFront={emptyFunction} pinToPres={TabDocView.PinDoc} /> - {this.disableMinimap() || this._document._type_collection !== CollectionViewType.Freeform ? null : ( - - )} + {this.disableMinimap() ? null : } ); } @@ -615,7 +613,7 @@ export class TabMinimapView extends React.Component { ); }; render() { - return ( + return this.props.document.layout !== CollectionView.LayoutString(Doc.LayoutFieldKey(this.props.document)) || this.props.document?._type_collection !== CollectionViewType.Freeform ? null : (
} color={SettingsManager.userVariantColor} type={Type.TERT} onPointerDown={e => e.stopPropagation()} placement={'top-end'} popup={this.popup} />
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx index 182a33fd1..5c7dcc1a4 100644 --- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx +++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx @@ -609,10 +609,10 @@ export class CollectionSchemaView extends CollectionSubView() { this._menuKeys = this.documentKeys.filter(value => value.toLowerCase().includes(this._menuValue.toLowerCase())); }; - getFieldFilters = (field: string) => StrListCast(this.Document._childFilters).filter(filter => filter.split(':')[0] == field); + getFieldFilters = (field: string) => StrListCast(this.Document._childFilters).filter(filter => filter.split(Doc.FilterSep)[0] == field); removeFieldFilters = (field: string) => { - this.getFieldFilters(field).forEach(filter => Doc.setDocFilter(this.Document, field, filter.split(':')[1], 'remove')); + this.getFieldFilters(field).forEach(filter => Doc.setDocFilter(this.Document, field, filter.split(Doc.FilterSep)[1], 'remove')); }; onFilterKeyDown = (e: React.KeyboardEvent) => { @@ -766,8 +766,8 @@ export class CollectionSchemaView extends CollectionSubView() { return keyOptions.map(key => { let bool = false; if (filters !== undefined) { - const ind = filters.findIndex(filter => filter.split(':')[1] === key); - const fields = ind === -1 ? undefined : filters[ind].split(':'); + const ind = filters.findIndex(filter => filter.split(Doc.FilterSep)[1] === key); + const fields = ind === -1 ? undefined : filters[ind].split(Doc.FilterSep); bool = fields ? fields[2] === 'check' : false; } return ( diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx index 1eb6fd51c..0a59818ad 100644 --- a/src/client/views/nodes/FontIconBox/FontIconBox.tsx +++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx @@ -246,10 +246,11 @@ export class FontIconBox extends DocComponent() { return ( script.script.run({ this: this.layoutDoc, self: this.rootDoc, val }), `dropdown select ${this.label}`)} + setSelectedVal={undoable(value => script.script.run({ this: this.layoutDoc, self: this.rootDoc, value }), `dropdown select ${this.label}`)} color={SettingsManager.userColor} background={SettingsManager.userVariantColor} type={Type.TERT} + closeOnSelect={false} dropdownType={DropdownType.SELECT} onItemDown={this.dropdownItemDown} items={list} diff --git a/src/client/views/nodes/RecordingBox/RecordingBox.tsx b/src/client/views/nodes/RecordingBox/RecordingBox.tsx index 1f113110b..481e43feb 100644 --- a/src/client/views/nodes/RecordingBox/RecordingBox.tsx +++ b/src/client/views/nodes/RecordingBox/RecordingBox.tsx @@ -119,7 +119,7 @@ export class RecordingBox extends ViewBoxBaseComponent() { public static replayWorkspace(value: Doc) { Doc.UserDoc().currentRecording = value; value.overlayX = 70; - value.overlayY = 590; + value.overlayY = window.innerHeight - 180; Doc.AddToMyOverlay(value); DocumentManager.Instance.AddViewRenderedCb(value, docView => { Doc.UserDoc().currentRecording = docView.rootDoc; @@ -147,11 +147,10 @@ export class RecordingBox extends ViewBoxBaseComponent() { @action public static resumeWorkspaceReplaying(doc: Doc) { const docView = DocumentManager.Instance.getDocumentView(doc); - const videoBox = docView?.ComponentView as VideoBox; - if (videoBox) { - videoBox.Play(); - Doc.UserDoc().workspaceReplayingState = media_state.Playing; + if (docView?.ComponentView instanceof VideoBox) { + docView.ComponentView.Play(); } + Doc.UserDoc().workspaceReplayingState = media_state.Playing; } @action -- cgit v1.2.3-70-g09d2