dropdowns, ui, roll

1 files changed, 119 insertions, 82 deletions

diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index b192dc3db..62458acfe 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -137,15 +137,22 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     };
 
     @action
-    public setChatActive = (active: boolean) => {
-        this.toggleProperties();
-    };
+    public setChatActive = (active: boolean) => {};
 
     @action
     public setIsRecording = (isRecording: boolean) => {
         this.isRecording = isRecording;
     };
 
+    @observable showBezierEditor = false;
+    @action setBezierEditorVisibility = (visible: boolean) => {
+        this.showBezierEditor = visible;
+    };
+    @observable showSpringEditor = true;
+    @action setSpringEditorVisibility = (visible: boolean) => {
+        this.showSpringEditor = visible;
+    };
+
     // Easing function variables
 
     @observable easeDropdownVal = 'ease';
@@ -2098,6 +2105,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                     setSelectedVal={val => {
                                         if (typeof val === 'string') {
                                             if (val !== 'custom') {
+                                                this.setBezierEditorVisibility(true);
                                                 this.setEaseFunc(this.activeItem, val);
                                             } else {
                                                 this.setEaseFunc(this.activeItem, TIMING_DEFAULT_MAPPINGS.ease);
@@ -2108,8 +2116,24 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                     type={Type.TERT}
                                 />
                                 {/* Custom */}
-                                <p className="presBox-submenu-label">Custom Timing Function</p>
-                                <CubicBezierEditor setFunc={this.setBezierControlPoints} currPoints={this.currCPoints} easeFunc={StrCast(this.activeItem.presEaseFunc)} />
+                                <div
+                                    className="presBox-show-hide-dropdown"
+                                    style={{ alignSelf: 'flex-start' }}
+                                    onClick={e => {
+                                        e.stopPropagation();
+                                        this.setBezierEditorVisibility(!this.showBezierEditor);
+                                    }}>
+                                    {`${this.showBezierEditor ? 'Hide' : 'Show'} Timing Editor`}
+                                    <FontAwesomeIcon icon={this.showBezierEditor ? 'chevron-up' : 'chevron-down'} />
+                                </div>
+                                {this.showBezierEditor && (
+                                    <>
+                                        <p className="presBox-submenu-label" style={{ alignSelf: 'flex-start' }}>
+                                            Custom Timing Function
+                                        </p>
+                                        <CubicBezierEditor setFunc={this.setBezierControlPoints} currPoints={this.currCPoints} easeFunc={StrCast(this.activeItem.presEaseFunc)} />
+                                    </>
+                                )}
                             </div>
                         </div>
                         <div className="presBox-option-block" style={{ padding: '16px' }}>
@@ -2235,87 +2259,94 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                     onClick={() => this.updateEffectDirection(PresEffectDirection.Bottom)}
                                 />
                             </div>
-                            {/* <div className="effectDirection" style={{ display: effect === PresEffectDirection.None ? 'none' : 'grid', width: 40 }}>
-                                {presDirection(PresEffectDirection.Left, 'angle-right', 1, 2, {})}
-                                {presDirection(PresEffectDirection.Right, 'angle-left', 3, 2, {})}
-                                {presDirection(PresEffectDirection.Top, 'angle-down', 2, 1, {})}
-                                {presDirection(PresEffectDirection.Bottom, 'angle-up', 2, 3, {})}
-                                {presDirection(PresEffectDirection.Center, '', 2, 2, { width: 10, height: 10, alignSelf: 'center' })}
-                            </div> */}
-                            {/* Effect spring settings */}
-                            <Dropdown
-                                color={StrCast(Doc.UserDoc().userColor)}
-                                formLabel={'Effect Timing'}
-                                closeOnSelect={true}
-                                items={effectTimings}
-                                selectedVal={timingConfig.type}
-                                setSelectedVal={val => {
-                                    console.log('effect timing', val);
-                                    this.updateEffectTiming(activeItem, {
-                                        type: val as SpringType,
-                                        ...springMappings[val],
-                                    });
-                                }}
-                                dropdownType={DropdownType.SELECT}
-                                type={Type.TERT}
-                            />
-                            <div>Tension</div>
+                            {/* Spring settings */}
+                            {/* No spring settings for jackinthebox (lightspeed) */}
                             <div
-                                onPointerDown={e => {
+                                className="presBox-show-hide-dropdown"
+                                onClick={e => {
                                     e.stopPropagation();
+                                    this.setSpringEditorVisibility(!this.showSpringEditor);
                                 }}>
-                                <Slider
-                                    min={1}
-                                    max={1000}
-                                    step={5}
-                                    size="small"
-                                    value={timingConfig.stiffness}
-                                    onChange={(e, val) => {
-                                        if (!timingConfig) return;
-                                        this.updateEffectTiming(activeItem, { ...timingConfig, type: SpringType.CUSTOM, stiffness: val as number });
-                                    }}
-                                    valueLabelDisplay="auto"
-                                />
+                                {`${this.showSpringEditor ? 'Hide' : 'Show'} Spring Settings`}
+                                <FontAwesomeIcon icon={this.showSpringEditor ? 'chevron-up' : 'chevron-down'} />
                             </div>
-                            <div>Damping</div>
-                            <div
-                                onPointerDown={e => {
-                                    e.stopPropagation();
-                                }}>
-                                <Slider
-                                    min={1}
-                                    max={100}
-                                    step={1}
-                                    size="small"
-                                    value={timingConfig.damping}
-                                    onChange={(e, val) => {
-                                        if (!timingConfig) return;
-                                        this.updateEffectTiming(activeItem, { ...timingConfig, type: SpringType.CUSTOM, damping: val as number });
-                                    }}
-                                    valueLabelDisplay="auto"
-                                />
-                            </div>
-                            <div>Mass</div>
-                            <div
-                                onPointerDown={e => {
-                                    e.stopPropagation();
-                                }}>
-                                <Slider
-                                    min={1}
-                                    max={10}
-                                    step={1}
-                                    size="small"
-                                    value={timingConfig.mass}
-                                    onChange={(e, val) => {
-                                        if (!timingConfig) return;
-                                        this.updateEffectTiming(activeItem, { ...timingConfig, type: SpringType.CUSTOM, mass: val as number });
-                                    }}
-                                    valueLabelDisplay="auto"
-                                />
-                            </div>
-                            <SpringAnimationPreview tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>
-                                <div style={{ width: '40px', height: '40px', backgroundColor: '#2e96ff', borderRadius: '4px' }}></div>
-                            </SpringAnimationPreview>
+                            {effect !== PresEffect.Lightspeed && this.showSpringEditor && (
+                                <>
+                                    <Dropdown
+                                        color={StrCast(Doc.UserDoc().userColor)}
+                                        formLabel={'Effect Timing'}
+                                        closeOnSelect={true}
+                                        items={effectTimings}
+                                        selectedVal={timingConfig.type}
+                                        setSelectedVal={val => {
+                                            this.updateEffectTiming(activeItem, {
+                                                type: val as SpringType,
+                                                ...springMappings[val],
+                                            });
+                                        }}
+                                        dropdownType={DropdownType.SELECT}
+                                        type={Type.TERT}
+                                    />
+                                    <div>Tension</div>
+                                    <div
+                                        onPointerDown={e => {
+                                            e.stopPropagation();
+                                        }}>
+                                        <Slider
+                                            min={1}
+                                            max={1000}
+                                            step={5}
+                                            size="small"
+                                            value={timingConfig.stiffness}
+                                            onChange={(e, val) => {
+                                                if (!timingConfig) return;
+                                                this.updateEffectTiming(activeItem, { ...timingConfig, type: SpringType.CUSTOM, stiffness: val as number });
+                                            }}
+                                            valueLabelDisplay="auto"
+                                        />
+                                    </div>
+                                    <div>Damping</div>
+                                    <div
+                                        onPointerDown={e => {
+                                            e.stopPropagation();
+                                        }}>
+                                        <Slider
+                                            min={1}
+                                            max={100}
+                                            step={1}
+                                            size="small"
+                                            value={timingConfig.damping}
+                                            onChange={(e, val) => {
+                                                if (!timingConfig) return;
+                                                this.updateEffectTiming(activeItem, { ...timingConfig, type: SpringType.CUSTOM, damping: val as number });
+                                            }}
+                                            valueLabelDisplay="auto"
+                                        />
+                                    </div>
+                                    <div>Mass</div>
+                                    <div
+                                        onPointerDown={e => {
+                                            e.stopPropagation();
+                                        }}>
+                                        <Slider
+                                            min={1}
+                                            max={10}
+                                            step={1}
+                                            size="small"
+                                            value={timingConfig.mass}
+                                            onChange={(e, val) => {
+                                                if (!timingConfig) return;
+                                                this.updateEffectTiming(activeItem, { ...timingConfig, type: SpringType.CUSTOM, mass: val as number });
+                                            }}
+                                            valueLabelDisplay="auto"
+                                        />
+                                    </div>
+                                    <SpringAnimationPreview tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>
+                                        <div style={{ width: '40px', height: '40px', backgroundColor: '#2e96ff', borderRadius: '4px' }}></div>
+                                    </SpringAnimationPreview>
+                                </>
+                            )}
+                            {/* Effect spring settings */}
                         </div>
                         <div className="ribbon-final-box">
                             <div className="ribbon-final-button-hidden" onClick={() => this.applyTo(this.childDocs)}>
@@ -2734,6 +2765,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @action
     toggleProperties = () => (SettingsManager.Instance.propertiesWidth = SettingsManager.Instance.propertiesWidth > 0 ? 0 : 250);
 
+    @action
+    openProperties = () => {
+        // need to also focus slide
+        SettingsManager.Instance.propertiesWidth = 250;
+    };
+
     @computed get toolbar() {
         const propIcon = SettingsManager.Instance.propertiesWidth > 0 ? 'angle-double-right' : 'angle-double-left';
         const propTitle = SettingsManager.Instance.propertiesWidth > 0 ? 'Close Presentation Panel' : 'Open Presentation Panel';