MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Styles: Filters Column, Paginator

This commit is contained in:
apapachristou 2019-05-06 13:15:45 +03:00
parent 1edd38c09e
commit c2c18d0131
6 changed files with 225 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.html
View File

@ -1,25 +1,60 @@
<div class="dmp-criteria"> <div class="dmp-criteria">
<mat-card class="mat-card"> <div class="filters">
<mat-card-header class="row"> <h6 class="filters-title">{{'CRITERIA.FILTERS'| translate}}</h6>
<mat-card-title> <div class="row" style="justify-content: center;">
<h4>{{'CRITERIA.FILTERS'| translate}}</h4> <!-- Search -->
</mat-card-title> <mat-form-field class="col-11 search">
<input matInput placeholder="{{'CRITERIA.DMP.LIKE'| translate}}" name="projectCriteriaLike"
[formControl]="formGroup.get('like')" (ngModelChange)="controlModified()">
</mat-card-header> <mat-error *ngIf="formGroup.get('like').hasError('backendError')">
<div class="row"> {{formGroup.get('like').getError('backendError').message}}</mat-error>
<mat-form-field class="col-12"> <mat-icon matSuffix class="style-icon">search</mat-icon>
<input matInput placeholder="{{'CRITERIA.DMP.LIKE'| translate}}" name="projectCriteriaLike" [formControl]="formGroup.get('like')" (ngModelChange)="controlModified()">
<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field *ngIf="showProject" class="col-12"> <!-- End of Search -->
<app-multiple-auto-complete [formControl]="formGroup.get('projects')" placeholder="{{'CRITERIA.DMP.PROJECTS' | translate}}" [configuration]="projectAutoCompleteConfiguration">
</app-multiple-auto-complete> <div *ngIf="showProject" class="col-10 filter-category" [formGroup]="options">
</mat-form-field> <h6 class="category-title">STATUS</h6>
<div class="col-12"><button class="importButton" mat-raised-button color="primary" (click)="fileSave($event)" type="button col-auto"> <mat-list-item><mat-checkbox formControlName="getDrafts">Draft</mat-checkbox></mat-list-item>
<mat-list-item><mat-checkbox formControlName="getFinalized">Finalized</mat-checkbox></mat-list-item>
<mat-list-item><mat-checkbox formControlName="getDmpStatuses">Any dmp status</mat-checkbox></mat-list-item>
</div>
<div *ngIf="showProject" class="col-10 filter-category">
<h6 class="category-title">RELATED PROJECT</h6>
<mat-form-field>
<app-multiple-auto-complete [formControl]="formGroup.get('projects')"
placeholder="{{'CRITERIA.DMP.SELECT-PROJECTS' | translate}}"
[configuration]="projectAutoCompleteConfiguration">
</app-multiple-auto-complete>
<mat-icon matSuffix class="style-icon">arrow_drop_down</mat-icon>
</mat-form-field>
</div>
<div *ngIf="showProject" class="col-10 filter-category">
<h6 class="category-title">ROLE</h6>
<mat-radio-group aria-label="Select an option">
<mat-list-item><mat-radio-button value="1">Any</mat-radio-button></mat-list-item>
<mat-list-item><mat-radio-button value="2">Owner</mat-radio-button></mat-list-item>
<mat-list-item><mat-radio-button value="3">Member</mat-radio-button></mat-list-item>
</mat-radio-group>
</div>
<div *ngIf="showProject" class="col-10 filter-category">
<h6 class="category-title">RELATED ORGANIZATION</h6>
<mat-form-field>
<input matInput placeholder="Select Organizations">
<!-- <app-multiple-auto-complete [formControl]="formGroup.get('projects')"
placeholder="Select Organizations"
[configuration]="projectAutoCompleteConfiguration">
</app-multiple-auto-complete> -->
<mat-icon matSuffix class="style-icon">arrow_drop_down</mat-icon>
</mat-form-field>
</div>
<div class="col-10 import">
<button class="importButton" mat-raised-button color="primary"
(click)="fileSave($event)" type="button col-auto">
{{'DMP-UPLOAD.ACTIONS.IMPORT' | translate}} {{'DMP-UPLOAD.ACTIONS.IMPORT' | translate}}
</button> </button>
</div> </div>
</div> </div>
</mat-card> </div>
</div> </div>

