merged with master. updated filtering in carousel view.

1 files changed, 36 insertions, 30 deletions

diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx
index e0cee2126..43ab4462b 100644
--- a/src/client/views/collections/CollectionCarouselView.tsx
+++ b/src/client/views/collections/CollectionCarouselView.tsx
@@ -63,7 +63,7 @@ export class CollectionCarouselView extends CollectionSubView() {
     @computed get practiceMessage() {
         const cardCount = this.carouselItems.length;
         if (this.practiceMode) {
-            if (!Doc.hasDocFilter(this.layoutDoc, 'tags', this.starField) && !cardCount) {
+            if (!Doc.hasDocFilter(this.layoutDoc, 'tags', Doc.FilterAny) && !cardCount) {
                 return 'Finished! Click here to view all flashcards.';
             }
         }
@@ -73,8 +73,8 @@ export class CollectionCarouselView extends CollectionSubView() {
     @computed get filterMessage() {
         const cardCount = this.carouselItems.length;
         if (!this.practiceMessage) {
-            if (Doc.hasDocFilter(this.layoutDoc, 'tags', this.starField) && !cardCount) {
-                return 'No starred items. Click here to view all flash cards.';
+            if (Doc.hasDocFilter(this.layoutDoc, 'tags', Doc.FilterAny) && !cardCount) {
+                return 'No tagged items. Click here to view all flash cards.';
             }
             if (this.practiceMode) {
                 if (!cardCount) return 'No flashcards to show! Click here to leave practice mode';
@@ -168,6 +168,8 @@ export class CollectionCarouselView extends CollectionSubView() {
                 ? false
                 : undefined;
 
+    childScreenToLocalXf = () => this._props.ScreenToLocalTransform().scale(this._props.NativeDimScaling?.() || 1);
+
     renderDoc = (doc: Doc, showCaptions: boolean, overlayFunc?: (r: DocumentView | null) => void) => {
         return (
             <DocumentView
@@ -177,8 +179,10 @@ export class CollectionCarouselView extends CollectionSubView() {
                 NativeWidth={returnZero}
                 NativeHeight={returnZero}
                 fitWidth={undefined}
+                showTags={true}
                 containerViewPath={this.childContainerViewPath}
                 setContentViewBox={undefined}
+                ScreenToLocalTransform={this.childScreenToLocalXf}
                 onDoubleClickScript={this.onContentDoubleClick}
                 onClickScript={this.onContentClick}
                 isDocumentActive={this._props.childDocumentsActive?.() ? this._props.isDocumentActive : this._props.isContentActive}
@@ -273,11 +277,6 @@ export class CollectionCarouselView extends CollectionSubView() {
         return (
             <>
                 <div>
-                    <Tooltip title="star">
-                        <div key="star" className="carouselView-star" onClick={this.toggleStar}>
-                            <FontAwesomeIcon icon="star" color={TagItem.docHasTag(this.carouselItems?.[this.carouselIndex], this.starField) ? 'yellow' : 'gray'} size="1x" />
-                        </div>
-                    </Tooltip>
                     {/* <Tooltip title="add new flashcard to pile">
                         <div key="add" className="carouselView-add" onClick={this.addFlashcard}>
                             <FontAwesomeIcon icon="plus" color={this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)].layout[this.starField] ? 'yellow' : 'gray'} size="1x" />
@@ -310,12 +309,13 @@ export class CollectionCarouselView extends CollectionSubView() {
 
     togglePracticeMode = (mode: practiceMode) => this.setPracticeMode(mode === this.practiceMode ? undefined : mode);
     toggleFilterMode = () => Doc.setDocFilter(this.Document, 'tags', this.starField, 'check', true);
-    setColor = (mode: practiceMode | cardMode, which: string) => { return which === mode ? 'white' : 'light gray'}; //prettier-ignore
+    setColor = (mode: practiceMode | cardMode, which: string) => (which === mode ? 'white' : 'light gray');
 
     @computed get menu() {
         const curDoc = this.carouselItems?.[this.carouselIndex];
         return (
             <div className="carouselView-menu">
+                {/* NOTE: this should really show the same filter as in the workspace View menu, not just something hardwire for 'star' */}
                 <Tooltip title={Doc.hasDocFilter(this.Document, 'tags', this.starField) ? 'Show all cards' : 'Show only starred cards'}>
                     <div key="back" className="carouselView-starFilter" onClick={e => this.toggleFilterMode()}>
                         <FontAwesomeIcon icon="filter" color={Doc.hasDocFilter(this.Document, 'tags', this.starField) ? 'white' : 'lightgray'} size="1x" />
@@ -339,27 +339,33 @@ export class CollectionCarouselView extends CollectionSubView() {
 
     render() {
         return (
-            <div
-                className="collectionCarouselView-outer"
-                ref={this.createDashEventsTarget}
-                style={{
-                    background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) as string,
-                    color: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color) as string,
-                }}>
-                {!this.practiceMessage && !this.filterMessage ? (
-                    this.content
-                ) : (
-                    <p
-                        className="message"
-                        onClick={e => {
-                            if (this.filterMessage || this.practiceMessage) {
-                                this.setPracticeMode(undefined);
-                                Doc.setDocFilter(this.layoutDoc, 'tags', this.starField, 'remove');
-                            }
-                        }}>
-                        {this.filterMessage || this.practiceMessage}
-                    </p>
-                )}
+            <div>
+                <div
+                    className="collectionCarouselView-outer"
+                    ref={this.createDashEventsTarget}
+                    style={{
+                        background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) as string,
+                        color: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color) as string,
+                        width: `calc(100% - ${NumCast(this.layoutDoc._xMargin)}px)`,
+                        height: `calc(100% - ${NumCast(this.layoutDoc._yMargin)}px)`,
+                        left: NumCast(this.layoutDoc._xMargin),
+                        top: NumCast(this.layoutDoc._yMargin),
+                    }}>
+                    {!this.practiceMessage && !this.filterMessage ? (
+                        this.content
+                    ) : (
+                        <p
+                            className="message"
+                            onClick={e => {
+                                if (this.filterMessage || this.practiceMessage) {
+                                    this.setPracticeMode(undefined);
+                                    Doc.setDocFilter(this.layoutDoc, 'tags', Doc.FilterAny, 'remove');
+                                }
+                            }}>
+                            {this.filterMessage || this.practiceMessage}
+                        </p>
+                    )}
+                </div>
                 {!this.Document._chromeHidden ? this.menu : null}
                 {!this.Document._chromeHidden ? this.buttons : null}
             </div>