1. Simplify logout process. 2. Deprecate isSmallScreen in Layout service. 3. Make some inmprovements in slider-tabs and add slider-arrow for previous and next. 4. Navigation Bar: Remove badge and header logo info from mobiles. 5. Page Content: Fix paddings for mobiles and add events for sticky status changes.

2023-02-09 12:09:49 +02:00 · 2023-02-09 12:09:49 +02:00 · 1e56ef66ec
parent 5454509b55
commit 1e56ef66ec
11 changed files with 115 additions and 42 deletions
--- a/dashboard/sharedComponents/page-content/page-content.component.ts
+++ b/dashboard/sharedComponents/page-content/page-content.component.ts
@ -22,24 +22,24 @@ declare var ResizeObserver;
      <div [class.uk-hidden]="!isBrowser" id="page_content_sticky_footer" #sticky_footer
           class="uk-tile-default uk-blur-background">
        <div class="uk-container uk-container-large">
-          <div class="uk-padding-small uk-padding-remove-vertical">
+          <div [ngClass]="!isMobile?'uk-padding-small uk-padding-remove-vertical':''">
            <ng-content select="[sticky_footer]"></ng-content>
          </div>
        </div>
      </div>
-      <div id="page_content_header" #header class="uk-blur-background"
+      <div id="page_content_header" #header class="uk-blur-background" [class.uk-border-bottom]="border && isStickyActive"
           [attr.style]="'margin-top: '+(footer_height? '-'+footer_height+'px': '0')">
        <div class="uk-container uk-container-large">
-          <div class="uk-padding-small uk-padding-remove-vertical uk-padding-remove-right">
+          <div [ngClass]="!isMobile?'uk-padding-small uk-padding-remove-vertical uk-padding-remove-right':''">
            <div class="header">
              <ng-content select="[header]"></ng-content>
            </div>
          </div>
        </div>
      </div>
-      <div id="page_content_actions" #actions class="uk-blur-background">
+      <div id="page_content_actions" #actions class="uk-blur-background" [class.uk-border-bottom]="border && isStickyActive">
        <div class="uk-container uk-container-large">
-          <div class="uk-padding-small uk-padding-remove-vertical uk-padding-remove-right">
+          <div [ngClass]="!isMobile?'uk-padding-small uk-padding-remove-vertical uk-padding-remove-right':''">
            <div class="actions">
              <ng-content select="[actions]"></ng-content>
            </div>
@ -47,13 +47,13 @@ declare var ResizeObserver;
        </div>
      </div>
      <div id="page_content_inner" class="uk-container uk-container-large">
-        <div class="uk-padding-small uk-padding-remove-vertical">
+        <div [ngClass]="!isMobile?'uk-padding-small uk-padding-remove-vertical':''">
          <ng-content select="[inner]"></ng-content>
        </div>
      </div>
      <div id="page_content_footer" #footer>
        <div class="uk-container uk-container-large">
-          <div class="uk-padding-small uk-padding-remove-vertical">
+          <div [ngClass]="!isMobile?'uk-padding-small uk-padding-remove-vertical':''">
            <ng-content select="[footer]"></ng-content>
          </div>
        </div>
@ -64,8 +64,11 @@ declare var ResizeObserver;
 export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
  @Input()
  public headerSticky: boolean = false;
+  @Input()
+  public border: boolean = true;
  public offset: number;
  public shouldSticky: boolean = true;
+  public isMobile: boolean = false;
  @ViewChild('header') header: ElementRef;
  @ViewChild('actions') actions: ElementRef;
  public footer_height: number = 0;
@ -74,6 +77,7 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
    header: null,
    footer: null
  }
+  public isStickyActive: boolean = false;
  subscriptions = [];

  constructor(private layoutService: LayoutService, private cdr: ChangeDetectorRef,
@ -85,16 +89,16 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
      this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
      this.stickyBugWorkaround();
    }
+    this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => {
+      this.isMobile = isMobile;
+      this.cdr.detectChanges();
+    }));
  }

  get isBrowser() {
    return this.platformId === 'browser';
  }

-  get isStickyActive() {
-    return this.sticky.header?.isActive;
-  }
-
  ngAfterViewInit() {
    if (typeof document !== "undefined") {
      this.observeStickyFooter();
@ -103,6 +107,14 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
          media: '@m',
          offset: this.offset
        });
+        this.subscriptions.push(UIkit.util.on(document, 'active', '#' + this.sticky.header.$el.id, () => {
+          this.isStickyActive = true;
+          this.cdr.detectChanges();
+        }));
+        this.subscriptions.push(UIkit.util.on(document, 'inactive', '#' + this.sticky.header.$el.id, () => {
+          this.isStickyActive = false;
+          this.cdr.detectChanges();
+        }));
      }
      if (this.sticky_footer) {
        let footer_offset = this.calcStickyFooterOffset(this.sticky_footer.nativeElement);
--- a/dashboard/sharedComponents/sidebar/layout.service.ts
+++ b/dashboard/sharedComponents/sidebar/layout.service.ts
@ -46,6 +46,7 @@ export class LayoutService {
  private isFrontPageSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
  /**
   *  Add isSmallScreen: true on data of route config, if screen is small.
+   *  @deprecated
   */
  private isSmallScreenSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
  /**
@ -233,10 +234,16 @@ export class LayoutService {
    this.replaceHeaderSubject.next(value);
  }
  
+  /**
+   * @deprecated
+   * */
  get isSmallScreen(): boolean {
    return this.isSmallScreenSubject.getValue();
  }
  
+  /**
+   * @deprecated
+   * */
  setSmallScreen(value: boolean) {
    this.isSmallScreenSubject.next(value);
  }
--- a/login/userMini.component.ts
+++ b/login/userMini.component.ts
@ -142,9 +142,6 @@ export class UserMiniComponent implements OnInit, OnChanges {
    if (this.user) {
      this.userManagementService.logout();
    }
-    this.loggedIn = false;
-    this.isAuthorized = false;
-    this.user = new User();
  }
  
  logIn() {
--- a/monitor/methodology/terminology.component.ts
+++ b/monitor/methodology/terminology.component.ts
@ -94,7 +94,7 @@ declare var ResizeObserver;
 					</div>
 				</div>
 				<div>
-					<div class="uk-sticky uk-background-default uk-padding uk-padding-remove-horizontal" uk-sticky>
+					<div class="uk-sticky uk-background-default uk-padding-small uk-padding-remove-right" uk-sticky>
 						<slider-tabs type="scrollable" position="horizontal">
 							<slider-tab tabId="entities_m" tabTitle="1. Entities"></slider-tab>
 							<slider-tab tabId="inherited-and-inferred-attributes_m"
--- a/services/user-management.service.ts
+++ b/services/user-management.service.ts
@ -124,7 +124,6 @@ export class UserManagementService {
  public logout() {
    this.setRedirectUrl();
    Session.removeUser();
-    this.getUserInfoSubject.next(null);
    window.location.href = properties.logoutUrl + "?redirect=" + this.redirectUrl;
  }
 }
--- a/sharedComponents/navigationBar.component.html
+++ b/sharedComponents/navigationBar.component.html
@ -1,12 +1,6 @@
 <div *ngIf="showMenu && activeHeader">
  <div id="main-menu-small" class="uk-hidden@m">
    <nav class="uk-navbar-container uk-navbar" uk-navbar="delay-hide: 400">
-        <div
-            *ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo  && activeHeader.badge">
-          <img class="uk-position-top-left"
-               [src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
-               alt="BETA" style="height: 60px; width: 60px;">
-        </div>
        <div *ngIf="!onlyTop || userMenu" class="uk-navbar-left" [class.uk-light]='activeHeader.darkBg'>
          <a class="uk-navbar-toggle" href="#tm-mobile" uk-toggle>
            <div uk-navbar-toggle-icon="" class="uk-navbar-toggle-icon uk-icon custom-navbar-toggle-icon"></div>
@ -177,7 +171,7 @@
                <user-mini *ngIf="userMenu" [user]="user"
                           [userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl
                           [cookieDomain]=properties.cookieDomain></user-mini>
-                <div class="uk-visible@l">
+                <div class="uk-visible@m">
                  <ng-content select="[extra-m]"></ng-content>
                </div>
              </div>
@ -320,7 +314,7 @@
    <img *ngIf="(mobile && activeHeader.logoSmallUrl) || (!mobile && activeHeader.logoUrl)"
           [src]="!mobile?activeHeader.logoUrl:activeHeader.logoSmallUrl"
           [alt]="activeHeader.title">
-    <div *ngIf="activeHeader.logoInfo" [innerHTML]="activeHeader.logoInfo"></div>
+    <div *ngIf="activeHeader.logoInfo && !mobile" [innerHTML]="activeHeader.logoInfo"></div>
    <ng-container *ngIf="(mobile && !activeHeader.logoSmallUrl) || (!mobile && !activeHeader.logoUrl)">
      <div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="activeHeader.title">
        <p class="uk-margin-remove">{{activeHeader.title}}</p>
@ -332,7 +326,7 @@
    <img *ngIf="(mobile && activeHeader.logoSmallUrl) || (!mobile && activeHeader.logoUrl)"
         [src]="!mobile?activeHeader.logoUrl:activeHeader.logoSmallUrl"
         [alt]="activeHeader.title">
-    <div *ngIf="activeHeader.logoInfo" [innerHTML]="activeHeader.logoInfo"></div>
+    <div *ngIf="activeHeader.logoInfo && !mobile" [innerHTML]="activeHeader.logoInfo"></div>
    <ng-container *ngIf="(mobile && !activeHeader.logoSmallUrl) || (!mobile && !activeHeader.logoUrl)">
      <div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="activeHeader.title">
        <p class="uk-margin-remove">{{activeHeader.title}}</p>
--- a/sharedComponents/slider-utils/slider-arrow.component.ts
+++ b/sharedComponents/slider-utils/slider-arrow.component.ts
@ -0,0 +1,25 @@
+import {Component, Input} from "@angular/core";
+
+@Component({
+  selector: 'slider-arrow',
+  template: `
+    <div *ngIf="type" class="uk-slider-arrow" [ngClass]="positionClasses" [attr.uk-slider-item]="type">
+      <button class="uk-icon-button uk-icon-button-small uk-box-no-shadow uk-box-no-shadow-hover uk-border">
+        <icon [name]="icon" [flex]="true" visuallyHidden="download"></icon>
+      </button>
+    </div>
+  `
+})
+export class SliderArrowComponent {
+  @Input()
+  public type: 'previous' | 'next';
+
+
+  get positionClasses() {
+    return (this.type == 'previous')?'uk-position-center-left uk-slider-left':'uk-position-center-right uk-slider-right'
+  }
+
+  get icon() {
+    return (this.type == 'previous')?'chevron_left':'chevron_right'
+  }
+}
--- a/sharedComponents/slider-utils/slider-utils.module.ts
+++ b/sharedComponents/slider-utils/slider-utils.module.ts
@ -0,0 +1,11 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {SliderArrowComponent} from "./slider-arrow.component";
+import {IconsModule} from "../../utils/icons/icons.module";
+
+@NgModule({
+  imports: [CommonModule, IconsModule],
+  declarations: [SliderArrowComponent],
+  exports: [SliderArrowComponent]
+})
+export class SliderUtilsModule {}
--- a/sharedComponents/tabs/slider-tab.component.ts
+++ b/sharedComponents/tabs/slider-tab.component.ts
@ -15,4 +15,10 @@ export class SliderTabComponent {
  public disabled: boolean = false;
  @Input()
  public align: 'left' | 'right' = 'left';
+  @Input()
+  public routerLink: any[] | string | null | undefined = null;
+  @Input()
+  public queryParams: any = null;
+  @Input()
+  public customClass: string = '';
 }
--- a/sharedComponents/tabs/slider-tabs.component.ts
+++ b/sharedComponents/tabs/slider-tabs.component.ts
@ -20,12 +20,12 @@ declare var UIkit;
  template: `
    <div #sliderElement class="uk-position-relative" [class.uk-slider]="position === 'horizontal'"
         [ngClass]="customClass">
-      <div [class.uk-slider-container-tabs]="position === 'horizontal'">
-        <ul #tabsElement class="uk-tab" [class.uk-flex-nowrap]="position === 'horizontal'"
+      <div [class.uk-slider-container-tabs]="position === 'horizontal'" [class.uk-border-bottom]="border && position === 'horizontal'">
+        <ul #tabsElement [class.uk-flex-nowrap]="position === 'horizontal'"
            [class.uk-slider-items]="position === 'horizontal'"
            [class.uk-tab-left]="position === 'left'" [class.uk-tab-right]="position === 'right'"
-            [attr.uk-tab]="type === 'static'?('connect:' + connect):null"
-            [ngClass]="'uk-flex-' + flexPosition">
+            [attr.uk-switcher]="type === 'static'?('connect:' + connect):null"
+            [ngClass]="'uk-flex-' + flexPosition + ' ' + tabsClass">
          <ng-container *ngIf="type === 'static'">
            <li *ngFor="let tab of leftTabs" class="uk-text-capitalize">
              <a>{{tab.title}}</a>
@ -33,32 +33,41 @@ declare var UIkit;
            <li *ngFor="let tab of rightTabs; let i=index;"
                [ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''"
                class="uk-text-capitalize">
-              <a>{{tab.title}}</a>
+              <a [ngClass]="tab.customClass">{{tab.title}}</a>
+            </li>
+          </ng-container>
+          <ng-container *ngIf="type === 'dynamic'">
+            <li *ngFor="let tab of leftTabs" [class.uk-active]="tab.active" class="uk-text-capitalize">
+              <a [routerLink]="tab.routerLink" [queryParams]="tab.queryParams" [ngClass]="tab.customClass">{{tab.title}}</a>
+            </li>
+            <li *ngFor="let tab of rightTabs; let i=index;" [class.uk-active]="tab.active"
+                [ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''"
+                class="uk-text-capitalize">
+              <a [routerLink]="tab.routerLink" [queryParams]="tab.queryParams" [ngClass]="tab.customClass">{{tab.title}}</a>
            </li>
          </ng-container>
          <ng-container *ngIf="type === 'scrollable'">
            <li *ngFor="let tab of leftTabs" class="uk-text-capitalize" [class.uk-active]="tab.active">
-              <a routerLink="./" [fragment]="tab.id" queryParamsHandling="merge">{{tab.title}}</a>
+              <a routerLink="./" [fragment]="tab.id" queryParamsHandling="merge" [ngClass]="tab.customClass">{{tab.title}}</a>
            </li>
            <li *ngFor="let tab of rightTabs; let i=index;" class="uk-text-capitalize"
                [ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''"
                [class.uk-active]="tab.active">
-              <a routerLink="./" [fragment]="tab.id" queryParamsHandling="merge">{{tab.title}}</a>
+              <a routerLink="./" [fragment]="tab.id" queryParamsHandling="merge" [ngClass]="tab.customClass">{{tab.title}}</a>
            </li>
          </ng-container>
        </ul>
      </div>
-      <a *ngIf="position === 'horizontal'" class="uk-position-center-left uk-blur-background" uk-slider-item="previous"><span
-          uk-icon="chevron-left"></span></a>
-      <a *ngIf="position === 'horizontal'" class="uk-position-center-right uk-blur-background" uk-slider-item="next"><span
-          uk-icon="chevron-right"></span></a>
+      <slider-arrow *ngIf="position === 'horizontal' && arrows" type="previous"></slider-arrow>
+      <slider-arrow *ngIf="position === 'horizontal' && arrows" type="next"></slider-arrow>
    </div>
  `,
 })
 export class SliderTabsComponent implements AfterViewInit, OnDestroy {
-  //TODO now it works only for scrollable and static, to be extended for dynamic
  /**
-   * Type of tabs: Static = Uikit tabs with @connect class or selector, Dynamic = Active is defined by tabComponent.active input,
+   * Type of tabs:
+   * Static = Uikit tabs with @connect class or selector
+   * Dynamic = Active is defined by tabComponent's active Input
   * Scrollable = Active is defined by the active fragment of URL and position of scroll
   * */
  @Input()
@ -84,10 +93,19 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
  @Input()
  public flexPosition: 'center' | 'left' | 'right' = 'left';
  /**
-   * Tabs custom class
+   * Set a class above tabs
   * */
  @Input()
  public customClass: string;
+  /**
+   * Tabs class
+   * */
+  @Input()
+  public tabsClass: string = 'uk-tab';
+  @Input()
+  public border: boolean = true;
+  @Input()
+  public arrows: boolean = true;
  @ContentChildren(SliderTabComponent) tabs: QueryList<SliderTabComponent>;
  @ViewChild('sliderElement') sliderElement: ElementRef;
  @ViewChild('tabsElement') tabsElement: ElementRef;
@ -112,9 +130,12 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
          let slider = UIkit.slider(this.sliderElement.nativeElement, {finite: true});
          slider.clsActive = 'uk-slider-active';
          slider.updateActiveClasses();
-          slider.slides.forEach(item => {
-            item.classList.remove('uk-active');
+          slider.slides.forEach((item, index) => {
+            if(!this.tabs.get(index).active) {
+              item.classList.remove('uk-active');
+            }
          });
+          console.log(slider);
          if (this.type === 'static') {
            let tabs = UIkit.tab(this.tabsElement.nativeElement, {connect: this.connect});
            tabs.show(this.activeIndex);
--- a/sharedComponents/tabs/slider-tabs.module.ts
+++ b/sharedComponents/tabs/slider-tabs.module.ts
@ -3,9 +3,10 @@ import {CommonModule} from "@angular/common";
 import {SliderTabsComponent} from "./slider-tabs.component";
 import {SliderTabComponent} from "./slider-tab.component";
 import {RouterModule} from "@angular/router";
+import {SliderUtilsModule} from "../slider-utils/slider-utils.module";

@NgModule({
-  imports: [CommonModule, RouterModule],
+  imports: [CommonModule, RouterModule, SliderUtilsModule],
  declarations: [SliderTabsComponent, SliderTabComponent],
  exports: [SliderTabsComponent, SliderTabComponent]
 })