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

1. LayoutService: Delete isDashboard. 2. Navbar: fix a bug with class add and remove. 3. Role-users: Add new search-input. 4. Modal make title h5

This commit is contained in:
Konstantinos Triantafyllou 2022-04-07 01:09:49 +03:00
parent 8205f303a7
commit 510f4c56ba
8 changed files with 56 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,11 +35,6 @@ export class LayoutService {
*/
private isSmallScreenSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
/**
* Add isDashboard: false on data of route config, if page is for a stakeholder but not for dashboard.
*/
private isDashboardSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
/**
* Add activeMenuItem: string on data of route config, if page should activate a specific MenuItem and route url does not match.
*/
@ -90,12 +85,6 @@ export class LayoutService {
} else {
this.setSmallScreen(false);
}
if (data['isDashboard'] !== undefined &&
data['isDashboard'] === false) {
this.setDashboard(false);
} else {
this.setDashboard(true);
}
if (data['activeMenuItem'] !== undefined &&
data['activeMenuItem'] !== null) {
this.setActiveMenuItem(data['activeMenuItem']);
@ -147,14 +136,6 @@ export class LayoutService {
this.isFrontPageSubject.next(value);
}
get isDashboard(): Observable<boolean> {
return this.isDashboardSubject.asObservable();
}
setDashboard(value: boolean) {
this.isDashboardSubject.next(value);
}
get isSmallScreen(): boolean {
return this.isSmallScreenSubject.getValue();
}

18
dashboard/sharedComponents/sidebar/sideBar.component.html
View File

@ -1,6 +1,6 @@
<aside id="sidebar_main">
<div id="sidebar_content">
<div *ngIf="items.length > 0" class="menu_section uk-margin-xlarge-top">
<div *ngIf="items.length > 0" class="menu_section uk-margin-xlarge-top" style="min-height: 30vh">
<div *ngIf="items[activeIndex]" class="active" [style]="'--index: ' + activeIndex + '; --size: ' + (items[activeIndex].icon?'40px':0)"></div>
<ul class="uk-list uk-nav-parent-icon" uk-nav>
<ng-template ngFor [ngForOf]="items" let-item let-i="index">
@ -12,7 +12,7 @@
[queryParams]=item.params [queryParamsHandling]="queryParamsHandling">
<div class="uk-flex uk-flex-middle uk-flex-center">
<div *ngIf="item.icon" class="uk-width-auto">
<icon class="menu-icon" [svg]="item.icon" [flex]="true"></icon>
<icon class="menu-icon" [customClass]="item.icon.class" [name]="item.icon.name" [svg]="item.icon.svg" [flex]="true"></icon>
</div>
<span *ngIf="open || !item.icon" [class.uk-text-small]="!open" class="uk-width-expand uk-text-truncate uk-margin-small-left">{{item.title}}</span>
</div>
@ -22,15 +22,17 @@
</ul>
</div>
<ng-template [ngIf]="specialMenuItem">
<div class="special_section uk-margin-large-top">
<div class="menu_section uk-margin-large-top">
<ul class="uk-list">
<li [class.uk-active]="isTheActiveUrl(specialMenuItem.route)">
<a [routerLink]="specialMenuItem.route" [queryParams]="specialMenuItem.params"
[queryParamsHandling]="queryParamsHandling" class="uk-flex uk-flex-center uk-flex-middle uk-flex-wrap">
<span [class.uk-display-block]="!open" [innerHTML]="satinizeHTML(specialMenuItem.icon)"></span>
<span [ngClass]="specialMenuItem.customClass" class="uk-text-center"
[class.uk-margin-small-left]="open" [class.uk-margin-small-top]="!open"
[class.uk-text-small]="!open">{{specialMenuItem.title}}</span>
[queryParamsHandling]="queryParamsHandling">
<div class="uk-flex uk-flex-middle uk-flex-center">
<div *ngIf="specialMenuItem.icon" class="uk-width-auto">
<icon class="menu-icon" [customClass]="specialMenuItem.icon.class" [name]="specialMenuItem.icon.name" [svg]="specialMenuItem.icon.svg" [flex]="true"></icon>
</div>
<span *ngIf="open || !specialMenuItem.icon" [class.uk-text-small]="!open" class="uk-width-expand uk-text-truncate uk-margin-small-left">{{specialMenuItem.title}}</span>
</div>
</a>
</li>
</ul>

13
dashboard/users/role-users/role-users.component.html
View File

@ -6,7 +6,7 @@
<div *ngIf="loadActive || loadPending" class="uk-position-center">
<loading></loading>
</div>
<div class="uk-grid uk-margin-medium-bottom" uk-grid>
<div class="uk-grid uk-margin-medium-bottom uk-margin-top" uk-grid>
<div class="uk-flex uk-flex-left@m uk-flex-center uk-width-expand">
<ul class="uk-subnav uk-subnav-pill">
<li [class.uk-active]="showCurrent" (click)="showCurrent = true">
@ -17,13 +17,12 @@
</li>
</ul>
</div>
<div [class.uk-invisible]="loadActive || loadPending"
class="uk-width-auto@m uk-width-1-1 uk-grid uk-flex-middle uk-flex-right@m uk-flex-center uk-margin-remove-left" uk-grid>
<div *ngIf="showCurrent" search-input [control]="filterForm.get('active')" [showSearch]="false" [placeholder]="'Search ' + role + 's'"
[bordered]="true" colorClass="uk-text-secondary">
<div class="uk-width-expand@m uk-width-1-1 uk-grid uk-flex-middle uk-flex-right@m uk-flex-center uk-margin-remove-left" uk-grid>
<div *ngIf="showCurrent" [disabled]="loadActive" search-input class="uk-width-expand@l uk-width-1-1"
[searchControl]="filterForm.get('active')" [expandable]="true" [placeholder]="'Search ' + role + 's'" searchInputClass="outer">
</div>
<div *ngIf="!showCurrent" search-input [control]="filterForm.get('active')" [showSearch]="false" [placeholder]="'Search invitations'"
[bordered]="true" colorClass="uk-text-secondary">
<div *ngIf="!showCurrent" [disabled]="loadPending" search-input class="uk-width-expand@l uk-width-1-1"
[searchControl]="filterForm.get('pending')" [expandable]="true" [placeholder]="'Search invitations'" searchInputClass="outer">
</div>
<div>
<button *ngIf="exists" class="uk-button uk-button-default uk-text-primary uk-flex uk-flex-middle" [attr.uk-tooltip]="inviteDisableMessage"

10
sharedComponents/menu.ts
View File

@ -1,3 +1,9 @@
export interface Icon {
name?: string,
svg?: string,
class?: string
}
export class MenuItem {
_id: string = ""; // for root menu in order to close the dropdown when clicked
title: string = "";
@ -11,12 +17,12 @@ export class MenuItem {
params: any = {};
fragment: string;
items: MenuItem[] = [];
icon: string;
icon: Icon;
open: boolean;
customClass: string = null;
isFeatured: boolean;
constructor(id: string, title: string, url: string, route: string, needsAuthorization: boolean, entitiesRequired: string[], routeRequired: string[], params, icon=null, fragment = null, customClass = null, routeActive = null) {
constructor(id: string, title: string, url: string, route: string, needsAuthorization: boolean, entitiesRequired: string[], routeRequired: string[], params, icon: Icon = null, fragment = null, customClass = null, routeActive = null) {
this._id = id;
this.title = title;
this.url = url;

2
sharedComponents/navigationBar.component.html
View File

@ -276,7 +276,7 @@
</ng-container>
</a>
<a *ngIf="header.url" [href]="header.url" [class.uk-padding-remove]="!isHeaderLeft"
class="uk-logo uk-navbar-item uk-text-center uk-text-bold" [class..uk-margin-medium-left]="!mobile">
class="uk-logo uk-navbar-item uk-text-center uk-text-bold" [class.uk-margin-medium-left]="!mobile">
<img *ngIf="(mobile && header.logoSmallUrl) || (!mobile && header.logoUrl)"
[src]="!mobile?header.logoUrl:header.logoSmallUrl"
[alt]="header.title">

42
sharedComponents/search-input/search-input.component.ts
View File

@ -16,20 +16,22 @@ import {InputComponent} from "../input/input.component";
@Component({
selector: '[search-input]',
template: `
<div #searchInput class="search-input" [class.collapsed]="hidden" [ngClass]="searchInputClass">
<div class="uk-flex uk-flex-middle">
<div class="uk-width-expand">
<div [class.uk-hidden]="hidden" #input input inputClass="search" [placeholder]="{label: placeholder, static: true}" [(value)]="value"
[disabled]="disabled" [formInput]="searchControl"></div>
</div>
<div [class.uk-hidden]="!searchControl.value" class="uk-width-auto">
<a class="uk-link-text" (click)="reset()">
<icon name="close" [flex]="true"></icon>
</a>
</div>
<div class="uk-width-auto">
<div class="search-icon" [class.disabled]="disabled" (click)="search($event)">
<icon name="search" [flex]="true" ratio="1.3"></icon>
<div *ngIf="searchControl || value" class="uk-flex uk-flex-right uk-width-1-1">
<div #searchInput class="search-input" [class.collapsed]="hidden" [ngClass]="searchInputClass">
<div class="uk-flex uk-flex-middle">
<div class="uk-width-expand">
<div [class.uk-hidden]="hidden" #input input inputClass="search" [placeholder]="{label: placeholder, static: true}" [(value)]="value"
[disabled]="disabled" [formInput]="searchControl"></div>
</div>
<div [class.uk-hidden]="!searchControl.value" class="uk-width-auto">
<a class="uk-link-text" (click)="reset()">
<icon name="close" [flex]="true"></icon>
</a>
</div>
<div class="uk-width-auto">
<div class="search-icon" [class.disabled]="disabled" (click)="search($event)">
<icon name="search" [flex]="true" ratio="1.3"></icon>
</div>
</div>
</div>
</div>
@ -53,7 +55,7 @@ export class SearchInputComponent implements OnInit {
@HostListener('document:click', ['$event'])
click(event) {
if(event.isTrusted && this.expandable) {
if(event.isTrusted && this.expandable && !this.disabled) {
this.expand(this.searchInput && this.searchInput.nativeElement.contains(event.target));
}
}
@ -71,11 +73,13 @@ export class SearchInputComponent implements OnInit {
}
public search(event) {
if(this.expandable) {
this.expand(!this.expanded);
event.stopPropagation();
if(!this.disabled) {
if (this.expandable) {
this.expand(!this.expanded);
event.stopPropagation();
}
this.searchEmitter.emit();
}
this.searchEmitter.emit();
}
public reset() {

10
utils/modal/alert.ts
View File

@ -10,17 +10,19 @@ declare var UIkit: any;
<div class="uk-modal-dialog uk-modal-body uk-animation-fast uk-margin-medium-bottom uk-text-left"
[ngClass]="classBody">
<div [ngClass]="classTitle" class="uk-modal-title" [hidden]=!alertHeader>
<button class="uk-modal-close-default uk-float-right" (click)='cancel()' uk-close></button>
<h4 class="modal-title">{{alertTitle}}</h4>
<button class="uk-close uk-icon uk-modal-close-default uk-float-right" (click)='cancel()'>
<icon name="close" ratio="1.5"></icon>
</button>
<h5>{{alertTitle}}</h5>
</div>
<div class="uk-margin">
<div *ngIf="message" [hidden]=!alertMessage [innerHTML]="message | safeHtml"></div>
<ng-content></ng-content>
</div>
<div class="uk-grid uk-flex uk-flex-middle">
<label *ngIf="choice" class="uk-width-1-2 checkbox">
<label *ngIf="choice" class="uk-width-1-2">
<input type="checkbox" [(ngModel)]="select">
<span class="uk-margin-small-left" style="font-weight: normal;">Don't show this message again</span>
<span class="uk-margin-small-left">Don't show this message again</span>
</label>
<div [ngClass]="(choice)?'uk-width-1-2':'uk-width-1-1'">
<div *ngIf="alertFooter" class="uk-flex-right uk-grid uk-grid-small" uk-grid>

3
utils/modal/alertModal.module.ts
View File

@ -5,9 +5,10 @@ import { FormsModule } from '@angular/forms';
import {AlertModal} from './alert';
import {ModalModule} from './modal.module';
import {SafeHtmlPipeModule} from "../pipes/safeHTMLPipe.module";
import {IconsModule} from "../icons/icons.module";
@NgModule({
imports: [CommonModule, FormsModule, ModalModule, SafeHtmlPipeModule],
imports: [CommonModule, FormsModule, ModalModule, SafeHtmlPipeModule, IconsModule],
declarations: [
AlertModal
],