add some shortcuts

joelsantosjunior · May 18, 2021 · 9f9658e · 9f9658e
1 parent fb217fb
commit 9f9658e
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 2 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -7,16 +7,26 @@
   <br>
   <br>
 
+  <div class="shortcuts">
+    <p><small> Pressione <span class="keyCode"><code>enter</code></span> para gerar o texto</small></p>
+    <p><small> Pressione <span class="keyCode"><code>ctrl + enter</code></span> para gerar o texto e salvar na área de
+        transferência</small></p>
+  </div>
+
   <div class="flex row end">
     <div class="form-control">
       <label for="sentences">Parágrafos</label>
-      <input id="sentences" min="1" [(ngModel)]="qtdParagraph" type="number" placeholder="quantidade de sentenças">
+      <input id="sentences" (keyup)="pressEnter($event)" min="1" [(ngModel)]="qtdParagraph" type="number"
+        placeholder="quantidade de sentenças">
     </div>
     <button class="submit" (click)="generateText()">Cuida!
       <cangaceiro id="cangaceiro"></cangaceiro>
     </button>
   </div>
 
+
+
+
   <hr class="divider">
 
   <div class="flex column">

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -27,4 +27,16 @@ label {
   z-index: -2;
   background-color: var(--orange);
   transform: translateX(-1em);
+}
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
 }
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -28,6 +28,18 @@ export class AppComponent {
     this.generateText();
   }
 
+  public async pressEnter(event: KeyboardEvent): Promise<void> {
+    console.log(event);
+    if (event.key === "Enter") {
+      this.generateText();
+    }
+
+    if (event.key === "Enter" && event.ctrlKey) {
+      this.generateText();
+      await this.copy(this.generatedText);
+    }
+  }
+
   public generateText(): void {
 
     this.generatedText = '';

diff --git a/src/styles.scss b/src/styles.scss
@@ -38,7 +38,6 @@ textarea {
   line-height: 1.3em;
 }
 
-
 /* ------------- Basic Flexbox Grid System ------------- */
 
 .flex {
@@ -196,6 +195,23 @@ footer::before {
   left: -10px;
 }
 
+.shortcuts {
+  margin-bottom: 3em;
+
+  p {
+    margin: 0;
+    margin-bottom: 10px;
+  }
+
+  .keyCode {
+    padding: 3px;
+    background: #ccc;
+    border: 1px solid grey;
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+}
+
 /* --------------- Desktops and laptops ----------- */
 @media only screen and (min-width: 1224px) {
   .container {