diff options
Diffstat (limited to 'src/client/views/PropertiesView.tsx')
| -rw-r--r-- | src/client/views/PropertiesView.tsx | 127 |
1 files changed, 116 insertions, 11 deletions
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index ae6f6afe2..31c03de4c 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -3,12 +3,15 @@ import { IconLookup } from '@fortawesome/fontawesome-svg-core'; import { faAnchor, faArrowRight, faWindowMaximize } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Checkbox, Tooltip } from '@material-ui/core'; -import { concat, intersection } from 'lodash'; +import { Button, Colors, EditableText, NumberInput, Size, Slider, Type } from 'browndash-components'; +import { concat } from 'lodash'; import { Lambda, action, computed, observable } from 'mobx'; import { observer } from 'mobx-react'; import { ColorState, SketchPicker } from 'react-color'; +import * as Icons from "react-icons/bs"; //{BsCollectionFill, BsFillFileEarmarkImageFill} from "react-icons/bs" +import { GrCircleInformation } from 'react-icons/gr'; import { Utils, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents } from '../../Utils'; -import { Doc, Field, FieldResult, HierarchyMapping, NumListCast, Opt, ReverseHierarchyMap, StrListCast } from '../../fields/Doc'; +import { Doc, DocListCast, Field, FieldResult, HierarchyMapping, NumListCast, Opt, ReverseHierarchyMap, StrListCast } from '../../fields/Doc'; import { AclAdmin, DocAcl, DocData, Height, Width } from '../../fields/DocSymbols'; import { Id } from '../../fields/FieldSymbols'; import { InkField } from '../../fields/InkField'; @@ -30,13 +33,12 @@ import { InkStrokeProperties } from './InkStrokeProperties'; import { PropertiesButtons } from './PropertiesButtons'; import { PropertiesDocBacklinksSelector } from './PropertiesDocBacklinksSelector'; import { PropertiesDocContextSelector } from './PropertiesDocContextSelector'; +import { PropertiesSection } from './PropertiesSection'; import './PropertiesView.scss'; import { DefaultStyleProvider } from './StyleProvider'; -import { Button, Colors, EditableText, NumberDropdown, Size, Slider, Type, NumberInput } from 'browndash-components'; -import { PropertiesSection } from './PropertiesSection'; import { DocumentView, OpenWhere, StyleProviderFunc } from './nodes/DocumentView'; -import { PresBox, PresEffect, PresEffectDirection } from './nodes/trails'; import { KeyValueBox } from './nodes/KeyValueBox'; +import { PresBox, PresEffect, PresEffectDirection } from './nodes/trails'; const higflyout = require('@hig/flyout'); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -49,6 +51,7 @@ interface PropertiesViewProps { addDocTab: (doc: Doc, where: OpenWhere) => boolean; } + @observer export class PropertiesView extends React.Component<PropertiesViewProps> { private _widthUndo?: UndoManager.Batch; @@ -188,7 +191,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { }); rows.push( - <div className="propertiesView-field" key="newKeyValue" style={{ marginTop: '3px' }}> + <div className="propertiesView-field" key="newKeyValue" style={{ marginTop: '3px', backgroundColor: "white", textAlign: "center" }}> <EditableView key="editableView" oneLine contents={'add key:value or #tags'} height={13} fontSize={10} GetValue={() => ''} SetValue={this.setKeyValue} /> </div> ); @@ -246,11 +249,34 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { return !this.selectedDoc ? null : <PropertiesDocContextSelector DocView={this.selectedDocumentView} hideTitle={true} addDocTab={this.props.addDocTab} />; } + @computed get contextCount(){ + console.log("in context count"); + if (this.selectedDocumentView){ + const target = (this.selectedDocumentView.props.Document) + const embeddings = DocListCast(target.proto_embeddings) + console.log(embeddings.length -1 ); + return (embeddings.length - 1) + } else{ + return 0; + } + } + @computed get links() { const selAnchor = this.selectedDocumentView?.anchorViewDoc ?? LinkManager.currentLinkAnchor ?? this.selectedDoc; return !selAnchor ? null : <PropertiesDocBacklinksSelector Document={selAnchor} hideTitle={true} addDocTab={this.props.addDocTab} />; } + @computed get linkCount(){ + const selAnchor = this.selectedDocumentView?.anchorViewDoc ?? LinkManager.currentLinkAnchor ?? this.selectedDoc; + var counter = 0; + + LinkManager.Links(selAnchor).forEach((l, i) => + counter ++ + ); + + return counter; + } + @computed get layoutPreview() { if (SelectionManager.Views().length > 1) { return '-- multiple selected --'; @@ -513,6 +539,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { } @computed get fieldsCheckbox() { + // color= "primary" return <Checkbox color="primary" onChange={this.toggleCheckbox} checked={this.layoutFields} />; } @@ -532,6 +559,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { } @computed get editableTitle() { + const titles = new Set<string>(); const title = Array.from(titles.keys()).length > 1 ? '--multiple selected--' : StrCast(this.selectedDoc?.title); SelectionManager.Views().forEach(dv => titles.add(StrCast(dv.rootDoc.title))); @@ -561,6 +589,48 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { ); } + @computed get currentComponent() { + + var iconName = StrCast(this.selectedDoc?.systemIcon) + + // if (this.selectedDoc?.type === DocumentType.COL){ + // console.log("i did it!") + // } + + + if (iconName){ + const Icon = Icons[iconName as keyof typeof Icons]; + return <Icon />; + } else{ + return <Icons.BsFillCollectionFill/> + + } + } + + @computed get currentType() { + // console.log("current type " + this.selectedDoc?.type) + + const documentType = StrCast(this.selectedDoc?.type) + var currentType: string = documentType; + var capitalizedDocType = currentType.charAt(0).toUpperCase() + currentType.slice(1) + + return ( + <div> + <div className = "propertiesView-wordType">Type</div> + <div className= "currentType"> + <div className='currentType-icon'> + {this.currentComponent} + </div> + + {capitalizedDocType} + + </div> + + </div> + + ) + } + @undoBatch @action setTitle = (value: string | number) => { @@ -914,6 +984,18 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { ); }; + @action + onDoubleClick = () => { + this.openContexts = false; + this.openLinks = false; + this.openOptions = false; + this.openTransform = false; + this.openFields = false; + this.openSharing = false; + this.openLayout = false; + this.openFilters = false; + } + @computed get widthAndDash() { return ( <div className="widthAndDash"> @@ -999,11 +1081,13 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { formLabel={label} formLabelPlacement={'left'} type={Type.SEC} - unit={unit} - fillWidth + unit={unit} + fillWidth color={this.color} number={number} - setNumber={setNumber} + setNumber={setNumber} + min={min} + max={max} /> <Slider multithumb={false} @@ -1067,6 +1151,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { isOpen={this.openOptions} setInSection={(bool) => this.inOptions = bool} setIsOpen={(bool) => this.openOptions = bool} + onDoubleClick={() => this.onDoubleClick()} /> } @@ -1133,10 +1218,13 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { </div>} isOpen={this.openFilters} setIsOpen={(bool) => this.openFilters = bool} + onDoubleClick={() => this.onDoubleClick()} /> } @computed get inkSubMenu() { + let isDouble = false; + return ( <> <PropertiesSection @@ -1144,12 +1232,14 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { content={this.isInk ? this.appearanceEditor : null} isOpen={this.openAppearance} setIsOpen={(bool) => this.openAppearance = bool} + onDoubleClick={() => this.onDoubleClick()} /> <PropertiesSection title="Transform" content={this.transformEditor} isOpen={this.openTransform} setIsOpen={(bool) => this.openTransform = bool} + onDoubleClick={() => this.onDoubleClick()} /> </> ); @@ -1163,6 +1253,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { </div>} isOpen={this.openFields} setIsOpen={(bool) => this.openFields = bool} + onDoubleClick={() => this.onDoubleClick()} /> } @@ -1172,15 +1263,19 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { content={this.contexts} isOpen={this.openContexts} setIsOpen={(bool) => this.openContexts = bool} + onDoubleClick={() => this.onDoubleClick()} /> } + + @computed get linksSubMenu() { return <PropertiesSection title="Linked To" content={this.links} isOpen={this.openLinks} setIsOpen={(bool) => this.openLinks = bool} + onDoubleClick={() => this.onDoubleClick()} /> } @@ -1190,6 +1285,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { content={this.layoutPreview} isOpen={this.openLayout} setIsOpen={(bool) => this.openLayout = bool} + onDoubleClick={() => this.onDoubleClick()} /> } @@ -1645,10 +1741,18 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { width: this.props.width, minWidth: this.props.width, }}> - <div className="propertiesView-title" style={{ width: this.props.width }}> - Properties + <div className = "propertiesView-propAndInfoGrouping"> + <div className="propertiesView-title" style={{ width: this.props.width }}> + Properties + </div> + <div className = "propertiesView-info" onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/')}> + <GrCircleInformation/> </div> + </div> + + <div className="propertiesView-name">{this.editableTitle}</div> + <div className = "propertiesView-type"> {this.currentType} </div> <div className="propertiesView-type">{this.type}</div> {this.contextsSubMenu} {this.linksSubMenu} @@ -1675,6 +1779,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { Presentation </div> <div className="propertiesView-name" style={{ borderBottom: 0 }}> + {this.editableTitle} <div className="propertiesView-presSelected"> <div className="propertiesView-selectedCount">{PresBox.Instance.selectedArray.size} selected</div> |