flashcard

2 files changed, 52 insertions, 14 deletions

diff --git a/src/client/views/collections/CollectionCarouselView.scss b/src/client/views/collections/CollectionCarouselView.scss
index c4679e888..b402a7a32 100644
--- a/src/client/views/collections/CollectionCarouselView.scss
+++ b/src/client/views/collections/CollectionCarouselView.scss
@@ -27,10 +27,10 @@
 .carouselView-fwd,
 .carouselView-star,
 .carouselView-remove,
-.carouselView-check {
+.carouselView-check,
+.carouselView-add {
     position: absolute;
     display: flex;
-    top: 42.5%;
     width: 30;
     height: 30;
     align-items: center;
@@ -43,15 +43,22 @@
     }
 }
 .carouselView-fwd {
+    top: 42.5%;
     right: 20;
 }
 .carouselView-back {
+    top: 42.5%;
     left: 20;
 }
 .carouselView-star {
     top: 0;
     left: 0;
 }
+.carouselView-add {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+}
 .carouselView-remove {
     top: 80%;
     left: 52%;
diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx
index 9cf7765dd..b5b6e1f4b 100644
--- a/src/client/views/collections/CollectionCarouselView.tsx
+++ b/src/client/views/collections/CollectionCarouselView.tsx
@@ -4,6 +4,7 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
+import { Docs } from '../../documents/Documents';
 import * as React from 'react';
 import { StopEvent, returnFalse, returnOne, returnTrue, returnZero } from '../../../ClientUtils';
 import { emptyFunction } from '../../../Utils';
@@ -48,7 +49,8 @@ export class CollectionCarouselView extends CollectionSubView() {
     constructor(props: any) {
         super(props);
         makeObservable(this);
-        this.layoutDoc.filterOp = cardMode.ALL;
+        // this.layoutDoc.filterOp = cardMode.ALL;
+        Doc.setDocFilter(this.Document, 'data_star', undefined, 'match');
         this.layoutDoc.practiceMode = practiceMode.NORMAL;
         this.layoutDoc._carousel_index = 0;
     }
@@ -177,9 +179,12 @@ export class CollectionCarouselView extends CollectionSubView() {
         this.layoutDoc.filterOp = mode;
         switch (mode) {
             case cardMode.STAR:
+                Doc.setDocFilter(this.Document, 'data_star', true, 'match');
                 this.move(1);
                 break;
-            default: this.setFilterMessage(undefined); // prettier-ignore
+            default:
+                this.setFilterMessage(undefined); // prettier-ignore
+                Doc.setDocFilter(this.Document, 'data_star', true, 'remove');
         }
     };
 
@@ -197,6 +202,7 @@ export class CollectionCarouselView extends CollectionSubView() {
                         NativeHeight={returnZero}
                         fitWidth={undefined}
                         setContentViewBox={undefined}
+                        childFilters={this.childDocFilters}
                         onDoubleClickScript={this.onContentDoubleClick}
                         onClickScript={this.onContentClick}
                         isDocumentActive={this._props.childDocumentsActive?.() ? this._props.isDocumentActive : this._props.isContentActive}
@@ -227,6 +233,16 @@ export class CollectionCarouselView extends CollectionSubView() {
             </>
         );
     }
+
+    containsDifTypes = (): boolean => {
+        return this.carouselItems.filter(doc => !doc.layout.isFlashcard).length === 0;
+    };
+
+    addFlashcard() {
+        const newDoc = Docs.Create.ComparisonDocument('', { _layout_isFlashcard: true, _width: 300, _height: 300 });
+        this.addDocument?.(newDoc);
+    }
+
     @computed get buttons() {
         if (!this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)]) return null;
         return (
@@ -237,17 +253,32 @@ export class CollectionCarouselView extends CollectionSubView() {
                 <div key="fwd" className="carouselView-fwd" onClick={this.advance}>
                     <FontAwesomeIcon icon="chevron-right" size="2x" />
                 </div>
-                <div key="star" className="carouselView-star" onClick={this.star}>
-                    <FontAwesomeIcon icon="star" color={this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)].layout[this.starField] ? 'yellow' : 'gray'} size="1x" />
-                </div>
+                {!this.containsDifTypes() ? (
+                    <div>
+                        <Tooltip title="star">
+                            <div key="star" className="carouselView-star" onClick={this.star}>
+                                <FontAwesomeIcon icon="star" color={this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)].layout[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" />
+                            </div>
+                        </Tooltip>
+                    </div>
+                ) : null}
                 {this.layoutDoc.practiceMode === practiceMode.PRACTICE ? (
                     <div>
-                        <div key="remove" className="carouselView-remove" onClick={e => this.setPracticeVal(e, practiceVal.MISSED)}>
-                            <FontAwesomeIcon icon="xmark" color="red" size="1x" />
-                        </div>
-                        <div key="check" className="carouselView-check" onClick={e => this.setPracticeVal(e, practiceVal.CORRECT)}>
-                            <FontAwesomeIcon icon="check" color="green" size="1x" />
-                        </div>
+                        <Tooltip title="Incorrect. View again later.">
+                            <div key="remove" className="carouselView-remove" onClick={e => this.setPracticeVal(e, practiceVal.MISSED)}>
+                                <FontAwesomeIcon icon="xmark" color="red" size="1x" />
+                            </div>
+                        </Tooltip>
+                        <Tooltip title="Correct">
+                            <div key="check" className="carouselView-check" onClick={e => this.setPracticeVal(e, practiceVal.CORRECT)}>
+                                <FontAwesomeIcon icon="check" color="green" size="1x" />
+                            </div>
+                        </Tooltip>
                     </div>
                 ) : null}
             </>
@@ -320,7 +351,7 @@ export class CollectionCarouselView extends CollectionSubView() {
                     }}>
                     Recently missed!
                 </p>
-                {this.menu}
+                {!this.containsDifTypes() ? this.menu : null}
                 {this.Document._chromeHidden || (!this._filterMessage && !this._practiceMessage) ? this.buttons : null}
             </div>
         );