Various improvements for smaller screen sizes. Fix network rating

modules/portmaster/projects/safing/ui/src/lib/select/_select.scss

@@ -18,7 +18,7 @@
     }
   }
 
-  span {
+  & > span {
     @apply flex-grow text-ellipsis inline-block overflow-hidden;
     @apply px-2;
   }

modules/portmaster/projects/safing/ui/src/lib/tabs/index.ts

@@ -1,4 +1,4 @@
 export { SfngTabComponent, SfngTabContentDirective } from './tab';
-export { SfngTabGroupComponent } from './tab-group';
+export { SfngTabContentScrollEvent, SfngTabGroupComponent } from './tab-group';
 export { SfngTabModule as TabModule } from './tabs.module';
 

modules/portmaster/projects/safing/ui/src/lib/tabs/tab-group.ts

@@ -1,11 +1,17 @@
 import { ListKeyManager } from "@angular/cdk/a11y";
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { CdkPortalOutlet, ComponentPortal, TemplatePortal } from "@angular/cdk/portal";
-import { AfterContentInit, AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ComponentRef, ContentChildren, ElementRef, Injector, Input, OnDestroy, OnInit, QueryList, ViewChild, ViewChildren } from "@angular/core";
+import { CdkPortalOutlet, ComponentPortal } from "@angular/cdk/portal";
+import { AfterContentInit, AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ComponentRef, ContentChildren, ElementRef, EventEmitter, Injector, Input, OnDestroy, OnInit, Output, QueryList, ViewChild, ViewChildren } from "@angular/core";
 import { ActivatedRoute, Router } from "@angular/router";
 import { Observable, Subject } from "rxjs";
 import { distinctUntilChanged, map, takeUntil } from "rxjs/operators";
-import { SfngTabComponent, TabOutletComponent, TAB_ANIMATION_DIRECTION, TAB_PORTAL } from "./tab";
+import { SfngTabComponent, TabOutletComponent, TAB_ANIMATION_DIRECTION, TAB_PORTAL, TAB_SCROLL_HANDLER } from "./tab";
+
+export interface SfngTabContentScrollEvent {
+  event?: Event;
+  scrollTop: number;
+  previousScrollTop: number;
+}
 
 /**
  * Tab group component for rendering a tab-style navigation with support for
@@ -53,13 +59,18 @@ export class SfngTabGroupComponent implements AfterContentInit, AfterViewInit, O
   @ViewChild(CdkPortalOutlet, { static: true })
   portalOutlet: CdkPortalOutlet | null = null;
 
+  @Output()
+  tabContentScroll = new EventEmitter<SfngTabContentScrollEvent>();
+
   /** The name of the tab group. Used to update the currently active tab in the route */
   @Input()
   name = 'tab'
 
   @Input()
   outletClass = '';
 
+  private scrollTop: number = 0;
+
   /** Whether or not the current tab should be syncronized with the angular router using a query parameter */
   @Input()
   set linkRouter(v: any) {
@@ -167,12 +178,18 @@ export class SfngTabGroupComponent implements AfterContentInit, AfterViewInit, O
 
           this.portalOutlet?.detach();
 
-          const newOutletPortal = this.createTabOutlet(activeTab.tabContent.portal, animationDirection);
+          const newOutletPortal = this.createTabOutlet(activeTab, animationDirection);
           this.activeTabIndex = change;
+          this.tabContentScroll.next({
+            scrollTop: 0,
+            previousScrollTop: this.scrollTop,
+          })
 
+          this.scrollTop = 0;
 
           this.tabActivate$.next(activeTab.id);
           this.portalOutlet?.attach(newOutletPortal);
+
           this.repositionTabBar();
 
           if (this._linkRouter) {
@@ -276,17 +293,32 @@ export class SfngTabGroupComponent implements AfterContentInit, AfterViewInit, O
     })
   }
 
