From 9e0f2fc211f4e12cfe6c6cdb3b113de5af2dbfe6 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 25 Mar 2025 22:58:35 -0400
Subject: fixed sizing and background of collection filter button.  fixed
 exception in getDescription for text labels.

---
 .../views/collections/FlashcardPracticeUI.tsx      | 46 ++++++++++++++--------
 1 file changed, 29 insertions(+), 17 deletions(-)

(limited to 'src/client/views/collections/FlashcardPracticeUI.tsx')

diff --git a/src/client/views/collections/FlashcardPracticeUI.tsx b/src/client/views/collections/FlashcardPracticeUI.tsx
index c071c5fb8..3bcdd843e 100644
--- a/src/client/views/collections/FlashcardPracticeUI.tsx
+++ b/src/client/views/collections/FlashcardPracticeUI.tsx
@@ -7,13 +7,15 @@ 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 './FlashcardPracticeUI.scss';
+import { StyleProp } from '../StyleProp';
+import { FieldViewProps } from '../nodes/FieldView';
 
 export enum practiceMode {
     PRACTICE = 'practice',
@@ -131,6 +133,7 @@ export class FlashcardPracticeUI extends ObservableReactComponent<PracticeUIProp
             <div
                 className="FlashcardPracticeUI-practiceModes"
                 style={{
+                    background: SnappingManager.userVariantColor,
                     transform: this._props.ScreenToLocalBoxXf().Scale >= 1 ? undefined : `translateY(${this.btnHeight() / this._props.ScreenToLocalBoxXf().Scale - this.btnHeight()}px)`,
                 }}>
                 <MultiToggle
@@ -179,6 +182,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 (
@@ -188,22 +197,25 @@ export class FlashcardPracticeUI extends ObservableReactComponent<PracticeUIProp
                 {this._props.layoutDoc._chromeHidden ? null : (
                     <div className="FlashcardPracticeUI-menu" style={{ height: this.btnHeight(), width: this.btnHeight(), 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>
-- 
cgit v1.2.3-70-g09d2