Add custom data survey buttons
This commit is contained in:
Pablo Bonilla
parent
70ae52ffc6
commit
3686de93a8
|
|
@ -167,219 +167,211 @@
|
|||
-------------------------------------------------------------------------------
|
||||
-->
|
||||
|
||||
<div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="row w-75 pb-lg-5 pr-lg-5 mb-5" style="border-bottom: 1px solid #e7ebf3">
|
||||
<div class="col-lg-4 mr-lg-5">
|
||||
<div class="row">
|
||||
<div class="w-100">
|
||||
<p><b>Perfil</b></p>
|
||||
</div>
|
||||
<div>
|
||||
<p>Información general de su usuario, el correo electrónico es su identificador en DataSurvey.</p>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="row w-75 pb-lg-5 pr-lg-5 mb-5" style="border-bottom: 1px solid #e7ebf3">
|
||||
<div class="col-lg-4 mr-lg-5">
|
||||
<div class="row">
|
||||
<div class="w-100">
|
||||
<p><b>Perfil</b></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form -->
|
||||
<div class="col-lg ml-lg-5 mr-lg-5 pr-lg-5" name="editForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="editForm">
|
||||
<div class="row mb-2">
|
||||
<div class="form-group w-100">
|
||||
<label class="form-control-label" for="field_email">Correo electrónico</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="email"
|
||||
id="field_email"
|
||||
data-cy="email"
|
||||
formControlName="email"
|
||||
[readonly]="true"
|
||||
/>
|
||||
<div *ngIf="editForm.get('email')!.invalid && (editForm.get('email')!.dirty || editForm.get('email')!.touched)">
|
||||
<small
|
||||
class="form-text text-danger"
|
||||
*ngIf="editForm.get('email')?.errors?.required"
|
||||
jhiTranslate="entity.validation.required"
|
||||
>
|
||||
This field is required.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<div class="form-group w-100">
|
||||
<label class="form-control-label" jhiTranslate="dataSurveyApp.usuarioExtra.nombre" for="field_nombre">Nombre</label>
|
||||
<input type="text" class="form-control" name="nombre" id="field_nombre" data-cy="nombre" formControlName="nombre" />
|
||||
<div *ngIf="editForm.get('nombre')!.invalid && (editForm.get('nombre')!.dirty || editForm.get('nombre')!.touched)">
|
||||
<small
|
||||
class="form-text text-danger"
|
||||
*ngIf="editForm.get('nombre')?.errors?.required"
|
||||
jhiTranslate="entity.validation.required"
|
||||
>
|
||||
This field is required.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<div class="form-group w-100">
|
||||
<label class="form-control-label" jhiTranslate="dataSurveyApp.usuarioExtra.fechaNacimiento" for="field_fechaNacimiento"
|
||||
>Fecha de nacimiento</label
|
||||
>
|
||||
<div class="d-flex">
|
||||
<input
|
||||
id="field_fechaNacimiento"
|
||||
data-cy="fechaNacimiento"
|
||||
type="datetime-local"
|
||||
class="form-control"
|
||||
name="fechaNacimiento"
|
||||
formControlName="fechaNacimiento"
|
||||
placeholder="YYYY-MM-DD HH:mm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<div class="form-group w-100">
|
||||
<label for="iconoPerfil">Ícono de perfil</label>
|
||||
<div class="d-flex">
|
||||
<jhi-swiper style="width: 22.5rem !important" [data]="profileIcons" (onSelectEvent)="selectIcon($event)"></jhi-swiper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<button type="button" id="cancel-save" data-cy="entityCreateCancelButton" class="btn btn-secondary" (click)="previousState()">
|
||||
<fa-icon icon="ban"></fa-icon> <span jhiTranslate="entity.action.cancel">Cancel</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
id="save-entity"
|
||||
data-cy="entityCreateSaveButton"
|
||||
[disabled]="editForm.invalid || isSaving"
|
||||
class="btn btn-primary"
|
||||
>
|
||||
<fa-icon icon="save"></fa-icon> <span jhiTranslate="entity.action.save">Save</span>
|
||||
</button>
|
||||
<div>
|
||||
<p>Información general de su usuario, el correo electrónico es su identificador en DataSurvey.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row w-75 pb-lg-5 pr-lg-5">
|
||||
<div class="col-lg-4 mr-lg-5">
|
||||
<div class="row">
|
||||
<div class="w-100">
|
||||
<p><b>Contraseña</b></p>
|
||||
</div>
|
||||
<div>
|
||||
<p>Utilice una contraseña segura al realizar el cambio, este dato debe ser secreto ya que provee acceso a su cuenta.</p>
|
||||
<!-- Form -->
|
||||
<form class="col-lg ml-lg-5 mr-lg-5 pr-lg-5" name="editForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="editForm">
|
||||
<div class="row mb-2">
|
||||
<div class="form-group w-100">
|
||||
<label class="form-control-label" for="field_email">Correo electrónico</label>
|
||||
<input type="text" class="form-control" name="email" id="field_email" data-cy="email" formControlName="email" [readonly]="true" />
|
||||
<div *ngIf="editForm.get('email')!.invalid && (editForm.get('email')!.dirty || editForm.get('email')!.touched)">
|
||||
<small class="form-text text-danger" *ngIf="editForm.get('email')?.errors?.required" jhiTranslate="entity.validation.required">
|
||||
This field is required.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form -->
|
||||
<div class="col-lg ml-lg-5 mr-lg-5 pr-lg-5" name="passwordForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="passwordForm">
|
||||
<div class="row mb-3 pb-3" style="border-bottom: 1px solid #e7ebf3">
|
||||
<div class="form-group w-100">
|
||||
<label class="form-control-label" for="field_password">Contraseña actual</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="password"
|
||||
id="field_password"
|
||||
data-cy="password"
|
||||
formControlName="password"
|
||||
placeholder="Su contraseña actual"
|
||||
/>
|
||||
<div
|
||||
*ngIf="
|
||||
passwordForm.get('password')!.invalid && (passwordForm.get('password')!.dirty || passwordForm.get('password')!.touched)
|
||||
"
|
||||
>
|
||||
<small
|
||||
class="form-text text-danger"
|
||||
*ngIf="passwordForm.get('password')?.errors?.required"
|
||||
jhiTranslate="entity.validation.required"
|
||||
>
|
||||
This field is required.
|
||||
</small>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<div class="form-group w-100">
|
||||
<label class="form-control-label" jhiTranslate="dataSurveyApp.usuarioExtra.nombre" for="field_nombre">Nombre</label>
|
||||
<input type="text" class="form-control" name="nombre" id="field_nombre" data-cy="nombre" formControlName="nombre" />
|
||||
<div *ngIf="editForm.get('nombre')!.invalid && (editForm.get('nombre')!.dirty || editForm.get('nombre')!.touched)">
|
||||
<small class="form-text text-danger" *ngIf="editForm.get('nombre')?.errors?.required" jhiTranslate="entity.validation.required">
|
||||
This field is required.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<div class="form-group w-100">
|
||||
<label class="form-control-label" for="field_passwordNew">Contraseña nueva</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="passwordNew"
|
||||
id="field_passwordNew"
|
||||
data-cy="passwordNew"
|
||||
formControlName="passwordNew"
|
||||
placeholder="Contraseña nueva"
|
||||
/>
|
||||
<div
|
||||
*ngIf="
|
||||
passwordForm.get('passwordNew')!.invalid &&
|
||||
(passwordForm.get('passwordNew')!.dirty || passwordForm.get('passwordNew')!.touched)
|
||||
"
|
||||
>
|
||||
<small
|
||||
class="form-text text-danger"
|
||||
*ngIf="passwordForm.get('passwordNew')?.errors?.required"
|
||||
jhiTranslate="entity.validation.required"
|
||||
>
|
||||
This field is required.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-2">
|
||||
<div class="form-group w-100">
|
||||
<label class="form-control-label" for="field_passwordNewConfirm">Confirmar contraseña nueva</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="passwordNewConfirm"
|
||||
id="field_passwordNewConfirm"
|
||||
data-cy="passwordNewConfirm"
|
||||
formControlName="passwordNewConfirm"
|
||||
placeholder="Contraseña nueva"
|
||||
/>
|
||||
<div
|
||||
*ngIf="
|
||||
passwordForm.get('passwordNewConfirm')!.invalid &&
|
||||
(passwordForm.get('passwordNewConfirm')!.dirty || passwordForm.get('passwordNewConfirm')!.touched)
|
||||
"
|
||||
>
|
||||
<small
|
||||
class="form-text text-danger"
|
||||
*ngIf="passwordForm.get('passwordNewConfirm')?.errors?.required"
|
||||
jhiTranslate="entity.validation.required"
|
||||
>
|
||||
This field is required.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<button type="button" id="cancel-save" data-cy="entityCreateCancelButton" class="btn btn-secondary" (click)="previousState()">
|
||||
<fa-icon icon="ban"></fa-icon> <span jhiTranslate="entity.action.cancel">Cancel</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
id="save-entity"
|
||||
data-cy="entityCreateSaveButton"
|
||||
[disabled]="passwordForm.invalid || isSaving"
|
||||
class="btn btn-primary"
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<div class="form-group w-100">
|
||||
<label class="form-control-label" jhiTranslate="dataSurveyApp.usuarioExtra.fechaNacimiento" for="field_fechaNacimiento"
|
||||
>Fecha de nacimiento</label
|
||||
>
|
||||
<fa-icon icon="save"></fa-icon> <span jhiTranslate="entity.action.save">Save</span>
|
||||
</button>
|
||||
<div class="d-flex">
|
||||
<input
|
||||
id="field_fechaNacimiento"
|
||||
data-cy="fechaNacimiento"
|
||||
type="datetime-local"
|
||||
class="form-control"
|
||||
name="fechaNacimiento"
|
||||
formControlName="fechaNacimiento"
|
||||
placeholder="YYYY-MM-DD HH:mm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-4">
|
||||
<div class="form-group w-100">
|
||||
<label for="iconoPerfil">Ícono de perfil</label>
|
||||
<div class="d-flex">
|
||||
<jhi-swiper style="width: 22.5rem !important" [data]="profileIcons" (onSelectEvent)="selectIcon($event)"></jhi-swiper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<button
|
||||
type="button"
|
||||
id="cancel-save"
|
||||
data-cy="entityCreateCancelButton"
|
||||
class="ds-btn ds-btn--secondary"
|
||||
(click)="previousState()"
|
||||
>
|
||||
<fa-icon icon="arrow-left"></fa-icon> <span jhiTranslate="entity.action.cancel">Cancel</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
id="save-entity"
|
||||
data-cy="entityCreateSaveButton"
|
||||
[disabled]="editForm.invalid || isSaving"
|
||||
class="ds-btn ds-btn--primary"
|
||||
>
|
||||
<span jhiTranslate="entity.action.save">Save</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="row w-75 pb-lg-5 pr-lg-5">
|
||||
<div class="col-lg-4 mr-lg-5">
|
||||
<div class="row">
|
||||
<div class="w-100">
|
||||
<p><b>Contraseña</b></p>
|
||||
</div>
|
||||
<div>
|
||||
<p>Utilice una contraseña segura al realizar el cambio, este dato debe ser secreto ya que provee acceso a su cuenta.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form -->
|
||||
<form class="col-lg ml-lg-5 mr-lg-5 pr-lg-5" name="passwordForm" role="form" novalidate (ngSubmit)="save()" [formGroup]="passwordForm">
|
||||
<div class="row mb-3 pb-3" style="border-bottom: 1px solid #e7ebf3">
|
||||
<div class="form-group w-100">
|
||||
<label class="form-control-label" for="field_password">Contraseña actual</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="password"
|
||||
id="field_password"
|
||||
data-cy="password"
|
||||
formControlName="password"
|
||||
placeholder="Su contraseña actual"
|
||||
/>
|
||||
<div
|
||||
*ngIf="passwordForm.get('password')!.invalid && (passwordForm.get('password')!.dirty || passwordForm.get('password')!.touched)"
|
||||
>
|
||||
<small
|
||||
class="form-text text-danger"
|
||||
*ngIf="passwordForm.get('password')?.errors?.required"
|
||||
jhiTranslate="entity.validation.required"
|
||||
>
|
||||
This field is required.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-2">
|
||||
<div class="form-group w-100">
|
||||
<label class="form-control-label" for="field_passwordNew">Contraseña nueva</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="passwordNew"
|
||||
id="field_passwordNew"
|
||||
data-cy="passwordNew"
|
||||
formControlName="passwordNew"
|
||||
placeholder="Contraseña nueva"
|
||||
/>
|
||||
<div
|
||||
*ngIf="
|
||||
passwordForm.get('passwordNew')!.invalid &&
|
||||
(passwordForm.get('passwordNew')!.dirty || passwordForm.get('passwordNew')!.touched)
|
||||
"
|
||||
>
|
||||
<small
|
||||
class="form-text text-danger"
|
||||
*ngIf="passwordForm.get('passwordNew')?.errors?.required"
|
||||
jhiTranslate="entity.validation.required"
|
||||
>
|
||||
This field is required.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4">
|
||||
<div class="form-group w-100">
|
||||
<label class="form-control-label" for="field_passwordNewConfirm">Confirmar contraseña nueva</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="passwordNewConfirm"
|
||||
id="field_passwordNewConfirm"
|
||||
data-cy="passwordNewConfirm"
|
||||
formControlName="passwordNewConfirm"
|
||||
placeholder="Contraseña nueva"
|
||||
/>
|
||||
<div
|
||||
*ngIf="
|
||||
passwordForm.get('passwordNewConfirm')!.invalid &&
|
||||
(passwordForm.get('passwordNewConfirm')!.dirty || passwordForm.get('passwordNewConfirm')!.touched)
|
||||
"
|
||||
>
|
||||
<small
|
||||
class="form-text text-danger"
|
||||
*ngIf="passwordForm.get('passwordNewConfirm')?.errors?.required"
|
||||
jhiTranslate="entity.validation.required"
|
||||
>
|
||||
This field is required.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<button
|
||||
type="button"
|
||||
id="cancel-save"
|
||||
data-cy="entityCreateCancelButton"
|
||||
class="ds-btn ds-btn--secondary"
|
||||
(click)="previousState()"
|
||||
>
|
||||
<fa-icon icon="ban"></fa-icon> <span jhiTranslate="entity.action.cancel">Cancel</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
id="save-entity"
|
||||
data-cy="entityCreateSaveButton"
|
||||
[disabled]="passwordForm.invalid || isSaving"
|
||||
class="ds-btn ds-btn--primary"
|
||||
>
|
||||
<fa-icon icon="save"></fa-icon> <span jhiTranslate="entity.action.save">Save</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@
|
|||
// Core CSS
|
||||
@import 'paper-dashboard/nucleo-outline';
|
||||
@import 'paper-dashboard/buttons';
|
||||
@import 'paper-dashboard/datasurvey-buttons';
|
||||
@import 'paper-dashboard/social-buttons';
|
||||
@import 'paper-dashboard/animated-buttons';
|
||||
@import 'paper-dashboard/inputs';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
.ds-btn {
|
||||
border-width: $border-thick;
|
||||
font-weight: 400;
|
||||
font-size: 0.9rem;
|
||||
line-height: $line-height;
|
||||
// text-transform: uppercase;
|
||||
border: none;
|
||||
margin: 10px 5px;
|
||||
border-radius: $border-radius-small;
|
||||
padding: $padding-btn-vertical $padding-btn-horizontal;
|
||||
cursor: pointer;
|
||||
|
||||
border-radius: 5px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.025rem;
|
||||
|
||||
position: relative;
|
||||
top: 0;
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.ds-btn--primary {
|
||||
background-color: #2962ff;
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
background-color: #1c44b2;
|
||||
top: -3px;
|
||||
box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.ds-btn--secondary {
|
||||
background-color: transparent;
|
||||
color: #2962ff;
|
||||
|
||||
&:hover {
|
||||
background-color: #f7f9ff;
|
||||
color: #1c44b2;
|
||||
top: -3px;
|
||||
box-shadow: rgba(80, 80, 80, 0.15) 0px 5px 15px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue