Skip to content
Snippets Groups Projects
Commit b6962a29 authored by Alex ORLUC's avatar Alex ORLUC
Browse files

FEAT #13671 TIME 2:40 fix template css installer

parent 21894743
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 257 additions and 193 deletions
src/frontend/app/installer/installer.component.html
+ 104
− 149
View file @ b6962a29
<mat-horizontal-stepper linear #stepper style="height: 100vh;overflow: auto;" (selectionChange)="initStep($event)">
<mat-step>
<ng-template matStepLabel>Installation</ng-template>
<div class="stepContainer">
<div class="stepContent">
<app-welcome></app-welcome>
</div>
<div style="display: flex;padding: 10px;">
<div style="flex: 1;text-align: left;">
</div>
<div style="flex: 1;text-align: right;">
<button mat-button matStepperNext style="font-size: 35px;">
suivant <i class="fa fa-arrow-circle-right"></i>
</button>
</div>
</div>
</div>
</mat-step>
<mat-step [stepControl]="appPrerequisite.getFormGroup()">
<ng-template matStepLabel>Prérequis</ng-template>
<div class="stepContainer">
<div class="stepContent">
<app-prerequisite #appPrerequisite></app-prerequisite>
</div>
<div style="display: flex;padding: 10px;">
<div style="flex: 1;text-align: left;">
<button mat-button matStepperPrevious style="font-size: 35px;">
<i class="fa fa-arrow-circle-left"></i> précédent
</button>
</div>
<div style="flex: 1;text-align: right;">
<button mat-button matStepperNext style="font-size: 35px;"
[disabled]="!appPrerequisite.isValidStep()">
suivant <i class="fa fa-arrow-circle-right"></i>
</button>
</div>
</div>
</div>
</mat-step>
<mat-step [stepControl]="appDatabase.getFormGroup()">
<ng-template matStepLabel>Base de données</ng-template>
<div class="stepContainer">
<div class="stepContent">
<app-database #appDatabase></app-database>
</div>
<div style="display: flex;padding: 10px;">
<div style="flex: 1;text-align: left;">
<button mat-button matStepperPrevious style="font-size: 35px;">
<i class="fa fa-arrow-circle-left"></i> précédent
</button>
</div>
<div style="flex: 1;text-align: right;">
<button mat-button matStepperNext style="font-size: 35px;"
[disabled]="!appDatabase.isValidStep()">
suivant <i class="fa fa-arrow-circle-right"></i>
</button>
</div>
</div>
</div>
</mat-step>
<mat-step [stepControl]="appDocservers.getFormGroup()">
<ng-template matStepLabel>Stockage</ng-template>
<div class="stepContainer">
<div class="stepContent">
<app-docservers #appDocservers></app-docservers>
</div>
<div style="display: flex;padding: 10px;">
<div style="flex: 1;text-align: left;">
<button mat-button matStepperPrevious style="font-size: 35px;">
<i class="fa fa-arrow-circle-left"></i> précédent
</button>
</div>
<div style="flex: 1;text-align: right;">
<button mat-button matStepperNext style="font-size: 35px;"
[disabled]="!appDocservers.isValidStep()">
suivant <i class="fa fa-arrow-circle-right"></i>
</button>
</div>
</div>
</div>
</mat-step>
<mat-step [stepControl]="appCustomization.getFormGroup()">
<ng-template matStepLabel>Personnalisation</ng-template>
<div class="stepContainer">
<div class="stepContent">
<app-customization #appCustomization></app-customization>
</div>
<div style="display: flex;padding: 10px;">
<div style="flex: 1;text-align: left;">
<button mat-button matStepperPrevious style="font-size: 35px;">
<i class="fa fa-arrow-circle-left"></i> précédent
</button>
</div>
<div style="flex: 1;text-align: right;">
<button mat-button matStepperNext style="font-size: 35px;"
[disabled]="!appCustomization.isValidStep()">
suivant <i class="fa fa-arrow-circle-right"></i>
</button>
</div>
</div>
</div>
</mat-step>
<mat-step [stepControl]="appUseradmin.getFormGroup()">
<ng-template matStepLabel>Utilisateur système</ng-template>
<div class="stepContainer">
<div class="stepContent">
<app-useradmin #appUseradmin></app-useradmin>
</div>
<div style="display: flex;padding: 10px;">
<div style="flex: 1;text-align: left;">
<button mat-button matStepperPrevious style="font-size: 35px;">
<i class="fa fa-arrow-circle-left"></i> précédent
</button>
</div>
<div style="flex: 1;text-align: right;">
<button (click)="endInstall();" mat-button style="font-size: 35px;"
[disabled]="!appUseradmin.isValidStep()">
suivant <i class="fa fa-arrow-circle-right"></i>
</button>
</div>
</div>
</div>
</mat-step>
<mat-step optional>
<ng-template matStepLabel>Serveur mail</ng-template>
Bonjour
<div>
<button mat-button matStepperPrevious>Back</button>
</div>
</mat-step>
<ng-template matStepperIcon="edit">
<mat-icon class="fa fa-check stepIcon"></mat-icon>
</ng-template>
<ng-template matStepperIcon="done">
<mat-icon class="fa fa-check stepIcon"></mat-icon>
</ng-template>
<ng-template matStepperIcon="error">
<mat-icon class="fa fa-times stepIcon" style="color: red;font-size: 15px !important;"></mat-icon>
</ng-template>
</mat-horizontal-stepper>
<!--<mat-sidenav-container autosize class="maarch-container">
<mat-sidenav-container autosize class="maarch-container">
<mat-sidenav-content>
<div class="bg-head">
<div class="bg-head-content" [class.fullContainer]="appService.getViewMode()">
toto
</div>
</div>
<div class="container" [class.fullContainer]="appService.getViewMode()">
<div class="container-content">
toto
<div class="container-content" style="overflow: hidden;">
<mat-horizontal-stepper [@.disabled]="true" linear #stepper style="height: 100vh;overflow: auto;" (selectionChange)="initStep($event)">
<mat-step>
<ng-template matStepLabel>Installation</ng-template>
<div class="stepContainer">
<div class="stepContent">
<app-welcome></app-welcome>
</div>
<button mat-fab matStepperNext class="nextStepButton" color="primary">
<mat-icon class="fa fa-arrow-right"></mat-icon>
</button>
</div>
</mat-step>
<mat-step [stepControl]="appPrerequisite.getFormGroup()">
<ng-template matStepLabel>{{lang.prerequisite}}</ng-template>
<div class="stepContainer">
<div class="stepContent">
<app-prerequisite #appPrerequisite></app-prerequisite>
</div>
<button mat-fab matStepperPrevious class="previousStepButton" color="primary">
<mat-icon class="fa fa-arrow-left"></mat-icon>
</button>
<button mat-fab matStepperNext class="nextStepButton" color="primary" [disabled]="!appPrerequisite.isValidStep()">
<mat-icon class="fa fa-arrow-right"></mat-icon>
</button>
</div>
</mat-step>
<mat-step [stepControl]="appDatabase.getFormGroup()">
<ng-template matStepLabel>Base de données</ng-template>
<div class="stepContainer">
<div class="stepContent">
<app-database #appDatabase></app-database>
</div>
<button mat-fab matStepperPrevious class="previousStepButton" color="primary">
<mat-icon class="fa fa-arrow-left"></mat-icon>
</button>
<button mat-fab matStepperNext class="nextStepButton" color="primary" [disabled]="!appDatabase.isValidStep()">
<mat-icon class="fa fa-arrow-right"></mat-icon>
</button>
</div>
</mat-step>
<mat-step [stepControl]="appDocservers.getFormGroup()">
<ng-template matStepLabel>Stockage</ng-template>
<div class="stepContainer">
<div class="stepContent">
<app-docservers #appDocservers></app-docservers>
</div>
<button mat-fab matStepperPrevious class="previousStepButton" color="primary">
<mat-icon class="fa fa-arrow-left"></mat-icon>
</button>
<button mat-fab matStepperNext class="nextStepButton" color="primary" [disabled]="!appDocservers.isValidStep()">
<mat-icon class="fa fa-arrow-right"></mat-icon>
</button>
</div>
</mat-step>
<mat-step [stepControl]="appCustomization.getFormGroup()">
<ng-template matStepLabel>Personnalisation</ng-template>
<div class="stepContainer">
<div class="stepContent">
<app-customization #appCustomization></app-customization>
</div>
<button mat-fab matStepperPrevious class="previousStepButton" color="primary">
<mat-icon class="fa fa-arrow-left"></mat-icon>
</button>
<button mat-fab matStepperNext class="nextStepButton" color="primary" [disabled]="!appCustomization.isValidStep()">
<mat-icon class="fa fa-arrow-right"></mat-icon>
</button>
</div>
</mat-step>
<mat-step [stepControl]="appUseradmin.getFormGroup()">
<ng-template matStepLabel>Utilisateur système</ng-template>
<div class="stepContainer">
<div class="stepContent">
<app-useradmin #appUseradmin></app-useradmin>
</div>
<button mat-fab matStepperPrevious class="previousStepButton" color="primary">
<mat-icon class="fa fa-arrow-left"></mat-icon>
</button>
<button mat-fab matStepperNext class="nextStepButton" color="primary" [disabled]="!appUseradmin.isValidStep()">
<mat-icon class="fa fa-arrow-right"></mat-icon>
</button>
</div>
</mat-step>
<mat-step optional>
<ng-template matStepLabel>Serveur mail</ng-template>
Bonjour
<div>
<button mat-button matStepperPrevious>Back</button>
</div>
</mat-step>
<ng-template matStepperIcon="edit">
<mat-icon class="fa fa-check stepIcon"></mat-icon>
</ng-template>
<ng-template matStepperIcon="done">
<mat-icon class="fa fa-check stepIcon"></mat-icon>
</ng-template>
<ng-template matStepperIcon="error">
<mat-icon class="fa fa-times stepIcon" style="color: red;font-size: 15px !important;"></mat-icon>
</ng-template>
</mat-horizontal-stepper>
</div>
</div>
</mat-sidenav-content>
</mat-sidenav-container>-->
\ No newline at end of file
</mat-sidenav-container>
\ No newline at end of file
src/frontend/app/installer/installer.component.scss
+ 79
− 3
View file @ b6962a29
.mat-stepper-horizontal {
background: #135f7f;
color: white;
::ng-deep.mat-stepper-horizontal {
height: 100% !important;
}
.container {
padding-left: 80px !important;
padding-right: 80px !important;
}
.previousStepButton {
position: fixed;
top: 50%;
left: 10px;
transform: translateY(-50%);
.mat-icon {
font-size: 25px;
height:auto;
width: auto;
}
}
.nextStepButton {
position: fixed;
top: 50%;
right: 13px;
transform: translateY(-50%);
.mat-icon {
font-size: 25px;
height:auto;
width: auto;
}
}
/*.mat-stepper-horizontal {
display: flex;
flex-direction: column;
......@@ -20,6 +52,20 @@
}
}
::ng-deep.mat-step-icon {
background-color: white;
color: #135f7f;
}
::ng-deep.mat-step-label-active {
opacity: 1;
}
::ng-deep.mat-step-label {
color: white;
opacity: 0.5;
}
.stepIcon {
font-size: 10px !important;
height: auto !important;
......@@ -65,4 +111,34 @@
.formStep {
display: contents;
}*/
::ng-deep.mat-step-icon {
background-color: white;
color: #135f7f;
}
::ng-deep.mat-step-label-active {
opacity: 1 !important;
}
::ng-deep.mat-step-label {
color: white;
opacity: 0.5;
}
.stepIcon {
font-size: 10px !important;
height: auto !important;
width: auto !important;
}
::ng-deep.mat-step-label {
transition: all 0.2s;
}
::ng-deep.mat-step-label-selected {
font-size: 160%;
transition: all 0.2s;
opacity: 1;
}
\ No newline at end of file
src/frontend/app/installer/installer.component.ts
+ 19
− 2
View file @ b6962a29
import { Component, OnInit, ViewChild } from '@angular/core';
import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
import { HeaderService } from '../../service/header.service';
import { NotificationService } from '../notification.service';
import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
import { MatStepper } from '@angular/material/stepper';
import { AppService } from '../../service/app.service';
import { LANG } from '../translate.component';
@Component({
templateUrl: './installer.component.html',
......@@ -13,7 +15,9 @@ import { MatStepper } from '@angular/material/stepper';
provide: STEPPER_GLOBAL_OPTIONS, useValue: { showError: true }
}]
})
export class InstallerComponent implements OnInit {
export class InstallerComponent implements OnInit, AfterViewInit {
lang: any = LANG;
@ViewChild('stepper', { static: true }) stepper: MatStepper;
......@@ -22,12 +26,25 @@ export class InstallerComponent implements OnInit {
private router: Router,
private headerService: HeaderService,
private notify: NotificationService,
public appService: AppService,
) { }
ngOnInit(): void {
this.headerService.hideSideBar = true;
}
ngAfterViewInit(): void {
$('.mat-horizontal-stepper-header-container').insertBefore('.bg-head-content');
$('.mat-step-icon').css('background-color', 'white');
$('.mat-step-icon').css('color', '#135f7f');
$('.mat-step-label').css('color', 'white');
/*$('.mat-step-label').css('opacity', '0.5');
$('.mat-step-label-active').css('opacity', '1');*/
/*$('.mat-step-label-selected').css('font-size', '160%');
$('.mat-step-label-selected').css('transition', 'all 0.2s');
$('.mat-step-label').css('transition', 'all 0.2s');*/
}
isValidStep() {
return false;
}
......
src/frontend/app/installer/prerequisite/prerequisite.component.html
+ 20
− 8
View file @ b6962a29
<div class="stepContent">
<h2 class="stepContentTitle"><i class="fas fa-check-square"></i> {{lang.prerequisite}}</h2>
<p>
{{lang.stepPrerequisite_desc}} : <a href="{{docMaarchUrl}}" target="_blank" style="text-decoration: underline;color: white !important;">{{docMaarchUrl}}</a>
</p>
<div class="alert-message alert-message-info" role="alert" style="margin-top: 30px;min-width: 100%;">
{{lang.stepPrerequisite_desc}} : <a href="{{docMaarchUrl}}" target="_blank" class="link">{{docMaarchUrl}}</a>
</div>
<mat-list style="background: white;" *ngFor="let groupPackage of packagesList | keyvalue">
<div mat-subheader>{{lang[groupPackage.key]}}</div>
<mat-list-item *ngFor="let package of packagesList[groupPackage.key]">
<mat-icon mat-list-icon class="fa iconCheckPackage icon_{{package.state}}"></mat-icon>
<div mat-line style="font-size: 120%;">{{lang['install_'+package.label]}}</div>
<div mat-line style="color:#666;">{{lang['install_'+package.label+'_desc']}}</div>
</mat-list-item>
<mat-grid-list cols="3" rowHeight="50px">
<mat-grid-tile *ngFor="let package of packagesList[groupPackage.key]">
<mat-list-item>
<mat-icon mat-list-icon class="fa iconCheckPackage icon_{{package.state}}"></mat-icon>
<div mat-line class="packageName">{{lang['install_'+package.label]}} <i class="fa fa-info-circle" [title]="lang['install_'+package.label+'_desc']"></i></div>
<!--<div mat-line style="color:#666;">{{lang['install_'+package.label+'_desc']}}</div>-->
</mat-list-item>
</mat-grid-tile>
</mat-grid-list>
<!--<div style="display: flex;">
<mat-list-item *ngFor="let package of packagesList[groupPackage.key]">
<mat-icon mat-list-icon class="fa iconCheckPackage icon_{{package.state}}"></mat-icon>
<div mat-line style="font-size: 120%;">{{lang['install_'+package.label]}}</div>
<div mat-line style="color:#666;">{{lang['install_'+package.label+'_desc']}}</div>
</mat-list-item>
</div>-->
</mat-list>
</div>
src/frontend/app/installer/prerequisite/prerequisite.component.scss
+ 23
− 2
View file @ b6962a29
@import '../../../css/vars.scss';
.stepContent {
max-width: 850px;
// max-width: 850px;
margin: auto;
.stepContentTitle {
color: $primary;
margin-bottom: 30px;
border-bottom: solid 1px;
padding: 0;
}
}
.packageItem {
flex: 1 !important;
}
.iconCheckPackage {
background: white;
......@@ -45,4 +51,19 @@
.icon_ko:before {
content: "\f111";
}
.link {
text-decoration: underline;
color: $primary !important;
}
.packageName {
font-size: 120% !important;
white-space: normal !important;
i {
cursor: help;
opacity: 0.5;
color: $primary;
}
}
\ No newline at end of file
src/frontend/app/installer/welcome/welcome.component.html
+ 2
− 3
View file @ b6962a29
<div class="stepContent">
<h2 class="stepContentTitle">Bienvenue sur Maarch Courrier 20.10!</h2>
<div style="text-align: center;">
<mat-icon class="maarchLogoWhiteFull" svgIcon="maarchLogoWhiteFull"></mat-icon>
<mat-icon class="maarchLogoFull" svgIcon="maarchLogoFull"></mat-icon>
</div>
<mat-form-field appearance="outline" floatLabel="never">
<mat-label>Choisissez la langue de l'application : </mat-label>
......@@ -44,7 +44,6 @@
www.maarch.com
</a>
<p style="font-style: italic;padding-top: 30px;text-align: right;">
<b>Maarch Courrier</b> est sous <a href="https://www.gnu.org/licenses/gpl-3.0.html" target="_blank"
style="text-decoration: underline;color: white;">Licence publique générale GNU</a>
<b>Maarch Courrier</b> est sous <a href="https://www.gnu.org/licenses/gpl-3.0.html" target="_blank" class="link">Licence publique générale GNU</a>
</p>
</div>
src/frontend/app/installer/welcome/welcome.component.scss
+ 10
− 26
View file @ b6962a29
@import '../../../css/vars.scss';
.stepContent {
max-width: 850px;
//max-width: 850px;
margin: auto;
.stepContentTitle {
color: $primary;
margin-bottom: 30px;
border-bottom: solid 1px;
padding: 0;
}
.maarchLogoWhiteFull{
.maarchLogoFull{
width: 300px;
height: 100px;
}
......@@ -17,28 +20,9 @@
margin-top: 10px;
margin-bottom: 10px;
}
::ng-deep .mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick {
/*change color of label*/
color: white !important;
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
color: white !important;
//background: white;
}
::ng-deep.mat-form-field-underline {
/*change color of underline*/
//background-color: white !important;
}
::ng-deep.mat-form-field-ripple {
/*change color of underline when focused*/
//background-color: white !important;
}
::ng-deep.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label, .mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
color: white;
}
}
.link {
text-decoration: underline;
color: $primary !important;
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment