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.

This commit is contained in:
Konstantinos Triantafyllou 2023-02-09 12:09:49 +02:00
parent 5454509b55
commit 1e56ef66ec
11 changed files with 115 additions and 42 deletions

View File

@ -22,24 +22,24 @@ declare var ResizeObserver;
<div [class.uk-hidden]="!isBrowser" id="page_content_sticky_footer" #sticky_footer <div [class.uk-hidden]="!isBrowser" id="page_content_sticky_footer" #sticky_footer
class="uk-tile-default uk-blur-background"> class="uk-tile-default uk-blur-background">
<div class="uk-container uk-container-large"> <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> <ng-content select="[sticky_footer]"></ng-content>
</div> </div>
</div> </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')"> [attr.style]="'margin-top: '+(footer_height? '-'+footer_height+'px': '0')">
<div class="uk-container uk-container-large"> <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"> <div class="header">
<ng-content select="[header]"></ng-content> <ng-content select="[header]"></ng-content>
</div> </div>
</div> </div>
</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-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"> <div class="actions">
<ng-content select="[actions]"></ng-content> <ng-content select="[actions]"></ng-content>
</div> </div>
@ -47,13 +47,13 @@ declare var ResizeObserver;
</div> </div>
</div> </div>
<div id="page_content_inner" class="uk-container uk-container-large"> <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> <ng-content select="[inner]"></ng-content>
</div> </div>
</div> </div>
<div id="page_content_footer" #footer> <div id="page_content_footer" #footer>
<div class="uk-container uk-container-large"> <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> <ng-content select="[footer]"></ng-content>
</div> </div>
</div> </div>
@ -64,8 +64,11 @@ declare var ResizeObserver;
export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy { export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
@Input() @Input()
public headerSticky: boolean = false; public headerSticky: boolean = false;
@Input()
public border: boolean = true;
public offset: number; public offset: number;
public shouldSticky: boolean = true; public shouldSticky: boolean = true;
public isMobile: boolean = false;
@ViewChild('header') header: ElementRef; @ViewChild('header') header: ElementRef;
@ViewChild('actions') actions: ElementRef; @ViewChild('actions') actions: ElementRef;
public footer_height: number = 0; public footer_height: number = 0;
@ -74,6 +77,7 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
header: null, header: null,
footer: null footer: null
} }
public isStickyActive: boolean = false;
subscriptions = []; subscriptions = [];
constructor(private layoutService: LayoutService, private cdr: ChangeDetectorRef, 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.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
this.stickyBugWorkaround(); this.stickyBugWorkaround();
} }
this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => {
this.isMobile = isMobile;
this.cdr.detectChanges();
}));
} }
get isBrowser() { get isBrowser() {
return this.platformId === 'browser'; return this.platformId === 'browser';
} }
get isStickyActive() {
return this.sticky.header?.isActive;
}
ngAfterViewInit() { ngAfterViewInit() {
if (typeof document !== "undefined") { if (typeof document !== "undefined") {
this.observeStickyFooter(); this.observeStickyFooter();
@ -103,6 +107,14 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
media: '@m', media: '@m',
offset: this.offset 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) { if (this.sticky_footer) {
let footer_offset = this.calcStickyFooterOffset(this.sticky_footer.nativeElement); let footer_offset = this.calcStickyFooterOffset(this.sticky_footer.nativeElement);

View File

@ -46,6 +46,7 @@ export class LayoutService {
private isFrontPageSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false); private isFrontPageSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
/** /**
* Add isSmallScreen: true on data of route config, if screen is small. * Add isSmallScreen: true on data of route config, if screen is small.
* @deprecated
*/ */
private isSmallScreenSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false); private isSmallScreenSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
/** /**
@ -233,10 +234,16 @@ export class LayoutService {
this.replaceHeaderSubject.next(value); this.replaceHeaderSubject.next(value);
} }
/**
* @deprecated
* */
get isSmallScreen(): boolean { get isSmallScreen(): boolean {
return this.isSmallScreenSubject.getValue(); return this.isSmallScreenSubject.getValue();
} }
/**
* @deprecated
* */
setSmallScreen(value: boolean) { setSmallScreen(value: boolean) {
this.isSmallScreenSubject.next(value); this.isSmallScreenSubject.next(value);
} }

View File

@ -142,9 +142,6 @@ export class UserMiniComponent implements OnInit, OnChanges {
if (this.user) { if (this.user) {
this.userManagementService.logout(); this.userManagementService.logout();
} }
this.loggedIn = false;
this.isAuthorized = false;
this.user = new User();
} }
logIn() { logIn() {

View File

@ -94,7 +94,7 @@ declare var ResizeObserver;
</div> </div>
</div> </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-tabs type="scrollable" position="horizontal">
<slider-tab tabId="entities_m" tabTitle="1. Entities"></slider-tab> <slider-tab tabId="entities_m" tabTitle="1. Entities"></slider-tab>
<slider-tab tabId="inherited-and-inferred-attributes_m" <slider-tab tabId="inherited-and-inferred-attributes_m"

View File

@ -124,7 +124,6 @@ export class UserManagementService {
public logout() { public logout() {
this.setRedirectUrl(); this.setRedirectUrl();
Session.removeUser(); Session.removeUser();
this.getUserInfoSubject.next(null);
window.location.href = properties.logoutUrl + "?redirect=" + this.redirectUrl; window.location.href = properties.logoutUrl + "?redirect=" + this.redirectUrl;
} }
} }

View File

@ -1,12 +1,6 @@
<div *ngIf="showMenu && activeHeader"> <div *ngIf="showMenu && activeHeader">
<div id="main-menu-small" class="uk-hidden@m"> <div id="main-menu-small" class="uk-hidden@m">
<nav class="uk-navbar-container uk-navbar" uk-navbar="delay-hide: 400"> <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'> <div *ngIf="!onlyTop || userMenu" class="uk-navbar-left" [class.uk-light]='activeHeader.darkBg'>
<a class="uk-navbar-toggle" href="#tm-mobile" uk-toggle> <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> <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" <user-mini *ngIf="userMenu" [user]="user"
[userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl [userMenuItems]=userMenuItems [logInUrl]=properties.loginUrl [logOutUrl]=properties.logoutUrl
[cookieDomain]=properties.cookieDomain></user-mini> [cookieDomain]=properties.cookieDomain></user-mini>
<div class="uk-visible@l"> <div class="uk-visible@m">
<ng-content select="[extra-m]"></ng-content> <ng-content select="[extra-m]"></ng-content>
</div> </div>
</div> </div>
@ -320,7 +314,7 @@
<img *ngIf="(mobile && activeHeader.logoSmallUrl) || (!mobile && activeHeader.logoUrl)" <img *ngIf="(mobile && activeHeader.logoSmallUrl) || (!mobile && activeHeader.logoUrl)"
[src]="!mobile?activeHeader.logoUrl:activeHeader.logoSmallUrl" [src]="!mobile?activeHeader.logoUrl:activeHeader.logoSmallUrl"
[alt]="activeHeader.title"> [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)"> <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"> <div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="activeHeader.title">
<p class="uk-margin-remove">{{activeHeader.title}}</p> <p class="uk-margin-remove">{{activeHeader.title}}</p>
@ -332,7 +326,7 @@
<img *ngIf="(mobile && activeHeader.logoSmallUrl) || (!mobile && activeHeader.logoUrl)" <img *ngIf="(mobile && activeHeader.logoSmallUrl) || (!mobile && activeHeader.logoUrl)"
[src]="!mobile?activeHeader.logoUrl:activeHeader.logoSmallUrl" [src]="!mobile?activeHeader.logoUrl:activeHeader.logoSmallUrl"
[alt]="activeHeader.title"> [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)"> <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"> <div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="activeHeader.title">
<p class="uk-margin-remove">{{activeHeader.title}}</p> <p class="uk-margin-remove">{{activeHeader.title}}</p>

View File

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

View File

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

View File

@ -15,4 +15,10 @@ export class SliderTabComponent {
public disabled: boolean = false; public disabled: boolean = false;
@Input() @Input()
public align: 'left' | 'right' = 'left'; public align: 'left' | 'right' = 'left';
@Input()
public routerLink: any[] | string | null | undefined = null;
@Input()
public queryParams: any = null;
@Input()
public customClass: string = '';
} }

View File

@ -20,12 +20,12 @@ declare var UIkit;
template: ` template: `
<div #sliderElement class="uk-position-relative" [class.uk-slider]="position === 'horizontal'" <div #sliderElement class="uk-position-relative" [class.uk-slider]="position === 'horizontal'"
[ngClass]="customClass"> [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-slider-items]="position === 'horizontal'"
[class.uk-tab-left]="position === 'left'" [class.uk-tab-right]="position === 'right'" [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'"> <ng-container *ngIf="type === 'static'">
<li *ngFor="let tab of leftTabs" class="uk-text-capitalize"> <li *ngFor="let tab of leftTabs" class="uk-text-capitalize">
<a>{{tab.title}}</a> <a>{{tab.title}}</a>
@ -33,32 +33,41 @@ declare var UIkit;
<li *ngFor="let tab of rightTabs; let i=index;" <li *ngFor="let tab of rightTabs; let i=index;"
[ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''" [ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''"
class="uk-text-capitalize"> 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> </li>
</ng-container> </ng-container>
<ng-container *ngIf="type === 'scrollable'"> <ng-container *ngIf="type === 'scrollable'">
<li *ngFor="let tab of leftTabs" class="uk-text-capitalize" [class.uk-active]="tab.active"> <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>
<li *ngFor="let tab of rightTabs; let i=index;" class="uk-text-capitalize" <li *ngFor="let tab of rightTabs; let i=index;" class="uk-text-capitalize"
[ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''" [ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''"
[class.uk-active]="tab.active"> [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>
</ng-container> </ng-container>
</ul> </ul>
</div> </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> </div>
`, `,
}) })
export class SliderTabsComponent implements AfterViewInit, OnDestroy { 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 * Scrollable = Active is defined by the active fragment of URL and position of scroll
* */ * */
@Input() @Input()
@ -84,10 +93,19 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
@Input() @Input()
public flexPosition: 'center' | 'left' | 'right' = 'left'; public flexPosition: 'center' | 'left' | 'right' = 'left';
/** /**
* Tabs custom class * Set a class above tabs
* */ * */
@Input() @Input()
public customClass: string; 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>; @ContentChildren(SliderTabComponent) tabs: QueryList<SliderTabComponent>;
@ViewChild('sliderElement') sliderElement: ElementRef; @ViewChild('sliderElement') sliderElement: ElementRef;
@ViewChild('tabsElement') tabsElement: ElementRef; @ViewChild('tabsElement') tabsElement: ElementRef;
@ -112,9 +130,12 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
let slider = UIkit.slider(this.sliderElement.nativeElement, {finite: true}); let slider = UIkit.slider(this.sliderElement.nativeElement, {finite: true});
slider.clsActive = 'uk-slider-active'; slider.clsActive = 'uk-slider-active';
slider.updateActiveClasses(); 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') { if (this.type === 'static') {
let tabs = UIkit.tab(this.tabsElement.nativeElement, {connect: this.connect}); let tabs = UIkit.tab(this.tabsElement.nativeElement, {connect: this.connect});
tabs.show(this.activeIndex); tabs.show(this.activeIndex);

View File

@ -3,9 +3,10 @@ import {CommonModule} from "@angular/common";
import {SliderTabsComponent} from "./slider-tabs.component"; import {SliderTabsComponent} from "./slider-tabs.component";
import {SliderTabComponent} from "./slider-tab.component"; import {SliderTabComponent} from "./slider-tab.component";
import {RouterModule} from "@angular/router"; import {RouterModule} from "@angular/router";
import {SliderUtilsModule} from "../slider-utils/slider-utils.module";
@NgModule({ @NgModule({
imports: [CommonModule, RouterModule], imports: [CommonModule, RouterModule, SliderUtilsModule],
declarations: [SliderTabsComponent, SliderTabComponent], declarations: [SliderTabsComponent, SliderTabComponent],
exports: [SliderTabsComponent, SliderTabComponent] exports: [SliderTabsComponent, SliderTabComponent]
}) })