diff options
Diffstat (limited to 'src/client/views/PropertiesView.tsx')
| -rw-r--r-- | src/client/views/PropertiesView.tsx | 70 |
1 files changed, 45 insertions, 25 deletions
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 42aa6782f..bed96f600 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -119,6 +119,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps // Pres Trails booleans: @observable openPresTransitions: boolean = true; @observable openPresProgressivize: boolean = false; + @observable openPresMedia: boolean = false; @observable openPresVisibilityAndDuration: boolean = false; @observable openAddSlide: boolean = false; @observable openSlideOptions: boolean = false; @@ -1936,74 +1937,74 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps </div> </div> {!selectedItem ? null : ( - <div className="propertiesView-presentationTrails"> + <div className="propertiesView-section"> <div - className="propertiesView-presentationTrails-title" + className="propertiesView-sectionTitle" onPointerDown={action(() => { - this.openPresTransitions = !this.openPresTransitions; + this.openPresVisibilityAndDuration = !this.openPresVisibilityAndDuration; })} style={{ color: SnappingManager.userColor, - backgroundColor: this.openPresTransitions ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor, + backgroundColor: SnappingManager.userVariantColor, }}> - <FontAwesomeIcon style={{ alignSelf: 'center' }} icon="rocket" /> Transitions + Visibility <div className="propertiesView-presentationTrails-title-icon"> - <FontAwesomeIcon icon={this.openPresTransitions ? 'caret-down' : 'caret-right'} size="lg" /> + <FontAwesomeIcon icon={this.openPresVisibilityAndDuration ? 'caret-down' : 'caret-right'} size="lg" /> </div> </div> - {this.openPresTransitions ? <div className="propertiesView-presentationTrails-content">{PresBox.Instance.transitionDropdown}</div> : null} + {this.openPresVisibilityAndDuration ? <div className="propertiesView-presentationTrails-content">{PresBox.Instance.visibilityDurationDropdown}</div> : null} </div> )} {!selectedItem ? null : ( - <div className="propertiesView-presentationTrails"> + <div className="propertiesView-section"> <div - className="propertiesView-presentationTrails-title" + className="propertiesView-sectionTitle" onPointerDown={action(() => { - this.openPresVisibilityAndDuration = !this.openPresVisibilityAndDuration; + this.openPresProgressivize = !this.openPresProgressivize; })} style={{ color: SnappingManager.userColor, - backgroundColor: this.openPresVisibilityAndDuration ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor, + backgroundColor: SnappingManager.userVariantColor, }}> - <FontAwesomeIcon style={{ alignSelf: 'center' }} icon="rocket" /> Visibility + Progressivize <div className="propertiesView-presentationTrails-title-icon"> - <FontAwesomeIcon icon={this.openPresVisibilityAndDuration ? 'caret-down' : 'caret-right'} size="lg" /> + <FontAwesomeIcon icon={this.openPresProgressivize ? 'caret-down' : 'caret-right'} size="lg" /> </div> </div> - {this.openPresVisibilityAndDuration ? <div className="propertiesView-presentationTrails-content">{PresBox.Instance.visibilityDurationDropdown}</div> : null} + {this.openPresProgressivize ? <div className="propertiesView-presentationTrails-content">{PresBox.Instance.progressivizeDropdown}</div> : null} </div> )} {!selectedItem ? null : ( - <div className="propertiesView-presentationTrails"> + <div className="propertiesView-section"> <div - className="propertiesView-presentationTrails-title" + className="propertiesView-sectionTitle" onPointerDown={action(() => { - this.openPresProgressivize = !this.openPresProgressivize; + this.openPresMedia = !this.openPresMedia; })} style={{ color: SnappingManager.userColor, - backgroundColor: this.openPresProgressivize ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor, + backgroundColor: SnappingManager.userVariantColor, }}> - <FontAwesomeIcon style={{ alignSelf: 'center' }} icon="rocket" /> Progressivize + Media <div className="propertiesView-presentationTrails-title-icon"> - <FontAwesomeIcon icon={this.openPresProgressivize ? 'caret-down' : 'caret-right'} size="lg" /> + <FontAwesomeIcon icon={this.openPresMedia ? 'caret-down' : 'caret-right'} size="lg" /> </div> </div> - {this.openPresProgressivize ? <div className="propertiesView-presentationTrails-content">{PresBox.Instance.progressivizeDropdown}</div> : null} + {this.openPresMedia ? <div className="propertiesView-presentationTrails-content">{PresBox.Instance.mediaDropdown}</div> : null} </div> )} {!selectedItem || (type !== DocumentType.VID && type !== DocumentType.AUDIO) ? null : ( - <div className="propertiesView-presentationTrails"> + <div className="propertiesView-section"> <div - className="propertiesView-presentationTrails-title" + className="propertiesView-sectionTitle" onPointerDown={action(() => { this.openSlideOptions = !this.openSlideOptions; })} style={{ color: SnappingManager.userColor, - backgroundColor: this.openSlideOptions ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor, + backgroundColor: SnappingManager.userVariantColor, }}> - <FontAwesomeIcon style={{ alignSelf: 'center' }} icon={type === DocumentType.AUDIO ? 'file-audio' : 'file-video'} /> {type === DocumentType.AUDIO ? 'Audio Options' : 'Video Options'} + {type === DocumentType.AUDIO ? 'file-audio' : 'file-video'} <div className="propertiesView-presentationTrails-title-icon"> <FontAwesomeIcon icon={this.openSlideOptions ? 'caret-down' : 'caret-right'} size="lg" /> </div> @@ -2011,6 +2012,25 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps {this.openSlideOptions ? <div className="propertiesView-presentationTrails-content">{PresBox.Instance.mediaOptionsDropdown}</div> : null} </div> )} + {!selectedItem ? null : ( + <div className="propertiesView-section"> + <div + className="propertiesView-sectionTitle" + onPointerDown={action(() => { + this.openPresTransitions = !this.openPresTransitions; + })} + style={{ + color: SnappingManager.userColor, + backgroundColor: SnappingManager.userVariantColor, + }}> + Transitions + <div className="propertiesView-presentationTrails-title-icon"> + <FontAwesomeIcon icon={this.openPresTransitions ? 'caret-down' : 'caret-right'} size="lg" /> + </div> + </div> + {this.openPresTransitions ? <div className="propertiesView-presentationTrails-content">{PresBox.Instance.transitionDropdown}</div> : null} + </div> + )} </div> ); } |