merged with master and cleaned up outpainting a bit.

1 files changed, 34 insertions, 24 deletions

diff --git a/src/client/views/collections/FlashcardPracticeUI.tsx b/src/client/views/collections/FlashcardPracticeUI.tsx
index c071c5fb8..f24a8acb7 100644
--- a/src/client/views/collections/FlashcardPracticeUI.tsx
+++ b/src/client/views/collections/FlashcardPracticeUI.tsx
@@ -7,13 +7,16 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 import { returnFalse, returnZero, setupMoveUpEvents } from '../../../ClientUtils';
 import { emptyFunction } from '../../../Utils';
-import { Doc, DocListCast } from '../../../fields/Doc';
+import { Doc, DocListCast, Opt } from '../../../fields/Doc';
 import { BoolCast, NumCast, StrCast } from '../../../fields/Types';
 import { SnappingManager } from '../../util/SnappingManager';
 import { Transform } from '../../util/Transform';
 import { ObservableReactComponent } from '../ObservableReactComponent';
-import { DocumentView, DocumentViewProps } from '../nodes/DocumentView';
+import { DocumentView } from '../nodes/DocumentView';
 import './FlashcardPracticeUI.scss';
+import { StyleProp } from '../StyleProp';
+import { FieldViewProps } from '../nodes/FieldView';
+import { DocumentViewProps } from '../nodes/DocumentContentsView';
 
 export enum practiceMode {
     PRACTICE = 'practice',
@@ -60,8 +63,8 @@ export class FlashcardPracticeUI extends ObservableReactComponent<PracticeUIProp
     @computed get filterDoc() { return DocListCast(Doc.MyContextMenuBtns.data).find(doc => doc.title === 'Filter'); } // prettier-ignore
     @computed get practiceMode() {  return this._props.allChildDocs().some(doc => doc._layout_flashcardType) ? StrCast(this._props.layoutDoc.practiceMode) : ''; } // prettier-ignore
 
-    btnHeight = () => NumCast(this.filterDoc?.height) * Math.min(1, this._props.ScreenToLocalBoxXf().Scale);
-    btnWidth = () => (!this.filterDoc ? 1 : (this.btnHeight() * NumCast(this.filterDoc._width)) / NumCast(this.filterDoc._height));
+    btnHeight = () => NumCast(this.filterDoc?.height);
+    btnWidth = () => (!this.filterDoc ? 1 : NumCast(this.filterDoc._width));
 
     /**
      * Sets the practice mode answer style for flashcards
@@ -131,7 +134,7 @@ export class FlashcardPracticeUI extends ObservableReactComponent<PracticeUIProp
             <div
                 className="FlashcardPracticeUI-practiceModes"
                 style={{
-                    transform: this._props.ScreenToLocalBoxXf().Scale >= 1 ? undefined : `translateY(${this.btnHeight() / this._props.ScreenToLocalBoxXf().Scale - this.btnHeight()}px)`,
+                    background: SnappingManager.userVariantColor,
                 }}>
                 <MultiToggle
                     tooltip="Practice flashcards one at a time"
@@ -139,7 +142,6 @@ export class FlashcardPracticeUI extends ObservableReactComponent<PracticeUIProp
                     color={SnappingManager.userColor}
                     background={SnappingManager.userVariantColor}
                     multiSelect={false}
-                    isToggle={false}
                     toggleStatus={!!this.practiceMode}
                     label="Practice"
                     items={[
@@ -159,7 +161,6 @@ export class FlashcardPracticeUI extends ObservableReactComponent<PracticeUIProp
                     color={SnappingManager.userColor}
                     background={SnappingManager.userVariantColor}
                     multiSelect={false}
-                    isToggle={false}
                     toggleStatus={!!this.practiceMode}
                     label={StrCast(this._props.layoutDoc.revealOp, flashcardRevealOp.FLIP)}
                     items={[
@@ -179,6 +180,12 @@ export class FlashcardPracticeUI extends ObservableReactComponent<PracticeUIProp
             </div>
         );
     }
+    childStyleProvider = (doc: Doc | undefined, props: Opt<FieldViewProps>, property: string) => {
+        if (doc instanceof Doc && property === StyleProp.BackgroundColor) {
+            return SnappingManager.userVariantColor;
+        }
+        return this._props.docViewProps().styleProvider?.(doc, props, property);
+    };
     tryFilterOut = (doc: Doc) => (this.practiceMode && doc?._layout_flashcardType && doc[this.practiceField] === practiceVal.CORRECT ? true : false); // show only cards that aren't marked as correct
     render() {
         return (
@@ -186,24 +193,27 @@ export class FlashcardPracticeUI extends ObservableReactComponent<PracticeUIProp
                 {this.emptyMessage}
                 {this.practiceButtons}
                 {this._props.layoutDoc._chromeHidden ? null : (
-                    <div className="FlashcardPracticeUI-menu" style={{ height: this.btnHeight(), width: this.btnHeight(), transform: `scale(${this._props.uiBtnScaling})` }}>
+                    <div className="FlashcardPracticeUI-menu" style={{ height: this.btnHeight(), width: this.btnWidth(), transform: `scale(${this._props.uiBtnScaling})` }}>
                         {!this.filterDoc ? null : (
-                            <DocumentView
-                                {...this._props.docViewProps()}
-                                Document={this.filterDoc}
-                                TemplateDataDocument={undefined}
-                                PanelWidth={this.btnWidth}
-                                PanelHeight={this.btnHeight}
-                                NativeWidth={returnZero}
-                                NativeHeight={returnZero}
-                                hideDecorations={BoolCast(this._props.layoutDoc.layout_hideDecorations)}
-                                hideCaptions={true}
-                                hideFilterStatus={true}
-                                renderDepth={this._props.renderDepth + 1}
-                                fitWidth={undefined}
-                                showTags={false}
-                                setContentViewBox={undefined}
-                            />
+                            <div style={{ background: SnappingManager.userVariantColor }}>
+                                <DocumentView
+                                    {...this._props.docViewProps()}
+                                    Document={this.filterDoc}
+                                    TemplateDataDocument={undefined}
+                                    PanelWidth={this.btnWidth}
+                                    PanelHeight={this.btnHeight}
+                                    NativeWidth={returnZero}
+                                    NativeHeight={returnZero}
+                                    hideDecorations={BoolCast(this._props.layoutDoc.layout_hideDecorations)}
+                                    hideCaptions={true}
+                                    hideFilterStatus={true}
+                                    renderDepth={this._props.renderDepth + 1}
+                                    styleProvider={this.childStyleProvider}
+                                    fitWidth={undefined}
+                                    showTags={false}
+                                    setContentViewBox={undefined}
+                                />
+                            </div>
                         )}
                         {this.practiceModesMenu}
                     </div>