-  private createTabOutlet(contentPortal: TemplatePortal<any>, animationDir: 'left' | 'right'): ComponentPortal<TabOutletComponent> {
+  private createTabOutlet(tab: SfngTabComponent, animationDir: 'left' | 'right'): ComponentPortal<TabOutletComponent> {
     const injector = Injector.create({
       providers: [
         {
           provide: TAB_PORTAL,
-          useValue: contentPortal,
+          useValue: tab.tabContent!.portal,
         },
         {
           provide: TAB_ANIMATION_DIRECTION,
           useValue: animationDir,
         },
+        {
+          provide: TAB_SCROLL_HANDLER,
+          useValue: (e: Event) => {
+            const newScrollTop = (e.target as HTMLElement).scrollTop;
+
+            tab.tabContentScroll.next(e);
+            this.tabContentScroll.next({
+              event: e,
+              scrollTop: newScrollTop,
+              previousScrollTop: this.scrollTop,
+            });
+
+            this.scrollTop = newScrollTop;
+          }
+        },
       ],
       parent: this.injector,
       name: 'TabOutletInjectot',

modules/portmaster/projects/safing/ui/src/lib/tabs/tab.ts

@@ -2,14 +2,17 @@ import { animate, style, transition, trigger } from "@angular/animations";
 import { ListKeyManagerOption } from "@angular/cdk/a11y";
 import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import { CdkPortalOutlet, TemplatePortal } from "@angular/cdk/portal";
-import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, Directive, Inject, InjectionToken, Input, TemplateRef, ViewChild, ViewContainerRef } from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, Directive, EventEmitter, Inject, InjectionToken, Input, Output, TemplateRef, ViewChild, ViewContainerRef } from "@angular/core";
 
 /** TAB_PORTAL is the injection token used to inject the TabContentDirective portal into TabOutletComponent */
 export const TAB_PORTAL = new InjectionToken<TemplatePortal>('TAB_PORTAL');
 
 /** TAB_ANIMATION_DIRECTION is the injection token used to control the :enter animation origin of TabOutletComponent */
 export const TAB_ANIMATION_DIRECTION = new InjectionToken<'left' | 'right'>('TAB_ANIMATION_DIRECTION');
 
+/** TAB_SCROLL_HANDLER is called by the SfngTabOutletComponent when a scroll event occurs. */
+export const TAB_SCROLL_HANDLER = new InjectionToken<(_: Event) => void>('TAB_SCROLL_HANDLER')
+
 /**
  * Structural directive (*sfngTabContent) to defined lazy-loaded tab content.
  */
@@ -60,6 +63,10 @@ export class SfngTabComponent implements ListKeyManagerOption {
   get warning() { return this._warning }
   private _warning = false;
 
+  /** Emits when the tab content is scrolled */
+  @Output()
+  tabContentScroll = new EventEmitter<Event>();
+
   /** Whether or not the tab is currently disabled. */
   @Input()
   set disabled(v: any) {
@@ -74,14 +81,15 @@ export class SfngTabComponent implements ListKeyManagerOption {
   getLabel() { return this.title }
 }
 
+
 /**
  * A simple wrapper component around CdkPortalOutlet to add nice
  * move animations.
  */
 @Component({
   selector: 'sfng-tab-outlet',
   template: `
-    <div [@moveInOut]="{value: _appAnimate, params: {in: in, out: out}}" class="flex flex-col overflow-auto {{ outletClass }}">
+    <div [@moveInOut]="{value: _appAnimate, params: {in: in, out: out}}" class="flex flex-col overflow-auto {{ outletClass }}" (scroll)="onTabContentScroll($event)">
       <ng-template [cdkPortalOutlet]="portal"></ng-template>
     </div>
   `,
@@ -133,12 +141,19 @@ export class TabOutletComponent implements AfterViewInit {
     return this._animateDirection == 'left' ? '-100%' : '100%'
   }
 
+  onTabContentScroll(event: Event) {
+    if (!!this.scrollHandler) {
+      this.scrollHandler(event)
+    }
+  }
+
   @ViewChild(CdkPortalOutlet, { static: true })
   portalOutlet!: CdkPortalOutlet;
 
   constructor(
     @Inject(TAB_PORTAL) public portal: TemplatePortal<any>,
     @Inject(TAB_ANIMATION_DIRECTION) public _animateDirection: 'left' | 'right',
+    @Inject(TAB_SCROLL_HANDLER) public scrollHandler: (_: Event) => void,
     private cdr: ChangeDetectorRef
   ) { }
 

modules/portmaster/src/app/app.component.html

@@ -6,10 +6,11 @@
 
 <app-side-dash class="flex-shrink-0" style="z-index: 100"
   [ngClass]="{'absolute top-0 left-16 bg-gray-1002 h-full shadow-2xl': sideDashOverlay, 'relative': !sideDashOverlay}"
-  *ngIf="sideDashStatus === 'expanded'" [@fadeIn] [@fadeOut]>
+  *ngIf="sideDashStatus === 'expanded'" [@fadeIn] (@fadeIn.done)="windowResizeChange.next()" [@fadeOut]
+  (@fadeOut.done)="windowResizeChange.next()">
 </app-side-dash>
 
-<div class="main">
+<div class="main" #mainContent>
   <router-outlet></router-outlet>
 </div>
 

modules/portmaster/src/app/app.component.ts

@@ -1,10 +1,10 @@
 import { Overlay } from '@angular/cdk/overlay';
-import { ChangeDetectorRef, Component, HostListener, NgZone, OnInit } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, HostListener, NgZone, OnInit, Renderer2, ViewChild } from '@angular/core';
 import { Params, Router } from '@angular/router';
 import { PortapiService } from '@safing/portmaster-api';
 import { OverlayStepper, SfngDialogService, StepperRef } from '@safing/ui';
-import { BehaviorSubject, combineLatest, Subject } from 'rxjs';
-import { debounceTime, filter, map, mergeMap, skip, startWith, take } from 'rxjs/operators';
+import { BehaviorSubject, merge, Subject } from 'rxjs';
+import { debounceTime, filter, mergeMap, skip, startWith, take } from 'rxjs/operators';
 import { IntroModule } from './intro';
 import { NotificationsService, UIStateService } from './services';
 import { ActionIndicatorService } from './shared/action-indicator';
@@ -21,7 +21,7 @@ import { SfngNetquerySearchOverlayComponent } from './shared/netquery/search-ove
     fadeOutAnimation,
   ]
 })
-export class AppComponent implements OnInit {
+export class AppComponent implements OnInit, AfterViewInit {
   readonly connected = this.portapi.connected$.pipe(
     debounceTime(250),
     startWith(false)
@@ -41,22 +41,26 @@ export class AppComponent implements OnInit {
   private sideDashOpen = new BehaviorSubject<boolean>(false);
 
   /** Used to emit when the window size changed */
-  private windowResizeChange = new Subject<void>();
+  windowResizeChange = new Subject<void>();
 
   get sideDashOpen$() { return this.sideDashOpen.asObservable() }
 
   get showOverlay$() { return this.exitService.showOverlay$ }
 
   get onContentSizeChange$() {
-    return combineLatest([
+    return merge(
       this.windowResizeChange,
-      this.sideDashOpen,
-    ]).pipe(
-      debounceTime(100),
-      map(([_, sideDashOpen]) => sideDashOpen)
+      this.sideDashOpen$
     )
+      .pipe(
+        startWith(undefined),
+        debounceTime(100),
+      )
   }
 
+  @ViewChild('mainContent', { read: ElementRef, static: true })
+  mainContent!: ElementRef<HTMLDivElement>;
+
   @HostListener('window:resize')
   onWindowResize() {
     this.windowResizeChange.next();
@@ -93,6 +97,7 @@ export class AppComponent implements OnInit {
     private dialog: SfngDialogService,
     private overlay: Overlay,
     private stateService: UIStateService,
+    private renderer2: Renderer2,
   ) {
     (window as any).portapi = portapi;
   }
@@ -115,6 +120,38 @@ export class AppComponent implements OnInit {
   }
 
   ngOnInit() {
+    // default breakpoints used by tailwindcss
+    const minContentWithBp = [
+      640,  // sfng-sm:
+      768,  // sfng-md:
+      1024, // sfng-lg:
+      1280, // sfng-xl:
+      1536  // sfng-2xl:
+    ]
+
+    // prepare our breakpoint listeners and add the classes to our main element
+    merge(
+      this.windowResizeChange,
+      this.sideDashOpen$
+    )
+      .pipe(
+        startWith(undefined),
+        debounceTime(100),
+      )
+      .subscribe(() => {
+        const rect = (this.mainContent.nativeElement as HTMLElement).getBoundingClientRect();
+
+        minContentWithBp.forEach((bp, idx) => {
+          if (rect.width >= bp) {
+            this.renderer2.addClass(this.mainContent.nativeElement, `min-width-${bp}px`)
+          } else {
+            this.renderer2.removeClass(this.mainContent.nativeElement, `min-width-${bp}px`)
+          }
+        })
+
+        this.changeDetectorRef.markForCheck();
+      })
+
     // force a reload of the current route if we reconnected to
     // portmaster. This ensures we'll refresh any data that's currently
     // displayed.
@@ -160,6 +197,10 @@ export class AppComponent implements OnInit {
     })
   }
 
+  ngAfterViewInit(): void {
+    this.sideDashOpen.next(this.sideDashStatus !== 'collapsed')
+  }
+
   showIntro(): StepperRef {
     const stepperRef = this.overlayStepper.create(IntroModule.Stepper)