diff options
Diffstat (limited to 'src/client/views/PropertiesView.tsx')
| -rw-r--r-- | src/client/views/PropertiesView.tsx | 133 |
1 files changed, 66 insertions, 67 deletions
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index e4ca3daeb..398ed4060 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -25,7 +25,6 @@ import { GetEffectiveAcl, SharingPermissions, normalizeEmail } from '../../field import { CollectionViewType, DocumentType } from '../documents/DocumentTypes'; import { GroupManager } from '../util/GroupManager'; import { LinkManager } from '../util/LinkManager'; -import { SettingsManager } from '../util/SettingsManager'; import { SharingManager } from '../util/SharingManager'; import { Transform } from '../util/Transform'; import { UndoManager, undoBatch, undoable } from '../util/UndoManager'; @@ -44,6 +43,7 @@ import { StyleProviderFuncType } from './nodes/FieldView'; import { OpenWhere } from './nodes/OpenWhere'; import { PresBox, PresEffect, PresEffectDirection } from './nodes/trails'; +import { SnappingManager } from '../util/SnappingManager'; const _global = (window /* browser */ || global) /* node */ as any; interface PropertiesViewProps { @@ -108,6 +108,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps @observable openAppearance: boolean = true; @observable openTransform: boolean = true; @observable openFilters: boolean = false; + @observable openStyling: boolean = true; // Pres Trails booleans: @observable openPresTransitions: boolean = true; @@ -222,7 +223,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps }); rows.push( - <div className="propertiesView-field" key="newKeyValue" style={{ marginTop: '3px', backgroundColor: SettingsManager.userBackgroundColor, textAlign: 'center' }}> + <div className="propertiesView-field" key="newKeyValue" style={{ marginTop: '3px', backgroundColor: SnappingManager.userBackgroundColor, textAlign: 'center' }}> <EditableView key="editableView" oneLine contents="add key:value or #tags" height={13} fontSize={10} GetValue={returnEmptyString} SetValue={this.setKeyValue} /> </div> ); @@ -400,7 +401,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps <IconButton icon={<FontAwesomeIcon icon="ellipsis-h" />} size={Size.XSMALL} - color={SettingsManager.userColor} + color={SnappingManager.userColor} onClick={action(() => { if (this.selectedDocumentView || this.selectedDoc) { SharingManager.Instance.open(this.selectedDocumentView?.Document === this.selectedDoc ? this.selectedDocumentView : undefined, this.selectedDoc); @@ -546,7 +547,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps <div> <br /> Individuals with Access to this Document </div> - <div className="propertiesView-sharingTable" style={{ background: SettingsManager.userBackgroundColor, color: SettingsManager.userColor }}> + <div className="propertiesView-sharingTable" style={{ background: SnappingManager.userBackgroundColor, color: SnappingManager.userColor }}> <div> {individualTableEntries}</div> </div> {groupTableEntries.length > 0 ? ( @@ -554,7 +555,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps <div> <br /> Groups with Access to this Document </div> - <div className="propertiesView-sharingTable" style={{ background: SettingsManager.userBackgroundColor, color: SettingsManager.userColor }}> + <div className="propertiesView-sharingTable" style={{ background: SnappingManager.userBackgroundColor, color: SnappingManager.userColor }}> <div> {groupTableEntries}</div> </div> </div> @@ -576,15 +577,15 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps }; @computed get color() { - return SettingsManager.userColor; + return SnappingManager.userColor; } @computed get backgroundColor() { - return SettingsManager.userBackgroundColor; + return SnappingManager.userBackgroundColor; } @computed get variantColor() { - return SettingsManager.userVariantColor; + return SnappingManager.userVariantColor; } @computed get editableTitle() { @@ -718,7 +719,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps marginLeft: title === '∠:' ? '39px' : '', }}> <div className="inputBox-title"> {title} </div> - <input className="inputBox-input" type="text" value={value} style={{ color: SettingsManager.userColor, backgroundColor: SettingsManager.userBackgroundColor }} onChange={e => setter(e.target.value)} onKeyDown={e => e.stopPropagation()} /> + <input className="inputBox-input" type="text" value={value} style={{ color: SnappingManager.userColor, backgroundColor: SnappingManager.userBackgroundColor }} onChange={e => setter(e.target.value)} onKeyDown={e => e.stopPropagation()} /> <div className="inputBox-button"> <div className="inputBox-button-up" key="up2" onPointerDown={undoBatch(action(() => this.upDownButtons('up', key)))}> <FontAwesomeIcon icon="caret-up" size="sm" /> @@ -940,7 +941,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps regInput = (key: string, value: any, setter: (val: string) => {}) => ( <div className="inputBox"> - <input className="inputBox-input" type="text" value={value} style={{ color: SettingsManager.userColor, backgroundColor: SettingsManager.userBackgroundColor }} onChange={e => setter(e.target.value)} /> + <input className="inputBox-input" type="text" value={value} style={{ color: SnappingManager.userColor, backgroundColor: SnappingManager.userBackgroundColor }} onChange={e => setter(e.target.value)} /> <div className="inputBox-button"> <div className="inputBox-button-up" key="up2" onPointerDown={undoBatch(action(() => this.upDownButtons('up', key)))}> <FontAwesomeIcon icon="caret-up" size="sm" /> @@ -1043,30 +1044,32 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps setFinalNumber = () => { this._sliderBatch?.end(); }; - getNumber = (label: string, unit: string, min: number, max: number, number: number, setNumber: any, autorange?: number, autorangeMinVal?: number) => ( - <div key={label + (this.selectedDoc?.title ?? '')}> - <NumberInput formLabel={label} formLabelPlacement="left" type={Type.SEC} unit={unit} fillWidth color={this.color} number={number} setNumber={setNumber} min={min} max={max} /> - <Slider - key={label} - onPointerDown={() => { - this._sliderBatch = UndoManager.StartBatch('slider ' + label); - }} - multithumb={false} - color={this.color} - size={Size.XSMALL} - min={min} - max={max} - autorangeMinVal={autorangeMinVal} - autorange={autorange} - number={number} - unit={unit} - decimals={1} - setFinalNumber={this.setFinalNumber} - setNumber={setNumber} - fillWidth - /> - </div> - ); + getNumber = (label: string, unit: string, min: number, max: number, number: number, setNumber: any, autorange?: number, autorangeMinVal?: number) => { + return ( + <div key={label + (this.selectedDoc?.title ?? '')}> + <NumberInput formLabel={label} formLabelPlacement="left" type={Type.SEC} unit={unit} fillWidth color={this.color} number={number} setNumber={setNumber} min={min} max={max} /> + <Slider + key={label} + onPointerDown={() => { + this._sliderBatch = UndoManager.StartBatch('slider ' + label); + }} + multithumb={false} + color={this.color} + size={Size.XSMALL} + min={min} + max={max} + autorangeMinVal={autorangeMinVal} + autorange={autorange} + number={number} + unit={unit} + decimals={1} + setFinalNumber={this.setFinalNumber} + setNumber={setNumber} + fillWidth + /> + </div> + ); + }; setVal = (func: (doc: Doc, val: number) => void) => (val: number) => this.selectedDoc && !isNaN(val) && func(this.selectedDoc, val); @computed get transformEditor() { @@ -1402,7 +1405,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps get editRelationship() { return ( <input - style={{ color: SettingsManager.userColor, backgroundColor: SettingsManager.userBackgroundColor }} + style={{ color: SnappingManager.userColor, backgroundColor: SnappingManager.userBackgroundColor }} autoComplete="off" id="link_relationship_input" value={StrCast(this.selectedLink?.link_relationship)} @@ -1420,7 +1423,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps return ( <textarea autoComplete="off" - style={{ textAlign: 'left', color: SettingsManager.userColor, backgroundColor: SettingsManager.userBackgroundColor }} + style={{ textAlign: 'left', color: SnappingManager.userColor, backgroundColor: SnappingManager.userBackgroundColor }} id="link_description_input" value={StrCast(this.selectedLink?.link_description)} onKeyDown={this.onDescriptionKey} @@ -1463,7 +1466,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps <div className="propertiesView-input inline first" style={{ display: 'grid', gridTemplateColumns: '84px calc(100% - 84px)' }}> <p>Follow by</p> <select - style={{ color: SettingsManager.userColor, backgroundColor: SettingsManager.userBackgroundColor }} + style={{ color: SnappingManager.userColor, backgroundColor: SnappingManager.userBackgroundColor }} onChange={e => this.changeFollowBehavior(e.currentTarget.value === 'Default' ? undefined : e.currentTarget.value)} value={Cast(this.sourceAnchor?.followLinkLocation, 'string', null)}> <option value={undefined}>Default</option> @@ -1482,7 +1485,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps <div className="propertiesView-input inline first" style={{ display: 'grid', gridTemplateColumns: '84px calc(100% - 134px) 50px' }}> <p>Animation</p> <select - style={{ width: '100%', gridColumn: 2, color: SettingsManager.userColor, backgroundColor: SettingsManager.userBackgroundColor }} + style={{ width: '100%', gridColumn: 2, color: SnappingManager.userColor, backgroundColor: SnappingManager.userBackgroundColor }} onChange={e => this.changeAnimationBehavior(e.currentTarget.value)} value={StrCast(this.sourceAnchor?.followLinkAnimEffect, 'default')}> <option value="default">Default</option> @@ -1644,7 +1647,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps <div className="propertiesView-input inline" style={{ display: 'grid', gridTemplateColumns: '78px calc(100% - 108px) 50px' }}> <p>Zoom %</p> <div className="ribbon-property" style={{ display: !targZoom ? 'none' : 'inline-flex' }}> - <input className="presBox-input" style={{ width: '100%', color: SettingsManager.userColor, backgroundColor: SettingsManager.userBackgroundColor }} readOnly type="number" value={zoom} /> + <input className="presBox-input" style={{ width: '100%', color: SnappingManager.userColor, backgroundColor: SnappingManager.userBackgroundColor }} readOnly type="number" value={zoom} /> <div className="ribbon-propertyUpDown" style={{ display: 'flex', flexDirection: 'column' }}> <div className="ribbon-propertyUpDownItem" onClick={undoBatch(() => this.setZoom(String(zoom), 0.1))}> <FontAwesomeIcon icon="caret-up" /> @@ -1714,8 +1717,8 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps <div className="propertiesView" style={{ - background: SettingsManager.userBackgroundColor, - color: SettingsManager.userColor, + background: SnappingManager.userBackgroundColor, + color: SnappingManager.userColor, width: this._props.width, minWidth: this._props.width, }}> @@ -1723,13 +1726,14 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps <div className="propertiesView-sectionTitle" style={{ width: this._props.width }}> Properties <div className="propertiesView-info" onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/properties')}> - <IconButton icon={<FontAwesomeIcon icon="info-circle" />} color={SettingsManager.userColor} /> + <IconButton icon={<FontAwesomeIcon icon="info-circle" />} color={SnappingManager.userColor} /> </div> </div> </div> <div className="propertiesView-name">{this.editableTitle}</div> <div className="propertiesView-type"> {this.currentType} </div> + {/* {this.stylingSubMenu} */} {this.fieldsSubMenu} {this.optionsSubMenu} {this.linksSubMenu} @@ -1744,13 +1748,16 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps } if (this.isPres && PresBox.Instance) { const selectedItem: boolean = PresBox.Instance.selectedArray.size > 0; - const type = [DocumentType.AUDIO, DocumentType.VID].find(dt => dt === DocCast(PresBox.Instance.activeItem?.annotationOn)?.type) - ? DocCast(PresBox.Instance.activeItem?.annotationOn)?.type + const type = [DocumentType.AUDIO, DocumentType.VID].includes(DocCast(PresBox.Instance.activeItem?.annotationOn)?.type as any as DocumentType) + ? (DocCast(PresBox.Instance.activeItem?.annotationOn)?.type as any as DocumentType) : PresBox.targetRenderedDoc(PresBox.Instance.activeItem)?.type; return ( <div className="propertiesView" style={{ width: this._props.width }}> <div className="propertiesView-sectionTitle" style={{ width: this._props.width }}> Presentation + <div className="propertiesView-info" onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/features/trails/')}> + <IconButton icon={<FontAwesomeIcon icon="info-circle" />} color={SnappingManager.userColor} /> + </div> </div> <div className="propertiesView-name" style={{ borderBottom: 0 }}> {this.editableTitle} @@ -1763,14 +1770,12 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps <div className="propertiesView-presentationTrails"> <div className="propertiesView-presentationTrails-title" - onPointerDown={action(() => { - this.openPresTransitions = !this.openPresTransitions; - })} + onPointerDown={action(() => (this.openPresTransitions = !this.openPresTransitions))} style={{ - color: SettingsManager.userColor, - backgroundColor: this.openPresTransitions ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor, + color: SnappingManager.userColor, + backgroundColor: this.openPresTransitions ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor, }}> - <FontAwesomeIcon style={{ alignSelf: 'center' }} icon="rocket" /> Transitions + <FontAwesomeIcon style={{ alignSelf: 'center' }} icon={'rocket'} /> Transitions <div className="propertiesView-presentationTrails-title-icon"> <FontAwesomeIcon icon={this.openPresTransitions ? 'caret-down' : 'caret-right'} size="lg" /> </div> @@ -1782,14 +1787,12 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps <div className="propertiesView-presentationTrails"> <div className="propertiesView-presentationTrails-title" - onPointerDown={action(() => { - this.openPresVisibilityAndDuration = !this.openPresVisibilityAndDuration; - })} + onPointerDown={action(() => (this.openPresVisibilityAndDuration = !this.openPresVisibilityAndDuration))} style={{ - color: SettingsManager.userColor, - backgroundColor: this.openPresVisibilityAndDuration ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor, + color: SnappingManager.userColor, + backgroundColor: this.openPresVisibilityAndDuration ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor, }}> - <FontAwesomeIcon style={{ alignSelf: 'center' }} icon="rocket" /> Visibility + <FontAwesomeIcon style={{ alignSelf: 'center' }} icon={'rocket'} /> Visibility <div className="propertiesView-presentationTrails-title-icon"> <FontAwesomeIcon icon={this.openPresVisibilityAndDuration ? 'caret-down' : 'caret-right'} size="lg" /> </div> @@ -1801,14 +1804,12 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps <div className="propertiesView-presentationTrails"> <div className="propertiesView-presentationTrails-title" - onPointerDown={action(() => { - this.openPresProgressivize = !this.openPresProgressivize; - })} + onPointerDown={action(() => (this.openPresProgressivize = !this.openPresProgressivize))} style={{ - color: SettingsManager.userColor, - backgroundColor: this.openPresProgressivize ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor, + color: SnappingManager.userColor, + backgroundColor: this.openPresProgressivize ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor, }}> - <FontAwesomeIcon style={{ alignSelf: 'center' }} icon="rocket" /> Progressivize + <FontAwesomeIcon style={{ alignSelf: 'center' }} icon={'rocket'} /> Progressivize <div className="propertiesView-presentationTrails-title-icon"> <FontAwesomeIcon icon={this.openPresProgressivize ? 'caret-down' : 'caret-right'} size="lg" /> </div> @@ -1820,12 +1821,10 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps <div className="propertiesView-presentationTrails"> <div className="propertiesView-presentationTrails-title" - onPointerDown={action(() => { - this.openSlideOptions = !this.openSlideOptions; - })} + onPointerDown={action(() => (this.openSlideOptions = !this.openSlideOptions))} style={{ - color: SettingsManager.userColor, - backgroundColor: this.openSlideOptions ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor, + color: SnappingManager.userColor, + backgroundColor: this.openSlideOptions ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor, }}> <FontAwesomeIcon style={{ alignSelf: 'center' }} icon={type === DocumentType.AUDIO ? 'file-audio' : 'file-video'} /> {type === DocumentType.AUDIO ? 'Audio Options' : 'Video Options'} <div className="propertiesView-presentationTrails-title-icon"> |