diff --git a/src/frontend/app/indexation/indexation.component.html b/src/frontend/app/indexation/indexation.component.html
index f103e2885415134a85078122d74bac5d4fdfd433..3488832cd331132cf1514a87238f6145e4d58c09 100644
--- a/src/frontend/app/indexation/indexation.component.html
+++ b/src/frontend/app/indexation/indexation.component.html
@@ -2,7 +2,8 @@
<mat-sidenav #snavLeft class="panel-left" #snav [mode]="appService.getViewMode() ? 'over' : 'side'"
[fixedInViewport]="appService.getViewMode()" [opened]="appService.getViewMode() ? false : true"
autoFocus="false" style="overflow-x:hidden;" [ngStyle]="{'width': appService.getViewMode() ? '95%' : '600px'}">
- <header-panel [snavLeft]="snav" [navButton]="{icon: 'fa fa-home', label: lang.backHome, route : '/home'}"></header-panel>
+ <header-panel [snavLeft]="snav" [navButton]="{icon: 'fa fa-home', label: lang.backHome, route : '/home'}">
+ </header-panel>
<ng-container *ngIf="indexingModels.length > 0">
<div class="listModels">
<button mat-button class="button-form-primary listModels-button"
@@ -14,31 +15,39 @@
<i class="fa fa-chevron-down menu-icon"></i>
</button>
<mat-menu #IndexingModelsMenu="matMenu" [class]="'menuForm listModels-menu'">
- <button mat-menu-item disabled style="text-align:center;"
- (click)="$event.stopPropagation();">{{lang.indexingModel}}</button>
- <ng-container *ngFor="let indexingModel of indexingModels | sortBy: 'label'">
- <button mat-menu-item *ngIf="indexingModel.master === null"
- (click)="loadIndexingModel(indexingModel)" [title]="indexingModel.label"
- [class.listModels-menu-selected]="indexingModel.id === currentIndexingModel.id">{{indexingModel.label}}
- {{indexingModel.default ? '(' + lang.default + ')': ''}}</button>
- <ng-container
- *ngFor="let privateIndexingModel of indexingModels | sortBy: 'label' ;let itPrivate=index">
- <button mat-menu-item *ngIf="privateIndexingModel.master === indexingModel.id"
- (click)="loadIndexingModel(privateIndexingModel)" [title]="privateIndexingModel.label"
- [class.listModels-menu-selected]="privateIndexingModel.id === currentIndexingModel.id"
- style="padding-left: 50px;display: flex;align-items: center;">
- <div style="flex:1;">
- {{privateIndexingModel.label | shorten: 45: '...'}} <span
- class="listModels-menu-badge">{{lang.private}}</span>
- </div>
- <button mat-icon-button class="listModels-menu-delete"
- *ngIf="privateIndexingModel.id !== currentIndexingModel.id" [title]="lang.delete"
- (click)="$event.stopPropagation();deletePrivateIndexingModel(privateIndexingModel.id, itPrivate)">
- <mat-icon class="fa fa-trash" color="warn">
- </mat-icon>
- </button>
+ <div class="menuTitle">
+ <span>
+ {{lang.indexingModel}}
+ </span>
+ <mat-form-field floatLabel="never" appearance="outline" class="smallInput"
+ (click)="$event.stopPropagation();" style="width: 220px !important;">
+ <input matInput id="searchTerm" placeholder="{{lang.filterBy}}" #listFilter
+ autocomplete="off" (click)="$event.stopPropagation();"
+ (keydown)="$event.stopPropagation()">
+ </mat-form-field>
+ </div>
+ <ng-container
+ *ngFor="let indexingModel of indexingModels | filterList:listFilter.value:'label'; let i=index">
+ <button mat-menu-item (click)="loadIndexingModel(indexingModel)" [title]="indexingModel.label"
+ [class.listModels-menu-selected]="indexingModel.id === currentIndexingModel.id"
+ [class.private]="indexingModel.private" style="display: flex;align-items: center;">
+ <div *ngIf="!indexingModel.private" style="flex:1;">
+ {{indexingModel.label | shorten: 45: '...'}}
+ {{indexingModel.default ? '(' + lang.default + ')': ''}}
+ </div>
+ <div *ngIf="indexingModel.private" style="flex:1;">
+ {{indexingModel.label | shorten: 45: '...'}} <span
+ class="listModels-menu-badge">{{lang.private}}</span>
+ </div>
+ <button mat-icon-button class="listModels-menu-delete"
+ *ngIf="indexingModel.id !== currentIndexingModel.id && indexingModel.private"
+ [title]="lang.delete"
+ (click)="$event.stopPropagation();deletePrivateIndexingModel(indexingModel.id, i)">
+ <mat-icon class="fa fa-trash" color="warn">
+ </mat-icon>
</button>
- </ng-container>
+
+ </button>
</ng-container>
</mat-menu>
<button mat-icon-button type="button" color="primary" (click)="savePrivateIndexingModel()"
@@ -51,22 +60,39 @@
[groupId]="currentGroupId" [indexingFormId]="currentIndexingModel.id"></app-indexing-form>
</div>
<div class="actions-indexing-form">
- <ng-container *ngIf="actionsList.length > 0 && indexingForm !== undefined && selectedAction !== undefined">
- <button mat-button class="button-form-primary" [disabled]="selectedAction.id === 0" [matMenuTriggerFor]="menu"
- style="width:350px;margin-right:20px;" [title]="selectedAction.label">
+ <ng-container
+ *ngIf="actionsList.length > 0 && indexingForm !== undefined && selectedAction !== undefined">
+ <button mat-button class="button-form-primary" [disabled]="selectedAction.id === 0"
+ [matMenuTriggerFor]="menu" style="width:350px;margin-right:20px;"
+ [title]="selectedAction.label">
<span class="menu-label" [innerHTML]="selectedAction.label">
</span>
<i class="fa fa-chevron-down menu-icon"></i></button>
<mat-menu #menu="matMenu" [class]="'menuForm menuAction'">
- <button mat-menu-item disabled style="text-align:center;"
- (click)="$event.stopPropagation();">{{lang.actions}}</button>
- <ng-container *ngFor="let action of actionsList">
- <button *ngIf="showActionInCurrentCategory(action)" mat-menu-item (click)="selectAction(action)" [title]="action.label" [class.listModels-menu-selected]="action.id === selectedAction.id" [disabled]="!action.enabled">
- <span style="flex:1;">{{action.label}}</span><small style="position: absolute;top: 15px;left: 140px;" color="warn" *ngIf="!action.enabled">{{lang.badActionParam}}</small>
+ <div class="menuTitle">
+ <span>
+ {{lang.actions}}
+ </span>
+ <mat-form-field floatLabel="never" appearance="outline" class="smallInput"
+ (click)="$event.stopPropagation();">
+ <input matInput id="searchTerm" placeholder="{{lang.filterBy}}" #listFilter
+ autocomplete="off" (click)="$event.stopPropagation();"
+ (keydown)="$event.stopPropagation()">
+ </mat-form-field>
+ </div>
+ <ng-container *ngFor="let action of actionsList | filterList:listFilter.value:'label'">
+ <button *ngIf="showActionInCurrentCategory(action)" mat-menu-item
+ (click)="selectAction(action)" [title]="action.label"
+ [class.listModels-menu-selected]="action.id === selectedAction.id"
+ [disabled]="!action.enabled">
+ <span style="flex:1;">{{action.label}}</span><small
+ style="position: absolute;top: 15px;left: 140px;" color="warn"
+ *ngIf="!action.enabled">{{lang.badActionParam}}</small>
</button>
</ng-container>
</mat-menu>
- <button mat-button *ngIf="!appService.getViewMode()" [disabled]="actionService.loading || selectedAction.id === 0 || appDocumentViewer.isEditingTemplate()"
+ <button mat-button *ngIf="!appService.getViewMode()"
+ [disabled]="actionService.loading || selectedAction.id === 0 || appDocumentViewer.isEditingTemplate()"
class="button-form-primary-filled"
style="width: 150px;align-items: center;justify-content: center;text-align: center;display: flex;"
(click)="onSubmit()">{{lang.validate}}</button>
@@ -93,7 +119,8 @@
</div>
<div class="document-container" [class.fullContainer]="appService.getViewMode()">
<div class="content">
- <app-document-viewer #appDocumentViewer [editMode]="true" [tmpFilename]="tmpFilename" style="height:100%;width:100%;">
+ <app-document-viewer #appDocumentViewer [editMode]="true" [tmpFilename]="tmpFilename"
+ style="height:100%;width:100%;">
</app-document-viewer>
</div>
</div>
diff --git a/src/frontend/app/indexation/indexation.component.scss b/src/frontend/app/indexation/indexation.component.scss
index a9523270c22995e9e6a01a3b0c4ecad69a4982bf..bae3477b46c4cda10b936b3395026eee7f355d91 100644
--- a/src/frontend/app/indexation/indexation.component.scss
+++ b/src/frontend/app/indexation/indexation.component.scss
@@ -164,4 +164,24 @@
::ng-deep.menuAction {
min-width: 350px !important;
+}
+
+.menuTitle {
+ display: flex;
+ padding-left: 20px;
+ align-items: center;
+ color: $primary;
+ font-weight: bold;
+}
+
+.smallInput {
+ padding: 10px;
+
+ ::ng-deep.mat-form-field-wrapper {
+ padding-bottom: 0px;
+ }
+}
+
+.private {
+ padding-left: 50px;
}
\ No newline at end of file
diff --git a/src/frontend/app/indexation/indexation.component.ts b/src/frontend/app/indexation/indexation.component.ts
index 40076f8736f16f40fd2093efcb395cdff0d5c16e..643467e4896bb1a799e5ff4dd9e59fe12a8539f6 100644
--- a/src/frontend/app/indexation/indexation.component.ts
+++ b/src/frontend/app/indexation/indexation.component.ts
@@ -18,6 +18,7 @@ import { DocumentViewerComponent } from '../viewer/document-viewer.component';
import { ConfirmComponent } from '../../plugins/modal/confirm.component';
import { AddPrivateIndexingModelModalComponent } from './private-indexing-model/add-private-indexing-model-modal.component';
import { ActionsService } from '../actions/actions.service';
+import { SortPipe } from '../../plugins/sorting.pipe';
@Component({
templateUrl: "indexation.component.html",
@@ -25,7 +26,7 @@ import { ActionsService } from '../actions/actions.service';
'indexation.component.scss',
'indexing-form/indexing-form.component.scss'
],
- providers: [NotificationService, AppService, ActionsService],
+ providers: [NotificationService, AppService, ActionsService, SortPipe],
})
export class IndexationComponent implements OnInit {
@@ -69,7 +70,8 @@ export class IndexationComponent implements OnInit {
public viewContainerRef: ViewContainerRef,
public appService: AppService,
public actionService: ActionsService,
- private router: Router
+ private router: Router,
+ private sortPipe: SortPipe
) {
_activatedRoute.queryParams.subscribe(
@@ -98,6 +100,7 @@ export class IndexationComponent implements OnInit {
this.currentIndexingModel = this.indexingModels[0];
this.notify.error(this.lang.noDefaultIndexingModel);
}
+ this.loadIndexingModelsList();
}
if (this.appService.getViewMode()) {
@@ -142,6 +145,20 @@ export class IndexationComponent implements OnInit {
});
}
+ loadIndexingModelsList() {
+ let tmpIndexingModels:any[] = this.sortPipe.transform(this.indexingModels.filter(elem => elem.master === null), 'label');
+ let privateTmpIndexingModels:any[] = this.sortPipe.transform(this.indexingModels.filter(elem => elem.master !== null), 'label');
+ this.indexingModels = [];
+ tmpIndexingModels.forEach(indexingModel => {
+ this.indexingModels.push(indexingModel);
+ privateTmpIndexingModels.forEach(privateIndexingModel => {
+ if (privateIndexingModel.master === indexingModel.id) {
+ this.indexingModels.push(privateIndexingModel);
+ }
+ });
+ });
+ }
+
onSubmit() {
if (this.indexingForm.isValidForm()) {
const formatdatas = this.formatDatas(this.indexingForm.getDatas());
@@ -227,6 +244,7 @@ export class IndexationComponent implements OnInit {
tap((data) => {
this.indexingModels.push(data.indexingModel);
this.currentIndexingModel = this.indexingModels.filter(indexingModel => indexingModel.id === data.indexingModel.id)[0];
+ this.loadIndexingModelsList();
}),
catchError((err: any) => {
this.notify.handleErrors(err);
diff --git a/src/frontend/app/process/process.component.html b/src/frontend/app/process/process.component.html
index 5d9e0666e66e522db865ca55c75a01161e5c72d0..720dd5384fb35822f4470fa255912ab71e005db4 100644
--- a/src/frontend/app/process/process.component.html
+++ b/src/frontend/app/process/process.component.html
@@ -49,8 +49,8 @@
<div class="title-divider"></div>
</div>
<div class="content">
- <app-note-resume [resId]="currentResourceInformations.resId"
- (goTo)="currentTool = 'notes'"></app-note-resume>
+ <app-note-resume [resId]="currentResourceInformations.resId" (goTo)="currentTool = 'notes'">
+ </app-note-resume>
</div>
</div>
<div class="banner" [style.borderColor]="currentPriorityColor">
@@ -70,8 +70,8 @@
<div class="title-divider"></div>
</div>
<div class="content">
- <app-mail-resume [resId]="currentResourceInformations.resId"
- (goTo)="currentTool = 'mails'"></app-mail-resume>
+ <app-mail-resume [resId]="currentResourceInformations.resId" (goTo)="currentTool = 'mails'">
+ </app-mail-resume>
</div>
</div>
</ng-container>
@@ -107,9 +107,18 @@
</span>
<i class="fa fa-chevron-down menu-icon"></i></button>
<mat-menu #menu="matMenu" [class]="'menuForm menuAction'">
- <button mat-menu-item disabled style="text-align:center;"
- (click)="$event.stopPropagation();">{{lang.actions}}</button>
- <ng-container *ngFor="let action of actionsList">
+ <div class="menuTitle">
+ <span>
+ {{lang.actions}}
+ </span>
+ <mat-form-field floatLabel="never" appearance="outline" class="smallInput"
+ (click)="$event.stopPropagation();">
+ <input matInput id="searchTerm" placeholder="{{lang.filterBy}}" #listFilter
+ autocomplete="off" (click)="$event.stopPropagation();"
+ (keydown)="$event.stopPropagation()">
+ </mat-form-field>
+ </div>
+ <ng-container *ngFor="let action of actionsList | filterList:listFilter.value:'label'">
<button *ngIf="showActionInCurrentCategory(action)" mat-menu-item (click)="selectAction(action)"
[title]="action.label" [class.listModels-menu-selected]="action.id === selectedAction.id">
<span style="flex:1;">{{action.label}}</span>
@@ -153,17 +162,22 @@
</div>
<div class="content-item">
<div>{{lang.chronoNumberShort}} :</div>
- <div class="content-item-value" [title]="'N° '+this.currentResourceInformations.resId">{{this.currentResourceInformations.chrono}}</div>
+ <div class="content-item-value" [title]="'N° '+this.currentResourceInformations.resId">
+ {{this.currentResourceInformations.chrono}}</div>
</div>
<div class="content-item">
<div>{{lang.senders}} :</div>
<div class="content-item-value">??? <i class="fas fa-circle"
style="color:#00CB55;font-size: 8px;"></i></div>
</div>
- <div class="content-item" *ngIf="this.currentResourceInformations.processLimitDate !== undefined">
+ <div class="content-item"
+ *ngIf="this.currentResourceInformations.processLimitDate !== undefined">
<ng-container
*ngIf="this.currentResourceInformations.closingDate !== null; else elseLimitDate">
- <div style="font-weight: bold;" [title]="this.currentResourceInformations.closingDate | fullDate">{{this.lang.closed}} {{this.lang.onRange}} {{this.currentResourceInformations.closingDate |Â timeAgo}} <i
+ <div style="font-weight: bold;"
+ [title]="this.currentResourceInformations.closingDate | fullDate">
+ {{this.lang.closed}} {{this.lang.onRange}}
+ {{this.currentResourceInformations.closingDate |Â timeAgo}} <i
class="fa fa-lock"></i></div>
</ng-container>
<ng-template #elseLimitDate>
diff --git a/src/frontend/app/process/process.component.scss b/src/frontend/app/process/process.component.scss
index 461816ba8faf349932fddafda51555ec8bbcc968..6354c95ff66d8587970fd7ade92a1fde6c1031f6 100644
--- a/src/frontend/app/process/process.component.scss
+++ b/src/frontend/app/process/process.component.scss
@@ -1,386 +1,403 @@
@import "../../css/vars.scss";
.panel-left {
- ::ng-deep.mat-drawer-inner-container {
- display: flex;
- flex-direction: column;
- }
+ ::ng-deep.mat-drawer-inner-container {
+ display: flex;
+ flex-direction: column;
+ }
}
.document-container {
- flex: 1;
-
- padding-left: 50px;
- padding-right: 50px;
+ flex: 1;
- @media (max-width: 768px) {
- padding-left: 0px;
- padding-right: 0px;
- }
+ padding-left: 50px;
+ padding-right: 50px;
- color: white;
- margin-top: 0px;
- width: 100%;
- overflow: hidden;
- background-color: $primary;
+ @media (max-width: 768px) {
+ padding-left: 0px;
+ padding-right: 0px;
+ }
- .content {
- overflow-y: auto;
- overflow-x: hidden;
- position: relative;
- height: 100%;
- min-height: 200px;
+ color: white;
+ margin-top: 0px;
width: 100%;
- border-radius: 0px;
- box-shadow: none;
- border: solid 1px white;
- justify-content: center;
- display: flex;
- align-items: center;
- text-align: center;
- font-weight: bold;
- flex-direction: column;
- }
+ overflow: hidden;
+ background-color: $primary;
+
+ .content {
+ overflow-y: auto;
+ overflow-x: hidden;
+ position: relative;
+ height: 100%;
+ min-height: 200px;
+ width: 100%;
+ border-radius: 0px;
+ box-shadow: none;
+ border: solid 1px white;
+ justify-content: center;
+ display: flex;
+ align-items: center;
+ text-align: center;
+ font-weight: bold;
+ flex-direction: column;
+ }
}
.indexing-form-container {
- height: 100%;
- overflow: auto;
- padding-left: 20px;
- padding-right: 20px;
- padding-bottom: 20px;
-
- @media (max-width: 768px) {
- padding-right: 0px;
- padding-left: 0px;
- }
+ height: 100%;
+ overflow: auto;
+ padding-left: 20px;
+ padding-right: 20px;
+ padding-bottom: 20px;
+
+ @media (max-width: 768px) {
+ padding-right: 0px;
+ padding-left: 0px;
+ }
}
.actions-indexing-form {
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 10px;
- box-shadow: 0 -5px 10px 0 rgba(0, 0, 0, 0.07);
- padding-left: 40px;
- padding-right: 40px;
-
- @media (max-width: 768px) {
- padding-left: 0px;
- padding-right: 0px;
- }
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 10px;
+ box-shadow: 0 -5px 10px 0 rgba(0, 0, 0, 0.07);
+ padding-left: 40px;
+ padding-right: 40px;
+
+ @media (max-width: 768px) {
+ padding-left: 0px;
+ padding-right: 0px;
+ }
}
.emptyModel {
- display: flex;
- flex-direction: column;
- height: 100%;
- align-items: center;
- justify-content: center;
- text-align: center;
- padding-left: 20px;
- padding-right: 20px;
- font-size: 25px;
- opacity: 0.3;
- font-weight: bold;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ padding-left: 20px;
+ padding-right: 20px;
+ font-size: 25px;
+ opacity: 0.3;
+ font-weight: bold;
}
.listModels {
- background: #f9f9f9;
- display: flex;
- padding: 10px;
- padding-left: 40px;
- padding-right: 40px;
+ background: #f9f9f9;
+ display: flex;
+ padding: 10px;
+ padding-left: 40px;
+ padding-right: 40px;
+
+ @media (max-width: 768px) {
+ padding-bottom: 20px;
+ padding-left: 0px;
+ padding-right: 0px;
+ }
- @media (max-width: 768px) {
- padding-bottom: 20px;
- padding-left: 0px;
- padding-right: 0px;
- }
-
- .mat-icon {
- font-size: 20px;
- height: auto;
- }
-
- &-button {
- margin-right: 20px;
- width: 450px !important;
- }
+ .mat-icon {
+ font-size: 20px;
+ height: auto;
+ }
+
+ &-button {
+ margin-right: 20px;
+ width: 450px !important;
+ }
}
::ng-deep.listModels-menu {
- min-width: 450px !important;
+ min-width: 450px !important;
- .mat-menu-item:hover:hover {
- .listModels-menu-badge {
- background: white !important;
- color: $primary !important;
- }
+ .mat-menu-item:hover:hover {
+ .listModels-menu-badge {
+ background: white !important;
+ color: $primary !important;
+ }
- .listModels-menu-delete {
- .mat-icon {
- color: white !important;
- }
+ .listModels-menu-delete {
+ .mat-icon {
+ color: white !important;
+ }
+ }
}
- }
- &-badge {
- font-size: 70%;
- background: $primary;
- padding: 2px;
- border-radius: 20px;
- color: white;
- padding-left: 5px;
- padding-right: 5px;
- font-weight: bold;
- }
+ &-badge {
+ font-size: 70%;
+ background: $primary;
+ padding: 2px;
+ border-radius: 20px;
+ color: white;
+ padding-left: 5px;
+ padding-right: 5px;
+ font-weight: bold;
+ }
- &-delete {
- .mat-icon {
- margin-right: 0px;
+ &-delete {
+ .mat-icon {
+ margin-right: 0px;
+ }
}
- }
- &-selected {
- color: white !important;
- background: $primary;
+ &-selected {
+ color: white !important;
+ background: $primary;
- .listModels-menu-badge {
- background: white !important;
- color: $primary !important;
+ .listModels-menu-badge {
+ background: white !important;
+ color: $primary !important;
+ }
}
- }
}
.emptyAction {
- color: $warn;
- font-size: 14px;
- text-align: center;
- // opacity: 0.3;
+ color: $warn;
+ font-size: 14px;
+ text-align: center;
+ // opacity: 0.3;
}
.loading {
- display: flex;
- height: 100%;
- position: absolute;
- width: 100%;
- background: #ffffffba;
- z-index: 2;
+ display: flex;
+ height: 100%;
+ position: absolute;
+ width: 100%;
+ background: #ffffffba;
+ z-index: 2;
}
.loadingBanner {
- display: flex;
- align-items: center;
- justify-content: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
::ng-deep.menuAction {
- min-width: 350px !important;
+ min-width: 350px !important;
}
.resourceInfo {
- display: flex;
- flex-direction: column;
- //margin: 10px;
- border-radius: 20px;
- border: solid 1px #ccc;
- position: relative;
- padding: 20px;
- background: lighten($primary, 10%);
- width: 100%;
-
- .title {
- white-space: pre;
- overflow: hidden;
- max-width: 85%;
- text-overflow: ellipsis;
- z-index: 1;
- font-size: 20px;
- font-weight: bold;
- letter-spacing: 2px;
- position: absolute;
- top: -18px;
- left: 20px;
- padding: 0px;
- margin: 0px;
- color: white;
-
- &-divider {
- position: absolute;
- width: 99%;
- z-index: -1;
- top: 17px;
- background: lighten($primary, 10%);
- height: 1px;
- }
- }
-
- .content {
display: flex;
- font-size: 15px;
- overflow: auto;
+ flex-direction: column;
+ //margin: 10px;
+ border-radius: 20px;
+ border: solid 1px #ccc;
+ position: relative;
+ padding: 20px;
+ background: lighten($primary, 10%);
+ width: 100%;
- &-item {
- flex-direction: column;
- align-items: center;
- justify-content: center;
- display: flex;
- flex: 1;
- padding-left: 20px;
- padding-right: 20px;
- white-space: pre;
-
- &-value {
+ .title {
+ white-space: pre;
+ overflow: hidden;
+ max-width: 85%;
+ text-overflow: ellipsis;
+ z-index: 1;
+ font-size: 20px;
font-weight: bold;
- display: flex;
- align-items: center;
+ letter-spacing: 2px;
+ position: absolute;
+ top: -18px;
+ left: 20px;
+ padding: 0px;
+ margin: 0px;
+ color: white;
+
+ &-divider {
+ position: absolute;
+ width: 99%;
+ z-index: -1;
+ top: 17px;
+ background: lighten($primary, 10%);
+ height: 1px;
+ }
+ }
- i {
- padding-left: 10px;
+ .content {
+ display: flex;
+ font-size: 15px;
+ overflow: auto;
+
+ &-item {
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ display: flex;
+ flex: 1;
+ padding-left: 20px;
+ padding-right: 20px;
+ white-space: pre;
+
+ &-value {
+ font-weight: bold;
+ display: flex;
+ align-items: center;
+
+ i {
+ padding-left: 10px;
+ }
+ }
}
- }
}
- }
}
.processTool {
- width: 100%;
- display: grid;
- grid-template-columns: 20% 20% 20% 20% 20%;
- background-color: #fff;
- color: #dedede;
- border: solid 1px #dedede;
- padding: 5px;
- border-radius: 15px;
- text-align: center;
-
- &-module {
- display: flex;
- justify-content: center;
- flex-direction: column;
+ width: 100%;
+ display: grid;
+ grid-template-columns: 20% 20% 20% 20% 20%;
+ background-color: #fff;
+ color: #dedede;
+ border: solid 1px #dedede;
padding: 5px;
- border-right: solid 1px #dedede;
- cursor: pointer;
+ border-radius: 15px;
+ text-align: center;
- transition: all 0.3s;
+ &-module {
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ padding: 5px;
+ border-right: solid 1px #dedede;
+ cursor: pointer;
- &:nth-child(-n + 5) {
- border-bottom: solid 1px #dedede;
- }
+ transition: all 0.3s;
- &:nth-child(5n) {
- border-right: none;
- }
+ &:nth-child(-n + 5) {
+ border-bottom: solid 1px #dedede;
+ }
- i {
- font-size: 30px;
- }
+ &:nth-child(5n) {
+ border-right: none;
+ }
- span {
- font-size: 10px;
- }
+ i {
+ font-size: 30px;
+ }
- &-active {
- font-weight: bold;
- color: $primary;
- }
+ span {
+ font-size: 10px;
+ }
+
+ &-active {
+ font-weight: bold;
+ color: $primary;
+ }
- &:hover {
- transition: all 0.3s;
- color: $primary;
+ &:hover {
+ transition: all 0.3s;
+ color: $primary;
+ }
}
- }
}
.banner {
- .title {
- cursor: pointer;
- }
+ .title {
+ cursor: pointer;
+ }
- .content {
- overflow: auto;
- max-height: 300px;
- }
+ .content {
+ overflow: auto;
+ max-height: 300px;
+ }
}
.jiggle:active {
- i {
- -webkit-animation: jiggle 0.2s;
- -moz-animation-duration: 0.2s;
- -moz-animation-name: jiggle;
- -moz-animation-iteration-count: 2;
- -webkit-transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- }
+ i {
+ -webkit-animation: jiggle 0.2s;
+ -moz-animation-duration: 0.2s;
+ -moz-animation-name: jiggle;
+ -moz-animation-iteration-count: 2;
+ -webkit-transform: rotate(0deg);
+ -moz-transform: rotate(0deg);
+ }
}
@-moz-keyframes jiggle {
- 0% {
- -moz-transform: rotate(-9deg);
- }
+ 0% {
+ -moz-transform: rotate(-9deg);
+ }
- 50% {
- -moz-transform: rotate(9deg);
- }
+ 50% {
+ -moz-transform: rotate(9deg);
+ }
}
@-webkit-keyframes jiggle {
- 0% {
- -webkit-transform: rotate(-9deg);
- }
+ 0% {
+ -webkit-transform: rotate(-9deg);
+ }
- 50% {
- -webkit-transform: rotate(9deg);
- }
+ 50% {
+ -webkit-transform: rotate(9deg);
+ }
}
.modal-module {
- background: white;
- position: absolute;
- right: 50px;
- z-index: 1;
- box-shadow: rgba(0, 0, 0, 0.75) 10px 10px 21px -15px;
- border-radius: 5px;
- padding: 10px;
- width: 400px;
-
- &-title {
- cursor: move;
- color: white;
- padding-left: 10px;
- padding-right: 10px;
- background: $secondary;
- margin-top: -10px;
- margin-left: -10px;
- margin-right: -10px;
- border-top-left-radius: 5px;
- border-top-right-radius: 5px;
- display: flex;
- align-items: center;
+ background: white;
+ position: absolute;
+ right: 50px;
+ z-index: 1;
+ box-shadow: rgba(0, 0, 0, 0.75) 10px 10px 21px -15px;
+ border-radius: 5px;
+ padding: 10px;
+ width: 400px;
+
+ &-title {
+ cursor: move;
+ color: white;
+ padding-left: 10px;
+ padding-right: 10px;
+ background: $secondary;
+ margin-top: -10px;
+ margin-left: -10px;
+ margin-right: -10px;
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ display: flex;
+ align-items: center;
- span {
- display: flex;
- flex: 1;
+ span {
+ display: flex;
+ flex: 1;
+ }
}
- }
- &-content {
- overflow: auto;
- max-height: 500px;
- }
+ &-content {
+ overflow: auto;
+ max-height: 500px;
+ }
}
+
.openedModal {
- display: flex;
- flex-direction: column;
- height: 100%;
- justify-content: center;
- align-items: center;
- font-size: 30px;
- font-weight: bold;
- opacity: 0.2;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ justify-content: center;
+ align-items: center;
+ font-size: 30px;
+ font-weight: bold;
+ opacity: 0.2;
}
.largeModal {
- width: 560px;
+ width: 560px;
}
+
+.menuTitle {
+ display: flex;
+ padding-left: 20px;
+ align-items: center;
+ color: $primary;
+ font-weight: bold;
+}
+
+.smallInput {
+ padding: 10px;
+
+ ::ng-deep.mat-form-field-wrapper {
+ padding-bottom: 0px;
+ }
+}
\ No newline at end of file