From 382e09f606d94921dab460cc8c8564199bb0b70d Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 5 Feb 2025 17:10:20 -0500 Subject: cleanup of presbox properties. --- .../views/nodes/trails/CubicBezierEditor.tsx | 154 ++++--- src/client/views/nodes/trails/PresBox.scss | 83 +++- src/client/views/nodes/trails/PresBox.tsx | 475 +++++++++++---------- 3 files changed, 402 insertions(+), 310 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/trails/CubicBezierEditor.tsx b/src/client/views/nodes/trails/CubicBezierEditor.tsx index e1ad1e6e5..627b77184 100644 --- a/src/client/views/nodes/trails/CubicBezierEditor.tsx +++ b/src/client/views/nodes/trails/CubicBezierEditor.tsx @@ -118,84 +118,82 @@ function CubicBezierEditor({ setFunc, currPoints }: Props) { }, [c2Down, currPoints]); return ( -
{ - e.stopPropagation; - }}> - - {/* Outlines */} - - {/* Box Outline */} - - {/* Editor */} - - {/* Bottom left */} - { - setC1Down(true); - }} - onPointerUp={() => { - setC1Down(false); - }} - x1={`${0 + OFFSET}`} - y1={`${EDITOR_WIDTH + OFFSET}`} - x2={`${currPoints.p1[0] * EDITOR_WIDTH + OFFSET}`} - y2={`${EDITOR_WIDTH - currPoints.p1[1] * EDITOR_WIDTH + OFFSET}`} - stroke="#00000000" - strokeWidth="5" - /> - - { - e.stopPropagation(); - setC1Down(true); - }} - onPointerUp={() => { - setC1Down(false); - }} - /> - {/* Top right */} - { - e.stopPropagation(); - setC2Down(true); - }} - onPointerUp={() => { - setC2Down(false); - }} - x1={`${EDITOR_WIDTH + OFFSET}`} - y1={`${0 + OFFSET}`} - x2={`${currPoints.p2[0] * EDITOR_WIDTH + OFFSET}`} - y2={`${EDITOR_WIDTH - currPoints.p2[1] * EDITOR_WIDTH + OFFSET}`} - stroke="#00000000" - strokeWidth="5" - /> - - { - e.stopPropagation(); - setC2Down(true); - }} - onPointerUp={() => { - setC2Down(false); - }} - /> - -
+ + {/* Outlines */} + + {/* Box Outline */} + + {/* Editor */} + + {/* Bottom left */} + { + setC1Down(true); + }} + onPointerMove={e => { + e.stopPropagation; + }} + onPointerUp={() => { + setC1Down(false); + }} + x1={`${0 + OFFSET}`} + y1={`${EDITOR_WIDTH + OFFSET}`} + x2={`${currPoints.p1[0] * EDITOR_WIDTH + OFFSET}`} + y2={`${EDITOR_WIDTH - currPoints.p1[1] * EDITOR_WIDTH + OFFSET}`} + stroke="#00000000" + strokeWidth="5" + /> + + { + e.stopPropagation(); + setC1Down(true); + }} + onPointerUp={() => { + setC1Down(false); + }} + /> + {/* Top right */} + { + e.stopPropagation(); + setC2Down(true); + }} + onPointerUp={() => { + setC2Down(false); + }} + x1={`${EDITOR_WIDTH + OFFSET}`} + y1={`${0 + OFFSET}`} + x2={`${currPoints.p2[0] * EDITOR_WIDTH + OFFSET}`} + y2={`${EDITOR_WIDTH - currPoints.p2[1] * EDITOR_WIDTH + OFFSET}`} + stroke="#00000000" + strokeWidth="5" + /> + + { + e.stopPropagation(); + setC2Down(true); + }} + onPointerUp={() => { + setC2Down(false); + }} + /> + ); } diff --git a/src/client/views/nodes/trails/PresBox.scss b/src/client/views/nodes/trails/PresBox.scss index 60d4e580d..a181687f8 100644 --- a/src/client/views/nodes/trails/PresBox.scss +++ b/src/client/views/nodes/trails/PresBox.scss @@ -5,11 +5,24 @@ display: flex; flex-direction: column; gap: 1rem; + .presBox-gpt-chat-span { + display: flex; + align-items: center; + gap: 8px; + } + textarea { + width: 100%; + } +} +.presBox-subheading-slider { + max-width: calc(100% - 25px); + width: 100%; + padding: 15px; } .pres-chat { display: flex; - flex-direction: column; + flex-direction: row; gap: 8px; } @@ -18,30 +31,38 @@ gap: 8px; } -.pres-chatbox-container { - padding: 16px; +.pres-chatbox-container, +.pres-chatbox-container-ai { + width: 100%; + padding-left: 16px; + padding-right: 16px; outline: 1px solid #999999; - border-radius: 16px; + border-radius: 5px; display: flex; align-items: center; justify-content: space-between; + overflow: auto; + max-height: 200px; + .pres-chatbox { + outline: none; + border: none; + resize: none; + font-family: Verdana, Geneva, sans-serif; + background-color: transparent; + overflow-y: hidden; + } } -.pres-chatbox { - outline: none; - border: none; - resize: none; - font-family: Verdana, Geneva, sans-serif; - background-color: transparent; - overflow-y: hidden; +.pres-chatbox-container-ai { + padding-left: 8px; + padding-right: 8px; + margin-left: 8px; } - // Effect Animations .presBox-effects { - display: grid; - grid-template-columns: auto auto; - gap: 8px; + display: flow; + margin: auto; } .presBox-effect-row { @@ -55,7 +76,7 @@ overflow: hidden; width: 80px; height: 80px; - display: flex; + display: inline-flex; justify-content: center; align-items: center; border: 1px solid rgb(118, 118, 118); @@ -74,7 +95,6 @@ .presBox-show-hide-dropdown { cursor: pointer; - padding: 8px 0; display: flex; align-items: center; gap: 4px; @@ -96,6 +116,18 @@ align-items: center; } +.presBox-previewContainer { + display: flex; + align-items: center; + width: fit-content; + margin: auto; + grid-template-columns: auto auto; + grid-gap: 10px; + .presBox-option-block { + padding: 0px; + } +} + .presBox-cont { cursor: auto; position: absolute; @@ -280,6 +312,9 @@ font-family: Roboto; z-index: 100; transition: 0.7s; + .form-wrapper.left .formLabel { + width: 100px; + } .ribbon-doubleButton { display: flex; @@ -352,6 +387,18 @@ font-size: 11; font-weight: 400; margin-top: 10px; + max-width: min(100px, 25%); + width: 100%; + } + .presBox-springSlider { + display: grid; + column-count: 2; + grid-template-columns: min(60px, 25%) calc(100% - min(60px, 25%) - min(5px, 10%)); + grid-gap: min(5px, 10%); + > span { + overflow: hidden; + text-overflow: ellipsis; + } } @media screen and (-webkit-min-device-pixel-ratio: 0) { @@ -459,7 +506,7 @@ justify-content: space-between; width: 100%; height: max-content; - grid-template-columns: auto auto auto; + grid-template-columns: auto auto; grid-template-rows: max-content; font-weight: 100; margin-top: 3px; diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx index 3919ac3a8..5dbf502d2 100644 --- a/src/client/views/nodes/trails/PresBox.tsx +++ b/src/client/views/nodes/trails/PresBox.tsx @@ -100,8 +100,9 @@ export class PresBox extends ViewBoxBaseComponent() { @observable _presKeyEvents: boolean = false; @observable _forceKeyEvents: boolean = false; + @observable _showAIGallery = false; @observable _showBezierEditor = false; - @observable _showSpringEditor = true; + @observable _showSpringEditor = false; @observable _showPreview = true; @observable _easeDropdownVal = 'ease'; @@ -151,6 +152,7 @@ export class PresBox extends ViewBoxBaseComponent() { 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]})`); }); @@ -1735,19 +1737,14 @@ export class PresBox extends ViewBoxBaseComponent() { const { activeItem } = this; // Retrieving spring timing properties const timing = StrCast(activeItem?.presentation_effectTiming); - let timingConfig: SpringSettings | undefined; - if (timing) { - timingConfig = JSON.parse(timing); - } - - if (!timingConfig) { - timingConfig = { - type: SpringType.GENTLE, - stiffness: 100, - damping: 15, - mass: 1, - }; - } + const timingConfig: SpringSettings = timing + ? JSON.parse(timing) + : { + type: SpringType.GENTLE, + stiffness: 100, + damping: 15, + mass: 1, + }; if (activeItem && this.targetDoc) { const transitionSpeed = activeItem.presentation_transition ? NumCast(activeItem.presentation_transition) / 1000 : 0.5; @@ -1758,20 +1755,32 @@ export class PresBox extends ViewBoxBaseComponent() { return ( <> {/* This chatbox is for customizing the properties of trails, like transition time, movement type (zoom, pan) using GPT */} -
- +
+ Customize Slide Properties{' '}
window.open('https://brown-dash.github.io/Dash-Documentation/features/trails/#slide-customization')}> } color={SnappingManager.userColor} />
-
+
{ + setTimeout(() => { + if (r && !r.textContent) { + r.style.height = ''; + r.style.height = r.scrollHeight + 'px'; + } + }); + }} value={this._chatInput} - onChange={e => this.setChatInput(e.target.value)} + onChange={e => { + e.currentTarget.style.height = ''; + e.currentTarget.style.height = e.currentTarget.scrollHeight + 'px'; + this.setChatInput(e.target.value); + }} onKeyDown={e => { this.stopDictation(); e.stopPropagation(); @@ -1805,6 +1814,7 @@ export class PresBox extends ViewBoxBaseComponent() { />
+ {/* Movement */}
() { this._openEffectDropdown = false; this._openBulletEffectDropdown = false; })}> -
- Movement +
{ - this.updateMovement(val as PresMovement); - }} + setSelectedVal={val => this.updateMovement(val as PresMovement)} dropdownType={DropdownType.SELECT} type={Type.TERT} /> -
-
Zoom (% screen filled)
-
- this.updateZoom(e.target.value)} />% +
+ 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)} /> + %
- {PresBox.inputter('0', '1', '100', zoom, activeItem.presentation_movement === PresMovement.Zoom, this.updateZoom)} -
-
Transition Time
-
- e.stopPropagation()} onChange={action(e => this.updateTransitionTime(e.target.value))} /> s +
+
ZOOM/EFFECT TIME
+
+ {PresBox.inputter('0.1', '0.1', '10', transitionSpeed, true, this.updateTransitionTime)} +
+
Fast
+
Slow
+
+
+
+ e.stopPropagation()} onChange={action(e => this.updateTransitionTime(e.target.value))} /> + s
-
- {PresBox.inputter('0.1', '0.1', '10', transitionSpeed, true, this.updateTransitionTime)} -
-
Fast
-
Medium
-
Slow
{/* Easing function */} () { e.stopPropagation(); this.setBezierEditorVisibility(!this._showBezierEditor); }}> - {`${this._showBezierEditor ? 'Hide' : 'Show'} Timing Editor`} - + TIMING EDITOR +
{/* Cubic bezier editor */} {this._showBezierEditor && ( -
-

- Custom Timing Function -

+
)} + {effect === PresEffect.None ? null : ( +
+
{/* Toggles */} -- cgit v1.2.3-70-g09d2