From eecc7ee1d14719d510ec2975826022c565a35e5f Mon Sep 17 00:00:00 2001
From: Sophie Zhang <sophie_zhang@brown.edu>
Date: Tue, 9 Apr 2024 12:15:08 -0400
Subject: pushing progress

---
 src/client/apis/gpt/customization.ts          |  5 +++++
 src/client/views/nodes/trails/PresBox.scss    | 10 +++++++---
 src/client/views/nodes/trails/PresBox.tsx     | 14 +++++++-------
 src/client/views/nodes/trails/SlideEffect.tsx |  1 +
 4 files changed, 20 insertions(+), 10 deletions(-)

(limited to 'src')

diff --git a/src/client/apis/gpt/customization.ts b/src/client/apis/gpt/customization.ts
index 946208eeb..bc3f57210 100644
--- a/src/client/apis/gpt/customization.ts
+++ b/src/client/apis/gpt/customization.ts
@@ -52,6 +52,11 @@ const setupPresSlideCustomization = () => {
     addCustomizationProperty(CustomizationType.PRES_TRAIL_SLIDE, 'presentation_effect', 'is an effect applied to the slide when we transition to it.', ['None', 'Fade in', 'Flip', 'Rotate', 'Bounce', 'Roll']);
     addCustomizationProperty(CustomizationType.PRES_TRAIL_SLIDE, 'presentation_effectDirection', 'is what direction the effect is applied.', ['Enter from left', 'Enter from right', 'Enter from bottom', 'Enter from Top', 'Enter from center']);
     addCustomizationProperty(CustomizationType.PRES_TRAIL_SLIDE, 'config_zoom', 'is a number from 0 to 1.0 indicating the percentage we should zoom into the slide.');
+    addCustomizationProperty(
+        CustomizationType.PRES_TRAIL_SLIDE,
+        'presEffectTiming',
+        "is a json object of the format: {type: string, stiffness: number, damping: number, mass: number}. Type is always “custom”. Controls the spring-based timing of the presentation effect animation. Stiffness, damping, and mass control the physics-based properties of spring animations. This is used to create a more natural looking timing, bouncy effects, etc. Use spring physics to adjust these parameters to match the user's description of how they want to animate the effect."
+    );
 };
 
 setupPresSlideCustomization();
diff --git a/src/client/views/nodes/trails/PresBox.scss b/src/client/views/nodes/trails/PresBox.scss
index 23c170cf7..43f9ec78e 100644
--- a/src/client/views/nodes/trails/PresBox.scss
+++ b/src/client/views/nodes/trails/PresBox.scss
@@ -230,6 +230,11 @@
     }
 }
 
+.presBox-toggles {
+    display: flex;
+    overflow-x: auto;
+}
+
 .presBox-ribbon {
     position: relative;
     display: inline;
@@ -695,15 +700,14 @@
         background-color: $white;
         display: flex;
         color: $black;
-        margin-top: 5px;
-        margin-bottom: 5px;
         border-radius: 5px;
-        margin-right: 5px;
         width: max-content;
         justify-content: center;
         align-items: center;
         padding-right: 10px;
         padding-left: 10px;
+        margin: 4px;
+        text-wrap: nowrap;
     }
 
     .ribbon-toggle.active {
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 8745bf1a4..9019f9945 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -1726,7 +1726,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             if (activeItem.type === DocumentType.AUDIO) duration = NumCast(activeItem.duration);
             return (
                 <div className="presBox-ribbon">
-                    <div className="ribbon-doubleButton">
+                    <div className="presBox-toggles">
                         <Tooltip title={<div className="dash-tooltip">Hide before presented</div>}>
                             <div
                                 className={`ribbon-toggle ${activeItem.presentation_hideBefore ? 'active' : ''}`}
@@ -1764,14 +1764,14 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 Lightbox
                             </div>
                         </Tooltip>
-                        <Tooltip title={<div className="dash-tooltip">Transition movement style</div>}>
+                        {/* <Tooltip title={<div className="dash-tooltip">Transition movement style</div>}>
                             <div
                                 className="ribbon-toggle"
                                 style={{ border: `solid 1px ${SettingsManager.userColor}`, color: SettingsManager.userColor, background: activeItem.presEaseFunc === 'ease' ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor }}
                                 onClick={() => this.updateEaseFunc(activeItem)}>
                                 {`${StrCast(activeItem.presEaseFunc, 'ease')}`}
                             </div>
-                        </Tooltip>
+                        </Tooltip> */}
                     </div>
                     {[DocumentType.AUDIO, DocumentType.VID].includes(targetType as any as DocumentType) ? null : (
                         <>
@@ -2207,28 +2207,28 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                     type={Type.TERT}
                                     color={activeItem.presentation_effectDirection === PresEffectDirection.Left ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
                                     tooltip="Left"
-                                    icon={<FaArrowLeft size={'16px'} />}
+                                    icon={<FaArrowRight size={'16px'} />}
                                     onClick={() => this.updateEffectDirection(PresEffectDirection.Left)}
                                 />
                                 <IconButton
                                     type={Type.TERT}
                                     color={activeItem.presentation_effectDirection === PresEffectDirection.Right ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
                                     tooltip="Right"
-                                    icon={<FaArrowRight size={'16px'} />}
+                                    icon={<FaArrowLeft size={'16px'} />}
                                     onClick={() => this.updateEffectDirection(PresEffectDirection.Right)}
                                 />
                                 <IconButton
                                     type={Type.TERT}
                                     color={activeItem.presentation_effectDirection === PresEffectDirection.Top ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
                                     tooltip="Top"
-                                    icon={<FaArrowUp size={'16px'} />}
+                                    icon={<FaArrowDown size={'16px'} />}
                                     onClick={() => this.updateEffectDirection(PresEffectDirection.Top)}
                                 />
                                 <IconButton
                                     type={Type.TERT}
                                     color={activeItem.presentation_effectDirection === PresEffectDirection.Bottom ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor}
                                     tooltip="Bottom"
-                                    icon={<FaArrowDown size={'16px'} />}
+                                    icon={<FaArrowUp size={'16px'} />}
                                     onClick={() => this.updateEffectDirection(PresEffectDirection.Bottom)}
                                 />
                             </div>
diff --git a/src/client/views/nodes/trails/SlideEffect.tsx b/src/client/views/nodes/trails/SlideEffect.tsx
index af0e7461b..7e2985a6a 100644
--- a/src/client/views/nodes/trails/SlideEffect.tsx
+++ b/src/client/views/nodes/trails/SlideEffect.tsx
@@ -19,6 +19,7 @@ interface Props {
     children: React.ReactNode;
 }
 
+// TODO: add visibility detector when the slide comes into view
 export default function SpringAnimation({ dir, friction, tension, mass, effectType, children }: Props) {
     const [springs, api] = useSpring(
         () => ({
-- 
cgit v1.2.3-70-g09d2