From a23e4c26d23224b56ec51d73b38adeb2b54fed6d Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 6 Feb 2025 14:37:19 -0500 Subject: overhaul of presbox properties ui + fixing bugs with progressivize highlight expanding --- src/client/views/PropertiesView.tsx | 70 ++-- src/client/views/nodes/trails/PresBox.scss | 36 +- src/client/views/nodes/trails/PresBox.tsx | 591 ++++++++++++++--------------- 3 files changed, 350 insertions(+), 347 deletions(-) (limited to 'src') 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 {!selectedItem ? null : ( -
+
{ - this.openPresTransitions = !this.openPresTransitions; + this.openPresVisibilityAndDuration = !this.openPresVisibilityAndDuration; })} style={{ color: SnappingManager.userColor, - backgroundColor: this.openPresTransitions ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor, + backgroundColor: SnappingManager.userVariantColor, }}> -     Transitions + Visibility
- +
- {this.openPresTransitions ?
{PresBox.Instance.transitionDropdown}
: null} + {this.openPresVisibilityAndDuration ?
{PresBox.Instance.visibilityDurationDropdown}
: null}
)} {!selectedItem ? null : ( -
+
{ - this.openPresVisibilityAndDuration = !this.openPresVisibilityAndDuration; + this.openPresProgressivize = !this.openPresProgressivize; })} style={{ color: SnappingManager.userColor, - backgroundColor: this.openPresVisibilityAndDuration ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor, + backgroundColor: SnappingManager.userVariantColor, }}> -     Visibility + Progressivize
- +
- {this.openPresVisibilityAndDuration ?
{PresBox.Instance.visibilityDurationDropdown}
: null} + {this.openPresProgressivize ?
{PresBox.Instance.progressivizeDropdown}
: null}
)} {!selectedItem ? null : ( -
+
{ - this.openPresProgressivize = !this.openPresProgressivize; + this.openPresMedia = !this.openPresMedia; })} style={{ color: SnappingManager.userColor, - backgroundColor: this.openPresProgressivize ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor, + backgroundColor: SnappingManager.userVariantColor, }}> -     Progressivize + Media
- +
- {this.openPresProgressivize ?
{PresBox.Instance.progressivizeDropdown}
: null} + {this.openPresMedia ?
{PresBox.Instance.mediaDropdown}
: null}
)} {!selectedItem || (type !== DocumentType.VID && type !== DocumentType.AUDIO) ? null : ( -
+
{ this.openSlideOptions = !this.openSlideOptions; })} style={{ color: SnappingManager.userColor, - backgroundColor: this.openSlideOptions ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor, + backgroundColor: SnappingManager.userVariantColor, }}> -     {type === DocumentType.AUDIO ? 'Audio Options' : 'Video Options'} + {type === DocumentType.AUDIO ? 'file-audio' : 'file-video'}
@@ -2011,6 +2012,25 @@ export class PropertiesView extends ObservableReactComponent{PresBox.Instance.mediaOptionsDropdown}
: null}
)} + {!selectedItem ? null : ( +
+
{ + this.openPresTransitions = !this.openPresTransitions; + })} + style={{ + color: SnappingManager.userColor, + backgroundColor: SnappingManager.userVariantColor, + }}> + Transitions +
+ +
+
+ {this.openPresTransitions ?
{PresBox.Instance.transitionDropdown}
: null} +
+ )}
); } diff --git a/src/client/views/nodes/trails/PresBox.scss b/src/client/views/nodes/trails/PresBox.scss index a181687f8..e34e1b380 100644 --- a/src/client/views/nodes/trails/PresBox.scss +++ b/src/client/views/nodes/trails/PresBox.scss @@ -18,6 +18,7 @@ max-width: calc(100% - 25px); width: 100%; padding: 15px; + padding-left: 0px; } .pres-chat { @@ -100,6 +101,14 @@ gap: 4px; } +.presBox-switches { + display: flex; + width: 100%; + > div { + width: 100%; + } +} + .presBox-bezier-editor { border: 1px solid rgb(221, 221, 221); border-radius: 4px; @@ -302,7 +311,7 @@ } .presBox-toggles { - display: flex; + display: flow; overflow-x: auto; } @@ -387,7 +396,7 @@ font-size: 11; font-weight: 400; margin-top: 10px; - max-width: min(100px, 25%); + max-width: min(85px, 25%); width: 100%; } .presBox-springSlider { @@ -567,20 +576,17 @@ } .presBox-input { - border: none; background-color: transparent; - width: 40; - // padding: 8px; - // border-radius: 4px; - // width: 30; - // height: 100%; - // background: none; - // border: none; - // text-align: right; + text-align: center; + width: 100%; + height: 15px; + font-size: 10; } - - .presBox-input:focus { - outline: none; + .presBox-inputNumber { + border: none; + background-color: transparent; + width: 100%; + max-width: 25px; } .ribbon-frameSelector { @@ -784,7 +790,7 @@ font-weight: 200; height: 20; background-color: $white; - display: flex; + display: inline-flex; color: $black; border-radius: 5px; width: max-content; diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx index 5dbf502d2..28afe1df4 100644 --- a/src/client/views/nodes/trails/PresBox.tsx +++ b/src/client/views/nodes/trails/PresBox.tsx @@ -1,4 +1,4 @@ -import { Button, Dropdown, DropdownType, IconButton, Size, Toggle, ToggleType, Type } from '@dash/components'; +import { Button, Dropdown, DropdownType, IconButton, Size, Type } from '@dash/components'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@mui/material'; import Slider from '@mui/material/Slider'; @@ -101,8 +101,6 @@ export class PresBox extends ViewBoxBaseComponent() { @observable _forceKeyEvents: boolean = false; @observable _showAIGallery = false; - @observable _showBezierEditor = false; - @observable _showSpringEditor = false; @observable _showPreview = true; @observable _easeDropdownVal = 'ease'; @@ -150,8 +148,6 @@ export class PresBox extends ViewBoxBaseComponent() { setAnimationChat = action((input: string) => { this._animationChat = input; }); // prettier-ignore setIsLoading = action((input?: boolean) => { this._isLoading = !!input; }); // prettier-ignore setIsRecording = action((input: boolean) => { this._isRecording = input; }); // prettier-ignore - setBezierEditorVisibility = action((visible: boolean) => { this._showBezierEditor = visible; }); // prettier-ignore - setSpringEditorVisibility = action((visible: boolean) => { this._showSpringEditor = visible; }); // prettier-ignore setShowAIGalleryVisibilty = action((visible: boolean) => { this._showAIGallery = visible; }); // prettier-ignore setBezierControlPoints = action((newPoints: { p1: number[]; p2: number[] }) => { this.setEaseFunc(this.activeItem, `cubic-bezier(${newPoints.p1[0]}, ${newPoints.p1[1]}, ${newPoints.p2[0]}, ${newPoints.p2[1]})`); @@ -390,7 +386,7 @@ export class PresBox extends ViewBoxBaseComponent() { if (!first) { const presBulletTiming = 500; // bcz: hardwired for now Doc.linkFollowUnhighlight(); - Doc.HighlightDoc(listItemDoc); + Doc.linkFollowHighlight(listItemDoc); listItemDoc.presentation_effect = this.activeItem.presBulletEffect; listItemDoc.presentation_transition = presBulletTiming; listItemDoc.opacity = undefined; @@ -1612,20 +1608,22 @@ export class PresBox extends ViewBoxBaseComponent() {
{[DocumentType.AUDIO, DocumentType.VID].includes(targetType as DocumentType) ? null : ( - <> -
-
Slide Duration
-
- e.stopPropagation()} onChange={e => this.updateDurationTime(e.target.value)} /> s +
+ How long to view the slide before transitioning to the next slide
}> +
DURATION
+ +
+ {PresBox.inputter('0.1', '0.1', '10', duration, targetType !== DocumentType.AUDIO, this.updateDurationTime)} +
+
Short
+
Long
- {PresBox.inputter('0.1', '0.1', '20', duration, targetType !== DocumentType.AUDIO, this.updateDurationTime)} -
-
Short
-
Medium
-
Long
+
+ e.stopPropagation()} onChange={action(e => this.updateDurationTime(e.target.value))} /> + s
- +
)}
@@ -1633,28 +1631,62 @@ export class PresBox extends ViewBoxBaseComponent() { } return undefined; } - @computed get progressivizeDropdown() { + + @computed get mediaDropdown() { const { activeItem } = this; if (activeItem && this.targetDoc) { - const effect = activeItem.presBulletEffect ? activeItem.presBulletEffect : PresMovement.None; - const bulletEffect = (presEffect: PresEffect) => ( -
this.updateEffect(presEffect, true)}> - {presEffect} + return ( +
+
+ Should first bullet be progressively disclosed or does it appear with slide.
}> +
{ + activeItem.presentation_playAudio = !BoolCast(activeItem.presentation_playAudio); + }}> + Play Audio Annotation +
+ + Should first bullet be progressively disclosed or does it appear with slide.
}> +
{ + activeItem.presentation_zoomText = !BoolCast(activeItem.presentation_zoomText); + }}> + Zoom Text Selections +
+ +
); + } + return null; + } + @computed get progressivizeDropdown() { + const { activeItem } = this; + if (activeItem && this.targetDoc) { return (
-
-
-
Progressivize Collection
- { +
+ whether progressivization is active for this slide
}> +
{ activeItem.presentation_indexed = activeItem.presentation_indexed === undefined ? 0 : undefined; activeItem.presentation_hideBefore = activeItem.presentation_indexed !== undefined; const tagDoc = PresBox.targetRenderedDoc(this.activeItem); @@ -1667,62 +1699,51 @@ export class PresBox extends ViewBoxBaseComponent() { if (DocCast(activeItem.presentation_targetDoc).annotationOn) activeItem.data = ComputedField.MakeFunction(`this.presentation_targetDoc.annotationOn?.["${dataField}"]`); else activeItem.data = ComputedField.MakeFunction(`this.presentation_targetDoc?.["${dataField}"]`); + }}> + Enable +
+ + Should first bullet be progressively disclosed or does it appear with slide.
}> +
-
-
-
Progressivize First Bullet
- { + onClick={() => { activeItem.presentation_indexedStart = activeItem.presentation_indexedStart ? 0 : 1; - }} - checked={!NumCast(activeItem.presentation_indexedStart)} - /> -
-
-
Expand Current Bullet
- { - activeItem.presBulletExpand = !activeItem.presBulletExpand; - }} - checked={BoolCast(activeItem.presBulletExpand)} - /> -
- -
- Bullet Effect + }}> + All Bullets +
+ + Whether the active bullet expands when active.
}>
{ - e.stopPropagation(); - this._openBulletEffectDropdown = !this._openBulletEffectDropdown; - })} + className={`ribbon-toggle ${BoolCast(activeItem.presBulletExpand) ? 'active' : ''}`} style={{ + border: `solid 1px ${SnappingManager.userColor}`, color: SnappingManager.userColor, - background: SnappingManager.userVariantColor, - borderBottomLeftRadius: this._openBulletEffectDropdown ? 0 : 5, - border: this._openBulletEffectDropdown ? `solid 2px ${SnappingManager.userVariantColor}` : `solid 1px ${SnappingManager.userColor}`, + background: BoolCast(activeItem.presBulletExpand) ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor, + }} + onClick={() => { + activeItem.presBulletExpand = !activeItem.presBulletExpand; }}> - {effect?.toString()} - -
e.stopPropagation()}> - {Object.values(PresEffect) - .filter(v => isNaN(Number(v))) - .map(pEffect => bulletEffect(pEffect))} -
+ Expand Active
-
+
+ ({ text: v.toString(), val: v }))} + selectedVal={StrCast(activeItem.presBulletEffect, PresMovement.None)} + setSelectedVal={val => this.updateEffect(val as PresEffect, true)} + dropdownType={DropdownType.SELECT} + type={Type.TERT} + /> ); } @@ -1733,6 +1754,77 @@ export class PresBox extends ViewBoxBaseComponent() { return
; } + /** + * This chatbox is for getting slide effect transition suggestions from gpt and visualizing them + */ + @computed get aiEffects() { + return ( +
+ {/* Custom */} +
+
+ { + setTimeout(() => { + if (r && !r.textContent) { + r.style.height = ''; + r.style.height = r.scrollHeight + 'px'; + } + }); + }} + value={this._animationChat} + onChange={e => { + e.currentTarget.style.height = ''; + e.currentTarget.style.height = e.currentTarget.scrollHeight + 'px'; + this.setAnimationChat(e.target.value); + }} + onKeyDown={e => { + this.stopDictation(); + e.stopPropagation(); + }} + /> +
+
+
+ Click a box to use the effect. + {/* Preview Animations */} +
+ {this.generatedAnimations.map((elem, i) => ( +
{ + this.updateEffect(elem.effect, false); + this.updateEffectDirection(elem.direction); + this.updateEffectTiming(this.activeItem, { + type: SpringType.CUSTOM, + stiffness: elem.stiffness, + damping: elem.damping, + mass: elem.mass, + }); + }}> + +
+ +
+ ))} +
+
+
+ ); + } + @computed get transitionDropdown() { const { activeItem } = this; // Retrieving spring timing properties @@ -1827,29 +1919,10 @@ export class PresBox extends ViewBoxBaseComponent() { this._openBulletEffectDropdown = false; })}>
- this.updateMovement(val as PresMovement)} - dropdownType={DropdownType.SELECT} - type={Type.TERT} - /> -
- How much (%) of screen target should occupy
}> -
ZOOM %
- -
{PresBox.inputter('0', '1', '100', zoom, activeItem.presentation_movement === PresMovement.Zoom, this.updateZoom)}
-
- this.updateZoom(e.target.value)} /> - % -
-
-
ZOOM/EFFECT TIME
+ How long the transition (view navigation and slide animation effect) lasts
}> +
SPEED
+
{PresBox.inputter('0.1', '0.1', '10', transitionSpeed, true, this.updateTransitionTime)}
@@ -1858,153 +1931,55 @@ export class PresBox extends ViewBoxBaseComponent() {
- e.stopPropagation()} onChange={action(e => this.updateTransitionTime(e.target.value))} /> + e.stopPropagation()} onChange={action(e => this.updateTransitionTime(e.target.value))} /> s
- {/* Easing function */} { - if (typeof val === 'string') { - if (val !== 'custom') { - this.setEaseFunc(this.activeItem, val); - } else { - this.setBezierEditorVisibility(true); - this.setEaseFunc(this.activeItem, TIMING_DEFAULT_MAPPINGS.ease); - } - } - }} + items={movementItems} + selectedVal={this.movementName(activeItem)} + setSelectedVal={val => this.updateMovement(val as PresMovement)} dropdownType={DropdownType.SELECT} type={Type.TERT} /> - {/* Custom */} -
{ - e.stopPropagation(); - this.setBezierEditorVisibility(!this._showBezierEditor); - }}> - TIMING EDITOR - +
+ How much (%) of screen target should occupy
}> +
ZOOM %
+ +
{PresBox.inputter('0', '1', '100', zoom, activeItem.presentation_movement === PresMovement.Zoom, this.updateZoom)}
+
+ this.updateZoom(e.target.value)} /> + % +
+ {/* Easing function */} + {[PresMovement.None, PresMovement.Jump, ''].includes(StrCast(activeItem.presentation_movement) as PresMovement) ? null : ( + typeof val === 'string' && this.setEaseFunc(this.activeItem, val !== 'custom' ? val : TIMING_DEFAULT_MAPPINGS.ease)} + dropdownType={DropdownType.SELECT} + type={Type.TERT} + /> + )}
{/* Cubic bezier editor */} - {this._showBezierEditor && ( + {StrCast(activeItem.presentation_easeFunc).includes('cubic-bezier') && (
)} - {effect === PresEffect.None ? null : ( -
-
-
- Click a box to use the effect. - {/* Preview Animations */} -
- {this.generatedAnimations.map((elem, i) => ( -
{ - this.updateEffect(elem.effect, false); - this.updateEffectDirection(elem.direction); - this.updateEffectTiming(this.activeItem, { - type: SpringType.CUSTOM, - stiffness: elem.stiffness, - damping: elem.damping, - mass: elem.mass, - }); - }}> - -
- -
- ))} -
-
-
-
() { })}>
{/* Effect dropdown */} -
+
() { dropdownType={DropdownType.SELECT} type={Type.TERT} /> + +
this.setShowAIGalleryVisibilty(!this._showAIGallery)}> + MORE +
+ {this.aiEffects}
{/* Effect direction */} {/* Only applies to certain effects */} {(effect === PresEffect.Flip || effect === PresEffect.Bounce || effect === PresEffect.Roll) && ( - <> -
-
EFFECT DIRECTION
-
-
- } - onClick={() => this.updateEffectDirection(PresEffectDirection.Left)} - /> - } - onClick={() => this.updateEffectDirection(PresEffectDirection.Right)} - /> - {effect !== PresEffect.Roll && ( - <> - } - onClick={() => this.updateEffectDirection(PresEffectDirection.Top)} - /> - } - onClick={() => this.updateEffectDirection(PresEffectDirection.Bottom)} - /> - - )} -
+
+
DIRECTION
+
+
+ } + onClick={() => this.updateEffectDirection(PresEffectDirection.Left)} + /> + } + onClick={() => this.updateEffectDirection(PresEffectDirection.Right)} + /> + {effect !== PresEffect.Roll && ( + <> + } + onClick={() => this.updateEffectDirection(PresEffectDirection.Top)} + /> + } + onClick={() => this.updateEffectDirection(PresEffectDirection.Bottom)} + /> + + )}
- +
)} {effect !== PresEffect.Lightspeed && ( <> () { />
- {/* Custom */} -
{ - e.stopPropagation(); - this.setSpringEditorVisibility(!this._showSpringEditor); - }}> - SPRING SETTINGS - -
- {/* Spring settings */} {/* No spring settings for jackinthebox (lightspeed) */} - {this._showSpringEditor && effect !== PresEffect.None && ( + {StrCast(activeItem.presentation_effectTiming).includes('custom') && effect !== PresEffect.None && ( <>
Tension @@ -2150,30 +2124,35 @@ export class PresBox extends ViewBoxBaseComponent() { )}
+
- {/* Toggles */} -
- { - activeItem.presentation_playAudio = !BoolCast(activeItem.presentation_playAudio); - }} - color={SnappingManager.userColor} - /> - { - activeItem.presentation_zoomText = !BoolCast(activeItem.presentation_zoomText); - }} + {effect === PresEffect.None ? null : ( +
+
+ )} + +