netscan ui fix (#844)

Devolutions · May 7, 2024 · 1b8a6eb · 1b8a6eb
1 parent fe30b81
commit 1b8a6eb
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 5 deletions.
diff --git a/webapp/src/client/app/modules/web-client/net-scan/net-scan.component.html b/webapp/src/client/app/modules/web-client/net-scan/net-scan.component.html
@@ -17,17 +17,27 @@
                 </svg>
             </div>
         </div>
-        <div class="no-scroll h-fill" *ngIf="!ended || services.length !== 0">
+        <div class="no-scroll overflow-y-scroll h-fill" *ngIf="!ended || services.length !== 0">
             <ul class="services-list">
                 <li *ngFor="let service of services">
                     <div class="entry margin-x-10px" (click)="onServiceClick(service)">
                         <div class="flex justify-start">
                             <div class="center-one">
                                 <i class="dvl-icon right-small-margin" [ngClass]="service.icon()"></i>
                             </div>
-                            <div>
-                                <div class="typography-service-name">{{service.hostname || service.ip}}</div>
-                                <div class="typography-service-sub-name">{{!service.hostname? " " :service.ip}}</div>
+                            <div class="max-width-230">
+                                <div class="typography-service-name
+                                            max-width-180"
+                                    [ngClass]="{'overflow-x-scroll-on-hover': serviceTitle(service).length > 20,
+                                                'overflow-x-hidden': serviceTitle(service).length <= 20}">
+                                    {{serviceTitle(service)}}
+                                </div>
+                                <div class="typography-service-sub-name
+                                           max-width-180"
+                                    [ngClass]="{'overflow-x-scroll-on-hover': serviceSubtitle(service).length > 20,
+                                                'overflow-x-hidden': serviceSubtitle(service).length <= 20}">
+                                    {{serviceSubtitle(service)}}
+                                </div>
                             </div>
                         </div>
                         <div [pTooltip]="'Prefill form'">

diff --git a/webapp/src/client/app/modules/web-client/net-scan/net-scan.component.scss b/webapp/src/client/app/modules/web-client/net-scan/net-scan.component.scss
@@ -24,7 +24,6 @@
 }
 
 .no-scroll {
-  overflow-y: scroll;
   -ms-overflow-style: none;
   /* Internet Explorer 10+ */
   scrollbar-width: none;
@@ -224,4 +223,24 @@ li:hover {
 
 .hover-pointer-cursor {
   cursor: pointer;
+}
+
+.overflow-x-scroll-on-hover{
+  overflow-x: hidden;
+}
+
+.overflow-x-scroll-on-hover:hover {
+  overflow-x: scroll;
+}
+
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+
+.overflow-y-scroll {
+  overflow-y: scroll;
+}
+
+.max-width-180{
+  width: 180px;
 }
diff --git a/webapp/src/client/app/modules/web-client/net-scan/net-scan.component.ts b/webapp/src/client/app/modules/web-client/net-scan/net-scan.component.ts
@@ -37,4 +37,12 @@ export class NetScanComponent implements AfterViewInit {
   onServiceClick(entry: NetScanEntry): void {
     this.netscanService.serviceSelected(entry);
   }
+
+  serviceTitle(service: NetScanEntry): string {
+    return service.hostname? service.hostname :service.ip
+  }
+
+  serviceSubtitle(service: NetScanEntry): string {
+    return service.hostname? service.ip : " "
+  }
 }