MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/angular-14' into explore-redesign

This commit is contained in:
Konstantinos Triantafyllou 2023-01-27 10:21:10 +02:00
parent 03b28d57d5 3acd9a6c29
commit 97426aabfe
5 changed files with 93 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
dashboard/portal/portals.component.html
View File

@ -55,11 +55,11 @@
Bulk Actions ({{getSelectedPortals().length}})
</button>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-dropdown-nav"
<ul class="uk-nav uk-dropdown-nav uk-text-capitalize"
[attr.uk-tooltip]="getSelectedPortals().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
title="Select at least one entity">
<li>
<a (click)="confirmDeleteSelectedPortals()"><i></i>Delete</a>
<a (click)="confirmDeleteSelectedPortals()">Delete</a>
</li>
</ul>
</div>
@ -67,6 +67,7 @@
</th>
<th>Name</th>
<th>Type</th>
<th>Piwik</th>
<th>Actions</th>
</tr>
</thead>
@ -81,6 +82,9 @@
<td>
<div class="type" href="#">{{check.portal.type}}</div>
</td>
<td>
<div class="name" href="#">{{check.portal.piwik}}</div>
</td>
<td>
<div class="uk-flex uk-flex-middle">
<icon class="clickable" [flex]="true" name="edit" [customClass]="'uk-text-primary'" (click)="editPortal(i)"></icon>

4
dashboard/portal/portals.component.ts
View File

@ -229,11 +229,11 @@ export class PortalsComponent implements OnInit {
public filterByType(portal: Portal): boolean {
let type = this.filterForm.get("type").value;
return type == "all" || (type == portal.type);
return type == "all" || (type === portal.type);
}
public filterPortals(portal: Portal): boolean {
return this.searchText.toString() === '' || (portal.name || portal.type).match(this.searchText) != null;
return this.searchText.toString() === '' || (portal.name + portal.type + portal.pid).match(this.searchText) != null;
}
handleUpdateError(message: string, error = null) {

115
dashboard/sharedComponents/page-content/page-content.component.ts
View File

@ -2,14 +2,15 @@ import {
AfterViewInit,
ChangeDetectorRef,
Component,
ElementRef, Inject,
ElementRef,
Inject,
Input,
OnDestroy,
OnInit, PLATFORM_ID,
OnInit,
PLATFORM_ID,
ViewChild
} from "@angular/core";
import {LayoutService} from "../sidebar/layout.service";
import {Subscription} from "rxjs";
declare var UIkit;
declare var ResizeObserver;
@ -18,8 +19,8 @@ declare var ResizeObserver;
selector: '[page-content]',
template: `
<div id="page_content">
<div [class.uk-hidden]="!isBrowser" id="page_content_sticky_footer" #sticky_footer class="uk-tile-default uk-blur-background"
[attr.uk-sticky]="'bottom: true'" [attr.offset]="footer_offset">
<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">
<ng-content select="[sticky_footer]"></ng-content>
@ -27,7 +28,6 @@ declare var ResizeObserver;
</div>
</div>
<div id="page_content_header" #header class="uk-blur-background"
[attr.uk-sticky]="(headerSticky && shouldSticky)?'media: @m':null" [attr.offset]="offset"
[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">
@ -37,8 +37,7 @@ declare var ResizeObserver;
</div>
</div>
</div>
<div id="page_content_actions" #actions class="uk-blur-background"
[attr.uk-sticky]="(!headerSticky && shouldSticky)?'media: @m':null" [attr.offset]="offset">
<div id="page_content_actions" #actions class="uk-blur-background">
<div class="uk-container uk-container-large">
<div class="uk-padding-small uk-padding-remove-vertical uk-padding-remove-right">
<div class="actions">
@ -69,43 +68,49 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
public shouldSticky: boolean = true;
@ViewChild('header') header: ElementRef;
@ViewChild('actions') actions: ElementRef;
public footer_offset: number = 0;
public footer_height: number = 0;
@ViewChild("sticky_footer") sticky_footer;
@ViewChild("sticky_footer") sticky_footer: ElementRef;
private sticky = {
header: null,
footer: null
}
subscriptions = [];
constructor(private layoutService: LayoutService, private cdr: ChangeDetectorRef,
@Inject(PLATFORM_ID) private platformId) {
}
ngOnInit() {
if (typeof document !== "undefined") {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
this.stickyBugWorkaround();
}
}
get isBrowser() {
return this.platformId === 'browser';
}
get isStickyActive() {
if (this.header && this.actions && this.shouldSticky) {
let sticky = this.headerSticky ? this.header.nativeElement : this.actions.nativeElement;
return UIkit.sticky(sticky).isActive;
} else {
return false;
}
return this.sticky.header?.isActive;
}
ngAfterViewInit() {
if (typeof document !== "undefined") {
// TODO make it smooth
// this.observeBottom();
this.observeHeader();
this.observeStickyFooter();
if (this.shouldSticky && typeof document !== 'undefined') {
this.sticky.header = UIkit.sticky((this.headerSticky ? this.header.nativeElement : this.actions.nativeElement), {
media: '@m',
offset: this.offset
});
}
if (this.sticky_footer) {
let footer_offset = this.calcStickyFooterOffset(this.sticky_footer.nativeElement);
this.sticky.footer = UIkit.sticky(this.sticky_footer.nativeElement, {bottom: true, offset: footer_offset});
}
}
}
ngOnDestroy() {
this.subscriptions.forEach(subscription => {
if (subscription instanceof (ResizeObserver || IntersectionObserver)) {
@ -113,13 +118,48 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
}
});
}
ngAfterContentChecked() {
if (this.sticky_footer && typeof document !== 'undefined') {
this.footer_offset = this.calcStickyFooterOffset(this.sticky_footer.nativeElement);
}
/**
* Workaround for sticky not update bug when sidebar is toggled.
* TODO when UIKit will be updated => remove
*
* */
stickyBugWorkaround() {
let sidebarOffset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--dashboard-sidebar-width')) -
Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--dashboard-sidebar-mini-width'));
let transitionDelay = Number.parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--dashboard-transition-delay')) * 1000;
this.subscriptions.push(this.layoutService.isOpen.subscribe(isOpen => {
if (this.sticky.header) {
if (isOpen) {
this.sticky.header.$el.style.width = Number.parseInt(this.sticky.header.$el.style.width) - sidebarOffset + 'px';
} else {
this.sticky.header.$el.style.width = Number.parseInt(this.sticky.header.$el.style.width) + sidebarOffset + 'px';
}
setTimeout(() => {
this.sticky.header.$emit();
}, transitionDelay);
}
if (this.sticky.footer) {
if (isOpen) {
this.sticky.footer.$el.style.width = Number.parseInt(this.sticky.footer.$el.style.width) - sidebarOffset + 'px';
} else {
this.sticky.footer.$el.style.width = Number.parseInt(this.sticky.footer.$el.style.width) + sidebarOffset + 'px';
}
setTimeout(() => {
this.sticky.footer.$emit();
}, transitionDelay);
}
this.cdr.detectChanges();
}));
}
/**
* @deprecated
*
* Should be smooth
*
* */
private observeBottom() {
let bottom = document.getElementById('bottom');
if (bottom) {
@ -132,12 +172,15 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
bottomObs.observe(bottom);
}
}
/**
* @deprecated
* */
private observeHeader() {
if (this.header) {
let headerObs = new IntersectionObserver(entries => {
entries.forEach(entry => {
if(entry.boundingClientRect.height > 0) {
if (entry.boundingClientRect.height > 0) {
this.layoutService.setReplaceHeader(!entry.isIntersecting);
}
})
@ -146,13 +189,13 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
headerObs.observe(this.header.nativeElement);
}
}
private observeStickyFooter() {
if (this.sticky_footer) {
let resizeObs = new ResizeObserver(entries => {
entries.forEach(entry => {
setTimeout(() => {
this.footer_offset = this.calcStickyFooterOffset(entry.target);
this.sticky.footer.offset = this.calcStickyFooterOffset(entry.target);
this.cdr.detectChanges();
});
})
@ -161,7 +204,7 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
resizeObs.observe(this.sticky_footer.nativeElement);
}
}
calcStickyFooterOffset(element) {
this.footer_height = element.offsetHeight;
return window.innerHeight - this.footer_height;

6
dashboard/sharedComponents/sidebar/layout.service.ts
View File

@ -160,7 +160,11 @@ export class LayoutService {
}));
this.setObserver();
}
get isOpen(): Observable<boolean> {
return this.openSubject.asObservable();
}
get open(): boolean {
return this.openSubject.getValue();
}

2
dashboard/sharedComponents/sidebar/sidebar-content.component.ts
View File

@ -1,4 +1,4 @@
import {Component, HostListener} from "@angular/core";
import {Component} from "@angular/core";
import {LayoutService} from "./layout.service";
@Component({