diff options
Diffstat (limited to 'src/client/views/PropertiesView.tsx')
| -rw-r--r-- | src/client/views/PropertiesView.tsx | 66 |
1 files changed, 36 insertions, 30 deletions
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index b03c1a64e..024db82a4 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -25,8 +25,8 @@ 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 { SnappingManager } from '../util/SnappingManager'; import { Transform } from '../util/Transform'; import { UndoManager, undoBatch, undoable } from '../util/UndoManager'; import { EditableView } from './EditableView'; @@ -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" /> @@ -1402,7 +1403,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 +1421,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 +1464,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> @@ -1471,7 +1472,8 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps <option value={OpenWhere.addRight}>Opening in new right pane</option> <option value={OpenWhere.replaceLeft}>Replacing left tab</option> <option value={OpenWhere.replaceRight}>Replacing right tab</option> - <option value={OpenWhere.lightbox}>Opening in lightbox</option> + <option value={OpenWhere.lightboxAlways}>Opening in lightbox always</option> + <option value={OpenWhere.lightbox}>Opening in lightbox if not visible</option> <option value={OpenWhere.add}>Opening in new tab</option> <option value={OpenWhere.replace}>Replacing current tab</option> <option value={OpenWhere.inParent}>Opening in same collection</option> @@ -1481,11 +1483,11 @@ 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> - {[PresEffect.None, PresEffect.Zoom, PresEffect.Lightspeed, PresEffect.Fade, PresEffect.Flip, PresEffect.Rotate, PresEffect.Bounce, PresEffect.Roll].map(effect => ( + {[PresEffect.None, PresEffect.Expand, PresEffect.Lightspeed, PresEffect.Fade, PresEffect.Flip, PresEffect.Rotate, PresEffect.Bounce, PresEffect.Roll].map(effect => ( <option key={effect.toString()} value={effect.toString()}> {effect.toString()} </option> @@ -1643,7 +1645,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" /> @@ -1713,8 +1715,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, }}> @@ -1722,13 +1724,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} @@ -1743,13 +1746,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} @@ -1766,8 +1772,8 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps 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 <div className="propertiesView-presentationTrails-title-icon"> @@ -1785,8 +1791,8 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps 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 <div className="propertiesView-presentationTrails-title-icon"> @@ -1804,8 +1810,8 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps 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 <div className="propertiesView-presentationTrails-title-icon"> @@ -1823,8 +1829,8 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps 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"> |