diff options
Diffstat (limited to 'src/client/views/nodes/ComparisonBox.tsx')
| -rw-r--r-- | src/client/views/nodes/ComparisonBox.tsx | 92 |
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> ); } |