Add icon for survey access

This commit is contained in:
Pablo Bonilla 2021-07-15 22:26:34 -06:00
parent 1b0052f4d6
commit f76af324a0
No known key found for this signature in database
GPG Key ID: 46877262B8DE47E2
3 changed files with 22 additions and 6 deletions

View File

@ -81,12 +81,18 @@
</div> </div>
</div> </div>
<br />
<br />
<br /> <br />
<span>{{ encuesta.fechaCreacion | formatMediumDatetime }}</span> <span>{{ encuesta.fechaCreacion | formatMediumDatetime }}</span>
<span>{{ encuesta.calificacion }}</span> <!-- <span>{{ encuesta.calificacion }}</span> -->
<span>{{ encuesta.acceso }}</span>
<span class="title">{{ encuesta.nombre }}</span> <span *ngIf="encuesta.acceso == 'PUBLIC'" class="title"
><fa-icon class="entity-icon--access" [icon]="faUnlock"></fa-icon>&nbsp;&nbsp;{{ encuesta.nombre }}</span
>
<span *ngIf="encuesta.acceso == 'PRIVATE'" class="title"
><fa-icon class="entity-icon--access" [icon]="faLock"></fa-icon>&nbsp;&nbsp;{{ encuesta.nombre }}</span
>
<span class="subtitle">{{ encuesta.descripcion }}</span> <span class="subtitle">{{ encuesta.descripcion }}</span>
<!-- <p> <!-- <p>

View File

@ -23,7 +23,7 @@ import { AccountService } from 'app/core/auth/account.service';
import { Account } from 'app/core/auth/account.model'; import { Account } from 'app/core/auth/account.model';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { faShareAlt } from '@fortawesome/free-solid-svg-icons'; import { faShareAlt, faLock, faUnlock } from '@fortawesome/free-solid-svg-icons';
import * as $ from 'jquery'; import * as $ from 'jquery';
@ -34,6 +34,8 @@ import * as $ from 'jquery';
export class EncuestaComponent implements OnInit, AfterViewInit { export class EncuestaComponent implements OnInit, AfterViewInit {
// Icons // Icons
faShareAlt = faShareAlt; faShareAlt = faShareAlt;
faLock = faLock;
faUnlock = faUnlock;
account: Account | null = null; account: Account | null = null;
usuarioExtra: UsuarioExtra | null = null; usuarioExtra: UsuarioExtra | null = null;

View File

@ -40,6 +40,8 @@
.title { .title {
color: rgba(0, 0, 0, 0.72); color: rgba(0, 0, 0, 0.72);
font-size: 0.9rem; font-size: 0.9rem;
display: flex;
align-items: center;
} }
.subtitle { .subtitle {
@ -49,6 +51,7 @@
.entity-header { .entity-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-self: flex-start;
position: relative; position: relative;
width: 100%; width: 100%;
} }
@ -57,15 +60,20 @@
border-radius: 50%; border-radius: 50%;
background-color: #f1f5f9; background-color: #f1f5f9;
cursor: pointer; cursor: pointer;
width: 25px;
height: 25px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
transition: background-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out;
width: 25px;
height: 25px;
color: #313747; color: #313747;
} }
.entity-icon--access {
font-size: 0.8rem;
color: rgb(154, 156, 158);
}
.entity-share:hover { .entity-share:hover {
background-color: #e3e6e9; background-color: #e3e6e9;
} }