From 585f03bf45df4ac7ed61d22c9dbe10d8e453199d Mon Sep 17 00:00:00 2001 From: alyssaf16 Date: Wed, 5 Jun 2024 15:06:15 -0400 Subject: Flashcards changes --- .../views/collections/CollectionCarouselView.scss | 13 +++++- .../views/collections/CollectionCarouselView.tsx | 51 +++++++++++++++------- 2 files changed, 47 insertions(+), 17 deletions(-) (limited to 'src/client/views/collections') diff --git a/src/client/views/collections/CollectionCarouselView.scss b/src/client/views/collections/CollectionCarouselView.scss index f115bb40a..975b352cf 100644 --- a/src/client/views/collections/CollectionCarouselView.scss +++ b/src/client/views/collections/CollectionCarouselView.scss @@ -1,5 +1,7 @@ .collectionCarouselView-outer { height: 100%; + position: relative; + overflow: hidden; .collectionCarouselView-caption { height: 50; display: inline-block; @@ -11,7 +13,16 @@ width: 100%; user-select: none; } + .message { + justify-content: center; + align-items: center; + display: flex; + height: 60%; + z-index: -1; + // margin: 15px; + } } + .carouselView-back, .carouselView-fwd, .carouselView-star, @@ -21,7 +32,7 @@ display: flex; top: 42.5%; width: 30; - height: 15%; + height: 30; align-items: center; border-radius: 5px; justify-content: center; diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx index 2adad68e0..2893de762 100644 --- a/src/client/views/collections/CollectionCarouselView.tsx +++ b/src/client/views/collections/CollectionCarouselView.tsx @@ -2,7 +2,7 @@ /* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable react/jsx-props-no-spreading */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { computed, makeObservable } from 'mobx'; +import { computed, makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { StopEvent, returnFalse, returnOne, returnTrue, returnZero } from '../../../ClientUtils'; @@ -24,6 +24,7 @@ enum cardMode { PRACTICE = 'practice', STAR = 'star', QUIZ = 'quiz', + ALL = 'all', } enum practiceVal { MISSED = 'missed', @@ -32,12 +33,15 @@ enum practiceVal { @observer export class CollectionCarouselView extends CollectionSubView() { private _dropDisposer?: DragManager.DragDropDisposer; + @observable private _message = 'Drag a document'; get practiceField() { return this.fieldKey + "_practice"; } // prettier-ignore get starField() { return this.fieldKey + "_star"; } // prettier-ignore constructor(props: any) { super(props); makeObservable(this); + this.layoutDoc.filterOp = cardMode.ALL; + this.layoutDoc._carousel_index = 0; } componentWillUnmount() { @@ -61,7 +65,7 @@ export class CollectionCarouselView extends CollectionSubView() { move = (dir: number) => { const moveToCardWithField = (match: (doc: Doc) => boolean): boolean => { let startInd = (NumCast(this.layoutDoc._carousel_index) + dir) % this.carouselItems.length; - while (!match(this.carouselItems?.[startInd].layout) && (startInd + dir + this.carouselItems.length) % this.carouselItems.length !== this.layoutDoc._carousel_index) { + while (!match(this.carouselItems?.[startInd].layout) && (startInd + this.carouselItems.length) % this.carouselItems.length !== this.layoutDoc._carousel_index) { startInd = (startInd + dir + this.carouselItems.length) % this.carouselItems.length; } if (match(this.carouselItems?.[startInd].layout)) { @@ -73,16 +77,19 @@ export class CollectionCarouselView extends CollectionSubView() { switch (StrCast(this.layoutDoc.filterOp)) { case cardMode.STAR: // go to a flashcard that is starred, skip the ones that aren't if (!moveToCardWithField((doc: Doc) => !!doc[this.starField])) { + // this.layoutDoc._carousel_index this.layoutDoc.filterOp = undefined; // if there aren't any starred, show all cards + this._message = 'No starred items. Return to All to star documents.' } break; case cardMode.PRACTICE: // go to a new index that is missed, skip the ones that are correct if (!moveToCardWithField((doc: Doc) => doc[this.practiceField] !== practiceVal.CORRECT)) { this.layoutDoc.filterOp = undefined; // if all of the cards are correct, show all cards and exit practice mode - + this._message = 'Finished! Return to All.' this.carouselItems.forEach(item => { // reset all the practice values item.layout[this.practiceField] = undefined; }); + // this.layoutDoc._carousel_index = -1; } break; default: moveToCardWithField(returnTrue); @@ -112,6 +119,7 @@ export class CollectionCarouselView extends CollectionSubView() { e.stopPropagation(); const curDoc = this.carouselItems[NumCast(this.layoutDoc._carousel_index)]; curDoc.layout[this.starField] = curDoc.layout[this.starField] ? undefined : true; + // this.layoutDoc._carousel_index = undefined; }; /* @@ -123,7 +131,9 @@ export class CollectionCarouselView extends CollectionSubView() { curDoc.layout[this.practiceField] = val; this.advance(e); }; - + clearContent = () => { + this.carouselItems?.map(doc => (doc.layout[this.practiceField] = undefined)); + }; captionStyleProvider = (doc: Doc | undefined, captionProps: Opt, property: string): any => { // first look for properties on the document in the carousel, then fallback to properties on the container const childValue = doc?.['caption_' + property] ? this._props.styleProvider?.(doc, captionProps, property) : undefined; @@ -133,16 +143,22 @@ export class CollectionCarouselView extends CollectionSubView() { onContentDoubleClick = () => ScriptCast(this.layoutDoc.onChildDoubleClick); onContentClick = () => ScriptCast(this.layoutDoc.onChildClick); captionWidth = () => this._props.PanelWidth() - 2 * this.marginX; + setFilterMode = (mode: cardMode) => { + this.layoutDoc.filterOp = mode; + if (mode == cardMode.STAR) this.move(1); + this.clearContent(); + }; 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.layoutDoc.filterOp = undefined;}, icon: 'layer-group',}); // prettier-ignore - revealItems.push({description: 'Star', event: () => {this.layoutDoc.filterOp = cardMode.STAR;}, icon: 'star',}); // prettier-ignore - revealItems.push({description: 'Practice Mode', event: () => {this.layoutDoc.filterOp = cardMode.PRACTICE;}, icon: 'check',}); // prettier-ignore - revealItems.push({description: 'Quiz Cards', event: () => {this.layoutDoc.filterOp = cardMode.QUIZ;}, icon: 'pencil',}); // prettier-ignore + 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); @@ -221,17 +237,15 @@ export class CollectionCarouselView extends CollectionSubView() { background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor), color: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color), }}> - {this.content} + {this.layoutDoc.filterOp ? this.content :

{this._message}

} + {/* {(this.carouselItems?.filter(doc => doc.layout[this.practiceField] !== practiceVal.CORRECT)).length == 0 ? null : this.content} */} {/* Displays a message to the user to add more flashcards if they are in practice mode and no flashcards are there. */}

- Add flashcards! + Add flashcards

{/* Displays a message to the user that a flashcard was recently missed if they had previously gotten it wrong. */}

Recently missed!

- {this.Document._chromeHidden ? null : this.buttons} + {this.Document._chromeHidden || !this.layoutDoc.filterOp ? null : this.buttons} ); } -- cgit v1.2.3-70-g09d2