124
dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.scss
View File

@ -1,18 +1,116 @@
.dmp-criteria { .dmp-criteria {
mat-form-field { mat-form-field {
padding-bottom: 5px; padding-bottom: 5px;
width: 100%; width: 100%;
} }
mat-card { mat-card {
padding-bottom: 0px; padding-bottom: 0px;
} }
.hidden { .hidden {
display: none; display: none;
} }
.uploadButton { .uploadButton {
float: right; float: right;
} }
}
.filters {
border: 1px solid #e4e4e4;
border-radius: 5px;
}
.filters-title {
width: 90px;
color: #2e75b6;
background-color: white;
padding: 0px 20px;
margin-top: -10px;
margin-left: 20px;
text-transform: uppercase;
}
.style-icon {
color: #adadad;
}
::ng-deep .mat-checkbox-inner-container {
background: white;
}
::ng-deep .mat-focused .mat-form-field-label {
color: #2e75b6 !important;
}
::ng-deep.mat-form-field-underline {
background-color: #adadad !important;
}
::ng-deep.mat-form-field-ripple {
background-color: #2e75b6 !important;
}
::ng-deep .mat-checkbox {
background-color: #f6f6f6 !important;
}
::ng-deep .mat-checkbox .mat-checkbox-frame {
border: 1px solid #aaaaaa;
}
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
.mat-accent .mat-pseudo-checkbox-checked,
.mat-accent .mat-pseudo-checkbox-indeterminate,
.mat-pseudo-checkbox-checked,
.mat-pseudo-checkbox-indeterminate {
background-color: #2e75b6;
}
::ng-deep .mat-ripple-element {
background-color: #2e74b649 !important;
}
::ng-deep .mat-radio-container {
border-radius: 1em;
background: white;
}
::ng-deep .mat-radio-button .mat-radio-outer-circle {
border: 1px solid #aaaaaa;
}
::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
border-color: #2e75b6;
}
::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
color: #2e75b6;
background-color: #2e75b6;
}
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
background-color: #2e74b649;
}
.search ::ng-deep.mat-form-field-infix {
margin-left: 1em;
}
.filter-category {
background-color: #f6f6f6;
margin: 5px 0px;
}
.category-title {
color: #2e75b6;
margin-top: 8px;
margin-bottom: 12px;
}
.import {
margin: 10px;
padding: 0px;
} }

13
dmp-frontend/src/app/ui/dmp/listing/criteria/dmp-criteria.component.ts
View File

