chore: Improve form usability with CTRL + Enter submission

The code changes in this commit add the functionality to submit the form by pressing CTRL + Enter. This improvement enhances the usability of the form, allowing users to quickly submit their input without having to click the "Translate" button. Note: The commit message follows the established convention of using a prefix (chore) to indicate a non-functional change or maintenance task.
EdiWang · Jun 20, 2024 · 0a5ff63 · 0a5ff63
1 parent f74e41e
commit 0a5ff63
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 9 deletions.
diff --git a/web/src/app/app.component.css b/web/src/app/app.component.css
@@ -44,6 +44,12 @@ section.translator-text-container {
     padding: 8px;
     font-size: 16px;
     line-height: 25px;
+    white-space: pre-line;
+}
+
+.tips {
+    font-size: 12px;
+    color: #666;
 }
 
 .char-count {

diff --git a/web/src/app/app.component.html b/web/src/app/app.component.html
@@ -32,19 +32,22 @@ <h1>
               </div>
               <!--Textare-->
               <div>
-                <fluent-text-area class="source-text" formControlName="sourceText" name="sourceText" ngDefaultControl
-                  placeholder="Enter text" maxlength="{{ maxTextLength }}" rows="10"
+                <fluent-text-area (keydown)="handleKeyDown($event)" class="source-text" formControlName="sourceText"
+                  name="sourceText" ngDefaultControl placeholder="Enter text" maxlength="{{ maxTextLength }}" rows="10"
                   spellcheck="false"></fluent-text-area>
               </div>
               <div class="char-count">
                 {{ sourceForm.get('sourceText')?.value?.length ?? 0 }} / {{ maxTextLength }} character(s)
               </div>
             </section>
             <div class="mt-2">
-              <fluent-button type="submit" appearance="accent" class="me-2"
-                [disabled]="!sourceForm.valid">Translate</fluent-button>
+              <fluent-button type="button" appearance="accent" class="me-2" [disabled]="!sourceForm.valid"
+                (click)="onTranslate()" title="CTRL + ENTER">Translate</fluent-button>
               <fluent-button type="button" appearance="light" (click)="clear()">Clear</fluent-button>
             </div>
+            <div class="tips mt-3">
+              <span>Tip: Press CTRL + Enter to submit the form.</span>
+            </div>
           </div>
           <div class="col-md-12 col-lg-6">
             <section class="translator-text-container">
@@ -103,8 +106,4 @@ <h3>History</h3>
       </ng-template>
     </div>
   </div>
-</main>
-
-<footer>
-  The only translator that won't collect your data
-</footer>
+</main>
diff --git a/web/src/app/app.component.ts b/web/src/app/app.component.ts
@@ -68,6 +68,15 @@ export class AppComponent implements OnInit {
     })
   }
 
+  handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Enter') {
+      if (event.ctrlKey) {
+        this.onTranslate();
+        return;
+      }
+    }
+  }
+
   onTranslate() {
     this.isBusy = true;
     this.errorMessage = '';