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.

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);

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);
   }

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() {

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"

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;
   }
 }

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>

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'
+  }
+}

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 {}

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 = '';
 }

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'">
+      <div [class.uk-slider-container-tabs]="position === 'horizontal'" [class.uk-border-bottom]="border && position === 'horizontal'">
-        <ul #tabsElement class="uk-tab" [class.uk-flex-nowrap]="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"
+            [attr.uk-switcher]="type === 'static'?('connect:' + connect):null"
-            [ngClass]="'uk-flex-' + flexPosition">
+            [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
+      <slider-arrow *ngIf="position === 'horizontal' && arrows" type="previous"></slider-arrow>
-          uk-icon="chevron-left"></span></a>
+      <slider-arrow *ngIf="position === 'horizontal' && arrows" type="next"></slider-arrow>
-      <a *ngIf="position === 'horizontal'" class="uk-position-center-right uk-blur-background" uk-slider-item="next"><span
-          uk-icon="chevron-right"></span></a>
     </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 => {
+          slider.slides.forEach((item, index) => {
-            item.classList.remove('uk-active');
+            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);

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]
 })