UNOV/mycontrolpanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CT # ToolBar + Sign Modal

Browse Source 
Chipo toolbar
Réalisation Modal Sign in
This commit is contained in:
youbertt 2019-07-11 23:03:57 +02:00
parent a03ba63cc2
commit ffc3e3a4cd
4 changed files with 113 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/app.component.css
View File

@ -22,9 +22,6 @@ p-toolbar {
border:none; border:none;
} }
p-toolbar .ui-button { p-toolbar .ui-button {
background-color: transparent ; background-color: transparent ;
opacity: 1; opacity: 1;
@ -32,3 +29,8 @@ p-toolbar .ui-button {
border: none; border: none;
} }
p-dialog div > * {
margin: auto !important;
}

90
src/app/app.component.html
View File

@ -12,15 +12,14 @@
<button pButton type="button" label="SIGN UP" icon="pi pi-pencil" iconPos="right" (click)="signUp()"></button> <button pButton type="button" label="SIGN UP" icon="pi pi-pencil" iconPos="right" (click)="signUp()"></button>
<button pButton type="button" label="LOG IN" icon="pi pi-sign-in" iconPos="right" (click)="logIn()"></button> <button pButton type="button" label="LOG IN" icon="pi pi-sign-in" iconPos="right" (click)="logIn()"></button>
<p-splitButton *ngIf="connected" class="btnDeMerde" type="button" label="Nom du gars"></p-splitButton>
<p-splitButton *ngIf="Connected" class="btnDeMerde" type="button" label="Nom du gars"></p-splitButton>
</div> </div>
</p-toolbar> </p-toolbar>
<p-dialog [(visible)]="display" [style]=""> <p-dialog id="modalLogIn" [(visible)]="displayLogInModal">
<p-header> <p-header>
Log In Log In
</p-header> </p-header>
@ -39,6 +38,91 @@
</p-footer> </p-footer>
</p-dialog> </p-dialog>
<p-dialog [style]="{'width': '450px'}" [modal]=true id="modalSignIn"[(visible)]="displaySignInModal">
<p-header>
Sign In
</p-header>
<div class="ui-inputgroup">
<div>
<span class="ui-inputgroup-addon"><i class="fa fa-user"></i></span>
<input type="text" pInputText placeholder="Last name">
</div>
</div>
<div class="ui-inputgroup">
<div>
<span class="ui-inputgroup-addon"><i class="fa fa-user"></i></span>
<input type="text" pInputText placeholder="First name">
</div>
</div>
<div class="ui-inputgroup" *ngIf="connected">
<div>
<span class="ui-inputgroup-addon"><i class="fas fa-gift"></i></span>
<input type="date" pInputText placeholder="Birthday">
</div>
</div>
<div class="ui-inputgroup">
<div>
<span class="ui-inputgroup-addon"><i class="fas fa-at"></i></span>
<input type="email" pInputText placeholder="E-mail">
</div>
</div>
<div class="ui-inputgroup" *ngIf="connected">
<div>
<span class="ui-inputgroup-addon"><i class="fa fa-home"></i></span>
<input type="text" pInputText placeholder="Address">
</div>
</div>
<div class="ui-inputgroup" *ngIf="connected">
<div>
<span class="ui-inputgroup-addon"><i class="fa fa-home"></i></span>
<input type="text" pInputText placeholder="City">
</div>
</div>
<div class="ui-inputgroup" *ngIf="connected">
<div>
<span class="ui-inputgroup-addon"><i class="fa fa-home"></i></span>
<input type="text" pInputText placeholder="State">
</div>
</div>
<div class="ui-inputgroup" *ngIf="connected">
<div>
<span class="ui-inputgroup-addon"><i class="fa fa-home"></i></span>
<input type="text" pInputText placeholder="Postcode">
</div>
</div>
<div class="ui-inputgroup" *ngIf="connected">
<div>
<span class="ui-inputgroup-addon"><i class="fas fa-globe-europe"></i></span>
<input type="text" pInputText placeholder="Country">
</div>
</div>
<div class="ui-inputgroup" *ngIf="connected">
<div>
<span class="ui-inputgroup-addon"><i class="fas fa-globe-europe"></i></span>
<input type="text" pInputText placeholder="Timezone">
</div>
</div>
<div class="ui-inputgroup">
<div>
<span class="ui-inputgroup-addon"><i class="fas fa-key"></i></span>
<input type="password" pInputText placeholder="Password">
</div>
</div>
<div class="ui-inputgroup">
<div>
<span class="ui-inputgroup-addon"><i class="fas fa-key"></i></span>
<input type="password" pInputText placeholder="Confirm password">
</div>
</div>
<p-footer>
<button pButton type="button" label="Identify"></button>
</p-footer>
</p-dialog>
<router-outlet></router-outlet> <router-outlet></router-outlet>

15
src/app/app.component.ts
View File

@ -12,8 +12,11 @@ export class AppComponent implements OnInit{
items : MenuItem[]; items : MenuItem[];
public Connected : false; connected : boolean = false;
display: boolean = false; displayLogInModal: boolean = false;
displaySignInModal: boolean = false;
displayPersonalField: boolean = false;
birthday: Date;
constructor(){} constructor(){}
ngOnInit(){ ngOnInit(){
@ -26,8 +29,14 @@ export class AppComponent implements OnInit{
public logIn() public logIn()
{ {
this.display = true; this.displayLogInModal = true;
this.connected = true;
console.log('helloooo'); console.log('helloooo');
// change route -> /login // change route -> /login
} }
public signUp()
{
this.displaySignInModal = true;
}
} }

10
src/app/app.module.ts
View File

@ -16,6 +16,10 @@ import { ButtonModule } from 'primeng/button';
import { SplitButtonModule } from 'primeng/splitbutton'; import { SplitButtonModule } from 'primeng/splitbutton';
import {DialogModule} from 'primeng/dialog'; import {DialogModule} from 'primeng/dialog';
import {InputTextModule} from 'primeng/inputtext'; import {InputTextModule} from 'primeng/inputtext';
import {CalendarModule} from 'primeng/calendar';
import { FormsModule } from '@angular/forms';
@ -40,7 +44,11 @@ import {InputTextModule} from 'primeng/inputtext';
ButtonModule, ButtonModule,
SplitButtonModule, SplitButtonModule,
DialogModule, DialogModule,
InputTextModule InputTextModule,
CalendarModule,
FormsModule,
], ],