@ -1,5 +1,5 @@
import { Component, Input, OnInit } from '@angular/core'; import { Component, Input, OnInit } from '@angular/core';
import { FormBuilder, FormControl } from '@angular/forms'; import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { takeUntil } from 'rxjs/operators'; import { takeUntil } from 'rxjs/operators';
import { ValidationErrorModel } from '../../../../common/forms/validation/error-model/validation-error-model'; import { ValidationErrorModel } from '../../../../common/forms/validation/error-model/validation-error-model';
@ -27,6 +27,8 @@ export class DmpCriteriaComponent extends BaseCriteriaComponent implements OnIni
sizeError = false; sizeError = false;
maxFileSize: number = 1048576; maxFileSize: number = 1048576;
options: FormGroup;
filteredProjects: ProjectListingModel[]; filteredProjects: ProjectListingModel[];
public formGroup = new FormBuilder().group({ public formGroup = new FormBuilder().group({
like: new FormControl(), like: new FormControl(),
@ -44,9 +46,16 @@ export class DmpCriteriaComponent extends BaseCriteriaComponent implements OnIni
public projectService: ProjectService, public projectService: ProjectService,
private dmpService: DmpService, private dmpService: DmpService,
public formBuilder: FormBuilder, public formBuilder: FormBuilder,
private dialog: MatDialog private dialog: MatDialog,
fb: FormBuilder
) { ) {
super(new ValidationErrorModel()); super(new ValidationErrorModel());
this.options = fb.group({
getDrafts: false,
getFinalized: false,
getDmpStatuses: false,
floatLabel: 'auto',
});
} }
ngOnInit() { ngOnInit() {

19
dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html
View File

@ -1,7 +1,7 @@
<div class="main-content"> <div class="main-content">
<div class="container-fluid"> <div class="container-fluid">
<div class="card"> <div class="card">
<div class="card-header card-header-plain d-flex"> <div class="card-header card-header-blue d-flex">
<div class="card-desc d-flex flex-column justify-content-center"> <div class="card-desc d-flex flex-column justify-content-center">
<h4 class="card-title">{{'DMP-LISTING.TITLE' | translate}} {{titlePrefix}}</h4> <h4 class="card-title">{{'DMP-LISTING.TITLE' | translate}} {{titlePrefix}}</h4>
<p class="card-category">{{'DMP-LISTING.SUBTITLE' | translate}}</p> <p class="card-category">{{'DMP-LISTING.SUBTITLE' | translate}}</p>
@ -14,14 +14,15 @@
</div> </div>
<div class="card-body table-responsive"> <div class="card-body table-responsive">
<div class="dmp-listing row"> <div class="dmp-listing row">
<app-dmp-criteria-component [showProject]="showProject" class="col-auto"></app-dmp-criteria-component> <div class="col-3">
<div class="col"> <app-dmp-criteria-component [showProject]="showProject" class="col-auto"></app-dmp-criteria-component>
<mat-card class="mat-card"> </div>
<div class="row" *ngFor="let item of listingItems"> <div class="col-9">
<app-dmp-listing-item-component class="col-12" [dmp]="item" (onClick)="rowClicked($event)"></app-dmp-listing-item-component> <div class="row" *ngFor="let item of listingItems; let last = last">
</div> <app-dmp-listing-item-component *ngIf="!last" class="col-12" [dmp]="item" (onClick)="rowClicked($event)"></app-dmp-listing-item-component>
<mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]"></mat-paginator> <app-dmp-listing-item-component *ngIf="last" class="col-12" [showDivider]="false" [dmp]="item" (onClick)="rowClicked($event)"></app-dmp-listing-item-component>
</mat-card> </div>
<mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]"></mat-paginator>
</div> </div>
</div> </div>
</div> </div>

38
dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss
View File

@ -1,6 +1,36 @@
.dmp-listing { .dmp-listing {
.mat-card {
.mat-card { margin: 1em 0;
margin: 1em 0; }
} }
::ng-deep .mat-paginator-container {
flex-direction: row-reverse !important;
justify-content: space-between !important;
background-color: #f6f6f6;
height: 30px;
min-height: 30px !important;
}
::ng-deep .mat-paginator-page-size {
height: 43px;
}
::ng-deep .mat-icon-button {
height: 30px !important;
font-size: 12px !important;
}
::ng-deep .mat-paginator-range-label {
margin: 15px 32px 0 24px !important;
}
::ng-deep .mat-paginator-range-actions {
width: 55% !important;
min-height: 43px !important;
justify-content: space-between;
}
::ng-deep .mat-paginator-navigation-previous {
margin-left: auto !important;
} }

6
dmp-frontend/src/assets/css/demo.css
View File

@ -16,6 +16,12 @@ h4 {
font-weight: 500; font-weight: 500;
} }
h6 {
font-size: 0.85rem;
text-transform: uppercase;
font-weight: 500;
}
.max-width-136 { .max-width-136 {
max-width: 136px; max-width: 136px;
} }