From ddf2a6e3e1b48a8b1e07c5a05e46a5fd4ce519c3 Mon Sep 17 00:00:00 2001
From: Baptiste Toulemonde <toulemonde@cines.fr>
Date: Thu, 15 Apr 2021 14:54:04 +0200
Subject: [PATCH] style(liste-profile):modification style
---
.../list-profile/list-profile.component.html | 231 ++++++++----------
.../list-profile/list-profile.component.scss | 1 -
.../list-profile/list-profile.component.ts | 2 +
.../projects/pastis/src/sass/login.scss | 141 +++++++++++
.../projects/pastis/src/sass/styles.scss | 4 +-
5 files changed, 246 insertions(+), 133 deletions(-)
create mode 100644 ui/ui-frontend/projects/pastis/src/sass/login.scss
diff --git a/ui/ui-frontend/projects/pastis/src/app/profile/list-profile/list-profile.component.html b/ui/ui-frontend/projects/pastis/src/app/profile/list-profile/list-profile.component.html
index 4949b1d45..cd1e1e6e8 100644
--- a/ui/ui-frontend/projects/pastis/src/app/profile/list-profile/list-profile.component.html
+++ b/ui/ui-frontend/projects/pastis/src/app/profile/list-profile/list-profile.component.html
@@ -1,141 +1,114 @@
-<div>
- <!--Navigation links-->
+<mat-sidenav-container [autosize]="true" [hasBackdrop]="false">
- <div class="navigation-links-container">
- <p class="pastis-font-roboto-regular pastis-primary-500">
- <span>
- <button class="btn-back">
- <mat-icon class="pastis-ico-arrow-back">arrow_back
- </mat-icon>
- </button>
- </span>
-
- Portail <mat-icon class="pastis-ico-arrow-right">arrow_right_alt</mat-icon> <b
- class="pastis-black-height">créer et gérer des profils d’archivage</b>
- </p>
- </div>
-
- <!-- The input search -->
+ <mat-sidenav-content>
+ <div class="vitamui-heading">
+ <vitamui-common-title-breadcrumb [data]="data">
+ créer et gérer des profils d’archivage
+ </vitamui-common-title-breadcrumb>
- <p class="pastis-font-h5">Créer et gérer des profils d’archivage</p><br>
- <div class="d-flex align-items-center px-1">
- <div class="button-container">
- <!--Button save profile-->
- <div>
- <vitamui-common-search-bar placeholder="Recherche un profil par son intitulé">
- </vitamui-common-search-bar>
-
- <button mat-button mat-icon-button class="btn-search ">
- <mat-icon style="color:white; vertical-align: text-bottom;">search</mat-icon>
+ <vitamui-common-banner [searchbarPlaceholder]="'Recherche un profil par son intitulé'" >
+ <button *ngIf="true" class="btn primary ml-5">
+ <i class="vitamui-icon vitamui-icon-plus mr-5 "></i>
+ <span style="align-items: center; margin:auto;">créer un nouveau profil</span>
</button>
- </div>
+ <button class="btn secondary ml-3" (click)="fileInput.click()">
+ <i class="vitamui-icon vitamui-icon-deposit mr-3 "></i>
+ <span style="align-items: center; margin:auto;">importer un profil</span>
- <!--Button create profile -->
- <button *ngIf="true" class="btn primary">
- <i class="vitamui-icon vitamui-icon-plus mr-3 ng-star-inserted"></i>
- <span style="align-items: center; margin:auto;">créer un nouveau profil</span>
- </button>
-
-
- <!--Button import profile -->
-
- <button class="btn secondary" (click)="fileInput.click()">
- <i class="vitamui-icon vitamui-icon-telecharger mr-3 ng-star-inserted"></i>
- <span style="align-items: center; margin:auto;">importer un profil</span>
+ <input #fileInput type="file" class="buttons" accept=".json, .rng" ng2FileSelect
+ style="display:none;" [uploader]="uploader" (change)="uploadProfile($event)" />
+ </button>
+ </vitamui-common-banner>
- <input #fileInput type="file" class="buttons" accept=".json, .rng" ng2FileSelect style="display:none;"
- [uploader]="uploader" (change)="uploadProfile($event)" />
+ </div>
- </button>
- </div>
+ <!--The profile types cards container-->
+ <div class="vitamui-content">
+ <p class="pastis-font-menu">Liste des profils</p>
+ <div class="total-profile-card">
+ <p class="total-profile-label">Tous les profils</p>
+ <p class="total-profilenum-label">{{totalProfileNum}}</p>
+ </div>
- </div>
+ <div class="pa-pua-card">
+ <p class="pa-pua-label">PA</p>
+ <p class="pa-pua-num-label">{{numPA}}</p>
+ </div>
+ <div class="pa-pua-card">
+ <p class="pa-pua-label">PUA</p>
+ <p class="pa-pua-num-label">{{numPUA}}</p>
+ </div>
+ <div id="test" class=test></div>
+
+ <div ngxUiLoaderBlurred blur="0" [loaderId]="'table-profiles'"
+ class="vitamui-table-body" style="margin-top: 30px;" *ngIf="matDataSource">
+ <table mat-table [dataSource]="matDataSource" class="list-profile-table">
+
+ <!-- Type/State Column -->
+ <ng-container matColumnDef="type">
+ <th mat-header-cell *matHeaderCellDef class="pastis-font-table-header pastis-col"> Type/Etat
+ <i class="vitamui-icon vitamui-icon-chevron-down "></i>
+ </th>
+ <td mat-cell *matCellDef="let element" class="pastis-table-content pastis-col"> {{element.type}}
+ <i *ngIf="element.type == 'PA'" class="status-badge-green ml-3"></i>
+ <i *ngIf="element.type == 'PUA'" class="status-badge-red ml-3"></i>
+ </td>
+ </ng-container>
+
+ <!-- Identifiant Column -->
+ <ng-container matColumnDef="id">
+ <th mat-header-cell *matHeaderCellDef class="pastis-font-table-header pastis-col"> Identifiant
+ <i class="vitamui-icon vitamui-icon-chevron-down "></i>
+ </th>
+ <td mat-cell *matCellDef="let element" class="pastis-table-content pastis-col"> {{element.id}}
+ </td>
+ </ng-container>
+
+ <!-- Intitulé Column -->
+ <ng-container matColumnDef="baseName">
+ <th mat-header-cell *matHeaderCellDef class="pastis-font-table-header pastis-col"> Intitulé
+ <i class="vitamui-icon vitamui-icon-chevron-down "></i>
+ </th>
+ <td mat-cell *matCellDef="let element" class="pastis-table-content pastis-col">
+ {{element.baseName}}
+ </td>
+ </ng-container>
+
+ <!-- Last modified Column -->
+ <ng-container matColumnDef="lastModified">
+ <th mat-header-cell *matHeaderCellDef class="pastis-font-table-header pastis-col"> Dernières
+ modifications
+ <i class="vitamui-icon vitamui-icon-chevron-down "></i>
+ </th>
+ <td mat-cell *matCellDef="let element" class="pastis-table-content pastis-col"
+ style="width: 350px;">
+ <div style="display: inline-block; vertical-align: middle;">
+ {{element.lastModified}}
+ <div style="display: inline-flex;" *ngIf="isRowHovered(element.id)">
+ <button mat-button mat-icon-button class="btn-edit-profile"
+ (click)="editProfile(element.id)">
+ <mat-icon style="color:white; vertical-align: middle;">edit</mat-icon>
+ </button>
+
+ <button mat-button mat-icon-button class="btn-menu">
+ <mat-icon class="pastis-primary-500">more_horiz</mat-icon>
+ </button>
+ </div>
+ </div>
+ </td>
+ </ng-container>
+
+ <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky: true" class="pastis-table-row-header">
+ </tr>
+ <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="pastis-table-row"
+ (mouseover)="onMouseOver(row)" (mouseleave)="onMouseLeave(row)"></tr>
+ </table>
+ <ngx-ui-loader [loaderId]="'table-profiles'"></ngx-ui-loader>
- <!--The profile types cards container-->
- <div class=profile-cards-container>
- <p class="pastis-font-menu">Liste des profils</p>
- <div class="total-profile-card">
- <p class="total-profile-label">Tous les profils</p>
- <p class="total-profilenum-label">{{totalProfileNum}}</p>
+ </div>
</div>
- <div class="pa-pua-card">
- <p class="pa-pua-label">PA</p>
- <p class="pa-pua-num-label">{{numPA}}</p>
- </div>
- <div class="pa-pua-card">
- <p class="pa-pua-label">PUA</p>
- <p class="pa-pua-num-label">{{numPUA}}</p>
- </div>
- <div id="test" class=test></div>
- </div>
-
-
- <!--The list of profile container-->
- <div ngxUiLoaderBlurred blur="0" [loaderId]="'table-profiles'" style="position: relative"
- class="profile-list-container" *ngIf="matDataSource">
- <table mat-table [dataSource]="matDataSource" class="list-profile-table">
-
- <!-- Type/State Column -->
- <ng-container matColumnDef="type">
- <th mat-header-cell *matHeaderCellDef class="pastis-font-table-header pastis-col"> Type/Etat <mat-icon
- svgIcon="chevron-down" class="pastis-ico-chevron-down"></mat-icon>
- </th>
- <td mat-cell *matCellDef="let element" class="pastis-table-content pastis-col"> {{element.type}}
- <mat-icon *ngIf="element.type == 'PA'" svgIcon="active-icon"></mat-icon>
- <mat-icon *ngIf="element.type == 'PUA'" svgIcon="inactive-icon"></mat-icon>
- </td>
- </ng-container>
-
- <!-- Identifiant Column -->
- <ng-container matColumnDef="id">
- <th mat-header-cell *matHeaderCellDef class="pastis-font-table-header pastis-col"> Identifiant <mat-icon
- svgIcon="chevron-down" class="pastis-ico-chevron-down"></mat-icon>
- </th>
- <td mat-cell *matCellDef="let element" class="pastis-table-content pastis-col"> {{element.id}} </td>
- </ng-container>
-
- <!-- Intitulé Column -->
- <ng-container matColumnDef="baseName">
- <th mat-header-cell *matHeaderCellDef class="pastis-font-table-header pastis-col"> Intitulé <mat-icon
- svgIcon="chevron-down" class="pastis-ico-chevron-down"></mat-icon>
- </th>
- <td mat-cell *matCellDef="let element" class="pastis-table-content pastis-col"> {{element.baseName}}
- </td>
- </ng-container>
-
- <!-- Last modified Column -->
- <ng-container matColumnDef="lastModified">
- <th mat-header-cell *matHeaderCellDef class="pastis-font-table-header pastis-col"> Dernières
- modifications
- <mat-icon svgIcon="chevron-down" class="pastis-ico-chevron-down"></mat-icon>
- </th>
- <td mat-cell *matCellDef="let element" class="pastis-table-content pastis-col" style="width: 350px;">
- <div style="display: inline-block; vertical-align: middle;">
- {{element.lastModified}}
- <div style="display: inline-flex;" *ngIf="isRowHovered(element.id)">
- <button mat-button mat-icon-button class="btn-edit-profile"
- (click)="editProfile(element.id)">
- <mat-icon style="color:white; vertical-align: middle;">edit</mat-icon>
- </button>
-
- <button mat-button mat-icon-button class="btn-menu">
- <mat-icon class="pastis-primary-500">more_horiz</mat-icon>
- </button>
- </div>
- </div>
- </td>
- </ng-container>
-
- <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky: true" class="pastis-table-row-header"></tr>
- <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="pastis-table-row"
- (mouseover)="onMouseOver(row)" (mouseleave)="onMouseLeave(row)"></tr>
- </table>
- <ngx-ui-loader [loaderId]="'table-profiles'"></ngx-ui-loader>
-
- </div>
- <br>
- <br>
-</div>
\ No newline at end of file
+ </mat-sidenav-content>
+</mat-sidenav-container>
\ No newline at end of file
diff --git a/ui/ui-frontend/projects/pastis/src/app/profile/list-profile/list-profile.component.scss b/ui/ui-frontend/projects/pastis/src/app/profile/list-profile/list-profile.component.scss
index 027f95280..1db8a57af 100644
--- a/ui/ui-frontend/projects/pastis/src/app/profile/list-profile/list-profile.component.scss
+++ b/ui/ui-frontend/projects/pastis/src/app/profile/list-profile/list-profile.component.scss
@@ -224,7 +224,6 @@
.button-container{
position: static;
- margin-right: 126px;
display: flex;
flex-direction: row;
align-items: flex-start;
diff --git a/ui/ui-frontend/projects/pastis/src/app/profile/list-profile/list-profile.component.ts b/ui/ui-frontend/projects/pastis/src/app/profile/list-profile/list-profile.component.ts
index 08346284f..dafef70e0 100644
--- a/ui/ui-frontend/projects/pastis/src/app/profile/list-profile/list-profile.component.ts
+++ b/ui/ui-frontend/projects/pastis/src/app/profile/list-profile/list-profile.component.ts
@@ -78,6 +78,8 @@ export class ListProfileComponent implements OnInit {
buttonIsClicked: boolean;
+ data = ["portail"]
+
constructor(private profileService: ProfileService,private fileService: FileService,
private ngxLoader:NgxUiLoaderService, private router:Router, private noticeService : NoticeService) { }
diff --git a/ui/ui-frontend/projects/pastis/src/sass/login.scss b/ui/ui-frontend/projects/pastis/src/sass/login.scss
new file mode 100644
index 000000000..b3202cac4
--- /dev/null
+++ b/ui/ui-frontend/projects/pastis/src/sass/login.scss
@@ -0,0 +1,141 @@
+/** TODO DEPRECATED : REMOVE THIS CSS AT THE END OF THE REWORK **/
+
+@import '~ui-frontend-common/sass/variables/colors';
+@import '~ui-frontend-common/sass/mixins/fonts';
+
+.login-box {
+ position: relative;
+ display: block;
+ box-sizing: border-box;
+ width: 800px;
+ margin: 120px auto;
+ padding: 48px 80px;
+ @include vitamui-modal;
+
+ h1 {
+ @include login-title;
+ }
+
+ header p {
+ margin-bottom: 30px;
+ }
+
+ p {
+ @include login-text-1;
+ line-height: 30px;
+
+ small {
+ @include login-text-2;
+ font-weight: 400;
+ }
+ }
+
+ strong {
+ font-weight: 500;
+ }
+
+ a {
+ @include vitamui-link;
+ text-decoration: underline;
+ }
+
+ input[type=text],
+ input[type=email],
+ input[type=password] {
+ border: none;
+ outline: none;
+ border-radius: 25px;
+ box-shadow: 0 0 20px 0 rgba(169, 169, 169, 0.3);
+ transition: border-color 200ms ease-out;
+ height: 50px;
+ padding: 0 30px;
+ border: 1px solid transparent;
+
+ &:focus {
+ border-color: $greyish-two;
+ }
+
+ &.ng-valid.ng-touched {
+ border-color: $green;
+ }
+
+ &.ng-invalid.ng-touched {
+ border-color: $red;
+ }
+
+ &[disabled] {
+ opacity: 0.4;
+ }
+ }
+
+ .form-error {
+ @include login-error;
+
+ i {
+ font-size: 36px;
+ vertical-align: middle;
+ margin-right: 10px;
+ }
+ }
+
+ button.vitamui-primary {
+ @include button-primary;
+ border: none;
+ height: 50px;
+ border-radius: 25px;
+ background-color: var(--vitamui-primary);
+ box-shadow: 20px 20px 40px 0 rgba(214, 208, 208, 0.5);
+ padding: 0 30px;
+ transition: opacity 200ms ease-in-out;
+ border: 1px solid var(--vitamui-primary);
+
+
+
+ &:focus:not([disabled]),
+ &:hover:not([disabled]) {
+ cursor: pointer;
+ background-color: #ff8b58;
+ outline: none;
+ }
+
+ &[disabled] {
+ opacity: 0.4;
+ }
+ }
+
+ .helper {
+ @include login-helper;
+ text-align: right;
+ transition: opacity 200ms ease-in-out;
+ margin: 0;
+
+ &.hidden {
+ opacity: 0;
+ }
+ }
+
+ button.back {
+ display: flex;
+ align-items: center;
+ background: transparent;
+ color: var(--vitamui-primary);
+ font-size: 14px;
+ font-weight: normal;
+ border: none;
+ padding: 0;
+ margin-top: 40px;
+ cursor: pointer;
+
+ i {
+ display: block;
+ font-size: 18px;
+ color: var(--vitamui-primary);
+ background-color: #e7f5f2;
+ width: 30px;
+ height: 30px;
+ border-radius: 15px;
+ line-height: 30px;
+ margin-right: 10px;
+ }
+ }
+}
diff --git a/ui/ui-frontend/projects/pastis/src/sass/styles.scss b/ui/ui-frontend/projects/pastis/src/sass/styles.scss
index c071e3822..a9530f276 100644
--- a/ui/ui-frontend/projects/pastis/src/sass/styles.scss
+++ b/ui/ui-frontend/projects/pastis/src/sass/styles.scss
@@ -4,7 +4,5 @@
@import '~ui-frontend-common/sass/fonts/font-styles.css';
+@import "login";
-
-@import '../../../../dist/sass/icons/vitamui-icons.css';
-@import '../../../../dist/sass/styles';
\ No newline at end of file
--
GitLab