[ui] [event-viewer] moves bubble collapse button on top right

Author: loukaspd

changelog.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### Changed
 - **[AppLogger]:**: introduce debug instance
 - **[event-viewer]:**: adds debug loging when command execution throws error
+- **[event-viewer] [ui]:**: moves bubble collapse button to top right
 
 ### Fixed
 - **[log-selection]:** event-logs command parsing when thousands separator is '.' instead of ','

src/app/components/event-viewer/event-entry-item/event-entry-item.component.css

@@ -26,11 +26,7 @@
     border-radius: 50%;
 }
 
-/* Expand-collapse toggle*/
-.event-entry-bubble .togle-container {
-    justify-content: flex-end;
-}
-
+/* Expand-Collapse toggles*/
 .event-entry-bubble .toggle {
     font-size: 11px;
     cursor: pointer;

src/app/components/event-viewer/event-entry-item/event-entry-item.component.html

@@ -1,15 +1,20 @@
 <div class="event-entry-container">
     <!-- Bubble Content -->
     <div class="event-entry-bubble">
+        <!-- collapse button -->
+        <div *ngIf="uiHasBigContent && uiShowingAllContent" class="flex-container" style="justify-content: flex-end;">
+            <span class="toggle" (click)="uiOnToggleClicked(false)">collapse</span>
+        </div>
+
         <!-- Indicator & Message -->
         <div class="flex-container">
             <div class="event-type-indicator" [ngClass]="event.EntryType"></div>
             <span class="event-message" style="white-space: pre-wrap;">{{uiEventMessage}}</span>
         </div>
 
-        <!-- Expand - Collapse toggle -->
-        <div class="flex-container togle-container" *ngIf="uiHasBigContent">
-            <span class="toggle" (click)="uiOnToggleClicked()">{{uiShowingAllContent ? 'collapse' : 'expand'}}</span>
+        <!-- Expand button -->
+        <div *ngIf="uiHasBigContent && !uiShowingAllContent" class="flex-container" style="justify-content: flex-end;">
+            <span class="toggle" (click)="uiOnToggleClicked(true)">expand</span>
         </div>
     </div>
 

src/app/components/event-viewer/event-entry-item/event-entry-item.component.ts

@@ -25,8 +25,8 @@ export class EventEntryItemComponent {
     //#endregion Constructor & Properties
 
     //#region Ui Methods
-    public uiOnToggleClicked() :void {
-        this.uiShowingAllContent = !this.uiShowingAllContent;
+    public uiOnToggleClicked(expand: boolean) :void {
+        this.uiShowingAllContent = expand;
         this.uiEventMessage = this.uiShowingAllContent 
             ? this._event.Message
             : this._messageSmallPart();