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">
<mat-card class="mat-card">
<mat-card-header class="row">
<mat-card-title>
<h4>{{'CRITERIA.FILTERS'| translate}}</h4>
</mat-card-title>
</mat-card-header>
<div class="row">
<mat-form-field class="col-12">
<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>
<div class="filters">
<h6 class="filters-title">{{'CRITERIA.FILTERS'| translate}}</h6>
<div class="row" style="justify-content: center;">
<!-- Search -->
<mat-form-field class="col-11 search">
<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-icon matSuffix class="style-icon">search</mat-icon>
</mat-form-field>
<mat-form-field *ngIf="showProject" class="col-12">
<app-multiple-auto-complete [formControl]="formGroup.get('projects')" placeholder="{{'CRITERIA.DMP.PROJECTS' | translate}}" [configuration]="projectAutoCompleteConfiguration">
</app-multiple-auto-complete>
</mat-form-field>
<div class="col-12"><button class="importButton" mat-raised-button color="primary" (click)="fileSave($event)" type="button col-auto">
<!-- End of Search -->
<div *ngIf="showProject" class="col-10 filter-category" [formGroup]="options">
<h6 class="category-title">STATUS</h6>
<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}}
</button>
</div>
</div>
</mat-card>
</div>
</div>

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

@ -1,18 +1,116 @@
.dmp-criteria {
mat-form-field {
padding-bottom: 5px;
width: 100%;
}
mat-form-field {
padding-bottom: 5px;
width: 100%;
}
mat-card {
padding-bottom: 0px;
}
mat-card {
padding-bottom: 0px;
}
.hidden {
display: none;
}
.hidden {
display: none;
}
.uploadButton {
float: right;
}
.uploadButton {
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 { FormBuilder, FormControl } from '@angular/forms';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { TranslateService } from '@ngx-translate/core';
import { takeUntil } from 'rxjs/operators';
import { ValidationErrorModel } from '../../../../common/forms/validation/error-model/validation-error-model';
@ -27,6 +27,8 @@ export class DmpCriteriaComponent extends BaseCriteriaComponent implements OnIni
sizeError = false;
maxFileSize: number = 1048576;
options: FormGroup;
filteredProjects: ProjectListingModel[];
public formGroup = new FormBuilder().group({
like: new FormControl(),
@ -44,9 +46,16 @@ export class DmpCriteriaComponent extends BaseCriteriaComponent implements OnIni
public projectService: ProjectService,
private dmpService: DmpService,
public formBuilder: FormBuilder,
private dialog: MatDialog
private dialog: MatDialog,
fb: FormBuilder
) {
super(new ValidationErrorModel());
this.options = fb.group({
getDrafts: false,
getFinalized: false,
getDmpStatuses: false,
floatLabel: 'auto',
});
}
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="container-fluid">
<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">
<h4 class="card-title">{{'DMP-LISTING.TITLE' | translate}} {{titlePrefix}}</h4>
<p class="card-category">{{'DMP-LISTING.SUBTITLE' | translate}}</p>
@ -14,14 +14,15 @@
</div>
<div class="card-body table-responsive">
<div class="dmp-listing row">
<app-dmp-criteria-component [showProject]="showProject" class="col-auto"></app-dmp-criteria-component>
<div class="col">
<mat-card class="mat-card">
<div class="row" *ngFor="let item of listingItems">
<app-dmp-listing-item-component class="col-12" [dmp]="item" (onClick)="rowClicked($event)"></app-dmp-listing-item-component>
</div>
<mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]"></mat-paginator>
</mat-card>
<div class="col-3">
<app-dmp-criteria-component [showProject]="showProject" class="col-auto"></app-dmp-criteria-component>
</div>
<div class="col-9">
<div class="row" *ngFor="let item of listingItems; let last = last">
<app-dmp-listing-item-component *ngIf="!last" class="col-12" [dmp]="item" (onClick)="rowClicked($event)"></app-dmp-listing-item-component>
<app-dmp-listing-item-component *ngIf="last" class="col-12" [showDivider]="false" [dmp]="item" (onClick)="rowClicked($event)"></app-dmp-listing-item-component>
</div>
<mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]"></mat-paginator>
</div>
</div>
</div>

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

@ -1,6 +1,36 @@
.dmp-listing {
.mat-card {
margin: 1em 0;
}
.mat-card {
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;
}
h6 {
font-size: 0.85rem;
text-transform: uppercase;
font-weight: 500;
}
.max-width-136 {
max-width: 136px;
}