changed flashcard revealOp to be set on collection, not individual flashcards

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;
     };