From 20611e69b3f4afca5d35a440278f4dcbbda523c7 Mon Sep 17 00:00:00 2001 From: alyssaf16 Date: Mon, 24 Jun 2024 13:05:02 -0400 Subject: language menu --- src/client/views/nodes/ComparisonBox.scss | 87 +++++++++++++++++++++- src/client/views/nodes/ComparisonBox.tsx | 55 +++++++++----- src/client/views/nodes/ImageBox.tsx | 2 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 2 +- 4 files changed, 120 insertions(+), 26 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/nodes/ComparisonBox.scss b/src/client/views/nodes/ComparisonBox.scss index f7389e39b..41ff56514 100644 --- a/src/client/views/nodes/ComparisonBox.scss +++ b/src/client/views/nodes/ComparisonBox.scss @@ -28,17 +28,96 @@ padding-bottom: 10px; padding-left: 5px; padding-right: 5px; - width: 100%; + // width: 80%; border-radius: 2px; height: 15%; - display: flex; + display: inline-block; bottom: 0; + // right: 0; + + &.schema-header-button { + color: gray; + margin: 3px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + + svg { + width: 15px; + } + } + + &.submit { + width: 80%; + // float: right; + + // position: absolute; + // position: 10px; + // padding-left: 35%; + // padding-right: 80%; + // // width: 80px; + // // right: 0; + // right: 0; + // bottom: 0; + } + &.record { + width: 20%; + float: left; + border-radius: 2px; + // right: 0; + // height: 30%; + } button { - flex: 1; - position: relative; + // flex: 1; + // position: relative; } } + + .dropbtn { + background-color: #3498db; + color: white; + padding: 16px; + font-size: 16px; + border: none; + } + + .dropup { + position: absolute; + display: inline-block; + margin-top: 150px; + bottom: 0; + } + + .dropup-content { + display: none; + position: absolute; + background-color: #f1f1f1; + min-width: 160px; + bottom: 40px; + z-index: 1000; + } + + .dropup-content a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; + } + + .dropup-content a:hover { + background-color: #ccc; + } + + .dropup:hover .dropup-content { + display: block; + } + + .dropup:hover .dropbtn { + background-color: #2980b9; + } + textarea { flex: 1; padding: 10px; diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx index 06ecf8893..3d2a1f0a9 100644 --- a/src/client/views/nodes/ComparisonBox.tsx +++ b/src/client/views/nodes/ComparisonBox.tsx @@ -602,10 +602,10 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() // }); // }; - @observable listening = false; + @observable private _listening = false; @observable transcriptElement = ''; SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; - recognition = new this.SpeechRecognition(); + @observable recognition = new this.SpeechRecognition(); handleResult = (e: SpeechRecognitionEvent) => { let interimTranscript = ''; @@ -625,31 +625,39 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() setListening = () => { const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; if (SpeechRecognition) { - console.log('here'); - // const recognition = new SpeechRecognition(); - this.recognition.continuous = true; // Continue listening even if the user pauses - this.recognition.interimResults = true; // Show interim results - this.recognition.lang = 'en-US'; // Set language (optional) + this.recognition.continuous = true; + this.recognition.interimResults = true; + this.recognition.lang = 'en-US'; this.recognition.onresult = this.handleResult.bind(this); - // recognition.onend = this.handleEnd.bind(this); - - // this.handleResult; - // recognition.stop(); } + ContextMenu.Instance.setLangIndex(0); }; - setLanguage = (language: string) => { + setLanguage = (e: React.MouseEvent, language: string, ind: number) => { this.recognition.lang = language; + ContextMenu.Instance.setLangIndex(ind); }; startListening = () => { this.recognition.start(); - this.listening = true; + this._listening = true; }; stopListening = () => { this.recognition.stop(); - this.listening = false; + this._listening = false; + }; + + openContextMenu = (x: number, y: number) => { + ContextMenu.Instance.clearItems(); + ContextMenu.Instance.addItem({ description: 'English', event: e => this.setLanguage(e, 'en-US', 0) }); //prettier-ignore + ContextMenu.Instance.addItem({ description: 'Spanish', event: e => this.setLanguage(e, 'es-ES', 1 )}); //prettier-ignore + ContextMenu.Instance.addItem({ description: 'French', event: e => this.setLanguage(e, 'fr-FR', 2) }); //prettier-ignore + ContextMenu.Instance.addItem({ description: 'Italian', event: e => this.setLanguage(e, 'it-IT', 3) }); //prettier-ignore + ContextMenu.Instance.addItem({ description: 'Mandarin Chinese', event: e => this.setLanguage(e, 'zh-CH', 4) }); //prettier-ignore + ContextMenu.Instance.addItem({ description: 'Japanese', event: e => this.setLanguage(e, 'ja', 5) }); //prettier-ignore + ContextMenu.Instance.addItem({ description: 'Korean', event: e => this.setLanguage(e, 'ko', 6) }); //prettier-ignore + ContextMenu.Instance.displayMenu(x, y); }; render() { @@ -725,7 +733,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() 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]); if (this.Document.image) DocCast(newDoc).image = DocCast(this.Document.image); - console.log('D' + this.Document.image); + // console.log('D' + this.Document.image); //if (DocCast(DocCast(newDoc).dataDoc)) DocCast(DocCast(newDoc).dataDoc)['image'] = this.dataDoc['image']; // console.log('HI' + this.Document.image); @@ -821,17 +829,24 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() ) : null} -
-
- + {this.layoutDoc[`_${this._props.fieldKey}_usePath`] !== 'alternate' ? ( - ) : ( - )} diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 65a645560..93c07f3a8 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -377,7 +377,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { const hrefBase64 = await this.createCanvas(); const response = await gptImageLabel(hrefBase64, 'Make flashcards out of this image with each question and answer labeled as "question" and "answer". Do not label each flashcard and do not include asterisks: '); console.log(response); - AnchorMenu.Instance.transferToFlashcard(response); + AnchorMenu.Instance.transferToFlashcard(response, NumCast(this.layoutDoc['x']), NumCast(this.layoutDoc['y'])); } catch (error) { console.log('Error'); } diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 0be51816f..3c12db965 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -1046,7 +1046,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent