[Library|Trunk]

Layout Changes according to the new theme (containers margins, header fonts size)

Search: Update search filters layout: don't crop the text with css, but count the characters

LayoutService: create a mock method



git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@56677 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
argiro.kokogiannaki 2019-07-22 14:15:23 +00:00
parent 3bf902b5a0
commit 8101d3ef2a
18 changed files with 96 additions and 86 deletions

View File

@ -8,7 +8,7 @@ import {HelperService} from "../utils/helper/helper.service";
@Component({
selector: 'deposit-first-page',
template: `
<div class="uk-section uk-margin-top uk-padding-remove-bottom">
<div class="uk-section uk-padding-remove-bottom uk-padding-remove-top">
<div class="communityPanelBackground uk-margin-top uk-padding-small">
<div class="uk-align-center uk-container uk-container-large uk-margin-large-top uk-margin-large-bottom">
<div class="uk-text-center font-41">
@ -59,9 +59,9 @@ import {HelperService} from "../utils/helper/helper.service";
</form>
</div>
<div class="uk-width-1-4 uk-text-right">
<hr class="uk-divider-vertical">
<div>OR</div>
<hr class="uk-divider-vertical">
<!-- <hr class="uk-divider-vertical">-->
<div class=" uk-margin-top uk-margin-bottom uk-padding-small">OR</div>
<!-- <hr class="uk-divider-vertical">-->
</div>
<div>
@ -78,7 +78,7 @@ import {HelperService} from "../utils/helper/helper.service";
</div>
<div class="uk-section tm-middle uk-container uk-container-large uk-margin-small-top uk-padding-remove-top uk-padding-remove-bottom">
<div class="uk-container uk-container-large uk-margin-bottom border-grey uk-margin-medium-top">
<div class="uk-container uk-container-large uk-margin-bottom communityBorder uk-margin-medium-top">
<div class="uk-grid uk-padding">
<div class="uk-width-1-2 uk-text-center">
<div class="uk-margin-top">

View File

@ -16,7 +16,7 @@ import {PiwikService} from "../utils/piwik/piwik.service";
selector: 'search-dataproviders',
template: `
<div class="uk-section uk-margin-top uk-padding-remove-bottom">
<div class="uk-section uk-padding-remove-bottom uk-padding-remove-top">
<div class="communityPanelBackground uk-margin-top uk-padding-small">
<div class="uk-container uk-container-large uk-margin-small-top uk-margin-small-bottom">
<ul class="uk-breadcrumb">

View File

@ -1,8 +1,8 @@
<div id="tm-main" class=" uk-section uk-margin-small-top tm-middle">
<div id="tm-main" class=" uk-section uk-padding-remove-top tm-middle" >
<div uk-grid uk-grid>
<div class="tm-main uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-row-first ">
<div class="uk-container uk-margin-top datasource">
<div class="uk-container datasource">
<div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning uk-margin-large-top"
role="alert">{{warningMessage}}</div>
<div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger uk-margin-large-top"

View File

@ -1,7 +1,8 @@
<div id="tm-main" class=" uk-section uk-margin-small-top tm-middle">
<div id="tm-main" class=" uk-section uk-padding-remove-top tm-middle" >
<div uk-grid uk-grid>
<div class="tm-main uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-row-first ">
<div class="uk-container uk-margin-top dataset">
<div class="uk-container dataset">
<div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning uk-margin-large-top"
role="alert">{{warningMessage}}</div>
<div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger uk-margin-large-top"

View File

@ -15,7 +15,7 @@ declare var UIkit: any;
@Component({
selector: 'htmlProjectReport',
template: `
<div id="tm-main" class=" uk-section uk-margin-small-top tm-middle">
<div id="tm-main" class=" uk-section uk-padding-remove-top tm-middle">
<div uk-grid>
<div class="tm-main uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-row-first ">
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
@ -27,8 +27,8 @@ declare var UIkit: any;
class="loading-gif uk-align-center"></span></div>
<div *ngIf="!showLoading && !warningMessage">
<h1 *ngIf="header1">{{header1}}</h1>
<h2 *ngIf="header1 || htmlResult">{{header2}}</h2>
<div *ngIf="header1" class="uk-h4 uk-text-bold ">{{header1}}</div>
<div *ngIf="header1 || htmlResult" class=" ">{{header2}}</div>
<div class="uk-clearfix uk-margin-bottom">
<button *ngIf="htmlResult" class="uk-icon-clipboard uk-button uk-button-primary clipBtn uk-float-right"

View File

@ -1,8 +1,8 @@
<div id="tm-main" class=" uk-section uk-margin-small-top tm-middle">
<div id="tm-main" class=" uk-section uk-padding-remove-top tm-middle" >
<div uk-grid uk-grid>
<div class="tm-main uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-row-first ">
<div class="uk-container uk-margin-top organization">
<div class="uk-container organization">
<div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning uk-margin-large-top"
role="alert">{{warningMessage}}</div>
<div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger uk-margin-large-top"

View File

@ -1,7 +1,7 @@
<div id="tm-main" class=" uk-section uk-margin-small-top tm-middle">
<div id="tm-main" class=" uk-section uk-padding-remove-top tm-middle">
<div uk-grid uk-grid>
<div class="tm-main uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-row-first">
<div class="uk-container uk-margin-top orp">
<div class="uk-container orp">
<div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning uk-margin-large-top"
role="alert">{{warningMessage}}</div>
<div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger uk-margin-large-top"

View File

@ -1,8 +1,8 @@
<div id="tm-main" class=" uk-section uk-margin-small-top tm-middle">
<div id="tm-main" class=" uk-section uk-padding-remove-top tm-middle" >
<div uk-grid uk-grid>
<div class="tm-main uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-row-first ">
<div id="project" class="uk-container uk-margin-top project">
<div id="project" class="uk-container project">
<div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning uk-margin-large-top"
role="alert">{{warningMessage}}</div>
<div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger uk-margin-large-top"

View File

@ -1,8 +1,8 @@
<div id="tm-main" class=" uk-section uk-margin-small-top tm-middle">
<div id="tm-main" class=" uk-section uk-padding-remove-top tm-middle" >
<div uk-grid uk-grid>
<div class="tm-main uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-row-first ">
<div class="uk-container uk-margin-top publication">
<div class="uk-container publication">
<div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning uk-margin-large-top"
role="alert">{{warningMessage}}</div>
<div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger uk-margin-large-top"

View File

@ -1,8 +1,8 @@
<div id="tm-main" class=" uk-section uk-margin-small-top tm-middle">
<div id="tm-main" class=" uk-section uk-padding-remove-top tm-middle" >
<div uk-grid uk-grid>
<div class="tm-main uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-row-first ">
<div class="uk-container uk-margin-top software">
<div class="uk-container software">
<div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning uk-margin-large-top"
role="alert">{{warningMessage}}</div>

View File

@ -4,7 +4,7 @@
{{pageTitle}}
</div>
<a *ngIf = "simpleSearchLink && simpleSearchLink.length > 0" routerLinkActive="router-link-active" [routerLink]=simpleSearchLink style="z-index:1;"
[class]="(disableForms)?'uk-float-right uk-disabled uk-link-muted uk-button portal-color uk-text-secondary uk-margin-right ':'uk-float-right uk-button portal-color uk-text-secondary uk-margin-right '" >Simple search
[class]="(disableForms)?'uk-float-right uk-disabled uk-link-muted portal-color uk-margin-right ':'uk-float-right portal-color uk-margin-right '" >Simple search
<!--span class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-right" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline></svg>
</span-->
@ -72,7 +72,8 @@
Please check your dates
</div>
<button (click)="queryChanged()" type="submit" class=" uk-button portal-background-color uk-padding uk-padding-remove-top uk-padding-remove-bottom ">
<button (click)="queryChanged()" type="submit"
class=" uk-button uk-padding uk-padding-remove-top uk-padding-remove-bottom ">
<span class="uk-icon" ><svg width="30" height="30" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="search" ratio="1.5"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg></span>
</button>
</div>

View File

@ -5,7 +5,9 @@
<li *ngFor= "let value of filter.values.slice(0,5)" class= " uk-margin-remove-top"><!--a [href]="baseUrl+'?'+filter.filterId+'='+value.id">{{_formatName(value)}} ({{value.number}})</a-->
<a class = " filterItem" [queryParams]="routerHelper.createQueryParam(filter.filterId,quote(value.id))" routerLinkActive="router-link-active" [routerLink]=baseUrl>
<span class="filterName"><div title = "{{value.name}}">{{_formatName(value)}} </div></span> <span class="filterNumber" > ({{value.number | number}})</span></a>
<div title = "{{value.name}}">{{_formatName(value)}} ({{value.number |
number}})</div>
</a>
</li>
<li *ngIf= " filter.values.length > 5 " class= "uk-padding-small-top">
<a href="#modal-{{filter.filterId}}" uk-toggle class="uk-text-secondary ">View more <!--span class="uk-text-muted">View more </span>
@ -55,7 +57,7 @@
<li *ngIf="filterKeywords(value.name)" ><!--*ngFor= "let value of filter.values"--><!--a [href]="baseUrl+'?'+filter.filterId+'='+value.id">{{_formatName(value)}} ({{value.number}})</a-->
<a class = "uk-modal-close filterItem" [queryParams]="routerHelper.createQueryParam(filter.filterId,quote(value.id))" routerLinkActive="router-link-active" [routerLink]=baseUrl>
<span class="filterName"><div title = "{{value.name}}">{{_formatName(value)}} </div></span> <span class="filterNumber" > ({{value.number | number}})</span></a>
<div title = "{{value.name}}">{{ value.name +' (' +(value.number | number)+')'}}</div></a>
</li>
</ng-container>
</ul>

View File

@ -39,8 +39,14 @@ export class BrowseStatisticComponent {
return '"'+str+'"';
}
private _formatName(value){
return value.name+" ";//(((value.name+" ("+value.number+")").length >this._maxCharacters)?(value.name.substring(0,(this._maxCharacters - (" ("+value.number+")").length - ('...').length))+"..."):value.name)
public _formatName(value){
let maxLineLength = 29;
//3 space before number + parenthesis
if(value.name.length+value.number.toLocaleString().length +3> maxLineLength){
return value.name.substr(0, (maxLineLength - 3 -3 - value.number.toLocaleString().length))+'...';
}
return value.name;
}
filterKeywords(value){
if(this.keyword.length > 0){

View File

@ -6,43 +6,31 @@
<div aria-expanded="false">
<div [class]="showMoreInline ? '' : 'searchFilterBoxValues' ">
<div *ngFor = "let value of getSelectedValues(filter,'num')" class = "uk-animation-fade filterItem">
<label>
<span class="filterName">
<div title = "{{value.name}}">
<input *ngIf="!filter.valueIsUnique" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />
<!-- [name]=filter.filterId value="false"-->
<input *ngIf="filter.valueIsUnique" type="radio" (click)="uniqueFilterChange(value)"
[name]=filter.filterId checked/>
{{' '}}
{{_formatName(value)}}
{{' '}}
<span class="filterNumber" *ngIf = "showResultCount === true" > ({{value.number|number}})</span>
{{' '+_formatName(value)}}
<span *ngIf = "showResultCount === true" >
{{' ('+(value.number|number)+')'}}</span>
</div>
</span>
</label>
</div>
<!-- <hr *ngIf="filter.countSelectedValues > 0 && (filter.values.length-filter.countSelectedValues ) > 0 " class="uk-grid-divider uk-margin-small"-->
<div *ngFor = "let value of getNotSelectedValues(filter,'num').slice(0,(!addShowMore?getNotSelectedValues(filter,'num').length:filterValuesNum-getSelectedValues(filter,'num').length))" class = "uk-animation-fade filterItem">
<label>
<span class="filterName">
<div title = "{{value.name}}" [class]="(isDisabled || (showResultCount && value.number === 0))?'uk-text-muted':''" >
<input *ngIf="!filter.valueIsUnique" [disabled]="isDisabled || (showResultCount && value.number === 0)" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />
<input *ngIf="filter.valueIsUnique" [disabled]="isDisabled || (showResultCount && value.number === 0)" type="radio" (click)="uniqueFilterChange(value)"
[name]=filter.filterId value=false />
{{' '}}
{{_formatName(value)}}
{{' '}}
<span class="filterNumber" *ngIf = "showResultCount === true" [class]="(isDisabled || value.number === 0)?'uk-text-muted':''" >
({{value.number|number}})
<span *ngIf = "showResultCount === true" [class]="(isDisabled || value.number === 0)?'uk-text-muted':''" >
{{' '+ _formatName(value) + ' ('+(value.number|number)+')'}}
</span>
</div>
</span>
</label>
</div>
<div *ngIf=" addShowMore && showMoreInline && (filter.values.length) > filterValuesNum">
<a [class]="(isDisabled)?'uk-disabled uk-link-muted uk-text-secondary':' uk-text-secondary'"
<a [class]="(isDisabled)?'uk-disabled uk-link-muted ':''"
[attr.uk-toggle]="'target: #toggle-'+filter.filterId">View
<span *ngIf="filter.values.length >= 99">more</span>
<span *ngIf="filter.values.length < 99">all</span>
@ -62,37 +50,29 @@
uk-margin-small-left uk-margin-small-right uk-margin-small-top uk-margin-bottom">
<ng-container *ngFor = "let value of getSelectedValues(filter, sortBy)">
<div *ngIf="filterKeywords(value.name)" class = "uk-animation-fade filterItem">
<label>
<span class="filterName">
<div title = "{{value.name}}">
<input *ngIf="!filter.valueIsUnique" [disabled]="isDisabled" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="close(); filterChange(value.selected)" />
<input *ngIf="filter.valueIsUnique" [disabled]="isDisabled" type="radio" (click)="uniqueFilterChange(value)"
[name]=filter.filterId checked/>
{{' '}}
{{_formatName(value)}}
{{' '}}
{{' ' + _formatName(value) + ' '}}
<span class="filterNumber" *ngIf = "showResultCount === true" > ({{value.number|number}})</span>
</div>
</span>
</label>
</div>
</ng-container>
<hr *ngIf="filter.countSelectedValues > 0 && (filter.values.length-filter.countSelectedValues ) > 0 " class="uk-grid-divider uk-margin-small">
<ng-container *ngFor = "let value of getNotSelectedValues(filter, sortBy)">
<div *ngIf="filterKeywords(value.name)" class = "uk-animation-fade filterItem">
<label>
<span class="filterName">
<div title = "{{value.name}}">
<input *ngIf="!filter.valueIsUnique" [disabled]="isDisabled" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="close(); filterChange(value.selected)" />
<input *ngIf="filter.valueIsUnique" [disabled]="isDisabled" type="radio" (click)="uniqueFilterChange(value)"
[name]=filter.filterId value=false />
{{' '}}
{{_formatName(value)}}
{{' '}}
<span class="filterNumber" *ngIf = "showResultCount === true" > ({{value.number|number}})</span>
{{' ' + _formatName(value) + ' '}}
<span *ngIf = "showResultCount === true" > ({{value.number|number}})</span>
</div>
</span>
</label>
</div>
</ng-container>
</div>
@ -100,7 +80,7 @@
</div>
<a *ngIf=" addShowMore && !showMoreInline&& (filter.values.length) > filterValuesNum" (click)="open()"
[class]="(isDisabled)?'uk-disabled uk-link-muted uk-text-secondary':' uk-text-secondary'">View more
[class]="(isDisabled)?'uk-disabled uk-link-muted':''">View more
</a>
@ -124,34 +104,25 @@
uk-margin-medium-left uk-margin-medium-right uk-margin-small-top uk-margin-bottom">
<ng-container *ngFor = "let value of getSelectedValues(filter, sortBy)">
<div *ngIf="filterKeywords(value.name)" class = "uk-animation-fade filterItem">
<label>
<span class="filterName"><div title = "{{value.name}}">
<div title = "{{value.name}}">
<input *ngIf="!filter.valueIsUnique" [disabled]="isDisabled" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="close(); filterChange(value.selected)" />
<input *ngIf="filter.valueIsUnique" [disabled]="isDisabled" [(ngModel)]="value.selected" type="radio" [name]=filter.filterId (ngModelChange)="close(); filterChange(value.selected)" />
{{' '}}
{{_formatName(value)}}
{{' '}}
<span class="filterNumber" *ngIf = "showResultCount === true" > {{' '}}({{value.number|number}})</span>
{{' ' + (value.name) + ' '}}
<span *ngIf = "showResultCount === true" > ({{value.number|number}})</span>
</div>
</span>
</label>
</div>
</ng-container>
<hr *ngIf="filter.countSelectedValues > 0 && (filter.values.length-filter.countSelectedValues ) > 0 " class="uk-grid-divider uk-margin-small">
<ng-container *ngFor = "let value of getNotSelectedValues(filter, sortBy)">
<div *ngIf="filterKeywords(value.name)" class = "uk-animation-fade filterItem">
<label>
<span class="filterName">
<div title = "{{value.name}}">
<input *ngIf="!filter.valueIsUnique" [disabled]="isDisabled" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="close(); filterChange(value.selected)" />
<input *ngIf="filter.valueIsUnique" [disabled]="isDisabled" [(ngModel)]="value.selected" type="radio" [name]=filter.filterId (ngModelChange)="close(); filterChange(value.selected)" />
{{' '}}
{{_formatName(value)}}
{{' '}}
<span class="filterNumber" *ngIf = "showResultCount === true" > ({{value.number|number}})</span>
{{' ' + (value.name) + ' '}}
<span *ngIf = "showResultCount === true" > ({{value.number|number}})</span>
</div>
</span>
</label>
</div>
</ng-container>
</div>

View File

@ -47,8 +47,19 @@ export class SearchFilterComponent {
public _formatTitle(title,length){
return (((title+" ("+length+")").length >this._maxCharacters)?(title.substring(0,(this._maxCharacters - (" ("+length+")").length - ('...').length))+"..."):title+" ("+((length >= 99)?length+"+":length)+")")
}
private _formatName(value){
return value.name;//(((value.name+" ("+value.number+")").length >this._maxCharacters)?(value.name.substring(0,(this._maxCharacters - (" ("+value.number+")").length - ('...').length))+"..."):value.name)
public _formatName(value){
let maxLineLength = 24;
//1 space after checkbox
//3 space before number + parenthesis
if(!this.showResultCount && value.name.length+1 > maxLineLength ){
return value.name.substr(0, maxLineLength -3 -1)+'...';
}
if(value.name.length+value.number.toLocaleString().length +1 +3> maxLineLength){
return value.name.substr(0, (maxLineLength- 3 -4 - value.number.toLocaleString().length))+'...';
}
return value.name;
//(((value.name+" ("+value.number+")").length >this._maxCharacters)?(value.name.substring(0,(this._maxCharacters - (" ("+value.number+")").length - ('...').length))+"..."):value.name)
}
// toggleShowAll(){
// this.showAll = !this.showAll;
@ -199,5 +210,15 @@ export class SearchFilterComponent {
// }
// this.close();
// }
getFilterName(value){
let name = value.name +" ("+ value.number.format()+")";
console.log(name)
// <span class="filterName"><div title = "{{value.name}}">
// <input [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterModalChange(value.selected)">
// {{value.name}} </div></span>
// <span class="filterNumber" *ngIf = "showResultCount === true" > ({{value.number | number}})</span>
return name;
}
}

View File

@ -17,7 +17,9 @@
<!--</div>-->
<div [class]="usedBy != 'deposit' && (!customFilter || customFilter.queryFieldName != 'communityId') ? ' image-front-topbar uk-section-default ' : (' uk-section uk-padding-remove-bottom ' + (usedBy == 'deposit' ? ' uk-padding-remove-top ' : ' uk-margin-top '))"
<div [class]="usedBy != 'deposit' && (!customFilter || customFilter.queryFieldName != 'communityId') ?
' image-front-topbar uk-section-default ' : (' uk-section uk-padding-remove-bottom uk-padding-remove-top ' + (usedBy
== 'deposit' ? ' uk-padding-remove-top ' : ' '))"
uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light">
<div [class]="' uk-background-norepeat uk-background-bottom-center uk-section uk-flex uk-flex-middle uk-background-fixed '+searchFormClass
+ (usedBy != 'deposit' && (!customFilter || customFilter.queryFieldName != 'communityId') ? ' searchFormMinHeight uk-padding-remove-bottom ' : ' uk-margin-medium-bottom uk-section-small ')

View File

@ -1,9 +1,9 @@
import {Injectable} from '@angular/core';
import {Http, Response} from '@angular/http';
import {HttpClient, HttpErrorResponse} from "@angular/common/http";
import {Observable, throwError} from 'rxjs';
import {throwError} from 'rxjs';
import {CustomOptions} from './servicesUtils/customOptions.class';
import {catchError} from "rxjs/operators";
import {CustomizationOptions} from "../../utils/customization/CustomizationOptions";
@Injectable()
export class LayoutService {
@ -39,6 +39,12 @@ export class LayoutService {
//.map(res => res.json())
.pipe(catchError(this.handleError));
}
mockLayout():any {
return this.http.get("./assets/customizationOptions.json") ;
}
private handleError(error: HttpErrorResponse) {
// in a real world app, we may send the error to some remote logging infrastructure

View File

@ -17,7 +17,7 @@ import {Component, Input} from '@angular/core';
</div>
<div [ngClass]="(gifRight)?'uk-flex-first':''" class="uk-margin-top">
<div>
<h1 class="uk-text-bold">{{gif.header}}</h1>
<div class="uk-text-bold uk-h4">{{gif.header}}</div>
<div class="uk-margin-medium"> {{gif.text}}</div>
<div *ngIf="link" class="uk-inline">
<a class="uk-button portal-button uk-text-uppercase" [routerLink]="route" routerLinkActive="router-link-active">{{linkTitle}}</a>