Flashcard menus

1 files changed, 41 insertions, 12 deletions

diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx
index 53d14e6e0..8da808065 100644
--- a/src/client/views/collections/CollectionCarouselView.tsx
+++ b/src/client/views/collections/CollectionCarouselView.tsx
@@ -19,6 +19,7 @@ import { FieldViewProps } from '../nodes/FieldView';
 import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
 import './CollectionCarouselView.scss';
 import { CollectionSubView } from './CollectionSubView';
+import { Tooltip } from '@mui/material';
 
 enum cardMode {
     PRACTICE = 'practice',
@@ -143,22 +144,26 @@ export class CollectionCarouselView extends CollectionSubView() {
     captionWidth = () => this._props.PanelWidth() - 2 * this.marginX;
     setFilterMode = (mode: cardMode) => {
         this.layoutDoc.filterOp = mode;
+        console.log('MODE' + mode);
+        console.log('FILT' + this.layoutDoc.filterOp + ';');
         if (mode == cardMode.STAR) this.move(1);
-        if (mode == cardMode.QUIZ) this.carouselItems?.map(doc => (doc.layout[this.sideField] = undefined));
+        if (mode == cardMode.QUIZ) {
+            this.carouselItems?.map(doc => (doc.layout[this.sideField] = undefined));
+        }
         this.carouselItems?.map(doc => (doc.layout[this.practiceField] = undefined));
     };
-    specificMenu = (): void => {
-        const cm = ContextMenu.Instance;
+    // specificMenu = (): void => {
+    //     const cm = ContextMenu.Instance;
 
-        const revealOptions = cm.findByDescription('Filter Flashcards');
-        const revealItems: ContextMenuProps[] = revealOptions && 'subitems' in revealOptions ? revealOptions.subitems : [];
-        revealItems.push({description: 'All',           event: () => {this.setFilterMode(cardMode.ALL);},         icon: 'layer-group',}); // prettier-ignore
-        revealItems.push({description: 'Star',          event: () => {this.setFilterMode(cardMode.STAR);},     icon: 'star',}); // prettier-ignore
-        revealItems.push({description: 'Practice Mode', event: () => {this.setFilterMode(cardMode.PRACTICE);}, icon: 'check',}); // prettier-ignore
-        cm.addItem({description: 'Quiz Cards',    event: () => {this.setFilterMode(cardMode.QUIZ);},     icon: 'pencil',}); // prettier-ignore
-        !revealOptions && cm.addItem({ description: 'Filter Flashcards', addDivider: false, noexpand: true, subitems: revealItems, icon: 'layer-group' });
-        //cm.addItem({description: 'Quiz Cards',    event: () => {this.layoutDoc.filterOp = cardMode.QUIZ; this.clearContent()});
-    };
+    //     const revealOptions = cm.findByDescription('Filter Flashcards');
+    //     const revealItems: ContextMenuProps[] = revealOptions && 'subitems' in revealOptions ? revealOptions.subitems : [];
+    //     revealItems.push({description: 'All',           event: () => {this.setFilterMode(cardMode.ALL);},         icon: 'layer-group',}); // prettier-ignore
+    //     revealItems.push({description: 'Star',          event: () => {this.setFilterMode(cardMode.STAR);},     icon: 'star',}); // prettier-ignore
+    //     revealItems.push({description: 'Practice Mode', event: () => {this.setFilterMode(cardMode.PRACTICE);}, icon: 'check',}); // prettier-ignore
+    //     cm.addItem({description: 'Quiz Cards',    event: () => {this.setFilterMode(cardMode.QUIZ);},     icon: 'pencil',}); // prettier-ignore
+    //     !revealOptions && cm.addItem({ description: 'Filter Flashcards', addDivider: false, noexpand: true, subitems: revealItems, icon: 'layer-group' });
+    //     //cm.addItem({description: 'Quiz Cards',    event: () => {this.layoutDoc.filterOp = cardMode.QUIZ; this.clearContent()});
+    // };
     @computed get content() {
         const index = NumCast(this.layoutDoc._carousel_index);
         const curDoc = this.carouselItems?.[index];
@@ -226,6 +231,28 @@ export class CollectionCarouselView extends CollectionSubView() {
         );
     }
 
+    @computed get menu() {
+        return (
+            <div className="carouselView-menu">
+                <Tooltip title="Practice flashcards using GPT">
+                    <div key="back" className="carouselView-quiz" onClick={e => (this.layoutDoc.filterOp === cardMode.QUIZ ? this.setFilterMode(cardMode.ALL) : this.setFilterMode(cardMode.QUIZ))}>
+                        <FontAwesomeIcon icon="file-pen" color={this.layoutDoc.filterOp === cardMode.QUIZ ? 'white' : 'light gray'} size="1x" />
+                    </div>
+                </Tooltip>
+                <Tooltip title={this.layoutDoc.filterOp === cardMode.PRACTICE ? 'Exit practice mode' : 'Practice flashcards manually'}>
+                    <div key="back" className="carouselView-practice" onClick={e => (this.layoutDoc.filterOp === cardMode.PRACTICE ? this.setFilterMode(cardMode.ALL) : this.setFilterMode(cardMode.PRACTICE))}>
+                        <FontAwesomeIcon icon="check" color={this.layoutDoc.filterOp === cardMode.PRACTICE ? 'white' : 'light gray'} size="1x" />
+                    </div>
+                </Tooltip>
+                <Tooltip title={this.layoutDoc.filterOp === cardMode.STAR ? 'Show all cards' : 'Show only starred cards'}>
+                    <div key="back" className="carouselView-starFilter" onClick={e => (!this.layoutDoc.filterOp ? this.setFilterMode(cardMode.ALL) : this.setFilterMode(cardMode.STAR))}>
+                        <FontAwesomeIcon icon="filter" color={this.layoutDoc.filterOp === cardMode.STAR || !this.layoutDoc.filterOp ? 'white' : 'light gray'} size="1x" />
+                    </div>
+                </Tooltip>
+            </div>
+        );
+    }
+
     render() {
         return (
             <div
@@ -250,6 +277,7 @@ export class CollectionCarouselView extends CollectionSubView() {
                 <p
                     style={{
                         color: 'red',
+                        fontWeight: 'bold',
                         zIndex: '999',
                         position: 'relative',
                         left: '10px',
@@ -263,6 +291,7 @@ export class CollectionCarouselView extends CollectionSubView() {
                     }}>
                     Recently missed!
                 </p>
+                {this.menu}
                 {this.Document._chromeHidden || !this.layoutDoc.filterOp ? null : this.buttons}
             </div>
         );