chore(frontend:files): align search box in CodeMirror and use Angular signals

Author: johaven

frontend/src/app/applications/files/components/viewers/files-viewer-text.component.ts

@@ -6,7 +6,7 @@
 
 import { CodeEditor } from '@acrodata/code-editor'
 import { HttpClient } from '@angular/common/http'
-import { Component, inject, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'
+import { Component, inject, input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { LanguageDescription } from '@codemirror/language'
 import { languages } from '@codemirror/language-data'
@@ -26,13 +26,20 @@ import { FileModel } from '../../models/file.model'
       }
     `
   ],
-  template: ` <div [style.height.px]="currentHeight">
-    <code-editor [languages]="languages" [language]="currentLanguage" [ngModel]="content" [readonly]="true" [theme]="currentTheme"></code-editor>
+  template: ` <div [style.height.px]="currentHeight()">
+    <code-editor
+      [languages]="languages"
+      [language]="currentLanguage"
+      [ngModel]="content"
+      [theme]="currentTheme"
+      [readonly]="true"
+      [lineWrapping]="true"
+    ></code-editor>
   </div>`
 })
 export class FilesViewerTextComponent implements OnInit, OnDestroy {
-  @Input() currentHeight: number
-  @Input() file: FileModel
+  currentHeight = input<number>()
+  file = input<FileModel>()
   protected content: string
   protected currentLanguage = undefined
   protected readonly languages: LanguageDescription[] = languages
@@ -43,10 +50,10 @@ export class FilesViewerTextComponent implements OnInit, OnDestroy {
   private readonly maxSize = 5242880 // 5MB
 
   ngOnInit() {
-    const language: LanguageDescription = LanguageDescription.matchFilename(languages, this.file.name)
-    if (language?.name || this.file.size <= this.maxSize) {
+    const language: LanguageDescription = LanguageDescription.matchFilename(languages, this.file().name)
+    if (language?.name || this.file().size <= this.maxSize) {
       this.currentLanguage = language?.name
-      this.http.get(this.file.dataUrl, { responseType: 'text' }).subscribe((data: string) => (this.content = data))
+      this.http.get(this.file().dataUrl, { responseType: 'text' }).subscribe((data: string) => (this.content = data))
     } else {
       this.content = this.layout.translateString('This file contains binary data that can not be read')
     }

frontend/src/styles/components/_fixes.scss

@@ -25,4 +25,24 @@ hr {
 
 .progress-bar {
   overflow: visible !important;
+}
+
+// codemirror
+.cm-focused {
+  outline: none !important;
+}
+
+.cm-panel.cm-search {
+  display: flex;
+  align-items: center;
+
+  label {
+    display: flex;
+    align-items: center;
+  }
+
+  button[aria-label="close"] {
+    right: 10px !important;
+    font-size: 18px !important;
+  }
 }