From f75f15ae58b57644c28d42446c176289bbe55dd4 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 10 Oct 2024 18:27:25 -0400 Subject: adjusted hiding chrome for carousel. cleaned up some comparisonBox quiz code. removed create flashcard pile button from flashcard - would prefer carousel being added to marquee menu. --- .../views/collections/CollectionCarouselView.tsx | 2 +- .../views/collections/FlashcardPracticeUI.tsx | 46 ++++----- src/client/views/nodes/ComparisonBox.scss | 29 +++++- src/client/views/nodes/ComparisonBox.tsx | 109 ++++++++++----------- src/client/views/pdf/AnchorMenu.tsx | 2 +- 5 files changed, 106 insertions(+), 82 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx index 538eba356..aa447c7bf 100644 --- a/src/client/views/collections/CollectionCarouselView.tsx +++ b/src/client/views/collections/CollectionCarouselView.tsx @@ -184,7 +184,7 @@ export class CollectionCarouselView extends CollectionSubView() { } @computed get navButtons() { - return this.Document._chromeHidden || !this.curDoc() ? null : ( + return !this.curDoc() ? null : ( <>
diff --git a/src/client/views/collections/FlashcardPracticeUI.tsx b/src/client/views/collections/FlashcardPracticeUI.tsx index 4e424f5cd..7697d308b 100644 --- a/src/client/views/collections/FlashcardPracticeUI.tsx +++ b/src/client/views/collections/FlashcardPracticeUI.tsx @@ -15,7 +15,7 @@ import { SnappingManager } from '../../util/SnappingManager'; import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { emptyFunction } from '../../../Utils'; -enum practiceMode { +export enum practiceMode { PRACTICE = 'practice', QUIZ = 'quiz', } @@ -172,27 +172,29 @@ export class FlashcardPracticeUI extends ObservableReactComponent {this.emptyMessage} {this.practiceButtons} -
- {!this.filterDoc || this._props.layoutDoc._chromeHidden ? null : ( - - )} - {this.practiceModesMenu} -
+ {this._props.layoutDoc._chromeHidden ? null : ( +
+ {!this.filterDoc ? null : ( + + )} + {this.practiceModesMenu} +
+ )} ); } diff --git a/src/client/views/nodes/ComparisonBox.scss b/src/client/views/nodes/ComparisonBox.scss index 8156c50f6..c328ef4bf 100644 --- a/src/client/views/nodes/ComparisonBox.scss +++ b/src/client/views/nodes/ComparisonBox.scss @@ -9,6 +9,7 @@ z-index: 0; pointer-events: none; display: flex; + flex-direction: column; p { // bcz: what is this styling for? if text in the comparison box is colored, then this causes it to render with a black outline color: rgb(0, 0, 0); @@ -32,8 +33,10 @@ padding-right: 5px; border-radius: 2px; height: 17%; - display: inline-block; bottom: 0; + overflow: hidden; + display: flex; + width: 100%; &.schema-header-button { color: gray; @@ -61,6 +64,29 @@ float: left; border-radius: 2px; } + .submit-buttonrecord { + border-radius: 2px; + } + .submit-buttonpronunciation { + display: inline-flex; + align-items: center; + } + .submit-buttonschema-header-button { + position: absolute; + top: 5px; + left: 11px; + z-index: 10; + width: 5px; + height: 5px; + cursor: pointer; + } + .submit-buttonsubmit { + border-radius: 2px; + margin-bottom: 3px; + width: 100%; + display: inline-flex; + align-items: center; + } } .dropbtn { @@ -194,6 +220,7 @@ .loading-spinner { display: flex; + position: absolute; justify-content: center; align-items: center; height: 90%; diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx index 9852228fa..ccbe98257 100644 --- a/src/client/views/nodes/ComparisonBox.tsx +++ b/src/client/views/nodes/ComparisonBox.tsx @@ -1,7 +1,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@mui/material'; import axios from 'axios'; -import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx'; +import { IReactionDisposer, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import ReactLoading from 'react-loading'; @@ -30,6 +30,7 @@ import './ComparisonBox.scss'; import { DocumentView } from './DocumentView'; import { FieldView, FieldViewProps } from './FieldView'; import { FormattedTextBox } from './formattedText/FormattedTextBox'; +import { practiceMode } from '../collections/FlashcardPracticeUI'; const API_URL = 'https://api.unsplash.com/search/photos'; @@ -122,18 +123,11 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() )} {DocCast(this.Document.embedContainer)?.type_collection !== CollectionViewType.Freeform ? null : ( - <> - Create a flashcard pile
}> -
this.createFlashcardPile([this.Document], false)}> - -
- - Create new flashcard stack based on text}> -
- -
- - + Create new flashcard stack based on text}> +
+ +
+ )} )} @@ -153,7 +147,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() this._frontSide = !this._frontSide; }; - @action handleRenderGPTClick = async () => { + @action handleRenderGPTClick = () => { const phonTrans = DocCast(this.Document.audio) ? DocCast(this.Document.audio).phoneticTranscription : undefined; if (phonTrans) { this._inputValue = StrCast(phonTrans); @@ -490,20 +484,22 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() } try { const res = await gptAPICall(questionText, GPTCallType.FLASHCARD); - if (!res) { - console.error('GPT call failed'); - return; - } - if (callType == GPTCallType.CHATCARD) { - DocCast(this.dataDoc[this.props.fieldKey + '_0'])[DocData].text = res; - } else if (callType == GPTCallType.QUIZ) { - this._frontSide = true; - this._outputValue = res.replace(/UserAnswer/g, "user's answer").replace(/Rubric/g, 'rubric'); - } else if (callType === GPTCallType.FLASHCARD) { + runInAction(() => { + if (!res) { + console.error('GPT call failed'); + return; + } + if (callType == GPTCallType.CHATCARD) { + DocCast(this.dataDoc[this.props.fieldKey + '_0'])[DocData].text = res; + } else if (callType == GPTCallType.QUIZ) { + this._frontSide = true; + this._outputValue = res.replace(/UserAnswer/g, "user's answer").replace(/Rubric/g, 'rubric'); + } else if (callType === GPTCallType.FLASHCARD) { + this._loading = false; + return res; + } this._loading = false; - return res; - } - this._loading = false; + }); return res; } catch (err) { console.error('GPT call failed', err); @@ -725,24 +721,33 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() if (this.Document._layout_isFlashcard) { const side = this._frontSide ? 1 : 0; + const dataSplit = StrCast(this.dataDoc.data).includes('Keyword: ') ? StrCast(this.dataDoc.data).split('Keyword: ') : StrCast(this.dataDoc.data).split('Answer: '); + const textCreator = (which: number, title: string, text: string) => { + const newDoc = Docs.Create.TextDocument(text, { + title, // + _layout_autoHeight: true, + _layout_centered: true, + text_align: 'center', + _layout_fitWidth: true, + }); + this.addDoc(newDoc, this.fieldKey + '_' + which); + return newDoc; + }; // add text box to each side when comparison box is first created if (!this.dataDoc[this.fieldKey + '_0'] && !this._isEmpty) { - const dataSplit = StrCast(this.dataDoc.data).includes('Keyword: ') ? StrCast(this.dataDoc.data).split('Keyword: ') : StrCast(this.dataDoc.data).split('Answer: '); - const newDoc = Docs.Create.TextDocument(dataSplit[1], { title: 'answer', _layout_autoHeight: true, _layout_centered: true, text_align: 'center', _layout_fitWidth: true }); - this.addDoc(newDoc, this.fieldKey + '_0'); + textCreator(0, 'answer', dataSplit[1]); } if (!this.dataDoc[this.fieldKey + '_1'] && !this._isEmpty) { - const dataSplit = StrCast(this.dataDoc.data).includes('Keyword: ') ? StrCast(this.dataDoc.data).split('Keyword: ') : StrCast(this.dataDoc.data).split('Answer: '); - const newDoc = Docs.Create.TextDocument(dataSplit[0], { title: 'question', _layout_autoHeight: true, _layout_centered: true, text_align: 'center', _layout_fitWidth: true }); - this.addDoc(newDoc, this.fieldKey + '_1'); + const question = textCreator(1, 'question', dataSplit[0] || 'hint: Enter a topic, select this document and click the stack button to have GPT create a deck of cards'); + Doc.SelectOnLoad = dataSplit[0] ? undefined : question; } - if (DocCast(this.Document.embedContainer) && DocCast(this.Document.embedContainer).practiceMode === 'quiz') { + if (DocCast(this.Document.embedContainer).practiceMode === practiceMode.QUIZ) { const text = StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text); return ( -
+

{text}

Return to all flashcards and add text to both sides.

@@ -757,38 +762,28 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() readOnly={this._frontSide}> {this._loading ? ( -
+
) : null}
-
-
this.openContextMenu(e.clientX, e.clientY, false)} - style={{ position: 'absolute', top: '5px', left: '11px', zIndex: '100', width: '5px', height: '5px', cursor: 'pointer' }}> - +
+
this.openContextMenu(e.clientX, e.clientY, false)}> +
- -
this.openContextMenu(e.clientX, e.clientY, true)} style={{ position: 'absolute', top: '5px', left: '50px', zIndex: '100', cursor: 'pointer' }}> - +
this.openContextMenu(e.clientX, e.clientY, true)} style={{ left: '50px', zIndex: '100' }}> +
- - - {!this._frontSide ? ( - - ) : ( - - )} +
@@ -804,7 +799,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() onMouseLeave={() => this.hoverFlip(false)}> {displayBox(`${this.fieldKey}_${side === 0 ? 1 : 0}`, side, this._props.PanelWidth() - 3)} {this._loading ? ( -
+
) : null} diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx index b204d3692..7243473e0 100644 --- a/src/client/views/pdf/AnchorMenu.tsx +++ b/src/client/views/pdf/AnchorMenu.tsx @@ -254,7 +254,7 @@ export class AnchorMenu extends AntimodeMenu { /> )} {/* Adds a create flashcards option to the anchor menu, which calls the gptFlashcard method. */} - } color={SettingsManager.userColor} /> + } color={SettingsManager.userColor} /> } color={SettingsManager.userColor} /> {this._selectedText && (