fixed sizing and background of collection filter button. fixed exception in getDescription for text labels.

3 files changed, 31 insertions, 19 deletions

diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index 7d487fed8..bdc3864cc 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -589,7 +589,7 @@ export function CollectionSubView<X>() {
         /**
          * How much the content of the collection is being scaled based on its nesting and its fit-to-width settings
          */
-        @computed get contentScaling() { return this.ScreenToLocalBoxXf().Scale; } // prettier-ignore
+        @computed get contentScaling() { return this.ScreenToLocalBoxXf().Scale * (!this._props.fitWidth?.(this.Document) ? this._props.NativeDimScaling?.()||1: 1); } // prettier-ignore
         /**
          * The maximum size a UI widget can be in collection coordinates based on not wanting the widget to visually obscure too much of the collection
          * This takes the desired screen space size and converts into collection coordinates.  It then returns the smaller of the converted
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>
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index 803e4cac0..76d302db7 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -1480,7 +1480,7 @@ export namespace Doc {
                 case DocumentType.PDF: return curDescription || StrCast(tdoc.text).split(/\s+/).slice(0, 50).join(' '); // first 50 words of pdf text
                 case DocumentType.IMG: return curDescription || imageUrlToBase64(ImageCastWithSuffix(Doc.LayoutField(tdoc), '_o') ?? '')
                                                 .then(hrefBase64 => gptImageLabel(hrefBase64, 'Give three to five labels to describe this image.'));
-                case DocumentType.RTF: return RTFCast(tdoc[Doc.LayoutFieldKey(tdoc)]).Text;
+                case DocumentType.RTF: return RTFCast(tdoc[Doc.LayoutFieldKey(tdoc)])?.Text ?? StrCast(tdoc[Doc.LayoutFieldKey(tdoc)]);
                 default:               return StrCast(tdoc.title).startsWith("Untitled") ? "" : StrCast(tdoc.title);
         }}); // prettier-ignore
         return docText(doc).then(text => (doc['$' + Doc.LayoutFieldKey(doc) + '_description'] = text));