modified how buttons are laid out on carousel and comparison views so that text boxes can reflow around them. extracted flashcard pratice into its own component and applied it to carousel3D and carousel

1 files changed, 62 insertions, 30 deletions

diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index ef66c2b11..81e223028 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -68,7 +68,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         return (
             <Tooltip title={<div className="dash-tooltip">flip</div>}>
                 <div
-                    className="formattedTextBox-alternateButton"
+                    className="comparisonBox-alternateButton ccomparisonBox-button"
                     onPointerDown={e =>
                         setupMoveUpEvents(e.target, e, returnFalse, emptyFunction, () => {
                             if (!this.revealOp || this.revealOp === 'flip') {
@@ -81,42 +81,74 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                         color: this.revealOp === 'hover' ? 'black' : this._frontSide ? 'black' : 'white',
                         display: 'inline-block',
                     }}>
-                    <div key="alternate" className="formattedTextBox-flip">
-                        <FontAwesomeIcon icon="turn-up" size="1x" />
-                    </div>
+                    <FontAwesomeIcon icon="turn-up" size="xl" />
                 </div>
             </Tooltip>
         );
     }
 
+    _sideBtnWidth = 30;
+    /**
+     * How much the content of the view is being scaled based on its nesting and its fit-to-width settings
+     */
+    @computed get contentScaling() {
+        return this.ScreenToLocalBoxXf().Scale * (this._props.NativeDimScaling?.() ?? 1);
+    }
+    /**
+     * The maximum size a UI widget can be scaled so that it won't be bigger in screen pixels than its normal 35 pixel size.
+     */
+    @computed get maxWidgetScale() {
+        const maxWidgetSize = Math.min(this._sideBtnWidth * this.contentScaling, 0.25 * Math.min(NumCast(this.Document.width), NumCast(this.Document.height)));
+        return Math.max(maxWidgetSize / this._sideBtnWidth, 1);
+    }
+    /**
+     * How much to reactively scale a UI element so that it is as big as it can be (up to its normal 35pixel size) without being too big for the Doc content
+     */
+    @computed get uiBtnScaleTransform() {
+        return this.maxWidgetScale * Math.min(1, this.contentScaling);
+    }
+
     @computed get flashcardMenu() {
         return (
-            <div>
-                <Tooltip
-                    title={this._frontSide ? <div className="dash-tooltip">Flip to front side to use GPT</div> : <div className="dash-tooltip">Ask GPT to create an answer on the back side of the flashcard based on your question on the front</div>}>
-                    <div style={{ position: 'absolute', bottom: '3px', right: '50px', cursor: 'pointer' }} onPointerDown={() => (!this._frontSide ? this.findImageTags() : null)}>
-                        <FontAwesomeIcon icon="lightbulb" size="xl" />
-                    </div>
-                </Tooltip>
-                {DocCast(this.Document.embedContainer)?.type_collection === CollectionViewType.Carousel ? null : (
-                    <div>
-                        <Tooltip title={<div>Create a flashcard pile</div>}>
-                            <div style={{ position: 'absolute', bottom: '3px', right: '74px', cursor: 'pointer' }} onPointerDown={() => this.createFlashcardPile([this.Document], false)}>
-                                <FontAwesomeIcon icon="folder-plus" size="xl" />
-                            </div>
-                        </Tooltip>
-                        <Tooltip title={<div className="dash-tooltip">Create new flashcard stack based on text</div>}>
-                            <div style={{ position: 'absolute', bottom: '3px', right: '104px', cursor: 'pointer' }} onClick={() => this.gptFlashcardPile()}>
-                                <FontAwesomeIcon icon="layer-group" size="xl" />
+            <div className="comparisonBox-bottomMenu" style={{ transform: `scale(${this.uiBtnScaleTransform})` }}>
+                {this.overlayAlternateIcon}
+                {!this._props.isContentActive() ? null : (
+                    <>
+                        {' '}
+                        {!this._frontSide ? null : (
+                            <Tooltip
+                                title={
+                                    <div className="dash-tooltip">{
+                                        !this._frontSide ? "Flip to front side to use GPT":
+                                                "Ask GPT to create an answer on the back side of the flashcard based on your question on the front"}
+                                   </div> // prettier-ignore
+                                }>
+                                <div className="comparisonBox-button" onPointerDown={() => (this._frontSide ? this.findImageTags() : null)}>
+                                    <FontAwesomeIcon icon="lightbulb" size="xl" />
+                                </div>
+                            </Tooltip>
+                        )}
+                        {DocCast(this.Document.embedContainer)?.type_collection === CollectionViewType.Carousel ? null : (
+                            <>
+                                <Tooltip title={<div>Create a flashcard pile</div>}>
+                                    <div className="comparisonBox-button" onPointerDown={() => this.createFlashcardPile([this.Document], false)}>
+                                        <FontAwesomeIcon icon="folder-plus" size="xl" />
+                                    </div>
+                                </Tooltip>
+                                <Tooltip title={<div className="dash-tooltip">Create new flashcard stack based on text</div>}>
+                                    <div className="comparisonBox-button" onClick={this.gptFlashcardPile}>
+                                        <FontAwesomeIcon icon="layer-group" size="xl" />
+                                    </div>
+                                </Tooltip>
+                            </>
+                        )}
+                        <Tooltip title={<div className="dash-tooltip">Hover to reveal</div>}>
+                            <div className="comparisonBox-button" onClick={this.handleHover}>
+                                <FontAwesomeIcon color={this.revealOp === 'hover' ? 'blue' : 'black'} icon="hand-point-up" size="xl" />
                             </div>
                         </Tooltip>
-                    </div>
+                    </>
                 )}
-                <Tooltip title={<div className="dash-tooltip">Hover to reveal</div>}>
-                    <div style={{ position: 'absolute', bottom: '3px', right: '25px', cursor: 'pointer' }} onClick={() => this.handleHover()}>
-                        <FontAwesomeIcon color={this.revealOp === 'hover' ? 'blue' : 'black'} icon="hand-point-up" size="xl" />
-                    </div>
-                </Tooltip>
             </div>
         );
     }
@@ -478,7 +510,6 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 this._loading = false;
                 return;
             }
-            this.flipFlashcard();
         }
         try {
             console.log(queryText);
@@ -655,6 +686,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
 
     childActiveFunc = () => this._childActive;
 
+    contentScreenToLocalXf = () => this._props.ScreenToLocalTransform().scale(this._props.NativeDimScaling?.() || 1);
     render() {
         const clearButton = (which: string) => (
             <Tooltip title={<div className="dash-tooltip">remove</div>}>
@@ -687,6 +719,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                         removeDocument={whichSlot.endsWith('1') ? this.remDoc1 : this.remDoc2}
                         NativeWidth={returnZero}
                         NativeHeight={returnZero}
+                        ScreenToLocalTransform={this.contentScreenToLocalXf}
                         isContentActive={this.childActiveFunc}
                         isDocumentActive={returnFalse}
                         dontSelect={returnTrue}
@@ -808,8 +841,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                             <ReactLoading type="spin" height={30} width={30} color={'blue'} />
                         </div>
                     ) : null}
-                    {this._props.isContentActive() ? this.flashcardMenu : null}
-                    {this.overlayAlternateIcon}
+                    {this.flashcardMenu}
                 </div>
             );
         }