highlighted marking improvements, refactorings (#185)

* changes * prettier * changes --------- Co-authored-by: Andi Braimllari <>
OpenCovenant · Jul 13, 2023 · d308086 · d308086
1 parent 8c347cc
commit d308086
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 21 deletions.
diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css
@@ -114,7 +114,7 @@
     max-width: 80%;
 }
 
-.textMarkinggg {
+.text-marking {
     display: inline-block;
     padding: 3px 6px;
     border-radius: 4px;
@@ -124,13 +124,13 @@
     overflow: hidden;
 }
 
-.informationCircleee {
+.information-circle {
     font-size: 20px;
     color: #484848;
     cursor: pointer;
 }
 
-.suggestionsss {
+.suggestions {
     display: flex;
     flex-wrap: wrap;
     align-content: stretch;
@@ -142,22 +142,22 @@
     color: black;
 }
 
-.suggestionDisplay {
+.suggestion-display {
     display: flex;
     justify-content: center;
     align-items: center;
     color: #737373;
 }
 
-.suggestionsHeader {
+.suggestions-header {
     display: inline-block;
     align-items: flex-start;
     margin: 0;
     line-height: inherit;
     cursor: pointer;
 }
 
-.waitingText {
+.waiting-text {
     display: inline-block;
     padding-left: 6px;
     padding-right: 6px;

diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
@@ -197,10 +197,9 @@ <h5 class="card-title">
                 >
                     <div class="card-header secondHeader">
                         <div class="grid1">
-                            <span
-                                class="textMarkinggg {{ textMarking.type }}"
-                                >{{ getTextOfTextMarking(i) }}</span
-                            >
+                            <span class="text-marking {{ textMarking.type }}">{{
+                                getTextOfTextMarking(i)
+                            }}</span>
                         </div>
                         <div>
                             <button
@@ -221,14 +220,14 @@ <h5 class="card-title">
                                 </div>
                                 <div *ngIf="textMarking.id">
                                     <i
-                                        class="bi bi-info-circle informationCircleee"
+                                        class="bi bi-info-circle information-circle"
                                         routerLink="{{ textMarking.id }}"
                                         data-test="marking-information-icon"
                                     ></i>
                                 </div>
                             </div>
                             <span *ngIf="textMarking.suggestions.length > 0">
-                                <div class="suggestionsss">
+                                <div class="suggestions">
                                     <button
                                         *ngFor="
                                             let suggestion of textMarking.suggestions.slice(
@@ -247,7 +246,7 @@ <h5 class="card-title">
                                         <b>{{ suggestion.display }}</b>
                                     </button>
                                     <div
-                                        class="suggestionDisplay"
+                                        class="suggestion-display"
                                         *ngIf="
                                             textMarking.suggestions.length > 4
                                         "
@@ -263,7 +262,7 @@ <h5 class="card-title">
                                             (click)="
                                                 oscillateSuggestion(i, $event)
                                             "
-                                            class="suggestionsHeader bi {{
+                                            class="bi suggestions-header {{
                                                 shouldCollapseSuggestions[i]
                                                     ? 'bi-arrow-right-square'
                                                     : 'bi-arrow-left-square'
@@ -283,7 +282,7 @@ <h5 class="card-title">
                     <div class="card-header secondHeader">
                         <div class="grid1">
                             <span
-                                class="textMarkinggg {{
+                                class="text-marking {{
                                     highlightedMarking?.type
                                 }}"
                                 >{{
@@ -313,7 +312,7 @@ <h5 class="card-title">
                                 </div>
                                 <div *ngIf="highlightedMarking?.id">
                                     <i
-                                        class="bi bi-info-circle informationCircleee"
+                                        class="bi bi-info-circle information-circle"
                                         routerLink="{{
                                             highlightedMarking?.id
                                         }}"
@@ -328,7 +327,7 @@ <h5 class="card-title">
                                         0
                                 "
                             >
-                                <div class="suggestionsss">
+                                <div class="suggestions">
                                     <button
                                         *ngFor="
                                             let suggestion of highlightedMarking?.suggestions!.slice(
@@ -355,7 +354,7 @@ <h5 class="card-title">
                                         <b>{{ suggestion.display }}</b>
                                     </button>
                                     <div
-                                        class="suggestionDisplay"
+                                        class="suggestion-display"
                                         *ngIf="
                                             (highlightedMarking?.suggestions)!
                                                 .length > 4
@@ -376,7 +375,7 @@ <h5 class="card-title">
                                                     $event
                                                 )
                                             "
-                                            class="bi suggestionsHeader {{
+                                            class="bi suggestions-header {{
                                                 shouldCollapseSuggestions[
                                                     highlightedMarkingIndex
                                                 ]
@@ -405,7 +404,7 @@ <h5 class="card-title">
         >
             <div class="card-header secondHeader">
                 <div>
-                    <span class="waitingText">duke lexuar shkrimin...</span>
+                    <span class="waiting-text">duke lexuar shkrimin...</span>
                 </div>
             </div>
             <ul class="list-group list-group-flush listStyling">

diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
@@ -341,6 +341,8 @@ export class HomeComponent implements AfterViewInit, OnDestroy {
                 this.shouldCollapseSuggestions = new Array<boolean>(
                     this.processedText.textMarkings.length
                 ).fill(true);
+
+                this.blurFocusedRightSideMarking();
             });
     }
 
@@ -391,6 +393,7 @@ export class HomeComponent implements AfterViewInit, OnDestroy {
         this.processedText = undefined;
         this.updateCharacterAndWordCount();
         this.shouldCollapseSuggestions = new Array<boolean>(0);
+        this.blurFocusedRightSideMarking();
     }
 
     /**
@@ -816,7 +819,10 @@ export class HomeComponent implements AfterViewInit, OnDestroy {
                         !this.shouldNotMarkEditor(keyboardEvent)
                 ),
                 debounceTime(this.EVENTUAL_MARKING_TIME),
-                tap(() => this.markEditor())
+                tap(() => {
+                    this.blurFocusedRightSideMarking();
+                    this.markEditor();
+                })
             )
             .subscribe();
     }

diff --git a/src/app/home/rn.ts b/src/app/home/rn.ts