diff options
| -rw-r--r-- | src/client/views/collections/CollectionCardDeckView.tsx | 18 | ||||
| -rw-r--r-- | src/client/views/collections/FlashcardPracticeUI.tsx | 53 | ||||
| -rw-r--r-- | src/client/views/nodes/ComparisonBox.tsx | 17 |
3 files changed, 52 insertions, 36 deletions
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx index 8f351d8a7..8807462c3 100644 --- a/src/client/views/collections/CollectionCardDeckView.tsx +++ b/src/client/views/collections/CollectionCardDeckView.tsx @@ -332,14 +332,16 @@ export class CollectionCardView extends CollectionSubView() { return docs; }; - isChildContentActive = () => - this._props.isContentActive?.() === false - ? false - : this._props.isDocumentActive?.() && (this._props.childDocumentsActive?.() || BoolCast(this.Document.childDocumentsActive)) - ? true - : this._props.childDocumentsActive?.() === false || this.Document.childDocumentsActive === false + isChildContentActive = computedFn( + (doc: Doc) => () => + this._props.isContentActive?.() === false ? false - : undefined; + : this._props.isDocumentActive?.() && this.curDoc() === doc + ? true + : this._props.childDocumentsActive?.() === false || this.Document.childDocumentsActive === false + ? false + : undefined + ); // prettier-ignore displayDoc = (doc: Doc, screenToLocalTransform: () => Transform) => ( <DocumentView @@ -362,7 +364,7 @@ export class CollectionCardView extends CollectionSubView() { dragAction={(this.Document.childDragAction ?? this._props.childDragAction) as dropActionType} showTags={BoolCast(this.layoutDoc.showChildTags)} whenChildContentsActiveChanged={this._props.whenChildContentsActiveChanged} - isContentActive={this.isChildContentActive} + isContentActive={this.isChildContentActive(doc)} dontHideOnDrag /> ); diff --git a/src/client/views/collections/FlashcardPracticeUI.tsx b/src/client/views/collections/FlashcardPracticeUI.tsx index 7bf4d86d1..efa94d845 100644 --- a/src/client/views/collections/FlashcardPracticeUI.tsx +++ b/src/client/views/collections/FlashcardPracticeUI.tsx @@ -3,13 +3,17 @@ import { Tooltip } from '@mui/material'; import { computed, makeObservable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { returnZero } from '../../../ClientUtils'; +import { returnFalse, returnZero, setupMoveUpEvents } from '../../../ClientUtils'; import { Doc, DocListCast } from '../../../fields/Doc'; import { BoolCast, NumCast, StrCast } from '../../../fields/Types'; import { Transform } from '../../util/Transform'; import { ObservableReactComponent } from '../ObservableReactComponent'; import { DocumentView, DocumentViewProps } from '../nodes/DocumentView'; import './FlashcardPracticeUI.scss'; +import { IconButton, MultiToggle, Type } from 'browndash-components'; +import { SnappingManager } from '../../util/SnappingManager'; +import { IconProp } from '@fortawesome/fontawesome-svg-core'; +import { emptyFunction } from '../../../Utils'; enum practiceMode { PRACTICE = 'practice', @@ -116,7 +120,7 @@ export class FlashcardPracticeUI extends ObservableReactComponent<PracticeUIProp ) : null; } @computed get practiceModesMenu() { - const setColor = (mode: practiceMode) => (StrCast(this.practiceMode) === mode ? 'white' : 'light gray'); + const setColor = (mode: practiceMode) => (StrCast(this.practiceMode) === mode ? 'white' : 'lightgray'); const togglePracticeMode = (mode: practiceMode) => this.setPracticeMode(mode === this.practiceMode ? undefined : mode); return !this._props.allChildDocs().some(doc => doc._layout_isFlashcard) ? null : ( @@ -126,16 +130,41 @@ export class FlashcardPracticeUI extends ObservableReactComponent<PracticeUIProp transformOrigin: `0px ${-this.btnHeight()}px`, transform: `scale(${Math.max(1, 1 / this._props.ScreenToLocalBoxXf().Scale)})`, }}> - <Tooltip title="Practice flashcards using GPT"> - <div key="back" className="FlashcardPracticeUI-quiz" style={{ width: this.btnWidth(), height: this.btnHeight() }} onClick={() => togglePracticeMode(practiceMode.QUIZ)}> - <FontAwesomeIcon icon="file-pen" color={setColor(practiceMode.QUIZ)} size="sm" /> - </div> - </Tooltip> - <Tooltip title={this.practiceMode === practiceMode.PRACTICE ? 'Exit practice mode' : 'Practice flashcards manually'}> - <div key="back" className="FlashcardPracticeUI-practice" style={{ width: this.btnWidth(), height: this.btnHeight() }} onClick={() => togglePracticeMode(practiceMode.PRACTICE)}> - <FontAwesomeIcon icon="check" color={setColor(practiceMode.PRACTICE)} size="sm" /> - </div> - </Tooltip> + <MultiToggle + tooltip="Practice flashcards one at a time" + type={Type.PRIM} + color={SnappingManager.userColor} + background={SnappingManager.userVariantColor} + multiSelect={false} + isToggle={false} + toggleStatus={!!this.practiceMode} + label="Practice" + items={[ + [practiceMode.QUIZ, 'file-pen', 'Practice flashcards using GPT'], + [practiceMode.PRACTICE, 'check', this.practiceMode === practiceMode.PRACTICE ? 'Exit practice mode' : 'Practice flashcards manually'], + ].map(([item, icon, tooltip]) => ({ + icon: <FontAwesomeIcon className={`FlashcardPracticeUI-${item}`} color={setColor(item as practiceMode)} icon={icon as IconProp} size="sm" />, + tooltip: tooltip, + val: item, + }))} + selectedItems={this.practiceMode} + onSelectionChange={(val: (string | number) | (string | number)[]) => togglePracticeMode(val as practiceMode)} + /> + <IconButton + tooltip="hover over card to reveal answer" + type={Type.TERT} + text={StrCast(this._props.layoutDoc.revealOp)} + color={SnappingManager.userColor} + background={SnappingManager.userVariantColor} + icon={<FontAwesomeIcon color={SnappingManager.userColor} icon={this._props.layoutDoc.revealOp === 'hover' ? 'hand-point-up' : 'question'} size="sm" />} + label={StrCast(this._props.layoutDoc.revealOp)} + onPointerDown={e => + setupMoveUpEvents(this, e, returnFalse, emptyFunction, () => { + this._props.layoutDoc.revealOp = this._props.layoutDoc.revealOp === 'hover' ? 'flip' : 'hover'; + this._props.layoutDoc.childDocumentsActive = this._props.layoutDoc.revealOp === 'hover' ? true : undefined; + }) + } + /> </div> ); } diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx index b86d61fdd..aed81709b 100644 --- a/src/client/views/nodes/ComparisonBox.tsx +++ b/src/client/views/nodes/ComparisonBox.tsx @@ -62,7 +62,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>() @computed get clipWidthKey() { return `_${this._props.fieldKey}_clipWidth`; } // prettier-ignore @computed get clipWidth() { return NumCast(this.layoutDoc[this.clipWidthKey], 50); } // prettier-ignore @computed get clipHeight() { return NumCast(this.layoutDoc[this.clipHeightKey], 200); } // prettier-ignore - @computed get revealOp() { return StrCast(this.layoutDoc[this.revealOpKey]); } // prettier-ignore + @computed get revealOp() { return StrCast(this.layoutDoc[this.revealOpKey], StrCast(this._props.docViewPath().slice(-2)[0]?.Document.revealOp)); } // prettier-ignore set revealOp(value:string) { this.layoutDoc[this.revealOpKey] = value; } // prettier-ignore @computed get overlayAlternateIcon() { @@ -135,27 +135,12 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>() </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> ); } - @action handleHover = () => { - if (this.revealOp === 'hover') { - this.revealOp = 'flip'; - this.Document.forceActive = false; - } else { - this.revealOp = 'hover'; - this.Document.forceActive = true; - } - }; - @action handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => { this._inputValue = e.target.value; }; |